{
  "element": "nve-pagination",
  "entrypoint": "@nvidia-elements/core/pagination/pagination.examples.json",
  "items": [
    {
      "id": "pagination",
      "name": "Default",
      "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  pagination.addEventListener(\"change\", (e) => console.log(e.target.value));\n</script>\n",
      "summary": "Basic pagination component with default styling and behavior.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-skippable",
      "name": "Skippable",
      "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
      "summary": "Pagination with skip buttons to navigate to first and last pages quickly.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-disabled",
      "name": "Disabled",
      "template": "<nve-pagination disabled value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
      "summary": "Disabled pagination component that prevents user interaction.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-flat",
      "name": "Flat",
      "template": "<nve-pagination container=\"flat\" value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
      "summary": "Pagination with flat container styling for a more minimal appearance.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-inline",
      "name": "Inline",
      "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
      "summary": "Inline pagination layout that fits inline with content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-disable-step",
      "name": "DisableStep",
      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
      "summary": "Inline pagination with disabled step selector to prevent page size changes.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-forms",
      "name": "Forms",
      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
      "summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-no-items-count",
      "name": "NoItemsCount",
      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
      "summary": "Pagination without items count display, useful when total count is unknown.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-large-values",
      "name": "LargeValues",
      "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"10000\" step=\"100\"></nve-pagination>\n",
      "summary": "Pagination handling large datasets with higher step values for efficient navigation.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-dynamic-items",
      "name": "DynamicItems",
      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"20\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  let items = loadItems();\n  pagination.addEventListener(\"last-page\", async () => {\n    items = [...items, ...loadItems()];\n    pagination.items = items.length;\n  });\n  function loadItems() {\n    return new Array(100).fill(\"\");\n  }\n</script>\n",
      "summary": "If the upper bound of items is unknown, use the `last-page` event to determine when to load more data and update the pagination with the latest total of items.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "pagination-dynamic-step-size",
      "name": "DynamicStepSize",
      "template": "<!-- javascript property binding -->\n<nve-pagination value=\"1\" items=\"10000\" step=\"100\" step-sizes=\"[100, 500, 1000]\"></nve-pagination>\n",
      "summary": "When a custom step exists, the select options dynamically adapt to the step and append to the default option list.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-suffix-label",
      "name": "SuffixLabel",
      "template": "<nve-pagination value=\"1\" items=\"50000\" step=\"100\">\n  <span slot=\"suffix-label\">of 50,000+</span>\n</nve-pagination>\n",
      "summary": "Use the `suffix-label` slot to customize the \"of total\" label when dealing with approximated totals from API responses. This is useful when the API returns a limited count but indicates there are more items available.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "pagination-page-list-pattern",
      "name": "PageListPattern",
      "template": "<nve-toolbar container=\"inset\">\n  <nve-button disabled container=\"flat\"\n    ><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button\n  >\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
      "summary": "Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "pagination-skip-pattern",
      "name": "SkipPattern",
      "template": "<nve-toolbar container=\"inset\">\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"arrow-stop\"\n    direction=\"left\"\n    aria-label=\"first\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n  <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Enhanced pagination pattern with first/last page buttons and numbered page navigation.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "pagination-vertical-pattern",
      "name": "VerticalPattern",
      "template": "<nve-toolbar container=\"inset\">\n  <label nve-text=\"body muted sm\">1 of 13</label>\n  <nve-icon-button\n    container=\"flat\"\n    size=\"sm\"\n    icon-name=\"chevron\"\n    direction=\"up\"\n    aria-label=\"previous\"\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Vertical pagination pattern with up/down navigation arrows for compact layouts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "pagination-custom-select-pattern",
      "name": "CustomSelectPattern",
      "template": "<nve-toolbar container=\"inset\">\n  <nve-select style=\"--width: 80px\">\n    <select aria-label=\"page size\">\n      <option value=\"10\">1-10</option>\n    </select>\n  </nve-select>\n  <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"chevron\"\n    direction=\"left\"\n    aria-label=\"previous\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Custom pagination with select dropdown for page size and navigation arrows.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}