@aquera/nile-elements 2.0.9 → 2.0.11

package/dist/src/nile-app-shell/nile-app-shell.test.js

@@ -1,11 +1,13 @@
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import { setViewport } from '@web/test-runner-commands';
 import './nile-app-shell';
 import '../nile-app-shell-nav-toggle/nile-app-shell-nav-toggle';
+import '../nile-nav-tab-group/nile-nav-tab-group';
+import '../nile-nav-tab/nile-nav-tab';
 import '../nile-side-bar/nile-side-bar';
-/**
- * The shell derives its chrome from its own width, so most tests size the host
- * explicitly and wait for the ResizeObserver to land.
- */
+// renderGlyph fails silently on an unknown name, so the glyph tests need the real element.
+import '@aquera/nile-glyph/nile-glyph';
+// Sizes the host explicitly and waits for the ResizeObserver to land.
 const sized = async (width) => {
     const el = await fixture(html `
     <nile-app-shell style="width: ${width}px; height: 600px;">
@@ -34,11 +36,7 @@ const overlaying = async (width) => {
     await waitUntil(() => el.hasAttribute('has-panel'));
     return el;
 };
-/**
- * The side-nav track animates, so a width read straight after a state change
- * catches the row mid-transition and sees room that is about to go away. Waits
- * for two consecutive frames to agree before geometry is asserted.
- */
+// Waits for two consecutive frames to agree before geometry is asserted.
 const settled = async (el) => {
     const section = el.shadowRoot.querySelector('.content-section');
     let last = -1;
@@ -85,6 +83,17 @@ describe('NileAppShell — regions', () => {
         expect(part(el, 'container').contains(bar)).to.be.false;
     });
 });
+/**
+ * The name the control's glyph asks for, once nile-glyph has resolved it to
+ * real path data. An unknown name leaves an empty <svg>, so this fails loudly
+ * rather than letting a missing icon ship as a blank box.
+ */
+const drawnGlyph = async (control) => {
+    const glyph = control.querySelector('nile-glyph');
+    expect(glyph, 'the control renders a nile-glyph').to.exist;
+    await waitUntil(() => (glyph.shadowRoot?.querySelector('svg')?.childElementCount ?? 0) > 0, `${glyph.getAttribute('name')} draws no paths — is it in the nile-glyph set?`);
+    return glyph.getAttribute('name');
+};
 describe('NileAppShell — nav', () => {
     it('6. collapseNav()/expandNav() drive the rail and reflect it', async () => {
         const el = await sized(1440);
@@ -134,6 +143,13 @@ describe('NileAppShell — nav', () => {
         expect(button.disabled).to.be.true;
         expect(el.hasAttribute('rail')).to.be.true;
     });
+    it('62. the built-in toggle draws a real glyph in both states', async () => {
+        const el = await sized(1440);
+        expect(await drawnGlyph(part(el, 'nav-toggle'))).to.equal('ng-panel-left');
+        el.collapseNav();
+        await el.updateComplete;
+        expect(await drawnGlyph(part(el, 'nav-toggle'))).to.equal('ng-panel-right');
+    });
 });
 describe('NileAppShell — Ask Aquera panel', () => {
     it('11. openPanel()/closePanel() drive panel-open', async () => {
@@ -173,7 +189,7 @@ describe('NileAppShell — Ask Aquera panel', () => {
             expect(el.getAttribute('panel-mode')).to.equal('docked');
             const container = el.shadowRoot.querySelector('.container');
             const panel = el.shadowRoot.querySelector('.panel');
-            // Beside the page, not over it.
+            // The page sits beside the panel, not under it.
             expect(container.getBoundingClientRect().right).to.be.at.most(Math.round(panel.getBoundingClientRect().left) + 1);
         }
     });
@@ -263,8 +279,7 @@ describe('NileAppShellNavToggle', () => {
     `);
         const toggle = el.querySelector('nile-app-shell-nav-toggle');
         await waitUntil(() => toggle.appShell === el);
-        // The control is a nile-button, so the raw <button> is a shadow root
-        // deeper. The part is the contract either way.
+        // The control is a nile-button; the part is the contract either way.
         const button = () => toggle.shadowRoot.querySelector('[part~="button"]');
         button().click();
         await el.updateComplete;
@@ -290,13 +305,27 @@ describe('NileAppShellNavToggle', () => {
         await toggle.updateComplete;
         expect(toggle.shadowRoot.querySelector('[part~="button"]').disabled).to.be.true;
     });
+    it('63. draws a real glyph in both states', async () => {
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px;" no-nav-toggle>
+        <nav slot="side-nav">nav</nav>
+        <nile-app-shell-nav-toggle slot="top-bar"></nile-app-shell-nav-toggle>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        const toggle = el.querySelector('nile-app-shell-nav-toggle');
+        await waitUntil(() => toggle.appShell === el);
+        const button = () => toggle.shadowRoot.querySelector('[part~="button"]');
+        expect(await drawnGlyph(button())).to.equal('ng-panel-left');
+        button().click();
+        await el.updateComplete;
+        await toggle.updateComplete;
+        expect(await drawnGlyph(button())).to.equal('ng-panel-right');
+    });
 });
-/**
- * The row is nav + container + aside + panel. When the sum of what a route
- * mounts exceeds the shell, something has to give — and the one thing that may
- * not give is the row overflowing into :host's clip, which silently cuts the
- * panel off the right edge.
- */
+// The nav track is theme-dependent, so tests load one token pair or the other explicitly.
+const ENTERPRISE_NAV = '--nile-width-240px: 240px; --nile-width-70px: 70px;';
+const NXTGEN_NAV = '--ng-spacing-296: 296px; --ng-spacing-68: 68px;';
 describe('NileAppShell — the content row never overflows', () => {
     const withAside = async (width) => {
         const el = await fixture(html `
@@ -317,8 +346,7 @@ describe('NileAppShell — the content row never overflows', () => {
         return (section.scrollWidth - Math.round(section.getBoundingClientRect().width));
     };
     it('23. tightens the side columns rather than covering the page', async () => {
-        // 232px short of what the row prefers, so the panel and the aside give
-        // some width back — and the page still sits beside the panel, not under.
+        // Short of what the row prefers, so the panel and aside give width back while the page stays beside the panel.
         const el = await withAside(1500);
         await waitUntil(() => el.navLocked);
         await settled(el);
@@ -367,11 +395,77 @@ describe('NileAppShell — the content row never overflows', () => {
         expect(container.getBoundingClientRect().width).to.be.at.least(640);
         expect(overflow(el)).to.equal(0);
     });
+    // Pins the stylesheet defaults to the JS geometry fallbacks so the two copies cannot drift apart.
+    it('71. the stylesheet defaults still match the JS geometry fallbacks', async () => {
+        const el = await fixture(html `
+      <nile-app-shell
+        style="width: 1440px; height: 600px; --nile-spacing-xs: 4px;"
+      >
+        <nav slot="side-nav">nav</nav>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await el.updateComplete;
+        const value = (name) => parseFloat(getComputedStyle(el).getPropertyValue(name));
+        // No theme sheet here, so the nav track falls to its own enterprise-pair literals, which is what _geometry() carries too.
+        expect(value('--nile-app-shell-side-nav-width')).to.equal(240);
+        expect(value('--nile-app-shell-side-nav-rail-width')).to.equal(70);
+        expect(value('--nile-app-shell-gutter')).to.equal(4);
+        expect(value('--nile-app-shell-content-min-width')).to.equal(640);
+        expect(value('--nile-app-shell-aside-width')).to.equal(320);
+        expect(value('--nile-app-shell-panel-width')).to.equal(480);
+    });
+    // The nav track mirrors nile-side-bar's token expressions and resolves per theme.
+    it('78. resolves the nav track per theme, as nile-side-bar does', async () => {
+        const track = async (tokens) => {
+            const el = await fixture(html `
+        <nile-app-shell style="width: 1440px; height: 600px; ${tokens}">
+          <nav slot="side-nav">nav</nav>
+          <p>page</p>
+        </nile-app-shell>
+      `);
+            await el.updateComplete;
+            const read = (name) => parseFloat(getComputedStyle(el).getPropertyValue(name));
+            return [
+                read('--nile-app-shell-side-nav-width'),
+                read('--nile-app-shell-side-nav-rail-width'),
+            ];
+        };
+        expect(await track('--nile-width-240px: 240px; --nile-width-70px: 70px;'), 'enterprise').to.deep.equal([240, 70]);
+        expect(await track('--ng-spacing-296: 296px; --ng-spacing-68: 68px;'), 'nxtgen').to.deep.equal([296, 68]);
+    });
+    // The nav rails at the row's own theme-dependent width requirement (enterprise 1368, nxtgen 1424), with docked-rail-breakpoint at 0 so the measured value governs.
+    it('72. rails the nav at the row’s own width requirement, not a gutter early', async () => {
+        const at = async (width, tokens = ENTERPRISE_NAV) => {
+            const el = await fixture(html `
+        <nile-app-shell
+          style="width: ${width}px; height: 600px; ${tokens}"
+          docked-rail-breakpoint="0"
+        >
+          <nav slot="side-nav">nav</nav>
+          <p>page</p>
+          <div slot="panel">assistant</div>
+        </nile-app-shell>
+      `);
+            await waitUntil(() => el.hasAttribute('has-panel'));
+            el.openPanel();
+            await el.updateComplete;
+            await settled(el);
+            return el.navLocked;
+        };
+        // Exactly the requirement: the row fits, so the nav keeps its width.
+        expect(await at(1368)).to.be.false;
+        // One pixel under: the track is what the row cannot afford.
+        expect(await at(1367)).to.be.true;
+        expect(await at(1370)).to.be.false;
+        // NxtGen's wider track moves the same boundary up by 56px, following whatever the side bar measures.
+        expect(await at(1424, NXTGEN_NAV)).to.be.false;
+        expect(await at(1423, NXTGEN_NAV)).to.be.true;
+        // And the enterprise boundary is comfortably inside NxtGen's requirement.
+        expect(await at(1368, NXTGEN_NAV)).to.be.true;
+    });
 });
-/**
- * An empty flex item is not a free one: it still takes the row's gap before
- * it, which is enough to pull the bar's content short of its padding edge.
- */
+// An empty flex item still takes the row's gap, pulling the bar's content short of its padding edge.
 describe('NileAppShell — the top bar reaches its padding edge', () => {
     it('28. an empty actions group reserves no gap', async () => {
         const el = await sized(1440);
@@ -400,12 +494,43 @@ describe('NileAppShell — the top bar reaches its padding edge', () => {
         expect(getComputedStyle(actions).display).to.not.equal('none');
         expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
     });
+    // The rule that separates the nav toggle from the header's content follows both a filled slot and a title block.
+    it('76. draws the toggle rule for a title block, not just a filled slot', async () => {
+        const rule = (el) => part(el, 'rule');
+        const slotted = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => slotted.hasAttribute('has-top-bar'));
+        expect(rule(slotted)).to.exist;
+        // The same heading through pageTitle, top-bar slot empty.
+        const titled = await fixture(html `
+      <nile-app-shell
+        style="width: 1440px; height: 600px;"
+        pageTitle="Applications"
+      >
+        <nav slot="side-nav">nav</nav>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await titled.updateComplete;
+        expect(titled.hasAttribute('has-top-bar')).to.be.true;
+        expect(rule(titled), 'a title block earns the rule too').to.exist;
+        // Neither: the toggle stands alone, so there is nothing to separate.
+        const bare = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nav slot="side-nav">nav</nav>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await bare.updateComplete;
+        expect(rule(bare)).to.be.null;
+    });
 });
-/**
- * The Ask door moved onto the shell when nile-app-shell-header became a slot.
- * It is the one control in the bar that cannot be slotted markup: it turns on
- * whether a panel is mounted for this route, and it calls openPanel().
- */
+// The built-in Ask button turns on whether a panel is mounted for this route and calls openPanel().
 describe('NileAppShell — the built-in Ask button', () => {
     const ask = (el) => part(el, 'ask');
     it('30. opens the panel', async () => {
@@ -450,5 +575,749 @@ describe('NileAppShell — the built-in Ask button', () => {
         expect(getComputedStyle(actions).display).to.not.equal('none');
         expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
     });
+    // The shell draws its icon controls as bare glyphs via ::part(base), overriding nile-button's circle and ghost surface.
+    const utilityBase = (el, name) => part(el, name).shadowRoot.querySelector('[part~="base"]');
+    it('35. draws its icon controls with no resting surface', async () => {
+        const el = await sized(1440);
+        el.openPanel();
+        await el.updateComplete;
+        for (const name of ['nav-toggle', 'panel-close']) {
+            const base = utilityBase(el, name);
+            expect(getComputedStyle(base).backgroundColor).to.equal('rgba(0, 0, 0, 0)');
+        }
+    });
+    it('36. sizes its icon controls to the utility box, not the button circle', async () => {
+        const el = await sized(1440);
+        el.openPanel();
+        await el.updateComplete;
+        for (const name of ['nav-toggle', 'panel-close']) {
+            const box = utilityBase(el, name).getBoundingClientRect();
+            expect(box.width).to.equal(32);
+            expect(box.height).to.equal(32);
+        }
+    });
+    it('37. holds the panel back control until panelBack asks for it', async () => {
+        const el = await sized(1440);
+        el.openPanel();
+        await el.updateComplete;
+        const mark = el.shadowRoot.querySelector('.panel-mark');
+        // Not rendered at all in the root view, so no stylesheet override can surface it.
+        expect(part(el, 'panel-back')).to.not.exist;
+        expect(getComputedStyle(mark).display).to.not.equal('none');
+        el.panelBack = true;
+        await el.updateComplete;
+        const back = part(el, 'panel-back');
+        expect(back).to.exist;
+        expect(getComputedStyle(back).display).to.not.equal('none');
+        // The back control stands where the brand mark stands in the root view.
+        expect(getComputedStyle(mark).display).to.equal('none');
+    });
+    it('38. emits nile-panel-back and takes its label from panelBackLabel', async () => {
+        const el = await sized(1440);
+        el.panelBack = true;
+        el.panelBackLabel = 'Back to chats';
+        el.openPanel();
+        await el.updateComplete;
+        const back = part(el, 'panel-back');
+        expect(back.getAttribute('aria-label')).to.equal('Back to chats');
+        const went = oneEvent(el, 'nile-panel-back');
+        back.click();
+        await went;
+        // The shell keeps no view stack, so going back leaves the panel open.
+        expect(el.panelOpen).to.be.true;
+    });
+    it('81. goBackPanel() emits nile-panel-back, and goBack() stays its alias', async () => {
+        const el = await sized(1440);
+        const named = oneEvent(el, 'nile-panel-back');
+        el.goBackPanel();
+        expect(await named).to.exist;
+        // Deprecated, but still the same event: existing callers keep working.
+        const aliased = oneEvent(el, 'nile-panel-back');
+        el.goBack();
+        expect(await aliased).to.exist;
+    });
+});
+describe('NileAppShell — the tab strip', () => {
+    /** The strip is slot-driven, so it needs something in the slot to exist. */
+    const tabbed = async () => {
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px; ${HEADER_TOKENS}">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <nile-nav-tab-group slot="tabs">
+          <nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
+          <nile-nav-tab slot="nav" panel="approvals">Approvals</nile-nav-tab>
+        </nile-nav-tab-group>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => el.hasAttribute('has-tabs'));
+        return el;
+    };
+    const strip = (el) => el.shadowRoot.querySelector('.tabs');
+    it('39. mounts the strip for a filled slot', async () => {
+        const el = await tabbed();
+        expect(el.tabsVisible).to.be.true;
+        expect(getComputedStyle(strip(el)).display).to.not.equal('none');
+    });
+    it('40. noTabs hides the strip without emptying the slot', async () => {
+        const el = await tabbed();
+        el.noTabs = true;
+        await el.updateComplete;
+        expect(el.tabsVisible).to.be.false;
+        expect(getComputedStyle(strip(el)).display).to.equal('none');
+        // The slot is still filled — the strip is switched off, not unmounted — so the assigned element proves the content stays.
+        expect(el.querySelector('nile-nav-tab-group')).to.exist;
+        const slot = strip(el).querySelector('slot');
+        expect(slot.assignedElements()).to.have.lengthOf(1);
+        el.noTabs = false;
+        await el.updateComplete;
+        expect(el.tabsVisible).to.be.true;
+        expect(getComputedStyle(strip(el)).display).to.not.equal('none');
+    });
+    // has-tabs advertises the visible strip, not the filled slot, matching has-panel and has-ask.
+    it('68. has-tabs follows the visible strip, not the filled slot', async () => {
+        // Slotted, not switched off: the strip is up and the flag is on.
+        const el = await tabbed();
+        expect(el.tabsVisible).to.be.true;
+        expect(el.hasAttribute('has-tabs')).to.be.true;
+        // Slotted, switched off: the slot stays filled, the flag goes with the strip.
+        el.noTabs = true;
+        await el.updateComplete;
+        expect(el.querySelector('nile-nav-tab-group')).to.exist;
+        expect(el.hasAttribute('has-tabs')).to.be.false;
+        expect(getComputedStyle(strip(el)).display).to.equal('none');
+        // And back, so the flag is not a one-way latch.
+        el.noTabs = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('has-tabs')).to.be.true;
+        // Nothing slotted: no strip, no flag, whatever noTabs says.
+        const bare = await sized(1440);
+        await settled(bare);
+        expect(bare.hasAttribute('has-tabs')).to.be.false;
+        bare.noTabs = true;
+        await bare.updateComplete;
+        expect(bare.hasAttribute('has-tabs')).to.be.false;
+    });
+    it('41. leaves the strip off when the slot is empty', async () => {
+        const el = await sized(1440);
+        await settled(el);
+        expect(el.hasAttribute('has-tabs')).to.be.false;
+        expect(el.tabsVisible).to.be.false;
+    });
+    it('77. sizes bare slotted tab controls to their labels, not the strip', async () => {
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1176px; height: 600px; ${HEADER_TOKENS}">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <button slot="tabs" id="short">A</button>
+        <button slot="tabs" id="long">A considerably longer tab label</button>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => el.hasAttribute('has-tabs'));
+        await settled(el);
+        const short = el.querySelector('#short').getBoundingClientRect().width;
+        const long = el.querySelector('#long').getBoundingClientRect().width;
+        // Stretched, they would be equal; sized to content they are not close.
+        expect(long).to.be.greaterThan(short * 2);
+    });
+    it('43. leaves the slotted strip one rule, edge to edge', async () => {
+        const el = await tabbed();
+        const group = el.querySelector('nile-nav-tab-group');
+        const groupStyle = getComputedStyle(group);
+        expect(groupStyle.getPropertyValue('--track-width').trim()).to.equal('0px');
+        expect(groupStyle.alignSelf).to.equal('flex-end');
+        // The region's rule is as wide as the container it closes, padding and all.
+        const container = el.shadowRoot.querySelector('.container');
+        const stripWidth = strip(el).getBoundingClientRect().width;
+        const inner = container.getBoundingClientRect().width -
+            parseFloat(getComputedStyle(container).borderLeftWidth) -
+            parseFloat(getComputedStyle(container).borderRightWidth);
+        expect(Math.round(stripWidth)).to.equal(Math.round(inner));
+        // The group is wholly inside the region, and ends where the rule is.
+        const strippedBottom = strip(el).getBoundingClientRect().bottom;
+        const groupBottom = group.getBoundingClientRect().bottom;
+        expect(strippedBottom - groupBottom).to.be.lessThan(2);
+    });
+    // The Header Bar draws no rule of its own; the one divider belongs to the tab rail, so switching the strip off leaves the header with no rule.
+    it('42. draws the header rule on the strip only, never on the bar', async () => {
+        const el = await tabbed();
+        const bar = el.shadowRoot.querySelector('.container > .top-bar');
+        expect(parseFloat(getComputedStyle(bar).borderBottomWidth)).to.equal(0);
+        expect(parseFloat(getComputedStyle(strip(el)).borderBottomWidth)).to.be.greaterThan(0);
+        expect(getComputedStyle(strip(el)).borderBottomColor).to.not.equal('rgba(0, 0, 0, 0)');
+        // No tabs, no rule anywhere in the header block.
+        el.noTabs = true;
+        await el.updateComplete;
+        expect(parseFloat(getComputedStyle(bar).borderBottomWidth)).to.equal(0);
+    });
+    // The bar and the strip sit flush, with the stroke as the separation, not space.
+    it('62. leaves no vertical gap between the bar and the strip', async () => {
+        const el = await tabbed();
+        const bar = el.shadowRoot.querySelector('.container > .top-bar');
+        const gap = strip(el).getBoundingClientRect().top -
+            bar.getBoundingClientRect().bottom;
+        expect(Math.abs(gap)).to.be.lessThan(0.5);
+    });
+});
+// The test page loads no theme sheet, so the header fixtures carry the nxtgen token values the title block and tab row read.
+const HEADER_TOKENS = [
+    '--ng-spacing-none: 0px',
+    '--ng-border-width-1: 1px',
+    '--ng-colors-border-secondary: #E9EAEB',
+    '--ng-spacing-xxs: 2px',
+    '--ng-spacing-xs: 4px',
+    '--ng-spacing-md: 8px',
+    '--ng-spacing-lg: 12px',
+    '--ng-spacing-xl: 16px',
+    '--ng-spacing-3xl: 24px',
+    '--ng-font-size-text-xs: 12px',
+    '--ng-line-height-text-xs: 18px',
+    '--ng-font-size-text-sm: 14px',
+    '--ng-line-height-text-sm: 20px',
+    '--ng-font-size-text-md: 16px',
+    '--ng-line-height-text-md: 24px',
+].join('; ');
+// A shell carrying whatever header axes a test asks for; an unset axis is the empty string, meaning "absent".
+const header = async (axes = {}) => {
+    const el = await fixture(html `
+    <nile-app-shell
+      style="width: 1176px; height: 800px; ${HEADER_TOKENS}"
+      .pageTitle=${axes.pageTitle ?? ''}
+      .description=${axes.description ?? ''}
+      .badge=${axes.badge ?? ''}
+      leading=${axes.leading ?? 'none'}
+      .backLabel=${axes.backLabel ?? 'Back'}
+    >
+      <nav slot="side-nav">nav</nav>
+      ${axes.leading === 'app-icon'
+        ? html `<span slot="app-icon" id="mark">A</span>`
+        : ''}
+      ${axes.tabs
+        ? html `<nile-nav-tab-group slot="tabs">
+            <nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
+            <nile-nav-tab slot="nav" panel="approvals">Approvals</nile-nav-tab>
+          </nile-nav-tab-group>`
+        : ''}
+      <p>page</p>
+    </nile-app-shell>
+  `);
+    if (axes.tabs)
+        await waitUntil(() => el.hasAttribute('has-tabs'));
+    await el.updateComplete;
+    return el;
+};
+// The header title block: the shell's own heading, the Leading axis, the badge and the description line.
+describe('NileAppShell — the header title block', () => {
+    it('44. draws no title block at all until an axis asks for one', async () => {
+        const el = await header();
+        expect(el.leading).to.equal('none');
+        expect(part(el, 'title-area')).to.be.null;
+        expect(part(el, 'page-title')).to.be.null;
+        expect(part(el, 'description')).to.be.null;
+        expect(part(el, 'badge')).to.be.null;
+        expect(el.hasAttribute('has-description')).to.be.false;
+    });
+    // description and badge are modifiers on the page title, so neither mounts the title block by itself.
+    it('73. does not mount a title block for a description or badge alone', async () => {
+        for (const axes of [
+            { description: 'Manage the apps connected to this tenant' },
+            { badge: '94 apps' },
+            { description: 'Manage the apps', badge: '94 apps' },
+        ]) {
+            const el = await header(axes);
+            const label = JSON.stringify(axes);
+            expect(part(el, 'title-area'), label).to.be.null;
+            expect(part(el, 'description'), label).to.be.null;
+            expect(part(el, 'badge'), label).to.be.null;
+            // And no height is reserved for the line that cannot render.
+            expect(el.hasAttribute('has-description'), label).to.be.false;
+        }
+    });
+    it('74. brings both back as soon as there is a title to hang them on', async () => {
+        const el = await header({
+            description: 'Manage the apps connected to this tenant',
+            badge: '94 apps',
+        });
+        expect(part(el, 'title-area')).to.be.null;
+        el.pageTitle = 'Applications';
+        await el.updateComplete;
+        expect(part(el, 'title-area')).to.exist;
+        expect(part(el, 'description')).to.exist;
+        expect(part(el, 'badge')).to.exist;
+        expect(el.hasAttribute('has-description')).to.be.true;
+    });
+    // Leading is the exception: a back control stands on its own but brings no empty title stack.
+    it('75. mounts a leading control on its own, without an empty title stack', async () => {
+        const el = await header({ leading: 'back' });
+        expect(part(el, 'title-area')).to.exist;
+        expect(part(el, 'back')).to.exist;
+        expect(part(el, 'page-title')).to.be.null;
+        expect(el.shadowRoot.querySelector('.title-stack')).to.be.null;
+        expect(el.shadowRoot.querySelector('.title-row')).to.be.null;
+    });
+    it('45. renders pageTitle as the header’s own heading', async () => {
+        const el = await header({ pageTitle: 'Applications' });
+        const title = part(el, 'page-title');
+        expect(title).to.exist;
+        // A heading by role, not a hard-coded h1, so the page keeps control of its outline; level 1 by default.
+        expect(title.getAttribute('role')).to.equal('heading');
+        expect(el.headingLevel).to.equal(1);
+        expect(title.getAttribute('aria-level')).to.equal('1');
+        expect(title.textContent.trim()).to.equal('Applications');
+        expect(part(el, 'title-area')).to.exist;
+    });
+    // Birat's a11y review: a page with its own h1 needs the shell title one level down.
+    it('79. takes its heading level from the headingLevel property and attribute', async () => {
+        const el = await header({ pageTitle: 'Applications' });
+        el.headingLevel = 2;
+        await el.updateComplete;
+        const title = part(el, 'page-title');
+        expect(title.getAttribute('aria-level')).to.equal('2');
+        expect(el.getAttribute('headinglevel')).to.equal('2');
+        expect(title.textContent.trim()).to.equal('Applications');
+        const marked = await fixture(html `
+      <nile-app-shell pageTitle="Applications" headingLevel="3">
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await marked.updateComplete;
+        expect(marked.headingLevel).to.equal(3);
+        expect(part(marked, 'page-title').getAttribute('aria-level')).to.equal('3');
+    });
+    it('80. clamps an invalid heading level to a safe aria-level', async () => {
+        const el = await header({ pageTitle: 'Applications' });
+        const cases = [
+            [0, '1'],
+            [-3, '1'],
+            [7, '6'],
+            [2.7, '2'],
+            [NaN, '1'],
+            ['abc', '1'],
+            [undefined, '1'],
+        ];
+        for (const [value, expected] of cases) {
+            el.headingLevel = value;
+            await el.updateComplete;
+            expect(part(el, 'page-title').getAttribute('aria-level'), String(value)).to.equal(expected);
+        }
+        // From markup too: a non-numeric attribute still leaves a level-1 heading.
+        const marked = await fixture(html `
+      <nile-app-shell pageTitle="Applications" headingLevel="nope">
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await marked.updateComplete;
+        expect(part(marked, 'page-title').getAttribute('aria-level')).to.equal('1');
+        expect(part(marked, 'page-title').textContent.trim()).to.equal('Applications');
+    });
+    // The title block renders before the top-bar slot, so a page slotting its own title keeps its output.
+    it('46. renders the block before whatever the page slots into top-bar', async () => {
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1176px; height: 800px;" pageTitle="Apps">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar" id="own">the page’s own bar</span>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await el.updateComplete;
+        const area = part(el, 'title-area');
+        const slot = el.shadowRoot.querySelector('slot[name="top-bar"]');
+        expect(el.querySelector('#own').assignedSlot).to.equal(slot);
+        /* eslint-disable-next-line no-bitwise */
+        const areaIsFirst = area.compareDocumentPosition(slot) & Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(areaIsFirst).to.be.greaterThan(0);
+    });
+    it('47. mounts the top bar for a title block on its own', async () => {
+        const el = await fixture(html `
+      <nile-app-shell
+        style="width: 1176px; height: 800px;"
+        pageTitle="Applications"
+        no-nav-toggle
+      >
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await el.updateComplete;
+        // Nothing is slotted anywhere, and there is no nav toggle to mount it.
+        expect(el.hasAttribute('has-side-nav')).to.be.false;
+        expect(el.hasAttribute('has-top-bar')).to.be.true;
+        expect(part(el, 'page-title')).to.exist;
+    });
+    it('48. renders a badge after the title, and only when set', async () => {
+        const plain = await header({ pageTitle: 'Applications' });
+        expect(part(plain, 'badge')).to.be.null;
+        const el = await header({ pageTitle: 'Applications', badge: '12 active' });
+        const badge = part(el, 'badge');
+        expect(badge).to.exist;
+        expect(badge.textContent.trim()).to.equal('12 active');
+        /* eslint-disable-next-line no-bitwise */
+        const titleIsFirst = part(el, 'page-title').compareDocumentPosition(badge) &
+            Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(titleIsFirst).to.be.greaterThan(0);
+    });
+    // The badge's surface tokens must resolve on both the enterprise and nxtgen sheets, so each test pins one sheet on its own.
+    const badged = (tokens) => fixture(html `
+      <nile-app-shell
+        style="width: 1176px; height: 800px; ${tokens}"
+        pageTitle="Applications"
+        badge="Beta"
+      >
+        <nav slot="side-nav">nav</nav>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    it('69. resolves the badge on the enterprise sheet alone', async () => {
+        const el = await badged([
+            '--nile-border-width-1: 1px',
+            '--nile-colors-neutral-100: #FAFAFA',
+            '--nile-colors-neutral-400: #E6E9EB',
+            '--nile-colors-dark-500: #636363',
+            // The ink the badge must not fall back to by inheriting the title's.
+            '--nile-colors-dark-900: #000000',
+        ].join('; '));
+        const style = getComputedStyle(part(el, 'badge'));
+        expect(style.backgroundColor).to.equal('rgb(250, 250, 250)');
+        expect(style.borderTopColor).to.equal('rgb(230, 233, 235)');
+        expect(style.borderTopWidth).to.equal('1px');
+        expect(style.color).to.equal('rgb(99, 99, 99)');
+    });
+    it('70. resolves the badge on the nxtgen sheet alone', async () => {
+        const el = await badged([
+            '--ng-border-width-1: 1px',
+            '--ng-componentcolors-utility-gray-50: #FAFAFAFF',
+            '--ng-componentcolors-utility-gray-200: #E9EAEBFF',
+            '--ng-componentcolors-utility-gray-700: #414651FF',
+            '--ng-colors-text-primary-900: #181D27FF',
+        ].join('; '));
+        const style = getComputedStyle(part(el, 'badge'));
+        expect(style.backgroundColor).to.equal('rgb(250, 250, 250)');
+        expect(style.borderTopColor).to.equal('rgb(233, 234, 235)');
+        expect(style.borderTopWidth).to.equal('1px');
+        expect(style.color).to.equal('rgb(65, 70, 81)');
+    });
+    it('49. renders a description line, and reserves nothing without one', async () => {
+        const off = await header({ pageTitle: 'Applications' });
+        expect(off.hasAttribute('has-description')).to.be.false;
+        expect(part(off, 'description')).to.be.null;
+        const el = await header({
+            pageTitle: 'Applications',
+            description: 'Manage the apps connected to this tenant',
+        });
+        const line = part(el, 'description');
+        expect(el.hasAttribute('has-description')).to.be.true;
+        expect(line).to.exist;
+        expect(line.textContent.trim()).to.equal('Manage the apps connected to this tenant');
+        // Clearing the string takes the axis back off.
+        el.description = '';
+        await el.updateComplete;
+        expect(el.hasAttribute('has-description')).to.be.false;
+        expect(part(el, 'description')).to.be.null;
+    });
+    it('50. leading defaults to none and draws neither control', async () => {
+        const el = await header({ pageTitle: 'Applications' });
+        expect(el.leading).to.equal('none');
+        expect(part(el, 'back')).to.be.null;
+        expect(part(el, 'app-icon')).to.be.null;
+        expect(el.shadowRoot.querySelector('.crumb-divider')).to.be.null;
+    });
+    // Leading="back" draws a breadcrumb: glyph, previous-page label, slash, then the page title.
+    it('51. leading="back" draws glyph, label, divider, then the title', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const back = part(el, 'back');
+        const divider = el.shadowRoot.querySelector('.crumb-divider');
+        const title = part(el, 'page-title');
+        expect(back).to.exist;
+        expect(back.tagName).to.equal('BUTTON');
+        expect(back.getAttribute('type')).to.equal('button');
+        expect(divider).to.exist;
+        expect(divider.getAttribute('aria-hidden')).to.equal('true');
+        // The icons go through nile-glyph, so assert the glyph, not an <svg>.
+        const chevron = back.querySelector('nile-glyph');
+        expect(chevron).to.exist;
+        expect(chevron.getAttribute('name')).to.equal('ng-chevron-left');
+        expect(divider.querySelector('nile-glyph').getAttribute('name')).to.equal('ng-slash');
+        // glyph before label, inside the control.
+        const label = back.querySelector('span');
+        /* eslint-disable-next-line no-bitwise */
+        const glyphIsFirst = chevron.compareDocumentPosition(label) & Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(glyphIsFirst).to.be.greaterThan(0);
+        // control, then divider, then title.
+        for (const [first, second] of [
+            [back, divider],
+            [divider, title],
+        ]) {
+            /* eslint-disable-next-line no-bitwise */
+            const ordered = first.compareDocumentPosition(second) &
+                Node.DOCUMENT_POSITION_FOLLOWING;
+            expect(ordered).to.be.greaterThan(0);
+        }
+        // nile-glyph is not registered on this test page, so the divider has no box to measure; only that the leading axis has not switched it off.
+        expect(back.getBoundingClientRect().width).to.be.greaterThan(0);
+        expect(getComputedStyle(divider).display).to.not.equal('none');
+    });
+    // The slash separates the back control from the page title, so there is nothing to point at until a title is set.
+    it('51b. leading="back" without a title draws no divider', async () => {
+        const el = await header({ leading: 'back' });
+        expect(part(el, 'back')).to.exist;
+        expect(el.shadowRoot.querySelector('.crumb-divider')).to.be.null;
+        el.pageTitle = 'Applications';
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('.crumb-divider')).to.exist;
+    });
+    it('52. takes the previous-page label from backLabel', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        // The label is the control's accessible name, so it lives in the text.
+        expect(part(el, 'back').textContent.trim()).to.equal('Back');
+        el.backLabel = 'Integrations';
+        await el.updateComplete;
+        expect(part(el, 'back').textContent.trim()).to.equal('Integrations');
+    });
+    // The shell owns no history, so the control only announces the press; the page navigates itself.
+    it('53. the back control emits nile-header-back, as do goBackHeader() and goBackPage()', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const clicked = oneEvent(el, 'nile-header-back');
+        part(el, 'back').click();
+        const fromClick = await clicked;
+        expect(fromClick).to.exist;
+        const called = oneEvent(el, 'nile-header-back');
+        el.goBackHeader();
+        expect(await called).to.exist;
+        // goBackPage() is the deprecated alias of goBackHeader(): same event.
+        const aliased = oneEvent(el, 'nile-header-back');
+        el.goBackPage();
+        expect(await aliased).to.exist;
+        // It is the page's event, not the panel's: nothing about the panel moves.
+        expect(el.panelOpen).to.be.false;
+    });
+    // The Description axis must not move when the Leading axis changes, so the description is always the stack's second line under the title.
+    it('63. aligns the description to the page title in every leading mode', async () => {
+        for (const leading of ['none', 'back', 'app-icon']) {
+            const el = await header({
+                pageTitle: 'Applications',
+                description: 'Manage the apps connected to this tenant',
+                leading,
+            });
+            const title = part(el, 'page-title').getBoundingClientRect();
+            const description = part(el, 'description').getBoundingClientRect();
+            expect(Math.round(description.left), leading).to.equal(Math.round(title.left));
+        }
+    });
+    // Neither leading control lives in the title row, so neither can displace the title away from the description.
+    it('64. renders both leading modes beside the title stack, not in the row', async () => {
+        const backShell = await header({ pageTitle: 'Applications', leading: 'back' });
+        const iconShell = await header({
+            pageTitle: 'Applications',
+            leading: 'app-icon',
+        });
+        for (const [el, name] of [
+            [backShell, 'back'],
+            [iconShell, 'app-icon'],
+        ]) {
+            const control = part(el, name);
+            const row = el.shadowRoot.querySelector('.title-row');
+            const area = part(el, 'title-area');
+            expect(row.contains(control), name).to.be.false;
+            expect(area.contains(control), name).to.be.true;
+        }
+        // The breadcrumb divider travels with the control it belongs to.
+        const divider = backShell.shadowRoot.querySelector('.crumb-divider');
+        const row = backShell.shadowRoot.querySelector('.title-row');
+        expect(row.contains(divider)).to.be.false;
+    });
+    // The leading element sits on the title's row, and its offset does not move when a description appears.
+    it('65. sits the leading element on the title row, description or not', async () => {
+        for (const leading of ['back', 'app-icon']) {
+            for (const description of ['', 'Manage the apps connected here']) {
+                const el = await header({
+                    pageTitle: 'Applications',
+                    leading,
+                    description,
+                });
+                const title = part(el, 'page-title').getBoundingClientRect();
+                const box = el.shadowRoot.querySelector('.leading');
+                const label = `${leading} description=${!!description}`;
+                // The line box is the title's own, and it starts where the title does.
+                expect(Math.round(box.getBoundingClientRect().top), label).to.equal(Math.round(title.top));
+                expect(Math.round(box.getBoundingClientRect().height), label).to.equal(24);
+            }
+        }
+    });
+    it('66. centres a 20px app icon in the 24px title row, two pixels down', async () => {
+        const el = await header({
+            pageTitle: 'Applications',
+            leading: 'app-icon',
+            description: 'Manage the apps connected here',
+        });
+        const title = part(el, 'page-title').getBoundingClientRect();
+        const icon = part(el, 'app-icon').getBoundingClientRect();
+        // (24 - 20) / 2 — structural, not an offset written anywhere.
+        expect(Math.round(icon.top - title.top)).to.equal(2);
+    });
+    // The app icon is sized apart from the utility controls, so retuning one cannot move the other.
+    it('67. sizes the app icon independently of the utility controls', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'app-icon' });
+        const host = getComputedStyle(el);
+        expect(host.getPropertyValue('--nile-app-shell-app-icon-size').trim()).to.equal('20px');
+        expect(host.getPropertyValue('--nile-app-shell-utility-size').trim()).to.equal('32px');
+        el.style.setProperty('--nile-app-shell-app-icon-size', '28px');
+        await el.updateComplete;
+        expect(part(el, 'app-icon').getBoundingClientRect().width).to.equal(28);
+        // The nav toggle is untouched by that.
+        const toggle = part(el, 'nav-toggle');
+        const base = toggle.shadowRoot.querySelector('[part~="base"]');
+        expect(base.getBoundingClientRect().width).to.equal(32);
+    });
+    it('54. leading="app-icon" draws a 20px block around the slotted mark', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'app-icon' });
+        const box = part(el, 'app-icon');
+        expect(box).to.exist;
+        expect(part(el, 'back')).to.be.null;
+        const rect = box.getBoundingClientRect();
+        // Its own size, not the 32px utility control box the nav toggle uses.
+        expect(rect.width).to.equal(20);
+        expect(rect.height).to.equal(20);
+        // The page's mark is assigned into the shell's box.
+        const slot = box.querySelector('slot[name="app-icon"]');
+        expect(slot).to.exist;
+        expect(slot.assignedElements()).to.deep.equal([
+            el.querySelector('#mark'),
+        ]);
+        // The block sits before the title, not after it.
+        /* eslint-disable-next-line no-bitwise */
+        const boxIsFirst = box.compareDocumentPosition(part(el, 'page-title')) &
+            Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(boxIsFirst).to.be.greaterThan(0);
+    });
+});
+// The four header heights are viewport-height sensitive, so these tests set a viewport where the spec numbers apply.
+describe('NileAppShell — the four header heights', () => {
+    const TALL = { width: 1400, height: 900 };
+    const SHORT = { width: 800, height: 600 };
+    before(async () => {
+        await setViewport(TALL);
+    });
+    after(async () => {
+        await setViewport(SHORT);
+    });
+    const bar = (el) => el.shadowRoot.querySelector('.container > .top-bar');
+    const strip = (el) => el.shadowRoot.querySelector('.tabs');
+    // The header block is the bar plus its strip, measured top-to-bottom so a gap between them is caught.
+    const headerBlock = (el) => {
+        const top = bar(el).getBoundingClientRect().top;
+        const bottom = el.tabsVisible
+            ? strip(el).getBoundingClientRect().bottom
+            : bar(el).getBoundingClientRect().bottom;
+        return bottom - top;
+    };
+    it('55. is 68px with neither axis on, whatever the leading', async () => {
+        for (const leading of ['none', 'back', 'app-icon']) {
+            const el = await header({ pageTitle: 'Applications', leading });
+            expect(bar(el).getBoundingClientRect().height, leading).to.equal(68);
+            // The leading axis changes what is in the bar, never how tall it is.
+            const area = part(el, 'title-area').getBoundingClientRect().height;
+            expect(area, leading).to.be.at.most(bar(el).clientHeight);
+        }
+    });
+    // A description adds its own line (24 title + 2 gap + 18 description = 44) in a 76px bar; asserted as the lines' own boxes.
+    it('56. is 76px with a description, and the second line fits it', async () => {
+        const el = await header({
+            pageTitle: 'Applications',
+            description: 'Manage the apps connected to this tenant',
+        });
+        expect(bar(el).getBoundingClientRect().height).to.equal(76);
+        const stack = el.shadowRoot.querySelector('.title-stack');
+        expect(part(el, 'page-title').getBoundingClientRect().height).to.equal(24);
+        expect(part(el, 'description').getBoundingClientRect().height).to.equal(18);
+        expect(stack.getBoundingClientRect().height).to.equal(44);
+        // Nothing is clipped: the stack sits wholly inside the bar's box.
+        const barBox = bar(el).getBoundingClientRect();
+        const stackBox = stack.getBoundingClientRect();
+        expect(stackBox.top).to.be.at.least(barBox.top);
+        expect(stackBox.bottom).to.be.at.most(barBox.bottom);
+    });
+    it('57. adds a 33px strip for tabs: 101px, and 109px with a description', async () => {
+        const tabbed = await header({ pageTitle: 'Applications', tabs: true });
+        expect(strip(tabbed).getBoundingClientRect().height).to.equal(33);
+        expect(headerBlock(tabbed)).to.equal(101);
+        const described = await header({
+            pageTitle: 'Applications',
+            description: 'Manage the apps connected to this tenant',
+            tabs: true,
+        });
+        expect(strip(described).getBoundingClientRect().height).to.equal(33);
+        expect(headerBlock(described)).to.equal(109);
+    });
+    // The three axes are independent, so all twelve combinations land on one of the four heights.
+    it('58. resolves all twelve variants to exactly the four heights', async () => {
+        for (const leading of ['none', 'back', 'app-icon']) {
+            for (const tabs of [false, true]) {
+                for (const described of [false, true]) {
+                    /* eslint-disable-next-line no-nested-ternary */
+                    const expected = tabs ? (described ? 109 : 101) : described ? 76 : 68;
+                    const el = await header({
+                        pageTitle: 'Applications',
+                        description: described ? 'Manage connected apps' : '',
+                        leading,
+                        tabs,
+                    });
+                    const label = `leading=${leading} tabs=${tabs} description=${described}`;
+                    expect(headerBlock(el), label).to.equal(expected);
+                }
+            }
+        }
+    });
+    // The strip is a control row plus its rule; the row shrinks to fit via the group's own padding hook, staying shorter than the standalone group.
+    it('59. shrinks the slotted tab row to fit the strip, rather than crop it', async () => {
+        const el = await header({ pageTitle: 'Applications', tabs: true });
+        const standalone = await fixture(html `
+      <nile-nav-tab-group style="${HEADER_TOKENS}">
+        <nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
+        <nile-nav-tab slot="nav" panel="approvals">Approvals</nile-nav-tab>
+      </nile-nav-tab-group>
+    `);
+        const stripBox = strip(el).getBoundingClientRect();
+        const slottedRow = el.querySelector('nile-nav-tab-group').getBoundingClientRect();
+        const loneRow = standalone.getBoundingClientRect();
+        // The design's row: 0 + 20px label + 12px = 32, in a 33px strip.
+        expect(slottedRow.height).to.equal(32);
+        expect(stripBox.height).to.equal(33);
+        // The shell's hook is load-bearing: the same group is taller on its own.
+        expect(loneRow.height).to.be.greaterThan(slottedRow.height);
+        expect(loneRow.height).to.be.greaterThan(stripBox.height);
+        // Nothing is cropped and there is no slack: the row fills the strip above the rule it sits on.
+        expect(slottedRow.top).to.be.at.least(stripBox.top);
+        expect(slottedRow.bottom).to.be.at.most(stripBox.bottom);
+        expect(slottedRow.top - stripBox.top).to.equal(0);
+    });
+    it('60. drives the row through the group’s own padding hook', async () => {
+        const el = await header({ pageTitle: 'Applications', tabs: true });
+        const group = el.querySelector('nile-nav-tab-group');
+        const padding = getComputedStyle(group)
+            .getPropertyValue('--nile-nav-tab-padding')
+            .split(/\s+/)
+            .filter(Boolean);
+        // The tab node's padding is 0 / 4 / 12 / 4, the 12px bottom being the active indicator's band.
+        expect(padding).to.deep.equal(['0px', '4px', '12px', '4px']);
+        // The inter-tab gap is the group's own 12px and is deliberately untouched.
+        expect(getComputedStyle(group).getPropertyValue('--tab-gap').trim()).to.equal('12px');
+    });
+    // The compression under a short viewport is documented behaviour, asserted here to keep the resize honest.
+    it('61. compresses to 56/64px under 600px of viewport height', async () => {
+        await setViewport(SHORT);
+        try {
+            const plain = await header({ pageTitle: 'Applications' });
+            expect(bar(plain).getBoundingClientRect().height).to.equal(56);
+            const described = await header({
+                pageTitle: 'Applications',
+                description: 'Manage connected apps',
+            });
+            expect(bar(described).getBoundingClientRect().height).to.equal(64);
+        }
+        finally {
+            await setViewport(TALL);
+        }
+    });
 });
 //# sourceMappingURL=nile-app-shell.test.js.map