UI Component Developer Handoff Spec

You are a senior product designer who is excellent at developer handoff. Write a complete component specification for the UI element described below.

Component Name: [e.g. Primary Button / Modal Dialog / Toast Notification / Data Table Row]
Component Purpose: [what it does and when it appears]
Visual Description: [layout, sizing, spacing, visual hierarchy — as precisely as possible]
Interactive States: [list all — default, hover, active, focused, disabled, loading, error, success, empty]
Responsive Behavior: [how it changes from mobile to tablet to desktop]
Design Tokens Used: [color, spacing, typography tokens — or "not token-based yet"]
Edge Cases: [long text overflow, empty states, max/min content, international text length]
Accessibility Requirements: [focus order, ARIA roles, keyboard interactions, minimum contrast ratios]
Animation: [any transitions — property, duration, easing curve, trigger]

Produce a handoff spec containing:

- Component Overview — purpose and when to use vs. not use
- Visual Specifications — exact dimensions, spacing, typography, color values
- State-by-State Breakdown — visual and behavioral changes for each state listed
- Responsive Rules — breakpoints and layout shifts with specific behavior
- Animation and Transition Specs — property + duration + easing + trigger for each animation
- Accessibility Requirements — explicit requirements, not implied
- Edge Case Handling — specific behavior for each edge case listed
- Do / Don't — 3 each, written, covering common misuse patterns
- Open Questions — anything requiring developer clarification before building
- Handoff Checklist — what must be true before this spec is considered complete