{
  "name": "componentes",
  "title": {
    "es": "Componentes",
    "en": "Components"
  },
  "site": "https://componentes-lovat.vercel.app",
  "license": "MIT",
  "tokens": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "class 'dark' on <html>",
  "categories": [
    {
      "id": "sections",
      "es": "Secciones",
      "en": "Sections"
    },
    {
      "id": "dashboard",
      "es": "Tableros",
      "en": "Dashboards"
    },
    {
      "id": "actions",
      "es": "Acciones",
      "en": "Actions"
    },
    {
      "id": "forms",
      "es": "Formularios",
      "en": "Forms"
    },
    {
      "id": "navigation",
      "es": "Navegación",
      "en": "Navigation"
    },
    {
      "id": "disclosure",
      "es": "Desplegables",
      "en": "Disclosure"
    },
    {
      "id": "overlays",
      "es": "Capas",
      "en": "Overlays"
    },
    {
      "id": "feedback",
      "es": "Mensajes y progreso",
      "en": "Feedback"
    },
    {
      "id": "data",
      "es": "Datos",
      "en": "Data"
    },
    {
      "id": "flows",
      "es": "Flujos",
      "en": "Flows"
    }
  ],
  "organizacion": {
    "niveles": [
      {
        "id": "primitivos",
        "nombre": "Primitivos",
        "descripcion": "Controles básicos que se combinan para construir interfaces."
      },
      {
        "id": "componentes",
        "nombre": "Componentes",
        "descripcion": "Piezas compuestas y secciones con una función propia."
      },
      {
        "id": "globales",
        "nombre": "Globales",
        "descripcion": "Estructura compartida entre páginas: navegación y pie."
      },
      {
        "id": "flujos",
        "nombre": "Flujos",
        "descripcion": "Recorridos interactivos con pasos, validación y resultado."
      }
    ],
    "primitivos": [
      "button",
      "text-field",
      "checkbox",
      "radio",
      "select",
      "switch",
      "badge"
    ],
    "globales": [
      "navbar",
      "footer"
    ],
    "flujos": [
      "flow-import",
      "flow-quote",
      "flow-reference"
    ],
    "fundamentos": [
      "Color",
      "Tipografía",
      "Patrones"
    ]
  },
  "components": [
    {
      "name": "hero",
      "title": {
        "es": "Hero",
        "en": "Hero"
      },
      "summary": {
        "es": "La primera pantalla: anuncio, título, frase, dos botones y una vista del producto.",
        "en": "The first screen: announcement, headline, subtitle, two buttons and a product view."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/hero/hero.html",
        "https://componentes-lovat.vercel.app/raw/hero/hero.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/hero/",
      "markdown": "https://componentes-lovat.vercel.app/c/hero.md",
      "record": "https://componentes-lovat.vercel.app/r/hero.json",
      "standalone": "https://componentes-lovat.vercel.app/r/hero.html",
      "design": "Tailark mist (MIT) · hero-section/two",
      "partes": [
        {
          "id": "anuncio",
          "tipo": "texto",
          "nombre": {
            "es": "Anuncio",
            "en": "Announcement"
          },
          "ocultable": true
        },
        {
          "id": "titulo",
          "tipo": "texto",
          "nombre": {
            "es": "Título",
            "en": "Headline"
          }
        },
        {
          "id": "frase",
          "tipo": "texto",
          "nombre": {
            "es": "Frase",
            "en": "Subtitle"
          },
          "ocultable": true
        },
        {
          "id": "accion",
          "tipo": "accion",
          "nombre": {
            "es": "Botón principal",
            "en": "Primary button"
          }
        },
        {
          "id": "accion-2",
          "tipo": "accion",
          "nombre": {
            "es": "Botón secundario",
            "en": "Secondary button"
          },
          "ocultable": true
        },
        {
          "id": "imagen",
          "tipo": "imagen",
          "nombre": {
            "es": "Imagen",
            "en": "Image"
          },
          "ocultable": true
        }
      ],
      "pieza": "https://componentes-lovat.vercel.app/r/hero.html",
      "contexto": "landing",
      "densidad": "baja",
      "tono": "editorial",
      "cuando": [
        "Arriba de una landing, después de la barra de navegación."
      ],
      "cuando_no": [
        "Con más de dos botones: diluye la acción principal."
      ],
      "when": [
        "At the top of a landing page, below the navigation bar."
      ],
      "when_not": [
        "With more than two buttons: it dilutes the main action."
      ]
    },
    {
      "name": "logos",
      "title": {
        "es": "Logos de clientes",
        "en": "Logo cloud"
      },
      "summary": {
        "es": "Franja «confían en nosotros», fija o en movimiento continuo.",
        "en": "“Trusted by” strip, static or scrolling."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "list"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/logos/logos.html",
        "https://componentes-lovat.vercel.app/raw/logos/logos.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/logos/",
      "markdown": "https://componentes-lovat.vercel.app/c/logos.md",
      "record": "https://componentes-lovat.vercel.app/r/logos.json",
      "standalone": "https://componentes-lovat.vercel.app/r/logos.html",
      "design": "Tailark mist (MIT) · logo-cloud/one",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/logos.html",
      "contexto": "landing",
      "densidad": "baja",
      "tono": "editorial",
      "cuando": [
        "Debajo del hero, para dar confianza."
      ],
      "cuando_no": [
        "Con logos sin permiso de sus dueños."
      ],
      "when": [
        "Below the hero, to build trust."
      ],
      "when_not": [
        "With logos you don't have permission to use."
      ]
    },
    {
      "name": "features",
      "title": {
        "es": "Funciones",
        "en": "Features"
      },
      "summary": {
        "es": "Título, frase y tres beneficios con su ilustración.",
        "en": "Headline, subtitle and three benefits with an illustration each."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/features/features.html",
        "https://componentes-lovat.vercel.app/raw/features/features.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/features/",
      "markdown": "https://componentes-lovat.vercel.app/c/features.md",
      "record": "https://componentes-lovat.vercel.app/r/features.json",
      "standalone": "https://componentes-lovat.vercel.app/r/features.html",
      "design": "Tailark mist (MIT) · features/two",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/features.html",
      "contexto": "landing",
      "densidad": "media",
      "tono": "editorial",
      "cuando": [
        "Para explicar los 3 a 6 beneficios principales."
      ],
      "cuando_no": [
        "Para listas largas de funciones: usa una tabla."
      ],
      "when": [
        "To explain the 3 to 6 main benefits."
      ],
      "when_not": [
        "For long feature lists: use a table."
      ]
    },
    {
      "name": "stats",
      "title": {
        "es": "Estadísticas",
        "en": "Stats"
      },
      "summary": {
        "es": "Cuatro cifras grandes con su etiqueta.",
        "en": "Four large figures with their labels."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "term",
        "definition"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/stats/stats.html",
        "https://componentes-lovat.vercel.app/raw/stats/stats.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/stats/",
      "markdown": "https://componentes-lovat.vercel.app/c/stats.md",
      "record": "https://componentes-lovat.vercel.app/r/stats.json",
      "standalone": "https://componentes-lovat.vercel.app/r/stats.html",
      "design": "Tailark mist (MIT) · stats/two",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/stats.html",
      "contexto": "landing",
      "densidad": "baja",
      "tono": "editorial",
      "cuando": [
        "Para mostrar tracción o resultados."
      ],
      "cuando_no": [
        "Con cifras que no puedes respaldar."
      ],
      "when": [
        "To show traction or results."
      ],
      "when_not": [
        "With figures you can't back up."
      ]
    },
    {
      "name": "testimonials",
      "title": {
        "es": "Testimonios",
        "en": "Testimonials"
      },
      "summary": {
        "es": "Tres citas con iniciales, nombre y cargo.",
        "en": "Three quotes with initials, name and role."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "figure",
        "blockquote"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/testimonials/testimonials.html",
        "https://componentes-lovat.vercel.app/raw/testimonials/testimonials.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/testimonials/",
      "markdown": "https://componentes-lovat.vercel.app/c/testimonials.md",
      "record": "https://componentes-lovat.vercel.app/r/testimonials.json",
      "standalone": "https://componentes-lovat.vercel.app/r/testimonials.html",
      "design": "Tailark mist (MIT) · testimonials/two",
      "partes": [
        {
          "id": "titulo",
          "tipo": "texto",
          "nombre": {
            "es": "Título",
            "en": "Headline"
          }
        },
        {
          "id": "frase",
          "tipo": "texto",
          "nombre": {
            "es": "Frase",
            "en": "Subtitle"
          },
          "ocultable": true
        },
        {
          "id": "t1-texto",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 1 · texto",
            "en": "Testimonial 1 · quote"
          }
        },
        {
          "id": "t1-avatar",
          "tipo": "imagen",
          "nombre": {
            "es": "Testimonio 1 · foto",
            "en": "Testimonial 1 · photo"
          }
        },
        {
          "id": "t1-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 1 · nombre",
            "en": "Testimonial 1 · name"
          }
        },
        {
          "id": "t1-rol",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 1 · rol",
            "en": "Testimonial 1 · role"
          },
          "ocultable": true
        },
        {
          "id": "t2-texto",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 2 · texto",
            "en": "Testimonial 2 · quote"
          }
        },
        {
          "id": "t2-avatar",
          "tipo": "imagen",
          "nombre": {
            "es": "Testimonio 2 · foto",
            "en": "Testimonial 2 · photo"
          }
        },
        {
          "id": "t2-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 2 · nombre",
            "en": "Testimonial 2 · name"
          }
        },
        {
          "id": "t2-rol",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 2 · rol",
            "en": "Testimonial 2 · role"
          },
          "ocultable": true
        },
        {
          "id": "t3-texto",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 3 · texto",
            "en": "Testimonial 3 · quote"
          }
        },
        {
          "id": "t3-avatar",
          "tipo": "imagen",
          "nombre": {
            "es": "Testimonio 3 · foto",
            "en": "Testimonial 3 · photo"
          }
        },
        {
          "id": "t3-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 3 · nombre",
            "en": "Testimonial 3 · name"
          }
        },
        {
          "id": "t3-rol",
          "tipo": "texto",
          "nombre": {
            "es": "Testimonio 3 · rol",
            "en": "Testimonial 3 · role"
          },
          "ocultable": true
        }
      ],
      "pieza": "https://componentes-lovat.vercel.app/r/testimonials.html",
      "contexto": "landing",
      "densidad": "media",
      "tono": "editorial",
      "cuando": [
        "Para mostrar opiniones reales de clientes."
      ],
      "cuando_no": [
        "Con citas inventadas: los ejemplos son para reemplazar."
      ],
      "when": [
        "To show real customer opinions."
      ],
      "when_not": [
        "With made-up quotes: the examples are placeholders."
      ]
    },
    {
      "name": "pricing",
      "title": {
        "es": "Precios",
        "en": "Pricing"
      },
      "summary": {
        "es": "Tres planes en una tarjeta, con el del medio destacado.",
        "en": "Three plans in one card, with the middle one highlighted."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/pricing/pricing.html",
        "https://componentes-lovat.vercel.app/raw/pricing/pricing.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/pricing/",
      "markdown": "https://componentes-lovat.vercel.app/c/pricing.md",
      "record": "https://componentes-lovat.vercel.app/r/pricing.json",
      "standalone": "https://componentes-lovat.vercel.app/r/pricing.html",
      "design": "Tailark mist (MIT) · pricing/two",
      "partes": [
        {
          "id": "titulo",
          "tipo": "texto",
          "nombre": {
            "es": "Título",
            "en": "Headline"
          }
        },
        {
          "id": "frase",
          "tipo": "texto",
          "nombre": {
            "es": "Frase",
            "en": "Subtitle"
          },
          "ocultable": true
        },
        {
          "id": "plan1-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 1 · nombre",
            "en": "Plan 1 · name"
          }
        },
        {
          "id": "plan1-precio",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 1 · precio",
            "en": "Plan 1 · price"
          }
        },
        {
          "id": "plan1-nota",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 1 · nota",
            "en": "Plan 1 · note"
          },
          "ocultable": true
        },
        {
          "id": "plan1-accion",
          "tipo": "accion",
          "nombre": {
            "es": "Plan 1 · botón",
            "en": "Plan 1 · button"
          }
        },
        {
          "id": "plan1-lista",
          "tipo": "lista",
          "nombre": {
            "es": "Plan 1 · beneficios",
            "en": "Plan 1 · features"
          },
          "ocultable": true
        },
        {
          "id": "plan2-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 2 (destacado) · nombre",
            "en": "Plan 2 (featured) · name"
          }
        },
        {
          "id": "plan2-precio",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 2 (destacado) · precio",
            "en": "Plan 2 (featured) · price"
          }
        },
        {
          "id": "plan2-nota",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 2 (destacado) · nota",
            "en": "Plan 2 (featured) · note"
          },
          "ocultable": true
        },
        {
          "id": "plan2-accion",
          "tipo": "accion",
          "nombre": {
            "es": "Plan 2 (destacado) · botón",
            "en": "Plan 2 (featured) · button"
          }
        },
        {
          "id": "plan2-lista",
          "tipo": "lista",
          "nombre": {
            "es": "Plan 2 (destacado) · beneficios",
            "en": "Plan 2 (featured) · features"
          },
          "ocultable": true
        },
        {
          "id": "plan3-nombre",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 3 · nombre",
            "en": "Plan 3 · name"
          }
        },
        {
          "id": "plan3-precio",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 3 · precio",
            "en": "Plan 3 · price"
          }
        },
        {
          "id": "plan3-nota",
          "tipo": "texto",
          "nombre": {
            "es": "Plan 3 · nota",
            "en": "Plan 3 · note"
          },
          "ocultable": true
        },
        {
          "id": "plan3-accion",
          "tipo": "accion",
          "nombre": {
            "es": "Plan 3 · botón",
            "en": "Plan 3 · button"
          }
        },
        {
          "id": "plan3-lista",
          "tipo": "lista",
          "nombre": {
            "es": "Plan 3 · beneficios",
            "en": "Plan 3 · features"
          },
          "ocultable": true
        }
      ],
      "pieza": "https://componentes-lovat.vercel.app/r/pricing.html",
      "contexto": "landing",
      "densidad": "media",
      "tono": "editorial",
      "cuando": [
        "Para 2 o 3 planes con diferencias claras."
      ],
      "cuando_no": [
        "Con más de 4 planes: usa una tabla comparativa."
      ],
      "when": [
        "For 2 or 3 plans with clear differences."
      ],
      "when_not": [
        "With more than 4 plans: use a comparison table."
      ]
    },
    {
      "name": "faq",
      "title": {
        "es": "Preguntas frecuentes",
        "en": "FAQ"
      },
      "summary": {
        "es": "Preguntas a dos columnas sobre el acordeón nativo.",
        "en": "Two-column questions on the native accordion."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "accordion"
      ],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/faq/faq.html",
        "https://componentes-lovat.vercel.app/raw/faq/faq.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/faq/",
      "markdown": "https://componentes-lovat.vercel.app/c/faq.md",
      "record": "https://componentes-lovat.vercel.app/r/faq.json",
      "standalone": "https://componentes-lovat.vercel.app/r/faq.html",
      "design": "Tailark mist (MIT) · faqs/two",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/faq.html",
      "contexto": "landing",
      "densidad": "media",
      "tono": "editorial",
      "cuando": [
        "Para resolver dudas antes de comprar o escribir."
      ],
      "cuando_no": [
        "Para contenido que todos deben leer."
      ],
      "when": [
        "To answer questions before buying or writing in."
      ],
      "when_not": [
        "For content everyone must read."
      ]
    },
    {
      "name": "cta",
      "title": {
        "es": "Llamado a la acción",
        "en": "Call to action"
      },
      "summary": {
        "es": "Banda final con título y dos botones.",
        "en": "Closing band with a headline and two buttons."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/cta/cta.html",
        "https://componentes-lovat.vercel.app/raw/cta/cta.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/cta/",
      "markdown": "https://componentes-lovat.vercel.app/c/cta.md",
      "record": "https://componentes-lovat.vercel.app/r/cta.json",
      "standalone": "https://componentes-lovat.vercel.app/r/cta.html",
      "design": "Tailark mist (MIT) · call-to-action/one",
      "partes": [
        {
          "id": "titulo",
          "tipo": "texto",
          "nombre": {
            "es": "Título",
            "en": "Headline"
          }
        },
        {
          "id": "accion",
          "tipo": "accion",
          "nombre": {
            "es": "Botón principal",
            "en": "Primary button"
          }
        },
        {
          "id": "accion-2",
          "tipo": "accion",
          "nombre": {
            "es": "Botón secundario",
            "en": "Secondary button"
          },
          "ocultable": true
        }
      ],
      "pieza": "https://componentes-lovat.vercel.app/r/cta.html",
      "contexto": "landing",
      "densidad": "baja",
      "tono": "editorial",
      "cuando": [
        "Al final de la página, antes del footer."
      ],
      "cuando_no": [
        "Repetida varias veces en la misma página."
      ],
      "when": [
        "At the end of the page, before the footer."
      ],
      "when_not": [
        "Repeated several times on one page."
      ]
    },
    {
      "name": "newsletter",
      "title": {
        "es": "Newsletter",
        "en": "Newsletter"
      },
      "summary": {
        "es": "Campo de correo y botón para suscribirse, con validación.",
        "en": "Email field and subscribe button, with validation."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button",
        "text-field"
      ],
      "roles": [
        "form"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/newsletter/newsletter.html",
        "https://componentes-lovat.vercel.app/raw/newsletter/newsletter.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/newsletter/",
      "markdown": "https://componentes-lovat.vercel.app/c/newsletter.md",
      "record": "https://componentes-lovat.vercel.app/r/newsletter.json",
      "standalone": "https://componentes-lovat.vercel.app/r/newsletter.html",
      "design": "Tailark mist (MIT) · composición propia con call-to-action y footer",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/newsletter.html",
      "contexto": "landing",
      "densidad": "baja",
      "tono": "editorial",
      "cuando": [
        "Para reunir una lista de correo."
      ],
      "cuando_no": [
        "Sin decir qué y cada cuánto vas a enviar."
      ],
      "when": [
        "To build a mailing list."
      ],
      "when_not": [
        "Without saying what you'll send and how often."
      ]
    },
    {
      "name": "footer",
      "title": {
        "es": "Footer",
        "en": "Footer"
      },
      "summary": {
        "es": "Marca, enlaces en tres columnas, aviso legal y redes.",
        "en": "Brand, links in three columns, legal notice and social links."
      },
      "category": "sections",
      "status": "stable",
      "nivel": "globales",
      "requires": [],
      "roles": [
        "contentinfo",
        "navigation"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/footer/footer.html",
        "https://componentes-lovat.vercel.app/raw/footer/footer.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/footer/",
      "markdown": "https://componentes-lovat.vercel.app/c/footer.md",
      "record": "https://componentes-lovat.vercel.app/r/footer.json",
      "standalone": "https://componentes-lovat.vercel.app/r/footer.html",
      "design": "Tailark mist (MIT) · footer/two",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/footer.html",
      "contexto": "landing",
      "densidad": "media",
      "tono": "editorial",
      "cuando": [
        "Al pie de cualquier sitio."
      ],
      "cuando_no": [
        "Para repetir toda la navegación principal."
      ],
      "when": [
        "At the bottom of any site."
      ],
      "when_not": [
        "To repeat the whole main navigation."
      ]
    },
    {
      "name": "dashboard",
      "title": {
        "es": "Estructura de dashboard",
        "en": "Dashboard layout"
      },
      "summary": {
        "es": "Barra lateral de navegación y contenido con métricas y un gráfico.",
        "en": "Side navigation and content with metrics and a chart."
      },
      "category": "dashboard",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "stat-card",
        "chart",
        "button"
      ],
      "roles": [
        "navigation",
        "main"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/dashboard/dashboard.html",
        "https://componentes-lovat.vercel.app/raw/dashboard/dashboard.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/dashboard/",
      "markdown": "https://componentes-lovat.vercel.app/c/dashboard.md",
      "record": "https://componentes-lovat.vercel.app/r/dashboard.json",
      "standalone": "https://componentes-lovat.vercel.app/r/dashboard.html",
      "design": "coss ui (MIT) · card.tsx, sidebar.tsx (aspecto)",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/dashboard.html",
      "contexto": "herramienta",
      "densidad": "alta",
      "tono": "sobria",
      "cuando": [
        "Para herramientas internas, paneles y administración.",
        "Cuando la persona vuelve a diario a revisar números."
      ],
      "cuando_no": [
        "Para una landing: usa secciones.",
        "Con más de 6 enlaces en la barra: agrupa."
      ],
      "when": [
        "For internal tools, panels and admin.",
        "When people come back daily to check numbers."
      ],
      "when_not": [
        "For a landing page: use sections.",
        "With more than 6 sidebar links: group them."
      ]
    },
    {
      "name": "stat-card",
      "title": {
        "es": "Tarjeta de métrica",
        "en": "Stat card"
      },
      "summary": {
        "es": "Cifra, variación y mini-gráfico de tendencia.",
        "en": "Figure, change and a small trend line."
      },
      "category": "dashboard",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "article",
        "heading"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/stat-card/stat-card.html",
        "https://componentes-lovat.vercel.app/raw/stat-card/stat-card.css",
        "https://componentes-lovat.vercel.app/raw/stat-card/stat-card.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/stat-card/",
      "markdown": "https://componentes-lovat.vercel.app/c/stat-card.md",
      "record": "https://componentes-lovat.vercel.app/r/stat-card.json",
      "standalone": "https://componentes-lovat.vercel.app/r/stat-card.html",
      "design": "coss ui (MIT) · card.tsx, sidebar.tsx (aspecto)",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/stat-card.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para 3 o 4 números clave arriba de un dashboard."
      ],
      "cuando_no": [
        "Con más de 4 en una fila: pierde foco.",
        "Con cifras sin fuente."
      ],
      "when": [
        "For 3 or 4 key numbers at the top of a dashboard."
      ],
      "when_not": [
        "More than 4 in a row: it loses focus.",
        "With figures you can't source."
      ]
    },
    {
      "name": "chart",
      "title": {
        "es": "Gráfico",
        "en": "Chart"
      },
      "summary": {
        "es": "Línea y barras sin dependencias; los datos viven en una tabla HTML.",
        "en": "Line and bar charts with no dependencies; data lives in an HTML table."
      },
      "category": "dashboard",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "img",
        "table"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/chart/chart.html",
        "https://componentes-lovat.vercel.app/raw/chart/chart.css",
        "https://componentes-lovat.vercel.app/raw/chart/chart.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/chart/",
      "markdown": "https://componentes-lovat.vercel.app/c/chart.md",
      "record": "https://componentes-lovat.vercel.app/r/chart.json",
      "standalone": "https://componentes-lovat.vercel.app/r/chart.html",
      "design": "W3C WAI, Complex images",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/chart.html",
      "contexto": "herramienta",
      "densidad": "alta",
      "tono": "sobria",
      "cuando": [
        "Para mostrar una tendencia (línea) o comparar categorías (barras).",
        "Hasta 3 series."
      ],
      "cuando_no": [
        "Para 2 o 3 números: escríbelos.",
        "Para partes de un todo con muchas categorías: usa una tabla."
      ],
      "when": [
        "To show a trend (line) or compare categories (bars).",
        "Up to 3 series."
      ],
      "when_not": [
        "For 2 or 3 numbers: write them.",
        "For parts of a whole with many categories: use a table."
      ]
    },
    {
      "name": "button",
      "title": {
        "es": "Botón",
        "en": "Button"
      },
      "summary": {
        "es": "Dispara una acción. Variantes primaria, contorno, secundaria, fantasma, peligro y enlace.",
        "en": "Triggers an action. Primary, outline, secondary, ghost, destructive and link variants."
      },
      "category": "actions",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "button",
        "link"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/button/button.html",
        "https://componentes-lovat.vercel.app/raw/button/button.css",
        "https://componentes-lovat.vercel.app/raw/button/button.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/button/",
      "markdown": "https://componentes-lovat.vercel.app/c/button.md",
      "record": "https://componentes-lovat.vercel.app/r/button.json",
      "standalone": "https://componentes-lovat.vercel.app/r/button.html",
      "design": "coss ui (MIT) · button.tsx",
      "partes": [
        {
          "id": "accion",
          "tipo": "accion",
          "nombre": {
            "es": "Botón",
            "en": "Button"
          }
        }
      ],
      "pieza": "https://componentes-lovat.vercel.app/r/button.pieza.html",
      "contexto": "ambos",
      "densidad": "baja",
      "tono": "sobria",
      "cuando": [
        "Para acciones en la página: guardar, abrir, copiar.",
        "La variante enlace sirve para navegar con aspecto de botón de texto."
      ],
      "cuando_no": [
        "Para ir a otra página con aspecto de botón lleno: usa <a class=\"c-btn\">.",
        "Más de un primario por zona."
      ],
      "when": [
        "For on-page actions: save, open, copy.",
        "The link variant navigates with a text-button look."
      ],
      "when_not": [
        "To navigate with a filled look: use <a class=\"c-btn\">.",
        "More than one primary per area."
      ]
    },
    {
      "name": "text-field",
      "title": {
        "es": "Campo de texto",
        "en": "Text field"
      },
      "summary": {
        "es": "Campo y área de texto con etiqueta, ayuda y error.",
        "en": "Input and textarea with label, hint and error."
      },
      "category": "forms",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [
        "button"
      ],
      "roles": [
        "textbox"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/text-field/text-field.html",
        "https://componentes-lovat.vercel.app/raw/text-field/text-field.css",
        "https://componentes-lovat.vercel.app/raw/text-field/text-field.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/text-field/",
      "markdown": "https://componentes-lovat.vercel.app/c/text-field.md",
      "record": "https://componentes-lovat.vercel.app/r/text-field.json",
      "standalone": "https://componentes-lovat.vercel.app/r/text-field.html",
      "design": "coss ui (MIT) · input.tsx, textarea.tsx, field.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/text-field.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para texto libre corto o largo.",
        "Siempre con etiqueta visible."
      ],
      "cuando_no": [
        "Con el placeholder como única etiqueta."
      ],
      "when": [
        "For short or long free text.",
        "Always with a visible label."
      ],
      "when_not": [
        "With the placeholder as the only label."
      ]
    },
    {
      "name": "checkbox",
      "title": {
        "es": "Checkbox",
        "en": "Checkbox"
      },
      "summary": {
        "es": "Casillas con el diseño de coss ui sobre un checkbox nativo. Incluye «Todo» con estado intermedio.",
        "en": "coss ui checkboxes over a native checkbox. Includes “All” with a mixed state."
      },
      "category": "forms",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "checkbox",
        "group"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.html",
        "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.css",
        "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/checkbox/",
      "markdown": "https://componentes-lovat.vercel.app/c/checkbox.md",
      "record": "https://componentes-lovat.vercel.app/r/checkbox.json",
      "standalone": "https://componentes-lovat.vercel.app/r/checkbox.html",
      "design": "coss ui (MIT) · checkbox.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/checkbox.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para elegir varias opciones.",
        "Para una aceptación."
      ],
      "cuando_no": [
        "Si solo se puede una: usa radios.",
        "Para algo que se aplica al instante: usa un switch."
      ],
      "when": [
        "To choose several options.",
        "For a single agreement."
      ],
      "when_not": [
        "If only one is allowed: use radios.",
        "For instant settings: use a switch."
      ]
    },
    {
      "name": "radio",
      "title": {
        "es": "Radio",
        "en": "Radio"
      },
      "summary": {
        "es": "Grupo de opciones excluyentes con el diseño de coss ui sobre radios nativos.",
        "en": "Mutually exclusive options with coss ui's design over native radios."
      },
      "category": "forms",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "radio",
        "radiogroup"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/radio/radio.html",
        "https://componentes-lovat.vercel.app/raw/radio/radio.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/radio/",
      "markdown": "https://componentes-lovat.vercel.app/c/radio.md",
      "record": "https://componentes-lovat.vercel.app/r/radio.json",
      "standalone": "https://componentes-lovat.vercel.app/r/radio.html",
      "design": "coss ui (MIT) · radio-group.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/radio.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para 2 a 6 opciones visibles."
      ],
      "cuando_no": [
        "Si se pueden elegir varias: usa checkboxes."
      ],
      "when": [
        "For 2 to 6 visible options."
      ],
      "when_not": [
        "If several can be chosen: use checkboxes."
      ]
    },
    {
      "name": "select",
      "title": {
        "es": "Select",
        "en": "Select"
      },
      "summary": {
        "es": "El select del navegador con el aspecto del de coss ui.",
        "en": "The browser's select with coss ui's look."
      },
      "category": "forms",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "combobox",
        "listbox",
        "option"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/select/select.html",
        "https://componentes-lovat.vercel.app/raw/select/select.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/select/",
      "markdown": "https://componentes-lovat.vercel.app/c/select.md",
      "record": "https://componentes-lovat.vercel.app/r/select.json",
      "standalone": "https://componentes-lovat.vercel.app/r/select.html",
      "design": "coss ui (MIT) · select.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/select.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para elegir una opción entre 5 y 30."
      ],
      "cuando_no": [
        "Con 2 a 4 opciones: usa radios.",
        "Para acciones: usa un menú."
      ],
      "when": [
        "To pick one of 5 to 30 options."
      ],
      "when_not": [
        "With 2 to 4 options: use radios.",
        "For actions: use a menu."
      ]
    },
    {
      "name": "switch",
      "title": {
        "es": "Switch",
        "en": "Switch"
      },
      "summary": {
        "es": "Interruptor para ajustes que se aplican al instante.",
        "en": "Toggle for settings applied instantly."
      },
      "category": "forms",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "switch"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/switch/switch.html",
        "https://componentes-lovat.vercel.app/raw/switch/switch.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/switch/",
      "markdown": "https://componentes-lovat.vercel.app/c/switch.md",
      "record": "https://componentes-lovat.vercel.app/r/switch.json",
      "standalone": "https://componentes-lovat.vercel.app/r/switch.html",
      "design": "coss ui (MIT) · switch.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/switch.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para ajustes inmediatos (modo avión, avisos)."
      ],
      "cuando_no": [
        "Dentro de un formulario con botón de enviar: usa checkbox."
      ],
      "when": [
        "For immediate settings (airplane mode, notifications)."
      ],
      "when_not": [
        "Inside a form with a submit button: use a checkbox."
      ]
    },
    {
      "name": "navbar",
      "title": {
        "es": "Barra de navegación",
        "en": "Navigation bar"
      },
      "summary": {
        "es": "Cabecera con logo, enlaces y acciones. En móvil, los enlaces van a un menú.",
        "en": "Header with logo, links and actions. On mobile, links move into a menu."
      },
      "category": "navigation",
      "status": "stable",
      "nivel": "globales",
      "requires": [
        "button"
      ],
      "roles": [
        "navigation",
        "link",
        "button"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/navbar/navbar.html",
        "https://componentes-lovat.vercel.app/raw/navbar/navbar.css",
        "https://componentes-lovat.vercel.app/raw/navbar/navbar.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/navbar/",
      "markdown": "https://componentes-lovat.vercel.app/c/navbar.md",
      "record": "https://componentes-lovat.vercel.app/r/navbar.json",
      "standalone": "https://componentes-lovat.vercel.app/r/navbar.html",
      "design": "Origin UI (MIT) · comp-577.tsx, navigation-menu.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/navbar.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Como cabecera de cualquier sitio."
      ],
      "cuando_no": [
        "Con más de 6 enlaces: agrupa o usa una barra lateral."
      ],
      "when": [
        "As the header of any site."
      ],
      "when_not": [
        "With more than 6 links: group them or use a sidebar."
      ]
    },
    {
      "name": "breadcrumb",
      "title": {
        "es": "Breadcrumbs",
        "en": "Breadcrumbs"
      },
      "summary": {
        "es": "Muestra dónde estás dentro del sitio.",
        "en": "Shows where you are in the site."
      },
      "category": "navigation",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "navigation",
        "link"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.html",
        "https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/breadcrumb/",
      "markdown": "https://componentes-lovat.vercel.app/c/breadcrumb.md",
      "record": "https://componentes-lovat.vercel.app/r/breadcrumb.json",
      "standalone": "https://componentes-lovat.vercel.app/r/breadcrumb.html",
      "design": "coss ui (MIT) · breadcrumb.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/breadcrumb.html",
      "contexto": "ambos",
      "densidad": "baja",
      "tono": "sobria",
      "cuando": [
        "En sitios con 3 o más niveles."
      ],
      "cuando_no": [
        "Como navegación principal."
      ],
      "when": [
        "In sites with 3 or more levels."
      ],
      "when_not": [
        "As the main navigation."
      ]
    },
    {
      "name": "pagination",
      "title": {
        "es": "Paginación",
        "en": "Pagination"
      },
      "summary": {
        "es": "Enlaces a páginas de resultados con anterior y siguiente.",
        "en": "Links to result pages with previous and next."
      },
      "category": "navigation",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "navigation",
        "link"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/pagination/pagination.html",
        "https://componentes-lovat.vercel.app/raw/pagination/pagination.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/pagination/",
      "markdown": "https://componentes-lovat.vercel.app/c/pagination.md",
      "record": "https://componentes-lovat.vercel.app/r/pagination.json",
      "standalone": "https://componentes-lovat.vercel.app/r/pagination.html",
      "design": "coss ui (MIT) · pagination.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/pagination.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Cuando una lista se divide en páginas."
      ],
      "cuando_no": [
        "Con pocas entradas: muéstralas todas."
      ],
      "when": [
        "When a list is split into pages."
      ],
      "when_not": [
        "With few items: show them all."
      ]
    },
    {
      "name": "tabs",
      "title": {
        "es": "Pestañas",
        "en": "Tabs"
      },
      "summary": {
        "es": "Cambia entre vistas; el indicador se desliza bajo la pestaña activa.",
        "en": "Switches views; the indicator slides under the active tab."
      },
      "category": "navigation",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "tablist",
        "tab",
        "tabpanel"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/tabs/tabs.html",
        "https://componentes-lovat.vercel.app/raw/tabs/tabs.css",
        "https://componentes-lovat.vercel.app/raw/tabs/tabs.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/tabs/",
      "markdown": "https://componentes-lovat.vercel.app/c/tabs.md",
      "record": "https://componentes-lovat.vercel.app/r/tabs.json",
      "standalone": "https://componentes-lovat.vercel.app/r/tabs.html",
      "design": "coss ui (MIT) · tabs.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/tabs.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para 2 a 6 vistas del mismo tema."
      ],
      "cuando_no": [
        "Si cada pestaña cambia la URL: son enlaces."
      ],
      "when": [
        "For 2 to 6 views of one topic."
      ],
      "when_not": [
        "If each tab changes the URL: those are links."
      ]
    },
    {
      "name": "accordion",
      "title": {
        "es": "Acordeón",
        "en": "Accordion"
      },
      "summary": {
        "es": "Secciones que se abren y cierran. Funciona sin JavaScript.",
        "en": "Sections that open and close. Works without JavaScript."
      },
      "category": "disclosure",
      "status": "stable",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "group",
        "button (summary)"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/accordion/accordion.html",
        "https://componentes-lovat.vercel.app/raw/accordion/accordion.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/accordion/",
      "markdown": "https://componentes-lovat.vercel.app/c/accordion.md",
      "record": "https://componentes-lovat.vercel.app/r/accordion.json",
      "standalone": "https://componentes-lovat.vercel.app/r/accordion.html",
      "design": "coss ui (MIT) · accordion.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/accordion.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para preguntas frecuentes y paneles largos."
      ],
      "cuando_no": [
        "Para el contenido principal."
      ],
      "when": [
        "For FAQs and long panels."
      ],
      "when_not": [
        "For the main content."
      ]
    },
    {
      "name": "menu",
      "title": {
        "es": "Menú desplegable",
        "en": "Dropdown menu"
      },
      "summary": {
        "es": "Lista de acciones que se abre desde un botón.",
        "en": "List of actions opened from a button."
      },
      "category": "disclosure",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "button",
        "menu",
        "menuitem"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/menu/menu.html",
        "https://componentes-lovat.vercel.app/raw/menu/menu.css",
        "https://componentes-lovat.vercel.app/raw/menu/menu.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/menu/",
      "markdown": "https://componentes-lovat.vercel.app/c/menu.md",
      "record": "https://componentes-lovat.vercel.app/r/menu.json",
      "standalone": "https://componentes-lovat.vercel.app/r/menu.html",
      "design": "coss ui (MIT) · menu.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/menu.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para acciones secundarias sobre un elemento."
      ],
      "cuando_no": [
        "Para navegar entre páginas: usa enlaces.",
        "Para elegir un valor: usa select."
      ],
      "when": [
        "For secondary actions on an item."
      ],
      "when_not": [
        "To navigate between pages: use links.",
        "To pick a value: use a select."
      ]
    },
    {
      "name": "tooltip",
      "title": {
        "es": "Tooltip",
        "en": "Tooltip"
      },
      "summary": {
        "es": "Etiqueta breve al pasar el ratón o enfocar.",
        "en": "Short label on hover or focus."
      },
      "category": "disclosure",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "tooltip"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/tooltip/tooltip.html",
        "https://componentes-lovat.vercel.app/raw/tooltip/tooltip.css",
        "https://componentes-lovat.vercel.app/raw/tooltip/tooltip.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/tooltip/",
      "markdown": "https://componentes-lovat.vercel.app/c/tooltip.md",
      "record": "https://componentes-lovat.vercel.app/r/tooltip.json",
      "standalone": "https://componentes-lovat.vercel.app/r/tooltip.html",
      "design": "coss ui (MIT) · tooltip.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/tooltip.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para nombrar botones con icono o dar un atajo."
      ],
      "cuando_no": [
        "Para información importante: en pantallas táctiles no hay hover."
      ],
      "when": [
        "To name icon buttons or show a shortcut."
      ],
      "when_not": [
        "For important information: touch screens have no hover."
      ]
    },
    {
      "name": "dialog",
      "title": {
        "es": "Diálogo",
        "en": "Dialog"
      },
      "summary": {
        "es": "Ventana modal para una tarea corta o una confirmación.",
        "en": "Modal window for a short task or a confirmation."
      },
      "category": "overlays",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button",
        "text-field"
      ],
      "roles": [
        "dialog",
        "alertdialog"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/dialog/dialog.html",
        "https://componentes-lovat.vercel.app/raw/dialog/dialog.css",
        "https://componentes-lovat.vercel.app/raw/dialog/dialog.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/dialog/",
      "markdown": "https://componentes-lovat.vercel.app/c/dialog.md",
      "record": "https://componentes-lovat.vercel.app/r/dialog.json",
      "standalone": "https://componentes-lovat.vercel.app/r/dialog.html",
      "design": "coss ui (MIT) · dialog.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/dialog.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para confirmar algo irreversible.",
        "Para una tarea corta."
      ],
      "cuando_no": [
        "Para avisar que algo salió bien: usa un aviso."
      ],
      "when": [
        "To confirm something irreversible.",
        "For a short task."
      ],
      "when_not": [
        "To say something worked: use a toast."
      ]
    },
    {
      "name": "drawer",
      "title": {
        "es": "Drawer",
        "en": "Drawer"
      },
      "summary": {
        "es": "Panel lateral para filtros, ajustes o detalles.",
        "en": "Side panel for filters, settings or details."
      },
      "category": "overlays",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button",
        "text-field",
        "dialog"
      ],
      "roles": [
        "dialog"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/drawer/drawer.html",
        "https://componentes-lovat.vercel.app/raw/drawer/drawer.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/drawer/",
      "markdown": "https://componentes-lovat.vercel.app/c/drawer.md",
      "record": "https://componentes-lovat.vercel.app/r/drawer.json",
      "standalone": "https://componentes-lovat.vercel.app/r/drawer.html",
      "design": "coss ui (MIT) · sheet.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/drawer.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para tareas secundarias sin perder la página de vista."
      ],
      "cuando_no": [
        "Para confirmaciones cortas: usa un diálogo."
      ],
      "when": [
        "For secondary tasks without losing the page."
      ],
      "when_not": [
        "For short confirmations: use a dialog."
      ]
    },
    {
      "name": "alert",
      "title": {
        "es": "Alerta",
        "en": "Alert"
      },
      "summary": {
        "es": "Mensaje en la página: información, éxito, advertencia o error.",
        "en": "In-page message: info, success, warning or error."
      },
      "category": "feedback",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "note",
        "alert"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/alert/alert.html",
        "https://componentes-lovat.vercel.app/raw/alert/alert.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/alert/",
      "markdown": "https://componentes-lovat.vercel.app/c/alert.md",
      "record": "https://componentes-lovat.vercel.app/r/alert.json",
      "standalone": "https://componentes-lovat.vercel.app/r/alert.html",
      "design": "coss ui (MIT) · alert.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/alert.html",
      "contexto": "ambos",
      "densidad": "baja",
      "tono": "sobria",
      "cuando": [
        "Para mensajes que deben quedarse a la vista."
      ],
      "cuando_no": [
        "Para confirmaciones pasajeras: usa un aviso."
      ],
      "when": [
        "For messages that must stay visible."
      ],
      "when_not": [
        "For passing confirmations: use a toast."
      ]
    },
    {
      "name": "toast",
      "title": {
        "es": "Aviso (toast)",
        "en": "Toast"
      },
      "summary": {
        "es": "Mensaje breve que se apila y se despliega al pasar el ratón.",
        "en": "Short message that stacks and spreads on hover."
      },
      "category": "feedback",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button"
      ],
      "roles": [
        "status"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/toast/toast.html",
        "https://componentes-lovat.vercel.app/raw/toast/toast.css",
        "https://componentes-lovat.vercel.app/raw/toast/toast.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/toast/",
      "markdown": "https://componentes-lovat.vercel.app/c/toast.md",
      "record": "https://componentes-lovat.vercel.app/r/toast.json",
      "standalone": "https://componentes-lovat.vercel.app/r/toast.html",
      "design": "coss ui (MIT) · toast.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/toast.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para confirmar algo que ya pasó."
      ],
      "cuando_no": [
        "Para errores de formulario: ponlos junto al campo."
      ],
      "when": [
        "To confirm something that already happened."
      ],
      "when_not": [
        "For form errors: place them next to the field."
      ]
    },
    {
      "name": "badge",
      "title": {
        "es": "Badge",
        "en": "Badge"
      },
      "summary": {
        "es": "Etiqueta corta de estado, categoría o cantidad.",
        "en": "Short label for status, category or count."
      },
      "category": "data",
      "status": "stable",
      "nivel": "primitivos",
      "requires": [],
      "roles": [
        "(texto)"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/badge/badge.html",
        "https://componentes-lovat.vercel.app/raw/badge/badge.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/badge/",
      "markdown": "https://componentes-lovat.vercel.app/c/badge.md",
      "record": "https://componentes-lovat.vercel.app/r/badge.json",
      "standalone": "https://componentes-lovat.vercel.app/r/badge.html",
      "design": "coss ui (MIT) · badge.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/badge.html",
      "contexto": "ambos",
      "densidad": "baja",
      "tono": "sobria",
      "cuando": [
        "Para el estado de un elemento en una tabla o lista."
      ],
      "cuando_no": [
        "Como botón: no se puede pulsar."
      ],
      "when": [
        "For an item's status in a table or list."
      ],
      "when_not": [
        "As a button: it can't be pressed."
      ]
    },
    {
      "name": "file-explorer",
      "title": {
        "es": "Explorador de archivos",
        "en": "Explorador de archivos"
      },
      "summary": {
        "es": "Selecciona, busca y lee archivos locales de texto/CSV.",
        "en": "Selecciona, busca y lee archivos locales de texto/CSV."
      },
      "category": "data",
      "status": "beta",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.html",
        "https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.css",
        "https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/file-explorer/",
      "markdown": "https://componentes-lovat.vercel.app/c/file-explorer.md",
      "record": "https://componentes-lovat.vercel.app/r/file-explorer.json",
      "standalone": "https://componentes-lovat.vercel.app/r/file-explorer.html",
      "design": "",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/file-explorer.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Selecciona, busca y lee archivos locales de texto/CSV."
      ],
      "cuando_no": [
        "Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor."
      ],
      "when": [
        "Selecciona, busca y lee archivos locales de texto/CSV."
      ],
      "when_not": [
        "Examples do not connect accounts or save files to a server."
      ]
    },
    {
      "name": "table",
      "title": {
        "es": "Tabla",
        "en": "Table"
      },
      "summary": {
        "es": "Tabla con orden por columna y desplazamiento horizontal en móvil.",
        "en": "Table with column sorting and horizontal scroll on mobile."
      },
      "category": "data",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "badge"
      ],
      "roles": [
        "table",
        "columnheader",
        "button"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/table/table.html",
        "https://componentes-lovat.vercel.app/raw/table/table.css",
        "https://componentes-lovat.vercel.app/raw/table/table.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/table/",
      "markdown": "https://componentes-lovat.vercel.app/c/table.md",
      "record": "https://componentes-lovat.vercel.app/r/table.json",
      "standalone": "https://componentes-lovat.vercel.app/r/table.html",
      "design": "coss ui (MIT) · table.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/table.html",
      "contexto": "herramienta",
      "densidad": "alta",
      "tono": "sobria",
      "cuando": [
        "Para datos que se comparan por filas y columnas."
      ],
      "cuando_no": [
        "Para maquetar: usa grid."
      ],
      "when": [
        "For data compared by rows and columns."
      ],
      "when_not": [
        "For layout: use grid."
      ]
    },
    {
      "name": "cost-table",
      "title": {
        "es": "Tabla de costeo",
        "en": "Tabla de costeo"
      },
      "summary": {
        "es": "Edición, selección, filtros y totales de partidas.",
        "en": "Edición, selección, filtros y totales de partidas."
      },
      "category": "data",
      "status": "beta",
      "nivel": "componentes",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/cost-table/cost-table.html",
        "https://componentes-lovat.vercel.app/raw/cost-table/cost-table.css",
        "https://componentes-lovat.vercel.app/raw/cost-table/cost-table.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/cost-table/",
      "markdown": "https://componentes-lovat.vercel.app/c/cost-table.md",
      "record": "https://componentes-lovat.vercel.app/r/cost-table.json",
      "standalone": "https://componentes-lovat.vercel.app/r/cost-table.html",
      "design": "",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/cost-table.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Edición, selección, filtros y totales de partidas."
      ],
      "cuando_no": [
        "Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor."
      ],
      "when": [
        "Edición, selección, filtros y totales de partidas."
      ],
      "when_not": [
        "Examples do not connect accounts or save files to a server."
      ]
    },
    {
      "name": "card",
      "title": {
        "es": "Tarjeta",
        "en": "Card"
      },
      "summary": {
        "es": "Contenedor con cabecera, contenido y acciones.",
        "en": "Container with header, content and actions."
      },
      "category": "data",
      "status": "stable",
      "nivel": "componentes",
      "requires": [
        "button",
        "badge"
      ],
      "roles": [
        "article"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/card/card.html",
        "https://componentes-lovat.vercel.app/raw/card/card.css"
      ],
      "page": "https://componentes-lovat.vercel.app/c/card/",
      "markdown": "https://componentes-lovat.vercel.app/c/card.md",
      "record": "https://componentes-lovat.vercel.app/r/card.json",
      "standalone": "https://componentes-lovat.vercel.app/r/card.html",
      "design": "coss ui (MIT) · card.tsx",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/card.html",
      "contexto": "ambos",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Para agrupar un resumen con sus acciones."
      ],
      "cuando_no": [
        "Envolviendo todo en un enlace: enlaza desde el título."
      ],
      "when": [
        "To group a summary with its actions."
      ],
      "when_not": [
        "Wrapping everything in a link: link from the title."
      ]
    },
    {
      "name": "flow-import",
      "title": {
        "es": "Importar y revisar",
        "en": "Importar y revisar"
      },
      "summary": {
        "es": "Seleccionar archivo → revisar contenido → descargar copia.",
        "en": "Seleccionar archivo → revisar contenido → descargar copia."
      },
      "category": "flows",
      "status": "beta",
      "nivel": "flujos",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/flow-import/flow-import.html",
        "https://componentes-lovat.vercel.app/raw/flow-import/flow-import.css",
        "https://componentes-lovat.vercel.app/raw/flow-import/flow-import.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/flow-import/",
      "markdown": "https://componentes-lovat.vercel.app/c/flow-import.md",
      "record": "https://componentes-lovat.vercel.app/r/flow-import.json",
      "standalone": "https://componentes-lovat.vercel.app/r/flow-import.html",
      "design": "",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/flow-import.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Seleccionar archivo → revisar contenido → descargar copia."
      ],
      "cuando_no": [
        "Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor."
      ],
      "when": [
        "Seleccionar archivo → revisar contenido → descargar copia."
      ],
      "when_not": [
        "Examples do not connect accounts or save files to a server."
      ]
    },
    {
      "name": "flow-quote",
      "title": {
        "es": "Preparar una cotización",
        "en": "Preparar una cotización"
      },
      "summary": {
        "es": "Cliente → editar partidas y totales → exportar cotización JSON.",
        "en": "Cliente → editar partidas y totales → exportar cotización JSON."
      },
      "category": "flows",
      "status": "beta",
      "nivel": "flujos",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/flow-quote/flow-quote.html",
        "https://componentes-lovat.vercel.app/raw/flow-quote/flow-quote.css",
        "https://componentes-lovat.vercel.app/raw/flow-quote/flow-quote.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/flow-quote/",
      "markdown": "https://componentes-lovat.vercel.app/c/flow-quote.md",
      "record": "https://componentes-lovat.vercel.app/r/flow-quote.json",
      "standalone": "https://componentes-lovat.vercel.app/r/flow-quote.html",
      "design": "",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/flow-quote.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Cliente → editar partidas y totales → exportar cotización JSON."
      ],
      "cuando_no": [
        "Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor."
      ],
      "when": [
        "Cliente → editar partidas y totales → exportar cotización JSON."
      ],
      "when_not": [
        "Examples do not connect accounts or save files to a server."
      ]
    },
    {
      "name": "flow-reference",
      "title": {
        "es": "Referencia a exploración",
        "en": "Referencia a exploración"
      },
      "summary": {
        "es": "Registrar fuente e intención → revisar → comparar tratamientos visuales.",
        "en": "Registrar fuente e intención → revisar → comparar tratamientos visuales."
      },
      "category": "flows",
      "status": "beta",
      "nivel": "flujos",
      "requires": [],
      "roles": [
        "region"
      ],
      "files": [
        "https://componentes-lovat.vercel.app/raw/flow-reference/flow-reference.html",
        "https://componentes-lovat.vercel.app/raw/flow-reference/flow-reference.css",
        "https://componentes-lovat.vercel.app/raw/flow-reference/flow-reference.js"
      ],
      "page": "https://componentes-lovat.vercel.app/c/flow-reference/",
      "markdown": "https://componentes-lovat.vercel.app/c/flow-reference.md",
      "record": "https://componentes-lovat.vercel.app/r/flow-reference.json",
      "standalone": "https://componentes-lovat.vercel.app/r/flow-reference.html",
      "design": "",
      "partes": [],
      "pieza": "https://componentes-lovat.vercel.app/r/flow-reference.html",
      "contexto": "herramienta",
      "densidad": "media",
      "tono": "sobria",
      "cuando": [
        "Registrar fuente e intención → revisar → comparar tratamientos visuales."
      ],
      "cuando_no": [
        "Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor."
      ],
      "when": [
        "Registrar fuente e intención → revisar → comparar tratamientos visuales."
      ],
      "when_not": [
        "Examples do not connect accounts or save files to a server."
      ]
    }
  ],
  "vocabulario": {
    "contexto": [
      "landing",
      "herramienta",
      "ambos"
    ],
    "densidad": [
      "baja",
      "media",
      "alta"
    ],
    "tono": [
      "sobria",
      "editorial",
      "lúdica"
    ]
  },
  "temas": {
    "fuente": "https://sanzo-wada-chi.vercel.app/temas/NNN.css",
    "acento": ".wada-NNN",
    "inmersivo": ".wada-NNN-inmersivo"
  }
}