Fix duplicate page tokens when navigating jelly-pagination window

src/components/pagination/index.ts

@@ -115,13 +115,23 @@ export class JellyPagination extends HTMLElement {
     const cur   = this.page;
     const out: (number | '…')[] = [];
     const win   = 1;
+    const pages = new Set<number>([1, total]);
 
-    for (let p = 1; p <= total; p++) {
-      if (p === 1 || p === total || (p >= cur - win && p <= cur + win)) {
-        out.push(p);
-      } else if (out[out.length - 1] !== '…') {
+    for (let p = cur - win; p <= cur + win; p++) {
+      if (p >= 1 && p <= total) {
+        pages.add(p);
+      }
+    }
+
+    let previous: number | null = null;
+
+    for (const p of [...pages].sort((a, b) => a - b)) {
+      if (previous !== null && p - previous > 1) {
         out.push('…');
       }
+
+      out.push(p);
+      previous = p;
     }
 
     return out;

src/components/pagination/pagination.test.ts

@@ -34,3 +34,26 @@ test('clicking a page button navigates and fires change', async () => {
 
   host.remove();
 });
+
+test('moving from page 1 to 6 does not duplicate page numbers', async () => {
+  const host = mount('<jelly-pagination total="12" page="1"></jelly-pagination>');
+  const el = host.querySelector('jelly-pagination') as JellyPagination;
+  await raf();
+
+  for (let i = 0; i < 5; i++) {
+    const next = [...el.shadowRoot!.querySelectorAll('jelly-button')].find((button) => button.getAttribute('label') === 'Next page');
+
+    next?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await raf();
+  }
+
+  expect(el.page).toBe(6);
+
+  const labels = [...el.shadowRoot!.querySelectorAll('jelly-button')].map((button) => button.textContent?.trim() ?? '');
+  const pages  = labels.filter((label) => /^\d+$/.test(label));
+
+  expect(pages.filter((label) => label === '5')).toHaveLength(1);
+  expect(new Set(pages).size).toBe(pages.length);
+
+  host.remove();
+});