{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "modal",
  "version": "2.0.0",
  "name": "Modal",
  "category": "feedback",
  "appStatus": "implemented",
  "intent": "フォーカストラップとバックドロップを備えたモーダルダイアログ。",
  "docPath": "components/modal.md",
  "anatomy": {
    "overlay":     { "description": "背景バックドロップ。クリックで閉じる。MODAL_OVERLAY_REQUIRED。", "element": "div", "tailwind": "bg-black/50 absolute inset-0" },
    "container":   { "description": "ダイアログ本体。フォーカストラップ範囲。", "element": "div", "roles": "role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\"", "tailwind": "bg-white rounded-xl p-6 shadow-xl relative z-10" },
    "header":      { "description": "タイトル。aria-labelledby 参照先。", "element": "h2", "roles": "id=\"modal-title\"", "tailwind": "text-2xl font-bold text-slate-900" },
    "body":        { "description": "本文。", "element": "div", "tailwind": "text-body mt-2" },
    "footer":      { "description": "アクション群(任意)。", "element": "div", "tailwind": "flex justify-end gap-3 mt-6" },
    "closeButton": { "description": "閉じるボタン。MODAL_CLOSE_REQUIRED。アイコンのみなら aria-label 必須。", "element": "button", "roles": "aria-label=\"閉じる\"" }
  },
  "variants": {
    "confirmation": {
      "description": "確認ダイアログ",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "radius": "radius.lg",
        "elevation": "elevation.overlay"
      },
      "tailwind": "fixed inset-0 flex items-center justify-center z-50"
    },
    "form": {
      "description": "フォーム入力ダイアログ",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "radius": "radius.lg",
        "elevation": "elevation.overlay"
      },
      "tailwind": "fixed inset-0 flex items-center justify-center z-50"
    },
    "alert": {
      "description": "警告ダイアログ",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "radius": "radius.lg",
        "elevation": "elevation.overlay"
      },
      "tailwind": "fixed inset-0 flex items-center justify-center z-50"
    }
  },
  "sizes": {
    "small":  { "height": 0, "tailwind": "w-96" },
    "medium": { "height": 0, "tailwind": "w-[32rem]" },
    "large":  { "height": 0, "tailwind": "w-[48rem]" }
  },
  "states": ["default", "open", "closing"],
  "stateSpecs": {
    "default": { "description": "閉。DOM 上 hidden。", "tailwind": "hidden", "ariaChanges": "aria-hidden=\"true\"。" },
    "open":    { "description": "表示。フォーカストラップ作動。", "tailwind": "", "ariaChanges": "aria-modal=\"true\"。Escape で閉じる(MODAL_ESC_CLOSE_REQUIRED)。", "htmlNote": "variant tailwind（fixed inset-0 flex items-center justify-center z-50）がそのまま open の表示。open は variant 基底＝差分なし。" },
    "closing": { "description": "閉アニメ中。完了後 hidden に戻し focus 復帰。", "tailwind": "opacity-0 transition-opacity duration-150", "htmlNote": "トランジション終了で default(hidden) へ。" }
  },
  "a11y": {
    "role": "dialog",
    "required": ["aria-labelledby", "aria-modal=\"true\"", "focus trap"],
    "keyboard": ["Escape", "Tab", "Shift+Tab"],
    "focusRing": "focus trap required"
  },
  "rules": [
    { "id": "MODAL_FOCUS_TRAP_REQUIRED", "severity": "error" },
    { "id": "MODAL_ESC_CLOSE_REQUIRED", "severity": "error" },
    { "id": "MODAL_CLOSE_REQUIRED", "severity": "error" },
    { "id": "MODAL_ROLE_DIALOG_REQUIRED", "severity": "error" },
    { "id": "MODAL_OVERLAY_REQUIRED", "severity": "error" },
    { "id": "MODAL_NO_NESTED", "severity": "error" }
  ],
  "htmlSample": {
    "confirmation": "<div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\" class=\"fixed inset-0 flex items-center justify-center z-50\"><div class=\"bg-black/50 absolute inset-0\"></div><div class=\"bg-white rounded-xl p-6 w-96 shadow-xl relative z-10\"><h2 id=\"modal-title\" class=\"text-2xl font-bold text-slate-900\">確認</h2><p class=\"text-body mt-2\">この操作を実行しますか？</p><div class=\"flex justify-end gap-3 mt-6\"><button class=\"inline-flex items-center justify-center h-10 px-4 text-[1rem] font-medium bg-white text-slate-700 border border-slate-200 rounded-lg hover:bg-gray-50 cursor-pointer relative after:absolute after:inset-x-0 after:top-1/2 after:h-11 after:-translate-y-1/2\">キャンセル</button><button class=\"inline-flex items-center justify-center h-10 px-4 text-[1rem] font-medium bg-primary-500 text-white rounded-lg hover:bg-primary-700 cursor-pointer relative after:absolute after:inset-x-0 after:top-1/2 after:h-11 after:-translate-y-1/2\">実行</button></div></div></div>"
  }
}