@kubex/zinc 1.0.113 → 1.0.115

package/scss/_root.scss

@@ -44,8 +44,40 @@
 
   --base: 255, 255, 255;
   --inverse-base: 0, 0, 0;
+
+  --zn-base-gap: 12px;
+  --zn-gutter: 4px;
+  --zn-default-margin: 0 auto 0 0;
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --zn-base-gap: 16px;
+    --zn-gutter: 6px;
+  }
+}
+
+@media (min-width: 1600px) {
+  :root {
+    --zn-base-gap: 20px;
+    --zn-gutter: 8px;
+  }
 }
 
+@media (min-width: 2000px) {
+  :root {
+    --zn-base-gap: 24px;
+    --zn-gutter: 10px;
+  }
+}
+
+@media (min-width: 2400px) {
+  :root {
+    --zn-default-margin: 0 auto;
+  }
+}
+
+
 .zn-mono {
   font-family: var(--zn-font-family-mono);
 }
@@ -201,8 +233,8 @@
   color: rgb(var(--zn-color-success));
 }
 
-ul.gap{
-  li{
+ul.gap {
+  li {
     margin: 5px 0;
   }
 }

package/scss/mixins/_spacing-mixins.scss

@@ -43,7 +43,7 @@
 }
 
 @mixin padding {
-  padding: var(--zn-spacing-medium, 0);
+  padding: var(--zn-base-gap, 0);
 }
 
 @function spacing($size, $default: sm) {

package/scss/shared/layout.scss

@@ -205,9 +205,17 @@
 }
 
 .zn-panel-bg {
+  --zn-page-surface-background: var(--zn-panel);
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
 }
 
+.zn-panel {
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-large);
+  --zn-page-surface-background: var(--zn-panel);
+}
+
 .zn-container {
   display: flex;
   flex-direction: column;
@@ -279,14 +287,19 @@
 .zn-panel-bar {
   border-bottom: 1px solid rgb(var(--zn-border-color));
   background-color: rgba(var(--zn-panel), 0.9);
-  padding: 3px;
-  gap: 3px;
+  padding: 4px;
+  gap: 4px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   z-index: 1;
 }
 
+.zn-panel-bar--pill {
+  border-radius: var(--zn-border-radius-large);
+  border: 1px solid rgb(var(--zn-border-color));
+}
+
 .zn-panel-bar--large {
   padding: 6px;
   gap: 6px;

package/scss/themes/_light.scss

@@ -372,7 +372,7 @@
   --zn-transition-x-fast: 50ms;
 
   /** Gap */
-  --zn-gap: var(--zn-spacing-medium, 0);
+  --zn-gap: var(--zn-base-gap, var(--zn-spacing-medium, 4px));
 
   /**************************************************************
    * Typography

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

@@ -1,3 +1,4 @@
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import ZincElement from '../../internal/zinc-element';
 import type {PropertyValues} from 'lit';
 
@@ -14,16 +15,14 @@ import type {PropertyValues} from 'lit';
  */
 export default class ZnAbsoluteContainer extends ZincElement {
 
-  private domObserver: MutationObserver;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.observerDom();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.domObserver?.disconnect();
+  constructor() {
+    super();
+    // eslint-disable-next-line no-new
+    new MutationController(this, {
+      config: {childList: true, subtree: true, attributes: true, characterData: true},
+      callback: () => this.resize(),
+      skipInitial: true,
+    });
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
@@ -39,21 +38,6 @@ export default class ZnAbsoluteContainer extends ZincElement {
     this.style.minHeight = newSize + 'px';
   }
 
-  observerDom() {
-    // observe the DOM for changes
-    this.domObserver = new MutationObserver(() => {
-      this.resize();
-    });
-
-    this.domObserver.observe(this,
-      {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true
-      });
-  }
-
   // the height of this element is set to the height of its children (absolute positioned)
   // to push the content element down
   createRenderRoot() {

package/src/components/animated-button/animated-button.test.ts

@@ -56,7 +56,7 @@ describe('<zn-animated-button>', () => {
     await el.updateComplete;
 
     const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
-    expect(button.classList.contains('purchase-button--success')).to.be.true;
+    expect(button.classList.contains('animated-button--success')).to.be.true;
   });
 
   it('should transition to failure state when setFailure is called', async () => {
@@ -66,7 +66,7 @@ describe('<zn-animated-button>', () => {
     await el.updateComplete;
 
     const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
-    expect(button.classList.contains('purchase-button--failure')).to.be.true;
+    expect(button.classList.contains('animated-button--failure')).to.be.true;
     expect(button.textContent).to.include('Payment failed');
   });
 
@@ -79,18 +79,18 @@ describe('<zn-animated-button>', () => {
     await el.updateComplete;
 
     let button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
-    expect(button.classList.contains('purchase-button--failure')).to.be.true;
+    expect(button.classList.contains('animated-button--failure')).to.be.true;
 
     await waitUntil(
       () => {
         button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
-        return button.classList.contains('purchase-button--idle');
+        return button.classList.contains('animated-button--idle');
       },
       '',
       { timeout: 500 }
     );
 
-    expect(button.classList.contains('purchase-button--idle')).to.be.true;
+    expect(button.classList.contains('animated-button--idle')).to.be.true;
   });
 
   it('should show spinner icon in processing state', async () => {
@@ -100,7 +100,7 @@ describe('<zn-animated-button>', () => {
     button.click();
     await el.updateComplete;
 
-    const spinner = el.shadowRoot?.querySelector('.purchase-button__spinner');
+    const spinner = el.shadowRoot?.querySelector('.animated-button__spinner');
     expect(spinner).to.exist;
   });
 
@@ -110,7 +110,7 @@ describe('<zn-animated-button>', () => {
     el.setSuccess();
     await el.updateComplete;
 
-    const successIcon = el.shadowRoot?.querySelector('.purchase-button__icon--success');
+    const successIcon = el.shadowRoot?.querySelector('.animated-button__icon--success');
     expect(successIcon).to.exist;
   });
 
@@ -120,7 +120,7 @@ describe('<zn-animated-button>', () => {
     el.setFailure();
     await el.updateComplete;
 
-    const failureIcon = el.shadowRoot?.querySelector('.purchase-button__icon--failure');
+    const failureIcon = el.shadowRoot?.querySelector('.animated-button__icon--failure');
     expect(failureIcon).to.exist;
   });
 

package/src/components/button/button.component.ts

@@ -66,6 +66,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({type: Boolean}) disabled = false;
   @property({type: Boolean}) grow = false;
   @property({type: Boolean}) square = false;
+  @property({type: Boolean, attribute: 'panel-bg'}) panelBackground = false;
 
   @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
 
@@ -329,6 +330,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button': true,
           'button--default': this.color === 'default',
           'button--secondary': this.color === 'secondary',
+          'button--panel-bg': this.panelBackground,
           'button--error': this.color === 'error',
           'button--info': this.color === 'info',
           'button--success': this.color === 'success',
@@ -360,7 +362,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
         data-notification="${ifDefined(this.notification)}"
-        disabled=${this.disabled || nothing}
+        disabled="${this.disabled || nothing}"
         @click="${this.handleClick}">
         ${this.iconPosition === 'left' ? icon : ''}
         <slot part="label"

package/src/components/button/button.scss

@@ -13,6 +13,7 @@
   }
 }
 
+
 .button {
   @include shared.button;
 
@@ -445,3 +446,7 @@
   border-radius: 0 5px 5px 0 !important;
   border-left: 0 !important;
 }
+
+.button--panel-bg {
+  background: rgb(var(--zn-panel));
+}

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

@@ -2,6 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
 import type ZnButton from "../button";
@@ -51,7 +52,18 @@ export default class ZnButtonMenu extends ZincElement {
 
   private _originalButtons: CustomButtonWidths[] = [];
 
-  private resizeObserver: ResizeObserver | null = null;
+  private _resizeRafId = 0;
+
+  private readonly resizeObserver = new ResizeController(this, {
+    target: null,
+    callback: () => {
+      if (this._resizeRafId) return;
+      this._resizeRafId = requestAnimationFrame(() => {
+        this._resizeRafId = 0;
+        this.containerWidth = this.offsetWidth;
+      });
+    },
+  });
 
   protected async firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
@@ -93,23 +105,11 @@ export default class ZnButtonMenu extends ZincElement {
     super.connectedCallback();
     this.containerWidth = this.offsetWidth;
 
-    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
-    this.resizeObserver.observe(this.parentNode as HTMLElement); // Observe the parent node
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
+    if (this.parentNode) {
+      this.resizeObserver.observe(this.parentNode as HTMLElement);
     }
   }
 
-  handleResize = () => {
-    this.containerWidth = this.offsetWidth;
-  }
-
   calculateVisibleButtons() {
     const containerWidth = this.containerWidth;
 
@@ -203,13 +203,12 @@ export default class ZnButtonMenu extends ZincElement {
         buttons.forEach((button: CustomButtonWidths, index: number) => {
           if (index >= visibleButtons) {
             const menuItem = document.createElement('zn-menu-item');
-            menuItem.innerText = button.button.innerText;
+            menuItem.innerText = this.getButtonLabel(button.button);
             menuItem.setAttribute('id', button.button.id || `zn-button-menu-item-${index}`);
             menuItem.setAttribute('role', 'menuitem');
             const attr = button.button.attributes;
             // Copy all attributes from the button to the menu item
-            for (let i = 0; i < attr.length; i++) {
-              const attribute = attr[i];
+            for (const attribute of Array.from(attr)) {
               if (attribute.name !== 'icon' && attribute.name !== 'category') {
                 menuItem.setAttribute(attribute.name, attribute.value);
               }
@@ -270,16 +269,32 @@ export default class ZnButtonMenu extends ZincElement {
     })
   }
 
+  private getButtonLabel(button: ZnButton) {
+    const labelSlot = button.shadowRoot?.querySelector<HTMLSlotElement>('slot[part="label"]');
+    const slottedLabel = labelSlot ? [...labelSlot.assignedNodes({flatten: true})]
+      .map(node => node.textContent ?? '')
+      .join('')
+      .trim() : '';
+
+    return slottedLabel ||
+      button.content ||
+      button.getAttribute('content') ||
+      (button as ZnButton & { caption?: string }).caption ||
+      button.getAttribute('caption') ||
+      button.button.innerText;
+  }
+
   render() {
     return html`
-      <div class=${classMap({
+      <div class="${classMap({
         'button-menu': true,
         'button-menu--no-padding': this.noPadding,
         'button-menu--no-gap': this.noGap,
-      })}>
+      })}">
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
-          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent" size="${this.size}"></zn-button>
+          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent"
+                     size="${this.size}"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>

package/src/components/button-menu/button-menu.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import type ZnButtonMenu from './button-menu.component';
 
 describe('<zn-button-menu>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,57 @@ describe('<zn-button-menu>', () => {
 
     expect(el).to.exist;
   });
+
+  it('uses the slotted button label when creating collapsed menu items', async () => {
+    const el = await fixture<ZnButtonMenu>(html`
+      <zn-button-menu limit="0">
+        <zn-button id="wrapped-label">
+          <span>Wrapped Label</span>
+        </zn-button>
+      </zn-button-menu>
+    `);
+
+    await el.updateComplete;
+    await aTimeout(20);
+    el.calculateVisibleButtons();
+
+    const menuItem = el.shadowRoot!.querySelector('zn-menu-item');
+
+    expect(menuItem).to.exist;
+    expect(menuItem!.innerText).to.equal('Wrapped Label');
+  });
+
+  it('uses the button content attribute when creating collapsed menu items', async () => {
+    const el = await fixture<ZnButtonMenu>(html`
+      <zn-button-menu limit="0">
+        <zn-button id="content-label" content="Content Label"></zn-button>
+      </zn-button-menu>
+    `);
+
+    await el.updateComplete;
+    await aTimeout(20);
+    el.calculateVisibleButtons();
+
+    const menuItem = el.shadowRoot!.querySelector('zn-menu-item');
+
+    expect(menuItem).to.exist;
+    expect(menuItem!.innerText).to.equal('Content Label');
+  });
+
+  it('uses the button caption attribute when creating collapsed menu items', async () => {
+    const el = await fixture<ZnButtonMenu>(html`
+      <zn-button-menu limit="0">
+        <zn-button id="caption-label" caption="Caption Label"></zn-button>
+      </zn-button-menu>
+    `);
+
+    await el.updateComplete;
+    await aTimeout(20);
+    el.calculateVisibleButtons();
+
+    const menuItem = el.shadowRoot!.querySelector('zn-menu-item');
+
+    expect(menuItem).to.exist;
+    expect(menuItem!.innerText).to.equal('Caption Label');
+  });
 });

package/src/components/chart/chart.component.ts

@@ -11,6 +11,7 @@ import {
 } from './builders';
 import { CanvasRenderer } from 'echarts/renderers';
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import {
   DataZoomComponent,
   GridComponent,
@@ -87,9 +88,14 @@ export default class ZnChart extends ZincElement {
   }) scale: boolean | number = false;
 
   private chart?: ECharts;
-  private resizeObserver?: ResizeObserver;
   private liveTimer?: number;
 
+  private readonly resizeObserver = new ResizeController(this, {
+    target: null,
+    skipInitial: true,
+    callback: () => this.chart?.resize(),
+  });
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     this.initChart();
     super.firstUpdated(_changedProperties);
@@ -150,11 +156,6 @@ export default class ZnChart extends ZincElement {
       echarts.connect(this.syncGroup);
     }
 
-    let firstResize = true;
-    this.resizeObserver = new ResizeObserver(() => {
-      if (firstResize) { firstResize = false; return; }
-      this.chart?.resize();
-    });
     this.resizeObserver.observe(host);
 
     if (this.live && this.dataUrl) this.startLive();
@@ -206,7 +207,6 @@ export default class ZnChart extends ZincElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.liveTimer) clearInterval(this.liveTimer);
-    this.resizeObserver?.disconnect();
     this.chart?.dispose();
     this.chart = undefined;
   }

package/src/components/collapsible/collapsible.component.ts

@@ -1,6 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, state} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
@@ -52,7 +53,11 @@ export default class ZnCollapsible extends ZincElement {
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label');
 
-  private observer: MutationObserver;
+  private readonly observer = new MutationController(this, {
+    target: null,
+    config: {childList: true, subtree: true},
+    callback: () => this.recalculateNumberOfItems(),
+  });
 
   private showArrow: boolean = true;
 
@@ -69,12 +74,7 @@ export default class ZnCollapsible extends ZincElement {
     }
 
     if (this.showNumber) {
-      // add a mutation observer to the default slot to recalculate the number of items when it changes
-      const slot = this as HTMLElement;
-      this.observer = new MutationObserver(() => {
-        this.recalculateNumberOfItems();
-      });
-      this.observer.observe(slot, {childList: true, subtree: true});
+      this.observer.observe(this);
     }
 
     await this.updateComplete;
@@ -106,13 +106,6 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
   handleCollapse = (e: MouseEvent) => {
     const target = e.target as HTMLElement;
     if (target.tagName.toLowerCase() === 'input' && (target as HTMLInputElement).type === 'checkbox') {

package/src/components/cols/cols.scss

@@ -18,7 +18,7 @@
   width: 100%;
   container-type: inline-size;
   overflow: hidden;
-  gap: var(--zn-spacing-small);
+  gap: var(--zn-spacing-medium);
 
   max-width: 100%;
 

package/src/components/content-block/content-block.component.ts

@@ -3,6 +3,7 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import type {PropertyValues} from 'lit';
 import {html, nothing, unsafeCSS} from 'lit';
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
@@ -44,7 +45,11 @@ export default class ContentBlock extends ZincElement {
 
   private _textRows: TextRow[] = [];
 
-  private _footerObserver?: MutationObserver;
+  private readonly _footerObserver = new MutationController(this, {
+    target: null,
+    config: {subtree: true, childList: true, attributes: true, attributeFilter: ['href', 'download', 'caption']},
+    callback: () => this._debouncedReplace(),
+  });
   private _replaceDebounce: number = 0;
 
   connectedCallback() {
@@ -71,20 +76,11 @@ export default class ContentBlock extends ZincElement {
   }
 
   disconnectedCallback() {
-    try {
-      if (this._footerObserver) {
-        this._footerObserver.disconnect();
-        this._footerObserver = undefined;
-      }
-      if (this._replaceDebounce) {
-        clearTimeout(this._replaceDebounce);
-        this._replaceDebounce = 0;
-      }
-    } finally {
-      // Ensure base class cleanup
-      // @ts-ignore - base may or may not implement disconnectedCallback
-      super.disconnectedCallback?.();
+    if (this._replaceDebounce) {
+      clearTimeout(this._replaceDebounce);
+      this._replaceDebounce = 0;
     }
+    super.disconnectedCallback();
   }
 
   private _collapseContent(e: Event) {
@@ -267,25 +263,7 @@ export default class ContentBlock extends ZincElement {
     const assignedEls: Element[] = slot.assignedElements({flatten: true});
     if (!assignedEls || assignedEls.length === 0) return;
 
-    // Reset and attach a new observer to watch for dynamic content inside the footer subtree
-    if (this._footerObserver) {
-      this._footerObserver.disconnect();
-      this._footerObserver = undefined;
-    }
-
-    const obs = new MutationObserver(() => {
-      this._debouncedReplace();
-    });
-    this._footerObserver = obs;
-
-    assignedEls.forEach(el => {
-      obs.observe(el, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ['href', 'download', 'caption']
-      });
-    });
+    assignedEls.forEach(el => this._footerObserver.observe(el));
 
     // Run now and again shortly after to catch async rendering
     this._replaceImagePlaceholders();

package/src/components/data-select/data-select.component.ts

@@ -10,6 +10,7 @@ import {
 } from "./providers/provider";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
@@ -134,7 +135,11 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
 
   protected readonly formControlController = new FormControlController(this);
 
-  private selectObserver?: MutationObserver;
+  private readonly selectObserver = new MutationController(this, {
+    target: null,
+    config: {attributes: true, attributeFilter: ['disabled']},
+    callback: () => this._syncDisabledState(),
+  });
 
   get validationMessage() {
     return this.select.validationMessage;
@@ -159,7 +164,6 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener('keydown', this.closeOnTab);
-    this.selectObserver?.disconnect();
   }
 
   protected async firstUpdated(_changedProperties: PropertyValues) {
@@ -398,15 +402,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     if (!this.select) return;
 
     this._syncDisabledState();
-
-    this.selectObserver = new MutationObserver(() => {
-      this._syncDisabledState();
-    });
-
-    this.selectObserver.observe(this.select, {
-      attributes: true,
-      attributeFilter: ['disabled']
-    });
+    this.selectObserver.observe(this.select);
   }
 
   private _syncDisabledState() {

package/src/components/data-select/data-select.scss

@@ -65,6 +65,7 @@ $sizes: (
 
 zn-select::part(listbox) {
   max-height: 300px;
+  padding-block: 0;
 }
 
 .select__icon {