@aquera/nile-elements 2.0.10 → 2.0.12

package/src/nile-app-shell/nile-app-shell.test.ts

@@ -1,14 +1,17 @@
 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';
+// renderGlyph fails silently on an unknown name, so the glyph tests need the real element.
+import '@aquera/nile-glyph/nile-glyph';
 import type { NileAppShell } from './nile-app-shell';
 import type { NileAppShellNavToggle } from '../nile-app-shell-nav-toggle/nile-app-shell-nav-toggle';
 
-/**
- * The shell derives its chrome from its own width, so most tests size the host
- * explicitly and wait for the ResizeObserver to land.
- */
+// Sizes the host explicitly and waits for the ResizeObserver to land.
 const sized = async (width: number) => {
   const el = await fixture<NileAppShell>(html`
     <nile-app-shell style="width: ${width}px; height: 600px;">
@@ -39,11 +42,7 @@ const overlaying = async (width: number) => {
   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: NileAppShell) => {
   const section = el.shadowRoot!.querySelector('.content-section')!;
   let last = -1;
@@ -104,6 +103,21 @@ describe('NileAppShell — regions', () => {
   });
 });
 
+/**
+ * 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: Element) => {
+  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);
@@ -158,6 +172,15 @@ 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', () => {
@@ -202,7 +225,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
       );
@@ -248,6 +271,51 @@ describe('NileAppShell — Ask Aquera panel', () => {
     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<HTMLElement>(html`
+      <nile-app-shell-panel label="Ask Aquera" style="${tokens}"></nile-app-shell-panel>
+    `);
+    await (slotted as unknown as { updateComplete: Promise<unknown> }).updateComplete;
+    const style = getComputedStyle(slotted.shadowRoot!.querySelector('.title') as HTMLElement);
+    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<HTMLElement>(html`
+      <nile-app-shell-panel
+        label="Ask Aquera"
+        style="--nile-type-scale-3: 14px; line-height: 20px"
+      ></nile-app-shell-panel>
+    `);
+    await (slotted as unknown as { updateComplete: Promise<unknown> }).updateComplete;
+    const style = getComputedStyle(slotted.shadowRoot!.querySelector('.title') as HTMLElement);
+    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(
@@ -316,8 +384,7 @@ describe('NileAppShellNavToggle', () => {
     )!;
     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<HTMLElement & { disabled: boolean }>(
         '[part~="button"]'
@@ -354,14 +421,33 @@ describe('NileAppShellNavToggle', () => {
       )!.disabled
     ).to.be.true;
   });
+
+  it('63. draws a real glyph in both states', async () => {
+    const el = await fixture<NileAppShell>(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<NileAppShellNavToggle>(
+      '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() as HTMLElement).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: number) => {
     const el = await fixture<NileAppShell>(html`
@@ -386,8 +472,7 @@ describe('NileAppShell — the content row never overflows', () => {
   };
 
   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);
@@ -441,12 +526,94 @@ 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<NileAppShell>(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: string) =>
+      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: string) => {
+      const el = await fixture<NileAppShell>(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: string) =>
+        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: number, tokens = ENTERPRISE_NAV) => {
+      const el = await fixture<NileAppShell>(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);
@@ -477,13 +644,48 @@ 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: NileAppShell) => part(el, 'rule');
+
+    const slotted = await fixture<NileAppShell>(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<NileAppShell>(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<NileAppShell>(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: NileAppShell) => part(el, 'ask') as HTMLButtonElement | null;
 
@@ -533,4 +735,1136 @@ 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<NileAppShell>(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: NileAppShell, name: string) =>
+    part(el, name)!.shadowRoot!.querySelector('[part~="base"]') as HTMLElement;
+
+  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 as HTMLButtonElement).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<NileAppShell>(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: NileAppShell) =>
+    el.shadowRoot!.querySelector('.tabs') as HTMLElement;
+
+  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') as HTMLSlotElement;
+    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<NileAppShell>(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') as HTMLElement;
+    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') as HTMLElement;
+    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'
+    ) as HTMLElement;
+
+    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'
+    ) as HTMLElement;
+    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('; ');
+
+// What sits before the title: `headerBack` and the `app-icon` slot are independent, so the four combinations are named here for looping.
+type Leading = 'none' | 'back' | 'app-icon' | 'back+app-icon';
+
+const LEADINGS: readonly Leading[] = ['none', 'back', 'app-icon', 'back+app-icon'];
+
+const hasBack = (leading?: Leading) => leading === 'back' || leading === 'back+app-icon';
+const hasIcon = (leading?: Leading) =>
+  leading === 'app-icon' || leading === 'back+app-icon';
+
+interface HeaderAxes {
+  pageTitle?: string;
+  description?: string;
+  badge?: string;
+  leading?: Leading;
+  headerBackLabel?: string;
+  tabs?: boolean;
+  actions?: boolean;
+}
+
+// A shell carrying whatever header axes a test asks for; an unset axis is the empty string, meaning "absent".
+const header = async (axes: HeaderAxes = {}) => {
+  const el = await fixture<NileAppShell>(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<NileAppShell>(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: [unknown, string][] = [
+      [0, '1'],
+      [-3, '1'],
+      [7, '6'],
+      [2.7, '2'],
+      [NaN, '1'],
+      ['abc', '1'],
+      [undefined, '1'],
+    ];
+    for (const [value, expected] of cases) {
+      (el as unknown as { headingLevel: unknown }).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<NileAppShell>(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<NileAppShell>(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"]'
+    ) as HTMLElement;
+    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<NileAppShell>(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: string) =>
+    fixture<NileAppShell>(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<NileAppShell>(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') as HTMLButtonElement).click();
+    const fromClick = (await clicked) as CustomEvent;
+    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) as CustomEvent;
+    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 as unknown as { goBackPage?: unknown }).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: EventTarget[] = [];
+    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') as HTMLButtonElement).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') as HTMLElement;
+      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'] as const) {
+      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') as HTMLElement;
+        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<NileAppShell>(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') as HTMLElement;
+    const inactive = el.querySelectorAll('nile-nav-tab')[1] as HTMLElement;
+    // 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: HTMLElement) =>
+      getComputedStyle(g.shadowRoot!.querySelector('.nav-tab-group__indicator') as HTMLElement)
+        .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: HTMLElement) =>
+      getComputedStyle(node).getPropertyValue('--ng-colors-text-secondary-700').trim();
+    expect(secondaryOf(inactive)).to.equal('rgb(113, 118, 128)');
+    type Sheets = { cssText: string } | { cssText: string }[];
+    const sheets = (customElements.get('nile-nav-tab') as unknown as { styles: Sheets }).styles;
+    const tabStyles = ([] as { cssText: string }[]).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<HTMLElement>(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] as HTMLElement;
+    expect(secondaryOf(loneTab), 'the global default is untouched').to.equal('rgb(65, 70, 81)');
+    await (standalone as unknown as { updateComplete: Promise<unknown> }).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"]'
+    ) as HTMLElement;
+    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"]') as HTMLSlotElement;
+    expect(slot).to.exist;
+    expect(slot.assignedElements()).to.deep.equal([
+      el.querySelector('#mark') as Element,
+    ]);
+
+    // 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: NileAppShell) =>
+    el.shadowRoot!.querySelector('.container > .top-bar') as HTMLElement;
+
+  const strip = (el: NileAppShell) =>
+    el.shadowRoot!.querySelector('.tabs') as HTMLElement;
+
+  // The header block is the bar plus its strip, measured top-to-bottom so a gap between them is caught.
+  const headerBlock = (el: NileAppShell) => {
+    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') as HTMLElement;
+    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<HTMLElement>(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') as HTMLElement
+    ).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') as HTMLElement;
+    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);
+    }
+  });
 });