{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "copy-button",
  "version": "2.0.0",
  "name": "CopyButton",
  "category": "feedback",
  "appStatus": "not-planned",
  "appNote": "DS プリミティブでなくアプリ層のコンポジット（button + clipboard + toast）",
  "intent": "クリップボードコピー + pop アニメーション付きアイコンボタン。",
  "docPath": "components/copy-button.md",
  "anatomy": ["container", "copyIcon", "checkIcon"],
  "variants": {
    "outlined": {
      "description": "カード内、明るい背景上",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default"
      },
      "tailwind": "bg-white border border-slate-200 inline-flex items-center justify-center cursor-pointer"
    },
    "subtle": {
      "description": "ツールバー、コードブロック上",
      "tokenRefs": {
        "hover-bg": "color.semantic.light.bg-surface-alt"
      },
      "tailwind": "bg-transparent inline-flex items-center justify-center cursor-pointer hover:bg-gray-50"
    }
  },
  "sizes": {
    "large":  { "height": 48, "tailwind": "w-12 h-12 p-3 rounded-2xl", "icon": 24 },
    "medium": { "height": 40, "tailwind": "w-10 h-10 p-2.5 rounded-xl", "icon": 20 },
    "small":  { "height": 32, "tailwind": "w-8 h-8 p-2 rounded-lg", "icon": 16 }
  },
  "states": [
    "default",
    "hover",
    "active",
    "copied",
    "focus"
  ],
  "a11y": {
    "role": "button",
    "required": [
      "aria-label=\"コピー\"",
      "aria-label update on copied"
    ],
    "keyboard": ["Enter", "Space"],
    "focusRing": "focus-visible:ring-2 focus-visible:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "BTN_ICON_ONLY_ARIA_REQUIRED",
      "severity": "error"
    }
  ],
  "htmlSample": "<button class=\"copy-button\" aria-label=\"コピー\"><svg class=\"cb-icon cb-icon-copy w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"13\" height=\"13\" rx=\"2.5\"/><path d=\"M8 21h11a2 2 0 0 0 2-2v-11\"/></svg><svg class=\"cb-icon cb-icon-check w-5 h-5\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"currentColor\" opacity=\"0.15\"/><polyline points=\"7 12.5 10.5 16 17 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>"
}