@aquera/nile-elements 2.0.5 → 2.0.6

package/dist/version.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";return{setters:[],execute:function execute(){"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="1.3.1",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.2";}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// NILE_VERSION is read from the installed @aquera/nile at runtime, so publishing\n// @aquera/nile on its own is enough to update window.nileVersion - consumers do\n// not need a rebuild of this package to pick up a new tokens version.\nimport { NILE_VERSION as INSTALLED_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\nexport const NILE_VERSION = INSTALLED_NILE_VERSION;\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n","// Generated by scripts/build-version.mjs - do not edit by hand.\nexport const NILE_VERSION = '1.3.1';\n"],"names":["window","nileElementsVersion","nileVersion","process","env","NODE_ENV"],"mappings":"wGAcsB,WAAA,EAAA,MAAXA,CAAAA,MACRA,GAAAA,MAAAA,CAAeC,mBALmB,CAAA,2BAAA,CAMlCD,OAAeE,WCfU,CAAA,OAAA,CDgB1BF,MAAOG,CAAAA,OAAAA,CAAUH,MAAOG,CAAAA,OAAAA,EAAW,CAAEC,GAAAA,CAAK,CAAEC,QAAU,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA"}
+{"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.2';\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 @@
-"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="1.3.1",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.2"}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.5",
+  "version": "2.0.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -134,7 +134,12 @@
     "./nile-tree": "./dist/src/nile-tree/index.js",
     "./nile-tree-item": "./dist/src/nile-tree-item/index.js",
     "./nile-wysiwyg-editor": "./dist/src/nile-wysiwyg-editor/index.js",
-    "./nile-wysiwyg-toolbar": "./dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/index.js"
+    "./nile-wysiwyg-toolbar": "./dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/index.js",
+    "./nile-app-shell": "./dist/src/nile-app-shell/index.js",
+    "./nile-app-shell-nav-toggle": "./dist/src/nile-app-shell-nav-toggle/index.js",
+    "./nile-app-shell-side-nav": "./dist/src/nile-app-shell-side-nav/index.js",
+    "./nile-app-shell-main": "./dist/src/nile-app-shell-main/index.js",
+    "./nile-app-shell-panel": "./dist/src/nile-app-shell-panel/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -88,7 +88,7 @@ export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
-export {NilePagination } from './nile-pagination';
+export { NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
@@ -101,12 +101,21 @@ export { NileGridCellItem } from './nile-grid/nile-grid-cell-item';
 export { NileGridHead } from './nile-grid/nile-grid-head';
 export { NileRichTextEditor } from './nile-rich-text-editor';
 export { NileColorPicker } from './nile-color-picker';
-export type { ColorPickerType, SwatchTooltip, PaletteEntry } from './nile-color-picker';
+export type {
+  ColorPickerType,
+  SwatchTooltip,
+  PaletteEntry,
+} from './nile-color-picker';
 export { NileColorSwatch } from './nile-color-swatch';
 
 // Import version utility to set nile version in window object
 import './version';
 
+export { NileAppShell } from './nile-app-shell';
+export { NileAppShellNavToggle } from './nile-app-shell-nav-toggle';
+export { NileAppShellSideNav } from './nile-app-shell-side-nav';
+export { NileAppShellMain } from './nile-app-shell-main';
+export { NileAppShellPanel } from './nile-app-shell-panel';
 export { NileSideBar } from './nile-side-bar';
 export { NileSideBarHeader } from './nile-side-bar-header';
 export { NileSideBarLogo } from './nile-side-bar-logo';
@@ -146,7 +155,10 @@ export { NileMarkdown } from './nile-markdown';
 export { NileMarkdownEditor } from './nile-markdown-editor';
 
 // nile-wysiwyg-editor — ProseMirror-powered rich text editor
-export { NileWysiwygEditor, DEFAULT_TOOLBAR } from './nile-wysiwyg-editor/index';
+export {
+  NileWysiwygEditor,
+  DEFAULT_TOOLBAR,
+} from './nile-wysiwyg-editor/index';
 export type {
   WysiwygChangeDetail,
   WysiwygCommandDetail,
@@ -207,4 +219,4 @@ export type {
   CommandAttrs,
   Alignment,
   PrintOptions,
-} from './nile-wysiwyg-editor/engine';
+} from './nile-wysiwyg-editor/engine';

package/src/internal/glyph.ts

@@ -1,13 +1,24 @@
 import { html, TemplateResult } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * Renders a design-system icon through nile-glyph. ng-prefixed names are
  * stroke-drawn in @aquera/nile-glyph's set; the rest are fill-drawn.
+ *
+ * Pass `color` to override nile-glyph's built-in default ink. Without it the
+ * element writes its own grey onto its inline style, which no parent rule can
+ * outrank — so `currentColor` is how an icon tracks the colour of the control
+ * it sits in.
  */
-export function renderGlyph(name: string, size: number): TemplateResult {
+export function renderGlyph(
+  name: string,
+  size: number,
+  color?: string
+): TemplateResult {
   return html`<nile-glyph
     name=${name}
     size=${size}
     method=${name.startsWith('ng-') ? 'stroke' : 'fill'}
+    color=${ifDefined(color)}
   ></nile-glyph>`;
 }

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export * from './nile-app-shell';

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

@@ -0,0 +1,215 @@
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+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 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';
+import type { NileAppShellPanel } from '../nile-app-shell-panel/nile-app-shell-panel';
+
+/** The compositional form: one child element per region, no slot names. */
+const composed = async (width = 1440, overlayBreakpoint = 0) => {
+  const el = await fixture<NileAppShell>(html`
+    <nile-app-shell
+      style="width: ${width}px; height: 600px;"
+      overlay-breakpoint=${overlayBreakpoint}
+    >
+      <nile-app-shell-side-nav>
+        <span slot="header">Aquera</span>
+        <nav>nav</nav>
+        <span slot="footer">account</span>
+      </nile-app-shell-side-nav>
+
+      <span slot="top-bar">Title</span>
+
+      <nile-app-shell-main>
+        <div class="page">page</div>
+      </nile-app-shell-main>
+
+      <nile-app-shell-panel label="Ask Aquera">
+        <div>answer</div>
+        <div slot="footer">composer</div>
+      </nile-app-shell-panel>
+    </nile-app-shell>
+  `);
+  await waitUntil(() => el.hasAttribute('has-panel'));
+  return el;
+};
+
+const region = <T extends Element>(el: NileAppShell, tag: string) =>
+  el.querySelector<T>(tag)!;
+
+describe('Region components — slot assignment', () => {
+  it('1. each region claims the shell slot it belongs to', async () => {
+    const el = await composed();
+    expect(region(el, 'nile-app-shell-side-nav').getAttribute('slot')).to.equal(
+      'side-nav'
+    );
+    expect(region(el, 'nile-app-shell-panel').getAttribute('slot')).to.equal(
+      'panel'
+    );
+    // Main belongs to the default slot, so it must claim no slot at all.
+    expect(region(el, 'nile-app-shell-main').hasAttribute('slot')).to.be.false;
+  });
+
+  it('2. the shell sees all three regions as filled', async () => {
+    const el = await composed();
+    expect(el.hasAttribute('has-side-nav')).to.be.true;
+    expect(el.hasAttribute('has-panel')).to.be.true;
+    expect(el.panelAvailable).to.be.true;
+  });
+
+  it('3. an explicit slot placement is respected, not overwritten', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nile-app-shell-panel slot="aside">detail</nile-app-shell-panel>
+        <nile-app-shell-main>page</nile-app-shell-main>
+      </nile-app-shell>
+    `);
+    await el.updateComplete;
+    expect(
+      el.querySelector('nile-app-shell-panel')!.getAttribute('slot')
+    ).to.equal('aside');
+    await waitUntil(() => el.hasAttribute('has-aside'));
+    expect(el.hasAttribute('has-panel')).to.be.false;
+  });
+});
+
+describe('nile-app-shell-side-nav', () => {
+  it('4. mirrors the shell rail state onto its own collapsed attribute', async () => {
+    const el = await composed();
+    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');
+    expect(nav.collapsed).to.be.false;
+
+    el.collapseNav();
+    await el.updateComplete;
+    await nav.updateComplete;
+    expect(nav.hasAttribute('collapsed')).to.be.true;
+
+    el.expandNav();
+    await el.updateComplete;
+    await nav.updateComplete;
+    expect(nav.hasAttribute('collapsed')).to.be.false;
+  });
+
+  it('5. follows a rail the shell forces at narrow widths', async () => {
+    const el = await composed(1000);
+    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');
+    el.openPanel();
+    await waitUntil(() => el.navLocked);
+    await nav.updateComplete;
+    expect(nav.hasAttribute('collapsed')).to.be.true;
+    expect(el.navCollapsed).to.be.false; // the lock, not a preference
+  });
+
+  it('6. renders header, body and footer regions', async () => {
+    const el = await composed();
+    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');
+    ['header', 'body', 'footer'].forEach(part => {
+      expect(nav.shadowRoot!.querySelector(`[part~="${part}"]`)).to.exist;
+    });
+  });
+});
+
+describe('nile-app-shell-main', () => {
+  it('7. is the size query container page CSS sizes against', async () => {
+    const el = await composed();
+    const main = region<NileAppShellMain>(el, 'nile-app-shell-main');
+    expect(getComputedStyle(main).containerType).to.equal('inline-size');
+  });
+
+  it('8. no-container drops the containment', async () => {
+    const el = await composed();
+    const main = region<NileAppShellMain>(el, 'nile-app-shell-main');
+    main.noContainer = true;
+    await main.updateComplete;
+    expect(getComputedStyle(main).containerType).to.equal('normal');
+  });
+});
+
+describe('nile-app-shell-panel', () => {
+  it('9. takes over the panel chrome from the shell', async () => {
+    const el = await composed();
+    expect(el.getAttribute('panel-chrome')).to.equal('external');
+    // The shell's own header must not also render.
+    expect(el.shadowRoot!.querySelector('[part~="panel-header"]')).to.not.exist;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    expect(panel.shadowRoot!.querySelector('[part~="header"]')).to.exist;
+    expect(
+      panel.shadowRoot!.querySelector('[part~="title"]')!.textContent!.trim()
+    ).to.equal('Ask Aquera');
+  });
+
+  it('10. the shell keeps its own chrome for plain slotted content', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <div slot="panel">answer</div>
+      </nile-app-shell>
+    `);
+    await waitUntil(() => el.hasAttribute('has-panel'));
+    expect(el.getAttribute('panel-chrome')).to.equal('internal');
+    expect(el.shadowRoot!.querySelector('[part~="panel-header"]')).to.exist;
+  });
+
+  it('11. mirrors the shell panel mode', async () => {
+    const el = await composed(1000, 1280);
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    await waitUntil(() => el.panelMode === 'overlay');
+    await panel.updateComplete;
+    expect(panel.getAttribute('mode')).to.equal('overlay');
+  });
+
+  it('12. its close button closes the panel through the shell', async () => {
+    const el = await composed();
+    el.openPanel();
+    await el.updateComplete;
+
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    const close =
+      panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~="close"]')!;
+    const closed = oneEvent(panel, 'nile-close');
+    close.click();
+    const event = await closed;
+    expect(event).to.exist;
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.false;
+  });
+
+  it('13. no-close and no-header drop those controls', async () => {
+    const el = await composed();
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    panel.noClose = true;
+    panel.noHeader = true;
+    await panel.updateComplete;
+    const close = panel.shadowRoot!.querySelector('[part~="close"]')!;
+    const header = panel.shadowRoot!.querySelector('[part~="header"]')!;
+    expect(getComputedStyle(close).display).to.equal('none');
+    expect(getComputedStyle(header).display).to.equal('none');
+  });
+
+  it('14. shows the footer only when something is slotted into it', async () => {
+    const el = await composed();
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    expect(panel.hasAttribute('has-footer')).to.be.true;
+
+    panel.querySelector('[slot="footer"]')!.remove();
+    await waitUntil(() => !panel.hasAttribute('has-footer'));
+    expect(
+      getComputedStyle(panel.shadowRoot!.querySelector('[part~="footer"]')!)
+        .display
+    ).to.equal('none');
+  });
+
+  it('15. names the region for assistive tech from its label', async () => {
+    const el = await composed();
+    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');
+    expect(panel.getAttribute('role')).to.equal('complementary');
+    expect(panel.getAttribute('aria-label')).to.equal('Ask Aquera');
+
+    panel.label = 'Ask Nile';
+    await panel.updateComplete;
+    expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');
+  });
+});