fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 2 (#2624)

* fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 1

Fixes #2589

- Changed condition from  to
- This allows one extra page to be displayed without ellipsis (e.g., [1,2,3,4,5,6] instead of [1,2,3,4,5,'...',6])
- Added test case to verify ellipsis is not shown when count=6 and visiblePages=5

* Update packages/ui/components/pagination/src/LionPagination.js

Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>

* test: add additional ellipsis display tests

- Add test for count=7 (visiblePages + 2) without ellipsis
- Add test for count=8 (visiblePages + 3) with ellipsis
- Update condition to visiblePages + 2 to allow both count=6 and count=7 without ellipsis

---------

Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>

.changeset/wise-zebras-allow.md

@@ -0,0 +1,7 @@
+---
+'@lion/ui': patch
+---
+
+fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 1
+
+Fixed issue where LionPagination component incorrectly displayed ellipsis when the total page count was exactly one more than the visible pages setting (e.g., showing [1, 2, 3, 4, 5, '...', 6] instead of [1, 2, 3, 4, 5, 6] when visiblePages=5 and count=6).

packages/ui/components/pagination/src/LionPagination.js

@@ -196,7 +196,8 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     const finish = this.count;
     // If there are more pages then we want to display we have to redo the list each time
     // Else we can just return the same list every time.
-    if (this.count > this.__visiblePages) {
+    // Allow up to 2 extra pages without ellipsis (e.g., count=6 or count=7 when visiblePages=5)
+    if (this.count > this.__visiblePages + 2) {
       // Calculate left side of current page and right side
       const pos3 = this.current - 1;
       const pos4 = this.current;

packages/ui/components/pagination/test/lion-pagination.test.js

@@ -164,4 +164,45 @@ describe('Pagination', () => {
       expect(buttons[3].getAttribute('aria-current')).to.equal('false');
     });
   });
+
+  describe('Ellipsis display', () => {
+    it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="6" current="1"></lion-pagination> `);
+      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      // Check that no ellipsis is rendered (no <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.equal(0);
+
+      // There should be 8 nav items: previous button + 6 page buttons + next button
+      expect(navItems.length).to.equal(8);
+    });
+
+    it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="7" current="1"></lion-pagination> `);
+      // Check that no ellipsis is rendered (no <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.equal(0);
+
+      // There should be 9 nav items: previous button + 7 page buttons + next button
+      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      expect(navItems.length).to.equal(9);
+    });
+
+    it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="8" current="1"></lion-pagination> `);
+      // Check that ellipsis is rendered (should have <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.be.greaterThan(0);
+
+      // Verify the ellipsis contains '...'
+      const ellipsisText = Array.from(spans).map(span => span.textContent);
+      expect(ellipsisText).to.include('...');
+    });
+  });
 });