@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @xds/core
 
+# 0.2.0
+
+#### Breaking Changes
+
+- TabList: remove orientation prop (misleading no-op). The prop did not render vertical tabs; it only toggled the keyboard-hint badge arrows. Arrow navigation has always accepted both axes (horizontal and vertical) via orientation: both in useListFocus. Run astryx upgrade to auto-strip the prop from your code.
+
+#### New Features
+
+- `Avatar` gains optional interactivity via `href`/`onClick` (with `as`/`target`/`rel`), following Button's element-swap trichotomy: `href` renders a link through `useLinkComponent`, `onClick` (no href) renders a `<button type="button">`, and with neither the avatar stays the static, non-focusable element it is today (non-breaking default). Interactive avatars get the focus-visible accent ring and a required accessible name (from `alt`/`name`). Inside `AvatarGroup`, interactive avatars — and an interactive `AvatarGroupOverflow` — now share a single Tab stop with roving ArrowLeft/ArrowRight focus, and the group exposes a screen-reader keyboard hint via `aria-describedby`. A purely static facepile is unchanged. (#4170)
+- Citation: `CitationSource.icon` now accepts a `ReactNode` (e.g. an Astryx `<Icon>`, an SVG, or a custom element) in addition to an image URL string, and a new `CitationSource.src` field holds a favicon/logo image URL (mirroring `Avatar`/`Thumbnail`). Additive and non-breaking: a string `icon` still renders as the favicon `<img>`, so existing callers are unaffected. When both a node `icon` and `src` are set, the node wins. The icon stays decorative — the accessible name still comes solely from the citation's `aria-label`.
+- CodeBlock: move the collapse chevron to the left of the title/language label, following the leading-disclosure convention (points right `>` when collapsed, down `v` when expanded). It grows into place (width + inline margin) so it slides the title over smoothly instead of popping in and shifting the header. Respects `prefers-reduced-motion` (#4513)
+- Collapsible: expose the trigger button as a distinct theming target (`astryx-collapsible-trigger`) so themes can style the trigger independently from the content — e.g. a heading font on the trigger while the content keeps the body font.
+- DateInput: add `astryx-date-input-clear-icon` and `astryx-date-input-toggle-icon` theme targets on the clear and calendar-toggle glyphs, so consumers can recolor, resize, and hover-style each icon — and style the toggle's open/closed state — via `defineTheme` instead of a fragile descendant selector or raw CSS. The toggle reflects its open/closed state as a `data-state` attribute. `Icon` now fully handles its styling props (`className`, `style`, `xstyle`) so they compose with its base styles instead of being dropped. Default rendering is unchanged.
+- DateRangeInput: add `astryx-date-range-input-clear-icon` and `astryx-date-range-input-toggle-icon` theme targets on the clear and calendar-toggle glyphs, so consumers can recolor, hover-morph, and resize them via `defineTheme` instead of a fragile descendant selector or raw CSS. The toggle icon reflects its open/closed state as a `data-state` attribute. `Icon` now fully handles its styling props (`className`, `style`, `xstyle`) so they compose with its base styles instead of being dropped. Default rendering is unchanged.
+- DateTimeInput: add `astryx-date-time-input-date-segment` and `astryx-date-time-input-time-segment` theme targets on the two segment wrappers, so a theme can restyle their geometry (padding/height/font) via `defineTheme` instead of being unable to reach them at all. Both reflect `size` and `status` as data attributes, mirroring the root target. Default rendering is unchanged.
+- DropdownMenu: add submenus via a single `DropdownMenuSubMenu` component (or a nested `items` array in data mode). The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled) and its children — or an `items` array — become the flyout content. Flyouts open inline-end with auto-flip, hover-intent, and full keyboard support (Right/Enter/Space opens and focuses the first item; Left/Escape closes and returns focus to the trigger).
+- Bordered inputs gain a `statusVariant="tooltip"` option that hides the status message box and surfaces the status as an info-tip on the on-field status icon. The icon is a real focusable button so the status is reachable by everyone: keyboard users tab to it (with a visible focus ring) and see the message on focus, pointer users see it on hover, and touch users tap to toggle it. The message is piped into both the input's and the button's `aria-describedby`, and the tooltip is dismissible with Escape. Added to TextInput, TextArea, NumberInput, DateInput, DateRangeInput, TimeInput, and FileInput.
+- The bordered input family now accepts a `statusVariant` prop (`'attached' | 'detached'`, default `'attached'`) that forwards to the underlying `Field`, letting you float the status message below the input with spacing instead of overlapping it. Added to TextInput, TextArea, NumberInput, DateInput, DateRangeInput, TimeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput, and PowerSearch. Non-breaking: the default matches today's behavior. (#4187)
+- Add RTL direction API: `useDirection()` hook, `getLocaleDirection(locale)` server-safe helper, and an optional `dir` prop on `InternationalizationProvider`.
+- RTL: mirror directional disclosure/navigation chevrons under RTL via a shared `rtlStyles.mirror` CSS transform, applied to the icon wrapper in Lightbox and the Table tree / grouped-rows / row-expansion plugins. The mirror composes correctly with the Table chevrons' state-rotation (expanded chevrons still point down under RTL). Semantic aria-labels are unchanged.
+- Selector & MultiSelector: add `astryx-selector-clear-icon`, `astryx-selector-indicator-icon`, `astryx-multi-selector-clear-icon`, and `astryx-multi-selector-indicator-icon` theme targets on the clear and chevron glyphs, so consumers can recolor, resize, and hover-style each icon — and style the chevron's open/closed state — via `defineTheme` instead of a fragile descendant selector or raw CSS. Each chevron reflects its open/closed state as a `data-state` attribute. `Icon` now fully handles its styling props (`className`, `style`, `xstyle`) so they compose with its base styles instead of being dropped. Default rendering is unchanged.
+- add size prop (sm / md) to Switch to match CheckboxInput and RadioList boolean control scales (#4230)
+- Table: `rowIndexStart` and `rowCount` props expose row numbering as a table-level ARIA concern, so `aria-rowindex`/`aria-rowcount` reflect a row's position in the full dataset: correct across pagination and even when no visible index column is rendered. Opt-in; tables that set neither prop are unchanged. Closes #3939.
+- Timestamp: new `tooltipEntries` prop renders the hover tooltip across several time zones and/or formats at once — one line per entry, each with an optional `timezoneID` (IANA id; omit it or pass `'local'` for the viewer's zone), `format` (every non-relative `TimestampFormat` plus `'full'`), and `label`. The default is unchanged: with no entries the tooltip stays the single full absolute line in the viewer's zone. Configuring entries also attaches the tooltip to absolute formats, which previously had none — note that this gives those timestamps a tab stop and focus ring, as relative timestamps already have, so a column of them gains one tab stop per row. `hasTooltip={false}` still suppresses the tooltip, and an empty array counts as no configuration. Also corrects `isTimezoneShown`'s documentation, which claimed it applied to the `system_date_time` and `system_time` formats; it never has, and those formats stay machine-readable. (#4188)
+- Token: make the `color` prop extensible via module augmentation. `TokenColor` is now derived from a `TokenColorMap` interface, so theme packages can add custom colors (and `astryx theme build` generates the type augmentation), matching Badge and Button.
+- TreeList: the per-level indentation step is now the themeable `--tree-list-indent` variable (default `var(--spacing-4)`), so a theme can retune the indent metric via `defineTheme` on the `tree-list` target instead of the previously hardcoded, unreachable step (#4308).
+- TreeList: add a `variant` prop (`'lineGuides' | 'noGuides'`, default `'lineGuides'`) to select the base hierarchy guide-line look. `noGuides` hides the connector lines while keeping indentation intact. Orthogonal to `density` (spacing); the guides stay themeable via the `astryx-tree-list-guide` target. Non-breaking — omitting the prop renders exactly as before.
+
+#### Fixes
+
+- Avatar: compose the status dot's label into the avatar's accessible name so assistive tech can reach the status the `role="img"` root previously pruned (WCAG 4.1.2)
+- Calendar: expose selected state in day-button accessible names, announce range-selection progress and completion via the polite live region, and set aria-multiselectable on the grid in range mode
+- CommandPalette: announce result counts, empty, and loading states to screen readers via the shared polite live region (WCAG 4.1.3)
+- Divider: expose the label as the separator's accessible name via aria-labelledby; Spinner: name the status element from the visible label instead of duplicating it as aria-label
+- FileInput: announce the required state via a visually hidden description on the trigger (aria-required is unsupported on role="button") and announce validation errors exactly once
+- hooks: resolve focus-trap Escape by DOM depth instead of push order, exclude aria-hidden subtrees from trap tab cycles, and auto-clear live regions after announcing so stale status text does not linger
+- List: keep list semantics for all listStyle variants by always emitting an explicit role="list", since the base style strips list-style-type for every variant and Safari/VoiceOver drops implicit list roles for such lists (WCAG 1.3.1)
+- NumberInput: announce the units text through the input's accessible description, and stop TextInput/NumberInput from referencing the non-rendered status message id in aria-describedby inside InputGroup
+- reset: stop suppressing `:focus-visible` outlines on coarse-pointer devices so keyboard users keep the WCAG 2.4.7 focus indicator
+- hooks: auto-detect RTL direction for arrow-key navigation in useListFocus and useGridFocus (WCAG 1.3.2)
+- Slider: constrain range thumb aria-valuemin/aria-valuemax by the sibling thumb (including minStepsBetweenThumbs) and render the label as a group label wired via aria-labelledby instead of an inert <label htmlFor>
+- TopNav: disabled TopNavItems now render href-less anchors so they no longer navigate or fire clicks, and Outline's active item uses aria-current="location"
+- Avatar: avoid remounting the avatar subtree when the name tooltip toggles — render the tooltip as a conditional sibling instead of forking the return so the avatar keeps its position in the React tree (and its image-load state) across tooltip changes.
+- Card: rest the bordered variant on the subtle `--color-border` instead of `--color-border-emphasized`, so a Card's outer frame matches its own LayoutHeader/LayoutFooter dividers and neighboring ClickableCards instead of rendering a heavier edge.
+- CheckboxInput, RadioList, Switch: align control sizes. The visible checkbox and radio controls now fill their size exactly (20px at `sm`, 24px at `md`) instead of being inset 2px. The `sm` Switch track is now 32px wide with a 2px inset.
+- Export the `BaseProps` type through the `@astryxdesign/core/BaseProps` subpath. Previously it was only reachable through the package barrel, so the `import type {BaseProps} from '@astryxdesign/core/BaseProps'` specifier that `astryx swizzle` generates failed to resolve (#4091).
+- Guard DropdownMenu item hover styles with `@media (hover: hover)` to prevent sticky highlights on touch devices. Forward BaseProps pass-throughs to the menu element.
+- FieldStatus renders a leading status icon on the `detached` message so status is not conveyed by color/position alone (WCAG 1.4.1). The icon is decorative for assistive tech; the message text and live-region announcement carry the status. The `attached` variant is unchanged.
+- FileInput no longer nests interactive controls (the clear and status buttons) inside a role="button" trigger. The trigger is now a visually hidden button alongside them in a non-interactive container, resolving the nested-interactive a11y violation (WCAG 4.1.2) while keeping click, keyboard, and drag-and-drop behavior. (#4522)
+- Inputs no longer show the hover ring while disabled. The shared input wrapper's disabled state now suppresses both the base and status hover shadows, so TextInput, TextArea, NumberInput, DateInput, TimeInput, Selector, MultiSelector, Typeahead, and Tokenizer stay visually inert on hover when disabled.
+- HoverCard: move themeProps className to the layer container (where bg/radius/shadow live) so themes can target the visual surface. Forward consumer xstyle/className/style to that same layer container so surface customization lands next to the theme class, instead of silently dropping them.
+- With `statusVariant="detached"`, bordered inputs no longer render a status icon inside the control (this also covers DateTimeInput, which is fixed to the detached presentation) — the detached message box already carries a leading icon, so the on-field glyph was a duplicate. Also centers the detached message's icon on the first line of text.
+- DropdownMenu/ContextMenu: mouse hover now moves the highlight instead of adding a second one, so keyboard focus and pointer hover share a single highlighted item (#4493)
+- utils: clamp plainDateAddMonths to the target month's last day
+  Adding a month to Jan 31 landed on Mar 3 (Date#setMonth overflow) instead of Feb 28, so month arithmetic from end-of-month dates skipped February entirely. The helper now uses pure month arithmetic and clamps the day, matching Temporal.PlainDate.add and date-fns.
+- Calendar RTL: month-navigation chevrons now mirror correctly under RTL (via the shared `rtlStyles.mirror` transform on the nav-icon wrapper), and the range-selection / hover-preview fill pills use logical CSS (`insetInline*`, `border*Start/EndRadius`) so their rounded start/end caps follow the reading direction instead of the physical left/right. LTR rendering is unchanged.
+- Carousel now supports RTL: the directional scroll-button chevrons mirror under RTL, the scroll buttons respect RTL scroll semantics (previously the button was a no-op under RTL), and the button pills sit on the correct edges.
+- RTL: migrate physical `left`/`right` CSS properties to their logical equivalents so components mirror correctly under `dir="rtl"`. This is the Phase 2 mechanical, one-to-one follow-up to the RTL direction API — a no-op in the default LTR direction with no visual change.
+- RTL Phase 4 (behavioral): mirror directional behavior that logical-CSS and icon name-swaps alone couldn't fix. SideNavCollapseButton and TreeListItem now compose `rtlStyles.mirror` on the icon wrapper outside the state rotation, so the chevrons point toward the correct edge in every collapsed/expanded × LTR/RTL combination. TreeList connector/guide lines position via logical `inset-inline-start`/`inset-inline-end` so they mirror to the inline-start (right) edge under RTL alongside the chevron and row indent. Slider positions its thumb, fill, and marks via logical `inset-inline-start` and flips the physical centering transform under RTL, and its pointer/click math measures the value fraction from the inline-start (right) edge under RTL — so a click at 25% of the track maps to 75 instead of 25.
+- RTL Phase 4b behavioral fixes: ChatMessageBubble grouped-bubble tail corners now use logical border radii so the tail follows reading direction (mirrors under RTL, text unaffected); Table sticky-column shadows make their `translateX` and gradient direction-aware so the shadow fades from the pinned edge toward scrolled content in both LTR and RTL instead of rendering inside-out, and gate shadow visibility on `Math.abs(scrollLeft)` so the start/end shadows still appear under RTL (where spec-compliant browsers report a negative `scrollLeft`); ResizeHandle's hit-area bias is now direction-aware (mirrors about center under RTL) and the pointer-drag delta reads the handle's computed direction so dragging resizes intuitively in RTL.
+- Markdown honors the `components.image` override for standalone (block) images, matching the inline image path. A standalone `![alt](src)` line parses as a block image, whose render path previously hardcoded a bare `<img>` and ignored a supplied `components.image`; it now uses the override just like an inline image does.
+- Selector & MultiSelector: keep group headers visible while searching; hide groups with no matching items. Previously, typing a query flattened grouped options into a single ungrouped list; now each group header stays above its matching items and a group is hidden only when none of its items match.
+- SideNav: remove the top border above the footer region so the `footer` slot no longer renders a divider line.
+- Slider: round snapped values to the min/step decimal precision
+  With fractional steps, `min + steps * step` accumulated binary floating-point error, so a keyboard nudge on a `step={0.1}` slider emitted `0.30000000000000004` through `onChange`/`onChangeEnd` (and into `aria-valuenow`/the value tooltip once the consumer echoed it back). Snapped values are now rounded to the combined decimal precision of `min` and `step`, which removes only the error — exact steps are unaffected.
+- Tooltip: dismiss the tooltip when its trigger is pressed. Previously the tooltip stayed open through a click (e.g. a "Copy link" button's tooltip lingered after activation); now pressing the trigger hides its own tooltip. Applies to uncontrolled tooltips only.
+- Typeahead: omit aria-activedescendant when search results are empty or index is out of bounds (#4059)
+
+#### Documentation
+
+- document `width` prop across 17 input component doc files (#4163)
+
+#### Other Changes
+
+- Add `@astryx/no-physical-properties` ESLint rule that flags physical left/right CSS properties inside `stylex.create()` and suggests the CSS logical equivalent for RTL support.
+- KEY-BASED: `marginLeft`/`marginRight`, `paddingLeft`/`paddingRight`, `borderLeft`/`borderRight` (+ their `Width`/`Style`/`Color` longhands), `left`/`right` → `insetInlineStart`/`insetInlineEnd`, and the four physical corner radii → their diagonal-aware logical names (`borderTopLeftRadius` → `borderStartStartRadius`, etc.).
+- VALUE-BASED: `textAlign: 'left'|'right'`, `float: 'left'|'right'`, and `clear: 'left'|'right'` (the key stays, only the physical value is flagged).
+- Scoped strictly to `stylex.create()` — physical identifiers used elsewhere are ignored.
+- `useDirection()` returns `'ltr' | 'rtl'` for the current provider context (falls back to `'ltr'` when called outside a provider).
+- `getLocaleDirection(locale)` computes direction from a BCP 47 locale via `Intl.Locale.getTextInfo()` — safe to call from React Server Components and Next.js layouts to set `<html dir>`.
+- `<InternationalizationProvider locale="ar">` auto-derives `dir="rtl"`. Pass an explicit `dir` prop to override (useful for RTL testing under an English catalog, or to force LTR).
+- Pagination is the first component to consume the hook: prev/next chevron icons flip under RTL while the aria-labels stay semantic.
+- Storybook gains a global `Direction` toolbar for toggling every story between LTR and RTL.
+- Component-level CSS migrations (borders, chevrons, sliders, calendar range pills, etc.) land in follow-up PRs.
+- `textAlign: 'left' | 'right'` → `'start' | 'end'` (Selector, Typeahead, Chat trigger menu, DropdownMenu, CommandPalette, NavMenu items).
+- `borderLeft*`/`borderRight*` → `borderInlineStart*`/`borderInlineEnd*`, kept as separate start/end declarations (Banner, Table cell/header dividers, DateRangeInput preset sidebar).
+- Static `left`/`right` positioning → `insetInlineStart`/`insetInlineEnd` for full-bleed overlays and single-side offsets (Button spinner overlay, Chat dock/blur/placeholder, Field sr-only label, Lightbox close/nav/counter buttons, TabList indicators, Thumbnail remove slot, CodeBlock copy button).
+- Inline `marginLeft` indentation → `marginInlineStart` (TreeList rows).
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @AKnassa
+- @arham766
+- @bhamodi
+- @cixzhang
+- @ernestt
+- @freddymeta
+- @HelloOjasMutreja
+- @humbertovirtudes
+- @kentonquatman
+- @lexs
+- @nynexman4464
+
+---
+
 # 0.1.9
 
 #### New Features

package/dist/Avatar/Avatar.d.ts

@@ -1,7 +1,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
  *
@@ -10,15 +10,18 @@
  * - /packages/core/src/Avatar/index.ts (exports if types change)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ *
+ * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
+import type { LinkComponentType } from '../Link/types';
 /**
  * Named size options.
  *
  * Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
  * but the values are larger because avatars align with media rather than
- * glyphs. The tiers match EPS's avatar sizes.
+ * glyphs. The tiers follow the standard avatar size scale.
  */
 type AvatarNamedSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
 /**
@@ -69,6 +72,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;
     /**
@@ -84,6 +92,35 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
      * @default true
      */
     tooltip?: string | boolean;
+    /**
+     * When provided, the avatar becomes an interactive link (`<a>` or custom
+     * link component) pointing at `href`. Follows the same element-swap rules as
+     * Button: `href` renders a link, otherwise `onClick` renders a
+     * `<button type="button">`, otherwise the avatar stays a static (non-focusable)
+     * element. An interactive avatar requires a meaningful accessible name via
+     * `alt` or `name`.
+     */
+    href?: string;
+    /**
+     * Custom link component to use when `href` is provided. Overrides the
+     * provider-level default set by LinkProvider. Useful for Next.js `<Link>` or
+     * other router-aware components. Only applies when `href` is provided.
+     */
+    as?: LinkComponentType;
+    /**
+     * HTML target attribute for the link. Only applies when `href` is provided.
+     */
+    target?: string;
+    /**
+     * HTML rel attribute for the link. Only applies when `href` is provided.
+     */
+    rel?: string;
+    /**
+     * Click handler. When provided without `href`, renders the avatar as a
+     * focusable `<button type="button">`. An interactive avatar requires a
+     * meaningful accessible name via `alt` or `name`.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
 }
 /**
  * Avatar component for displaying user profile pictures.
@@ -98,9 +135,11 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
  * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
  * <Avatar name="Jane" tooltip={false} />
+ * <Avatar src="/user.jpg" name="John Doe" href="/users/john" />
+ * <Avatar src="/user.jpg" name="John Doe" onClick={() => openProfile()} />
  * ```
  */
-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 function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, tooltip, href, as, target, rel, onClick, 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;;;;;;;;;;;;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"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;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;AAiJD,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;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAoPb;yBAvQe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -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
  *
@@ -14,8 +14,10 @@
  * - /packages/core/src/Avatar/index.ts (exports if types change)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ *
+ * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
-import { useMemo, useState } from 'react';
+import { isValidElement, useMemo, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
@@ -24,6 +26,8 @@ import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTooltip } from "../Tooltip/useTooltip.js";
+import { useLinkComponent } from "../Link/useLinkComponent.js";
+import { useTranslator } from "../i18n/index.js";
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -56,7 +60,7 @@ const INITIALS_FONT_SIZE_RATIO = 0.4;
  *
  * Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
  * but the values are larger because avatars align with media rather than
- * glyphs. The tiers match EPS's avatar sizes.
+ * glyphs. The tiers follow the standard avatar size scale.
  */
 
 /**
@@ -97,6 +101,7 @@ const styles = {
     kVAEAm: "x1n2onr6",
     k1xSpc: "x3nfvp2",
     kmuXW: "x2lah0s",
+    kaIpWk: "xjspbzw",
     $$css: true
   },
   content: {
@@ -114,10 +119,10 @@ const styles = {
     kjj79g: "xl56j7k",
     kzqmXN: "xh8yej3",
     kZKoxP: "x5yr21d",
-    kWkggS: "x17x4s8c",
-    kMwMTN: "xv1l7n4",
+    kWkggS: "xelv01g",
+    kMwMTN: "xicfil",
     kMv6JI: "x9ynric",
-    k63SB2: "x1e4wzip",
+    k63SB2: "xi08x9w",
     kP9fke: "xtvhhri",
     $$css: true
   },
@@ -129,6 +134,24 @@ const styles = {
     kI3sdo: "x17nn4n9",
     kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
+  },
+  interactive: {
+    kysU6D: "xjyslct",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kVVagm: "xln7xf2",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xjspbzw",
+    kMeerF: "x1k57tk5 x784prv",
+    k3XXqK: "x1t137rt x9v5kkp",
+    kjBf7l: "xzunyri",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
   }
 };
 
@@ -155,7 +178,7 @@ const dynamicStyles = {
     "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size)
   }],
   fontSize: size => [_temp, {
-    "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * INITIALS_FONT_SIZE_RATIO)
+    "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`var(--_avatar-fallback-font-size, ${size * INITIALS_FONT_SIZE_RATIO}px)`)
   }],
   statusPosition: size => [_temp2, {
     "--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO),
@@ -207,6 +230,26 @@ function getInitials(name) {
   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) {
+  if (! /*#__PURE__*/isValidElement(status)) {
+    return undefined;
+  }
+  const {
+    label
+  } = status.props;
+  return typeof label === 'string' && label !== '' ? label : undefined;
+}
+
 /**
  * Default person icon SVG for when no image or name is provided
  */
@@ -238,6 +281,8 @@ function DefaultIcon({
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
  * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
  * <Avatar name="Jane" tooltip={false} />
+ * <Avatar src="/user.jpg" name="John Doe" href="/users/john" />
+ * <Avatar src="/user.jpg" name="John Doe" onClick={() => openProfile()} />
  * ```
  */
 export function Avatar({
@@ -249,6 +294,11 @@ export function Avatar({
   src,
   status,
   tooltip = true,
+  href,
+  as,
+  target,
+  rel,
+  onClick,
   xstyle,
   className,
   style,
@@ -264,10 +314,21 @@ 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;
@@ -293,18 +354,117 @@ export function Avatar({
   // 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).
+  // tooltip on keyboard focus once the root is focusable (natively for the
+  // interactive <a>/<button>, or via an explicit tab stop on the static div).
   const tooltipHook = useTooltip({
     placement: 'above',
     isEnabled: showTooltip
   });
+  // The tooltip ref attaches to whichever root element renders (static or
+  // interactive), so the tooltip works for link/button avatars too.
   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", {
+
+  // Element-swap trichotomy, copied from Button: `href` renders a link,
+  // otherwise `onClick` renders a `<button>`, otherwise today's static element
+  // is unchanged (the non-breaking default).
+  const renderAsLink = href != null;
+  const renderAsButton = !renderAsLink && onClick != null;
+  const isInteractive = renderAsLink || renderAsButton;
+  const LinkComponent = useLinkComponent(as);
+
+  // An interactive control with no accessible name is an unacceptable control
+  // name. Warn in the same client-safe way sibling components do (Field,
+  // Timestamp, Popover) — a plain `console.warn`, never gated on `process.env`
+  // (which is not available on the client in this codebase).
+  if (isInteractive && !accessibleName) {
+    console.warn('Avatar: an interactive avatar (with `href` or `onClick`) needs a ' + 'meaningful accessible name. Pass `alt` or `name`.');
+  }
+
+  // The inner visuals are identical across the static and interactive variants.
+  const visualContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
+      children: [showImage && /*#__PURE__*/_jsx("img", {
+        src: src,
+        alt: "",
+        onError: () => setErroredSrc(src),
+        ...{
+          className: "xh8yej3 x5yr21d xl1xv1r"
+        }
+      }), showFallbackImage && /*#__PURE__*/_jsx("img", {
+        src: fallbackSrc,
+        alt: "",
+        onError: () => setErroredFallbackSrc(fallbackSrc),
+        ...{
+          className: "xh8yej3 x5yr21d xl1xv1r"
+        }
+      }), showInitials && /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
+        children: getInitials(name)
+      }), showIcon && /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xelv01g xicfil x9ynric xi08x9w xtvhhri"
+        },
+        children: /*#__PURE__*/_jsx(DefaultIcon, {
+          size: numericSize
+        })
+      })]
+    }), status && /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
+      children: status
+    })]
+  });
+
+  // Shared StyleX + theme props for the root element in every variant. The
+  // group ring/overlap, the interactive focus-visible ring, and the
+  // tooltip tab-stop focus ring all live here so the interactive
+  // `<a>`/`<button>` and the static `<div>` carry the exact same box.
+  const rootStylexProps = mergeProps(themeProps('avatar', {
+    size: resolvedSize
+  }), stylex.props(styles.wrapper, isInteractive && styles.interactive, !isInteractive && showTooltip && !avatarGroup && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style);
+  let rootElement;
+
+  // `props` is typed for the default `<div>` root (its event handlers are
+  // HTMLDivElement-typed). The interactive branches render an `<a>`/`<button>`,
+  // so the passthrough props are re-typed to the generic element here — the
+  // avatar's own handlers (onClick) are declared on HTMLElement and stay typed.
+  const interactivePassthrough = props;
+  if (renderAsLink) {
+    // The rendered link carries the `data-avatar-item` marker so AvatarGroup's
+    // roving focus (which selects on `[data-avatar-item]`, not a tag/role) picks
+    // it up while ignoring nested buttons in a custom status/badge slot.
+    rootElement = /*#__PURE__*/_jsx(LinkComponent, {
+      ...interactivePassthrough,
+      ...describedByProp,
+      ref: rootRef,
+      href: href,
+      target: target,
+      rel: rel,
+      "aria-label": accessibleName,
+      "data-avatar-item": "",
+      "data-testid": testId,
+      onClick: onClick,
+      ...rootStylexProps,
+      children: visualContent
+    });
+  } else if (renderAsButton) {
+    rootElement = /*#__PURE__*/_jsx("button", {
+      ...interactivePassthrough,
+      ...describedByProp,
+      ref: rootRef,
+      type: "button",
+      "aria-label": accessibleName,
+      "data-avatar-item": "",
+      "data-testid": testId,
+      onClick: onClick,
+      ...rootStylexProps,
+      children: visualContent
+    });
+  } else {
+    rootElement = /*#__PURE__*/_jsx("div", {
       ...props,
       ref: rootRef,
       role: isDecorative ? 'presentation' : 'img',
@@ -312,56 +472,27 @@ export function Avatar({
       "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.
+      // (WCAG 1.4.13 / 2.1.1) — matching Timestamp/Button. Suppressed inside
+      // an AvatarGroup, which owns a single roving tab stop for its members.
       ,
-      tabIndex: showTooltip ? 0 : undefined,
+      tabIndex: showTooltip && !avatarGroup ? 0 : undefined,
       "data-testid": testId,
       ...describedByProp,
-      ...mergeProps(themeProps('avatar', {
-        size: resolvedSize
-      }), 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", {
-          src: src,
-          alt: "",
-          onError: () => setErroredSrc(src),
-          ...{
-            className: "xh8yej3 x5yr21d xl1xv1r"
-          }
-        }), showFallbackImage && /*#__PURE__*/_jsx("img", {
-          src: fallbackSrc,
-          alt: "",
-          onError: () => setErroredFallbackSrc(fallbackSrc),
-          ...{
-            className: "xh8yej3 x5yr21d xl1xv1r"
-          }
-        }), showInitials && /*#__PURE__*/_jsx("div", {
-          ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
-          children: getInitials(name)
-        }), showIcon && /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
-          },
-          children: /*#__PURE__*/_jsx(DefaultIcon, {
-            size: numericSize
-          })
-        })]
-      }), status && /*#__PURE__*/_jsx("div", {
-        ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
-        children: status
-      })]
-    })
-  });
-  if (!showTooltip) {
-    return avatarElement;
+      ...rootStylexProps,
+      children: visualContent
+    });
   }
+  const avatarElement = /*#__PURE__*/_jsx(AvatarSizeContext, {
+    value: numericSize,
+    children: rootElement
+  });
 
-  // 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.
+  // Always return the same structure so the avatar keeps its position in the
+  // React tree regardless of the tooltip flag — toggling it must not remount
+  // the avatar subtree (and lose image-load state). The tooltip is a sibling
+  // (no wrapper DOM); the hook's ref is already on the root via `rootRef`.
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [avatarElement, tooltipHook.renderTooltip(trimmedTooltip)]
+    children: [avatarElement, showTooltip ? tooltipHook.renderTooltip(trimmedTooltip) : null]
   });
 }
 Avatar.displayName = 'Avatar';

package/dist/Avatar/AvatarStatusDot.d.ts

@@ -60,10 +60,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/dist/Avatar/AvatarStatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyCtB;yBAlDe,eAAe"}
+{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyCtB;yBAlDe,eAAe"}

package/dist/AvatarGroup/AvatarGroup.d.ts

@@ -8,6 +8,12 @@
  * 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)
@@ -53,7 +59,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
  * </AvatarGroup>
  * ```
  */
-export declare function AvatarGroup({ children, size, 'data-testid': testId, 'aria-label': ariaLabelFromProps, xstyle, className, style, ref, ...props }: AvatarGroupProps): ReactNode;
+export declare function AvatarGroup({ children, size, 'data-testid': testId, 'aria-label': ariaLabelFromProps, 'aria-describedby': ariaDescribedByFromProps, onKeyDown, onFocus, xstyle, className, style, ref, ...props }: AvatarGroupProps): ReactNode;
 export declare namespace AvatarGroup {
     var displayName: string;
 }