{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "badge",
    "type": "registry:component",
    "title": "Badge",
    "description": "Small status or category label. Tone is set with data-tone and style with data-variant (soft is the default, solid for high emphasis).",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Data display",
        "layout": "cluster"
    },
    "files": [
        {
            "path": "components/badge.html",
            "type": "registry:file",
            "target": "components/badge.html",
            "content": "<!-- Badge\n     Tone: neutral, primary (default), success, warning, danger, info.\n     Variant: soft (default) or solid (data-variant=\"solid\"). -->\n\n<!-- Soft (default) -->\n<span class=\"dp-badge\" data-tone=\"primary\">Primary</span>\n<span class=\"dp-badge\" data-tone=\"neutral\">Neutral</span>\n<span class=\"dp-badge\" data-tone=\"success\">Active</span>\n<span class=\"dp-badge\" data-tone=\"warning\">Pending</span>\n<span class=\"dp-badge\" data-tone=\"danger\">Blocked</span>\n<span class=\"dp-badge\" data-tone=\"info\">Info</span>\n\n<!-- With a leading dot icon -->\n<span class=\"dp-badge\" data-tone=\"success\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"6\"></circle></svg>\n  Online\n</span>\n\n<!-- Solid -->\n<span class=\"dp-badge\" data-variant=\"solid\" data-tone=\"primary\">Primary</span>\n<span class=\"dp-badge\" data-variant=\"solid\" data-tone=\"success\">Success</span>\n<span class=\"dp-badge\" data-variant=\"solid\" data-tone=\"warning\">Warning</span>\n<span class=\"dp-badge\" data-variant=\"solid\" data-tone=\"danger\">Danger</span>\n"
        },
        {
            "path": "components/badge.css",
            "type": "registry:file",
            "target": "components/badge.css",
            "content": "/* Badge\n   A small status or category label. Tone is set with data-tone (neutral,\n   primary, success, warning, danger, info). Style is set with data-variant\n   (soft is the default, solid for high emphasis). Colour from tokens.css. */\n\n.dp-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-1);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n  line-height: 1;\n  padding: 4px var(--dp-space-2);\n  border-radius: var(--dp-radius-full);\n  white-space: nowrap;\n}\n\n.dp-badge svg {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n/* ---- Soft (default): tinted background, strong text ------------------ */\n.dp-badge,\n.dp-badge[data-tone=\"primary\"] {\n  background: var(--dp-primary-soft);\n  color: var(--dp-blue-700);\n}\n\n.dp-badge[data-tone=\"neutral\"] {\n  background: var(--dp-neutral-soft);\n  color: var(--dp-text-muted);\n}\n\n.dp-badge[data-tone=\"success\"] {\n  background: var(--dp-success-soft);\n  color: var(--dp-success);\n}\n\n.dp-badge[data-tone=\"warning\"] {\n  background: var(--dp-warning-soft);\n  color: var(--dp-warning);\n}\n\n.dp-badge[data-tone=\"danger\"] {\n  background: var(--dp-danger-soft);\n  color: var(--dp-danger);\n}\n\n.dp-badge[data-tone=\"info\"] {\n  background: var(--dp-info-soft);\n  color: var(--dp-info);\n}\n\n/* ---- Solid: filled background, light text ---------------------------- */\n.dp-badge[data-variant=\"solid\"] {\n  color: var(--dp-white);\n}\n\n.dp-badge[data-variant=\"solid\"],\n.dp-badge[data-variant=\"solid\"][data-tone=\"primary\"] {\n  background: var(--dp-primary-bg);\n}\n\n.dp-badge[data-variant=\"solid\"][data-tone=\"neutral\"] {\n  background: var(--dp-navy);\n}\n\n.dp-badge[data-variant=\"solid\"][data-tone=\"success\"] {\n  background: var(--dp-success);\n}\n\n.dp-badge[data-variant=\"solid\"][data-tone=\"warning\"] {\n  background: var(--dp-warning);\n}\n\n.dp-badge[data-variant=\"solid\"][data-tone=\"danger\"] {\n  background: var(--dp-danger);\n}\n\n.dp-badge[data-variant=\"solid\"][data-tone=\"info\"] {\n  background: var(--dp-info);\n}\n"
        }
    ]
}