Add `s-avatar` component

[auswm85]

Problem

Displaying user avatars with proper sizing, rounded styling, and fallback states is a common need that requires custom CSS in every project.

Proposed Solution

Add an s-avatar component for user/entity images:

<!-- Basic with image -->
<img s-avatar src="user.jpg" alt="Jane Doe">

<!-- Sizes -->
<img s-avatar s-size="xs" src="user.jpg" alt="">
<img s-avatar s-size="sm" src="user.jpg" alt="">
<img s-avatar src="user.jpg" alt="">
<img s-avatar s-size="lg" src="user.jpg" alt="">
<img s-avatar s-size="xl" src="user.jpg" alt="">

<!-- Initials fallback -->
<span s-avatar s-size="lg">JD</span>

<!-- With status indicator -->
<div s-avatar-wrapper>
  <img s-avatar src="user.jpg" alt="Jane Doe">
  <span s-avatar-status="online"></span>
</div>

<!-- Group/stack -->
<div s-avatar-group>
  <img s-avatar src="user1.jpg" alt="">
  <img s-avatar src="user2.jpg" alt="">
  <img s-avatar src="user3.jpg" alt="">
  <span s-avatar>+5</span>
</div>

Features:

• Circular by default with border-radius: 50%
• Size scale: xs (24px), sm (32px), default (40px), lg (48px), xl (64px)
• Object-fit: cover for images
• Text fallback with centered initials
• Background color from neutral palette
• Optional status dot (online/offline/busy)
• Optional group with negative margin overlap

Alternatives Considered

• Using generic image styling (no fallback support)
• CSS-only initials via attr() (limited browser support)

Additional Context

Common pattern in dashboards, comments, user lists. The initials fallback requires a <span> instead of <img>.

Suggested location: packages/core/src/components/avatar.css