@kubex/zinc 1.0.113 → 1.0.114

package/src/components/navbar/navbar.scss

@@ -2,6 +2,58 @@
 
 :host {
   display: block;
+  --navbar-active-colour: var(--zn-active-nav-background, var(--zn-page-content-background, var(--zn-page-surface-background, var(--zn-body))));
+
+  ul.navbar {
+    padding: 0;
+    margin: 0 calc(var(--zn-base-gap) + var(--zn-gutter));
+  }
+}
+
+:host([hover]) {
+  position: absolute;
+  transform: translateY(-100%);
+
+  ul.navbar {
+    background-color: rgb(var(--zn-body));
+
+    li {
+      z-index: 2;
+    }
+
+    position: relative;
+
+    &::after {
+      z-index: 1;
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: rgb(var(--zn-body));
+    }
+
+    &::before {
+      z-index: 1;
+      content: "";
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      left: -2px;
+      bottom: 0;
+      border-radius: 3px;
+      backdrop-filter: blur(2px) opacity(0.8);
+    }
+  }
+}
+
+:host([icon-only]) {
+  ul.navbar {
+    li {
+      padding: var(--zn-spacing-small);
+      width: fit-content;
+      max-width: 50px;
+      justify-content: center;
+    }
+  }
 }
 
 .navbar__container {
@@ -13,7 +65,11 @@
 
 .navbar {
   margin: 0;
-  padding-left: var(--zn-spacing-medium);
+}
+
+:host:not([stacked]) .navbar {
+  margin: 0 0 0 var(--zn-spacing-medium);
+  padding-left: 0;
 
   &--flush {
     padding: 0;
@@ -55,6 +111,7 @@ ul.navbar {
 
   ul.navbar {
     padding: 0;
+    margin: 0;
     flex-direction: column;
     gap: 0;
 
@@ -67,7 +124,7 @@ ul.navbar {
       }
 
       &.zn-tb-active {
-        background-color: rgb(var(--zn-panel));
+        background-color: rgb(var(--zn-body));
       }
 
       &:hover:before {
@@ -170,17 +227,41 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
 :host(:not([stacked]):not([icon-bar])) {
   ul.navbar {
-    height: 35px;
+    height: 40px;
     align-self: end;
   }
 }
 
+:host(:not([stacked]):not([icon-bar]):not([icon-only])) {
+  ul.navbar {
+    min-width: 180px;
+  }
+}
+
+
 :host([pad]) {
   ul.navbar {
     padding: var(--zn-spacing-medium) var(--zn-spacing-medium) 0;
   }
 }
 
+:host(:not([stacked])) {
+  ul.navbar {
+    > li {
+      border-right-width: 1px;
+      border-top-width: 1px;
+
+      &:first-of-type {
+        border-left-width: 1px;
+      }
+
+      &.active, &.zn-tb-active {
+        border-bottom: 1px solid rgb(var(--navbar-active-colour));
+      }
+    }
+  }
+}
+
 :host {
   display: block;
   width: 100%;
@@ -192,7 +273,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
   ul.navbar {
     display: flex;
     flex-basis: fit-content;
-    gap: 30px;
+    gap: 0;
     list-style: none;
 
     li.more {
@@ -218,9 +299,15 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
       user-select: none;
       font-weight: 500;
-      padding: 0 0 var(--zn-spacing-small);
+      padding: 0 calc(var(--zn-base-gap, 8px));
+      background: rgba(0, 0, 0, 0.05);
+      transition: background-color 100ms ease-in-out;
       position: relative;
 
+      &:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+
       display: flex;
       align-items: center;
       justify-content: center;
@@ -250,11 +337,11 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
         content: '';
         left: 50%;
         right: 50%;
-        bottom: 0;
+        bottom: -2px;
         position: absolute;
-        background-color: rgb(var(--zn-primary));
+        background-color: rgb(var(--navbar-active-colour));
         transition: all 300ms ease-in-out;
-        height: 2px;
+        height: 1px;
       }
 
       &:hover:before:not(#dropdown-item) {
@@ -264,13 +351,12 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
       }
 
       &.active, &.zn-tb-active {
-        color: rgb(var(--zn-primary));
-        font-weight: var(--zn-font-weight-semibold);
+        background: rgb(var(--navbar-active-colour));
       }
 
       &.active::before, &.zn-tb-active::before {
-        left: calc(var(--zn-spacing-medium) * -1);
-        right: calc(var(--zn-spacing-medium) * -1);
+        left: 0;
+        right: 0;
       }
     }
 
@@ -324,7 +410,7 @@ button[popovertarget] {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: rgb(var(--zn-border-color));
-    height: 35px;
+    height: 40px;
   }
 
   &:host([dropdown]) li {
@@ -356,14 +442,14 @@ button[popovertarget] {
           right: 0;
           bottom: -1px;
           height: 1px;
-          background-color: rgb(var(--zn-panel));
+          background-color: rgb(var(--navbar-active-colour));
         }
       }
     }
   }
 
   .active {
-    background-color: rgb(var(--zn-panel));
+    background-color: rgb(var(--navbar-active-colour));
   }
 }
 
@@ -392,13 +478,14 @@ button[popovertarget] {
 
 .expandables {
   flex-grow: 0;
-  flex-shrink: 1;
-  margin: 0 var(--zn-spacing-medium);
+  flex-shrink: 0;
+  margin: 0;
   display: flex;
   align-items: center;
   width: fit-content;
   height: 100%;
   gap: var(--zn-spacing-2x-small);
+  padding-right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
 .expandables:empty {
@@ -409,9 +496,27 @@ button[popovertarget] {
 :host {
   ul.navbar {
     li.more {
+      // Let the trigger fill the whole cell so clicking anywhere in the
+      // "more" item opens the dropdown, not just the icon itself.
+      padding: 0;
+
+      zn-dropdown,
+      zn-button[slot="trigger"] {
+        height: 100%;
+      }
+
+      zn-button[slot="trigger"] zn-icon {
+        transition: transform 200ms ease-in-out;
+      }
+
+      zn-dropdown[open] zn-button[slot="trigger"] zn-icon {
+        transform: rotate(90deg);
+      }
+
       zn-button::part(base) {
-        padding-left: 0;
-        padding-right: 0;
+        height: 100%;
+        padding-left: calc(var(--zn-base-gap, 8px));
+        padding-right: calc(var(--zn-base-gap, 8px));
 
         &:hover {
           background-color: transparent;
@@ -420,12 +525,12 @@ button[popovertarget] {
 
       ul#extended-menu {
         box-shadow: var(--zn-shadow-medium);
-        background: rgb(var(--zn-border-color));
+        background: rgb(var(--zn-panel));
         display: flex;
         flex-direction: column;
-        gap: 1px;
         height: auto;
         width: fit-content;
+        min-width: var(--zn-size-spanel);
         margin: 0;
         padding: 1px;
 
@@ -435,6 +540,14 @@ button[popovertarget] {
           color: rgb(var(--zn-text));
           padding: var(--zn-spacing-small);
 
+          &:hover {
+            background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), rgb(var(--zn-panel));
+          }
+
+          &.active, &.zn-tb-active {
+            font-weight: 700;
+          }
+
           &.active::before, &.zn-tb-active::before {
             left: 0;
             right: 0;

package/src/components/navbar/navbar.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import {aTimeout, expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnNavbar from './navbar.component';
 
 describe('<zn-navbar>', () => {
@@ -9,6 +9,116 @@ describe('<zn-navbar>', () => {
     expect(el).to.exist;
   });
 
+  it('reserves at least 200px for visible nav items when expandables need space', async () => {
+    const el = await fixture<ZnNavbar>(html`
+      <zn-navbar>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+        <li>Four</li>
+        <zn-expanding-action></zn-expanding-action>
+      </zn-navbar>
+    `);
+    await aTimeout(150);
+
+    const nav = el.shadowRoot!.querySelector<HTMLElement>('ul.navbar')!;
+    const expandable = el.shadowRoot!.querySelector<HTMLElement>('.expandables')!;
+    const items = Array.from(nav.querySelectorAll<HTMLElement>(':scope > li:not(.more)'));
+
+    Object.defineProperty(el, 'offsetWidth', {configurable: true, get: () => 500});
+    Object.defineProperty(expandable, 'offsetWidth', {configurable: true, get: () => 400});
+    Object.defineProperty(expandable, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({width: 400})
+    });
+    items.forEach(item => {
+      Object.defineProperty(item, 'offsetWidth', {configurable: true, get: () => 120});
+      Object.defineProperty(item, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({width: 120})
+      });
+    });
+
+    el.handleResize();
+
+    expect(getComputedStyle(nav).minWidth).to.equal('200px');
+    expect(items[0].classList.contains('hidden')).to.equal(false);
+    expect(items[1].classList.contains('hidden')).to.equal(true);
+  });
+
+  it('accounts for open fill expandables when collapsing nav items', async () => {
+    const el = await fixture<ZnNavbar>(html`
+      <zn-navbar>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+        <li>Four</li>
+        <zn-expanding-action method="fill" open></zn-expanding-action>
+      </zn-navbar>
+    `);
+    await aTimeout(150);
+
+    const nav = el.shadowRoot!.querySelector<HTMLElement>('ul.navbar')!;
+    const expandable = el.shadowRoot!.querySelector<HTMLElement>('.expandables')!;
+    const items = Array.from(nav.querySelectorAll<HTMLElement>(':scope > li:not(.more)'));
+
+    Object.defineProperty(el, 'offsetWidth', {configurable: true, get: () => 1000});
+    Object.defineProperty(expandable, 'offsetWidth', {configurable: true, get: () => 40});
+    Object.defineProperty(expandable, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({width: 40})
+    });
+    items.forEach(item => {
+      Object.defineProperty(item, 'offsetWidth', {configurable: true, get: () => 120});
+      Object.defineProperty(item, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({width: 120})
+      });
+    });
+
+    el.handleResize();
+
+    expect(items[0].classList.contains('hidden')).to.equal(false);
+    expect(items[1].classList.contains('hidden')).to.equal(true);
+  });
+
+  it('reserves nav padding and the more button before leaving items visible', async () => {
+    const el = await fixture<ZnNavbar>(html`
+      <zn-navbar>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </zn-navbar>
+    `);
+    await aTimeout(150);
+
+    const nav = el.shadowRoot!.querySelector<HTMLElement>('ul.navbar')!;
+    const more = nav.querySelector<HTMLElement>(':scope > li.more')!;
+    const items = Array.from(nav.querySelectorAll<HTMLElement>(':scope > li:not(.more)'));
+    nav.style.paddingLeft = '20px';
+    nav.style.paddingRight = '20px';
+
+    Object.defineProperty(el, 'offsetWidth', {configurable: true, get: () => 290});
+    Object.defineProperty(more, 'offsetWidth', {configurable: true, get: () => 60});
+    Object.defineProperty(more, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({width: 60})
+    });
+    items.forEach(item => {
+      Object.defineProperty(item, 'offsetWidth', {configurable: true, get: () => 120});
+      Object.defineProperty(item, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({width: 120})
+      });
+    });
+
+    el.handleResize();
+
+    expect(items[0].classList.contains('hidden')).to.equal(false);
+    expect(items[1].classList.contains('hidden')).to.equal(true);
+    expect(nav.classList.contains('has-hidden')).to.equal(true);
+  });
+
   describe('hide-one', () => {
     it('hides when only one item is present', async () => {
       const el = await fixture<ZnNavbar>(html`
@@ -34,9 +144,7 @@ describe('<zn-navbar>', () => {
       li.setAttribute('tab-uri', '/two');
       li.textContent = 'Second';
       el.addItem(li, false);
-      await aTimeout(0);
-
-      expect(getComputedStyle(el).display).to.not.equal('none');
+      await waitUntil(() => getComputedStyle(el).display !== 'none', 'navbar should become visible after second item added');
     });
 
     it('hides again when items drop back to one', async () => {
@@ -49,13 +157,10 @@ describe('<zn-navbar>', () => {
       second.setAttribute('tab-uri', '/two');
       second.textContent = 'Second';
       el.addItem(second, false);
-      await aTimeout(0);
-      expect(getComputedStyle(el).display).to.not.equal('none');
+      await waitUntil(() => getComputedStyle(el).display !== 'none', 'navbar should become visible after second item added');
 
       second.remove();
-      await aTimeout(0);
-
-      expect(getComputedStyle(el).display).to.equal('none');
+      await waitUntil(() => getComputedStyle(el).display === 'none', 'navbar should hide after dropping back to one item');
     });
   });
 });

package/src/components/option/option.scss

@@ -30,11 +30,13 @@
 }
 
 
-.option--hover:not(.option--current):not(.option--disabled) {
-  background-color: var(--zn-color-primary-100);
-  color: var(--zn-input-color);
+/* Selected is the base highlight; hover/current below take priority over it. */
+.option--selected {
+  background-color: var(--zn-color-primary-200);
 }
 
+/* Mouse-hover and keyboard-current take priority over the selected background. */
+.option--hover:not(.option--disabled),
 .option--current,
 .option--current.option--disabled {
   background-color: var(--zn-color-primary-100);
@@ -69,10 +71,6 @@
   visibility: visible;
 }
 
-.option--selected {
-  background-color: var(--zn-color-primary-200);
-}
-
 .option__prefix,
 .option__suffix {
   flex: 0 0 auto;

package/src/components/option/option.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnOption from './option.component';
 
 describe('<zn-option>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,33 @@ describe('<zn-option>', () => {
 
     expect(el).to.exist;
   });
+
+  it('prioritises the hover/current highlight over the selected background', async () => {
+    // Inject the palette so the computed colors resolve deterministically in the test environment.
+    const el = await fixture<ZnOption>(html`
+      <zn-option
+        value="a"
+        selected
+        style="--zn-color-primary-100: rgb(10, 20, 30); --zn-color-primary-200: rgb(40, 50, 60);">
+        A
+      </zn-option>
+    `);
+    await el.updateComplete;
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('.option')!;
+
+    // Selected only → the selected background
+    expect(getComputedStyle(base).backgroundColor).to.equal('rgb(40, 50, 60)');
+
+    // Keyboard-current + selected → the highlight must win over selected
+    el.current = true;
+    await el.updateComplete;
+    expect(getComputedStyle(base).backgroundColor, 'current should win over selected').to.equal('rgb(10, 20, 30)');
+
+    // Mouse-hover + selected → the highlight must win over selected
+    el.current = false;
+    el.hasHover = true;
+    await el.updateComplete;
+    expect(getComputedStyle(base).backgroundColor, 'hover should win over selected').to.equal('rgb(10, 20, 30)');
+  });
 });

package/src/components/page/index.ts

@@ -0,0 +1,13 @@
+import ZnPage from './page.component';
+
+export * from './page.component';
+export default ZnPage;
+
+ZnPage.define('zn-page');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page': ZnPage;
+  }
+}
+