{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "dropdown",
  "version": "2.0.0",
  "name": "Dropdown",
  "category": "navigation",
  "appStatus": "planned",
  "appMapping": "adapted",
  "appNote": "hover 起動は存在しない。タップ起動の Menu（アンカー付き）or ActionSheet に変換",
  "intent": "ドロップダウンメニュー。キーボードナビゲーション対応。",
  "docPath": "components/dropdown.md",
  "anatomy": ["triggerButton", "menuContainer", "menuItem", "leadingIcon?", "separator?", "menuGroupLabel?"],
  "variants": {
    "basic": {
      "description": "テキストのみのシンプルなメニュー",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "elevation": "elevation.md",
        "radius": "radius.md",
        "z": "zIndex.dropdown"
      },
      "tailwind": "absolute top-full mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1"
    },
    "with-icons": {
      "description": "アイコン付きメニューアイテム",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "elevation": "elevation.md",
        "radius": "radius.md",
        "z": "zIndex.dropdown"
      },
      "tailwind": "absolute top-full mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1"
    },
    "with-separator": {
      "description": "セパレータでグループ分けされたメニュー",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "elevation": "elevation.md",
        "radius": "radius.md",
        "z": "zIndex.dropdown"
      },
      "tailwind": "absolute top-full mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "open",
    "hover",
    "focus",
    "disabled",
    "destructive"
  ],
  "stateSpecs": {
    "open": { "description": "メニュー展開。menuContainer variant が開いた姿そのもの＝差分なし。", "tailwind": "", "ariaChanges": "triggerButton に aria-expanded=\"true\"。menuContainer を role=\"menu\" で表示。", "htmlNote": "structural 状態。variant の tailwind（absolute top-full ... z-20）が open の表示。default は menuContainer を hidden で隠す。" },
    "destructive": { "description": "破壊的アクションの menuItem。menuItem 基底への overlay 差分。", "tailwind": "text-red-700 hover:bg-red-50", "htmlNote": "「削除」等の危険操作項目に適用。アイコンも text-red-600 に揃える。" },
    "disabled": { "description": "操作不可。全 variant 共通。", "tailwind": "opacity-50 cursor-not-allowed pointer-events-none", "ariaChanges": "トリガーに aria-disabled=\"true\"。開けない（aria-expanded は false のまま）。" }
  },
  "a11y": {
    "role": "menu",
    "required": [
      "role=\"menuitem\" on items",
      "aria-haspopup on trigger"
    ],
    "keyboard": ["ArrowDown", "ArrowUp", "Home", "End", "Escape", "Tab"],
    "focusRing": "focus-visible:ring-2 focus-visible:ring-primary-500/50"
  },
  "rules": [],
  "htmlSample": "<div class=\"relative inline-block\"><button aria-haspopup=\"menu\" class=\"h-10 px-4 bg-white border border-slate-200 rounded-lg hover:bg-gray-50\">メニュー</button><div role=\"menu\" class=\"absolute top-full mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1\"><a role=\"menuitem\" class=\"flex items-center gap-3 px-4 py-2 text-sm text-body hover:bg-gray-50\">編集</a></div></div>"
}