@aquera/nile-elements 2.0.6 → 2.0.7

package/package.json

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

package/src/nile-side-bar-footer/nile-side-bar-footer.css.ts

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

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

@@ -0,0 +1,55 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-side-bar-footer';
+import type { NileSideBarFooter } from './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: unknown) {
+  const wrapper = await fixture<HTMLDivElement>(
+    html`<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`
+  );
+  const el = wrapper.querySelector('nile-side-bar-footer') as NileSideBarFooter;
+  await el.updateComplete;
+  return el;
+}
+
+const backgroundOf = (el: NileSideBarFooter) => 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)');
+  });
+});

package/src/nile-side-bar-footer/nile-side-bar-footer.ts

@@ -6,7 +6,7 @@
  */
 
 import { html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-side-bar-footer.css';
 import NileElement from '../internal/nile-element';
 
@@ -17,9 +17,20 @@ import NileElement from '../internal/nile-element';
  *
  * @slot icon - Slot for footer icon
  * @slot text - Slot for footer text
+ *
+ * @attr background - Background treatment of the footer ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the footer shows
+ *   through.
  */
 @customElement('nile-side-bar-footer')
 export class NileSideBarFooter extends NileElement {
+  /**
+   * Background treatment of the footer. `default` keeps the sidebar surface
+   * color; `transparent` removes it.
+   */
+  @property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';
+
   public static get styles(): CSSResultArray {
     return [styles];
   }

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

@@ -0,0 +1,78 @@
+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';
+import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
+import type { NileSideBarHeader } from './nile-side-bar-header';
+import type { NileSideBarFooter } from '../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?: string, footerBg?: string) {
+  const el = await fixture<NileAppShell>(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') as HTMLElement;
+  const header = el.querySelector('nile-side-bar-header') as NileSideBarHeader;
+  const footer = el.querySelector('nile-side-bar-footer') as NileSideBarFooter;
+  await header.updateComplete;
+  await footer.updateComplete;
+  return { el, sidebar, header, footer };
+}
+
+const bg = (el: HTMLElement) => 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);
+  });
+});

package/src/nile-side-bar-header/nile-side-bar-header.css.ts

@@ -23,6 +23,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/src/nile-side-bar-header/nile-side-bar-header.test.ts

@@ -0,0 +1,55 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-side-bar-header';
+import type { NileSideBarHeader } from './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: unknown) {
+  const wrapper = await fixture<HTMLDivElement>(
+    html`<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`
+  );
+  const el = wrapper.querySelector('nile-side-bar-header') as NileSideBarHeader;
+  await el.updateComplete;
+  return el;
+}
+
+const backgroundOf = (el: NileSideBarHeader) => 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)');
+  });
+});

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

@@ -16,10 +16,20 @@ 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.
  */
 @customElement('nile-side-bar-header')
 export class NileSideBarHeader extends NileElement {
 
+	/**
+	 * Background treatment of the header. `default` keeps the sidebar surface
+	 * color; `transparent` removes it.
+	 */
+	@property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';
+
 	/**
 	 * 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/vscode-html-custom-data.json

@@ -6850,8 +6850,21 @@
     },
     {
       "name": "nile-side-bar-footer",
-      "description": "Nile side-bar-footer component.\n\nSlots:\n\n  * `icon` {} - Slot for footer icon\n\n  * `text` {} - Slot for footer text\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "Nile side-bar-footer component.\n\nSlots:\n\n  * `icon` {} - Slot for footer icon\n\n  * `text` {} - Slot for footer text\n\nAttributes:\n\n  * `background` {`\"default\" | \"transparent\"`} - Background treatment of the footer. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\nProperties:\n\n  * `background` {`\"default\" | \"transparent\"`} - Background treatment of the footer. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "background",
+          "description": "`background` {`\"default\" | \"transparent\"`} - Background treatment of the footer. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\nProperty: background\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "transparent"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "nile-side-bar-group-item-icon",
@@ -6956,8 +6969,21 @@
     },
     {
       "name": "nile-side-bar-header",
-      "description": "Nile side-bar-header component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "Nile side-bar-header component.\n\nAttributes:\n\n  * `background` {`\"default\" | \"transparent\"`} - Background treatment of the header. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\nProperties:\n\n  * `background` {`\"default\" | \"transparent\"`} - Background treatment of the header. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "background",
+          "description": "`background` {`\"default\" | \"transparent\"`} - Background treatment of the header. `default` keeps the sidebar surface\ncolor; `transparent` removes it.\n\nProperty: background\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "transparent"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "nile-side-bar-logo",