@aquera/nile-elements 2.0.6 → 2.0.8

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.8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-chip/nile-chip.css.ts

@@ -123,7 +123,7 @@ export const styles = css`
   }
 
   .nile-chip--disabled {
-    
+
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -178,7 +178,7 @@ export const styles = css`
   nile-auto-complete::part(base) {
     height: auto;
   }
-  
+
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
@@ -189,8 +189,8 @@ export const styles = css`
     box-shadow: none;
   }
 
-
-  .nile-chip.nile-chip--open:hover  {
+  .nile-chip.nile-chip--open:hover,
+  :host(:not([disabled])) .nile-chip:focus-within {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
     box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
   }
@@ -200,10 +200,6 @@ export const styles = css`
     gap: 2px;
   }
 
-  nile-auto-complete::part(base)::before {
-    box-shadow: none;
-  }
-
   :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
     margin-inline-start: -2px;

package/src/nile-input/nile-input.css.ts

@@ -194,7 +194,7 @@ export const styles = css`
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));
   }
 
   .input--standard.input--disabled {
@@ -349,7 +349,7 @@ export const styles = css`
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .input__control:focus {
@@ -561,9 +561,8 @@ export const styles = css`
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none;
-    box-shadow: 0 0 0 0;
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled)::before {
+    box-shadow: none;
   }
 
   .input__password {

package/src/nile-input/nile-input.test.ts

@@ -103,4 +103,10 @@ describe('NileInput', () => {
   it('98. type tel', async () => { const el = await fixture<NileInput>(html`<nile-input type="tel"></nile-input>`); expect(el.type).to.equal('tel'); });
   it('99. type url', async () => { const el = await fixture<NileInput>(html`<nile-input type="url"></nile-input>`); expect(el.type).to.equal('url'); });
   it('100. full integration', async () => { const el = await fixture<NileInput>(html`<nile-input type="email" name="email" value="test@test.com" size="large" filled pill class="inp" id="i1"></nile-input>`); expect(el.type).to.equal('email'); expect(el.name).to.equal('email'); expect(el.value).to.equal('test@test.com'); expect(el.size).to.equal('large'); expect(el.filled).to.be.true; expect(el.pill).to.be.true; expect(el.id).to.equal('i1'); });
+
+  // UIF-1350 — nile-chip / nile-auto-complete render a borderless nile-input; the
+  // nxtgen focus ring is an inset box-shadow on ::before, so `no-border` has to
+  // suppress it too or a blue border shows up inside the chip on focus.
+  it('101. no-border paints no focus ring', async () => { const el = await fixture<NileInput>(html`<nile-input no-border no-outline style="--ng-colors-border-brand: rgb(0, 0, 255)"></nile-input>`); el.input.focus(); await el.updateComplete; const base = el.shadowRoot!.querySelector('[part="base"]') as HTMLElement; expect(base.classList.contains('input--focused')).to.be.true; expect(getComputedStyle(base, '::before').boxShadow).to.equal('none'); });
+  it('102. focus ring still paints without no-border', async () => { const el = await fixture<NileInput>(html`<nile-input style="--ng-colors-border-brand: rgb(0, 0, 255)"></nile-input>`); el.input.focus(); await el.updateComplete; const base = el.shadowRoot!.querySelector('[part="base"]') as HTMLElement; expect(getComputedStyle(base, '::before').boxShadow).to.contain('inset'); });
 });

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",