{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "radio",
  "version": "2.0.0",
  "name": "Radio",
  "category": "form-input",
  "appStatus": "implemented",
  "intent": "単一選択フォームコントロール。fieldsetラッパー必須。",
  "docPath": "components/radio.md",
  "anatomy": ["radioCircle", "selectedIndicator?", "label", "groupLabel", "description?", "helperText?", "errorText?"],
  "variants": {
    "vertical": {
      "description": "縦並びレイアウト。標準的な配置",
      "tokenRefs": {},
      "tailwind": "flex flex-col gap-3"
    },
    "horizontal": {
      "description": "横並びレイアウト。2〜3個の短いラベル向け",
      "tokenRefs": {},
      "tailwind": "flex gap-4"
    },
    "card-style": {
      "description": "カード型レイアウト。説明付きプラン選択など",
      "tokenRefs": {
        "border": "color.semantic.light.border-default",
        "radius": "radius.md",
        "selected-border": "color.primary.500",
        "selected-bg": "color.primary.50"
      },
      "tailwind": "grid grid-cols-2 gap-4"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "selected",
    "unselected",
    "disabled",
    "error",
    "focus"
  ],
  "stateSpecs": {
    "selected": { "description": "選択済み。radioCircle 基底への overlay 差分 + selectedIndicator 表示。", "tailwind": "border-primary-500", "ariaChanges": "当該 <input type=\"radio\"> に checked + aria-checked=\"true\"。selectedIndicator（内側ドット bg-primary-500）を表示。" },
    "unselected": { "description": "未選択（radioCircle の基底状態）。default の resting と同義＝差分なし。", "tailwind": "", "ariaChanges": "aria-checked=\"false\"。selectedIndicator は非表示。" },
    "error": { "description": "バリデーションエラー。radioCircle 基底への overlay 差分。", "tailwind": "border-red-600", "ariaChanges": "radiogroup に aria-invalid=\"true\" + aria-describedby で errorText 参照。", "htmlNote": "errorText を text-red-600 で表示。selected と併用時は error の border-red-600 を優先（選択済みでもエラーなら赤枠）。" },
    "disabled": { "description": "操作不可。全 variant 共通。", "tailwind": "opacity-50 cursor-not-allowed pointer-events-none", "ariaChanges": "各 <input type=\"radio\"> に disabled + aria-disabled=\"true\"。" }
  },
  "a11y": {
    "role": "radio (native <input type=\"radio\">)",
    "required": [
      "fieldset wrapper",
      "label association"
    ],
    "keyboard": ["Tab", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft", "Space"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "FORM_FIELDSET_LEGEND_REQUIRED",
      "severity": "error"
    },
    {
      "id": "FORM_NO_LABEL_OMIT",
      "severity": "error"
    }
  ],
  "htmlSample": "<fieldset><legend class=\"text-sm font-medium text-slate-900 mb-3\">配送方法</legend><div class=\"flex flex-col gap-3\"><label class=\"flex items-center gap-2 cursor-pointer\"><input type=\"radio\" name=\"delivery\" class=\"w-4 h-4 accent-primary-500\"><span class=\"text-base text-body\">標準配送</span></label></div></fieldset>"
}