@kubex/zinc 1.0.25 → 1.0.99

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;
+  }
+}

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

@@ -0,0 +1,74 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './opt-group.scss';
+
+/**
+ * @summary Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.
+ * @documentation https://zinc.style/components/opt-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot for `<zn-option>` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The group label element.
+ */
+export default class ZnOptGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** The label for the opt-group, displayed as a non-selectable header above the grouped options. */
+  @property() label = '';
+
+  /** Disables all options within the group. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'group');
+    this.setAttribute('aria-label', this.label);
+  }
+
+  @watch('label')
+  handleLabelChange() {
+    this.setAttribute('aria-label', this.label);
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.propagateDisabled();
+  }
+
+  /** @internal - Updates visibility of the group based on whether any child options are visible. */
+  updateVisibility() {
+    const options = [...this.querySelectorAll('zn-option')];
+    this.hidden = options.length > 0 && options.every(option => option.hidden);
+  }
+
+  render() {
+    return html`
+      <div part="base" class="opt-group">
+        <div part="label" class="opt-group__label" aria-hidden="true">
+          ${this.label}
+        </div>
+        <div class="opt-group__options" role="none">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleSlotChange() {
+    if (this.disabled) {
+      this.propagateDisabled();
+    }
+  }
+
+  private propagateDisabled() {
+    this.querySelectorAll('zn-option').forEach(option => {
+      option.disabled = this.disabled;
+    });
+  }
+}

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

@@ -0,0 +1,37 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.opt-group__label {
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-font-size-x-small);
+  font-weight: var(--zn-font-weight-semibold);
+  line-height: var(--zn-line-height-normal);
+  letter-spacing: var(--zn-letter-spacing-normal);
+  color: var(--zn-color-neutral-500);
+  text-transform: uppercase;
+  padding-block: var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-large);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:host(:not(:first-of-type)) .opt-group__label {
+  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+  margin-block-start: var(--zn-spacing-x-small);
+  padding-block-start: var(--zn-spacing-small);
+}
+
+.opt-group__options {
+  display: block;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,27 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+
+describe('<zn-opt-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-opt-group></zn-opt-group> `);
+
+    expect(el).to.exist;
+  });
+
+  it('should display a label', async () => {
+    const el = await fixture(html`
+      <zn-opt-group label="Group Label"></zn-opt-group> `);
+    const label = el.shadowRoot!.querySelector('.opt-group__label');
+
+    expect(label).to.exist;
+    expect(label!.textContent!.trim()).to.equal('Group Label');
+  });
+
+  it('should have role="group"', async () => {
+    const el = await fixture(html`
+      <zn-opt-group label="Test"></zn-opt-group> `);
+
+    expect(el.getAttribute('role')).to.equal('group');
+  });
+});

package/src/components/option/option.component.ts

@@ -43,8 +43,7 @@ export default class ZnOption extends ZincElement {
 
   /**
    * The option's value. When selected, the containing form control will receive this value. The value must be unique
-   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-   * multiple values.
+   * from other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.
    */
   @property({ reflect: true }) value = '';
 
@@ -93,20 +92,6 @@ export default class ZnOption extends ZincElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
-  @watch('value')
-  handleValueChange() {
-    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
-    // instead of requiring them to cast the value to a string.
-    if (typeof this.value !== 'string') {
-      this.value = String(this.value);
-    }
-
-    if (this.value.includes(' ')) {
-      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
-      this.value = this.value.replace(/ /g, '_');
-    }
-  }
-
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
     const nodes = this.childNodes;

package/src/components/option/option.scss

@@ -6,6 +6,10 @@
   -webkit-user-select: none;
 }
 
+:host([hidden]) {
+  display: none !important;
+}
+
 :host(:focus) {
   outline: none;
 }

package/src/components/panel/panel.component.ts

@@ -8,18 +8,18 @@ import ZincElement from '../../internal/zinc-element';
 import styles from './panel.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Panels are versatile containers that provide structure for organizing content with optional headers and footers.
  * @documentation https://zinc.style/components/panel
  * @status experimental
  * @since 1.0
  *
- * @slot - The default slot.
- * @slot actions - The actions slot.
- * @slot footer - The footer slot.
+ * @slot - The panel's main content.
+ * @slot actions - Actions displayed in the panel header (buttons, chips, etc).
+ * @slot footer - Content displayed in the panel footer.
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
  */
 export default class ZnPanel extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -92,7 +92,7 @@ export default class ZnPanel extends ZincElement {
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
         'panel--cosmic': this.cosmic,
-        'panel--shadow': this.shadow
+        'panel--shadow': this.shadow,
       })}">
 
         <div class="panel__inner">
@@ -109,8 +109,10 @@ export default class ZnPanel extends ZincElement {
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
             </zn-header>` : null}
 
-          <div class="panel__body">
-            <slot></slot>
+          <div class="panel__content">
+            <div class="panel__body">
+              <slot></slot>
+            </div>
           </div>
 
           ${hasFooterSlot ? html`

package/src/components/panel/panel.scss

@@ -33,13 +33,32 @@
     flex-grow: 1;
   }
 
+  &__content {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+
   &__header {
     padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
 
+    // background-color: rgba(var(--zn-panel-highlight), 0.6);
+    // border-bottom: 1px solid rgb(var(--zn-border-color));
+
     &::part(base) {
       border-bottom: 0;
     }
 
+    &::part(header-caption) {
+      font-size: var(--zn-font-size-large);
+    }
+
+    &--inline {
+      border-bottom: 0;
+    }
+
     &--underline {
       border-bottom: 1px solid rgb(var(--zn-border-color));
     }
@@ -144,4 +163,5 @@
   &--shadow {
     box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
   }
+
 }

package/src/components/priority-list/index.ts

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