@kubex/zinc 1.0.119 → 1.1.0

package/src/components/icon/icon.scss

@@ -1,6 +1,27 @@
 @use "../../wc";
 @use "./lni";
 
+$icon-colors: (
+  default: --zn-text,
+  primary: --zn-primary,
+  accent: --zn-accent,
+  info: --zn-color-info,
+  warning: --zn-color-warning,
+  error: --zn-color-error,
+  success: --zn-color-success,
+  white: --zn-body,
+  disabled: --zn-color-disabled,
+  red: --zn-red,
+  blue: --zn-blue,
+  green: --zn-green,
+  orange: --zn-orange,
+  yellow: --zn-yellow,
+  indigo: --zn-indigo,
+  violet: --zn-violet,
+  pink: --zn-pink,
+  grey: --zn-grey,
+);
+
 :host {
   display: inline-block;
   box-sizing: content-box !important;
@@ -115,6 +136,16 @@
     --icon-color: rgb(var(--zn-grey));
   }
 
+  &--filled .lucide {
+    fill: var(--icon-fill, currentColor);
+  }
+
+  @each $name, $token in $icon-colors {
+    &--fill-#{$name} {
+      --icon-fill: rgb(var(#{$token}));
+    }
+  }
+
   &--round {
     border-radius: 50%;
   }

package/src/components/icon-picker/icon-picker.scss

@@ -136,7 +136,7 @@ zn-dialog {
   overflow-y: auto;
   align-content: flex-start;
   border: solid 1px rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   padding: var(--zn-spacing-x-small);
 }
 
@@ -148,7 +148,7 @@ zn-dialog {
   height: 48px;
   padding: 0;
   border: 2px solid transparent;
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   background: transparent;
   color: rgb(var(--zn-text-color));
   cursor: pointer;
@@ -179,7 +179,7 @@ zn-dialog {
   gap: var(--zn-spacing-small);
   padding: var(--zn-spacing-medium);
   background-color: rgba(var(--zn-panel-secondary), 0.5);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   text-align: center;
 
   &--empty {

package/src/components/input/input.scss

@@ -91,7 +91,7 @@
   margin: 0;
   cursor: inherit;
   -webkit-appearance: none;
-  line-height: 24px;
+  line-height: var(--zn-input-line-height);
 }
 
 /* Color input text should use monospace font */
@@ -391,7 +391,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   border: solid 1px rgba(0, 0, 0, 0.15);
   background-color: var(--zn-color-neutral-0);
   cursor: pointer;
@@ -427,7 +427,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
 .input__color-swatch-inner {
   width: 100%;
   height: 100%;
-  border-radius: calc(var(--zn-border-radius-medium) - 2px);
+  border-radius: calc(var(--zn-border-radius) - 2px);
   background-color: var(--color-value, #000000);
 }
 

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

@@ -34,10 +34,10 @@
 .input-group--gap ::slotted([data-zn-input-group__input--first]),
 .input-group--gap ::slotted([data-zn-input-group__input--inner]),
 .input-group--gap ::slotted([data-zn-input-group__input--last]) {
-  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
-  --zn-input-border-radius-large: var(--zn-border-radius-medium);
+  --zn-input-border-radius-x-small: var(--zn-border-radius);
+  --zn-input-border-radius-small: var(--zn-border-radius);
+  --zn-input-border-radius-medium: var(--zn-border-radius);
+  --zn-input-border-radius-large: var(--zn-border-radius);
 }
 
 /* Common styles for slotted inputs */
@@ -65,10 +65,10 @@
 }
 
 ::slotted([data-zn-input-group__input--first]) {
-  --zn-input-border-radius-x-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
-  --zn-input-border-radius-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
-  --zn-input-border-radius-medium: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
-  --zn-input-border-radius-large: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-x-small: var(--zn-border-radius) 0 0 var(--zn-border-radius);
+  --zn-input-border-radius-small: var(--zn-border-radius) 0 0 var(--zn-border-radius);
+  --zn-input-border-radius-medium: var(--zn-border-radius) 0 0 var(--zn-border-radius);
+  --zn-input-border-radius-large: var(--zn-border-radius) 0 0 var(--zn-border-radius);
 }
 
 ::slotted([data-zn-input-group__input--inner]) {
@@ -79,10 +79,10 @@
 }
 
 ::slotted([data-zn-input-group__input--last]) {
-  --zn-input-border-radius-x-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
-  --zn-input-border-radius-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
-  --zn-input-border-radius-medium: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
-  --zn-input-border-radius-large: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-x-small: 0 var(--zn-border-radius) var(--zn-border-radius) 0;
+  --zn-input-border-radius-small: 0 var(--zn-border-radius) var(--zn-border-radius) 0;
+  --zn-input-border-radius-medium: 0 var(--zn-border-radius) var(--zn-border-radius) 0;
+  --zn-input-border-radius-large: 0 var(--zn-border-radius) var(--zn-border-radius) 0;
 
   margin-inline-end: 0;
 }
@@ -97,9 +97,9 @@
 ::slotted(zn-button[data-zn-input-group__input--first]),
 ::slotted(zn-button[data-zn-input-group__input--inner]),
 ::slotted(zn-button[data-zn-input-group__input--last]) {
-  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
-  --zn-input-border-radius-large: var(--zn-border-radius-medium);
+  --zn-input-border-radius-x-small: var(--zn-border-radius);
+  --zn-input-border-radius-small: var(--zn-border-radius);
+  --zn-input-border-radius-medium: var(--zn-border-radius);
+  --zn-input-border-radius-large: var(--zn-border-radius);
 }
 

package/src/components/markdown-editor/markdown-editor.scss

@@ -3,7 +3,7 @@
 .panel {
   border: 1px solid rgb(var(--zn-border-color));
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
 }
 
 .markdown-editor {
@@ -108,7 +108,7 @@
   flex: 1;
   background: var(--zn-color-neutral-0, white);
   border: 1px solid var(--zn-color-neutral-200);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   padding: var(--zn-spacing-x-large);
   overflow-y: auto;
   font-family: inherit;

package/src/components/menu/menu.component.ts

@@ -58,6 +58,11 @@ export default class ZnMenu extends ZincElement {
 
   @property({attribute: 'actions', type: Array}) actions = [];
 
+  /** The menu's visual style. `shell` renders the app-shell header dropdown
+   * look: a padded panel with floating rounded items. Propagated to the
+   * menu's items. */
+  @property({reflect: true}) variant: 'default' | 'shell' = 'default';
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'menu');
@@ -113,6 +118,7 @@ export default class ZnMenu extends ZincElement {
               <zn-menu-item @mousedown=${this.handleMouseDown}
                             @keydown=${this.handleKeyDown}
                             id="${item.confirm?.trigger}"
+                            variant="${this.itemVariant}"
                             confirm>
                 ${(item.icon) ? html`
                   <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
@@ -123,6 +129,7 @@ export default class ZnMenu extends ZincElement {
               return html`
                 <zn-menu-item value="${item.title}"
                               href="${item.path}"
+                              variant="${this.itemVariant}"
                               data-target="${ifDefined(item.target)}">
                   ${(item.icon) ? html`
                     <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
@@ -133,7 +140,7 @@ export default class ZnMenu extends ZincElement {
                 </zn-menu-item>`;
             } else {
               return html`
-                <zn-menu-item value="${item.title}" data-path="${ifDefined(item.path)}">
+                <zn-menu-item value="${item.title}" variant="${this.itemVariant}" data-path="${ifDefined(item.path)}">
                   ${(item.icon) ? html`
                     <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                   <span @click="${this.handleClick}"
@@ -233,6 +240,30 @@ export default class ZnMenu extends ZincElement {
       this.setCurrentItem(items[0]);
       this.emit('zn-menu-ready');
     }
+
+    this.propagateVariant();
+  }
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('variant')) {
+      this.propagateVariant();
+    }
+  }
+
+  /**
+   * @internal The variant applied to slotted items. A `default` menu still gives
+   * its items the `dropdown` look (muted hover, no separators) — distinct from a
+   * bare standalone menu item, which keeps the navigation styling.
+   */
+  get itemVariant(): 'dropdown' | 'shell' {
+    return this.variant === 'shell' ? 'shell' : 'dropdown';
+  }
+
+  /** Keeps slotted menu items in sync with the menu's variant. */
+  private propagateVariant() {
+    this.getAllItems().forEach(item => item.setAttribute('variant', this.itemVariant));
   }
 
   private isMenuItem(item: HTMLElement) {

package/src/components/menu/menu.scss

@@ -3,12 +3,35 @@
 :host {
   display: block;
   position: relative;
-  border-width: 1px;
-  border-radius: 5px;
+  padding: 1px;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
   width: fit-content;
-  min-width: var(--zn-spacing-small-panel);
+  min-width: var(--zn-size-spanel);
   overflow: auto;
   overscroll-behavior: none;
-  box-shadow: var(--zn-shadow-medium);
-  background-color: rgb(var(--zn-color-navigation, 255, 255, 255));
+  box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
+  background-color: rgb(var(--zn-panel));
+}
+
+// Dropdown vs shell hover/row styling lives on zn-menu-item, keyed by the
+// `variant` the menu sets on its items (see menu.component.ts).
+
+// Shell variant — the app-shell header dropdown look (as used by Rubix):
+// padded panel with floating rounded items, translucent blurred background
+:host([variant="shell"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-x-small);
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  min-width: 245px;
+  max-width: min(320px, calc(100vw - 16px));
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-shadow: none;
+  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
+  backdrop-filter: blur(3px);
 }

package/src/components/menu-item/menu-item.component.ts

@@ -47,6 +47,10 @@ export default class ZnMenuItem extends ZincElement {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   @property() type: 'normal' | 'checkbox' = 'normal';
 
+  /** The item's visual style. A standalone item defaults to navigation styling;
+   * a parent zn-menu sets this to `dropdown` or `shell` automatically. */
+  @property({reflect: true}) variant: 'default' | 'dropdown' | 'shell' = 'default';
+
   /** Draws the item in a checked state. */
   @property({type: Boolean, reflect: true}) checked = false;
 
@@ -235,7 +239,7 @@ export default class ZnMenuItem extends ZincElement {
         ?aria-expanded="${isSubmenuExpanded}">
         ${this.checkedPosition === 'left' ? html`
           <span part="checked-icon" class="menu-item__check">
-            <zn-icon src="check_small" aria-hidden="true"></zn-icon>
+            <zn-icon src="check@lu" size="18" aria-hidden="true"></zn-icon>
           </span>` : ''}
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -246,7 +250,7 @@ export default class ZnMenuItem extends ZincElement {
 
         ${this.checkedPosition === 'right' ? html`
           <span part="checked-icon" class="menu-item__check">
-            <zn-icon src="check_small" aria-hidden="true"></zn-icon>
+            <zn-icon src="check@lu" size="18" aria-hidden="true"></zn-icon>
           </span>` : ''}
 
         <span part="submenu-icon" class="menu-item__chevron">

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

@@ -1,13 +1,30 @@
 @use "../../wc";
 
 :host {
+  // Baseline — standalone items (e.g. app/sidebar navigation): primary hover
   --submenu-offset: -2px;
-  --color: rgba(var(--zn-text), var(--zn-text-opacity));
+  --color: var(--zn-text-menu-link-color);
   --hover-color: rgb(var(--zn-primary));
   --hover-bg: rgba(var(--zn-color-navigation-highlight), var(--zn-panel-highlight-opacity));
+  --active-color: rgb(var(--zn-primary));
   display: block;
 }
 
+// Dropdown — items inside a default zn-menu panel: muted hover (the text keeps
+// its colour), no separators between rows. Set by the parent zn-menu.
+:host([variant="dropdown"]) {
+  --hover-color: var(--color);
+  --hover-bg: rgba(0, 0, 0, 0.06);
+}
+
+// Shell — app-shell header dropdown look: dark text, primary hover. Set by the
+// parent zn-menu's `variant="shell"`.
+:host([variant="shell"]) {
+  --color: rgb(var(--zn-text));
+  --hover-color: rgb(var(--zn-primary));
+  --hover-bg: rgba(var(--zn-primary), 0.05);
+}
+
 :host([inert]) {
   display: none;
 }
@@ -25,9 +42,27 @@
   border-bottom-width: 1px;
   width: 100%;
   text-decoration: none;
+  font-size: var(--zn-text-menu-link-font-size);
+  line-height: var(--zn-text-menu-link-line-height);
+  font-weight: var(--zn-text-menu-link-font-weight);
   color: var(--color);
 }
 
+:host([variant="dropdown"]) .menu-item {
+  align-items: center;
+  padding: var(--zn-spacing-small) var(--zn-spacing-large);
+  border-bottom-width: 0;
+}
+
+:host([variant="shell"]) .menu-item {
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-x-small);
+  border-bottom-width: 0;
+  border-radius: var(--zn-border-radius);
+  line-height: 25px;
+}
+
 .menu-item__label::slotted(*) {
   text-decoration: none;
   color: inherit;
@@ -72,12 +107,12 @@
   top: 0;
   bottom: 0;
   width: 3px;
-  background-color: var(--hover-color);
+  background-color: var(--active-color);
 }
 
 .menu-item.menu-item--active .menu-item__label {
   font-weight: 700;
-  color: var(--hover-color);
+  color: var(--active-color);
 }
 
 .menu-item--rtl.menu-item--active::before {
@@ -134,6 +169,11 @@
   margin-inline-end: var(--zn-spacing-small);
 }
 
+// Shell items space the icon via the row gap instead
+:host([variant="shell"]) .menu-item .menu-item__prefix::slotted(*) {
+  margin-inline-end: 0;
+}
+
 .menu-item .menu-item__suffix {
   flex: 0 0 auto;
   display: flex;
@@ -165,12 +205,16 @@
 }
 
 :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
-.menu-item--submenu-expanded,
-.menu-item--active {
+.menu-item--submenu-expanded {
   background-color: var(--hover-bg);
   color: var(--hover-color);
 }
 
+.menu-item--active {
+  background-color: var(--hover-bg);
+  color: var(--active-color);
+}
+
 :host(:focus-visible) .menu-item {
   outline: none;
   background-color: var(--hover-bg);

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

@@ -49,11 +49,13 @@ export default class ZnNavbar extends ZincElement {
   @property({attribute: 'border', type: Boolean, reflect: true}) border: boolean;
   @property({attribute: 'hide-one', type: Boolean, reflect: true}) hideOne: boolean;
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+  @property({attribute: 'gutter', type: Boolean, reflect: true}) gutter: boolean = false;
   @property({type: Boolean}) stacked: boolean;
   @property({type: Array}) dropdown = [];
   @property({attribute: "no-pad", type: Boolean}) noPad: false
   @property({attribute: 'manual-add-items', type: Boolean}) manualAddItems = false;
   @property({type: Boolean}) isolated = false;
+  @property({reflect: true}) color: string;
 
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'store-key', type: String}) storeKey: string = '';
@@ -541,14 +543,15 @@ export default class ZnNavbar extends ZincElement {
           'navbar--flush': this.flush,
           'navbar--no-pad': this.noPad,
           'navbar--stacked': this.stacked,
-          'navbar--icon-bar': this.iconBar
+          'navbar--icon-bar': this.iconBar,
+          [`navbar--color-${this.color}`]: Boolean(this.color)
         })}">
           ${this._preItems}
           ${this.navigation.map((item: any) => {
             let content = html`${item.title}`;
             if (item.icon != undefined && item.icon != '') {
               content = html`
-                <zn-icon src="${item.icon}"></zn-icon>${content}`;
+                <zn-icon src="${item.icon}" size="20"></zn-icon>${content}`;
             }
             if (item.path != undefined) {
               return html`
@@ -564,9 +567,9 @@ export default class ZnNavbar extends ZincElement {
               </li>`;
           })}
           <li class="more">
-            <zn-dropdown placement="bottom-end" id="extended-dropdown">
+            <zn-dropdown placement="bottom-end" id="extended-dropdown" distance="1">
               <zn-button slot="trigger" text color="transparent">
-                <zn-icon src="arrow_right_alt" size="16"></zn-icon>
+                <zn-icon src="arrow_right_alt" size="20"></zn-icon>
               </zn-button>
               <ul id="extended-menu">
               </ul>