@kubex/zinc 1.0.25 → 1.0.98

package/src/components/item/item.scss

@@ -12,6 +12,7 @@
   flex-direction: row;
   padding: 0 var(--zn-spacing-medium);
   gap: var(--zn-spacing-2x-small);
+  min-height: 35px;
 
   @include wc.container-query(null, md) {
     --zn-item-label-max-width: 220px;
@@ -95,6 +96,12 @@
     line-height: var(--zn-line-height-loose);
     width: 100%;
     flex-shrink: 0;
+
+    &--required::after {
+      content: var(--zn-input-required-content);
+      margin-inline-start: var(--zn-input-required-content-offset);
+      color: var(--zn-input-required-content-color);
+    }
   }
 
   &__description {

package/src/components/key/index.ts

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

package/src/components/key/key.component.ts

@@ -0,0 +1,47 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './key.scss';
+
+/**
+ * @summary A legend key item, typically used alongside charts to label and toggle visibility of data series by category.
+ * @documentation https://zinc.style/components/key
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The description of the key.
+ */
+export default class ZnKey extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() icon: string = '';
+  @property() attribute: string = '';
+  @property() value: string = '';
+  @property() color: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'primary';
+  @property({type: Boolean, reflect: true}) active: boolean = false;
+  @property({attribute: 'icon-size', type: Number}) iconSize: number = 24;
+
+  private _handleClick() {
+    this.active = !this.active;
+    this.emit('zn-change');
+  }
+
+  render() {
+    const chipType = this.active ? this.color : 'transparent';
+
+    return html`
+      <div class="key" @click="${this._handleClick}">
+        <zn-chip
+          .icon="${this.icon}"
+          .iconSize="${this.iconSize}"
+          .type="${chipType}"
+          size="medium"
+        ></zn-chip>
+        <div class="key__description">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/key/key.scss

@@ -0,0 +1,38 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.key {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: var(--zn-spacing-medium);
+  align-items: center;
+  text-align: left;
+
+  &__description {
+    font-size: var(--zn-font-size-small);
+    color: rgb(var(--zn-text-body));
+    opacity: 0.7;
+    line-height: var(--zn-line-height-normal);
+    user-select: none;
+  }
+}
+
+:host([active]) .key__label {
+  color: rgb(var(--zn-text-heading));
+  font-weight: 600;
+}
+
+:host(:not([active])) {
+  .key__description {
+    opacity: 0.6;
+  }
+
+  zn-chip {
+    --zn-chip-color: rgb(var(--zn-text-body));
+    opacity: 0.5;
+  }
+}

package/src/components/key-container/index.ts

@@ -0,0 +1,12 @@
+import ZnKeyContainer from './key-container.component';
+
+export * from './key-container.component';
+export default ZnKeyContainer;
+
+ZnKeyContainer.define('zn-key-container');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-key-container': ZnKeyContainer;
+  }
+}

package/src/components/key-container/key-container.component.ts

@@ -0,0 +1,142 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import type ZnKey from "../key/key.component";
+
+import styles from './key-container.scss';
+
+/**
+ * @summary A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.
+ * @documentation https://zinc.style/components/key-container
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The content to be filtered.
+ * @slot keys - The key items (zn-key) that define the filters.
+ *
+ * @event zn-change - Emitted when the set of active keys changes.
+ */
+export default class ZnKeyContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('slot[name="keys"]') keysSlot: HTMLSlotElement;
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @property() position: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' = 'bottom-start';
+  @property() target: string = ''; // ID of the target element containing items
+  @property({attribute: 'item-selector'}) itemSelector: string = '[data-type]';
+  @property({attribute: 'filter-attribute'}) filterAttribute: string = '';
+  @property({attribute: 'no-scroll', type: Boolean}) noScroll: boolean = false;
+
+  private _hiddenElements: Set<Element> = new Set();
+  private _targetElement: HTMLElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateFilters();
+  }
+
+  firstUpdated() {
+    if (this.target) {
+      const rootNode = this.getRootNode() as Document | ShadowRoot;
+      this._targetElement = rootNode.getElementById ? rootNode.getElementById(this.target) : document.getElementById(this.target);
+    }
+    this.updateFilters();
+  }
+
+  private _handleKeyChange() {
+    this.updateFilters();
+    this.emit('zn-change');
+  }
+
+  private getKeys(): ZnKey[] {
+    const keys = [];
+    if (this.keysSlot) {
+      keys.push(...this.keysSlot.assignedElements({flatten: true}));
+    }
+    if (this.defaultSlot) {
+      keys.push(...this.defaultSlot.assignedElements({flatten: true}));
+    }
+    return keys.filter(el => el.tagName.toLowerCase() === 'zn-key') as ZnKey[];
+  }
+
+  private updateFilters() {
+    const keys = this.getKeys();
+    if (!keys || keys.length === 0) return;
+
+    // Reset hidden elements
+    this._hiddenElements.forEach(el => el.removeAttribute('hidden'));
+    this._hiddenElements.clear();
+
+    if (this.target && !this._targetElement) {
+      const rootNode = this.getRootNode() as Document | ShadowRoot;
+      this._targetElement = rootNode.getElementById?.(this.target) ?? document.getElementById(this.target);
+    }
+    let root: Element | Document | DocumentFragment | null = this._targetElement ?? null;
+
+    if (!root) {
+      const slotElements = this.defaultSlot?.assignedElements({flatten: true}) ?? [];
+      root = slotElements.some(el => el.tagName !== 'ZN-KEY')
+        ? this
+        : this.parentElement ?? (this.parentNode as DocumentFragment);
+    }
+    if (!root) return;
+
+    const selector = this.filterAttribute ? `[${this.filterAttribute}]` : this.itemSelector;
+    const items = deepQuerySelectorAll(selector, root as HTMLElement, "");
+    items.forEach(item => {
+      if (item === this) return;
+
+      const matchesInactive = keys.some(key => !key.active && this.itemMatchesKey(item, key));
+      if (matchesInactive) {
+        item.setAttribute('hidden', '');
+        this._hiddenElements.add(item);
+      }
+    });
+  }
+
+  private itemMatchesKey(item: Element, key: ZnKey): boolean {
+    // 1. If the container specifies filterAttribute, use key.attribute as the value to look for
+    if (this.filterAttribute) {
+      const itemValue = item.getAttribute(this.filterAttribute);
+      if (!itemValue) return false;
+
+      const targetValue = key.attribute;
+      if (!targetValue) return false;
+
+      return itemValue.split(/\s+/).includes(targetValue);
+    }
+
+    // 2. If key specifies attribute and value
+    if (key.attribute && key.value) {
+      const itemValue = item.getAttribute(key.attribute);
+      if (!itemValue) return false;
+
+      return itemValue.split(/\s+/).includes(key.value);
+    }
+
+    // 3. If the key only specifies attribute (and no value), check for existence
+    if (key.attribute) {
+      return item.hasAttribute(key.attribute);
+    }
+
+    return false;
+  }
+
+  render() {
+    return html`
+      <div class="${classMap({
+        'key-container': true,
+        'key-container--scroll': !this.noScroll,
+      })}" @zn-change="${this._handleKeyChange}">
+        ${this.target ? '' : html`
+          <div class="key-container__content">
+            <slot @slotchange="${this.updateFilters.bind(this)}" class="key-container__keys"></slot>
+          </div>
+        `}
+      </div>
+    `;
+  }
+}

package/src/components/key-container/key-container.scss

@@ -0,0 +1,33 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+}
+
+.key-container--scroll {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.key-container__content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.key-container__keys {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+}
+
+::slotted(zn-key) {
+  flex: 0 0 auto;
+}
+
+::slotted([hidden]) {
+  display: none !important;
+}

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

@@ -78,6 +78,21 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({type: Boolean, reflect: true}) confirm = false;
 
+  /** Removes all padding from the menu item. */
+  @property({type: Boolean, reflect: true}) flush = false;
+
+  /** Removes horizontal (left/right) padding only. Ignored if flush is set. */
+  @property({type: Boolean, reflect: true, attribute: 'flush-x'}) flushX = false;
+
+  /** Removes vertical (top/bottom) padding only. Ignored if flush is set. */
+  @property({type: Boolean, reflect: true, attribute: 'flush-y'}) flushY = false;
+
+  /** Removes the border from the menu item. */
+  @property({type: Boolean, reflect: true, attribute: 'no-border'}) noBorder = false;
+
+  /** Marks the menu item as currently active/selected. */
+  @property({type: Boolean, reflect: true}) active = false;
+
   private readonly localize = new LocalizeController(this);
   private readonly hasSlotController = new HasSlotController(this, 'submenu');
   private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
@@ -209,6 +224,11 @@ export default class ZnMenuItem extends ZincElement {
           'menu-item--success': this.color === 'success',
           'menu-item--warning': this.color === 'warning',
           'menu-item--transparent': this.color === 'transparent',
+          'menu-item--flush': this.flush,
+          'menu-item--flush-x': this.flushX && !this.flush,
+          'menu-item--flush-y': this.flushY && !this.flush,
+          'menu-item--no-border': this.noBorder,
+          'menu-item--active': this.active,
 
         })}
         ?aria-haspopup="${this.isSubmenu()}"

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

@@ -23,7 +23,7 @@
   white-space: nowrap;
   cursor: pointer;
   border-bottom-width: 1px;
-
+  width: 100%;
   text-decoration: none;
   color: var(--color);
 }
@@ -44,6 +44,72 @@
   cursor: wait;
 }
 
+// Flush variants - remove padding
+.menu-item--flush {
+  padding: 0;
+}
+
+.menu-item--flush-x {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.menu-item--flush-y {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// No border variant
+.menu-item--no-border {
+  border-bottom-width: 0;
+}
+
+// Active state - vertical strip indicator
+.menu-item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--hover-color);
+}
+
+.menu-item.menu-item--active .menu-item__label {
+  font-weight: 700;
+  color: var(--hover-color);
+}
+
+.menu-item--rtl.menu-item--active::before {
+  left: auto;
+  right: 0;
+}
+
+// Active state with color variants
+.menu-item--active.menu-item--primary::before {
+  background-color: rgb(var(--zn-primary));
+}
+
+.menu-item--active.menu-item--error::before {
+  background-color: rgb(var(--zn-color-error));
+}
+
+.menu-item--active.menu-item--info::before {
+  background-color: rgb(var(--zn-color-info));
+}
+
+.menu-item--active.menu-item--warning::before {
+  background-color: rgb(var(--zn-color-warning));
+}
+
+.menu-item--active.menu-item--success::before {
+  background-color: rgb(var(--zn-color-success));
+}
+
+.menu-item--active.menu-item--secondary::before {
+  background-color: rgb(var(--zn-accent));
+}
+
 .menu-item .menu-item__label {
   display: flex;
   flex: 1 1 auto;
@@ -99,7 +165,8 @@
 }
 
 :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
-.menu-item--submenu-expanded {
+.menu-item--submenu-expanded,
+.menu-item--active {
   background-color: var(--hover-bg);
   color: var(--hover-color);
 }

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

@@ -2,12 +2,18 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
+import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
 import type {ZnMenuSelectEvent} from "../../events/zn-menu-select";
 
 import styles from './navbar.scss';
 
+interface StoredTab {
+  uri: string;
+  title: string;
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/navbar
@@ -44,6 +50,11 @@ export default class ZnNavbar extends ZincElement {
   @property({attribute: 'manual-add-items', type: Boolean}) manualAddItems = false;
   @property({type: Boolean}) isolated = false;
 
+  @property({attribute: 'master-id', reflect: true}) masterId: string;
+  @property({attribute: 'store-key', type: String}) storeKey: string = '';
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+
   private _preItems: NodeListOf<Element>;
   private _postItems: NodeListOf<Element>;
   @property()
@@ -59,6 +70,8 @@ export default class ZnNavbar extends ZincElement {
   private _expandableMargin: number = 0;
   private _totalItemWidth: number = 0;
 
+  protected _store: Store;
+
   appendItem(item: Element) {
     this._appended = this._appended || [];
     this._appended.push(item);
@@ -72,6 +85,16 @@ export default class ZnNavbar extends ZincElement {
 
     this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
     this.resizeObserver.observe(this as HTMLElement); // Observe the parent node
+
+    if (!this.masterId) {
+      this.masterId = this.storeKey || Math.floor(Math.random() * 1000000).toString();
+    }
+
+    if (this.storeKey && this.storeTtl === 0) {
+      this.storeTtl = 300;
+    }
+
+    this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "znnav:", this.storeTtl);
   }
 
 
@@ -92,7 +115,7 @@ export default class ZnNavbar extends ZincElement {
     let parent = this.parentElement;
     let availableWidth = this.offsetWidth || parent?.offsetWidth || 0;
 
-    // Needs to grab the first available width that is not 0
+    // Needs to grab the first available width that is 0
     // This is to avoid issues with the parent/navbar not being visible
     while (availableWidth === 0 && parent?.parentElement) {
       parent = parent.parentElement;
@@ -129,7 +152,7 @@ export default class ZnNavbar extends ZincElement {
     this._navItems?.classList.toggle('has-hidden', hasHidden && hideRemaining)
   }
 
-  public addItem(item: Element): void {
+  public addItem(item: Element, persist: boolean = true): void {
     const tabUri = item.getAttribute('tab-uri');
     if (typeof tabUri !== 'string' || this._openedTabs.includes(tabUri)) {
       return;
@@ -137,8 +160,15 @@ export default class ZnNavbar extends ZincElement {
     this._openedTabs.push(tabUri);
     const ul = this.shadowRoot?.querySelector('ul');
     const dropdown = this.shadowRoot?.querySelector('[id="dropdown-item"]');
-    // @ts-expect-error
-    dropdown.querySelector('zn-dropdown').hide();
+
+    if (persist && dropdown) {
+      dropdown.querySelector('zn-dropdown')?.hide();
+      this._saveTabToStorage({
+        uri: tabUri,
+        title: (item as HTMLElement).innerText
+      });
+    }
+
     if (dropdown) {
       ul?.insertBefore(item, dropdown);
     } else {
@@ -159,8 +189,21 @@ export default class ZnNavbar extends ZincElement {
     if (this._navItems) {
       const computed = getComputedStyle(this._navItems);
       this._navItemsGap = parseInt(computed.columnGap);
+
+      this._navItems.addEventListener('click', (e) => {
+        const target = (e.target as HTMLElement).closest('li[tab-uri]');
+        if (target && this.storeKey) {
+          const uri = target.getAttribute('tab-uri');
+          if (uri) {
+            this._store.set(this.storeKey + ':active', uri);
+          }
+        }
+      });
     }
 
+    // Load persisted tabs before calculating widths
+    this._loadStoredTabs();
+
     setTimeout(() => {
       const items = this._navItems?.querySelectorAll('li') || [];
       for (const item of items) {
@@ -182,7 +225,7 @@ export default class ZnNavbar extends ZincElement {
             const li = document.createElement('li');
             li.setAttribute('tab-uri', (e.detail.element as HTMLElement).getAttribute('data-path')!);
             li.innerText = e.detail.value;
-            this.addItem(li);
+            this.addItem(li, true);
             setTimeout(() => {
               li.click();
             }, 300);
@@ -192,8 +235,55 @@ export default class ZnNavbar extends ZincElement {
     }
   }
 
-  showMore() {
-    //console.log("Showing More")
+  private _loadStoredTabs() {
+    if (!this.storeKey || !this._store) return;
+
+    const storedData = this._store.get(this.storeKey);
+    const activeUri = this._store.get(this.storeKey + ':active');
+    if (storedData) {
+      try {
+        const tabs = JSON.parse(storedData) as StoredTab[];
+        if (Array.isArray(tabs)) {
+          tabs.forEach(tab => {
+            if (tab.uri && tab.title) {
+              const li = document.createElement('li');
+              li.setAttribute('tab-uri', tab.uri);
+              li.innerText = tab.title;
+              // Pass false to avoid re-saving what was just read
+              this.addItem(li, false);
+
+              if (activeUri && tab.uri === activeUri) {
+                setTimeout(() => {
+                  li.click();
+                }, 100);
+              }
+            }
+          });
+        }
+      } catch (e) {
+        console.warn('ZnNavbar: Failed to load stored tabs', e);
+      }
+    }
+  }
+
+  private _saveTabToStorage(newTab: StoredTab) {
+    if (!this.storeKey || !this._store) return;
+
+    try {
+      const storedData = this._store.get(this.storeKey);
+      let tabs: StoredTab[] = [];
+      if (storedData) {
+        tabs = JSON.parse(storedData) as StoredTab[];
+      }
+
+      // Ensure we don't save duplicates
+      if (!tabs.some(t => t.uri === newTab.uri)) {
+        tabs.push(newTab);
+        this._store.set(this.storeKey, JSON.stringify(tabs));
+      }
+    } catch (e) {
+      console.warn('ZnNavbar: Failed to save tab', e);
+    }
   }
 
   private handleClick = (e: MouseEvent) => {
@@ -273,10 +363,12 @@ export default class ZnNavbar extends ZincElement {
           ${this._postItems}
           ${this._appended}
         </ul>
-        <div class="expandables">
-          ${this._expanding}
-          <slot name="expand"></slot>
-        </div>
+        ${this._expanding?.length > 0 ? html`
+          <div class="expandables">
+            ${this._expanding}
+            <slot name="expand"></slot>
+          </div>
+        ` : ''}
       </div>`;
   }
 }

package/src/components/navbar/navbar.scss

@@ -25,6 +25,11 @@ ul.navbar {
     padding-top: 0;
     font-size: var(--zn-font-size-medium);
     white-space: nowrap;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
   }
 }
 
@@ -146,7 +151,7 @@ ul.navbar {
 
 }
 
-.navbar__container--stacked {
+.navbar__container--stacked.navbar__container--icon-bar {
   display: inline;
 }
 

package/src/components/opt-group/index.ts

@@ -0,0 +1,12 @@
+import ZnOptGroup from './opt-group.component';
+
+export * from './opt-group.component';
+export default ZnOptGroup;
+
+ZnOptGroup.define('zn-opt-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-opt-group': ZnOptGroup;
+  }
+}