@aquera/nile-elements 2.0.11 → 2.0.12

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

@@ -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';
@@ -224,6 +225,46 @@ describe('NileAppShell — Ask Aquera panel', () => {
         expect(part(el, 'panel').getAttribute('aria-label')).to.equal('Ask Aquera');
         expect(part(el, 'panel-title').textContent.trim()).to.equal('Ask Aquera');
     });
+    // Amendment A (A-8): Figma's Assistant Title is Text lg/Semibold, 18/28; the shell sets it on the title it renders itself.
+    it('17b. sets its own panel title at 18/28 in text-primary-900', async () => {
+        const tokens = '--ng-font-size-text-lg: 18px; --ng-line-height-text-lg: 28px; --ng-font-weight-semibold: 600; --ng-colors-text-primary-900: rgb(24, 29, 39)';
+        const el = await sized(1440);
+        el.setAttribute('style', `${el.getAttribute('style')}; ${tokens}`);
+        el.openPanel();
+        await el.updateComplete;
+        const own = getComputedStyle(part(el, 'panel-title'));
+        expect(own.fontSize).to.equal('18px');
+        expect(own.lineHeight).to.equal('28px');
+        expect(own.fontWeight).to.equal('600');
+        expect(own.color).to.equal('rgb(24, 29, 39)');
+    });
+    // A-8: a slotted nile-app-shell-panel (part of App Shell) draws the same Figma title: 18/28 SemiBold, text-primary-900.
+    it('17c. sets the nile-app-shell-panel title at 18/28 in text-primary-900', async () => {
+        const tokens = '--ng-font-size-text-sm: 14px; --ng-font-size-text-lg: 18px; --ng-line-height-text-lg: 28px; --ng-font-weight-semibold: 600; --ng-colors-text-primary-900: rgb(24, 29, 39)';
+        const slotted = await fixture(html `
+      <nile-app-shell-panel label="Ask Aquera" style="${tokens}"></nile-app-shell-panel>
+    `);
+        await slotted.updateComplete;
+        const style = getComputedStyle(slotted.shadowRoot.querySelector('.title'));
+        expect(style.fontSize).to.equal('18px');
+        expect(style.lineHeight).to.equal('28px');
+        expect(style.fontWeight).to.equal('600');
+        expect(style.color).to.equal('rgb(24, 29, 39)');
+    });
+    // The enterprise sheet keeps its own panel title: --nile-type-scale-3 and an inherited line height, exactly as before.
+    // Enterprise defines no --ng-* tokens, so the NxtGen line height does not apply there.
+    it('17d. leaves the enterprise nile-app-shell-panel title as it was', async () => {
+        const slotted = await fixture(html `
+      <nile-app-shell-panel
+        label="Ask Aquera"
+        style="--nile-type-scale-3: 14px; line-height: 20px"
+      ></nile-app-shell-panel>
+    `);
+        await slotted.updateComplete;
+        const style = getComputedStyle(slotted.shadowRoot.querySelector('.title'));
+        expect(style.fontSize).to.equal('14px');
+        expect(style.lineHeight).to.equal('20px');
+    });
     it('18. Cmd/Ctrl+J toggles the panel', async () => {
         const el = await sized(1440);
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', ctrlKey: true }));
@@ -575,6 +616,46 @@ describe('NileAppShell — the built-in Ask button', () => {
         expect(getComputedStyle(actions).display).to.not.equal('none');
         expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
     });
+    // Amendment A (M8): the design's Ask is the secondary button, not the filled primary.
+    it('34b. renders Ask as the secondary variant', async () => {
+        const el = await sized(1440);
+        expect(ask(el).getAttribute('variant')).to.equal('secondary');
+    });
+    // Amendment A (M9, M10): app actions, a 16px divider, then Ask, 16px apart; with no app actions, no divider.
+    it('34c. draws a divider before Ask only when the page slots actions, 16px from both', async () => {
+        const alone = await sized(1440);
+        await settled(alone);
+        expect(part(alone, 'ask-rule')).to.be.null;
+        const el = await fixture(html `
+      <nile-app-shell style="width: 1440px; height: 600px; --ng-spacing-xl: 16px;">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <button slot="top-bar-actions" id="one">One</button>
+        <button slot="top-bar-actions" id="two">Two</button>
+        <p>page</p>
+        <div slot="panel">assistant</div>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => el.hasAttribute('has-top-bar-actions'));
+        await el.updateComplete;
+        const rule = part(el, 'ask-rule');
+        expect(rule).to.exist;
+        const one = el.querySelector('#one').getBoundingClientRect();
+        const two = el.querySelector('#two').getBoundingClientRect();
+        const ruleBox = rule.getBoundingClientRect();
+        const askBox = ask(el).getBoundingClientRect();
+        expect(Math.round(ruleBox.height)).to.equal(16);
+        expect(Math.round(two.left - one.right)).to.equal(16);
+        expect(Math.round(ruleBox.left - two.right)).to.equal(16);
+        expect(Math.round(askBox.left - ruleBox.left)).to.equal(16);
+        // Order: the page's actions, the divider, then Ask.
+        /* eslint-disable-next-line no-bitwise */
+        const ruleBeforeAsk = rule.compareDocumentPosition(ask(el)) & Node.DOCUMENT_POSITION_FOLLOWING;
+        expect(ruleBeforeAsk).to.be.greaterThan(0);
+        el.noAsk = true;
+        await el.updateComplete;
+        expect(part(el, 'ask-rule'), 'no Ask, no divider').to.be.null;
+    });
     // The shell draws its icon controls as bare glyphs via ::part(base), overriding nile-button's circle and ghost surface.
     const utilityBase = (el, name) => part(el, name).shadowRoot.querySelector('[part~="base"]');
     it('35. draws its icon controls with no resting surface', async () => {
@@ -769,6 +850,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',
@@ -779,6 +861,9 @@ const HEADER_TOKENS = [
     '--ng-font-size-text-md: 16px',
     '--ng-line-height-text-md: 24px',
 ].join('; ');
+const LEADINGS = ['none', 'back', 'app-icon', 'back+app-icon'];
+const hasBack = (leading) => leading === 'back' || leading === 'back+app-icon';
+const hasIcon = (leading) => leading === 'app-icon' || leading === 'back+app-icon';
 // A shell carrying whatever header axes a test asks for; an unset axis is the empty string, meaning "absent".
 const header = async (axes = {}) => {
     const el = await fixture(html `
@@ -787,13 +872,16 @@ const header = async (axes = {}) => {
       .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>
@@ -805,6 +893,10 @@ const header = async (axes = {}) => {
   `);
     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;
 };
@@ -812,7 +904,8 @@ const header = async (axes = {}) => {
 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;
@@ -848,8 +941,8 @@ describe('NileAppShell — the header title block', () => {
         expect(part(el, 'badge')).to.exist;
         expect(el.hasAttribute('has-description')).to.be.true;
     });
-    // Leading is the exception: a back control stands on its own but brings no empty title stack.
-    it('75. mounts a leading control on its own, without an empty title stack', async () => {
+    // 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;
@@ -1015,120 +1108,150 @@ describe('NileAppShell — the header title block', () => {
         expect(el.hasAttribute('has-description')).to.be.false;
         expect(part(el, 'description')).to.be.null;
     });
-    it('50. leading defaults to none and draws neither control', async () => {
+    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');
         const title = part(el, 'page-title');
         expect(back).to.exist;
         expect(back.tagName).to.equal('BUTTON');
         expect(back.getAttribute('type')).to.equal('button');
-        expect(divider).to.exist;
-        expect(divider.getAttribute('aria-hidden')).to.equal('true');
         // The icons go through nile-glyph, so assert the glyph, not an <svg>.
-        const chevron = back.querySelector('nile-glyph');
-        expect(chevron).to.exist;
-        expect(chevron.getAttribute('name')).to.equal('ng-chevron-left');
-        expect(divider.querySelector('nile-glyph').getAttribute('name')).to.equal('ng-slash');
-        // glyph before label, inside the control.
-        const label = back.querySelector('span');
+        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 glyphIsFirst = chevron.compareDocumentPosition(label) & Node.DOCUMENT_POSITION_FOLLOWING;
-        expect(glyphIsFirst).to.be.greaterThan(0);
-        // control, then divider, then title.
-        for (const [first, second] of [
-            [back, divider],
-            [divider, title],
-        ]) {
-            /* eslint-disable-next-line no-bitwise */
-            const ordered = first.compareDocumentPosition(second) &
-                Node.DOCUMENT_POSITION_FOLLOWING;
-            expect(ordered).to.be.greaterThan(0);
-        }
-        // nile-glyph is not registered on this test page, so the divider has no box to measure; only that the leading axis has not switched it off.
+        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(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');
-        el.backLabel = 'Integrations';
+        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(part(el, 'back').textContent.trim()).to.equal('Integrations');
-    });
-    // The shell owns no history, so the control only announces the press; the page navigates itself.
-    it('53. the back control emits nile-header-back, as do goBackHeader() and goBackPage()', async () => {
+        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' });
-        const clicked = oneEvent(el, 'nile-header-back');
+        let retired = 0;
+        el.addEventListener('nile-header-back', () => {
+            retired += 1;
+        });
+        const clicked = oneEvent(el, 'nile-click');
         part(el, 'back').click();
-        const fromClick = await clicked;
-        expect(fromClick).to.exist;
-        const called = oneEvent(el, 'nile-header-back');
+        const fromClick = (await clicked);
+        expect(fromClick.detail).to.deep.equal({ value: 'back' });
+        expect(fromClick.target).to.equal(el);
+        expect(fromClick.bubbles).to.be.true;
+        expect(fromClick.composed).to.be.true;
+        const called = oneEvent(el, 'nile-click');
         el.goBackHeader();
-        expect(await called).to.exist;
-        // goBackPage() is the deprecated alias of goBackHeader(): same event.
-        const aliased = oneEvent(el, 'nile-header-back');
-        el.goBackPage();
-        expect(await aliased).to.exist;
+        const fromCall = (await called);
+        expect(fromCall.detail).to.deep.equal({ value: 'back' });
+        expect(fromCall.target).to.equal(el);
+        // nile-header-back and goBackPage() are gone in 2.0.12 (Amendment A, A-12).
+        expect(retired).to.equal(0);
+        expect(el.goBackPage).to.be.undefined;
         // It is the page's event, not the panel's: nothing about the panel moves.
         expect(el.panelOpen).to.be.false;
     });
-    // 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']) {
+    // A nile-click bubbling up from page content must not read as the header back press.
+    it('53b. a nile-click from slotted content is distinguishable by its target', async () => {
+        const el = await header({ pageTitle: 'Applications', leading: 'back' });
+        const page = el.querySelector('p');
+        const seen = [];
+        el.addEventListener('nile-click', e => seen.push(e.target));
+        page.dispatchEvent(new CustomEvent('nile-click', {
+            bubbles: true,
+            composed: true,
+            detail: { value: 'back' },
+        }));
+        part(el, 'back').click();
+        expect(seen).to.deep.equal([page, el]);
+    });
+    // The four combinations are independent; with an app icon the description sits under the icon, otherwise under the title.
+    it('63. aligns the description under the app icon when there is one, else the title', async () => {
+        for (const leading of LEADINGS) {
             const el = await header({
                 pageTitle: 'Applications',
                 description: 'Manage the apps connected to this tenant',
                 leading,
             });
-            const 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));
+            expect(Math.round(description.left), leading).to.equal(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'],
-        ]) {
-            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');
             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');
-        const row = backShell.shadowRoot.querySelector('.title-row');
-        expect(row.contains(divider)).to.be.false;
-    });
-    // The leading element sits on the title's row, and its offset does not move when a description appears.
-    it('65. sits the leading element on the title row, description or not', async () => {
-        for (const leading of ['back', 'app-icon']) {
+    });
+    // The arrow sits on the title's row, and its offset does not move when a description appears.
+    it('65. sits the back arrow on the title row, description or not', async () => {
+        for (const leading of ['back', 'back+app-icon']) {
             for (const description of ['', 'Manage the apps connected here']) {
                 const el = await header({
                     pageTitle: 'Applications',
@@ -1136,7 +1259,7 @@ describe('NileAppShell — the header title block', () => {
                     description,
                 });
                 const title = part(el, 'page-title').getBoundingClientRect();
-                const box = el.shadowRoot.querySelector('.leading');
+                const box = el.shadowRoot.querySelector('.back-line');
                 const label = `${leading} description=${!!description}`;
                 // The line box is the title's own, and it starts where the title does.
                 expect(Math.round(box.getBoundingClientRect().top), label).to.equal(Math.round(title.top));
@@ -1144,6 +1267,101 @@ 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(html `
+      <nile-app-shell style="width: 1176px; height: 800px; ${HEADER_TOKENS}">
+        <nav slot="side-nav">nav</nav>
+        <span slot="app-icon" id="mark">A</span>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+        await waitUntil(() => bare.hasAttribute('has-app-icon'));
+        await bare.updateComplete;
+        expect(part(bare, 'title-area')).to.exist;
+        expect(part(bare, 'app-icon').getBoundingClientRect().width).to.equal(20);
+        // Removing the mark takes the icon (and the block it alone mounted) away again.
+        bare.querySelector('#mark').remove();
+        await waitUntil(() => !bare.hasAttribute('has-app-icon'));
+        await bare.updateComplete;
+        expect(part(bare, 'title-area')).to.be.null;
+    });
+    // Amendment A (M11): the inactive tab colour is scoped to the shell's strip; a standalone group keeps its defaults.
+    it('65e. colours the inactive header tabs through the shell only', async () => {
+        const colours = [
+            '--ng-colors-fg-brand-primary-alt: rgb(21, 94, 239)',
+            '--ng-colors-text-brand-secondary-700: rgb(0, 78, 235)',
+            '--ng-colors-text-quaternary-500: rgb(113, 118, 128)',
+            '--ng-colors-text-secondary-700: rgb(65, 70, 81)',
+        ].join('; ');
+        const el = await header({ pageTitle: 'Applications', tabs: true });
+        el.setAttribute('style', `${el.getAttribute('style')}; ${colours}`);
+        await el.updateComplete;
+        const group = el.querySelector('nile-nav-tab-group');
+        const inactive = el.querySelectorAll('nile-nav-tab')[1];
+        // Known limitation (M12, A-7): the shell sets no indicator colour, because nile-nav-tab-group's top indicator
+        // hard-codes its token in its own shadow tree; the indicator keeps the group's default.
+        const indicatorOf = (g) => getComputedStyle(g.shadowRoot.querySelector('.nav-tab-group__indicator'))
+            .borderBottomColor;
+        expect(indicatorOf(group)).to.equal('rgb(0, 78, 235)');
+        // The inactive label is remapped inside the shell only: nile-nav-tab itself is unchanged and still paints
+        // var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)); the shell points that fallback token at quaternary-500.
+        // (The painted ink sits inside nile-link, which this runner does not render; it is checked in the browser instead.)
+        const secondaryOf = (node) => getComputedStyle(node).getPropertyValue('--ng-colors-text-secondary-700').trim();
+        expect(secondaryOf(inactive)).to.equal('rgb(113, 118, 128)');
+        const sheets = customElements.get('nile-nav-tab').styles;
+        const tabStyles = [].concat(sheets).map(sheet => sheet.cssText).join('\n');
+        expect(tabStyles).to.include('color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));');
+        expect(tabStyles, 'no new hook on the shared component').to.not.include('--nile-nav-tab-text-color:');
+        // Nothing else in the shell's tree is remapped.
+        expect(secondaryOf(el)).to.equal('rgb(65, 70, 81)');
+        // Outside the shell nothing changes.
+        const standalone = await fixture(html `
+      <nile-nav-tab-group style="${colours}">
+        <nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
+        <nile-nav-tab slot="nav" panel="approvals">Approvals</nile-nav-tab>
+      </nile-nav-tab-group>
+    `);
+        const loneTab = standalone.querySelectorAll('nile-nav-tab')[1];
+        expect(secondaryOf(loneTab), 'the global default is untouched').to.equal('rgb(65, 70, 81)');
+        await standalone.updateComplete;
+        expect(indicatorOf(standalone), 'a standalone group paints its own default').to.equal('rgb(0, 78, 235)');
+    });
+    it('65d. colours the description text-quaternary-500', async () => {
+        const el = await header({
+            pageTitle: 'Applications',
+            description: 'Manage the apps connected here',
+        });
+        el.style.setProperty('--ng-colors-text-quaternary-500', 'rgb(113, 118, 128)');
+        el.style.setProperty('--ng-colors-text-tertiary-600', 'rgb(1, 2, 3)');
+        expect(getComputedStyle(part(el, 'description')).color).to.equal('rgb(113, 118, 128)');
+    });
     it('66. centres a 20px app icon in the 24px title row, two pixels down', async () => {
         const el = await header({
             pageTitle: 'Applications',
@@ -1169,7 +1387,7 @@ describe('NileAppShell — the header title block', () => {
         const base = toggle.shadowRoot.querySelector('[part~="base"]');
         expect(base.getBoundingClientRect().width).to.equal(32);
     });
-    it('54. leading="app-icon" draws a 20px block around the slotted mark', async () => {
+    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;
@@ -1212,7 +1430,7 @@ describe('NileAppShell — the four header heights', () => {
         return bottom - top;
     };
     it('55. is 68px with neither axis on, whatever the leading', async () => {
-        for (const leading of ['none', 'back', 'app-icon']) {
+        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.
@@ -1250,8 +1468,8 @@ describe('NileAppShell — the four header heights', () => {
         expect(headerBlock(described)).to.equal(109);
     });
     // The three axes are independent, so all twelve combinations land on one of the four heights.
-    it('58. resolves all twelve variants to exactly the four heights', async () => {
-        for (const leading of ['none', 'back', 'app-icon']) {
+    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 */