{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "tag",
  "version": "2.0.0",
  "name": "Tag",
  "category": "data-display",
  "appStatus": "implemented",
  "intent": "削除可能なタグ / フィルターチップ。",
  "docPath": "components/tag.md",
  "anatomy": ["container", "labelText", "removeButton?", "checkmarkIcon?"],
  "variants": {
    "basic": {
      "description": "基本タグ（表示のみ）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-page-alt",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700"
    },
    "removable": {
      "description": "削除ボタン付きタグ",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-page-alt",
        "radius": "radius.full"
      },
      "tailwind": "inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700"
    },
    "filter-chip": {
      "description": "フィルタートグルチップ（on/off 切替）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.full",
        "active-bg": "color.primary.50",
        "active-border": "color.primary.200",
        "active-text": "color.primary.700"
      },
      "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm border border-slate-200 cursor-pointer bg-white text-slate-700"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "active",
    "inactive",
    "hover",
    "focus"
  ],
  "a11y": {
    "role": "button (removable)",
    "required": [
      "aria-label (remove button)",
      "aria-selected (filter chip)"
    ],
    "keyboard": ["Tab", "ArrowLeft", "ArrowRight", "Delete", "Backspace", "Enter", "Space"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "TAG_X_ARIA_LABEL_REQUIRED",
      "severity": "error"
    },
    {
      "id": "TAG_REMOVABLE_X_REQUIRED",
      "severity": "error"
    },
    {
      "id": "TAG_X_MIN_TAP_TARGET",
      "severity": "error"
    },
    {
      "id": "TAG_FILTER_ARIA_SELECTED_REQUIRED",
      "severity": "error"
    },
    {
      "id": "TAG_BADGE_CONFUSION",
      "severity": "warn"
    }
  ],
  "htmlSample": "<div class=\"inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700\"><span>タグ</span><button aria-label=\"削除\" class=\"text-slate-500 hover:text-slate-700\">×</button></div>"
}