@aquera/nile-elements 2.0.6 → 2.0.8

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.test.d.ts

@@ -0,0 +1 @@
+import './nile-side-bar-footer';

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.test.js

@@ -0,0 +1,42 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-side-bar-footer';
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+/**
+ * The surface color comes from a design token, which a bare fixture does not
+ * load — so pin it on a wrapper to have something concrete to assert against.
+ */
+async function withToken(markup) {
+    const wrapper = await fixture(html `<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`);
+    const el = wrapper.querySelector('nile-side-bar-footer');
+    await el.updateComplete;
+    return el;
+}
+const backgroundOf = (el) => getComputedStyle(el).backgroundColor;
+describe('NileSideBarFooter — background', () => {
+    it('1. defaults to "default" and reflects the attribute', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        expect(el.background).to.equal('default');
+        expect(el.getAttribute('background')).to.equal('default');
+    });
+    it('2. paints the sidebar surface color by default', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+    it('3. background="transparent" removes the background', async () => {
+        const el = await withToken(html `<nile-side-bar-footer background="transparent"></nile-side-bar-footer>`);
+        expect(el.background).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+    });
+    it('4. setting the property at runtime reflects and re-styles both ways', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        el.background = 'transparent';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+        el.background = 'default';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('default');
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+});
+//# sourceMappingURL=nile-side-bar-footer.test.js.map

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-footer.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,wBAAwB,CAAC;AAGhC,MAAM,WAAW,GAAG,kBAAkB,CAAC;AAEvC;;;GAGG;AACH,KAAK,UAAU,SAAS,CAAC,MAAe;IACtC,MAAM,OAAO,GAAG,MAAM,OAAO,CAC3B,IAAI,CAAA,wDAAwD,MAAM,QAAQ,CAC3E,CAAC;IACF,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAsB,CAAC;IAC9E,MAAM,EAAE,CAAC,cAAc,CAAC;IACxB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC;AAErF,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,EAAE,GAAG,MAAM,SAAS,CACxB,IAAI,CAAA,wEAAwE,CAC7E,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAEhF,EAAE,CAAC,UAAU,GAAG,aAAa,CAAC;QAC9B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAE/C,EAAE,CAAC,UAAU,GAAG,SAAS,CAAC;QAC1B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport './nile-side-bar-footer';\nimport type { NileSideBarFooter } from './nile-side-bar-footer';\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\n\n/**\n * The surface color comes from a design token, which a bare fixture does not\n * load — so pin it on a wrapper to have something concrete to assert against.\n */\nasync function withToken(markup: unknown) {\n  const wrapper = await fixture<HTMLDivElement>(\n    html`<div style=\"--nile-colors-neutral-100: rgb(1, 2, 3)\">${markup}</div>`\n  );\n  const el = wrapper.querySelector('nile-side-bar-footer') as NileSideBarFooter;\n  await el.updateComplete;\n  return el;\n}\n\nconst backgroundOf = (el: NileSideBarFooter) => getComputedStyle(el).backgroundColor;\n\ndescribe('NileSideBarFooter — background', () => {\n  it('1. defaults to \"default\" and reflects the attribute', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n    expect(el.background).to.equal('default');\n    expect(el.getAttribute('background')).to.equal('default');\n  });\n\n  it('2. paints the sidebar surface color by default', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n\n  it('3. background=\"transparent\" removes the background', async () => {\n    const el = await withToken(\n      html`<nile-side-bar-footer background=\"transparent\"></nile-side-bar-footer>`\n    );\n    expect(el.background).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n  });\n\n  it('4. setting the property at runtime reflects and re-styles both ways', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n\n    el.background = 'transparent';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n\n    el.background = 'default';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('default');\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n});\n"]}

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.d.ts

@@ -0,0 +1,4 @@
+import '../nile-app-shell/nile-app-shell';
+import '../nile-side-bar/nile-side-bar';
+import './nile-side-bar-header';
+import '../nile-side-bar-footer/nile-side-bar-footer';

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.js

@@ -0,0 +1,68 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import '../nile-app-shell/nile-app-shell';
+import '../nile-side-bar/nile-side-bar';
+import './nile-side-bar-header';
+import '../nile-side-bar-footer/nile-side-bar-footer';
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+const SURFACE = 'rgb(1, 2, 3)';
+/**
+ * nile-app-shell owns the nav track's surface, so it forces the slotted
+ * sidebar's own background off:
+ *
+ *   ::slotted([slot='side-nav']) {
+ *     background: var(--nile-app-shell-side-nav-bg, transparent) !important;
+ *   }
+ *
+ * That reaches the `nile-side-bar` only. The header and footer live one level
+ * deeper — they are light-DOM children of the sidebar, slotted into ITS shadow
+ * root — so the shell cannot see them, and their own surface color survives.
+ * These tests pin that boundary down, because it is the whole reason
+ * `background="transparent"` exists.
+ */
+async function shellWithSidebar(headerBg, footerBg) {
+    const el = await fixture(html `
+    <nile-app-shell style="width: 1400px; height: 600px; --nile-colors-neutral-100: ${SURFACE};">
+      <nile-side-bar slot="side-nav">
+        <nile-side-bar-header slot="header" background="${headerBg ?? 'default'}">
+          <span slot="logo">Logo</span>
+        </nile-side-bar-header>
+        <nile-side-bar-footer slot="footer" background="${footerBg ?? 'default'}">
+          <span>Help</span>
+        </nile-side-bar-footer>
+      </nile-side-bar>
+      <span slot="top-bar">Title</span>
+      <p>page</p>
+    </nile-app-shell>
+  `);
+    await waitUntil(() => el.hasAttribute('has-side-nav'));
+    const sidebar = el.querySelector('nile-side-bar');
+    const header = el.querySelector('nile-side-bar-header');
+    const footer = el.querySelector('nile-side-bar-footer');
+    await header.updateComplete;
+    await footer.updateComplete;
+    return { el, sidebar, header, footer };
+}
+const bg = (el) => getComputedStyle(el).backgroundColor;
+describe('side-bar header/footer inside nile-app-shell', () => {
+    it('1. the shell strips the sidebar\'s own background', async () => {
+        const { sidebar } = await shellWithSidebar();
+        expect(bg(sidebar)).to.equal(TRANSPARENT);
+    });
+    it('2. without the new property the header/footer keep painting a surface, which is the seam', async () => {
+        const { header, footer } = await shellWithSidebar();
+        expect(bg(header)).to.equal(SURFACE);
+        expect(bg(footer)).to.equal(SURFACE);
+    });
+    it('3. background="transparent" closes the seam — nav track is one flat surface', async () => {
+        const { sidebar, header, footer } = await shellWithSidebar('transparent', 'transparent');
+        expect(bg(sidebar)).to.equal(TRANSPARENT);
+        expect(bg(header)).to.equal(TRANSPARENT);
+        expect(bg(footer)).to.equal(TRANSPARENT);
+    });
+    it('4. the shell\'s !important rule does not override the header/footer either way', async () => {
+        const { header, footer } = await shellWithSidebar('default', 'transparent');
+        expect(bg(header)).to.equal(SURFACE);
+        expect(bg(footer)).to.equal(TRANSPARENT);
+    });
+});
+//# sourceMappingURL=nile-side-bar-app-shell.test.js.map

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-app-shell.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-app-shell.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, waitUntil } from '@open-wc/testing';\nimport '../nile-app-shell/nile-app-shell';\nimport '../nile-side-bar/nile-side-bar';\nimport './nile-side-bar-header';\nimport '../nile-side-bar-footer/nile-side-bar-footer';\nimport type { NileAppShell } from '../nile-app-shell/nile-app-shell';\nimport type { NileSideBarHeader } from './nile-side-bar-header';\nimport type { NileSideBarFooter } from '../nile-side-bar-footer/nile-side-bar-footer';\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\nconst SURFACE = 'rgb(1, 2, 3)';\n\n/**\n * nile-app-shell owns the nav track's surface, so it forces the slotted\n * sidebar's own background off:\n *\n *   ::slotted([slot='side-nav']) {\n *     background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n *   }\n *\n * That reaches the `nile-side-bar` only. The header and footer live one level\n * deeper — they are light-DOM children of the sidebar, slotted into ITS shadow\n * root — so the shell cannot see them, and their own surface color survives.\n * These tests pin that boundary down, because it is the whole reason\n * `background=\"transparent\"` exists.\n */\nasync function shellWithSidebar(headerBg?: string, footerBg?: string) {\n  const el = await fixture<NileAppShell>(html`\n    <nile-app-shell style=\"width: 1400px; height: 600px; --nile-colors-neutral-100: ${SURFACE};\">\n      <nile-side-bar slot=\"side-nav\">\n        <nile-side-bar-header slot=\"header\" background=\"${headerBg ?? 'default'}\">\n          <span slot=\"logo\">Logo</span>\n        </nile-side-bar-header>\n        <nile-side-bar-footer slot=\"footer\" background=\"${footerBg ?? 'default'}\">\n          <span>Help</span>\n        </nile-side-bar-footer>\n      </nile-side-bar>\n      <span slot=\"top-bar\">Title</span>\n      <p>page</p>\n    </nile-app-shell>\n  `);\n  await waitUntil(() => el.hasAttribute('has-side-nav'));\n\n  const sidebar = el.querySelector('nile-side-bar') as HTMLElement;\n  const header = el.querySelector('nile-side-bar-header') as NileSideBarHeader;\n  const footer = el.querySelector('nile-side-bar-footer') as NileSideBarFooter;\n  await header.updateComplete;\n  await footer.updateComplete;\n  return { el, sidebar, header, footer };\n}\n\nconst bg = (el: HTMLElement) => getComputedStyle(el).backgroundColor;\n\ndescribe('side-bar header/footer inside nile-app-shell', () => {\n  it('1. the shell strips the sidebar\\'s own background', async () => {\n    const { sidebar } = await shellWithSidebar();\n    expect(bg(sidebar)).to.equal(TRANSPARENT);\n  });\n\n  it('2. without the new property the header/footer keep painting a surface, which is the seam', async () => {\n    const { header, footer } = await shellWithSidebar();\n    expect(bg(header)).to.equal(SURFACE);\n    expect(bg(footer)).to.equal(SURFACE);\n  });\n\n  it('3. background=\"transparent\" closes the seam — nav track is one flat surface', async () => {\n    const { sidebar, header, footer } = await shellWithSidebar('transparent', 'transparent');\n    expect(bg(sidebar)).to.equal(TRANSPARENT);\n    expect(bg(header)).to.equal(TRANSPARENT);\n    expect(bg(footer)).to.equal(TRANSPARENT);\n  });\n\n  it('4. the shell\\'s !important rule does not override the header/footer either way', async () => {\n    const { header, footer } = await shellWithSidebar('default', 'transparent');\n    expect(bg(header)).to.equal(SURFACE);\n    expect(bg(footer)).to.equal(TRANSPARENT);\n  });\n});\n"]}

package/dist/src/nile-side-bar-header/nile-side-bar-header.css.js

@@ -21,6 +21,11 @@ export const styles = css `
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the header sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .header-content {
   display: flex;
   align-items: center;

package/dist/src/nile-side-bar-header/nile-side-bar-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the header sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-header/nile-side-bar-header.d.ts

@@ -11,8 +11,17 @@ import NileElement from '../internal/nile-element';
  *
  * @tag nile-side-bar-header
  *
+ * @attr background - Background treatment of the header ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the header shows
+ *   through.
  */
 export declare class NileSideBarHeader extends NileElement {
+    /**
+     * Background treatment of the header. `default` keeps the sidebar surface
+     * color; `transparent` removes it.
+     */
+    background: 'default' | 'transparent';
     /**
      * The styles for nile-side-bar-header
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`

package/dist/src/nile-side-bar-header/nile-side-bar-header.js

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-side-bar-header.css';
 import NileElement from '../internal/nile-element';
 /**
@@ -14,8 +14,21 @@ import NileElement from '../internal/nile-element';
  *
  * @tag nile-side-bar-header
  *
+ * @attr background - Background treatment of the header ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the header shows
+ *   through.
  */
 let NileSideBarHeader = class NileSideBarHeader extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Background treatment of the header. `default` keeps the sidebar surface
+         * color; `transparent` removes it.
+         */
+        this.background = 'default';
+        /* #endregion */
+    }
     /**
      * The styles for nile-side-bar-header
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -38,6 +51,9 @@ let NileSideBarHeader = class NileSideBarHeader extends NileElement {
 			`;
     }
 };
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBarHeader.prototype, "background", void 0);
 NileSideBarHeader = __decorate([
     customElement('nile-side-bar-header')
 ], NileSideBarHeader);

package/dist/src/nile-side-bar-header/nile-side-bar-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAW,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAEjD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;;IAKT,CAAC;IACJ,CAAC;CAGD,CAAA;AA5BY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA4B7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-header component.\n *\n * @tag nile-side-bar-header\n *\n */\n@customElement('nile-side-bar-header')\nexport class NileSideBarHeader extends NileElement {\n\n\t/**\n\t * The styles for nile-side-bar-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-header': NileSideBarHeader;\n  }\n}"]}
+{"version":3,"file":"nile-side-bar-header.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;GASG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEN;;;WAGG;QACyD,eAAU,GAA8B,SAAS,CAAC;QA2B9G,gBAAgB;IACjB,CAAC;IA1BA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;;IAKT,CAAC;IACJ,CAAC;CAGD,CAAA;AA5B4D;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDAAmD;AANlG,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAkC7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-header component.\n *\n * @tag nile-side-bar-header\n *\n * @attr background - Background treatment of the header (\"default\" | \"transparent\").\n *   Defaults to \"default\", which paints the sidebar surface color. Set to\n *   \"transparent\" to drop the background so whatever sits behind the header shows\n *   through.\n */\n@customElement('nile-side-bar-header')\nexport class NileSideBarHeader extends NileElement {\n\n\t/**\n\t * Background treatment of the header. `default` keeps the sidebar surface\n\t * color; `transparent` removes it.\n\t */\n\t@property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';\n\n\t/**\n\t * The styles for nile-side-bar-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-header': NileSideBarHeader;\n  }\n}"]}

package/dist/src/nile-side-bar-header/nile-side-bar-header.test.d.ts

@@ -0,0 +1 @@
+import './nile-side-bar-header';

package/dist/src/nile-side-bar-header/nile-side-bar-header.test.js

@@ -0,0 +1,42 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-side-bar-header';
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+/**
+ * The surface color comes from a design token, which a bare fixture does not
+ * load — so pin it on a wrapper to have something concrete to assert against.
+ */
+async function withToken(markup) {
+    const wrapper = await fixture(html `<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`);
+    const el = wrapper.querySelector('nile-side-bar-header');
+    await el.updateComplete;
+    return el;
+}
+const backgroundOf = (el) => getComputedStyle(el).backgroundColor;
+describe('NileSideBarHeader — background', () => {
+    it('1. defaults to "default" and reflects the attribute', async () => {
+        const el = await withToken(html `<nile-side-bar-header></nile-side-bar-header>`);
+        expect(el.background).to.equal('default');
+        expect(el.getAttribute('background')).to.equal('default');
+    });
+    it('2. paints the sidebar surface color by default', async () => {
+        const el = await withToken(html `<nile-side-bar-header></nile-side-bar-header>`);
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+    it('3. background="transparent" removes the background', async () => {
+        const el = await withToken(html `<nile-side-bar-header background="transparent"></nile-side-bar-header>`);
+        expect(el.background).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+    });
+    it('4. setting the property at runtime reflects and re-styles both ways', async () => {
+        const el = await withToken(html `<nile-side-bar-header></nile-side-bar-header>`);
+        el.background = 'transparent';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+        el.background = 'default';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('default');
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+});
+//# sourceMappingURL=nile-side-bar-header.test.js.map

package/dist/src/nile-side-bar-header/nile-side-bar-header.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-header.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,wBAAwB,CAAC;AAGhC,MAAM,WAAW,GAAG,kBAAkB,CAAC;AAEvC;;;GAGG;AACH,KAAK,UAAU,SAAS,CAAC,MAAe;IACtC,MAAM,OAAO,GAAG,MAAM,OAAO,CAC3B,IAAI,CAAA,wDAAwD,MAAM,QAAQ,CAC3E,CAAC;IACF,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAsB,CAAC;IAC9E,MAAM,EAAE,CAAC,cAAc,CAAC;IACxB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC;AAErF,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,EAAE,GAAG,MAAM,SAAS,CACxB,IAAI,CAAA,wEAAwE,CAC7E,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAEhF,EAAE,CAAC,UAAU,GAAG,aAAa,CAAC;QAC9B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAE/C,EAAE,CAAC,UAAU,GAAG,SAAS,CAAC;QAC1B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport './nile-side-bar-header';\nimport type { NileSideBarHeader } from './nile-side-bar-header';\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\n\n/**\n * The surface color comes from a design token, which a bare fixture does not\n * load — so pin it on a wrapper to have something concrete to assert against.\n */\nasync function withToken(markup: unknown) {\n  const wrapper = await fixture<HTMLDivElement>(\n    html`<div style=\"--nile-colors-neutral-100: rgb(1, 2, 3)\">${markup}</div>`\n  );\n  const el = wrapper.querySelector('nile-side-bar-header') as NileSideBarHeader;\n  await el.updateComplete;\n  return el;\n}\n\nconst backgroundOf = (el: NileSideBarHeader) => getComputedStyle(el).backgroundColor;\n\ndescribe('NileSideBarHeader — background', () => {\n  it('1. defaults to \"default\" and reflects the attribute', async () => {\n    const el = await withToken(html`<nile-side-bar-header></nile-side-bar-header>`);\n    expect(el.background).to.equal('default');\n    expect(el.getAttribute('background')).to.equal('default');\n  });\n\n  it('2. paints the sidebar surface color by default', async () => {\n    const el = await withToken(html`<nile-side-bar-header></nile-side-bar-header>`);\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n\n  it('3. background=\"transparent\" removes the background', async () => {\n    const el = await withToken(\n      html`<nile-side-bar-header background=\"transparent\"></nile-side-bar-header>`\n    );\n    expect(el.background).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n  });\n\n  it('4. setting the property at runtime reflects and re-styles both ways', async () => {\n    const el = await withToken(html`<nile-side-bar-header></nile-side-bar-header>`);\n\n    el.background = 'transparent';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n\n    el.background = 'default';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('default');\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n});\n"]}

package/dist/src/version.js

@@ -12,7 +12,7 @@
 // @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is
 // frozen at this package's build time. The stylesheet is the live source.
 import { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';
-export const NILE_ELEMENTS_VERSION = '2.0.6';
+export const NILE_ELEMENTS_VERSION = '2.0.8';
 function readStylesheetNileVersion() {
     if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {
         return null;

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,EAAE;AACF,+EAA+E;AAC/E,gDAAgD;AAChD,EAAE;AACF,8EAA8E;AAC9E,6EAA6E;AAC7E,qEAAqE;AACrE,EAAE;AACF,0EAA0E;AAC1E,kEAAkE;AAClE,4EAA4E;AAC5E,0EAA0E;AAC1E,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAEjE,SAAS,yBAAyB;IAChC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE,CAAC;QAC5E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;aACrD,gBAAgB,CAAC,gBAAgB,CAAC;aAClC,IAAI,EAAE;aACN,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAE/B,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,yBAAyB,EAAE,IAAI,qBAAqB,CAAC;AAC9D,CAAC;AAED,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAE5D,yEAAyE;IACzE,yEAAyE;IACzE,IAAI,QAAQ,GAAkB,IAAI,CAAC;IACnC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE;QAC3C,YAAY,EAAE,IAAI;QAClB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,cAAc,EAAE;QACvC,GAAG,EAAE,CAAC,KAAa,EAAE,EAAE;YACrB,QAAQ,GAAG,KAAK,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IAEF,MAAc,CAAC,OAAO,GAAI,MAAc,CAAC,OAAO,IAAI;QACnD,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;KAChC,CAAC;AACJ,CAAC","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 = '2.0.6';\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"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,EAAE;AACF,+EAA+E;AAC/E,gDAAgD;AAChD,EAAE;AACF,8EAA8E;AAC9E,6EAA6E;AAC7E,qEAAqE;AACrE,EAAE;AACF,0EAA0E;AAC1E,kEAAkE;AAClE,4EAA4E;AAC5E,0EAA0E;AAC1E,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAEjE,SAAS,yBAAyB;IAChC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE,CAAC;QAC5E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;aACrD,gBAAgB,CAAC,gBAAgB,CAAC;aAClC,IAAI,EAAE;aACN,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAE/B,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,yBAAyB,EAAE,IAAI,qBAAqB,CAAC;AAC9D,CAAC;AAED,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAE5D,yEAAyE;IACzE,yEAAyE;IACzE,IAAI,QAAQ,GAAkB,IAAI,CAAC;IACnC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE;QAC3C,YAAY,EAAE,IAAI;QAClB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,cAAc,EAAE;QACvC,GAAG,EAAE,CAAC,KAAa,EAAE,EAAE;YACrB,QAAQ,GAAG,KAAK,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IAEF,MAAc,CAAC,OAAO,GAAI,MAAc,CAAC,OAAO,IAAI;QACnD,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;KAChC,CAAC;AACJ,CAAC","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 = '2.0.8';\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"]}