{ "version": "0.8.0", "categories": [ { "id": "base", "label": "Base", "order": 1, "description": "Color, tipografía, iconografía, forma y sombra." }, { "id": "accion", "label": "Acción", "order": 2, "description": "Guían acciones e identifican contenidos." }, { "id": "navegacion", "label": "Navegación", "order": 3, "description": "Orientación, jerarquía y estructura del sitio." }, { "id": "contenido", "label": "Contenido", "order": 4, "description": "Bloques de información: hero, cards, listas, tablas y banners." }, { "id": "formularios", "label": "Formularios", "order": 5, "description": "Controles para captura de datos del usuario." }, { "id": "feedback", "label": "Feedback", "order": 6, "description": "Confirmación de acciones, alertas y comunicación contextual." }, { "id": "estado", "label": "Estado & Progreso", "order": 7, "description": "Indicadores de avance, espera y carga." }, { "id": "estructura", "label": "Estructura", "order": 8, "description": "Componentes globales del shell: header y footer." } ], "components": [ { "slug": "color", "title": "Color", "category": "base", "file": "components/color.html", "description": "Clases de color por función, en claro y en oscuro.", "lead": "Cada color de Solar tiene una función: marcar la acción, dar énfasis, comunicar un estado o separar superficies. Usa siempre los tokens, que cambian solos entre modo claro y oscuro, y nunca un hex suelto.", "code": false }, { "slug": "textos-y-tipografias", "title": "Textos y tipografías", "category": "base", "file": "components/textos-y-tipografias.html", "description": "Escala tipográfica Inter, JetBrains Mono para datos técnicos y espacio entre párrafos y listas.", "lead": "Inter para todo el texto de interfaz y JetBrains Mono para datos técnicos. Usa solo los estilos de la escala y el ritmo de espacio definido para párrafos y listas." }, { "slug": "iconografia", "title": "Iconografía", "category": "base", "file": "components/iconografia.html", "description": "Cuándo y cómo usar Solar Icons: familias, tamaños, color, accesibilidad y catálogo.", "lead": "Solar Icons es la única familia de íconos de la interfaz. Aquí defines qué variante usar según el tamaño, cómo colorearlos y cómo hacerlos accesibles." }, { "slug": "forma-y-sombra", "title": "Forma y sombra", "category": "base", "file": "components/forma-y-sombra.html", "description": "Radios y sombras institucionales.", "lead": "Los radios y sombras dan a todos los componentes la misma forma y profundidad. Usa los tokens en vez de valores sueltos para que el sitio se vea coherente." }, { "slug": "botones", "title": "Botones", "category": "accion", "file": "components/botones.html", "description": "Primarios, secundarios, acentos, tamaños, solo ícono, estados, soft, link, block y con ceja.", "lead": "Los botones son la forma principal de pedirle una acción al usuario. Elige el estilo según la jerarquía de la acción y mantén un solo botón primario por vista." }, { "slug": "tags-y-badges", "title": "Tags & Badges", "category": "accion", "file": "components/tags-y-badges.html", "description": "Etiquetas para categorizar contenido, estados y filtros: sólidas, suaves, con contorno, punteadas, con ícono, vacías y dentro de textos y botones.", "lead": "Las etiquetas categorizan contenido, muestran estados y sirven de filtro. Elige el estilo según cuánto debe destacar y no las uses como si fueran botones." }, { "slug": "menu-desplegable", "title": "Menú desplegable", "category": "accion", "file": "components/menu-desplegable.html", "description": "Acciones y opciones que se abren desde un botón: íconos, atajos, casillas, opción única, submenú y menú de usuario.", "lead": "El menú desplegable agrupa acciones u opciones detrás de un botón. Úsalo para las acciones de una fila, el menú de usuario o para cambiar cómo se ve una lista." }, { "slug": "toggle", "title": "Toggle", "category": "accion", "file": "components/toggle.html", "description": "Botón que queda presionado, solo o en grupo: sin borde, con contorno, tamaños, vertical y con texto.", "lead": "El toggle es un botón que queda presionado o suelto. Sirve para formato de texto, filtros rápidos y cambiar la vista de una lista; en grupo, cada uno se activa por separado." }, { "slug": "tecla", "title": "Tecla", "category": "accion", "file": "components/tecla.html", "description": "Teclas y combinaciones del teclado para atajos en menús, tooltips, campos y textos.", "lead": "La tecla muestra una tecla o una combinación del teclado. Acompaña los atajos en menús, tooltips, campos de búsqueda y ayudas, siempre como apoyo y nunca como única instrucción." }, { "slug": "barra-de-navegacion", "title": "Barra de navegación", "category": "navegacion", "file": "components/barra-de-navegacion.html", "description": "Menú principal y subnav.", "lead": "La barra de navegación es el acceso principal al sitio y a sus secciones. Mantén pocos ítems, marca siempre la sección activa y sé consistente en todas las páginas." }, { "slug": "breadcrumb", "title": "Breadcrumb", "category": "navegacion", "file": "components/breadcrumb.html", "description": "Ruta jerárquica de navegación.", "lead": "El breadcrumb muestra dónde está el usuario dentro de la jerarquía del sitio y le permite subir de nivel. Úsalo en páginas profundas, no en la portada." }, { "slug": "tabs", "title": "Tabs", "category": "navegacion", "file": "components/tabs.html", "description": "Pestañas estándar, pill, con íconos, verticales y deshabilitada.", "lead": "Las pestañas dividen un contenido en secciones que se ven una a la vez, sin salir de la página. Úsalas para vistas del mismo nivel y no para navegar entre páginas." }, { "slug": "paginacion", "title": "Paginación", "category": "navegacion", "file": "components/paginacion.html", "description": "Navegación entre páginas de resultados.", "lead": "La paginación reparte resultados largos en páginas y deja claro en cuál está el usuario. Úsala cuando la lista es extensa y el orden de los resultados importa." }, { "slug": "sidebar", "title": "Sidebar", "category": "navegacion", "file": "components/sidebar.html", "description": "Navegación lateral para apps, portales y dashboards.", "lead": "La navegación lateral organiza las secciones de una app, un portal o un dashboard. Funciona bien cuando hay muchas secciones o varios niveles de navegación." }, { "slug": "buscador", "title": "Buscador", "category": "navegacion", "file": "components/buscador.html", "description": "Búsqueda del sitio: campo en el header, búsqueda que se despliega, buscador destacado y de una sección, sugerencias y página de resultados.", "lead": "El buscador lleva a cualquier página del sitio escribiendo lo que se necesita: un campo de verdad, con sugerencias mientras se escribe, y una página de resultados que repite la consulta, dice qué es cada resultado y por qué coincide." }, { "slug": "paleta-de-comandos", "title": "Paleta de comandos", "category": "navegacion", "file": "components/paleta-de-comandos.html", "description": "Buscador de acciones y páginas que se abre con Ctrl K: grupos, sin resultados y en diálogo.", "lead": "La paleta de comandos es un buscador de acciones y páginas que se abre con Ctrl K. Sirve en backoffices con muchas secciones; es un atajo para quien usa el teclado, no reemplaza al menú." }, { "slug": "cards", "title": "Cards", "category": "contenido", "file": "components/cards.html", "description": "Suaves (las de uso general) o con línea: categoría, enlace, noticias y eventos, cifras, testimonio y perfil.", "lead": "Las cards agrupan un contenido breve y sus acciones en un solo bloque que se puede recorrer rápido. Usa el estilo suave; el con línea queda para casos puntuales." }, { "slug": "listas", "title": "Listas", "category": "contenido", "file": "components/listas.html", "description": "Bulleted, numeradas, con check y de definición.", "lead": "Las listas ordenan información en ítems que se leen de un vistazo. Elige el tipo según el contenido: viñetas, pasos numerados, requisitos con check o pares de término y definición." }, { "slug": "tablas", "title": "Tablas", "category": "contenido", "file": "components/tablas.html", "description": "Tablas para mostrar contenido: básica, sin marco, filas alternas, fila destacada, comparación, compacta, con totales, encabezado fijo y apilada en el celular.", "lead": "Las tablas muestran información que se compara por filas y columnas, como tarifas, horarios o planes. Son para leer; si hay que filtrar, ordenar o actuar sobre las filas, usa Tabla de datos." }, { "slug": "hero", "title": "Hero", "category": "contenido", "file": "components/hero.html", "description": "Parte de arriba de una página: encabezado de página, editorial, foto a sangre, dividido y de landing, con captura y página de ejemplo.", "lead": "El hero dice de qué trata la página y cuál es su acción principal, justo bajo el header. Elige la variante según el tipo de página; cada una se abre en página completa para probarla." }, { "slug": "banners", "title": "Banners", "category": "contenido", "file": "components/banners.html", "description": "Campañas, inscripciones y comunicaciones.", "lead": "Los banners destacan una campaña, una inscripción o una comunicación importante dentro de la página. Úsalos con moderación y con una sola acción clara." }, { "slug": "avatar", "title": "Avatar", "category": "contenido", "file": "components/avatar.html", "description": "Foto o iniciales de una persona: tamaños, indicador de estado, grupos y con nombre.", "lead": "El avatar muestra la foto o las iniciales de una persona junto a su nombre. Úsalo en listas, comentarios, menús de usuario y fichas; si no hay foto, van las iniciales sobre fondo neutro." }, { "slug": "item", "title": "Ítem", "category": "contenido", "file": "components/item.html", "description": "Fila con medio, título, descripción y acciones: variantes, tamaños, grupo, como enlace y con menú.", "lead": "El ítem es una fila con un ícono, avatar o imagen, un título, una descripción y acciones. Sirve para listas de personas, archivos, avisos y ajustes; si lleva un campo, usa Campo." }, { "slug": "estado-vacio", "title": "Estado vacío", "category": "contenido", "file": "components/estado-vacio.html", "description": "Qué mostrar cuando no hay datos: básico, contorno, con fondo, sin resultados, con avatares y página no encontrada.", "lead": "El estado vacío aparece cuando una lista, tabla o búsqueda no tiene nada que mostrar. Dice qué pasa y ofrece la acción que lo resuelve, sin culpar a la persona." }, { "slug": "separador", "title": "Separador", "category": "contenido", "file": "components/separador.html", "description": "Línea horizontal o vertical entre grupos de contenido, también con texto o fecha.", "lead": "El separador es una línea que divide grupos de contenido, horizontal o vertical. Con texto, sirve para un \"o\" entre dos opciones o para la fecha en una lista de mensajes." }, { "slug": "tabla-de-datos", "title": "Tabla de datos", "category": "contenido", "file": "components/tabla-de-datos.html", "description": "Tabla con filtro, orden por columna, selección de filas, menú de columnas, acciones por fila, barra de herramientas y sin resultados.", "lead": "La tabla de datos es para trabajar con los datos de un listado de backoffice: filtro, orden por columna, selección de filas, columnas que se ocultan y acciones por fila." }, { "slug": "graficos", "title": "Gráficos", "category": "contenido", "file": "components/graficos.html", "description": "Reglas para barras, líneas y área en una card: colores, ejes, leyenda, tooltip y datos en tabla.", "lead": "Reglas para gráficos de barras, líneas y área dentro de una card: colores, ejes, leyenda, tooltip y los datos en tabla. Solar define cómo se ven; los dibuja la librería del proyecto." }, { "slug": "carrusel", "title": "Carrusel", "category": "contenido", "file": "components/carrusel.html", "description": "Fila de tarjetas con flechas: indicador, varias por vista, vertical, automático con pausa y sin JS.", "lead": "El carrusel muestra una fila de tarjetas que se recorre con flechas o deslizando. Úsalo para eventos o destacados que no caben; si son pocos, es mejor mostrarlos todos." }, { "slug": "controles", "title": "Controles", "category": "formularios", "file": "components/controles.html", "description": "Texto, select, área de texto, casillas, radios e interruptor, con sus estados.", "lead": "Los controles recogen los datos: texto, select, área de texto, casillas, radios e interruptor. Esta página muestra cada uno con sus estados; cómo se arman y agrupan está en Campo." }, { "slug": "campo", "title": "Campo", "category": "formularios", "file": "components/campo.html", "description": "Etiqueta, ayuda y error, conjuntos, fila con interruptor, tarjetas de opción, separadores y resumen de errores.", "lead": "Campo reúne las piezas de un formulario: etiqueta, control, ayuda y error. Muestra cómo agruparlas en conjuntos, tarjetas de opción, filas con interruptor y el resumen de errores." }, { "slug": "campo-con-complementos", "title": "Campo con complementos", "category": "formularios", "file": "components/campo-con-complementos.html", "description": "Campo con ícono, texto fijo, botón, tecla, menú o spinner dentro del mismo borde, y área de texto con barra.", "lead": "El campo con complementos suma un ícono, un texto fijo, un botón o un menú dentro del mismo borde. Sirve para buscar, montos, sitios web, claves y enlaces que se copian." }, { "slug": "codigo-de-verificacion", "title": "Código de verificación", "category": "formularios", "file": "components/codigo-de-verificacion.html", "description": "Casillas para el código de un solo uso: 6 y 4 dígitos, separador, alfanumérico, inválido y deshabilitado.", "lead": "El código de verificación es el campo para el código de un solo uso que llega por correo o SMS. Por dentro es un solo campo; las casillas ayudan a ver cuántos caracteres faltan." }, { "slug": "combobox", "title": "Combobox", "category": "formularios", "file": "components/combobox.html", "description": "Campo que filtra una lista: chips para elegir varias, grupos, opciones con detalle, inválido y desde un botón.", "lead": "El combobox filtra una lista mientras se escribe. Úsalo para listas largas, como comunas, empresas o rubros, donde un select obliga a recorrerlo todo; con chips, elige varias." }, { "slug": "calendario", "title": "Calendario", "category": "formularios", "file": "components/calendario.html", "description": "Calendario para un día o un rango, mes y año en listas, atajos, días no disponibles, hora y selector de fecha.", "lead": "El calendario sirve para elegir un día o un rango, solo o dentro de un selector que se abre desde un campo. Úsalo en inscripciones, reservas y filtros por fecha." }, { "slug": "deslizador", "title": "Deslizador", "category": "formularios", "file": "components/deslizador.html", "description": "Control para elegir un valor o un rango arrastrando: marcas, varias manijas, vertical y deshabilitado.", "lead": "El deslizador sirve para elegir un valor o un rango arrastrando. Úsalo en filtros de precio, distancia o cantidad, cuando el valor exacto importa menos que el orden de magnitud." }, { "slug": "carga-de-archivos", "title": "Carga de archivos", "category": "formularios", "file": "components/carga-de-archivos.html", "description": "Zona de carga y ficha de cada archivo con su estado: en espera, subiendo, revisando, error y listo.", "lead": "La carga de archivos reúne la zona para elegir o arrastrar archivos y la ficha de cada uno con su estado: en espera, subiendo, revisando, con error o listo." }, { "slug": "alertas", "title": "Alertas", "category": "feedback", "file": "components/alertas.html", "description": "Avisos de información, éxito, advertencia y error: estados, estilos, íconos y accesibilidad.", "lead": "Las alertas avisan de algo que el usuario debe saber, sin interrumpir lo que está haciendo. Elige el estado según la gravedad y escribe un mensaje claro que diga qué hacer." }, { "slug": "modal-y-toast", "title": "Modal & Toast", "category": "feedback", "file": "components/modal-y-toast.html", "description": "Diálogos modales y notificaciones efímeras.", "lead": "El modal pide una decisión o información antes de continuar, y el toast confirma algo sin interrumpir. Reserva el modal para lo importante y usa el toast para lo menor." }, { "slug": "tooltip", "title": "Tooltip", "category": "feedback", "file": "components/tooltip.html", "description": "Texto corto que aparece al pasar el cursor o enfocar un elemento.", "lead": "El tooltip agrega una aclaración breve cuando el usuario pasa el cursor o enfoca un elemento. Úsalo para apoyar un ícono o un término, no para información esencial." }, { "slug": "faq-acordeon", "title": "FAQ / Acordeón", "category": "feedback", "file": "components/faq-acordeon.html", "description": "Preguntas frecuentes con expansión progresiva.", "lead": "El acordeón responde preguntas frecuentes mostrando una respuesta a la vez. Ordena las preguntas por importancia y escribe respuestas cortas que se entiendan solas." }, { "slug": "popover", "title": "Popover", "category": "feedback", "file": "components/popover.html", "description": "Panel pequeño junto a un botón con un formulario corto, opciones o un enlace: básico, con acción y alineación.", "lead": "El popover es un panel pequeño que se abre junto a un botón, con contenido que se puede usar: un formulario corto, opciones o un enlace para compartir. Se cierra con Escape." }, { "slug": "panel-lateral", "title": "Panel lateral", "category": "feedback", "file": "components/panel-lateral.html", "description": "Panel que entra desde un borde sobre la página: derecha, izquierda, sin botón de cerrar y abajo en el celular.", "lead": "El panel lateral entra desde un borde de la pantalla sobre la página. A la derecha, para editar o ver un detalle sin salir; abajo, en el celular, para filtros y opciones." }, { "slug": "tarjeta-emergente", "title": "Tarjeta emergente", "category": "feedback", "file": "components/tarjeta-emergente.html", "description": "Vista previa de una persona o empresa al pasar el cursor sobre su nombre.", "lead": "La tarjeta emergente adelanta los datos de una persona o empresa cuando pasas el cursor sobre su nombre. No lleva acciones, y todo lo que muestra también está en su ficha." }, { "slug": "barras-de-progreso", "title": "Barras de progreso", "category": "estado", "file": "components/barras-de-progreso.html", "description": "Lineal, indeterminada, radial y segmentada.", "lead": "Las barras de progreso muestran cuánto falta para terminar una carga o un proceso. Usa la lineal cuando se conoce el avance y la indeterminada cuando no se sabe cuánto tomará." }, { "slug": "stepper", "title": "Stepper", "category": "estado", "file": "components/stepper.html", "description": "Pasos de un formulario de varias pantallas.", "lead": "El stepper muestra en qué paso va un formulario de varias pantallas. Úsalo de 3 a 6 pasos y solo cuando cada paso cabe en pantalla; si el paso tiene scroll, va una barra de avance." }, { "slug": "loading", "title": "Loading", "category": "estado", "file": "components/loading.html", "description": "Spinners, botones loading y overlays.", "lead": "Los indicadores de carga avisan que el sistema está trabajando. Elige el spinner, el botón en carga o el overlay según el tamaño de lo que se está cargando." }, { "slug": "skeletons", "title": "Skeletons", "category": "estado", "file": "components/skeletons.html", "description": "Placeholders animados para contenido en carga.", "lead": "Los skeletons reservan el lugar del contenido mientras carga y evitan saltos en la página. Imitan la forma del contenido real, como títulos, textos e imágenes." }, { "slug": "header", "title": "Header", "category": "estructura", "file": "components/header.html", "description": "Encabezado del sitio: estructuras, comportamiento al hacer scroll, desplegables, estilos y combinaciones, con captura y página de ejemplo.", "lead": "El header encabeza todas las páginas con la marca, la navegación y el acceso a la cuenta. Elige la variante según el tipo de sitio; cada opción muestra su captura y se abre en página completa para probarla." }, { "slug": "footer", "title": "Footer", "category": "estructura", "file": "components/footer.html", "description": "Pie de página institucional con contacto y enlaces.", "lead": "El footer cierra cada página con los datos de contacto y los enlaces institucionales. Debe ser igual en todo el sitio y reunir lo que el usuario busca al llegar al final." } ] }