fix(pagination): window totalItems for performance (#2160)

Fixes #2156

docs/src/COMPONENT_API.json

@@ -10048,6 +10048,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "pageWindow",
+          "kind": "let",
+          "description": "If `totalItems` is a large number, it can affect the\nrendering performance of this component since its value\nis used to calculate the number of pages in the native\nselect dropdown. This value creates a small window of\npages rendered around the current page. By default,\na maximum of 1000 select items are rendered.",
+          "type": "number",
+          "value": "1000",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "disabled",
           "kind": "let",

docs/src/pages/components/Pagination.svx

@@ -19,6 +19,19 @@ components: ["Pagination", "PaginationSkeleton"]
 
 <Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
 
+## Page window
+
+The number of native select items rendered is derived from the value of `totalItems`.
+
+If `totalItems` is a very large number, this can impact rendering performance since
+thousands of elements may be rendered. By default, the window of rendered items is
+capped at 1,000. For example, if `totalItems=100_000` and the `pageSize=10`,
+1,000 select options are rendered.
+
+Use the `pageWindow` prop to increase this value.
+
+<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />
+
 ## Hidden page input
 
 <Pagination totalItems={102} pageInputDisabled />