@aquera/nile-elements 2.0.10 → 2.0.11

package/dist/version.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var e;function n(){var _ref;return(_ref=function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null;}catch(_unused){return null;}}())!==null&&_ref!==void 0?_ref:"1.3.3";}return{setters:[],execute:function execute(){if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:function get(){return e!==null&&e!==void 0?e:n();},set:function set(n){e=n;}}),window.process=window.process||{env:{NODE_ENV:"production"}};}}};});
+System.register([],function(_export,_context){"use strict";var e;function n(){var _ref;return(_ref=function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null;}catch(_unused){return null;}}())!==null&&_ref!==void 0?_ref:"1.3.4";}return{setters:[],execute:function execute(){if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:function get(){return e!==null&&e!==void 0?e:n();},set:function set(n){e=n;}}),window.process=window.process||{env:{NODE_ENV:"production"}};}}};});
 //# sourceMappingURL=version.cjs.js.map

package/dist/version.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts","../../nile/lib/version.js"],"sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\n\nfunction readStylesheetNileVersion(): string | null {\n  if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {\n    return null;\n  }\n\n  try {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue('--nile-version')\n      .trim()\n      .replace(/^[\"']|[\"']$/g, '');\n\n    return value || null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the\n * page, falling back to the @aquera/nile bundled into this package when no\n * stamped stylesheet is present.\n *\n * This is the canonical runtime API. It resolves on every call rather than\n * caching, so it is correct even when the Nile stylesheet is added to the page\n * after this module evaluates - which is the common case, and why no\n * module-evaluation-time snapshot of it is exported.\n */\nexport function getNileVersion(): string {\n  return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;\n}\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n\n  // A getter rather than a value, so window.nileVersion reflects whichever\n  // stylesheet is loaded at read time regardless of script/style ordering.\n  let override: string | null = null;\n  Object.defineProperty(window, 'nileVersion', {\n    configurable: true,\n    get: () => override ?? getNileVersion(),\n    set: (value: string) => {\n      override = value;\n    },\n  });\n\n  (window as any).process = (window as any).process || {\n    env: { NODE_ENV: 'production' },\n  };\n}\n","// Generated by scripts/build-version.mjs - do not edit by hand.\nexport const NILE_VERSION = '1.3.3';\n"],"names":["getNileVersion","n","_ref","window","getComputedStyle","document","documentElement","getPropertyValue","trim","replace","_unused","readStylesheetNileVersion","setters","execute","nileElementsVersion","override","Object","defineProperty","configurable","get","set","value","process","env","NODE_ENV"],"mappings":"yEA4CgBA,CAAAA,CACdC,CAAA,CAAA,KAAAC,IAAA,CAAA,OAAAA,IAAA,CA5BF,UACE,CAAA,GAAsB,WAAXC,EAAAA,MAAAA,CAAAA,MAAAA,EAAsD,UAArBC,EAAAA,MAAAA,CAAAA,gBAAAA,CAC1C,MAAO,KAAA,CAGT,GAME,CAAA,MALcA,CAAAA,iBAAiBC,QAASC,CAAAA,eAAAA,CAAAA,CACrCC,gBAAiB,CAAA,gBAAA,CAAA,CACjBC,IACAC,CAAAA,CAAAA,CAAAA,OAAAA,CAAQ,cAAgB,CAAA,EAAA,CAAA,EAEX,IACjB,EAAC,MAAAC,OAAA,CACA,CAAA,MAAO,KACR,EACH,CAaSC,CAAAA,CAAAA,UAAAA,IAAAA,UAAAA,IAAAA,CC5CmB,OD6C5B,EAGA,OAAAC,OAAA,IAAAC,OAAA,UAAAA,QAAA,KAAsB,WAAXV,EAAAA,MAAAA,CAAAA,MAAAA,CAAwB,CAChCA,MAAAA,CAAeW,mBAnCmB,CAAA,2BAAA,CAuC/BC,CAAAA,CAA0B,IAC9BC,CAAAA,MAAAA,CAAOC,cAAed,CAAAA,MAAAA,CAAQ,aAAe,CAAA,CAC3Ce,cAAc,CACdC,CAAAA,GAAAA,CAAK,QAALA,CAAAA,GAAAA,CAAAA,QAAWJ,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAYf,CACvBoB,CAAAA,CAAAA,GAAAA,GAAAA,CAAMC,QAAND,CAAAA,GAAAA,CAAMC,CACJN,CAAAA,CAAAA,CAAAA,CAAWM,CAAK,EAInBlB,CAAAA,CAAAA,CAAAA,MAAAA,CAAemB,OAAWnB,CAAAA,MAAAA,CAAemB,OAAW,EAAA,CACnDC,GAAK,CAAA,CAAEC,SAAU,YAErB,CAAA,CAAA,EAAA"}
+{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts","../../nile/lib/version.js"],"sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\n\nfunction readStylesheetNileVersion(): string | null {\n  if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {\n    return null;\n  }\n\n  try {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue('--nile-version')\n      .trim()\n      .replace(/^[\"']|[\"']$/g, '');\n\n    return value || null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the\n * page, falling back to the @aquera/nile bundled into this package when no\n * stamped stylesheet is present.\n *\n * This is the canonical runtime API. It resolves on every call rather than\n * caching, so it is correct even when the Nile stylesheet is added to the page\n * after this module evaluates - which is the common case, and why no\n * module-evaluation-time snapshot of it is exported.\n */\nexport function getNileVersion(): string {\n  return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;\n}\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n\n  // A getter rather than a value, so window.nileVersion reflects whichever\n  // stylesheet is loaded at read time regardless of script/style ordering.\n  let override: string | null = null;\n  Object.defineProperty(window, 'nileVersion', {\n    configurable: true,\n    get: () => override ?? getNileVersion(),\n    set: (value: string) => {\n      override = value;\n    },\n  });\n\n  (window as any).process = (window as any).process || {\n    env: { NODE_ENV: 'production' },\n  };\n}\n","// Generated by scripts/build-version.mjs - do not edit by hand.\nexport const NILE_VERSION = '1.3.4';\n"],"names":["getNileVersion","n","_ref","window","getComputedStyle","document","documentElement","getPropertyValue","trim","replace","_unused","readStylesheetNileVersion","setters","execute","nileElementsVersion","override","Object","defineProperty","configurable","get","set","value","process","env","NODE_ENV"],"mappings":"yEA4CgBA,CAAAA,CACdC,CAAA,CAAA,KAAAC,IAAA,CAAA,OAAAA,IAAA,CA5BF,UACE,CAAA,GAAsB,WAAXC,EAAAA,MAAAA,CAAAA,MAAAA,EAAsD,UAArBC,EAAAA,MAAAA,CAAAA,gBAAAA,CAC1C,MAAO,KAAA,CAGT,GAME,CAAA,MALcA,CAAAA,iBAAiBC,QAASC,CAAAA,eAAAA,CAAAA,CACrCC,gBAAiB,CAAA,gBAAA,CAAA,CACjBC,IACAC,CAAAA,CAAAA,CAAAA,OAAAA,CAAQ,cAAgB,CAAA,EAAA,CAAA,EAEX,IACjB,EAAC,MAAAC,OAAA,CACA,CAAA,MAAO,KACR,EACH,CAaSC,CAAAA,CAAAA,UAAAA,IAAAA,UAAAA,IAAAA,CC5CmB,OD6C5B,EAGA,OAAAC,OAAA,IAAAC,OAAA,UAAAA,QAAA,KAAsB,WAAXV,EAAAA,MAAAA,CAAAA,MAAAA,CAAwB,CAChCA,MAAAA,CAAeW,mBAnCmB,CAAA,2BAAA,CAuC/BC,CAAAA,CAA0B,IAC9BC,CAAAA,MAAAA,CAAOC,cAAed,CAAAA,MAAAA,CAAQ,aAAe,CAAA,CAC3Ce,cAAc,CACdC,CAAAA,GAAAA,CAAK,QAALA,CAAAA,GAAAA,CAAAA,QAAWJ,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAYf,CACvBoB,CAAAA,CAAAA,GAAAA,GAAAA,CAAMC,QAAND,CAAAA,GAAAA,CAAMC,CACJN,CAAAA,CAAAA,CAAAA,CAAWM,CAAK,EAInBlB,CAAAA,CAAAA,CAAAA,MAAAA,CAAemB,OAAWnB,CAAAA,MAAAA,CAAemB,OAAW,EAAA,CACnDC,GAAK,CAAA,CAAEC,SAAU,YAErB,CAAA,CAAA,EAAA"}

package/dist/version.esm.js

@@ -1 +1 @@
-function n(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.3"}if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??n(),set:n=>{e=n}}),window.process=window.process||{env:{NODE_ENV:"production"}}}
+function n(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??n(),set:n=>{e=n}}),window.process=window.process||{env:{NODE_ENV:"production"}}}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/plop-templates/lit/lit.test.ts.hbs

@@ -0,0 +1,22 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-{{name}}';
+import type { Nile{{pascalCase name}} } from './nile-{{name}}';
+
+// One test per acceptance criterion in kb/specs/nile-{{name}}.md (nile-component skill).
+describe('Nile{{pascalCase name}}', () => {
+  it('renders', async () => {
+    const el = await fixture<Nile{{pascalCase name}}>(html`<nile-{{name}}></nile-{{name}}>`);
+    expect(el).to.exist;
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('exposes the base part', async () => {
+    const el = await fixture<Nile{{pascalCase name}}>(html`<nile-{{name}}></nile-{{name}}>`);
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist;
+  });
+
+  it('renders slotted content', async () => {
+    const el = await fixture<Nile{{pascalCase name}}>(html`<nile-{{name}}><span>content</span></nile-{{name}}>`);
+    expect(el.querySelector('span')).to.exist;
+  });
+});

package/plop-templates/lit/lit.ts.hbs

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
-import { customElement, property} from 'lit/decorators.js';
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {styles} from './nile-{{name}}.css';
 import NileElement from '../internal/nile-element';
 
@@ -15,7 +15,11 @@ import NileElement from '../internal/nile-element';
  * Nile {{name}} component.
  *
  * @tag nile-{{name}}
+ * @summary TODO: one sentence on what nile-{{name}} is for.
  *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
  */
 @customElement('nile-{{name}}')
 export class Nile{{pascalCase name}} extends NileElement {
@@ -34,12 +38,13 @@ export class Nile{{pascalCase name}} extends NileElement {
 
 	/**
 	 * Render method
-	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
 		return html`
-			<slot> </slot>
-			`;
+			<div part="base">
+				<slot></slot>
+			</div>
+		`;
 	}
 
 	/* #endregion */

package/plopfile.js

@@ -41,6 +41,18 @@ export default function (plop) {
           return JSON.stringify(packageJson, null, 2);
         },
       },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/nile-{{name}}.test.ts',
+        templateFile: 'plop-templates/lit/lit.test.ts.hbs',
+      },
+      // nile-component skill: print the definition of done for the new component
+      (data) =>
+        [
+          `nile-${data.name} scaffolded. Definition of done: .claude/skills/nile-component/references/checklist.md`,
+          `  spec:  kb/specs/nile-${data.name}.md (from kb/specs/COMPONENT-SPEC-TEMPLATE.md)`,
+          `  audit: python3 .claude/skills/nile-component/scripts/check-component.py nile-${data.name} --diff master --change-type new`,
+        ].join('\n'),
     ],
   });
 }

package/src/internal/app-shell-utility-control-styles.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * The app shell's utility-control recipe, shared by the shell, the panel and the nav toggle.
+ * Restyles a `.utility-control` nile-button from its 38px ghost chip to a bare glyph via ::part,
+ * sized to --nile-app-shell-utility-size with a 32px fallback for mounting outside a shell.
+ */
+export const utilityControlStyles = css`
+  .utility-control::part(base) {
+    width: var(--nile-app-shell-utility-size, 32px);
+    height: var(--nile-app-shell-utility-size, 32px);
+    min-width: var(--nile-app-shell-utility-size, 32px);
+    min-height: var(--nile-app-shell-utility-size, 32px);
+    padding: 0;
+    background: transparent;
+    border-color: transparent;
+  }
+
+  /* Restate the hover surface: the button's own hover rule loses to the resting ::part rule above. */
+  .utility-control:hover:not([disabled])::part(base) {
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
+  }
+`;

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

@@ -3,6 +3,9 @@ import './nile-app-shell';
 import '../nile-app-shell-side-nav/nile-app-shell-side-nav';
 import '../nile-app-shell-main/nile-app-shell-main';
 import '../nile-app-shell-panel/nile-app-shell-panel';
+import '../nile-side-bar/nile-side-bar';
+import '../nile-nav-tab-group/nile-nav-tab-group';
+import '../nile-nav-tab/nile-nav-tab';
 import type { NileAppShell } from './nile-app-shell';
 import type { NileAppShellSideNav } from '../nile-app-shell-side-nav/nile-app-shell-side-nav';
 import type { NileAppShellMain } from '../nile-app-shell-main/nile-app-shell-main';
@@ -212,4 +215,249 @@ describe('nile-app-shell-panel', () => {
     await panel.updateComplete;
     expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');
   });
+
+  it('16. holds the back control until back asks for it', async () => {
+    const el = await composed();
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    const back = () => panel.shadowRoot!.querySelector('[part~="back"]');
+    const mark = panel.shadowRoot!.querySelector('.mark')!;
+    // Not rendered at all in the root view, so no stylesheet override can surface it.
+    expect(back()).to.not.exist;
+    expect(getComputedStyle(mark).display).to.not.equal('none');
+
+    panel.back = true;
+    await panel.updateComplete;
+    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('17. its back control emits nile-back and leaves the panel open', async () => {
+    const el = await composed();
+    el.openPanel();
+    await el.updateComplete;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    panel.back = true;
+    panel.backLabel = 'Back to chats';
+    await panel.updateComplete;
+
+    const back =
+      panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~="back"]')!;
+    expect(back.getAttribute('aria-label')).to.equal('Back to chats');
+
+    const went = oneEvent(panel, 'nile-back');
+    back.click();
+    expect(await went).to.exist;
+    await el.updateComplete;
+    // The panel keeps no view stack, so going back is not closing.
+    expect(el.panelOpen).to.be.true;
+  });
+
+  // Birat's review: a page listening on the shell for nile-panel-back must not go deaf when it slots this panel.
+  it('82. its back control also emits nile-panel-back, once, and it reaches the shell', async () => {
+    const el = await composed();
+    el.openPanel();
+    await el.updateComplete;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    panel.back = true;
+    await panel.updateComplete;
+
+    const order: string[] = [];
+    const log = (e: Event) => order.push(e.type);
+    el.addEventListener('nile-back', log);
+    el.addEventListener('nile-panel-back', log);
+
+    const reached = oneEvent(el, 'nile-panel-back');
+    panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~="back"]')!.click();
+    const event = await reached;
+
+    // Bubbles and composed, so a listener outside the shadow roots hears it.
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    // One press: nile-back then nile-panel-back, each exactly once.
+    expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);
+
+    order.length = 0;
+    panel.goBack();
+    expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);
+  });
+
+  // The panel draws its header controls as bare glyphs via ::part(base), overriding nile-button's circle and ghost surface.
+  it('18. draws its header controls bare, in the utility box', async () => {
+    const el = await composed();
+    // A closed panel is display:none, and a hidden box measures zero.
+    el.openPanel();
+    await el.updateComplete;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    panel.back = true;
+    await panel.updateComplete;
+
+    /*
+     * The contract is "the control fills the utility box", not "the control is
+     * 32px": --nile-app-shell-utility-size is a token chain
+     * (--nile-spacing-4xl, else --ng-spacing-4xl -> --ng-spacing-8), and both
+     * sheets happen to land on 32 today. Reading the resolved value keeps this
+     * honest if either sheet moves. The || 32 is the stylesheet's own literal
+     * floor, for this unthemed fixture where neither token is defined.
+     */
+    const utility =
+      parseFloat(
+        getComputedStyle(panel).getPropertyValue('--nile-app-shell-utility-size')
+      ) || 32;
+    expect(utility, 'the utility box resolves to a real size').to.be.above(0);
+
+    for (const name of ['back', 'close']) {
+      const control = panel.shadowRoot!.querySelector(`[part~="${name}"]`)!;
+      const base = control.shadowRoot!.querySelector('[part~="base"]')!;
+      expect(getComputedStyle(base).backgroundColor).to.equal(
+        'rgba(0, 0, 0, 0)'
+      );
+      const box = base.getBoundingClientRect();
+      expect(box.width, `${name} width`).to.equal(utility);
+      expect(box.height, `${name} height`).to.equal(utility);
+    }
+  });
+
+  // The panel mounts in the shell's light DOM but sizes its header as its own box, independent of the page header.
+  it('19. sizes its header independently of the page header', async () => {
+    const el = await composed();
+    el.openPanel();
+    await el.updateComplete;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    const header = () =>
+      panel.shadowRoot!.querySelector('.header') as HTMLElement;
+
+    expect(header().getBoundingClientRect().height).to.equal(56);
+
+    // The Description axis moves the page header to 76px, but the panel's header must not follow it.
+    el.pageTitle = 'Connected applications';
+    el.description = 'Everything connected to Aquera';
+    await el.updateComplete;
+    await panel.updateComplete;
+
+    expect(el.hasAttribute('has-description')).to.be.true;
+    expect(header().getBoundingClientRect().height).to.equal(56);
+  });
+
+  it('20. keeps its 56px header when mounted outside a shell', async () => {
+    // No shell, so the literal fallback is the floor; the stray top-bar height stands in for a page that sets it globally.
+    const panel = await fixture<NileAppShellPanel>(html`
+      <nile-app-shell-panel
+        label="Ask Aquera"
+        style="--nile-app-shell-top-bar-height: 76px;"
+      >
+        <div>answer</div>
+      </nile-app-shell-panel>
+    `);
+
+    const header = panel.shadowRoot!.querySelector('.header') as HTMLElement;
+    expect(header.getBoundingClientRect().height).to.equal(56);
+  });
+});
+
+// The shell's nav track mirrors nile-side-bar's per-theme width, so ::slotted width:100% remains only so a raw nav still fills the track.
+describe('nile-side-bar in the shell track', () => {
+  const ENTERPRISE = '--nile-width-240px: 240px; --nile-width-70px: 70px;';
+  const NXTGEN = '--ng-spacing-296: 296px; --ng-spacing-68: 68px;';
+
+  const railedTo = async (tokens: string, expanded: number, rail: number) => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px; ${tokens}">
+        <nile-side-bar slot="side-nav" position="left"></nile-side-bar>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    await waitUntil(() => el.hasAttribute('has-side-nav'));
+    const bar = el.querySelector('nile-side-bar')!;
+    const width = () => Math.round(bar.getBoundingClientRect().width);
+
+    expect(width(), 'expanded').to.equal(expanded);
+
+    el.collapseNav();
+    await el.updateComplete;
+    await waitUntil(() => width() === rail, 'the rail never settled', {
+      timeout: 2000,
+      interval: 50,
+    });
+    expect(width(), 'railed').to.equal(rail);
+  };
+
+  it('21. matches the deployed enterprise side bar: 240 / 70', async () => {
+    await railedTo(ENTERPRISE, 240, 70);
+  });
+
+  it('22. matches the deployed nxtgen side bar: 296 / 68', async () => {
+    await railedTo(NXTGEN, 296, 68);
+  });
+
+  // The slotted width is not !important, yet the shell's ::slotted rule still beats the side bar's own :host width, so overriding the documented track properties resizes the bar with the track.
+  it('83. follows an overridden track width: 200 / 50', async () => {
+    const overrides =
+      '--nile-app-shell-side-nav-width: 200px; --nile-app-shell-side-nav-rail-width: 50px;';
+    await railedTo(`${ENTERPRISE} ${overrides}`, 200, 50);
+    await railedTo(`${NXTGEN} ${overrides}`, 200, 50);
+  });
+});
+
+/*
+ * The HTML API, driven from markup. pageTitle, backLabel, noTabs, panelBack
+ * and panelBackLabel deliberately declare no `attribute:` option, so Lit
+ * observes the lowercased property name (pagetitle, notabs, ...) and markup
+ * writes them camelCase — HTML lowercases `pageTitle=` to match.
+ *
+ * Every other test in this suite sets these as JS properties, which works no
+ * matter what the attribute is called — so if a kebab `attribute:` option is
+ * added back, nothing else fails and `<nile-app-shell pageTitle="...">`
+ * silently does nothing. This fixture is markup-only on purpose: it is the
+ * one that breaks if that happens.
+ */
+describe('nile-app-shell — the attributes the docs advertise', () => {
+  it('23. reads its title block and switches from camelCase markup', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell
+        style="width: 1440px; height: 600px;"
+        pageTitle="Applications"
+        backLabel="Integrations"
+        leading="back"
+        noTabs
+        panelBack
+        panelBackLabel="Chat history"
+      >
+        <nav slot="side-nav">nav</nav>
+        <nile-nav-tab-group slot="tabs">
+          <nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
+        </nile-nav-tab-group>
+        <p>page</p>
+        <div slot="panel">assistant</div>
+      </nile-app-shell>
+    `);
+    await el.updateComplete;
+
+    // Each attribute reached its property.
+    expect(el.pageTitle, 'pageTitle').to.equal('Applications');
+    expect(el.backLabel, 'backLabel').to.equal('Integrations');
+    expect(el.noTabs, 'noTabs').to.be.true;
+    expect(el.panelBack, 'panelBack').to.be.true;
+    expect(el.panelBackLabel, 'panelBackLabel').to.equal('Chat history');
+
+    // And had the effect the attribute promises, not just the assignment.
+    const title = el.shadowRoot!.querySelector('[part~="page-title"]');
+    expect(title!.textContent!.trim()).to.equal('Applications');
+    expect(el.tabsVisible, 'noTabs hides the strip').to.be.false;
+
+    // The reflecting pair round-trip to the lowercased name, not to kebab.
+    expect(el.hasAttribute('notabs')).to.be.true;
+    expect(el.hasAttribute('panelback')).to.be.true;
+    expect(el.hasAttribute('no-tabs')).to.be.false;
+    el.noTabs = false;
+    el.panelBack = false;
+    await el.updateComplete;
+    expect(el.hasAttribute('notabs'), 'notabs is removed again').to.be.false;
+    expect(el.hasAttribute('panelback')).to.be.false;
+  });
 });