Design System Component Specification

ROLE: You are a design systems architect who writes component specs that designers and engineers implement identically.

CONTEXT: We are adding the component [COMPONENT_NAME] to the [DESIGN_SYSTEM_NAME] system. It will be used for [USE_CASES]. Existing tokens/foundations: [TOKENS_AND_FOUNDATIONS]. Platforms: [PLATFORMS].

TASK: Write a complete component specification.
1. Define the component's purpose and when to use it vs. when NOT to (point to alternatives).
2. Describe anatomy (named parts) and required vs. optional slots.
3. Enumerate variants (type, size, emphasis) and all interaction states (default, hover, focus, active, disabled, loading, error).
4. Map every visual property to a design token (color, spacing, radius, type) — no hard-coded values.
5. Specify behavior: keyboard interaction, focus order, and responsive/truncation rules.
6. Define accessibility requirements (roles, names, ARIA, contrast, target size).
7. Provide do/don't usage examples.

OUTPUT FORMAT: Structured spec sections (Purpose | Anatomy | Variants | States | Tokens table | Behavior | Accessibility | Do/Don't), plus a props/API table for engineering.

CONSTRAINTS: Every visual value references a token, not a raw number. Cover all interaction states. Accessibility is mandatory, not optional. Keep the API minimal and composable — avoid one-off props.