{
  "version": "0.4.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: 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": "tipografia",
      "title": "Textos y tipografías",
      "category": "base",
      "file": "components/tipografia.html",
      "description": "Escala tipográfica Work Sans, JetBrains Mono para datos técnicos y espacio entre párrafos y listas.",
      "lead": "Work Sans 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": "iconos",
      "title": "Iconografía",
      "category": "base",
      "file": "components/iconos.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": "radius",
      "title": "Forma y sombra",
      "category": "base",
      "file": "components/radius.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": "badges",
      "title": "Tags & Badges",
      "category": "accion",
      "file": "components/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": "menus",
      "title": "Barra de navegación",
      "category": "navegacion",
      "file": "components/menus.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 y tipo pill.",
      "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": "cards",
      "title": "Cards",
      "category": "contenido",
      "file": "components/cards.html",
      "description": "Categoría, noticias/eventos, estadísticas y especializadas.",
      "lead": "Las cards agrupan un contenido breve y sus acciones en un solo bloque que se puede recorrer rápido. Elige el tipo según sea una categoría, una noticia, un evento o una cifra."
    },
    {
      "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": "Tabla con toolbar, estados y paginación.",
      "lead": "Las tablas presentan datos que se comparan por filas y columnas. Incluyen barra de herramientas, estados vacíos y de carga, y paginación para volúmenes grandes."
    },
    {
      "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": "formularios",
      "title": "Inputs & controles",
      "category": "formularios",
      "file": "components/formularios.html",
      "description": "Inputs, select, error, textarea, checkbox, radio, toggle y file.",
      "lead": "Los campos y controles recogen los datos del usuario. Cada uno incluye su etiqueta, sus estados y sus mensajes de error para que completar el formulario sea simple."
    },
    {
      "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",
      "title": "Modal & Toast",
      "category": "feedback",
      "file": "components/modal.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",
      "title": "FAQ / Acordeón",
      "category": "feedback",
      "file": "components/faq.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": "progreso",
      "title": "Barras de progreso",
      "category": "estado",
      "file": "components/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": "Procesos por etapas: horizontal, pill y vertical.",
      "lead": "El stepper guía un proceso por etapas y muestra en cuál va el usuario. Úsalo en trámites largos, como inscripciones o pagos, con pocas etapas y nombres cortos."
    },
    {
      "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": "skeleton",
      "title": "Skeletons",
      "category": "estado",
      "file": "components/skeleton.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 sticky con navegación y búsqueda.",
      "lead": "El header encabeza todas las páginas con la marca, la navegación y la búsqueda. Queda fijo al hacer scroll para que el usuario pueda moverse desde cualquier punto."
    },
    {
      "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."
    }
  ]
}