# Component spec

## Purpose
What recurring user need does this component solve?

## When to use
- Use when:
- Do not use when:

## Anatomy
1. Required element
2. Optional element
3. Supporting element

## Variants and states
- Default
- Hover
- Focus-visible
- Active
- Disabled
- Loading
- Empty
- Error

## Behavior
Describe keyboard, pointer, responsive and motion behavior.

## Content rules
Define labels, length limits and localization notes.

## Accessibility
Document semantics, accessible name, focus order and announcements.

## Acceptance criteria
- Uses shared tokens
- Works at 375, 768, 1024 and 1440px
- Supports keyboard and reduced motion
- Includes a working example and usage guidance