8. Catálogo de componentes UI

Todo componente interactivo define seis estados obligatorios: reposo, hover, activo (pressed), foco visible, deshabilitado y error (cuando aplica). El foco es siempre un anillo de 2px en Azul Meridiano con desplazamiento de 2px. Deshabilitado reduce opacidad a 50% y quita sombra, nunca solo "gris más claro" sin diferencia estructural.

8.1 Botones

• Métricas (densidad cómoda): altura 40px, padding 12×24, radio-md, peso 600, tamaño cuerpo.
• Hover: fondo pasa al tono activo (azul-700). Activo: igual + escala 0.98 con resorte-suave.
• Icono opcional a la izquierda (20px, separación espacio-xs). Botón de solo icono: 40×40, con tooltip y aria-label.
• La etiqueta es un verbo que nombra el resultado: "Guardar cambios", no "Aceptar".

8.2 Campos de entrada

• Anatomía: etiqueta arriba (peso 500, etiqueta), campo, texto de ayuda o error debajo (cuerpo pequeño).
• Métricas: altura 40px, padding horizontal 12px, radio-md, borde 1px Niebla, fondo Lienzo.
• Foco: borde Azul Meridiano + anillo. Error: borde Error + mensaje con icono; el mensaje dice cómo corregir.
• La etiqueta nunca desaparece (no usar placeholder como etiqueta). El placeholder es ejemplo de formato, opcional: "ejemplo@dominio.com".
• Campos de área de texto: mínimo 3 líneas, redimensionable vertical.

8.3 Select, combos y autocompletar

• Misma métrica que campos. Chevron de 16px a la derecha.
• Menú desplegado: elevación 2, radio-md, opciones de 40px, opción activa con fondo Azul suave y texto Azul oscuro.
• Más de 10 opciones → añadir filtro de búsqueda. Más de 50 → autocompletar asíncrono.

8.4 Checkbox, radio y switch

Marcado: fondo Azul Meridiano, check Lienzo. Etiqueta siempre a la derecha y clicable. Si la opción requiere "Guardar", usar checkbox, no switch.

8.5 Tablas de datos

• Elevación 0: borde 1px Niebla, sin sombra. Radio-none o radio-md solo en el contenedor.
• Encabezado: fondo Bruma, peso 600, etiqueta, alineado como su columna.
• Texto a la izquierda, números a la derecha y en cifras tabulares, fechas en formato ISO o local consistente.
• Filas: 40px (cómoda) o 32px (compacta); zebra opcional con Bruma; hover Bruma; selección Azul suave.
• Columnas ordenables con indicador de dirección; orden activo visible.
• Más de 25-50 filas → paginación o scroll virtual. Acciones por fila como botones terciarios o menú de tres puntos.
• Celdas vacías muestran "—", nunca quedan en blanco.

8.6 Tarjetas y tarjetas KPI

• Tarjeta: fondo base, borde 1px Niebla, radio-md, elevación 1, padding espacio-lg.
• Tarjeta KPI: etiqueta (texto secundario, etiqueta) → cifra (Título 1-Display, cifras tabulares) → variación con flecha y color funcional (▲ Éxito, ▼ Error) + período de comparación. Una métrica por tarjeta.
• Si la tarjeta es clicable, toda su superficie lo es y el hover eleva a nivel 2.

8.7 Pestañas (tabs)

• Subrayado de 2px Azul Meridiano en la activa; inactivas en texto secundario.
• Altura 40px, separación espacio-lg, sin cajas alrededor de cada pestaña.
• Máximo 7 pestañas; el contenido de cada una debe ser independiente. Para alternar vistas de un mismo dato (tabla/gráfico), usar un control segmentado: contenedor Bruma radio-md con segmento activo Lienzo y elevación 1.

8.8 Modales y diálogos

• Radio-lg, elevación 3 (material translúcido con respaldo sólido), ancho máximo 480px (confirmación) o 640px (formulario).
• Anatomía: título (Título 3) → cuerpo → acciones a la derecha (secundario "Cancelar" + primario).
• Overlay oscurece el fondo 40-50%. Escape y clic fuera cierran, salvo pérdida de datos (entonces pedir confirmación).
• El foco entra al modal, queda atrapado dentro y vuelve al disparador al cerrar.
• Un modal nunca abre otro modal. Flujos largos → página o asistente.

8.9 Toasts y notificaciones

• Posición: esquina inferior izquierda o superior derecha, consistente por producto. Elevación 2, radio-md.
• Anatomía: icono de estado + mensaje de una línea + acción opcional ("Deshacer") + cierre.
• Color por borde izquierdo de 3px y por icono funcional; el fondo permanece neutro (Lienzo) para no gritar.
• Auto-cierre: 5 s informativos, 8 s con acción; los errores persisten hasta que el usuario los cierre.
• Entrada con resorte-estándar desde el borde; máximo 3 visibles apilados.

8.10 Badges y etiquetas de estado

• Píldora radio-full o radio-sm, etiqueta, peso 500, padding 2×8.
• Versión tenue (defecto): fondo funcional suave + texto funcional oscuro. Ej.: Activo = fondo Éxito-fondo, texto Éxito.
• Nunca color solo: el texto del badge nombra el estado.

8.11 Navegación

• Sidebar (app shell): 240-280px, fondo Bruma o Carbón, ítems de 40px con icono 20px + etiqueta, ítem activo con fondo Azul suave + texto Azul oscuro + barra de 3px al borde. Colapsable a 64px (solo iconos con tooltip). Agrupación con encabezados de sección en etiqueta mayúscula pequeña.
• Topbar: 56-64px, logo + búsqueda global + acciones + avatar. Elevación 0 con borde inferior.
• Breadcrumbs: cuerpo pequeño, separador "/", último elemento en texto principal sin enlace.
• Paginación: botones 32-40px, página activa con fondo Azul Meridiano, mostrar "1 … 4 5 6 … 20" y total de resultados.
• Máximo dos niveles de navegación visibles a la vez.

8.12 Tooltips y popovers

• Tooltip: fondo Tinta, texto Lienzo, etiqueta, radio-sm, padding 4×8, elevación 2, retardo de aparición ~400 ms. Solo texto breve; nunca contenido esencial ni interactivo.
• Popover: fondo Lienzo, borde Niebla, radio-md, elevación 2; puede contener controles; se cierra con Escape y clic fuera.

8.13 Acordeones

• Encabezado de 48px con chevron a la derecha que rota 180° (resorte-suave); borde inferior 1px Niebla entre ítems.
• Para contenido opcional o secundario. El contenido crítico nunca se esconde en acordeón.

8.14 Progreso, carga y skeleton

El botón en estado cargando muestra spinner + verbo en progreso ("Guardando…") y queda deshabilitado para evitar doble envío.

(v3.1) En el rango expresivo (dial > 0), el indicador de carga puede ser una forma que ondula con morphing suave en lugar del spinner clásico; con movimiento reducido vuelve al spinner estático con pulso de opacidad.

8.15 Avatares

• Círculo (radio-full): 24, 32, 40px. Sin foto: iniciales sobre fondo Azul suave, texto Azul oscuro.
• Grupos: solapados −8px, máximo 4 + "+N".

8.16 Formularios (composición)

• Una columna siempre; los formularios multicolumna se leen peor y fallan en móvil.
• Ancho máximo del campo proporcional al dato: código postal corto, dirección largo.
• Agrupación por secciones con Título 3 y separación espacio-2xl.
• Campos obligatorios: marcar los opcionales con "(opcional)", no los obligatorios con asterisco.
• Validación: al perder foco (blur) para formato, al enviar para lo global; nunca mientras se teclea, salvo confirmación positiva (disponibilidad de usuario).
• Errores al enviar: resumen al inicio con anclas + mensaje en cada campo (patrón GOV.UK).
• Botón primario al final alineado con los campos; el verbo nombra el resultado ("Crear cuenta").

8.17 Grupo de botones y botón dividido (nuevo en v3.1)

• Grupo de botones: 2-5 acciones relacionadas del mismo nivel, unidas en un contenedor con radio-md externo y separadores internos de 1px Niebla (o separación de 2px en el rango expresivo). Solo una variante por grupo (todos secundarios o todos terciarios). Para selección exclusiva usar el control segmentado (§8.7), no un grupo.
• Botón dividido (split button): acción principal a la izquierda + chevron a la derecha que despliega variantes de la misma acción ("Guardar" | "Guardar y cerrar", "Guardar como…"). El segmento del chevron tiene su propio foco y aria-haspopup. Solo cuando las variantes comparten verbo; si son acciones distintas, usar menú de tres puntos.

8.18 Botón de acción flotante (FAB) y barra flotante (nuevo en v3.1)

• FAB: la acción creadora dominante en apps móviles ("Nueva tarea"). 56×56px (44px mínimo el dibujo), radio-lg o full, fondo Azul Meridiano, elevación 2, fijo abajo a la derecha con margen espacio-lg. Máximo uno por pantalla; nunca en escritorio con app shell (allí el primario vive en la topbar o el contenido).
• Menú FAB: si el FAB agrupa 2-4 acciones de creación, al pulsarlo se expande con morphing en una pila de acciones etiquetadas; Escape o tocar fuera lo repliega.
• Barra de herramientas flotante: grupo de 3-6 controles contextuales que flota sobre el contenido (material entintado, radio-full, elevación 2), aparece con la selección y desaparece con ella. Ejemplo: negrita/cursiva/enlace sobre texto seleccionado.