{
  "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",
  "updated": "2026-09-30",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/stats/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/stats/stats.html",
      "content": "<section class=\"s-stats\" aria-labelledby=\"stats-title\">\n  <div class=\"s-stats__inner\">\n    <h2 class=\"s-stats__title\" id=\"stats-title\">En cifras</h2>\n    <p class=\"s-stats__lead\">Números de ejemplo para mostrar el crecimiento de tu producto.</p>\n    <dl class=\"s-stats__grid\">\n      <div class=\"s-stats__item\"><dt class=\"s-stats__label\">Componentes</dt><dd class=\"s-stats__value\">30</dd></div>\n      <div class=\"s-stats__item\"><dt class=\"s-stats__label\">Dependencias</dt><dd class=\"s-stats__value\">0</dd></div>\n      <div class=\"s-stats__item\"><dt class=\"s-stats__label\">Temas</dt><dd class=\"s-stats__value\">2</dd></div>\n      <div class=\"s-stats__item\"><dt class=\"s-stats__label\">Licencia</dt><dd class=\"s-stats__value\">MIT</dd></div>\n    </dl>\n  </div>\n</section>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/stats/stats.css",
      "content": "/* stats · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde stats.tw.json. No editar a mano. Necesita tokens.css. */\n.s-stats__inner{margin-inline:auto}\n.s-stats__lead{margin-top:calc(var(--spacing)*4)}\n.s-stats__grid{margin-top:calc(var(--spacing)*8);display:grid}\n.s-stats__inner{max-width:var(--container-5xl)}\n.s-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--spacing)*4)}\n.s-stats{background-color:var(--color-muted)}\n@supports (color:color-mix(in lab, red, red)){\n.s-stats{background-color:color-mix(in oklab,var(--color-muted)50%,transparent)}\n}\n.s-stats__inner{padding-inline:calc(var(--spacing)*6)}\n.s-stats{padding-block:calc(var(--spacing)*24)}\n.s-stats__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-stats__value{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-stats__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-stats__value{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}\n.s-stats__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-stats__lead{text-wrap:balance}\n.s-stats__value{color:var(--color-foreground)}\n.s-stats__lead{color:var(--color-muted-foreground)}\n.s-stats__label{color:var(--color-muted-foreground)}\n@media (min-width:48rem){\n.s-stats__grid{margin-top:calc(var(--spacing)*16);grid-template-columns:repeat(4,minmax(0,1fr))}\n}\n@media (min-width:64rem){\n.s-stats__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}\n}\n/* propio */\n.s-stats__grid{margin-bottom:0}\n.s-stats__grid dd{margin:0}\n.s-stats__item{display:flex;flex-direction:column-reverse;justify-content:flex-end}\n.s-stats__value{font-variant-numeric:tabular-nums}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/stats.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "baja",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Para mostrar tracción o resultados."
    ],
    "en": [
      "To show traction or results."
    ]
  },
  "avoid": {
    "es": [
      "Con cifras que no puedes respaldar."
    ],
    "en": [
      "With figures you can't back up."
    ]
  },
  "a11y": {
    "roles": [
      "term",
      "definition"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Lista de definiciones (dl): el lector une cada cifra con su etiqueta."
      ],
      "en": [
        "Definition list (dl): screen readers pair each figure with its label."
      ]
    },
    "test": {
      "es": [
        "El lector dice «Componentes, 30»."
      ],
      "en": [
        "The screen reader says “Components, 30”."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · stats/two",
      "url": "https://github.com/tailark/blocks"
    }
  ],
  "changes": [
    {
      "date": "2026-09-30",
      "es": "Diseño de Tailark mist en HTML y CSS sin dependencias",
      "en": "Tailark mist design in dependency-free HTML and CSS"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/stats.html"
}