fix(pagination): use toLocaleString for default text formatting (#2161)

tests/Pagination/Pagination.test.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Pagination } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
 
   export let page = 1;
   export let totalItems = 0;
@@ -10,9 +11,14 @@
   export let pageInputDisabled = false;
   export let pageSizeInputDisabled = false;
   export let pageSize = 10;
-  export let pageSizes: ReadonlyArray<number> = [10];
-  export let pageWindow: undefined | number = undefined;
+  export let pageSizes: ComponentProps<Pagination>["pageSizes"] = [10];
+  export let pageWindow: ComponentProps<Pagination>["pageWindow"] = undefined;
   export let pagesUnknown = false;
+  export let pageText: ComponentProps<Pagination>["pageText"] = undefined;
+  export let pageRangeText: ComponentProps<Pagination>["pageRangeText"] =
+    undefined;
+  export let itemRangeText: ComponentProps<Pagination>["itemRangeText"] =
+    undefined;
 </script>
 
 <Pagination
@@ -28,6 +34,9 @@
   bind:pageSize
   {pageSizes}
   {pagesUnknown}
+  {pageText}
+  {pageRangeText}
+  {itemRangeText}
   on:change={(e) => {
     console.log("change", e.detail);
   }}

tests/Pagination/Pagination.test.ts

@@ -214,4 +214,47 @@ describe("Pagination", () => {
     const pageNumbers = screen.getByLabelText(/Page number, of 10000 pages/);
     expect(pageNumbers).toHaveLength(100 + 1);
   });
+
+  it("formats larger numbers using `toLocaleString`", () => {
+    render(Pagination, {
+      props: { totalItems: 100_000 },
+    });
+
+    expect(screen.getByText(/1–10 of 100,000 items/)).toBeInTheDocument();
+    expect(screen.getByText(/of 10,000 pages/)).toBeInTheDocument();
+  });
+
+  it("handles custom page text", () => {
+    render(Pagination, {
+      props: {
+        pagesUnknown: true,
+        totalItems: 100_000,
+        pageText: (page) => `Current page ${page}`,
+      },
+    });
+
+    expect(screen.getByText(/Current page 1/)).toBeInTheDocument();
+  });
+
+  it("handles custom page range text", () => {
+    render(Pagination, {
+      props: {
+        totalItems: 100_000,
+        pageRangeText: (current, total) => `${current} of ${total}`,
+      },
+    });
+
+    expect(screen.getByText(/1 of 10000/)).toBeInTheDocument();
+  });
+
+  it("handles custom item range text", () => {
+    render(Pagination, {
+      props: {
+        totalItems: 100_000,
+        itemRangeText: (min, max, total) => `${min}–${max} of ${total}`,
+      },
+    });
+
+    expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument();
+  });
 });