Hover, focus y otros estados.
Cada estado visual debe corresponder a un estado real del elemento y conservar información con teclado, tacto y preferencias del sistema.
Orden de estados
| Estado | Regla |
|---|---|
| default | Comunica affordance sin interacción |
| hover | Mejora opcional; nunca única señal |
| focus-visible | Anillo visible, no sustituido por cambio de color |
| active | Respuesta breve durante activación |
| disabled | Semántica nativa y contraste legible |
| invalid | Mensaje asociado y aria-describedby |
| open/selected/current | Estado semántico más estilo |
Variantes
class="bg-accent hover:bg-accent-strong
focus-visible:outline-2 focus-visible:outline-offset-2
disabled:cursor-not-allowed disabled:opacity-60"Reglas
- Preferir focus-visible sobre ocultar outline.
- Usar group y peer sólo cuando la relación semántica sea clara.
- No simular disabled sólo con pointer-events.
- Probar con teclado y pantalla táctil.