@aquera/nile-elements 1.5.4 → 1.5.6

package/src/nile-inline-sidebar-group/nile-inline-sidebar-group.test.ts

@@ -0,0 +1,107 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-inline-sidebar-group';
+import '../nile-inline-sidebar-item/nile-inline-sidebar-item';
+import type { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
+
+describe('NileInlineSidebarGroup', () => {
+  it('1. renders', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.tagName.toLowerCase()).to.equal('nile-inline-sidebar-group'); });
+  it('4. label defaults empty', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.label).to.equal(''); });
+  it('5. divider defaults false', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.divider).to.be.false; });
+  it('6. set label', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Main"></nile-inline-sidebar-group>`); expect(el.label).to.equal('Main'); });
+  it('7. set divider', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group divider></nile-inline-sidebar-group>`); expect(el.divider).to.be.true; });
+  it('8. divider reflects', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group divider></nile-inline-sidebar-group>`); expect(el.hasAttribute('divider')).to.be.true; });
+  it('9. group-label when label set', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Settings"></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('.group-label')).to.exist; });
+  it('10. no group-label when empty', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('.group-label')).to.be.null; });
+  it('11. group class', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('.group')).to.exist; });
+  it('12. group-items class', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('.group-items')).to.exist; });
+  it('13. default slot', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
+  it('14. label slot when label set', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="L"></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')).to.exist; });
+  it('15. dynamic label on', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.label = 'New'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.group-label')).to.exist; });
+  it('16. dynamic label cleared', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Old"></nile-inline-sidebar-group>`); el.label = ''; await el.updateComplete; expect(el.shadowRoot!.querySelector('.group-label')).to.be.null; });
+  it('17. dynamic divider on', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.divider = true; await el.updateComplete; expect(el.hasAttribute('divider')).to.be.true; });
+  it('18. dynamic divider off', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group divider></nile-inline-sidebar-group>`); el.divider = false; await el.updateComplete; expect(el.hasAttribute('divider')).to.be.false; });
+  it('19. slotted item', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.querySelector('nile-inline-sidebar-item')).to.exist; });
+  it('20. multiple slotted items', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>A</nile-inline-sidebar-item><nile-inline-sidebar-item>B</nile-inline-sidebar-item><nile-inline-sidebar-item>C</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.querySelectorAll('nile-inline-sidebar-item').length).to.equal(3); });
+  it('21. text content', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>Dashboard</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.textContent).to.contain('Dashboard'); });
+  it('22. slotted label content', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><span slot="label">Custom</span></nile-inline-sidebar-group>`); expect(el.querySelector('[slot="label"]')).to.exist; });
+  it('23. has styles', async () => { expect((await import('./nile-inline-sidebar-group')).NileInlineSidebarGroup.styles).to.exist; });
+  it('24. is defined', async () => { expect(customElements.get('nile-inline-sidebar-group')).to.exist; });
+  it('25. shadow mode', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('26. isConnected', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.isConnected).to.be.true; });
+  it('27. removal', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('28. outerHTML', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.outerHTML).to.contain('nile-inline-sidebar-group'); });
+  it('29. matches', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group class="x"></nile-inline-sidebar-group>`); expect(el.matches('.x')).to.be.true; });
+  it('30. closest', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.closest('nile-inline-sidebar-group')).to.equal(el); });
+  it('31. cloneNode', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-inline-sidebar-group'); });
+  it('32. dispatchEvent', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('33. updateComplete', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('34. render method', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.render).to.be.a('function'); });
+  it('35. shadowRoot host', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('36. class attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group class="g"></nile-inline-sidebar-group>`); expect(el.classList.contains('g')).to.be.true; });
+  it('37. id attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group id="g1"></nile-inline-sidebar-group>`); expect(el.id).to.equal('g1'); });
+  it('38. hidden', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group hidden></nile-inline-sidebar-group>`); expect(el.hidden).to.be.true; });
+  it('39. nodeType', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.nodeType).to.equal(1); });
+  it('40. localName', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.localName).to.equal('nile-inline-sidebar-group'); });
+  it('41. namespaceURI', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('42. ownerDocument', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.ownerDocument).to.equal(document); });
+  it('43. multiple instances', async () => { const c = await fixture(html`<div><nile-inline-sidebar-group></nile-inline-sidebar-group><nile-inline-sidebar-group></nile-inline-sidebar-group></div>`); expect(c.querySelectorAll('nile-inline-sidebar-group').length).to.equal(2); });
+  it('44. parent-child', async () => { const c = await fixture(html`<div><nile-inline-sidebar-group></nile-inline-sidebar-group></div>`); expect(c.querySelector('nile-inline-sidebar-group')!.parentElement).to.equal(c); });
+  it('45. createElement', async () => { const el = document.createElement('nile-inline-sidebar-group') as NileInlineSidebarGroup; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('46. dataset', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group data-idx="0"></nile-inline-sidebar-group>`); expect(el.dataset.idx).to.equal('0'); });
+  it('47. classList add', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('48. getBoundingClientRect', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('49. no form', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
+  it('50. no input', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('input')).to.be.null; });
+  it('51. no button', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('button')).to.be.null; });
+  it('52. no anchor', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('53. no img', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
+  it('54. no svg', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('svg')).to.be.null; });
+  it('55. style attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group style="color:red"></nile-inline-sidebar-group>`); expect(el.style.color).to.equal('red'); });
+  it('56. data attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group data-x="1"></nile-inline-sidebar-group>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('57. aria-label', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group aria-label="Group"></nile-inline-sidebar-group>`); expect(el.getAttribute('aria-label')).to.equal('Group'); });
+  it('58. role', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group role="group"></nile-inline-sidebar-group>`); expect(el.getAttribute('role')).to.equal('group'); });
+  it('59. dir', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group dir="rtl"></nile-inline-sidebar-group>`); expect(el.dir).to.equal('rtl'); });
+  it('60. title attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group title="G"></nile-inline-sidebar-group>`); expect(el.title).to.equal('G'); });
+  it('61. lang attr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group lang="en"></nile-inline-sidebar-group>`); expect(el.lang).to.equal('en'); });
+  it('62. tabindex', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group tabindex="0"></nile-inline-sidebar-group>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('63. requestUpdate', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('64. shadow childNodes', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('65. scrollIntoView', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('66. focus method', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.focus).to.be.a('function'); });
+  it('67. blur method', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.blur).to.be.a('function'); });
+  it('68. class toggle', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('69. toggle hidden', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('70. dispatchCustomEvent', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); 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('71. nested in div', async () => { const c = await fixture(html`<div><nile-inline-sidebar-group></nile-inline-sidebar-group></div>`); expect(c.querySelector('nile-inline-sidebar-group')).to.exist; });
+  it('72. no table', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('73. no canvas', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('74. no ul', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('ul')).to.be.null; });
+  it('75. no video', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
+  it('76. no audio', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
+  it('77. no nav', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('nav')).to.be.null; });
+  it('78. no textarea', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
+  it('79. no select', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('select')).to.be.null; });
+  it('80. setAttribute data', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('81. removeAttribute hidden', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group hidden></nile-inline-sidebar-group>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+  it('82. setAttribute class', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+  it('83. setAttribute divider', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.setAttribute('divider', ''); await el.updateComplete; expect(el.divider).to.be.true; });
+  it('84. removeAttribute divider', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group divider></nile-inline-sidebar-group>`); el.removeAttribute('divider'); await el.updateComplete; expect(el.divider).to.be.false; });
+  it('85. setAttribute label', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.setAttribute('label', 'Test'); await el.updateComplete; expect(el.label).to.equal('Test'); });
+  it('86. aria-describedby', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group aria-describedby="d"></nile-inline-sidebar-group>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+  it('87. multiple re-renders', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('88. contains child', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item id="i1">A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.contains(el.querySelector('#i1'))).to.be.true; });
+  it('89. children survived update', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item id="i1">A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); el.requestUpdate(); await el.updateComplete; expect(el.querySelector('#i1')).to.exist; });
+  it('90. children survived label change', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Old"><nile-inline-sidebar-item id="i1">A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); el.label = 'New'; await el.updateComplete; expect(el.querySelector('#i1')).to.exist; });
+  it('91. childElementCount', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>A</nile-inline-sidebar-item><nile-inline-sidebar-item>B</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.childElementCount).to.equal(2); });
+  it('92. firstElementChild', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.firstElementChild!.tagName.toLowerCase()).to.equal('nile-inline-sidebar-item'); });
+  it('93. appendChild', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); const item = document.createElement('nile-inline-sidebar-item'); item.textContent = 'New'; el.appendChild(item); expect(el.querySelector('nile-inline-sidebar-item')).to.exist; });
+  it('94. removeChild', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item id="i1">A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); const item = el.querySelector('#i1')!; el.removeChild(item); expect(el.querySelector('#i1')).to.be.null; });
+  it('95. rapid divider toggles', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.divider = true; await el.updateComplete; el.divider = false; await el.updateComplete; el.divider = true; await el.updateComplete; expect(el.divider).to.be.true; });
+  it('96. rapid label changes', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.label = 'A'; await el.updateComplete; el.label = 'B'; await el.updateComplete; el.label = 'C'; await el.updateComplete; expect(el.label).to.equal('C'); });
+  it('97. no h1', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
+  it('98. no pre', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
+  it('99. no hr', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('hr')).to.be.null; });
+  it('100. full integration', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Settings" divider class="g" id="g1" aria-label="Settings Group"><nile-inline-sidebar-item active>Profile</nile-inline-sidebar-item><nile-inline-sidebar-item>Preferences</nile-inline-sidebar-item><nile-inline-sidebar-item disabled>Admin</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.label).to.equal('Settings'); expect(el.divider).to.be.true; expect(el.id).to.equal('g1'); expect(el.getAttribute('aria-label')).to.equal('Settings Group'); expect(el.querySelectorAll('nile-inline-sidebar-item').length).to.equal(3); expect(el.shadowRoot!.querySelector('.group')).to.exist; expect(el.shadowRoot!.querySelector('.group-label')).to.exist; expect(el.shadowRoot!.querySelector('.group-items')).to.exist; });
+});

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.test.ts

@@ -0,0 +1,107 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-inline-sidebar-item';
+import '../nile-inline-sidebar/nile-inline-sidebar';
+import type { NileInlineSidebarItem } from './nile-inline-sidebar-item';
+
+describe('NileInlineSidebarItem', () => {
+  it('1. renders', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.tagName.toLowerCase()).to.equal('nile-inline-sidebar-item'); });
+  it('4. active defaults false', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.active).to.be.false; });
+  it('5. disabled defaults false', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.disabled).to.be.false; });
+  it('6. href defaults undefined', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.href).to.be.undefined; });
+  it('7. tooltip defaults false', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.tooltip).to.be.false; });
+  it('8. set active', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); expect(el.active).to.be.true; });
+  it('9. set disabled', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); expect(el.disabled).to.be.true; });
+  it('10. set href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page"></nile-inline-sidebar-item>`); expect(el.href).to.equal('/page'); });
+  it('11. set tooltip', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item tooltip></nile-inline-sidebar-item>`); expect(el.tooltip).to.be.true; });
+  it('12. active reflects', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); expect(el.hasAttribute('active')).to.be.true; });
+  it('13. disabled reflects', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); expect(el.hasAttribute('disabled')).to.be.true; });
+  it('14. tooltip reflects', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item tooltip></nile-inline-sidebar-item>`); expect(el.hasAttribute('tooltip')).to.be.true; });
+  it('15. item class', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('.item')).to.exist; });
+  it('16. item role menuitem', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); const item = el.shadowRoot!.querySelector('.item'); expect(item!.getAttribute('role')).to.equal('menuitem'); });
+  it('17. host tabindex 0', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('18. default slot', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('slot')).to.exist; });
+  it('19. href renders anchor', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page">Link</nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('a')).to.exist; });
+  it('20. no anchor without href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Text</nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('21. anchor href value', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/test">Link</nile-inline-sidebar-item>`); const a = el.shadowRoot!.querySelector('a') as HTMLAnchorElement; expect(a.getAttribute('href')).to.equal('/test'); });
+  it('22. click emits nile-click', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Test</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail).to.exist; expect(detail.item).to.equal(el); });
+  it('23. click event has text', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Dashboard</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail.text).to.equal('Dashboard'); });
+  it('24. click event has href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page">Link</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail.href).to.equal('/page'); });
+  it('25. disabled prevents click event', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled>Test</nile-inline-sidebar-item>`); let fired = false; el.addEventListener('nile-click', () => { fired = true; }); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(fired).to.be.false; });
+  it('26. dynamic active on', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.active = true; await el.updateComplete; expect(el.hasAttribute('active')).to.be.true; });
+  it('27. dynamic active off', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); el.active = false; await el.updateComplete; expect(el.hasAttribute('active')).to.be.false; });
+  it('28. dynamic disabled on', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.disabled = true; await el.updateComplete; expect(el.hasAttribute('disabled')).to.be.true; });
+  it('29. dynamic disabled off', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); el.disabled = false; await el.updateComplete; expect(el.hasAttribute('disabled')).to.be.false; });
+  it('30. text content', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Dashboard</nile-inline-sidebar-item>`); expect(el.textContent).to.contain('Dashboard'); });
+  it('31. has styles', async () => { expect((await import('./nile-inline-sidebar-item')).NileInlineSidebarItem.styles).to.exist; });
+  it('32. is defined', async () => { expect(customElements.get('nile-inline-sidebar-item')).to.exist; });
+  it('33. shadow mode', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('34. isConnected', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.isConnected).to.be.true; });
+  it('35. removal', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('36. outerHTML', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.outerHTML).to.contain('nile-inline-sidebar-item'); });
+  it('37. matches', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item class="x"></nile-inline-sidebar-item>`); expect(el.matches('.x')).to.be.true; });
+  it('38. closest', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.closest('nile-inline-sidebar-item')).to.equal(el); });
+  it('39. cloneNode', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-inline-sidebar-item'); });
+  it('40. dispatchEvent', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('41. updateComplete', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('42. render method', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.render).to.be.a('function'); });
+  it('43. shadowRoot host', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('44. class attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item class="i"></nile-inline-sidebar-item>`); expect(el.classList.contains('i')).to.be.true; });
+  it('45. id attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item id="i1"></nile-inline-sidebar-item>`); expect(el.id).to.equal('i1'); });
+  it('46. hidden', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item hidden></nile-inline-sidebar-item>`); expect(el.hidden).to.be.true; });
+  it('47. nodeType', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.nodeType).to.equal(1); });
+  it('48. localName', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.localName).to.equal('nile-inline-sidebar-item'); });
+  it('49. namespaceURI', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('50. ownerDocument', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.ownerDocument).to.equal(document); });
+  it('51. multiple instances', async () => { const c = await fixture(html`<div><nile-inline-sidebar-item></nile-inline-sidebar-item><nile-inline-sidebar-item></nile-inline-sidebar-item></div>`); expect(c.querySelectorAll('nile-inline-sidebar-item').length).to.equal(2); });
+  it('52. parent-child', async () => { const c = await fixture(html`<div><nile-inline-sidebar-item></nile-inline-sidebar-item></div>`); expect(c.querySelector('nile-inline-sidebar-item')!.parentElement).to.equal(c); });
+  it('53. createElement', async () => { const el = document.createElement('nile-inline-sidebar-item') as NileInlineSidebarItem; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('54. dataset', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item data-idx="0"></nile-inline-sidebar-item>`); expect(el.dataset.idx).to.equal('0'); });
+  it('55. classList add', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('56. getBoundingClientRect', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('57. no form', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
+  it('58. no input', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('input')).to.be.null; });
+  it('59. no button', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('button')).to.be.null; });
+  it('60. no img', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
+  it('61. no svg', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('svg')).to.be.null; });
+  it('62. style attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item style="color:red"></nile-inline-sidebar-item>`); expect(el.style.color).to.equal('red'); });
+  it('63. data attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item data-x="1"></nile-inline-sidebar-item>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('64. aria-label', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item aria-label="Item"></nile-inline-sidebar-item>`); expect(el.getAttribute('aria-label')).to.equal('Item'); });
+  it('65. role', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item role="menuitem"></nile-inline-sidebar-item>`); expect(el.getAttribute('role')).to.equal('menuitem'); });
+  it('66. dir', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item dir="rtl"></nile-inline-sidebar-item>`); expect(el.dir).to.equal('rtl'); });
+  it('67. title attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item title="I"></nile-inline-sidebar-item>`); expect(el.title).to.equal('I'); });
+  it('68. lang attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item lang="en"></nile-inline-sidebar-item>`); expect(el.lang).to.equal('en'); });
+  it('69. tabindex attr', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item tabindex="0"></nile-inline-sidebar-item>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('70. requestUpdate', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('71. shadow childNodes', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('72. scrollIntoView', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('73. focus method', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.focus).to.be.a('function'); });
+  it('74. blur method', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.blur).to.be.a('function'); });
+  it('75. class toggle', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('76. toggle hidden', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('77. dispatchCustomEvent', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); 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('78. nested in div', async () => { const c = await fixture(html`<div><nile-inline-sidebar-item></nile-inline-sidebar-item></div>`); expect(c.querySelector('nile-inline-sidebar-item')).to.exist; });
+  it('79. no table', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('80. no canvas', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('81. no video', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
+  it('82. no audio', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
+  it('83. no nav', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('nav')).to.be.null; });
+  it('84. no textarea', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
+  it('85. no select', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('select')).to.be.null; });
+  it('86. setAttribute data', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('87. removeAttribute hidden', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item hidden></nile-inline-sidebar-item>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+  it('88. setAttribute class', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+  it('89. setAttribute active', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.setAttribute('active', ''); await el.updateComplete; expect(el.active).to.be.true; });
+  it('90. removeAttribute active', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); el.removeAttribute('active'); await el.updateComplete; expect(el.active).to.be.false; });
+  it('91. setAttribute disabled', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.setAttribute('disabled', ''); await el.updateComplete; expect(el.disabled).to.be.true; });
+  it('92. removeAttribute disabled', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); el.removeAttribute('disabled'); await el.updateComplete; expect(el.disabled).to.be.false; });
+  it('93. aria-describedby', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item aria-describedby="d"></nile-inline-sidebar-item>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+  it('94. multiple re-renders', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('95. contains child', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item><span id="s1">C</span></nile-inline-sidebar-item>`); expect(el.contains(el.querySelector('#s1'))).to.be.true; });
+  it('96. rapid active toggles', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.active = true; await el.updateComplete; el.active = false; await el.updateComplete; el.active = true; await el.updateComplete; expect(el.active).to.be.true; });
+  it('97. rapid disabled toggles', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.disabled = true; await el.updateComplete; el.disabled = false; await el.updateComplete; el.disabled = true; await el.updateComplete; expect(el.disabled).to.be.true; });
+  it('98. no h1', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
+  it('99. no pre', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
+  it('100. full integration', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active href="/dash" class="i" id="i1" aria-label="Dashboard">Dashboard</nile-inline-sidebar-item>`); expect(el.active).to.be.true; expect(el.href).to.equal('/dash'); expect(el.id).to.equal('i1'); expect(el.getAttribute('aria-label')).to.equal('Dashboard'); expect(el.textContent).to.contain('Dashboard'); expect(el.shadowRoot!.querySelector('.item')).to.exist; expect(el.shadowRoot!.querySelector('a')).to.exist; });
+});

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts

@@ -35,7 +35,30 @@ export class NileInlineSidebarItem extends NileElement {
     return [styles];
   }
 
-  private handleClick(e: Event) {
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', this.disabled ? '-1' : '0');
+    }
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'menuitem');
+    }
+    this.addEventListener('keydown', this._handleHostKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this._handleHostKeyDown);
+  }
+
+  private _handleHostKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._select(e);
+    }
+  };
+
+  private _select(e: Event) {
     if (this.disabled) {
       e.preventDefault();
       e.stopPropagation();
@@ -62,11 +85,19 @@ export class NileInlineSidebarItem extends NileElement {
       window.location.href = this.href;
     }
   }
-  
+
+  private handleClick(e: Event) {
+    this._select(e);
+  }
 
   public render(): TemplateResult {
     return html`
-      <div class="item" @click=${this.handleClick} role="button" tabindex="0">
+      <div
+        class="item"
+        @click=${this.handleClick}
+        role="menuitem"
+        aria-disabled=${this.disabled}
+      >
         ${this.href
           ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`
           : html`<slot></slot>`}

package/src/nile-input/nile-input.css.ts

@@ -194,7 +194,7 @@ export const styles = css`
   }
 
   .input--standard.input--disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
     /* opacity: 0.5; */
     cursor: not-allowed;
@@ -205,7 +205,8 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   }
 
   .input--standard.input--warning {
@@ -261,7 +262,6 @@ export const styles = css`
 
   .input--filled.input--disabled {
     background-color: var(--nile-colors-dark-100);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -335,7 +335,7 @@ export const styles = css`
   .input__control::placeholder {
     color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
     user-select: none;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .input:hover:not(.input--disabled) .input__control {

package/src/nile-link/nile-link.css.ts

@@ -46,8 +46,7 @@ export const styles = css`
   .link--disabled {
     color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));
     cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.6;
+    
   }
 
   .link.link--disabled:not(.link__button) .link__label {

package/src/nile-link/nile-link.ts

@@ -80,6 +80,7 @@ export class NileLink extends NileElement {
 
   handleClick(e: MouseEvent) {
     if (this.disabled) {
+      e.preventDefault();
       e.stopPropagation();
       return;
     }

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

@@ -14,6 +14,15 @@ export const styles = css`
   :host {
   }
 
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .pagination-wrapper,
+  :host([disabled]) .pagination-wrapper.mini {
+    pointer-events: none;
+  }
+
   .pagination-wrapper {
     display: flex;
     align-items: center;
@@ -22,14 +31,14 @@ export const styles = css`
   }
 
  
-  .pagination-wrapper.v2 .pager-container {
+  .pagination-wrapper.mini .pager-container {
     flex-direction: row;
     align-items: center;
     gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
     margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); 
   }
 
-  .pagination-wrapper.v2 .range-text {
+  .pagination-wrapper.mini .range-text {
     margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
     font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
     color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));
@@ -37,6 +46,101 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
+  .pagination-wrapper.mini {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .mini-showing-label,
+  .mini-of-label {
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    white-space: nowrap;
+    line-height: 32px;
+  }
+
+  .mini-page-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .mini-scroll-wrapper {
+    max-height: 164px;
+    overflow-y: auto;
+    width: 60px;
+  }
+
+  nile-button.mini-page-btn::part(base) {
+    min-width: auto;
+    height: 10px;
+    padding: 0px 4px;
+    gap: 2px;
+    border: none ;
+    box-shadow: none ;
+    background: transparent ;
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+  }
+
+  nile-button.mini-page-btn::part(base):hover,
+  nile-button.mini-page-btn::part(base):active {
+    min-width: auto;
+    height: 10px;
+    padding: 0px 4px;
+    gap: 2px;
+    border: none ;
+    background: transparent ;
+  }
+
+  .mini-page-dropdown {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  nile-button.mini-prev-button::part(base),
+  nile-button.mini-next-button::part(base) {
+    border: none ;
+  }
+
+  nile-button.mini-prev-button::part(base):hover,
+  nile-button.mini-next-button::part(base):hover {
+    border: none ;
+  }
+
+  nile-button.mini-prev-button::part(base):active,
+  nile-button.mini-next-button::part(base):active {
+    border: none ;
+  }
+
+  .mini-page-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+
+  .mini-page-dropdown .mini-page-btn.open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .mini-nav {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+  }
+
+  .mini-pagination {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
  
   .pagination-wrapper.compact {
     min-width: 324px;
@@ -107,7 +211,7 @@ export const styles = css`
   }
 
 .pagination-wrapper.compact .pager-container {
-  gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;
+  gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) ;
 }
 
   .range-text {