Patrones de Componentes

Trigger por click (no solo hover, rompe touch). Max 2 niveles de drill-down dentro del nav. En mobile usar split vertical (nivel 1 y 2 side-by-side) en vez de drill-down anidado. Siempre indicar seccion activa.

Nunca congelar la interfaz mientras los resultados cargan. Nunca auto-colapsar un grupo de filtro despues de seleccion. Mostrar conteo esperado de resultados en cada opcion. Auto-apply solo si respuesta es genuinamente rapida; si no, boton "Mostrar N resultados".

Combinar filtrado, ordenamiento y busqueda en el toolbar de la tabla. Sticky column headers verticalmente. Sticky primera columna horizontalmente. Soporte batch actions (checkbox multi-select + action bar). Inline editing: doble-click para editar in place.

Reemplazar dots con labels, thumbnails o "3 de 12". Auto-advance minimo 5-7s con boton de pausa visible. Mostrar borde parcial del siguiente slide para senalar scrollabilidad. Keyboard: flechas para nav, Escape para salir.

Modales solo para tareas cortas y auto-contenidas que requieren atencion. Nunca para errores, anuncios, onboarding ni promociones auto-triggered. 3 mecanismos de escape: boton X, Escape, click en backdrop. Nunca anidar modales.

El drawer existe para mantener el contexto de la lista/tabla de fondo. Si el fondo se bloquea, es un modal disfrazado. Ancho 30-40% desktop, full-width mobile. Siempre close visible (X + Escape).

Tabs son para vistas paralelas del mismo dato al mismo nivel. No usar para nav (usar nav), ni para pasos (usar stepper), ni para filtros (usar chips). Persistir tab activa en URL. Keyboard: flechas entre tabs, Tab salta al panel.

Undo para acciones reversibles (archivar, quitar tag): toast visible 5-7s con countdown. Confirm para irreversibles (delete account, remove payment): describir consecuencia especificamente. Boton destructivo visualmente distinto y NO el default focused.