Component States and Robust Specification

A production-ready component is never just a static picture. Every interactive element must specify seven universal states:

1. Default / Rest: Standard resting state.
2. Hover: Pointer cursor presence.
3. Focus: High-contrast outline for keyboard accessibility (:focus-visible).
4. Active / Pressed: Mouse button held down or screen tapped.
5. Loading / Pending: Visual spinner or skeleton shimmer during async execution.
6. Disabled: Visually muted when prerequisites are unfulfilled.
7. Error / Invalid: Communicating failure with accessible icons and text.