{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "pagination",
  "name": "Pagination",
  "category": "Navigation",
  "description": "Move between pages of results.",
  "tags": [
    "pagination",
    "pager",
    "pages",
    "next",
    "previous"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "pagination",
      "next previous",
      "page numbers",
      "results pages"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/pagination",
  "markdownUrl": "https://mian.ro/ai/components/pagination.md",
  "classes": [
    {
      "name": "mn-pagination",
      "description": "On a <nav>."
    },
    {
      "name": "mn-page",
      "description": "A page link or button. aria-current=\"page\" marks the current one."
    },
    {
      "name": "mn-page-ellipsis",
      "description": "Gap."
    }
  ],
  "accessibility": [
    "<nav aria-label=\"Pagination\">. Give arrows text labels. Disabled links use aria-disabled=\"true\"."
  ],
  "examples": [
    {
      "title": "Basic",
      "description": null,
      "html": "<nav class=\"mn-pagination\" aria-label=\"Pagination\"><ul>\n  <li><a class=\"mn-page\" href=\"#pagination\" aria-disabled=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 6-6 6 6 6\"/></svg><span>Previous</span></a></li>\n  <li><a class=\"mn-page\" href=\"#pagination\" aria-current=\"page\">1</a></li>\n  <li><a class=\"mn-page\" href=\"#pagination\">2</a></li>\n  <li><a class=\"mn-page\" href=\"#pagination\">3</a></li>\n  <li><span class=\"mn-page-ellipsis\" aria-hidden=\"true\">…</span></li>\n  <li><a class=\"mn-page\" href=\"#pagination\">12</a></li>\n  <li><a class=\"mn-page\" href=\"#pagination\"><span>Next</span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 6 6 6-6 6\"/></svg></a></li>\n</ul></nav>"
    }
  ],
  "css": ".mn-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }\n.mn-page {\n  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;\n  min-width: var(--mn-size-md); height: var(--mn-size-md); padding: 0 .6rem;\n  border: var(--mn-border-w) solid transparent; border-radius: var(--mn-radius-field);\n  background: none; color: var(--mn-fg); font: 500 var(--mn-text-sm)/1 var(--mn-font);\n  text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;\n}\n.mn-page:hover { background: var(--mn-hover); }\n.mn-page[aria-current=\"page\"] { border-color: var(--mn-input); background: var(--mn-surface); box-shadow: var(--mn-shadow-sm); }\n.mn-page:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-page[aria-disabled=\"true\"] { opacity: .45; pointer-events: none; }\n.mn-page svg { width: 1rem; height: 1rem; }\n.mn-page-ellipsis { display: inline-grid; place-items: center; min-width: var(--mn-size-md); color: var(--mn-muted); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/pagination.json"
  }
}