@kubex/zinc 1.0.115 → 1.0.117

package/src/components/icon/icon.component.ts

@@ -1,15 +1,19 @@
 import {choose} from 'lit/directives/choose.js';
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, render, unsafeCSS} from 'lit';
+import {icons} from 'lucide';
 import {property} from 'lit/decorators.js';
 import {sha256} from '../../utilities/sha256';
 import {styleMap} from "lit/directives/style-map.js";
+import {unsafeSVG} from 'lit/directives/unsafe-svg.js';
 import ZincElement from '../../internal/zinc-element';
+import type {IconNode, SVGProps} from 'lucide';
 
 import styles from './icon.scss';
 
 type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" |
-  "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line";
+  "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" |
+  "lucide";
 
 export type IconColor =
   "default"
@@ -116,6 +120,9 @@ export default class ZnIcon extends ZincElement {
         return "avatar";
       case "line":
         return "line";
+      case "lucide":
+      case "lu":
+        return "lucide";
       case 'brand':
       case 'brands':
         return "brands";
@@ -251,6 +258,7 @@ export default class ZnIcon extends ZincElement {
               ["material-two-tone", () => html`<i part="icon" class="mi mi--two-tone">${this.src}</i>`],
               ["brands", () => html`<i part="icon" class="kb">${this.src}</i>`],
               ["line", () => html`<i part="icon" class="lni lni-${this.src}"></i>`],
+              ["lucide", () => this.renderLucideIcon()],
               ["material-symbols-outlined", () => html`<i part="icon" class="mi mi--symbol-outlined">${this.src}</i>`],
               ["gravatar", () => html`<img part="icon" alt="${this.alt}"
                                            src="https://www.gravatar.com/avatar/${this.src}?s=${this.size}${this.gravatarOptions}"/>`],
@@ -285,6 +293,77 @@ export default class ZnIcon extends ZincElement {
     return avatar.slice(0, 2).toUpperCase()
   }
 
+  private renderLucideIcon() {
+    const icon = this.getLucideIcon(this.src);
+
+    if (!icon) {
+      return html`Icon not found: ${this.src ?? ''}`;
+    }
+
+    return unsafeSVG(this.getLucideSvg(icon));
+  }
+
+  private getLucideIcon(src = ''): IconNode | undefined {
+    if (!src) {
+      return undefined;
+    }
+
+    const candidates = [src, this.toPascalCase(src)];
+    const iconSet = icons as Record<string, IconNode>;
+
+    for (const candidate of candidates) {
+      if (Object.prototype.hasOwnProperty.call(iconSet, candidate)) {
+        return iconSet[candidate];
+      }
+    }
+
+    return undefined;
+  }
+
+  private toPascalCase(input: string) {
+    return input
+      .split(/[-_\s]+/)
+      .filter(Boolean)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('');
+  }
+
+  private getLucideSvg(icon: IconNode) {
+    const children = icon
+      .map(([tag, attrs]) => `<${tag}${this.getSvgAttributes(attrs)} />`)
+      .join('');
+
+    return `
+      <svg
+        part="icon"
+        class="lucide"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >${children}</svg>
+    `;
+  }
+
+  private getSvgAttributes(attrs: SVGProps) {
+    return Object.entries(attrs)
+      .filter(([, value]) => value !== undefined)
+      .map(([name, value]) => ` ${name}="${this.escapeSvgAttribute(String(value))}"`)
+      .join('');
+  }
+
+  private escapeSvgAttribute(value: string) {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
 
   protected getColorForAvatar(avatarInitials: string) {
     const colors = [

package/src/components/icon/icon.scss

@@ -219,6 +219,14 @@
     -webkit-font-smoothing: antialiased;
   }
 
+  .lucide {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: currentColor;
+    stroke: currentColor;
+  }
+
   img {
     max-width: 100%;
     vertical-align: middle;

package/src/components/icon/icon.test.ts

@@ -30,4 +30,28 @@ describe('<zn-icon>', () => {
       'https://seccdn.libravatar.org/avatar/04e8703fcfb60849fb5c596abc8f3d7547c7e0099c3806a3ffec77a95dc02e25?s=48&d=identicon'
     );
   });
+
+  it('should render Lucide icons as inline SVGs', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="cloud-upload" library="lucide" size="48"></zn-icon>
+    `);
+
+    const svg = el.shadowRoot?.querySelector('svg.lucide');
+
+    expect(svg).to.exist;
+    expect(svg?.getAttribute('part')).to.equal('icon');
+    expect(svg?.querySelectorAll('path').length).to.be.greaterThan(0);
+  });
+
+  it('should support Lucide shorthand notation', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="circle-alert@lu" size="48"></zn-icon>
+    `);
+
+    const svg = el.shadowRoot?.querySelector('svg.lucide');
+
+    expect(el.library).to.equal('lucide');
+    expect(el.src).to.equal('circle-alert');
+    expect(svg).to.exist;
+  });
 });

package/src/components/icon-picker/icon-picker.component.ts

@@ -261,7 +261,6 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
                 <span class="icon-picker__edit-text">Click to edit</span>
                 <zn-button
                   class="icon-picker__clear"
-                  size="x-small"
                   color="transparent"
                   icon="close"
                   icon-size="16"

package/src/components/inline-edit/inline-edit.component.ts

@@ -362,20 +362,19 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
           ${!this.isEditing ?
             html`
               ${hasEditText ? html`
-                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}" size="x-small"
+                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}"
                            color="secondary">
                   ${this.editText}
                 </zn-button>` : html`
                 <zn-button @click="${this.disabled ? undefined : this.handleEditClick}"
                            class="button--edit"
                            icon="edit"
-                           size="x-small"
                            icon-size="20"
                            color="secondary"></zn-button>`}` :
             html`
-              <zn-button type="submit" @click="${this.handleSubmitClick}" icon="check" size="x-small" icon-size="20"
+              <zn-button type="submit" @click="${this.handleSubmitClick}" icon="check" icon-size="20"
                          color="secondary"></zn-button>
-              <zn-button type="button" @click="${this.handleCancelClick}" icon="close" size="x-small" icon-size="20"
+              <zn-button type="button" @click="${this.handleCancelClick}" icon="close" icon-size="20"
                          color="secondary"></zn-button>`}
         </div>
       </div>

package/src/components/input/input.scss

@@ -91,6 +91,7 @@
   margin: 0;
   cursor: inherit;
   -webkit-appearance: none;
+  line-height: 24px;
 }
 
 /* Color input text should use monospace font */
@@ -176,7 +177,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--x-small .input__prefix ::slotted(*),
 .input__prefix-default {
-  margin-inline-start: var(--zn-input-spacing-x-small);
+  margin-inline-start: var(--zn-spacing-x-small);
 }
 
 .input--x-small .input__suffix ::slotted(*),
@@ -244,12 +245,12 @@ input[type='text'].input__control[data-color-input] {
 
 .input--medium .input__prefix ::slotted(*),
 .input__prefix-default {
-  margin-inline-start: var(--zn-input-spacing-medium);
+  margin-inline-start: var(--zn-spacing-small);
 }
 
 .input--medium .input__suffix ::slotted(*),
 .input__suffix-default {
-  margin-inline-end: var(--zn-input-spacing-medium);
+  margin-inline-end: var(--zn-spacing-small);
 }
 
 .input--medium .input__suffix ::slotted(zn-button),
@@ -260,6 +261,20 @@ input[type='text'].input__control[data-color-input] {
   margin-inline-start: 0;
 }
 
+.input__suffix ::slotted(zn-button),
+.input__prefix ::slotted(zn-button) {
+  --zn-button-border-color: rgb(var(--zn-color-border));
+  --zn-button-border-width: 0;
+}
+
+.input__suffix ::slotted(zn-button) {
+  --zn-button-border-left-width: 1px;
+}
+
+.input__prefix ::slotted(zn-button) {
+  --zn-button-border-right-width: 1px;
+}
+
 .input--large {
   border-radius: var(--zn-input-border-radius-large);
   font-size: var(--zn-input-font-size-large);
@@ -398,15 +413,15 @@ input[type='date']::-webkit-calendar-picker-indicator {
 }
 
 .input--small .input__color-swatch {
-  margin-inline-start: var(--zn-input-spacing-small);
+  margin-inline-start: var(--zn-spacing-x2-small);
 }
 
 .input--medium .input__color-swatch {
-  margin-inline-start: var(--zn-input-spacing-medium);
+  margin-inline-start: var(--zn-spacing-x-small);
 }
 
 .input--large .input__color-swatch {
-  margin-inline-start: var(--zn-input-spacing-medium);
+  margin-inline-start: var(--zn-spacing-small);
 }
 
 .input__color-swatch-inner {

package/src/components/input-group/input-group.scss

@@ -10,6 +10,7 @@
   flex-wrap: nowrap;
   align-items: center;
   width: 100%;
+  gap: var(--zn-spacing-small);
 }
 
 /* Gap variants */
@@ -89,7 +90,7 @@
 /* Button overrides - don't join to other inputs */
 ::slotted(zn-button[data-zn-input-group__input]) {
   flex: 0 0 auto;
-  margin-inline-start: var(--zn-spacing-x-small);
+  margin-inline-start: 0;
   margin-inline-end: 0;
 }
 

package/src/components/markdown-editor/markdown-editor.component.ts

@@ -3,7 +3,6 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {HasSlotController} from "../../internal/slot";
-import {ifDefined} from "lit/directives/if-defined.js";
 import {marked} from "marked";
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
@@ -275,11 +274,10 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
           ${hasHeader ? html`
             <zn-header class=${classMap({
               panel__header: true,
-              'panel__header--underline': this.underlineHeader,
+              'panel__header--underline': !this.headerBorderless,
             })}
                        icon=${this.icon}
                        caption=${this.caption}
-                       description=${ifDefined(this.description)}
                        transparent>
               ${hasActionSlot ? html`
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
@@ -306,7 +304,6 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
                   <zn-button
                     class="markdown-editor__expand-btn"
                     type="button"
-                    size="medium"
                     color="secondary"
                     icon=${this.expanded ? 'close_fullscreen' : 'open_in_full'}
                     icon-size="18"
@@ -379,7 +376,6 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
         })}
         data-mode=${mode}
         type="button"
-        size="medium"
         color="default"
         ?outline=${!isActive}
         square

package/src/components/menu/menu.scss

@@ -10,5 +10,5 @@
   overflow: auto;
   overscroll-behavior: none;
   box-shadow: var(--zn-shadow-medium);
-  background-color: rgb(var(--zn-panel, 255, 255, 255));
+  background-color: rgb(var(--zn-color-navigation, 255, 255, 255));
 }

package/src/components/menu-item/menu-item.scss

@@ -4,7 +4,7 @@
   --submenu-offset: -2px;
   --color: rgba(var(--zn-text), var(--zn-text-opacity));
   --hover-color: rgb(var(--zn-primary));
-  --hover-bg: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
+  --hover-bg: rgba(var(--zn-color-navigation-highlight), var(--zn-panel-highlight-opacity));
   display: block;
 }
 
@@ -154,9 +154,9 @@
   bottom: 0;
   left: 0;
   clip-path: polygon(
-      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+    var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+    var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+    var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
   );
 }
 

package/src/components/navbar/navbar.component.ts

@@ -253,6 +253,24 @@ export default class ZnNavbar extends ZincElement {
     return moreWidth;
   }
 
+  private _syncLastVisibleItem() {
+    const items = this._navItems?.querySelectorAll<HTMLElement>(':scope > li') || [];
+    let lastVisibleItem: HTMLElement | null = null;
+
+    for (const item of items) {
+      item.classList.remove('last-visible');
+
+      if (item.classList.contains('more') || item.classList.contains('hidden') || item.id === 'dropdown-item') {
+        continue;
+      }
+
+      lastVisibleItem = item;
+    }
+
+    lastVisibleItem?.classList.add('last-visible');
+    this._navItems?.classList.toggle('more-only', !lastVisibleItem && this._navItems.classList.contains('has-hidden'));
+  }
+
   private _getExpandableWidth(containerWidth: number): number {
     const expandableWidth = this._expandableMargin + (this._expandable?.getBoundingClientRect().width || this._expandable?.offsetWidth || 0);
     let fillWidth = 0;
@@ -298,6 +316,7 @@ export default class ZnNavbar extends ZincElement {
 
     if (!hasHidden && this._totalItemWidth <= availableWithoutMore) {
       this._navItems?.classList.toggle('has-hidden', false)
+      this._syncLastVisibleItem();
       return
     }
 
@@ -331,6 +350,7 @@ export default class ZnNavbar extends ZincElement {
       }
     }
     this._navItems?.classList.toggle('has-hidden', hasHidden && hideRemaining)
+    this._syncLastVisibleItem();
   }
 
   // Clones in the extended menu are static snapshots, so mirror the active

package/src/components/navbar/navbar.scss

@@ -6,7 +6,7 @@
 
   ul.navbar {
     padding: 0;
-    margin: 0 calc(var(--zn-base-gap) + var(--zn-gutter));
+    margin: 0 var(--zn-base-gap);
   }
 }
 
@@ -68,7 +68,7 @@
 }
 
 :host:not([stacked]) .navbar {
-  margin: 0 0 0 var(--zn-spacing-medium);
+  margin: 0 0 0 var(--zn-base-gap);
   padding-left: 0;
 
   &--flush {
@@ -81,6 +81,7 @@ ul.navbar {
     padding-top: 0;
     font-size: var(--zn-font-size-medium);
     white-space: nowrap;
+    color: rgb(var(--zn-color-muted-text));
 
     a {
       text-decoration: none;
@@ -117,7 +118,7 @@ ul.navbar {
 
     li {
       border-bottom: 1px solid rgb(var(--zn-border-color));
-      padding: var(--zn-spacing-medium);
+      padding: var(--zn-base-px);
 
       &.active:before, &.zn-tb-active:before {
         display: none;
@@ -133,12 +134,6 @@ ul.navbar {
       }
     }
 
-    &--slim {
-      li {
-        padding: var(--zn-spacing-small);
-      }
-    }
-
   }
 }
 
@@ -147,8 +142,6 @@ ul.navbar {
     &--border {
       border-right: 1px solid rgb(var(--zn-border-color));
     }
-
-    //margin-right: var(--zn-spacing-medium);
   }
 }
 
@@ -157,8 +150,6 @@ ul.navbar {
     &--border {
       border-left: 1px solid rgb(var(--zn-border-color));
     }
-
-    //  margin-left: var(--zn-spacing-medium);
   }
 }
 
@@ -253,12 +244,27 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
       &:first-of-type {
         border-left-width: 1px;
+        border-top-left-radius: 6px;
+      }
+
+      &:last-of-type {
+        border-top-right-radius: 6px;
       }
 
       &.active, &.zn-tb-active {
+        color: rgb(var(--zn-color-text));
         border-bottom: 1px solid rgb(var(--navbar-active-colour));
       }
     }
+
+    &:not(.has-hidden) > li.last-visible {
+      border-top-right-radius: 6px;
+    }
+
+    &.more-only > li.more {
+      border-left-width: 1px;
+      border-top-left-radius: 6px;
+    }
   }
 }
 
@@ -299,13 +305,21 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
       user-select: none;
       font-weight: 500;
-      padding: 0 calc(var(--zn-base-gap, 8px));
-      background: rgba(0, 0, 0, 0.05);
+      padding: 0 calc(var(--zn-base-px, 8px) * 2);
+      background: rgb(var(--zn-color-tab));
       transition: background-color 100ms ease-in-out;
       position: relative;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.03);
+        background: rgba(var(--zn-color-tab), 0.5);
+
+        &::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: rgb(var(--navbar-active-colour));
+          z-index: -1;
+        }
       }
 
       display: flex;
@@ -483,7 +497,7 @@ button[popovertarget] {
   display: flex;
   align-items: center;
   width: fit-content;
-  height: 100%;
+  height: 40px;
   gap: var(--zn-spacing-2x-small);
   padding-right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }

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

@@ -119,6 +119,78 @@ describe('<zn-navbar>', () => {
     expect(nav.classList.contains('has-hidden')).to.equal(true);
   });
 
+  it('rounds the last visible nav item when items are hidden behind more', 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)'));
+
+    Object.defineProperty(el, 'offsetWidth', {configurable: true, get: () => 250});
+    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: () => 100});
+      Object.defineProperty(item, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({width: 100})
+      });
+    });
+
+    el.handleResize();
+
+    expect(nav.classList.contains('has-hidden')).to.equal(true);
+    expect(items[0].classList.contains('last-visible')).to.equal(true);
+    expect(items[1].classList.contains('hidden')).to.equal(true);
+    expect(getComputedStyle(items[0]).borderTopRightRadius).to.equal('6px');
+  });
+
+  it('keeps the left border when only the more button is visible', async () => {
+    const el = await fixture<ZnNavbar>(html`
+      <zn-navbar>
+        <li>One</li>
+        <li>Two</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)'));
+
+    Object.defineProperty(el, 'offsetWidth', {configurable: true, get: () => 100});
+    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: () => 150});
+      Object.defineProperty(item, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({width: 150})
+      });
+    });
+
+    el.handleResize();
+
+    expect(nav.classList.contains('has-hidden')).to.equal(true);
+    expect(nav.classList.contains('more-only')).to.equal(true);
+    expect(items.every(item => item.classList.contains('hidden'))).to.equal(true);
+    expect(getComputedStyle(more).borderLeftWidth).to.equal('1px');
+    expect(getComputedStyle(more).borderTopLeftRadius).to.equal('6px');
+  });
+
   describe('hide-one', () => {
     it('hides when only one item is present', async () => {
       const el = await fixture<ZnNavbar>(html`

package/src/components/note/note.component.ts

@@ -81,7 +81,6 @@ export default class ZnNote extends ZincElement {
         ${!showExpandableButton ? '' : html`
           <div class="note__toggle">
             <zn-button color="transparent"
-                       size="content"
                        class="note__toggle__btn"
                        @click="${this._toggleExpand}"
                        aria-expanded="${String(this.expanded)}">