{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge (MIAN)",
  "description": "A compact label for status, counts and categories.",
  "categories": [
    "data display",
    "badge",
    "label",
    "status",
    "count"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/badge.css",
      "type": "registry:file",
      "target": "mian/components/badge.css",
      "content": ".mn-badge {\n  display: inline-flex; align-items: center; gap: .3em;\n  height: 1.375rem; padding: 0 .55em;\n  border: var(--mn-border-w) solid transparent;\n  border-radius: var(--mn-radius-badge);\n  background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg));\n  font: 600 .75rem/1 var(--mn-font); white-space: nowrap; vertical-align: middle;\n}\n.mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, transparent); color: color-mix(in oklab, var(--_ct, var(--mn-primary-text)) 82%, var(--mn-fg)); }\n.mn-badge-outline { background: transparent; color: var(--_ct, var(--mn-fg)); border-color: color-mix(in oklab, var(--_c, var(--mn-fg)) 45%, transparent); }\n.mn-badge.mn-secondary:not(.mn-badge-soft):not(.mn-badge-outline) { border-color: var(--mn-border); }\n.mn-badge-sm { height: 1.125rem; font-size: .6875rem; }\n.mn-badge-lg { height: 1.625rem; font-size: .8125rem; padding: 0 .7em; }\n.mn-badge svg { width: .9em; height: .9em; }\n.mn-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }"
    },
    {
      "path": "mian/examples/badge.html",
      "type": "registry:file",
      "target": "mian/examples/badge.html",
      "content": "<!-- Variants -->\n<span class=\"mn-badge\">Default</span>\n<span class=\"mn-badge mn-secondary\">Secondary</span>\n<span class=\"mn-badge mn-badge-soft\">Soft</span>\n<span class=\"mn-badge mn-badge-outline\">Outline</span>\n\n<!-- Status -->\n<span class=\"mn-badge mn-badge-soft mn-success\"><span class=\"mn-dot\"></span>Active</span>\n<span class=\"mn-badge mn-badge-soft mn-warning\"><span class=\"mn-dot\"></span>Pending</span>\n<span class=\"mn-badge mn-badge-soft mn-danger\"><span class=\"mn-dot\"></span>Failed</span>\n<span class=\"mn-badge mn-badge-soft mn-info\"><span class=\"mn-dot\"></span>Queued</span>\n<span class=\"mn-badge mn-badge-outline mn-neutral\">Draft</span>\n\n<!-- Counts -->\n<button class=\"mn-btn mn-btn-outline\" aria-label=\"Inbox, 12 unread\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox <span class=\"mn-badge mn-badge-sm\">12</span></button>\n<span class=\"mn-badge mn-danger mn-badge-lg\">99+</span>"
    }
  ],
  "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/badge",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-badge",
        "mn-badge-soft · mn-badge-outline",
        "mn-badge-sm · mn-badge-lg",
        "mn-dot",
        "mn-* colour roles"
      ],
      "accessibility": [
        "Badges are plain text. If a badge is a count on an icon button, include it in the button's aria-label."
      ],
      "intents": [
        "status label",
        "count badge",
        "tag",
        "new label",
        "category label"
      ]
    }
  }
}