{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "table",
  "version": "2.0.0",
  "name": "Table",
  "category": "data-display",
  "appStatus": "not-planned",
  "appNote": "モバイルは単列リスト / Card への再構成が定石（M3 に data table なし）。list + metric で分解表現する",
  "intent": "データテーブル。th scope=\"col\"必須。",
  "docPath": "components/table.md",
  "anatomy": {
    "wrapper": { "description": "角丸ボーダーのコンテナ。", "element": "div", "tailwind": "bg-white rounded-xl border border-slate-200 overflow-hidden" },
    "caption": { "description": "テーブル説明(推奨)。SR 向け。", "element": "caption" },
    "th":      { "description": "列見出し。scope=\"col\" 必須(TABLE_TH_SCOPE_REQUIRED)。sortable variant では aria-sort=\"none|ascending|descending\" を付与しクリック/Enter でトグル、ラベル+方向アイコンを inline-flex。", "element": "th", "roles": "scope=\"col\"", "tailwind": "text-left py-3 px-4 text-xs font-medium text-slate-500 uppercase tracking-wider" },
    "row":     { "description": "tbody 行。hover ハイライト。", "element": "tr", "tailwind": "hover:bg-gray-50 transition-colors" },
    "td":      { "description": "データセル。", "element": "td", "tailwind": "py-3 px-4 text-sm text-slate-900" }
  },
  "variants": {
    "basic": {
      "description": "標準テーブル",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg"
      },
      "tailwind": "w-full"
    },
    "sortable": {
      "description": "ソート可能テーブル",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg"
      },
      "tailwind": "w-full"
    }
  },
  "sizes": {},
  "states": ["default", "hover", "empty"],
  "stateSpecs": {
    "empty": { "description": "0件。空状態行を表示。全 variant 共通。", "tailwind": "", "htmlNote": "<tbody> 内に colspan 全列結合の1行で中央寄せ「データがありません」。" }
  },
  "a11y": {
    "role": "table",
    "required": ["<th scope=\"col\">", "caption (recommended)"],
    "keyboard": [],
    "focusRing": "focus-visible:ring-2 focus-visible:ring-primary-500/50"
  },
  "rules": [
    { "id": "TABLE_TH_SCOPE_REQUIRED", "severity": "error" },
    { "id": "TABLE_NO_LAYOUT_TABLE", "severity": "error" }
  ],
  "htmlSample": {
    "basic": "<div class=\"bg-white rounded-xl border border-slate-200 overflow-hidden\"><table class=\"w-full\"><thead class=\"border-b border-slate-200 bg-gray-50\"><tr><th scope=\"col\" class=\"text-left py-3 px-4 text-xs font-medium text-slate-500 uppercase tracking-wider\">名前</th></tr></thead><tbody><tr class=\"hover:bg-gray-50 transition-colors\"><td class=\"py-3 px-4 text-sm text-slate-900\">値</td></tr></tbody></table></div>"
  }
}