feat: Avatar component

[Samyssmile]

Summary

Add a ct-avatar component for displaying user representations (images, initials, or fallback icons). Avatars are one of the most frequently used UI elements — user lists, comments, headers, cards, and anywhere identity needs to be shown.

Requirements

Variants

• Image avatar — <img> with border-radius: 50% and object-fit: cover
• Initials avatar — text fallback when no image is available (e.g., "JS" for "Jane Smith"), centered text on colored background
• Icon avatar — SVG icon fallback (generic user silhouette)

Sizes

• ct-avatar--sm — 24×24px (inline mentions, compact lists)
• default (md) — 32×32px (standard use)
• ct-avatar--lg — 48×48px (profile headers, cards)
• ct-avatar--xl — 64×64px (profile pages)

Avatar Group / Stack

• ct-avatar-group — overlapping avatars with negative margin
• ct-avatar-group__overflow — "+3" counter for truncated groups
• Configurable overlap via CSS custom property

States

• data-status="online|offline|busy|away" — status indicator dot (positioned bottom-right)
• Customizable status dot color via semantic tokens

Accessibility

• alt text required on image avatars
• Initials avatar: role="img" with aria-label for full name
• Status dot must have aria-label (e.g., "Online") — not just color-coded
• Group: announce total count to screen readers

Naming

.ct-avatar
.ct-avatar--sm / --lg / --xl
.ct-avatar__image
.ct-avatar__initials
.ct-avatar__icon
.ct-avatar__status
.ct-avatar-group
.ct-avatar-group__overflow

Design Tokens

• --ct-avatar-radius: 50%
• --ct-avatar-bg: var(--color-bg-muted) (initials/icon background)
• --ct-avatar-color: var(--color-text-secondary) (initials/icon color)
• --ct-avatar-status-size: 10px
• --ct-avatar-group-overlap: -8px

Files

• components/components.css — component styles
• stories/Avatar.stories.js — stories covering all variants, sizes, states, and group

[Samyssmile]

Implemented in 231f4d9. Avatar component with image/initials/icon variants, sm/md/lg/xl sizes, status indicators, avatar groups with overflow, and full WCAG 2.1 AA accessibility.