{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "pagination",
  "version": "2.0.0",
  "name": "Pagination",
  "category": "navigation",
  "appStatus": "not-planned",
  "appNote": "モバイルは無限スクロール（FlatList onEndReached）で代替。カルーセル文脈は PageControl の領分",
  "intent": "ページ送りナビゲーション。w-10 h-10タップターゲット。",
  "docPath": "components/pagination.md",
  "anatomy": ["navContainer", "pageButton", "prevButton", "nextButton", "ellipsis?"],
  "variants": {
    "active": {
      "description": "現在表示中のアクティブページ",
      "tokenRefs": {
        "bg": "color.primary.500",
        "text": "color.semantic.light.text-on-accent",
        "radius": "radius.md"
      },
      "tailwind": "w-10 h-10 inline-flex items-center justify-center text-base font-medium text-white bg-primary-500 rounded-lg"
    },
    "inactive": {
      "description": "未選択の非アクティブページ",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "text": "color.semantic.light.text-default",
        "radius": "radius.md"
      },
      "tailwind": "w-10 h-10 inline-flex items-center justify-center text-base font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors"
    },
    "disabled": {
      "description": "操作不可状態（先頭/末尾ページ時のprev/next）",
      "tokenRefs": {},
      "tailwind": "w-10 h-10 inline-flex items-center justify-center text-slate-300 cursor-not-allowed"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "active",
    "disabled",
    "hover",
    "focus"
  ],
  "a11y": {
    "role": "navigation",
    "required": [
      "aria-label=\"ページネーション\"",
      "aria-current=\"page\"",
      "aria-label per button"
    ],
    "keyboard": [],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "BTN_MIN_TAP_TARGET",
      "severity": "error"
    },
    {
      "id": "A11Y_NAV_ARIA_LABEL_REQUIRED",
      "severity": "error"
    }
  ],
  "htmlSample": "<nav aria-label=\"ページネーション\"><ul class=\"flex items-center gap-1\"><li><button class=\"w-10 h-10 inline-flex items-center justify-center text-base font-medium text-white bg-primary-500 rounded-lg\" aria-current=\"page\" aria-label=\"ページ 1\">1</button></li></ul></nav>"
}