{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "toggle",
  "version": "2.0.0",
  "name": "Toggle",
  "category": "form-input",
  "appStatus": "implemented",
  "intent": "ON/OFFスイッチコンポーネント。role=\"switch\"必須。",
  "docPath": "components/toggle.md",
  "anatomy": ["track", "thumb", "label", "description?", "statusText?"],
  "variants": {
    "off": {
      "description": "OFF（無効）状態",
      "tokenRefs": {
        "track-bg": "color.semantic.light.border-strong",
        "thumb-bg": "color.semantic.light.bg-surface",
        "radius": "radius.full"
      },
      "tailwind": "relative inline-flex h-6 w-11 items-center rounded-full bg-slate-300"
    },
    "on": {
      "description": "ON（有効）状態",
      "tokenRefs": {
        "track-bg": "color.primary.500",
        "thumb-bg": "color.semantic.light.bg-surface",
        "radius": "radius.full"
      },
      "tailwind": "relative inline-flex h-6 w-11 items-center rounded-full bg-primary-500"
    }
  },
  "sizes": {
    "medium": {
      "height": 24,
      "tailwind": "h-6 w-11"
    },
    "large": {
      "height": 28,
      "tailwind": "h-7 w-14"
    }
  },
  "states": [
    "off",
    "on",
    "hover",
    "focus",
    "disabled"
  ],
  "variantModeledStates": ["off", "on"],
  "stateSpecs": {
    "disabled": { "description": "操作不可。off/on 共通。", "tailwind": "opacity-50 cursor-not-allowed pointer-events-none", "ariaChanges": "disabled 属性 + aria-disabled=\"true\"。aria-checked は現状態を保持。" }
  },
  "a11y": {
    "role": "switch",
    "required": [
      "aria-checked",
      "label association"
    ],
    "keyboard": ["Tab", "Space", "Enter"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [],
  "htmlSample": "<label class=\"flex items-center gap-3 cursor-pointer\"><div role=\"switch\" aria-checked=\"false\" class=\"relative inline-flex h-6 w-11 items-center rounded-full bg-slate-300\"><span class=\"inline-block h-5 w-5 transform rounded-full bg-white transition\"></span></div><span class=\"text-base text-body\">通知</span></label>"
}