{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "leaderboard",
  "type": "registry:ui",
  "title": "Leaderboard (MIAN)",
  "description": "A ranked list, top sellers, customers, contributors, with medals for the top three and a trend.",
  "categories": [
    "data display",
    "leaderboard",
    "ranking",
    "top",
    "sales team"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/leaderboard.css",
      "type": "registry:file",
      "target": "mian/components/leaderboard.css",
      "content": ".mn-leaderboard { margin: 0; padding: 0; list-style: none; counter-reset: mn-rank; }\n.mn-leader { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); counter-increment: mn-rank; }\n.mn-leader:last-child { border-bottom: 0; }\n.mn-leader::before { content: counter(mn-rank); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--mn-muted); font: 700 .875rem/1 var(--mn-font); font-variant-numeric: tabular-nums; }\n.mn-leader:nth-child(1)::before { background: #f5c542; color: #3b2a00; }\n.mn-leader:nth-child(2)::before { background: #d3d9e0; color: #1f2933; }\n.mn-leader:nth-child(3)::before { background: #e3a877; color: #3a1d06; }\n.mn-leader-name { display: grid; min-width: 0; line-height: 1.3; }\n.mn-leader-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }\n.mn-leader-name small { color: var(--mn-muted); font-size: .8125rem; }\n.mn-leader-value { display: grid; justify-items: end; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }\n.mn-leader-value small { color: var(--mn-success-text); font-size: .75rem; font-weight: 500; }"
    },
    {
      "path": "mian/examples/leaderboard.html",
      "type": "registry:file",
      "target": "mian/examples/leaderboard.html",
      "content": "<!-- Top sellers, Q3 -->\n<ol class=\"mn-leaderboard\" style=\"max-width:26rem\">\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">MR</span><span class=\"mn-leader-name\"><strong>Maren Richter</strong><small>Berlin</small></span><span class=\"mn-leader-value\">€184,200<small>+12%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">JO</span><span class=\"mn-leader-name\"><strong>Jonas Olsen</strong><small>Oslo</small></span><span class=\"mn-leader-value\">€162,900<small>+4%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">AP</span><span class=\"mn-leader-name\"><strong>Ana Popescu</strong><small>Cluj</small></span><span class=\"mn-leader-value\">€151,300<small>+22%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">LK</span><span class=\"mn-leader-name\"><strong>Lea Kim</strong><small>Vienna</small></span><span class=\"mn-leader-value\">€98,400<small>+2%</small></span></li>\n</ol>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/leaderboard",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-leaderboard",
        "mn-leader"
      ],
      "accessibility": [
        "An ordered list conveys rank; the medal colours are decoration.",
        "Write the change as text with its direction (“+12%”)."
      ],
      "intents": [
        "ranking",
        "top sellers",
        "leaderboard",
        "top customers"
      ]
    }
  }
}