@aquera/nile-elements 2.0.10 → 2.0.12

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

@@ -1,11 +1,14 @@
 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-app-shell-panel/nile-app-shell-panel';
+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 +37,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 +84,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 +144,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 +190,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);
         }
     });
@@ -208,6 +225,46 @@ describe('NileAppShell — Ask Aquera panel', () => {
         expect(part(el, 'panel').getAttribute('aria-label')).to.equal('Ask Aquera');
         expect(part(el, 'panel-title').textContent.trim()).to.equal('Ask Aquera');
     });
+    // Amendment A (A-8): Figma's Assistant Title is Text lg/Semibold, 18/28; the shell sets it on the title it renders itself.
+    it('17b. sets its own panel title at 18/28 in text-primary-900', async () => {
+        const tokens = '--ng-font-size-text-lg: 18px; --ng-line-height-text-lg: 28px; --ng-font-weight-semibold: 600; --ng-colors-text-primary-900: rgb(24, 29, 39)';
+        const el = await sized(1440);
+        el.setAttribute('style', `${el.getAttribute('style')}; ${tokens}`);
+        el.openPanel();
+        await el.updateComplete;
+        const own = getComputedStyle(part(el, 'panel-title'));
+        expect(own.fontSize).to.equal('18px');
+        expect(own.lineHeight).to.equal('28px');
+        expect(own.fontWeight).to.equal('600');
+        expect(own.color).to.equal('rgb(24, 29, 39)');
+    });
+    // A-8: a slotted nile-app-shell-panel (part of App Shell) draws the same Figma title: 18/28 SemiBold, text-primary-900.
+    it('17c. sets the nile-app-shell-panel title at 18/28 in text-primary-900', async () => {
+        const tokens = '--ng-font-size-text-sm: 14px; --ng-font-size-text-lg: 18px; --ng-line-height-text-lg: 28px; --ng-font-weight-semibold: 600; --ng-colors-text-primary-900: rgb(24, 29, 39)';
+        const slotted = await fixture(html `
+      <nile-app-shell-panel label="Ask Aquera" style="${tokens}"></nile-app-shell-panel>
+    `);
+        await slotted.updateComplete;
+        const style = getComputedStyle(slotted.shadowRoot.querySelector('.title'));
+        expect(style.fontSize).to.equal('18px');
+        expect(style.lineHeight).to.equal('28px');
+        expect(style.fontWeight).to.equal('600');
+        expect(style.color).to.equal('rgb(24, 29, 39)');
+    });
+    // The enterprise sheet keeps its own panel title: --nile-type-scale-3 and an inherited line height, exactly as before.
+    // Enterprise defines no --ng-* tokens, so the NxtGen line height does not apply there.
+    it('17d. leaves the enterprise nile-app-shell-panel title as it was', async () => {
+        const slotted = await fixture(html `
+      <nile-app-shell-panel
+        label="Ask Aquera"
+        style="--nile-type-scale-3: 14px; line-height: 20px"
+      ></nile-app-shell-panel>
+    `);
+        await slotted.updateComplete;
+        const style = getComputedStyle(slotted.shadowRoot.querySelector('.title'));
+        expect(style.fontSize).to.equal('14px');
+        expect(style.lineHeight).to.equal('20px');
+    });
     it('18. Cmd/Ctrl+J toggles the panel', async () => {
         const el = await sized(1440);
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', ctrlKey: true }));
@@ -263,8 +320,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 +346,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 +387,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 +436,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 +535,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 +616,926 @@ describe('NileAppShell — the built-in Ask button', () => {
         expect(getComputedStyle(actions).display).to.not.equal('none');
         expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
     });
+    // Amendment A (M8): the design's Ask is the secondary button, not the filled primary.
+    it('34b. renders Ask as the secondary variant', async () => {
+        const el = await sized(1440);
+        expect(ask(el).getAttribute('variant')).to.equal('secondary');
+    });
+    // Amendment A (M9, M10): app actions, a 16px divider, then Ask, 16px apart; with no app actions, no divider.
+    it('34c. draws a divider before Ask only when the page slots actions, 16px from both', async () => {
+        const alone = await sized(1440);
+        await settled(alone);
+        expect(part(alone, 'ask-rule')).to.be.null;
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px; --ng-spacing-xl: 16px;">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <button slot="top-bar-actions" id="one">One</button>
+        <button slot="top-bar-actions" id="two">Two</button>
+        <p>page</p>
+        <div slot="panel">assistant</div>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => el.hasAttribute('has-top-bar-actions'));
+        await el.updateComplete;
+        const rule = part(el, 'ask-rule');
+        expect(rule).to.exist;
+        const one = el.querySelector('#one').getBoundingClientRect();
+        const two = el.querySelector('#two').getBoundingClientRect();
+        const ruleBox = rule.getBoundingClientRect();
+        const askBox = ask(el).getBoundingClientRect();
+        expect(Math.round(ruleBox.height)).to.equal(16);
+        expect(Math.round(two.left - one.right)).to.equal(16);
+        expect(Math.round(ruleBox.left - two.right)).to.equal(16);
+        expect(Math.round(askBox.left - ruleBox.left)).to.equal(16);
+        // Order: the page's actions, the divider, then Ask.
+        /* eslint-disable-next-line no-bitwise */
+        const ruleBeforeAsk = rule.compareDocumentPosition(ask(el)) & Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(ruleBeforeAsk).to.be.greaterThan(0);
+        el.noAsk = true;
+        await el.updateComplete;
+        expect(part(el, 'ask-rule'), 'no Ask, no divider').to.be.null;
+    });
+    // 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-md-alt: 10px',
+    '--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('; ');
+const LEADINGS = ['none', 'back', 'app-icon', 'back+app-icon'];
+const hasBack = (leading) => leading === 'back' || leading === 'back+app-icon';
+const hasIcon = (leading) => leading === 'app-icon' || leading === 'back+app-icon';
+// 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 ?? ''}
+      .headerBack=${hasBack(axes.leading)}
+      .headerBackLabel=${axes.headerBackLabel ?? 'Back'}
+    >
+      <nav slot="side-nav">nav</nav>
+      ${hasIcon(axes.leading)
+        ? html `<span slot="app-icon" id="mark">A</span>`
+        : ''}
+      ${axes.actions
+        ? html `<button slot="top-bar-actions" id="cta">Button CTA</button>`
+        : ''}
+      ${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'));
+    if (hasIcon(axes.leading))
+        await waitUntil(() => el.hasAttribute('has-app-icon'));
+    if (axes.actions)
+        await waitUntil(() => el.hasAttribute('has-top-bar-actions'));
+    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.headerBack).to.be.false;
+        expect(el.hasAttribute('has-app-icon')).to.be.false;
+        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;
+    });
+    // The back arrow is the exception: it stands on its own but brings no empty title stack.
+    it('75. mounts the back arrow 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. headerBack defaults to false and draws no arrow, and no slotted icon draws no icon', async () => {
+        const el = await header({ pageTitle: 'Applications' });
+        expect(el.headerBack).to.be.false;
+        expect(el.hasAttribute('headerback')).to.be.false;
+        expect(part(el, 'back')).to.be.null;
+        expect(el.hasAttribute('has-app-icon')).to.be.false;
+        expect(getComputedStyle(part(el, 'app-icon')).display).to.equal('none');
+        expect(el.shadowRoot.querySelector('.crumb-divider')).to.be.null;
+    });
+    // Amendment A: the back control is the arrow alone, with no previous-page label and no slash.
+    it('51. headerBack draws the narrow-left arrow only, then the title', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const back = part(el, 'back');
+        const title = part(el, 'page-title');
+        expect(back).to.exist;
+        expect(back.tagName).to.equal('BUTTON');
+        expect(back.getAttribute('type')).to.equal('button');
+        // The icons go through nile-glyph, so assert the glyph, not an <svg>.
+        const glyphs = back.querySelectorAll('nile-glyph');
+        expect(glyphs.length).to.equal(1);
+        expect(glyphs[0].getAttribute('name')).to.equal('ng-arrow-narrow-left');
+        // No label, no divider, no slash anywhere in the header.
+        expect(back.textContent.trim()).to.equal('');
+        expect(back.querySelector('span')).to.be.null;
+        expect(el.shadowRoot.querySelector('.crumb-divider')).to.be.null;
+        expect(el.shadowRoot.querySelector('nile-glyph[name="ng-slash"]')).to.be.null;
+        /* eslint-disable-next-line no-bitwise */
+        const backIsFirst = back.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(backIsFirst).to.be.greaterThan(0);
+        expect(back.getBoundingClientRect().width).to.be.greaterThan(0);
+    });
+    // camelCase property, attribute: true + reflect: true — the title-block pattern.
+    it('51b. headerBack and headerBackLabel work from markup and reflect to their attributes', async () => {
+        const marked = await fixture(html `
+      <nile-app-shell pageTitle="Applications" headerBack headerBackLabel="Retour">
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await marked.updateComplete;
+        expect(marked.headerBack).to.be.true;
+        expect(marked.headerBackLabel).to.equal('Retour');
+        expect(part(marked, 'back')).to.exist;
+        const el = await header({ pageTitle: 'Applications' });
+        el.headerBack = true;
+        el.headerBackLabel = 'Go back';
+        await el.updateComplete;
+        expect(el.hasAttribute('headerback')).to.be.true;
+        expect(el.getAttribute('headerbacklabel')).to.equal('Go back');
+        expect(part(el, 'back')).to.exist;
+        el.headerBack = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('headerback')).to.be.false;
+        expect(part(el, 'back')).to.be.null;
+    });
+    // headerBackLabel names the control for assistive tech and is never drawn as text.
+    it('52. headerBackLabel is the accessible name only, never visible text', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const back = part(el, 'back');
+        expect(back.getAttribute('aria-label')).to.equal('Back');
+        expect(back.getAttribute('title')).to.equal('Back');
+        expect(back.querySelector('nile-glyph').getAttribute('aria-hidden')).to.not.equal('false');
+        el.headerBackLabel = 'Integrations';
+        await el.updateComplete;
+        expect(back.getAttribute('aria-label')).to.equal('Integrations');
+        // Not rendered anywhere in the header as text.
+        expect(back.textContent.trim()).to.equal('');
+        expect(part(el, 'title-area').textContent.includes('Integrations')).to.be.false;
+        expect(part(el, 'top-bar').textContent.includes('Integrations')).to.be.false;
+    });
+    // The shell owns no history, so the control only announces the press, as the standard nile-click; the page navigates itself.
+    it('53. the back control and goBackHeader() emit nile-click { value: "back" } from the shell', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        let retired = 0;
+        el.addEventListener('nile-header-back', () => {
+            retired += 1;
+        });
+        const clicked = oneEvent(el, 'nile-click');
+        part(el, 'back').click();
+        const fromClick = (await clicked);
+        expect(fromClick.detail).to.deep.equal({ value: 'back' });
+        expect(fromClick.target).to.equal(el);
+        expect(fromClick.bubbles).to.be.true;
+        expect(fromClick.composed).to.be.true;
+        const called = oneEvent(el, 'nile-click');
+        el.goBackHeader();
+        const fromCall = (await called);
+        expect(fromCall.detail).to.deep.equal({ value: 'back' });
+        expect(fromCall.target).to.equal(el);
+        // nile-header-back and goBackPage() are gone in 2.0.12 (Amendment A, A-12).
+        expect(retired).to.equal(0);
+        expect(el.goBackPage).to.be.undefined;
+        // It is the page's event, not the panel's: nothing about the panel moves.
+        expect(el.panelOpen).to.be.false;
+    });
+    // A nile-click bubbling up from page content must not read as the header back press.
+    it('53b. a nile-click from slotted content is distinguishable by its target', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const page = el.querySelector('p');
+        const seen = [];
+        el.addEventListener('nile-click', e => seen.push(e.target));
+        page.dispatchEvent(new CustomEvent('nile-click', {
+            bubbles: true,
+            composed: true,
+            detail: { value: 'back' },
+        }));
+        part(el, 'back').click();
+        expect(seen).to.deep.equal([page, el]);
+    });
+    // The four combinations are independent; with an app icon the description sits under the icon, otherwise under the title.
+    it('63. aligns the description under the app icon when there is one, else the title', async () => {
+        for (const leading of LEADINGS) {
+            const el = await header({
+                pageTitle: 'Applications',
+                description: 'Manage the apps connected to this tenant',
+                leading,
+            });
+            const anchor = hasIcon(leading) ? part(el, 'app-icon') : part(el, 'page-title');
+            const description = part(el, 'description').getBoundingClientRect();
+            expect(Math.round(description.left), leading).to.equal(Math.round(anchor.getBoundingClientRect().left));
+        }
+    });
+    // The arrow sits beside the stack; the app icon is the first thing in the title row.
+    it('64. renders the arrow beside the title stack and the app icon inside the title row', async () => {
+        for (const leading of LEADINGS) {
+            const el = await header({ pageTitle: 'Applications', leading });
+            const row = el.shadowRoot.querySelector('.title-row');
+            const area = part(el, 'title-area');
+            const back = part(el, 'back');
+            const icon = part(el, 'app-icon');
+            expect(!!back, `${leading} back`).to.equal(hasBack(leading));
+            expect(el.hasAttribute('has-app-icon'), `${leading} icon`).to.equal(hasIcon(leading));
+            if (back) {
+                expect(row.contains(back), leading).to.be.false;
+                expect(area.contains(back), leading).to.be.true;
+            }
+            expect(row.contains(icon), leading).to.be.true;
+            if (hasIcon(leading)) {
+                expect(row.firstElementChild, leading).to.equal(icon);
+            }
+        }
+    });
+    // The arrow sits on the title's row, and its offset does not move when a description appears.
+    it('65. sits the back arrow on the title row, description or not', async () => {
+        for (const leading of ['back', '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('.back-line');
+                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);
+            }
+        }
+    });
+    // Figma Title Area: arrow → 16px → [icon → 8px → title]; Breadcrumb / 01: toggle glyph → 16px → divider (16px tall) → 16px.
+    it('65b. spaces the toggle, divider, arrow, icon and title as the design does', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back+app-icon' });
+        const toggle = part(el, 'nav-toggle');
+        const glyph = toggle.querySelector('nile-glyph') ?? toggle;
+        const rule = part(el, 'rule').getBoundingClientRect();
+        const backGlyph = part(el, 'back').querySelector('nile-glyph').getBoundingClientRect();
+        const icon = part(el, 'app-icon').getBoundingClientRect();
+        const title = part(el, 'page-title').getBoundingClientRect();
+        const toggleGlyph = glyph.getBoundingClientRect();
+        expect(Math.round(rule.height)).to.equal(16);
+        expect(Math.round(rule.left - toggleGlyph.right)).to.equal(16);
+        expect(Math.round(backGlyph.left - rule.left)).to.equal(16);
+        expect(Math.round(backGlyph.width)).to.equal(20);
+        expect(Math.round(icon.left - backGlyph.right)).to.equal(16);
+        expect(Math.round(title.left - icon.right)).to.equal(8);
+        // Without an icon the title takes the icon's place, 16px after the arrow.
+        const plain = await header({ pageTitle: 'Applications', leading: 'back' });
+        const plainArrow = part(plain, 'back').querySelector('nile-glyph').getBoundingClientRect();
+        const plainTitle = part(plain, 'page-title').getBoundingClientRect();
+        expect(Math.round(plainTitle.left - plainArrow.right)).to.equal(16);
+    });
+    // The app-icon slot works with or without headerBack, and with or without a title.
+    it('65c. shows a slotted app icon independently of headerBack', async () => {
+        const iconOnly = await header({ pageTitle: 'Applications', leading: 'app-icon' });
+        expect(part(iconOnly, 'back')).to.be.null;
+        expect(part(iconOnly, 'app-icon').getBoundingClientRect().width).to.equal(20);
+        // An icon on its own still mounts the title block.
+        const bare = await fixture(html `
+      <nile-app-shell style="width: 1176px; height: 800px; ${HEADER_TOKENS}">
+        <nav slot="side-nav">nav</nav>
+        <span slot="app-icon" id="mark">A</span>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => bare.hasAttribute('has-app-icon'));
+        await bare.updateComplete;
+        expect(part(bare, 'title-area')).to.exist;
+        expect(part(bare, 'app-icon').getBoundingClientRect().width).to.equal(20);
+        // Removing the mark takes the icon (and the block it alone mounted) away again.
+        bare.querySelector('#mark').remove();
+        await waitUntil(() => !bare.hasAttribute('has-app-icon'));
+        await bare.updateComplete;
+        expect(part(bare, 'title-area')).to.be.null;
+    });
+    // Amendment A (M11): the inactive tab colour is scoped to the shell's strip; a standalone group keeps its defaults.
+    it('65e. colours the inactive header tabs through the shell only', async () => {
+        const colours = [
+            '--ng-colors-fg-brand-primary-alt: rgb(21, 94, 239)',
+            '--ng-colors-text-brand-secondary-700: rgb(0, 78, 235)',
+            '--ng-colors-text-quaternary-500: rgb(113, 118, 128)',
+            '--ng-colors-text-secondary-700: rgb(65, 70, 81)',
+        ].join('; ');
+        const el = await header({ pageTitle: 'Applications', tabs: true });
+        el.setAttribute('style', `${el.getAttribute('style')}; ${colours}`);
+        await el.updateComplete;
+        const group = el.querySelector('nile-nav-tab-group');
+        const inactive = el.querySelectorAll('nile-nav-tab')[1];
+        // Known limitation (M12, A-7): the shell sets no indicator colour, because nile-nav-tab-group's top indicator
+        // hard-codes its token in its own shadow tree; the indicator keeps the group's default.
+        const indicatorOf = (g) => getComputedStyle(g.shadowRoot.querySelector('.nav-tab-group__indicator'))
+            .borderBottomColor;
+        expect(indicatorOf(group)).to.equal('rgb(0, 78, 235)');
+        // The inactive label is remapped inside the shell only: nile-nav-tab itself is unchanged and still paints
+        // var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)); the shell points that fallback token at quaternary-500.
+        // (The painted ink sits inside nile-link, which this runner does not render; it is checked in the browser instead.)
+        const secondaryOf = (node) => getComputedStyle(node).getPropertyValue('--ng-colors-text-secondary-700').trim();
+        expect(secondaryOf(inactive)).to.equal('rgb(113, 118, 128)');
+        const sheets = customElements.get('nile-nav-tab').styles;
+        const tabStyles = [].concat(sheets).map(sheet => sheet.cssText).join('\n');
+        expect(tabStyles).to.include('color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));');
+        expect(tabStyles, 'no new hook on the shared component').to.not.include('--nile-nav-tab-text-color:');
+        // Nothing else in the shell's tree is remapped.
+        expect(secondaryOf(el)).to.equal('rgb(65, 70, 81)');
+        // Outside the shell nothing changes.
+        const standalone = await fixture(html `
+      <nile-nav-tab-group style="${colours}">
+        <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 loneTab = standalone.querySelectorAll('nile-nav-tab')[1];
+        expect(secondaryOf(loneTab), 'the global default is untouched').to.equal('rgb(65, 70, 81)');
+        await standalone.updateComplete;
+        expect(indicatorOf(standalone), 'a standalone group paints its own default').to.equal('rgb(0, 78, 235)');
+    });
+    it('65d. colours the description text-quaternary-500', async () => {
+        const el = await header({
+            pageTitle: 'Applications',
+            description: 'Manage the apps connected here',
+        });
+        el.style.setProperty('--ng-colors-text-quaternary-500', 'rgb(113, 118, 128)');
+        el.style.setProperty('--ng-colors-text-tertiary-600', 'rgb(1, 2, 3)');
+        expect(getComputedStyle(part(el, 'description')).color).to.equal('rgb(113, 118, 128)');
+    });
+    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. a slotted app icon draws a 20px block around the 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 LEADINGS) {
+            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 every variant to exactly the four heights', async () => {
+        for (const leading of LEADINGS) {
+            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