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

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
  *
@@ -13,9 +13,11 @@
  * - /packages/core/src/Avatar/Avatar.doc.mjs (props table, features, implementation notes)
  * - /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)
+ * - /packages/cli/assets/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
   }
 };
 
@@ -141,8 +164,8 @@ const _temp = {
 };
 const _temp2 = {
   krVfgx: "x1nqzi6q",
-  kCIrl2: "x7ok3n0",
-  k3aq6I: "x4v1no5",
+  kt4wiu: "xqxgn94",
+  k3aq6I: "x4v1no5 " + "xqgnvz5",
   "$$css": true
 };
 const dynamicStyles = {
@@ -155,11 +178,11 @@ 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),
-    "--x-right": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO)
+    "--x-insetInlineEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO)
   }]
 };
 const BORDER_WIDTH = 2;
@@ -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

@@ -8,35 +8,11 @@
  * - /packages/core/src/Avatar/Avatar.doc.mjs (features, files table)
  * - /packages/core/src/Avatar/index.ts (exports)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Avatar/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-/**
- * Extensible variant map for AvatarStatusDot.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Avatar' {
- *   interface AvatarStatusDotVariantMap {
- *     'away': true;
- *   }
- * }
- * ```
- *
- * Custom variants render no background fill, no ink colour, and no built-in
- * shape glyph — the theme must supply the fill and, if it passes an `icon`,
- * a `color` for it to paint with. It should also supply a non-colour mark
- * so the status is not distinguishable by colour alone (a WCAG 1.4.1
- * failure): pass `icon`, or theme a glyph onto the dot via
- * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
- */
-export interface AvatarStatusDotVariantMap {
-    success: true;
-    neutral: true;
-    error: true;
-}
+import type { AvatarStatusDotVariantMap } from './index';
 /**
  * AvatarStatusDot variant type. Extensible via module augmentation of AvatarStatusDotVariantMap.
  */
@@ -60,10 +36,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;AAM5C,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AA4CvD;;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/Avatar/AvatarStatusDot.js

@@ -12,7 +12,7 @@
  * - /packages/core/src/Avatar/Avatar.doc.mjs (features, files table)
  * - /packages/core/src/Avatar/index.ts (exports)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Avatar/ (showcase blocks)
  */
 import React, { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -73,27 +73,6 @@ function resolveStatusDotSize(avatarSize) {
   };
 }
 
-/**
- * Extensible variant map for AvatarStatusDot.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Avatar' {
- *   interface AvatarStatusDotVariantMap {
- *     'away': true;
- *   }
- * }
- * ```
- *
- * Custom variants render no background fill, no ink colour, and no built-in
- * shape glyph — the theme must supply the fill and, if it passes an `icon`,
- * a `color` for it to paint with. It should also supply a non-colour mark
- * so the status is not distinguishable by colour alone (a WCAG 1.4.1
- * failure): pass `icon`, or theme a glyph onto the dot via
- * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
- */
-
 /**
  * AvatarStatusDot variant type. Extensible via module augmentation of AvatarStatusDotVariantMap.
  */

package/dist/Avatar/index.d.ts

@@ -6,8 +6,33 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
  */
+/**
+ * Extensible variant map for AvatarStatusDot.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Avatar' {
+ *   interface AvatarStatusDotVariantMap {
+ *     'away': true;
+ *   }
+ * }
+ * ```
+ *
+ * Custom variants render no background fill, no ink colour, and no built-in
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
+ * a `color` for it to paint with. It should also supply a non-colour mark
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
+ * failure): pass `icon`, or theme a glyph onto the dot via
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
+ */
+export interface AvatarStatusDotVariantMap {
+    success: true;
+    neutral: true;
+    error: true;
+}
 export { Avatar, resolveSize } from './Avatar';
 export type { AvatarProps, AvatarSize } from './Avatar';
 export { AvatarStatusDot } from './AvatarStatusDot';
-export type { AvatarStatusDotProps, AvatarStatusDotVariant, AvatarStatusDotVariantMap, } from './AvatarStatusDot';
+export type { AvatarStatusDotProps, AvatarStatusDotVariant, } from './AvatarStatusDot';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC"}

package/dist/Avatar/index.js

@@ -10,5 +10,26 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
  */
+
+/**
+ * Extensible variant map for AvatarStatusDot.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Avatar' {
+ *   interface AvatarStatusDotVariantMap {
+ *     'away': true;
+ *   }
+ * }
+ * ```
+ *
+ * Custom variants render no background fill, no ink colour, and no built-in
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
+ * a `color` for it to paint with. It should also supply a non-colour mark
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
+ * failure): pass `icon`, or theme a glyph onto the dot via
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
+ */
 export { Avatar, resolveSize } from "./Avatar.js";
 export { AvatarStatusDot } from "./AvatarStatusDot.js";

package/dist/AvatarGroup/AvatarGroup.d.ts

@@ -8,11 +8,17 @@
  * one AvatarGroupOverflow). The group provides overlap styling via
  * context — no child introspection needed.
  *
+ * When the group contains interactive avatars (rendered as links/buttons) or an
+ * interactive AvatarGroupOverflow, it becomes a single Tab stop with roving
+ * arrow-key focus (via useListFocus with hasRovingTabIndex) and exposes a
+ * screen-reader keyboard hint via aria-describedby. A purely static facepile
+ * gets neither — it stays a plain non-focusable group.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs (props table, features)
  * - /packages/core/src/AvatarGroup/index.ts (exports if types change)
  * - /apps/storybook/stories/AvatarGroup.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/AvatarGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
@@ -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;
 }

package/dist/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AASvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA6B9B;yBAvCe,WAAW"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAavD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAuE9B;yBApFe,WAAW"}