@aquera/nile-elements 2.0.11 → 2.0.13

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

@@ -2,6 +2,7 @@ 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';
@@ -270,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(
@@ -690,6 +736,53 @@ describe('NileAppShell — the built-in Ask button', () => {
     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;
@@ -932,6 +1025,7 @@ const HEADER_TOKENS = [
   '--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',
@@ -943,15 +1037,23 @@ const HEADER_TOKENS = [
   '--ng-line-height-text-md: 24px',
 ].join('; ');
 
-type Leading = 'none' | 'back' | 'app-icon';
+// 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;
-  backLabel?: string;
+  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".
@@ -962,13 +1064,16 @@ const header = async (axes: HeaderAxes = {}) => {
       .pageTitle=${axes.pageTitle ?? ''}
       .description=${axes.description ?? ''}
       .badge=${axes.badge ?? ''}
-      leading=${axes.leading ?? 'none'}
-      .backLabel=${axes.backLabel ?? 'Back'}
+      .headerBack=${hasBack(axes.leading)}
+      .headerBackLabel=${axes.headerBackLabel ?? 'Back'}
     >
       <nav slot="side-nav">nav</nav>
-      ${axes.leading === 'app-icon'
+      ${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>
@@ -979,6 +1084,8 @@ const header = async (axes: HeaderAxes = {}) => {
     </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;
 };
@@ -987,7 +1094,8 @@ const header = async (axes: HeaderAxes = {}) => {
 describe('NileAppShell — the header title block', () => {
   it('44. draws no title block at all until an axis asks for one', async () => {
     const el = await header();
-    expect(el.leading).to.equal('none');
+    expect(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;
@@ -1029,8 +1137,8 @@ describe('NileAppShell — the header title block', () => {
     expect(el.hasAttribute('has-description')).to.be.true;
   });
 
-  // Leading is the exception: a back control stands on its own but brings no empty title stack.
-  it('75. mounts a leading control on its own, without an empty title stack', async () => {
+  // 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;
@@ -1232,153 +1340,176 @@ describe('NileAppShell — the header title block', () => {
     expect(part(el, 'description')).to.be.null;
   });
 
-  it('50. leading defaults to none and draws neither control', async () => {
+  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.leading).to.equal('none');
+    expect(el.headerBack).to.be.false;
+    expect(el.hasAttribute('headerback')).to.be.false;
     expect(part(el, 'back')).to.be.null;
-    expect(part(el, 'app-icon')).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;
   });
 
-  // Leading="back" draws a breadcrumb: glyph, previous-page label, slash, then the page title.
-  it('51. leading="back" draws glyph, label, divider, then the title', async () => {
+  // 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 divider = el.shadowRoot!.querySelector(
-      '.crumb-divider'
-    ) as HTMLElement;
     const title = part(el, 'page-title')!;
 
     expect(back).to.exist;
     expect(back.tagName).to.equal('BUTTON');
     expect(back.getAttribute('type')).to.equal('button');
-    expect(divider).to.exist;
-    expect(divider.getAttribute('aria-hidden')).to.equal('true');
 
     // The icons go through nile-glyph, so assert the glyph, not an <svg>.
-    const chevron = back.querySelector('nile-glyph')!;
-    expect(chevron).to.exist;
-    expect(chevron.getAttribute('name')).to.equal('ng-chevron-left');
-    expect(divider.querySelector('nile-glyph')!.getAttribute('name')).to.equal(
-      'ng-slash'
-    );
+    const glyphs = back.querySelectorAll('nile-glyph');
+    expect(glyphs.length).to.equal(1);
+    expect(glyphs[0].getAttribute('name')).to.equal('ng-arrow-narrow-left');
 
-    // glyph before label, inside the control.
-    const label = back.querySelector('span')!;
-    /* eslint-disable-next-line no-bitwise */
-    const glyphIsFirst =
-      chevron.compareDocumentPosition(label) & Node.DOCUMENT_POSITION_FOLLOWING;
-    expect(glyphIsFirst).to.be.greaterThan(0);
-
-    // control, then divider, then title.
-    for (const [first, second] of [
-      [back, divider],
-      [divider, title],
-    ]) {
-      /* eslint-disable-next-line no-bitwise */
-      const ordered =
-        first.compareDocumentPosition(second) &
-        Node.DOCUMENT_POSITION_FOLLOWING;
-      expect(ordered).to.be.greaterThan(0);
-    }
+    // 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;
 
-    // nile-glyph is not registered on this test page, so the divider has no box to measure; only that the leading axis has not switched it off.
+    /* 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);
-    expect(getComputedStyle(divider).display).to.not.equal('none');
   });
 
-  // The slash separates the back control from the page title, so there is nothing to point at until a title is set.
-  it('51b. leading="back" without a title draws no divider', async () => {
-    const el = await header({ leading: 'back' });
+  // 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;
-    expect(el.shadowRoot!.querySelector('.crumb-divider')).to.be.null;
 
-    el.pageTitle = 'Applications';
+    el.headerBack = false;
     await el.updateComplete;
-    expect(el.shadowRoot!.querySelector('.crumb-divider')).to.exist;
+    expect(el.hasAttribute('headerback')).to.be.false;
+    expect(part(el, 'back')).to.be.null;
   });
 
-  it('52. takes the previous-page label from backLabel', async () => {
+  // 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' });
-    // The label is the control's accessible name, so it lives in the text.
-    expect(part(el, 'back')!.textContent!.trim()).to.equal('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.backLabel = 'Integrations';
+    el.headerBackLabel = 'Integrations';
     await el.updateComplete;
-    expect(part(el, 'back')!.textContent!.trim()).to.equal('Integrations');
+    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; the page navigates itself.
-  it('53. the back control emits nile-header-back, as do goBackHeader() and goBackPage()', async () => {
+  // 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-header-back');
+    const clicked = oneEvent(el, 'nile-click');
     (part(el, 'back') as HTMLButtonElement).click();
-    const fromClick = await clicked;
-    expect(fromClick).to.exist;
+    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-header-back');
+    const called = oneEvent(el, 'nile-click');
     el.goBackHeader();
-    expect(await called).to.exist;
+    const fromCall = (await called) as CustomEvent;
+    expect(fromCall.detail).to.deep.equal({ value: 'back' });
+    expect(fromCall.target).to.equal(el);
 
-    // goBackPage() is the deprecated alias of goBackHeader(): same event.
-    const aliased = oneEvent(el, 'nile-header-back');
-    el.goBackPage();
-    expect(await aliased).to.exist;
+    // 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;
   });
 
-  // The Description axis must not move when the Leading axis changes, so the description is always the stack's second line under the title.
-  it('63. aligns the description to the page title in every leading mode', async () => {
-    for (const leading of ['none', 'back', 'app-icon'] as const) {
+  // 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 title = part(el, 'page-title')!.getBoundingClientRect();
+      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(title.left)
+        Math.round(anchor.getBoundingClientRect().left)
       );
     }
   });
 
-  // Neither leading control lives in the title row, so neither can displace the title away from the description.
-  it('64. renders both leading modes beside the title stack, not in the row', async () => {
-    const backShell = await header({ pageTitle: 'Applications', leading: 'back' });
-    const iconShell = await header({
-      pageTitle: 'Applications',
-      leading: 'app-icon',
-    });
-
-    for (const [el, name] of [
-      [backShell, 'back'],
-      [iconShell, 'app-icon'],
-    ] as const) {
-      const control = part(el, name)!;
+  // 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')!;
-      expect(row.contains(control), name).to.be.false;
-      expect(area.contains(control), name).to.be.true;
+      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 breadcrumb divider travels with the control it belongs to.
-    const divider = backShell.shadowRoot!.querySelector(
-      '.crumb-divider'
-    ) as HTMLElement;
-    const row = backShell.shadowRoot!.querySelector(
-      '.title-row'
-    ) as HTMLElement;
-    expect(row.contains(divider)).to.be.false;
   });
 
-  // The leading element sits on the title's row, and its offset does not move when a description appears.
-  it('65. sits the leading element on the title row, description or not', async () => {
-    for (const leading of ['back', 'app-icon'] as const) {
+  // 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',
@@ -1387,9 +1518,7 @@ describe('NileAppShell — the header title block', () => {
         });
 
         const title = part(el, 'page-title')!.getBoundingClientRect();
-        const box = el.shadowRoot!.querySelector(
-          '.leading'
-        ) as HTMLElement;
+        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.
@@ -1403,6 +1532,120 @@ describe('NileAppShell — the header title block', () => {
     }
   });
 
+  // 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',
@@ -1439,7 +1682,7 @@ describe('NileAppShell — the header title block', () => {
     expect(base.getBoundingClientRect().width).to.equal(32);
   });
 
-  it('54. leading="app-icon" draws a 20px block around the slotted mark', async () => {
+  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;
@@ -1495,7 +1738,7 @@ describe('NileAppShell — the four header heights', () => {
   };
 
   it('55. is 68px with neither axis on, whatever the leading', async () => {
-    for (const leading of ['none', 'back', 'app-icon'] as const) {
+    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.
@@ -1542,8 +1785,8 @@ describe('NileAppShell — the four header heights', () => {
   });
 
   // The three axes are independent, so all twelve combinations land on one of the four heights.
-  it('58. resolves all twelve variants to exactly the four heights', async () => {
-    for (const leading of ['none', 'back', 'app-icon'] as const) {
+  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 */