@aquera/nile-elements 1.5.4 → 1.5.6

package/src/nile-pagination/nile-pagination.test.ts

@@ -1,106 +1,1393 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
 import './nile-pagination';
 import type { NilePagination } from './nile-pagination';
 
 describe('NilePagination', () => {
-  it('1. renders', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el).to.exist; });
-  it('2. shadow root', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot).to.not.be.null; });
-  it('3. tag name', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.tagName.toLowerCase()).to.equal('nile-pagination'); });
-  it('4. is defined', async () => { expect(customElements.get('nile-pagination')).to.exist; });
-  it('5. has styles', async () => { expect((await import('./nile-pagination')).NilePagination.styles).to.exist; });
-  it('6. shadow mode', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.mode).to.equal('open'); });
-  it('7. isConnected', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.isConnected).to.be.true; });
-  it('8. removal', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.remove(); expect(el.isConnected).to.be.false; });
-  it('9. outerHTML', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.outerHTML).to.contain('nile-pagination'); });
-  it('10. matches', async () => { const el = await fixture<NilePagination>(html`<nile-pagination class="x"></nile-pagination>`); expect(el.matches('.x')).to.be.true; });
-  it('11. closest', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.closest('nile-pagination')).to.equal(el); });
-  it('12. cloneNode', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-pagination'); });
-  it('13. dispatchEvent', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
-  it('14. updateComplete', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
-  it('15. render method', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.render).to.be.a('function'); });
-  it('16. shadowRoot host', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.host).to.equal(el); });
-  it('17. class attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination class="pg"></nile-pagination>`); expect(el.classList.contains('pg')).to.be.true; });
-  it('18. id attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination id="pg1"></nile-pagination>`); expect(el.id).to.equal('pg1'); });
-  it('19. hidden', async () => { const el = await fixture<NilePagination>(html`<nile-pagination hidden></nile-pagination>`); expect(el.hidden).to.be.true; });
-  it('20. nodeType', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.nodeType).to.equal(1); });
-  it('21. localName', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.localName).to.equal('nile-pagination'); });
-  it('22. namespaceURI', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
-  it('23. ownerDocument', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.ownerDocument).to.equal(document); });
-  it('24. multiple instances', async () => { const c = await fixture(html`<div><nile-pagination></nile-pagination><nile-pagination></nile-pagination></div>`); expect(c.querySelectorAll('nile-pagination').length).to.equal(2); });
-  it('25. parent-child', async () => { const c = await fixture(html`<div><nile-pagination></nile-pagination></div>`); expect(c.querySelector('nile-pagination')!.parentElement).to.equal(c); });
-  it('26. createElement', async () => { const el = document.createElement('nile-pagination') as NilePagination; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
-  it('27. dataset', async () => { const el = await fixture<NilePagination>(html`<nile-pagination data-idx="0"></nile-pagination>`); expect(el.dataset.idx).to.equal('0'); });
-  it('28. classList add', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
-  it('29. getBoundingClientRect', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.getBoundingClientRect()).to.exist; });
-  it('30. style attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination style="color:red"></nile-pagination>`); expect(el.style.color).to.equal('red'); });
-  it('31. aria-label', async () => { const el = await fixture<NilePagination>(html`<nile-pagination aria-label="P"></nile-pagination>`); expect(el.getAttribute('aria-label')).to.equal('P'); });
-  it('32. dir', async () => { const el = await fixture<NilePagination>(html`<nile-pagination dir="rtl"></nile-pagination>`); expect(el.dir).to.equal('rtl'); });
-  it('33. lang attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination lang="en"></nile-pagination>`); expect(el.lang).to.equal('en'); });
-  it('34. tabindex', async () => { const el = await fixture<NilePagination>(html`<nile-pagination tabindex="0"></nile-pagination>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
-  it('35. requestUpdate', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
-  it('36. shadow childNodes', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
-  it('37. scrollIntoView', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.scrollIntoView).to.be.a('function'); });
-  it('38. focus method', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.focus).to.be.a('function'); });
-  it('39. blur method', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.blur).to.be.a('function'); });
-  it('40. class toggle', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
-  it('41. toggle hidden', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.hidden = true; expect(el.hidden).to.be.true; });
-  it('42. dispatchCustomEvent', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
-  it('43. nested in div', async () => { const c = await fixture(html`<div><nile-pagination></nile-pagination></div>`); expect(c.querySelector('nile-pagination')).to.exist; });
-  it('44. default totalItems', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.totalItems).to.exist; });
-  // it('45. default page', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.page).to.exist; });
-  it('46. default pageSize', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.pageSize).to.exist; });
-  it('47. set totalItems', async () => { const el = await fixture<NilePagination>(html`<nile-pagination total-items="100"></nile-pagination>`); expect(el.getAttribute('total-items')).to.equal('100'); });
-  // it('48. set page', async () => { const el = await fixture<NilePagination>(html`<nile-pagination page="2"></nile-pagination>`); expect(el.page).to.equal(2); });
-  it('49. set pageSize', async () => { const el = await fixture<NilePagination>(html`<nile-pagination page-size="25"></nile-pagination>`); expect(el.getAttribute('page-size')).to.equal('25'); });
-  it('50. no canvas', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
-  it('51. no video', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
-  it('52. no audio', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
-  it('53. has nav', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nav')).to.exist; });
-  it('54. no aside', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('aside')).to.be.null; });
-  it('55. no table', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
-  it('56. no img', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
-  it('57. no anchor', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
-  it('58. no svg', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('svg')).to.be.null; });
-  it('59. no form', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
-  it('60. title attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination title="PG"></nile-pagination>`); expect(el.title).to.equal('PG'); });
-  it('61. no h1', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
-  it('62. no pre', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
-  it('63. no code', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('code')).to.be.null; });
-  it('64. no hr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('hr')).to.be.null; });
-  it('65. no nile-badge', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null; });
-  it('66. no nile-input', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-input')).to.be.null; });
-  it('67. no nile-checkbox', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-checkbox')).to.be.null; });
-  it('68. no nile-radio', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-radio')).to.be.null; });
-  it('69. no nile-dialog', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-dialog')).to.be.null; });
-  it('70. no nile-drawer', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-drawer')).to.be.null; });
-  it('71. no nile-slider', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-slider')).to.be.null; });
-  it('72. no nile-accordion', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-accordion')).to.be.null; });
-  it('73. setAttribute data', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
-  it('74. removeAttribute hidden', async () => { const el = await fixture<NilePagination>(html`<nile-pagination hidden></nile-pagination>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
-  it('75. setAttribute class', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
-  it('76. aria-describedby', async () => { const el = await fixture<NilePagination>(html`<nile-pagination aria-describedby="d"></nile-pagination>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
-  it('77. multiple re-renders', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
-  it('78. contains', async () => { const el = await fixture<NilePagination>(html`<nile-pagination><span id="s1">C</span></nile-pagination>`); expect(el.contains(el.querySelector('#s1'))).to.be.true; });
-  it('79. no textarea', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
-  it('80. no select', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('select')).to.be.null; });
-  it('81. has ul', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('ul')).to.exist; });
-  it('82. no p', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('p')).to.be.null; });
-  it('83. no nile-card', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-card')).to.be.null; });
-  it('84. no nile-tab', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-tab')).to.be.null; });
-  it('85. no nile-stepper', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-stepper')).to.be.null; });
-  it('86. has nile-button', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-button')).to.exist; });
-  it('87. data attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination data-x="1"></nile-pagination>`); expect(el.getAttribute('data-x')).to.equal('1'); });
-  it('88. role attr', async () => { const el = await fixture<NilePagination>(html`<nile-pagination role="navigation"></nile-pagination>`); expect(el.getAttribute('role')).to.equal('navigation'); });
-  it('89. no section', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('section')).to.be.null; });
-  it('90. no header', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('header')).to.be.null; });
-  it('91. no footer', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('footer')).to.be.null; });
-  it('92. no main', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('main')).to.be.null; });
-  it('93. no article', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('article')).to.be.null; });
-  it('94. no nile-toolbar', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-toolbar')).to.be.null; });
-  it('95. no nile-link', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-link')).to.be.null; });
-  it('96. has nile-menu', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-menu')).to.exist; });
-  it('97. no nile-select', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-select')).to.be.null; });
-  it('98. no nile-textarea', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-textarea')).to.be.null; });
-  it('99. nile-icon in shadow', async () => { const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.exist; });
-  // it('100. full integration', async () => { const el = await fixture<NilePagination>(html`<nile-pagination total-items="100" page="1" page-size="10" class="pg" id="pg1" role="navigation"></nile-pagination>`); expect(el.totalItems).to.equal(100); expect(el.page).to.equal(1); expect(el.pageSize).to.equal(10); expect(el.id).to.equal('pg1'); expect(el.shadowRoot).to.not.be.null; });
+  // ═══════════════════════════════════════════════════
+  // RENDERING & REGISTRATION
+  // ═══════════════════════════════════════════════════
+
+  it('1. should render without errors', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el).to.exist;
+  });
+
+  it('2. should have a shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('3. should be registered as a custom element', async () => {
+    expect(customElements.get('nile-pagination')).to.exist;
+  });
+
+  it('4. should have correct tag name', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.tagName.toLowerCase()).to.equal('nile-pagination');
+  });
+
+  it('5. should have styles defined', async () => {
+    const { NilePagination } = await import('./nile-pagination');
+    expect(NilePagination.styles).to.exist;
+  });
+
+  it('6. should have open shadow root mode', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.mode).to.equal('open');
+  });
+
+  it('7. should be connected when in DOM', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.isConnected).to.be.true;
+  });
+
+  it('8. should disconnect when removed', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    el.remove();
+    expect(el.isConnected).to.be.false;
+  });
+
+  it('9. should render multiple instances', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <nile-pagination></nile-pagination>
+        <nile-pagination></nile-pagination>
+      </div>
+    `);
+    expect(wrapper.querySelectorAll('nile-pagination').length).to.equal(2);
+  });
+
+  it('10. should be creatable via document.createElement', async () => {
+    const el = document.createElement('nile-pagination') as NilePagination;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    document.body.removeChild(el);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // DEFAULT PROPERTY VALUES
+  // ═══════════════════════════════════════════════════
+
+  it('11. should default totalItems to 0', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.totalItems).to.equal(0);
+  });
+
+  it('12. should default currentPage to 1', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.currentPage).to.equal(1);
+  });
+
+  it('13. should default pageSize to 50', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.pageSize).to.equal(50);
+  });
+
+  it('14. should default variant to fluid', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.variant).to.equal('fluid');
+  });
+
+  it('15. should default disabled to false', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.disabled).to.be.false;
+  });
+
+  it('16. should default showTitle to true', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.showTitle).to.be.true;
+  });
+
+  it('17. should default pageSizeOptions to [10, 25, 50, 100]', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.pageSizeOptions).to.deep.equal([10, 25, 50, 100]);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // ATTRIBUTE → PROPERTY CONVERTERS (totalItems)
+  // ═══════════════════════════════════════════════════
+
+  it('18. should parse totalitems attribute as number', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200"></nile-pagination>`);
+    expect(el.totalItems).to.equal(200);
+  });
+
+  it('19. should floor non-integer totalitems', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="99.7"></nile-pagination>`);
+    expect(el.totalItems).to.equal(99);
+  });
+
+  it('20. should default totalitems to 0 for negative values', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="-5"></nile-pagination>`);
+    expect(el.totalItems).to.equal(0);
+  });
+
+  it('21. should default totalitems to 0 for non-numeric strings', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="abc"></nile-pagination>`);
+    expect(el.totalItems).to.equal(0);
+  });
+
+  it('22. should default totalitems to 0 for Infinity', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="Infinity"></nile-pagination>`);
+    expect(el.totalItems).to.equal(0);
+  });
+
+  it('23. should reflect totalitems attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="150"></nile-pagination>`);
+    expect(el.getAttribute('totalitems')).to.equal('150');
+  });
+
+  // ═══════════════════════════════════════════════════
+  // ATTRIBUTE → PROPERTY CONVERTERS (currentPage)
+  // ═══════════════════════════════════════════════════
+
+  it('24. should parse currentpage attribute as number', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="3"></nile-pagination>`);
+    expect(el.currentPage).to.equal(3);
+  });
+
+  it('25. should floor non-integer currentpage', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="2.9"></nile-pagination>`);
+    expect(el.currentPage).to.equal(2);
+  });
+
+  it('26. should default currentpage to 1 for values < 1', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="0"></nile-pagination>`);
+    expect(el.currentPage).to.equal(1);
+  });
+
+  it('27. should default currentpage to 1 for negative values', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="-3"></nile-pagination>`);
+    expect(el.currentPage).to.equal(1);
+  });
+
+  it('28. should default currentpage to 1 for non-numeric strings', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="xyz"></nile-pagination>`);
+    expect(el.currentPage).to.equal(1);
+  });
+
+  it('29. should reflect currentpage attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination currentpage="5"></nile-pagination>`);
+    expect(el.getAttribute('currentpage')).to.equal('5');
+  });
+
+  // ═══════════════════════════════════════════════════
+  // ATTRIBUTE → PROPERTY CONVERTERS (pageSize)
+  // ═══════════════════════════════════════════════════
+
+  it('30. should parse pagesize attribute as number', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="25"></nile-pagination>`);
+    expect(el.pageSize).to.equal(25);
+  });
+
+  it('31. should floor non-integer pagesize', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="10.5"></nile-pagination>`);
+    expect(el.pageSize).to.equal(10);
+  });
+
+  it('32. should default pagesize to 50 for values < 1', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="0"></nile-pagination>`);
+    expect(el.pageSize).to.equal(50);
+  });
+
+  it('33. should default pagesize to 50 for negative values', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="-10"></nile-pagination>`);
+    expect(el.pageSize).to.equal(50);
+  });
+
+  it('34. should default pagesize to 50 for non-numeric strings', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="foo"></nile-pagination>`);
+    expect(el.pageSize).to.equal(50);
+  });
+
+  it('35. should reflect pagesize attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="10"></nile-pagination>`);
+    expect(el.getAttribute('pagesize')).to.equal('10');
+  });
+
+  // ═══════════════════════════════════════════════════
+  // ATTRIBUTE → PROPERTY CONVERTERS (pageSizeOptions)
+  // ═══════════════════════════════════════════════════
+
+  it('36. should parse pagesizeoptions from JSON array', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesizeoptions="[5,10,20]"></nile-pagination>`);
+    expect(el.pageSizeOptions).to.deep.equal([5, 10, 20]);
+  });
+
+  it('37. should fallback to defaults for invalid pagesizeoptions JSON', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesizeoptions="invalid"></nile-pagination>`);
+    expect(el.pageSizeOptions).to.deep.equal([10, 25, 50, 100]);
+  });
+
+  it('38. should fallback to defaults for non-number array pagesizeoptions', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesizeoptions='["a","b"]'></nile-pagination>`);
+    expect(el.pageSizeOptions).to.deep.equal([10, 25, 50, 100]);
+  });
+
+  it('39. should fallback to defaults for non-array pagesizeoptions', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesizeoptions='{"a":1}'></nile-pagination>`);
+    expect(el.pageSizeOptions).to.deep.equal([10, 25, 50, 100]);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // TOTAL PAGES CALCULATION
+  // ═══════════════════════════════════════════════════
+
+  it('40. should calculate totalPages as 1 when totalItems is 0', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="0" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    // With 0 items, totalPages should still be at least 1
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav).to.exist;
+  });
+
+  it('41. should calculate totalPages correctly (100 items, 10 per page = 10 pages)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    // Should render page buttons for 10 pages in fluid variant
+    const buttons = el.shadowRoot!.querySelectorAll('ul.pagination nile-button');
+    // 7 visible pages (1..7 since <=7) + prev + next = 9 when totalPages=10, with ellipsis
+    expect(buttons.length).to.be.greaterThan(2); // At least prev + next
+  });
+
+  it('42. should calculate totalPages correctly with remainder (105 items, 10 per page = 11 pages)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="105" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav).to.exist;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // FLUID VARIANT RENDERING
+  // ═══════════════════════════════════════════════════
+
+  it('43. should render wrapper with fluid class by default', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const wrapper = el.shadowRoot!.querySelector('.pagination-wrapper');
+    expect(wrapper).to.exist;
+    expect(wrapper!.classList.contains('fluid')).to.be.true;
+  });
+
+  it('44. should render nav element in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav).to.exist;
+    expect(nav!.getAttribute('aria-label')).to.equal('Pagination');
+  });
+
+  it('45. should render range text in fluid variant with showTitle', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText).to.exist;
+    expect(rangeText!.textContent).to.contain('Showing');
+  });
+
+  it('46. should show correct range text for first page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText!.textContent).to.contain('1');
+    expect(rangeText!.textContent).to.contain('10');
+    expect(rangeText!.textContent).to.contain('100');
+  });
+
+  it('47. should show correct range text for middle page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText!.textContent).to.contain('41');
+    expect(rangeText!.textContent).to.contain('50');
+    expect(rangeText!.textContent).to.contain('100');
+  });
+
+  it('48. should show correct range text for last page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="95" pagesize="10" currentpage="10"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText!.textContent).to.contain('91');
+    expect(rangeText!.textContent).to.contain('95');
+  });
+
+  it('49. should show "Showing 0 of 0" when totalItems is 0 in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="0"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText).to.exist;
+    expect(rangeText!.textContent).to.contain('0 of 0');
+  });
+
+  it('50. should not render range text in fluid variant when showTitle is false', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" .showTitle=${false}></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText).to.be.null;
+  });
+
+  it('51. should render page-size-select in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const pageSizeSelect = el.shadowRoot!.querySelector('.page-size-select');
+    expect(pageSizeSelect).to.exist;
+  });
+
+  it('52. should render "Items per page" label in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const label = el.shadowRoot!.querySelector('.page-size-label');
+    expect(label).to.exist;
+    expect(label!.textContent).to.contain('Items per page');
+  });
+
+  it('53. should render page size dropdown showing current pageSize in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesize="25"></nile-pagination>`);
+    await el.updateComplete;
+    const trigger = el.shadowRoot!.querySelector('.page-size-dropdown nile-button');
+    expect(trigger).to.exist;
+    expect(trigger!.textContent).to.contain('25');
+  });
+
+  it('54. should render page size options as menu items in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    expect(menuItems.length).to.equal(4); // [10, 25, 50, 100]
+  });
+
+  it('55. should render ul.pagination in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const ul = el.shadowRoot!.querySelector('ul.pagination');
+    expect(ul).to.exist;
+  });
+
+  it('56. should render prev button in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button');
+    expect(prevBtn).to.exist;
+  });
+
+  it('57. should render next button in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const nextBtn = el.shadowRoot!.querySelector('.next-button');
+    expect(nextBtn).to.exist;
+  });
+
+  it('58. should render page number buttons in fluid variant for <= 7 pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    // 5 pages, all visible + prev + next
+    const buttons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button');
+    expect(buttons.length).to.equal(7); // 5 pages + prev + next
+  });
+
+  it('59. should render ellipsis dropdown for > 7 pages in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsis = el.shadowRoot!.querySelector('.ellipsis-dropdown');
+    expect(ellipsis).to.exist;
+  });
+
+  it('60. should highlight current page with primary variant button', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    const currentBtn = Array.from(pageButtons).find(btn => btn.textContent!.trim() === '3');
+    expect(currentBtn).to.exist;
+    expect(currentBtn!.getAttribute('variant')).to.equal('primary');
+  });
+
+  it('61. should use ghost variant for non-current pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    const otherBtn = Array.from(pageButtons).find(btn => btn.textContent!.trim() === '1');
+    expect(otherBtn).to.exist;
+    expect(otherBtn!.getAttribute('variant')).to.equal('ghost');
+  });
+
+  // ═══════════════════════════════════════════════════
+  // COMPACT VARIANT RENDERING
+  // ═══════════════════════════════════════════════════
+
+  it('62. should render wrapper with compact class', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10"></nile-pagination>`);
+    const wrapper = el.shadowRoot!.querySelector('.pagination-wrapper.compact');
+    expect(wrapper).to.exist;
+  });
+
+  it('63. should render compact range text without "Showing" prefix', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('.range-text');
+    expect(rangeText).to.exist;
+    // compact trims "Showing " from the start
+    expect(rangeText!.textContent!.trim().startsWith('Showing')).to.be.false;
+  });
+
+  it('64. should render compact page size dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact"></nile-pagination>`);
+    await el.updateComplete;
+    const dropdown = el.shadowRoot!.querySelector('.compact-dropdown');
+    expect(dropdown).to.exist;
+  });
+
+  it('65. should render compact pagination with current page dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const compactPagination = el.shadowRoot!.querySelector('.compact-pagination');
+    expect(compactPagination).to.exist;
+  });
+
+  it('66. should show current page in compact page dropdown trigger', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const trigger = el.shadowRoot!.querySelector('.current-page-btn');
+    expect(trigger).to.exist;
+    expect(trigger!.textContent).to.contain('3');
+  });
+
+  it('67. should render all page numbers in compact page dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="50" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.compact-scroll-wrapper1 nile-menu-item');
+    expect(menuItems.length).to.equal(5); // 5 total pages
+  });
+
+  it('68. should render prev and next buttons in compact variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button');
+    const nextBtn = el.shadowRoot!.querySelector('.next-button');
+    expect(prevBtn).to.exist;
+    expect(nextBtn).to.exist;
+  });
+
+  it('69. should not render page-size-select in compact variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact"></nile-pagination>`);
+    await el.updateComplete;
+    const pageSizeSelect = el.shadowRoot!.querySelector('.page-size-select');
+    expect(pageSizeSelect).to.be.null;
+  });
+
+  it('70. should render compact page size options as menu items', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.compact-scroll-wrapper nile-menu-item');
+    expect(menuItems.length).to.equal(4); // default [10, 25, 50, 100]
+  });
+
+  // ═══════════════════════════════════════════════════
+  // MINI VARIANT RENDERING
+  // ═══════════════════════════════════════════════════
+
+  it('71. should render mini wrapper with mini class', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    const wrapper = el.shadowRoot!.querySelector('.pagination-wrapper.mini');
+    expect(wrapper).to.exist;
+  });
+
+  it('72. should render "Showing" label in mini variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const label = el.shadowRoot!.querySelector('.mini-showing-label');
+    expect(label).to.exist;
+    expect(label!.textContent).to.contain('Showing');
+  });
+
+  it('73. should render "of N" label in mini variant with correct total pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const ofLabel = el.shadowRoot!.querySelector('.mini-of-label');
+    expect(ofLabel).to.exist;
+    expect(ofLabel!.textContent).to.contain('of 10');
+  });
+
+  it('74. should render mini page dropdown with current page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const pageBtn = el.shadowRoot!.querySelector('.mini-page-btn');
+    expect(pageBtn).to.exist;
+    expect(pageBtn!.textContent).to.contain('3');
+  });
+
+  it('75. should render all page options in mini dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="50" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.mini-scroll-wrapper nile-menu-item');
+    expect(menuItems.length).to.equal(5); // 5 total pages
+  });
+
+  it('76. should render mini prev button', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button');
+    expect(prevBtn).to.exist;
+  });
+
+  it('77. should render mini next button', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button');
+    expect(nextBtn).to.exist;
+  });
+
+  it('78. should render mini-nav container', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const nav = el.shadowRoot!.querySelector('.mini-nav');
+    expect(nav).to.exist;
+  });
+
+  it('79. should render mini-pagination list', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const ul = el.shadowRoot!.querySelector('.mini-pagination');
+    expect(ul).to.exist;
+  });
+
+  it('80. should not render pager-container in mini variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const pagerContainer = el.shadowRoot!.querySelector('.pager-container');
+    expect(pagerContainer).to.be.null;
+  });
+
+  it('81. should not render page number buttons in mini variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    // mini only has prev/next, no numbered page buttons in the list
+    const ellipsis = el.shadowRoot!.querySelector('.ellipsis-dropdown');
+    expect(ellipsis).to.be.null;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // NAVIGATION — PREV / NEXT BUTTONS
+  // ═══════════════════════════════════════════════════
+
+  it('82. should disable prev button on first page (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('83. should enable prev button when not on first page (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.false;
+  });
+
+  it('84. should disable next button on last page (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="10"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('85. should enable next button when not on last page (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    expect(nextBtn.hasAttribute('disabled')).to.be.false;
+  });
+
+  it('86. should disable mini prev button on first page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('87. should enable mini prev button when not on first page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.false;
+  });
+
+  it('88. should disable mini next button on last page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="10"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('89. should enable mini next button when not on last page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    expect(nextBtn.hasAttribute('disabled')).to.be.false;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // NAVIGATION — goToPage + nile-change EVENT
+  // ═══════════════════════════════════════════════════
+
+  it('90. should navigate to next page on next button click (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(2);
+    expect(detail.previousPage).to.equal(1);
+    expect(detail.pageSize).to.equal(10);
+  });
+
+  it('91. should navigate to previous page on prev button click (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    prevBtn.click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(4);
+    expect(detail.previousPage).to.equal(5);
+  });
+
+  it('92. should navigate to clicked page number (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    // Find page 3 button
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    const page3Btn = Array.from(pageButtons).find(btn => btn.textContent!.trim() === '3') as HTMLElement;
+    expect(page3Btn).to.exist;
+    page3Btn!.click();
+    await el.updateComplete;
+    expect(detail.page).to.equal(3);
+    expect(detail.previousPage).to.equal(1);
+  });
+
+  it('93. should update currentPage property after navigation', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(el.currentPage).to.equal(2);
+  });
+
+  it('94. should navigate to next page on mini next button click', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(detail.page).to.equal(2);
+    expect(detail.previousPage).to.equal(1);
+  });
+
+  it('95. should navigate to prev page on mini prev button click', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button') as HTMLElement;
+    prevBtn.click();
+    await el.updateComplete;
+    expect(detail.page).to.equal(4);
+    expect(detail.previousPage).to.equal(5);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // DISABLED STATE
+  // ═══════════════════════════════════════════════════
+
+  it('96. should not navigate when disabled (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5" disabled></nile-pagination>`);
+    await el.updateComplete;
+    let eventFired = false;
+    el.addEventListener('nile-change', () => { eventFired = true; });
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(eventFired).to.be.false;
+    expect(el.currentPage).to.equal(5);
+  });
+
+  it('97. should disable all nav buttons when disabled is true (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5" disabled></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('98. should disable all page number buttons when disabled (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10" disabled></nile-pagination>`);
+    await el.updateComplete;
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button');
+    pageButtons.forEach(btn => {
+      expect((btn as HTMLElement).hasAttribute('disabled')).to.be.true;
+    });
+  });
+
+  it('99. should disable page-size dropdown trigger when disabled (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination disabled></nile-pagination>`);
+    await el.updateComplete;
+    const dropdown = el.shadowRoot!.querySelector('.page-size-dropdown') as HTMLElement;
+    expect(dropdown.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('100. should not navigate when disabled (mini)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="5" disabled></nile-pagination>`);
+    await el.updateComplete;
+    let eventFired = false;
+    el.addEventListener('nile-change', () => { eventFired = true; });
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(eventFired).to.be.false;
+    expect(el.currentPage).to.equal(5);
+  });
+
+  it('101. should disable mini nav buttons when disabled', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" currentpage="5" disabled></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button') as HTMLElement;
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('102. should disable compact dropdown when disabled', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" disabled></nile-pagination>`);
+    await el.updateComplete;
+    const dropdown = el.shadowRoot!.querySelector('.compact-dropdown') as HTMLElement;
+    expect(dropdown.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('103. should disable mini page dropdown when disabled', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10" disabled></nile-pagination>`);
+    await el.updateComplete;
+    const dropdown = el.shadowRoot!.querySelector('.mini-page-dropdown') as HTMLElement;
+    expect(dropdown.hasAttribute('disabled')).to.be.true;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // PAGE SIZE CHANGE
+  // ═══════════════════════════════════════════════════
+
+  it('104. should emit nile-change with page=1 on page size change (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="50" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    // Click the first option (10)
+    (menuItems[0] as HTMLElement).click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(1);
+    expect(detail.previousPage).to.equal(3);
+    expect(detail.pageSize).to.equal(10);
+  });
+
+  it('105. should reset to page 1 after page size change', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="50" currentpage="3"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    (menuItems[0] as HTMLElement).click();
+    await el.updateComplete;
+    expect(el.currentPage).to.equal(1);
+    expect(el.pageSize).to.equal(10);
+  });
+
+  it('106. should not emit event when selecting same page size', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="50"></nile-pagination>`);
+    await el.updateComplete;
+    let eventFired = false;
+    el.addEventListener('nile-change', () => { eventFired = true; });
+    // 50 is the 3rd option (index 2) in default [10,25,50,100]
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    (menuItems[2] as HTMLElement).click();
+    await el.updateComplete;
+    expect(eventFired).to.be.false;
+  });
+
+  it('107. should not change page size when disabled', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="50" disabled></nile-pagination>`);
+    await el.updateComplete;
+    let eventFired = false;
+    el.addEventListener('nile-change', () => { eventFired = true; });
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    (menuItems[0] as HTMLElement).click();
+    await el.updateComplete;
+    expect(eventFired).to.be.false;
+    expect(el.pageSize).to.equal(50);
+  });
+
+  it('108. should emit nile-change with page=1 on compact page size change', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="200" pagesize="50" currentpage="2"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const menuItems = el.shadowRoot!.querySelectorAll('.compact-scroll-wrapper nile-menu-item');
+    (menuItems[0] as HTMLElement).click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(1);
+    expect(detail.pageSize).to.equal(10);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // DYNAMIC PROPERTY UPDATES
+  // ═══════════════════════════════════════════════════
+
+  it('109. should re-render when totalItems changes', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    el.totalItems = 200;
+    await el.updateComplete;
+    // With 200 items / 10 per page = 20 pages, should show ellipsis
+    const ellipsis = el.shadowRoot!.querySelector('.ellipsis-dropdown');
+    expect(ellipsis).to.exist;
+  });
+
+  it('110. should re-render when currentPage changes programmatically', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="50" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    el.currentPage = 3;
+    await el.updateComplete;
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    const currentBtn = Array.from(pageButtons).find(btn => btn.getAttribute('variant') === 'primary');
+    expect(currentBtn).to.exist;
+    expect(currentBtn!.textContent!.trim()).to.equal('3');
+  });
+
+  it('111. should re-render when pageSize changes programmatically', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    el.pageSize = 25;
+    await el.updateComplete;
+    // 100/25 = 4 pages, so all pages visible (<=7)
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    expect(pageButtons.length).to.equal(4);
+  });
+
+  it('112. should re-render when variant changes', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.fluid')).to.exist;
+    el.variant = 'compact';
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.compact')).to.exist;
+  });
+
+  it('113. should switch to mini rendering when variant changes to mini', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    el.variant = 'mini';
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.mini')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-showing-label')).to.exist;
+  });
+
+  it('114. should update disabled state dynamically', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="5"></nile-pagination>`);
+    await el.updateComplete;
+    el.disabled = true;
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // EVENT DETAILS
+  // ═══════════════════════════════════════════════════
+
+  it('115. should emit nile-change event that bubbles', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let bubbled = false;
+    document.addEventListener('nile-change', () => { bubbled = true; }, { once: true });
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(bubbled).to.be.true;
+  });
+
+  it('116. should include page, previousPage, and pageSize in event detail', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="25" currentpage="2"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    nextBtn.click();
+    await el.updateComplete;
+    expect(detail).to.have.property('page', 3);
+    expect(detail).to.have.property('previousPage', 2);
+    expect(detail).to.have.property('pageSize', 25);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // PAGINATION ITEMS (ELLIPSIS LOGIC) — FLUID
+  // ═══════════════════════════════════════════════════
+
+  it('117. should show all pages without ellipsis when totalPages <= 7', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="70" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsis = el.shadowRoot!.querySelector('.ellipsis-dropdown');
+    expect(ellipsis).to.be.null;
+  });
+
+  it('118. should show ellipsis when totalPages > 7', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsis = el.shadowRoot!.querySelector('.ellipsis-dropdown');
+    expect(ellipsis).to.exist;
+  });
+
+  it('119. should show right ellipsis when on early pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10" currentpage="2"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsisDropdowns = el.shadowRoot!.querySelectorAll('.ellipsis-dropdown');
+    expect(ellipsisDropdowns.length).to.be.greaterThan(0);
+  });
+
+  it('120. should show left ellipsis when on late pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10" currentpage="19"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsisDropdowns = el.shadowRoot!.querySelectorAll('.ellipsis-dropdown');
+    expect(ellipsisDropdowns.length).to.be.greaterThan(0);
+  });
+
+  it('121. should show two ellipsis when on middle pages', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10" currentpage="10"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsisDropdowns = el.shadowRoot!.querySelectorAll('.ellipsis-dropdown');
+    expect(ellipsisDropdowns.length).to.equal(2);
+  });
+
+  it('122. should render hidden pages in ellipsis dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="200" pagesize="10" currentpage="10"></nile-pagination>`);
+    await el.updateComplete;
+    const ellipsisMenuItems = el.shadowRoot!.querySelectorAll('.ellipsis-scroll-wrapper nile-menu-item');
+    expect(ellipsisMenuItems.length).to.be.greaterThan(0);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // EDGE CASES
+  // ═══════════════════════════════════════════════════
+
+  it('123. should handle single page (totalItems <= pageSize)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="5" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('124. should handle totalItems equal to pageSize (exactly one page)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="10" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const pageButtons = el.shadowRoot!.querySelectorAll('ul.pagination > li > nile-button:not(.prev-button):not(.next-button)');
+    expect(pageButtons.length).to.equal(1);
+  });
+
+  it('125. should handle large totalItems', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="10000" pagesize="10" currentpage="500"></nile-pagination>`);
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('nav')).to.exist;
+  });
+
+  it('126. should handle mini with single page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="5" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const ofLabel = el.shadowRoot!.querySelector('.mini-of-label');
+    expect(ofLabel!.textContent).to.contain('of 1');
+    const prevBtn = el.shadowRoot!.querySelector('.mini-prev-button') as HTMLElement;
+    const nextBtn = el.shadowRoot!.querySelector('.mini-next-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('127. should handle compact with single page', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="5" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    const prevBtn = el.shadowRoot!.querySelector('.prev-button') as HTMLElement;
+    const nextBtn = el.shadowRoot!.querySelector('.next-button') as HTMLElement;
+    expect(prevBtn.hasAttribute('disabled')).to.be.true;
+    expect(nextBtn.hasAttribute('disabled')).to.be.true;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // ACCESSIBILITY & PARTS
+  // ═══════════════════════════════════════════════════
+
+  it('128. should have aria-label="Pagination" on nav in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav!.getAttribute('aria-label')).to.equal('Pagination');
+  });
+
+  it('129. should have aria-label="Pagination" on nav in compact variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10"></nile-pagination>`);
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav!.getAttribute('aria-label')).to.equal('Pagination');
+  });
+
+  it('130. should have aria-label="Pagination" on mini nav', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    const nav = el.shadowRoot!.querySelector('nav');
+    expect(nav!.getAttribute('aria-label')).to.equal('Pagination');
+  });
+
+  it('131. should expose wrapper part', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const wrapper = el.shadowRoot!.querySelector('[part="wrapper"]');
+    expect(wrapper).to.exist;
+  });
+
+  it('132. should expose range-text part in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const rangeText = el.shadowRoot!.querySelector('[part="range-text"]');
+    expect(rangeText).to.exist;
+  });
+
+  it('133. should expose pagesize-label part in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const label = el.shadowRoot!.querySelector('[part="pagesize-label"]');
+    expect(label).to.exist;
+  });
+
+  it('134. should expose page-list part in fluid variant', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const pageList = el.shadowRoot!.querySelector('[part="page-list"]');
+    expect(pageList).to.exist;
+  });
+
+  it('135. should expose mini parts', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('[part="mini-showing-label"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="mini-page-dropdown"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="mini-of-label"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="mini-nav"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="mini-page-list"]')).to.exist;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // NILE-ICON RENDERING
+  // ═══════════════════════════════════════════════════
+
+  it('136. should render nile-icon elements in fluid pagination', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination totalitems="100" pagesize="10"></nile-pagination>`);
+    const icons = el.shadowRoot!.querySelectorAll('nile-icon');
+    expect(icons.length).to.be.greaterThan(0);
+  });
+
+  it('137. should render chevron icon in page-size dropdown (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const chevron = el.shadowRoot!.querySelector('.page-size-dropdown .chevron');
+    expect(chevron).to.exist;
+  });
+
+  it('138. should render chevron icon in mini page dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const chevron = el.shadowRoot!.querySelector('.mini-page-dropdown .chevron');
+    expect(chevron).to.exist;
+  });
+
+  it('139. should render chevron icon in compact page-size dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact"></nile-pagination>`);
+    await el.updateComplete;
+    const chevron = el.shadowRoot!.querySelector('.compact-dropdown .chevron');
+    expect(chevron).to.exist;
+  });
+
+  it('140. should render chevron icon in compact page dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="100" pagesize="10"></nile-pagination>`);
+    await el.updateComplete;
+    const chevron = el.shadowRoot!.querySelector('.compact-dropdown1 .chevron');
+    expect(chevron).to.exist;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // NEGATIVE DOM CHECKS
+  // ═══════════════════════════════════════════════════
+
+  it('141. should not contain canvas', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('canvas')).to.be.null;
+  });
+
+  it('142. should not contain video', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('video')).to.be.null;
+  });
+
+  it('143. should not contain form', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('form')).to.be.null;
+  });
+
+  it('144. should not contain img', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('img')).to.be.null;
+  });
+
+  it('145. should not contain table', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('table')).to.be.null;
+  });
+
+  it('146. should not contain nile-input', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-input')).to.be.null;
+  });
+
+  it('147. should not contain nile-dialog', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-dialog')).to.be.null;
+  });
+
+  it('148. should not contain nile-checkbox', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-checkbox')).to.be.null;
+  });
+
+  it('149. should not contain nile-select', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-select')).to.be.null;
+  });
+
+  it('150. should not contain anchor tag', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('a')).to.be.null;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // GENERIC DOM ATTRIBUTES
+  // ═══════════════════════════════════════════════════
+
+  it('151. should support class attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination class="pg"></nile-pagination>`);
+    expect(el.classList.contains('pg')).to.be.true;
+  });
+
+  it('152. should support id attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination id="pg1"></nile-pagination>`);
+    expect(el.id).to.equal('pg1');
+  });
+
+  it('153. should support hidden attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination hidden></nile-pagination>`);
+    expect(el.hidden).to.be.true;
+  });
+
+  it('154. should support data attributes', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination data-test="val"></nile-pagination>`);
+    expect(el.dataset.test).to.equal('val');
+  });
+
+  it('155. should support aria-label attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination aria-label="Page nav"></nile-pagination>`);
+    expect(el.getAttribute('aria-label')).to.equal('Page nav');
+  });
+
+  it('156. should support dir attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination dir="rtl"></nile-pagination>`);
+    expect(el.dir).to.equal('rtl');
+  });
+
+  it('157. should support style attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination style="color:red"></nile-pagination>`);
+    expect(el.style.color).to.equal('red');
+  });
+
+  it('158. should support role attribute', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination role="navigation"></nile-pagination>`);
+    expect(el.getAttribute('role')).to.equal('navigation');
+  });
+
+  // ═══════════════════════════════════════════════════
+  // CUSTOM PAGE SIZE OPTIONS
+  // ═══════════════════════════════════════════════════
+
+  it('159. should render custom page size options (fluid)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination pagesizeoptions="[5,15,30]"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.page-size-dropdown nile-menu-item');
+    expect(menuItems.length).to.equal(3);
+  });
+
+  it('160. should render custom page size options (compact)', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" pagesizeoptions="[5,15,30]"></nile-pagination>`);
+    await el.updateComplete;
+    const menuItems = el.shadowRoot!.querySelectorAll('.compact-scroll-wrapper nile-menu-item');
+    expect(menuItems.length).to.equal(3);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // RE-RENDER & LIFECYCLE
+  // ═══════════════════════════════════════════════════
+
+  it('161. should handle multiple rapid requestUpdate calls', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    for (let i = 0; i < 5; i++) {
+      el.requestUpdate();
+      await el.updateComplete;
+    }
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('162. should have render method', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.render).to.be.a('function');
+  });
+
+  it('163. should resolve updateComplete', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    const result = await el.updateComplete;
+    expect(result).to.not.be.undefined;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // COMPACT VARIANT — PAGE NAVIGATION VIA DROPDOWN
+  // ═══════════════════════════════════════════════════
+
+  it('164. should navigate to selected page in compact dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="compact" totalitems="50" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const menuItems = el.shadowRoot!.querySelectorAll('.compact-scroll-wrapper1 nile-menu-item');
+    // Click page 3 (index 2)
+    (menuItems[2] as HTMLElement).click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(3);
+    expect(detail.previousPage).to.equal(1);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // MINI VARIANT — PAGE NAVIGATION VIA DROPDOWN
+  // ═══════════════════════════════════════════════════
+
+  it('165. should navigate to selected page in mini dropdown', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination variant="mini" totalitems="50" pagesize="10" currentpage="1"></nile-pagination>`);
+    await el.updateComplete;
+    let detail: any;
+    el.addEventListener('nile-change', ((e: CustomEvent) => { detail = e.detail; }) as EventListener);
+    const menuItems = el.shadowRoot!.querySelectorAll('.mini-scroll-wrapper nile-menu-item');
+    // Click page 4 (index 3)
+    (menuItems[3] as HTMLElement).click();
+    await el.updateComplete;
+    expect(detail).to.exist;
+    expect(detail.page).to.equal(4);
+    expect(detail.previousPage).to.equal(1);
+  });
+
+  // ═══════════════════════════════════════════════════
+  // NILE-BUTTON & NILE-MENU PRESENCE
+  // ═══════════════════════════════════════════════════
+
+  it('166. should have nile-button in shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-button')).to.exist;
+  });
+
+  it('167. should have nile-menu in shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-menu')).to.exist;
+  });
+
+  it('168. should have nile-dropdown in shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-dropdown')).to.exist;
+  });
+
+  it('169. should have nile-menu-item in shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-menu-item')).to.exist;
+  });
+
+  it('170. should have nile-icon in shadow root', async () => {
+    const el = await fixture<NilePagination>(html`<nile-pagination></nile-pagination>`);
+    expect(el.shadowRoot!.querySelector('nile-icon')).to.exist;
+  });
+
+  // ═══════════════════════════════════════════════════
+  // FULL INTEGRATION
+  // ═══════════════════════════════════════════════════
+
+  it('171. full integration — fluid variant with all props', async () => {
+    const el = await fixture<NilePagination>(html`
+      <nile-pagination
+        totalitems="200"
+        pagesize="25"
+        currentpage="3"
+        pagesizeoptions="[10,25,50]"
+        class="pg"
+        id="pg-fluid"
+      ></nile-pagination>
+    `);
+    await el.updateComplete;
+    expect(el.totalItems).to.equal(200);
+    expect(el.pageSize).to.equal(25);
+    expect(el.currentPage).to.equal(3);
+    expect(el.variant).to.equal('fluid');
+    expect(el.id).to.equal('pg-fluid');
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.fluid')).to.exist;
+    expect(el.shadowRoot!.querySelector('nav')).to.exist;
+    expect(el.shadowRoot!.querySelector('.range-text')).to.exist;
+    expect(el.shadowRoot!.querySelector('.page-size-select')).to.exist;
+  });
+
+  it('172. full integration — compact variant with all props', async () => {
+    const el = await fixture<NilePagination>(html`
+      <nile-pagination
+        variant="compact"
+        totalitems="100"
+        pagesize="10"
+        currentpage="5"
+        id="pg-compact"
+      ></nile-pagination>
+    `);
+    await el.updateComplete;
+    expect(el.totalItems).to.equal(100);
+    expect(el.pageSize).to.equal(10);
+    expect(el.currentPage).to.equal(5);
+    expect(el.variant).to.equal('compact');
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.compact')).to.exist;
+    expect(el.shadowRoot!.querySelector('.compact-pagination')).to.exist;
+    expect(el.shadowRoot!.querySelector('.current-page-btn')).to.exist;
+  });
+
+  it('173. full integration — mini variant with all props', async () => {
+    const el = await fixture<NilePagination>(html`
+      <nile-pagination
+        variant="mini"
+        totalitems="100"
+        pagesize="10"
+        currentpage="5"
+        id="pg-mini"
+      ></nile-pagination>
+    `);
+    await el.updateComplete;
+    expect(el.totalItems).to.equal(100);
+    expect(el.pageSize).to.equal(10);
+    expect(el.currentPage).to.equal(5);
+    expect(el.variant).to.equal('mini');
+    expect(el.shadowRoot!.querySelector('.pagination-wrapper.mini')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-showing-label')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-of-label')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-page-btn')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-prev-button')).to.exist;
+    expect(el.shadowRoot!.querySelector('.mini-next-button')).to.exist;
+  });
 });