{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "badge",
  "version": "2.0.0",
  "name": "Badge",
  "category": "data-display",
  "appStatus": "planned",
  "intent": "ステータス・カウント表示。Status / Dot / Count / Outline の4バリエーション。",
  "docPath": "components/badge.md",
  "anatomy": ["container", "dotIndicator?", "label"],
  "variants": {
    "neutral": {
      "description": "ニュートラル。未着手など中立的なステータス",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-page-alt",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700"
    },
    "success": {
      "description": "成功・完了ステータス",
      "tokenRefs": {
        "bg": "color.status.success.subtle-light",
        "text": "color.status.success.text-light",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700"
    },
    "warning": {
      "description": "警告・進行中ステータス",
      "tokenRefs": {
        "bg": "color.status.warning.subtle-light",
        "text": "color.status.warning.text-light",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700"
    },
    "danger": {
      "description": "エラー・ブロックステータス",
      "tokenRefs": {
        "bg": "color.status.danger.subtle-light",
        "text": "color.status.danger.text-light",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-red-50 text-red-700"
    },
    "accent": {
      "description": "アクセント。新規・注目表示",
      "tokenRefs": {
        "bg": "color.primary.50",
        "text": "color.primary.700",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700"
    }
  },
  "sizes": {},
  "states": [
    "default"
  ],
  "a11y": {
    "role": "status",
    "required": [],
    "keyboard": [],
    "focusRing": "N/A"
  },
  "rules": [
    {
      "id": "COLOR_ONLY_FORBIDDEN",
      "severity": "error"
    },
    {
      "id": "TAG_BADGE_CONFUSION",
      "severity": "warn"
    }
  ],
  "htmlSample": "<span class=\"inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700\">未着手</span>"
}