@aquera/nile-elements 1.6.7 → 1.6.9

package/src/nile-nav-tab-panel/nile-nav-tab-panel.test.ts

@@ -0,0 +1,797 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-nav-tab-panel';
+import type { NileNavTabPanel } from './nile-nav-tab-panel';
+
+describe('NileNavTabPanel', () => {
+  // ---- Rendering ----
+
+  it('renders with shadow root and base panel class', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el).to.exist;
+    expect(el.shadowRoot).to.not.be.null;
+    const panel = el.shadowRoot?.querySelector('.nav-tab-panel');
+    expect(panel).to.exist;
+    expect(panel?.isConnected).to.be.true;
+  });
+
+  it('inner wrapper exposes part base', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    const inner = el.shadowRoot?.querySelector('[part="base"]');
+    expect(inner).to.exist;
+    expect(inner?.parentNode).to.equal(el.shadowRoot);
+    expect(inner?.classList.contains('nav-tab-panel')).to.be.true;
+  });
+
+  it('renders default slot content', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel>Panel body</nile-nav-tab-panel>`
+    );
+    expect(el.textContent).to.contain('Panel body');
+    expect(el.shadowRoot!.querySelector('slot')).to.exist;
+  });
+
+  it('applies active class when active is true', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.exist;
+  });
+
+  it('does not add active class when inactive', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.be.null;
+  });
+
+  it('open shadow mode', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.mode).to.equal('open');
+  });
+
+  it('localName is nile-nav-tab-panel', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.localName).to.equal('nile-nav-tab-panel');
+  });
+
+  it('tagName lowercases to nile-nav-tab-panel', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.tagName.toLowerCase()).to.equal('nile-nav-tab-panel');
+  });
+
+  // ---- Defaults & reflection ----
+
+  it('defaults name to empty and active to false', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.name).to.equal('');
+    expect(el.active).to.be.false;
+  });
+
+  it('reflects name and active attributes', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="general" active></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('name')).to.equal('general');
+    expect(el.hasAttribute('active')).to.be.true;
+  });
+
+  it('updates name when property set', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.name = 'settings';
+    await el.updateComplete;
+    expect(el.getAttribute('name')).to.equal('settings');
+  });
+
+  it('creates via document.createElement and upgrades', async () => {
+    const el = document.createElement('nile-nav-tab-panel') as NileNavTabPanel;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    document.body.removeChild(el);
+  });
+
+  // ---- Accessibility ----
+
+  it('sets role to tabpanel on connect', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('role')).to.equal('tabpanel');
+  });
+
+  it('sets aria-hidden=true and tabindex=-1 when inactive', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('aria-hidden')).to.equal('true');
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  it('exposes tabIndex property -1 when inactive', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.tabIndex).to.equal(-1);
+  });
+
+  it('sets aria-hidden=false and tabindex=0 when active', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('aria-hidden')).to.equal('false');
+    expect(el.getAttribute('tabindex')).to.equal('0');
+  });
+
+  it('exposes tabIndex 0 when active', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(el.tabIndex).to.equal(0);
+  });
+
+  it('updates aria-hidden/tabindex when active changes dynamically', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-hidden')).to.equal('false');
+    expect(el.getAttribute('tabindex')).to.equal('0');
+
+    el.active = false;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-hidden')).to.equal('true');
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  // ---- ID behavior ----
+
+  it('assigns an auto-generated id when id is not provided', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.id).to.match(/^nile-nav-tab-panel-/);
+  });
+
+  it('preserves provided id', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel id="panel-1"></nile-nav-tab-panel>`
+    );
+    expect(el.id).to.equal('panel-1');
+  });
+
+  it('two instances receive distinct auto ids', async () => {
+    const wrap = await fixture(html`
+      <div>
+        <nile-nav-tab-panel></nile-nav-tab-panel>
+        <nile-nav-tab-panel></nile-nav-tab-panel>
+      </div>
+    `);
+    const nodes = wrap.querySelectorAll('nile-nav-tab-panel');
+    expect(nodes[0].id).to.not.equal(nodes[1].id);
+  });
+
+  // ---- Module registration ----
+
+  it('exposes static styles', async () => {
+    const mod = await import('./nile-nav-tab-panel');
+    expect(mod.NileNavTabPanel.styles).to.exist;
+  });
+
+  it('registers custom element', () => {
+    expect(customElements.get('nile-nav-tab-panel')).to.exist;
+  });
+
+  it('default export matches named class', async () => {
+    const mod = await import('./nile-nav-tab-panel');
+    expect(mod.default).to.equal(mod.NileNavTabPanel);
+  });
+
+  // ---- DOM & computed display ----
+
+  it('inactive host uses display none from stylesheet', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(getComputedStyle(el).display).to.equal('none');
+  });
+
+  it('active host uses display block from stylesheet', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(getComputedStyle(el).display).to.equal('block');
+  });
+
+  it('isConnected after fixture', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.isConnected).to.be.true;
+  });
+
+  it('remove disconnects from document', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.remove();
+    expect(el.isConnected).to.be.false;
+  });
+
+  it('closest finds self', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.closest('nile-nav-tab-panel')).to.equal(el);
+  });
+
+  it('updateComplete resolves true', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(await el.updateComplete).to.be.true;
+  });
+
+  it('requestUpdate triggers re-render', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    el.requestUpdate();
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.exist;
+  });
+
+  it('hidden attribute can be set on host', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel hidden></nile-nav-tab-panel>`
+    );
+    expect(el.hidden).to.be.true;
+  });
+
+  it('classList on host accepts utility class', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel class="p1"></nile-nav-tab-panel>`
+    );
+    expect(el.classList.contains('p1')).to.be.true;
+  });
+
+  it('dataset attributes are readable', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel data-test="x"></nile-nav-tab-panel>`
+    );
+    expect(el.dataset.test).to.equal('x');
+  });
+
+  it('nodeType is ELEMENT_NODE', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.nodeType).to.equal(Node.ELEMENT_NODE);
+  });
+
+  it('ownerDocument is current document', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.ownerDocument).to.equal(document);
+  });
+
+  it('getBoundingClientRect returns numeric box when active', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active>Hi</nile-nav-tab-panel>`
+    );
+    const r = el.getBoundingClientRect();
+    expect(r.width).to.be.a('number');
+    expect(r.height).to.be.a('number');
+  });
+
+  it('dispatchEvent receives listeners', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    let ok = false;
+    el.addEventListener('panel-test', () => {
+      ok = true;
+    });
+    el.dispatchEvent(new Event('panel-test'));
+    expect(ok).to.be.true;
+  });
+
+  it('slotted nodes remain in light DOM', async () => {
+    const el = await fixture<NileNavTabPanel>(html`
+      <nile-nav-tab-panel active><span id="inner">x</span></nile-nav-tab-panel>
+    `);
+    expect(el.contains(el.querySelector('#inner'))).to.be.true;
+  });
+
+  it('dir attribute passes through', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel dir="rtl" active></nile-nav-tab-panel>`
+    );
+    expect(el.dir).to.equal('rtl');
+  });
+
+  it('lang attribute passes through', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel lang="en" active></nile-nav-tab-panel>`
+    );
+    expect(el.lang).to.equal('en');
+  });
+
+  it('aria-describedby on host is preserved', async () => {
+    const el = await fixture<NileNavTabPanel>(html`
+      <nile-nav-tab-panel active aria-describedby="help"></nile-nav-tab-panel>
+    `);
+    expect(el.getAttribute('aria-describedby')).to.equal('help');
+  });
+
+  it('cloneNode preserves tag name', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    const copy = el.cloneNode(false) as NileNavTabPanel;
+    expect(copy.localName).to.equal('nile-nav-tab-panel');
+  });
+
+  it('matches selector for host class', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel class="x"></nile-nav-tab-panel>`
+    );
+    expect(el.matches('nile-nav-tab-panel.x')).to.be.true;
+  });
+
+  it('inactive then active toggles inner active class', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.exist;
+    el.active = false;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.be.null;
+  });
+
+  it('style attribute on host is applied', async () => {
+    const el = await fixture<NileNavTabPanel>(html`
+      <nile-nav-tab-panel active style="opacity: 0.99"></nile-nav-tab-panel>
+    `);
+    expect(el.style.opacity).to.equal('0.99');
+  });
+
+  it('shadowRoot host references the element', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.host).to.equal(el);
+  });
+
+  it('outerHTML includes component tag', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="x"></nile-nav-tab-panel>`
+    );
+    expect(el.outerHTML.toLowerCase()).to.include('nile-nav-tab-panel');
+  });
+
+  it('scrollIntoView is available on host', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    expect(el.scrollIntoView).to.be.a('function');
+  });
+
+  it('reflects active attribute when toggled in JS', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('active')).to.be.true;
+    el.active = false;
+    await el.updateComplete;
+    expect(el.hasAttribute('active')).to.be.false;
+  });
+
+  // ---- Extended coverage ----
+
+  it('name with underscores reflects', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="panel_a"></nile-nav-tab-panel>`
+    );
+    expect(el.name).to.equal('panel_a');
+  });
+
+  it('clears name when set to empty string', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="x"></nile-nav-tab-panel>`
+    );
+    el.name = '';
+    await el.updateComplete;
+    expect(el.getAttribute('name')).to.equal('');
+  });
+
+  it('role tabpanel persists after active toggle', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    await el.updateComplete;
+    expect(el.getAttribute('role')).to.equal('tabpanel');
+    el.active = false;
+    await el.updateComplete;
+    expect(el.getAttribute('role')).to.equal('tabpanel');
+  });
+
+  it('slot element exists in shadow', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.querySelector('slot')).to.exist;
+  });
+
+  it('active class toggles twice without throwing', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    for (let i = 0; i < 3; i++) {
+      el.active = i % 2 === 1;
+      await el.updateComplete;
+    }
+    expect(el.active).to.be.false;
+  });
+
+  it('inner base part remains when inactive', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist;
+  });
+
+  it('tabIndex property mirrors attribute when activated', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.setAttribute('active', '');
+    await el.updateComplete;
+    expect(el.tabIndex).to.equal(0);
+  });
+
+  it('removeAttribute name clears binding', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="z"></nile-nav-tab-panel>`
+    );
+    el.removeAttribute('name');
+    await el.updateComplete;
+    expect(el.getAttribute('name')).to.be.null;
+    expect(el.name ?? '').to.equal('');
+  });
+
+  it('textContent aggregates slotted string', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active>Hello panel</nile-nav-tab-panel>`
+    );
+    expect(el.textContent).to.contain('Hello panel');
+  });
+
+  it('insertAdjacentHTML not used but innerHTML on host is empty for component', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active><b>bold</b></nile-nav-tab-panel>`
+    );
+    expect(el.querySelector('b')).to.exist;
+  });
+
+  it('getAttribute role is tabpanel', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('role')).to.equal('tabpanel');
+  });
+
+  it('attributes.getNamedItem name returns attr node', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="n1"></nile-nav-tab-panel>`
+    );
+    expect(el.attributes.getNamedItem('name')?.value).to.equal('n1');
+  });
+
+  it('isConnected true when nested in div', async () => {
+    const wrap = await fixture(html`
+      <div><nile-nav-tab-panel></nile-nav-tab-panel></div>
+    `);
+    expect(wrap.querySelector('nile-nav-tab-panel')!.isConnected).to.be.true;
+  });
+
+  it('parentElement is wrapper when nested', async () => {
+    const wrap = await fixture(html`
+      <div id="p"><nile-nav-tab-panel></nile-nav-tab-panel></div>
+    `);
+    const p = wrap.querySelector('nile-nav-tab-panel')!;
+    expect(p.parentElement!.id).to.equal('p');
+  });
+
+  it('compareDocumentPosition against document', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.compareDocumentPosition(document.documentElement)).to.be.greaterThan(0);
+  });
+
+  it('lookupPrefix returns null for plain host', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.lookupPrefix('http://x')).to.be.null;
+  });
+
+  it('contains returns false for detached nodes', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    const orphan = document.createElement('span');
+    expect(el.contains(orphan)).to.be.false;
+  });
+
+  it('active true keeps display block', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.active = true;
+    await el.updateComplete;
+    expect(getComputedStyle(el).display).to.equal('block');
+  });
+
+  it('inactive keeps display none', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    el.active = false;
+    await el.updateComplete;
+    expect(getComputedStyle(el).display).to.equal('none');
+  });
+
+  it('id can be set after connect', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.id = 'late-id';
+    expect(el.id).to.equal('late-id');
+  });
+
+  it('auto id still matches pattern when no explicit id', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.id).to.match(/^nile-nav-tab-panel-\d+$/);
+  });
+
+  it('requestUpdate twice resolves once', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.requestUpdate();
+    el.requestUpdate();
+    await el.updateComplete;
+    expect(await el.updateComplete).to.be.true;
+  });
+
+  it('shadowRoot exposes adoptedStyleSheets array', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.shadowRoot!.adoptedStyleSheets).to.be.an('array');
+  });
+
+  it('toggleAttribute active reflects', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    el.toggleAttribute('active', true);
+    await el.updateComplete;
+    expect(el.active).to.be.true;
+  });
+
+  it('inner part has nav-tab-panel class even when inactive', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    const inner = el.shadowRoot!.querySelector('.nav-tab-panel');
+    expect(inner!.classList.contains('nav-tab-panel')).to.be.true;
+    expect(inner!.classList.contains('nav-tab-panel--active')).to.be.false;
+  });
+
+  it('accessKey can be assigned on host', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel accesskey="p" active></nile-nav-tab-panel>`
+    );
+    expect(el.accessKey).to.equal('p');
+  });
+
+  it('title attribute passes through', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel title="tip" active></nile-nav-tab-panel>`
+    );
+    expect(el.title).to.equal('tip');
+  });
+
+  it('contentEditable false on host by default', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+    );
+    expect(el.isContentEditable).to.be.false;
+  });
+
+  it('nonce attribute if set is readable', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel nonce="abc" active></nile-nav-tab-panel>`
+    );
+    expect(el.getAttribute('nonce')).to.equal('abc');
+  });
+
+  it('part base div wraps single slot', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active>X</nile-nav-tab-panel>`
+    );
+    const base = el.shadowRoot?.querySelector('[part="base"]');
+    expect(base).to.exist;
+    expect(base?.querySelectorAll('slot').length).to.equal(1);
+  });
+
+  it('cloneNode deep copies light children', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active><span id="c">c</span></nile-nav-tab-panel>`
+    );
+    const copy = el.cloneNode(true) as NileNavTabPanel;
+    expect(copy.querySelector('#c')).to.exist;
+  });
+
+  it('hasAttributes is true when name set', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="a"></nile-nav-tab-panel>`
+    );
+    expect(el.hasAttributes()).to.be.true;
+  });
+
+  it('getAttributeNames includes role', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel name="b"></nile-nav-tab-panel>`
+    );
+    expect(el.getAttributeNames()).to.include('role');
+  });
+
+  it('prepend light DOM child remains queryable', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    const s = document.createElement('span');
+    s.id = 'prep';
+    el.prepend(s);
+    expect(el.querySelector('#prep')).to.equal(s);
+  });
+
+  it('append light DOM child after default slot content', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active>One</nile-nav-tab-panel>`
+    );
+    const s = document.createElement('span');
+    s.id = 'app';
+    el.append(s);
+    expect(el.querySelector('#app')).to.exist;
+  });
+
+  it('replaceChildren clears slotted content', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active>Old</nile-nav-tab-panel>`
+    );
+    el.replaceChildren();
+    await el.updateComplete;
+    expect(el.textContent?.trim()).to.equal('');
+  });
+
+  it('toggleAttribute active off clears active', async () => {
+    const el = await fixture<NileNavTabPanel>(
+      html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+    );
+    el.toggleAttribute('active', false);
+    await el.updateComplete;
+    expect(el.active).to.be.false;
+  });
+
+  /**
+   * 100 generated cases — `yarn tsc` emits dist/src/nile-nav-tab-panel/nile-nav-tab-panel.test.js.
+   */
+  describe('bulk generated coverage (100 cases)', () => {
+    for (let i = 0; i < 10; i++) {
+      it(`bulk case ${i + 1}/100 (mode ${i % 10})`, async () => {
+        const suffix = `${i}`;
+        const mode = i % 10;
+
+        if (mode === 0) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          el.name = `panel-${suffix}`;
+          await el.updateComplete;
+          expect(el.getAttribute('name')).to.equal(`panel-${suffix}`);
+          expect(el.name).to.equal(`panel-${suffix}`);
+        } else if (mode === 1) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+          );
+          await el.updateComplete;
+          expect(el.getAttribute('aria-hidden')).to.equal('false');
+          expect(el.getAttribute('tabindex')).to.equal('0');
+          expect(el.tabIndex).to.equal(0);
+        } else if (mode === 2) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          await el.updateComplete;
+          expect(el.getAttribute('aria-hidden')).to.equal('true');
+          expect(el.getAttribute('tabindex')).to.equal('-1');
+        } else if (mode === 3) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel name="n-${suffix}"></nile-nav-tab-panel>`
+          );
+          expect(el.getAttribute('role')).to.equal('tabpanel');
+        } else if (mode === 4) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          const base = el.shadowRoot!.querySelector('[part="base"]');
+          expect(base).to.exist;
+          expect(base!.classList.contains('nav-tab-panel')).to.be.true;
+        } else if (mode === 5) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel active></nile-nav-tab-panel>`
+          );
+          await el.updateComplete;
+          expect(el.shadowRoot!.querySelector('.nav-tab-panel--active')).to.exist;
+        } else if (mode === 6) {
+          const show = i % 2 === 0;
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          el.active = show;
+          await el.updateComplete;
+          expect(getComputedStyle(el).display).to.equal(show ? 'block' : 'none');
+        } else if (mode === 7) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel active>C-${suffix}</nile-nav-tab-panel>`
+          );
+          await el.updateComplete;
+          expect(el.shadowRoot!.querySelector('slot')).to.exist;
+          expect(el.textContent).to.contain(`C-${suffix}`);
+        } else if (mode === 8) {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          await el.updateComplete;
+          expect(el.id).to.match(/^nile-nav-tab-panel-\d+$/);
+        } else {
+          const el = await fixture<NileNavTabPanel>(
+            html`<nile-nav-tab-panel></nile-nav-tab-panel>`
+          );
+          el.setAttribute('name', `bulk-${suffix}`);
+          await el.updateComplete;
+          expect(el.name).to.equal(`bulk-${suffix}`);
+        }
+      });
+    }
+  });
+});
+