{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "grade",
    "type": "registry:component",
    "title": "Trust grade",
    "description": "A letter grade from A to F on a fixed colour scale. Circle by default, large, or a labelled pill.",
    "registryDependencies": [
        "tokens",
        "tokens-console"
    ],
    "meta": {
        "category": "Console",
        "layout": "cluster",
        "theme": "console"
    },
    "files": [
        {
            "path": "components/grade.html",
            "type": "registry:file",
            "target": "components/grade.html",
            "content": "<!-- Trust grade\n     Set the grade with data-grade (a to f). Circle by default, lg for larger,\n     or data-variant=\"pill\" for a labelled pill. Shown under the console theme. -->\n\n<!-- Circles -->\n<span class=\"dp-grade\" data-grade=\"a\" aria-label=\"Grade A\">A</span>\n<span class=\"dp-grade\" data-grade=\"b\" aria-label=\"Grade B\">B</span>\n<span class=\"dp-grade\" data-grade=\"c\" aria-label=\"Grade C\">C</span>\n<span class=\"dp-grade\" data-grade=\"d\" aria-label=\"Grade D\">D</span>\n<span class=\"dp-grade\" data-grade=\"e\" aria-label=\"Grade E\">E</span>\n<span class=\"dp-grade\" data-grade=\"f\" aria-label=\"Grade F\">F</span>\n\n<!-- Large -->\n<span class=\"dp-grade\" data-grade=\"a\" data-size=\"lg\" aria-label=\"Grade A\">A</span>\n\n<!-- Pill with label -->\n<span class=\"dp-grade\" data-grade=\"a\" data-variant=\"pill\">A Trust grade</span>\n"
        },
        {
            "path": "components/grade.css",
            "type": "registry:file",
            "target": "components/grade.css",
            "content": "/* Trust grade\n   A letter grade from A to F, coloured on a fixed scale. Set the grade with\n   data-grade (a, b, c, d, e, f). Use the circle by default or data-variant=\"pill\"\n   for a labelled pill. Grade colours come from the console theme in tokens.css. */\n\n.dp-grade {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: var(--dp-radius-full);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-extrabold);\n  color: var(--dp-white);\n  background: var(--dp-grade-c);\n  text-transform: uppercase;\n}\n\n.dp-grade[data-grade=\"a\"] { background: var(--dp-grade-a); }\n.dp-grade[data-grade=\"b\"] { background: var(--dp-grade-b); }\n.dp-grade[data-grade=\"c\"] { background: var(--dp-grade-c); color: var(--dp-brand-purple, #2d145f); }\n.dp-grade[data-grade=\"d\"] { background: var(--dp-grade-d); }\n.dp-grade[data-grade=\"e\"] { background: var(--dp-grade-e); }\n.dp-grade[data-grade=\"f\"] { background: var(--dp-grade-f); }\n\n.dp-grade[data-size=\"lg\"] {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: var(--dp-text-lg);\n}\n\n/* Pill variant: letter plus a label */\n.dp-grade[data-variant=\"pill\"] {\n  width: auto;\n  height: auto;\n  gap: var(--dp-space-2);\n  padding: 4px var(--dp-space-3);\n  border-radius: var(--dp-radius-full);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n}\n"
        }
    ]
}