@kubex/zinc 1.0.24 → 1.0.98

package/src/components/select/select.scss

@@ -82,8 +82,9 @@
   outline: none;
 }
 
-/* Visually hide the display input when multiple is enabled */
-.select--multiple:not(.select--placeholder-visible) .select__display-input {
+/* Visually hide the display input when multiple is enabled (but not when search is active and open) */
+.select--multiple:not(.select--placeholder-visible):not(.select--search) .select__display-input,
+.select--multiple.select--search:not(.select--open):not(.select--placeholder-visible) .select__display-input {
   position: absolute;
   z-index: -1;
   top: 0;
@@ -93,6 +94,41 @@
   opacity: 0;
 }
 
+/* When multiple + search + open, shrink the input to fit inline with the tags */
+.select--multiple.select--search.select--open .select__display-input {
+  flex: 1 1 60px;
+  min-width: 60px;
+  width: auto;
+  order: 2;
+  margin-inline-start: var(--zn-spacing-2x-small);
+}
+
+/* When multiple + search + open, place tags before the input */
+.select--multiple.select--search.select--open .select__prefix {
+  order: 0;
+}
+
+.select--multiple.select--search.select--open .select__tags {
+  order: 1;
+  flex: 0 1 auto;
+}
+
+/* Keep clear button and expand icon at the end */
+.select--multiple.select--search.select--open .select__clear {
+  order: 4;
+}
+
+.select--multiple.select--search.select--open .select__expand-icon {
+  order: 5;
+}
+
+/* Ensure the combobox wraps so the input flows after tags (only when open to avoid affecting initial size) */
+.select--multiple.select--search.select--open .select__combobox {
+  flex-wrap: wrap;
+  gap: var(--zn-spacing-2x-small);
+  padding-inline-start: 0;
+}
+
 .select__value-input {
   position: absolute;
   top: 0;
@@ -308,6 +344,24 @@
   rotate: -180deg;
 }
 
+/* Fetch loading spinner */
+.select__spinner {
+  animation: spin 1s linear infinite;
+  --icon-size: var(--zn-font-size-large);
+  --icon-color: var(--zn-input-icon-color);
+}
+
+@keyframes spin {
+  from { rotate: 0deg; }
+  to { rotate: 360deg; }
+}
+
+/* Fetch error icon */
+.select__fetch-error-icon {
+  --icon-size: var(--zn-font-size-large);
+  --icon-color: var(--zn-color-danger-600);
+}
+
 /* Listbox */
 .select__listbox {
   display: block;
@@ -344,3 +398,55 @@
   user-select: none;
   -webkit-user-select: none;
 }
+
+.select__listbox ::slotted(zn-opt-group) {
+  display: block;
+}
+
+.select__listbox ::slotted(zn-opt-group[hidden]) {
+  display: none;
+}
+
+/* Search loading indicator (remote search in-flight) */
+.select__search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
+  color: var(--zn-color-neutral-500);
+  font-size: var(--zn-font-size-medium);
+}
+
+/* Max results truncation indicator */
+.select__max-results-indicator {
+  display: block;
+  padding: var(--zn-spacing-small) var(--zn-spacing-2x-large);
+  text-align: center;
+  color: var(--zn-color-neutral-500);
+  font-size: var(--zn-font-size-small);
+  font-style: italic;
+  border-top: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+}
+
+/* Empty state (no search results) */
+.select__empty-state {
+  display: block;
+  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
+  text-align: center;
+  color: var(--zn-color-neutral-500);
+  font-size: var(--zn-font-size-medium);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+/* Search mode */
+.select--search .select__combobox {
+  cursor: text;
+}
+
+.select--search .select__display-input {
+  cursor: text;
+}

package/src/components/select/select.test.ts

@@ -1,10 +1,155 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnOption from '../option/option.component';
+import type ZnSelect from './select.component';
 
 describe('<zn-select>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-select></zn-select> `);
+    const el = await fixture(html`
+      <zn-select></zn-select> `);
 
     expect(el).to.exist;
   });
+
+  describe('search functionality', () => {
+    let el: ZnSelect;
+
+    beforeEach(async () => {
+      el = await fixture<ZnSelect>(html`
+        <zn-select search>
+          <zn-option value="apple">Apple</zn-option>
+          <zn-option value="banana">Banana</zn-option>
+          <zn-option value="cherry">Cherry</zn-option>
+          <zn-option value="date">Date</zn-option>
+          <zn-option value="elderberry">Elderberry</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+    });
+
+    it('should have the search attribute set', () => {
+      expect(el.search).to.be.true;
+      expect(el.hasAttribute('search')).to.be.true;
+    });
+
+    it('should have a readonly display input when closed', () => {
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      expect(displayInput.readOnly).to.be.true;
+    });
+
+    it('should make the display input editable when opened', async () => {
+      await el.show();
+      await el.updateComplete;
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      expect(displayInput.readOnly).to.be.false;
+    });
+
+    it('should filter options based on typed text', async () => {
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = 'app';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      const options = el.querySelectorAll<ZnOption>('zn-option');
+      const visibleOptions = [...options].filter(o => !o.hidden);
+      const hiddenOptions = [...options].filter(o => o.hidden);
+
+      expect(visibleOptions.length).to.equal(1);
+      expect(visibleOptions[0].value).to.equal('apple');
+      expect(hiddenOptions.length).to.equal(4);
+    });
+
+    it('should show all options when search is cleared', async () => {
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+
+      // Type to filter
+      displayInput.value = 'app';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      // Clear the search
+      displayInput.value = '';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      const options = el.querySelectorAll<ZnOption>('zn-option');
+      const visibleOptions = [...options].filter(o => !o.hidden);
+      expect(visibleOptions.length).to.equal(5);
+    });
+
+    it('should match against option values as well as labels', async () => {
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = 'elder';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      const options = el.querySelectorAll<ZnOption>('zn-option');
+      const visibleOptions = [...options].filter(o => !o.hidden);
+
+      expect(visibleOptions.length).to.equal(1);
+      expect(visibleOptions[0].value).to.equal('elderberry');
+    });
+
+    it('should not show search text after dropdown closes', async () => {
+      // Open and type a search query
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = 'ban';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      // Close the dropdown
+      await el.hide();
+      await el.updateComplete;
+
+      // Display input should not show the search text (no value selected, so should be empty)
+      expect(displayInput.value).to.not.equal('ban');
+    });
+
+    it('should restore all options visibility after closing', async () => {
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = 'app';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      // Close the dropdown
+      await el.hide();
+      await el.updateComplete;
+
+      // All options should be visible again
+      const options = el.querySelectorAll<ZnOption>('zn-option');
+      const hiddenOptions = [...options].filter(o => o.hidden);
+      expect(hiddenOptions.length).to.equal(0);
+    });
+
+    it('should be case-insensitive when filtering', async () => {
+      await el.show();
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = 'APPLE';
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      const options = el.querySelectorAll<ZnOption>('zn-option');
+      const visibleOptions = [...options].filter(o => !o.hidden);
+
+      expect(visibleOptions.length).to.equal(1);
+      expect(visibleOptions[0].value).to.equal('apple');
+    });
+  });
 });

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

@@ -57,9 +57,8 @@ export default class ZnSettingsContainer extends ZincElement {
     this._store = new Store(window.sessionStorage, this.storeKey);
 
     this.recomputeFiltersFromSlot();
-    this.updateFilters();
 
-    // Load saved filter states
+    // Load saved filter states before applying filters
     if (this.storeKey) {
       const savedFilters = this._store.get('filters');
       if (savedFilters) {
@@ -68,10 +67,11 @@ export default class ZnSettingsContainer extends ZincElement {
           ...filter,
           checked: Object.prototype.hasOwnProperty.call(parsedFilters, filter.attribute) ? parsedFilters[filter.attribute] : filter.checked
         }));
-        this.updateFilters();
       }
     }
 
+    this.updateFilters();
+
     this._mutationObserver = new MutationObserver(mutations => {
       for (const mutation of mutations) {
         if (mutation.type === 'attributes' && mutation.attributeName === 'hidden') {
@@ -127,27 +127,47 @@ export default class ZnSettingsContainer extends ZincElement {
     this.filters = nextFilters;
   }
 
+  private updateSingleFilter(filter: SettingsContainerFilter, checked: boolean) {
+    let items;
+    const attrAppend = filter.attribute === "*" ? `` : `[${filter.attribute}]`;
+    if (filter.itemSelector && filter.itemSelector.startsWith('>')) {
+      items = deepQuerySelectorAll(filter.itemSelector.substring(1) + attrAppend, this, "");
+    } else {
+      items = this.querySelectorAll(filter.itemSelector + attrAppend);
+    }
+    items.forEach(item => {
+      if (checked) {
+        const shouldStayHidden = this.filters.some(f => {
+          if (f.attribute === filter.attribute || f.checked) return false;
+          const fAttrAppend = f.attribute === "*" ? `` : `[${f.attribute}]`;
+          let fItems;
+          if (f.itemSelector && f.itemSelector.startsWith('>')) {
+            fItems = deepQuerySelectorAll(f.itemSelector.substring(1) + fAttrAppend, this, "");
+          } else {
+            fItems = this.querySelectorAll(f.itemSelector + fAttrAppend);
+          }
+          return Array.from(fItems).includes(item);
+        });
+
+        if (!shouldStayHidden) {
+          item.removeAttribute('hidden');
+          this._hiddenElements.delete(item);
+        }
+      } else {
+        item.setAttribute('hidden', 'true');
+        this._hiddenElements.add(item);
+      }
+    });
+  }
+
   updateFilters() {
     // reset all items
     this._hiddenElements.forEach(el => el.removeAttribute('hidden'));
+    this._hiddenElements.clear();
 
     // apply filters
     this.filters.forEach(filter => {
-      let items;
-      const attrAppend = filter.attribute === "*" ? `` : `[${filter.attribute}]`;
-      if (filter.itemSelector && filter.itemSelector.startsWith('>')) {
-        items = deepQuerySelectorAll(filter.itemSelector.substring(1) + attrAppend, this, "");
-      } else {
-        items = this.querySelectorAll(filter.itemSelector + attrAppend);
-      }
-      items.forEach(item => {
-        if (filter.checked) {
-          item.removeAttribute('hidden');
-        } else {
-          item.setAttribute('hidden', 'true');
-          this._hiddenElements.add(item);
-        }
-      });
+      this.updateSingleFilter(filter, filter.checked);
     });
   }
 
@@ -155,6 +175,10 @@ export default class ZnSettingsContainer extends ZincElement {
     const attribute = (e.target as ZnCheckbox).getAttribute('data-attribute');
     const checked = (e.target as ZnCheckbox).isChecked
 
+    // Find the specific filter that changed
+    const changedFilter = this.filters.find(f => f.attribute === attribute);
+    if (!changedFilter) return;
+
     this.filters = this.filters.map(filter => {
       if (filter.attribute === attribute) {
         return {...filter, checked};
@@ -171,7 +195,8 @@ export default class ZnSettingsContainer extends ZincElement {
       this._store.set('filters', JSON.stringify(filterStates));
     }
 
-    this.updateFilters();
+    // Only update elements affected by this specific filter
+    this.updateSingleFilter(changedFilter, checked);
   }
 
   render() {

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

@@ -5,7 +5,7 @@
 }
 
 .container {
-  padding-bottom: 30px;
+  padding-bottom: 50px;
 }
 
 .container--scroll {

package/src/components/skeleton/skeleton.component.ts

@@ -7,10 +7,15 @@ import type {CSSResultGroup} from "lit";
 import styles from './skeleton.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Skeleton loaders provide visual placeholders while content is loading, improving perceived performance and user experience.
  * @documentation https://zinc.style/components/skeleton
  * @status experimental
  * @since 1.0
+ *
+ * @property {string} speed - Animation speed for the shimmer effect. Default: "3s"
+ * @property {string} width - Width of the skeleton element. Default: "100%"
+ * @property {string} height - Height of the skeleton element. Default: "20px"
+ * @property {string} radius - Border radius of the skeleton element. Default: "4px"
  */
 export default class ZnSkeleton extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);

package/src/components/slideout/slideout.scss

@@ -25,15 +25,20 @@
   flex-direction: column;
   z-index: 2;
   padding: 0;
-  width: var(--width);
-  background-color: var(--zn-panel-background-color);
-  box-shadow: var(--zn-shadow-x-large);
+  width: 1100px;
+  background: rgb(var(--zn-body));
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+
+  &::backdrop {
+    background: var(--zn-overlay-background-color);
+  }
 
 
   &__header {
     flex: 0 0 auto;
     display: flex;
     border-bottom: 1px solid rgb(var(--zn-border-color));
+    background-color: var(--zn-panel-background-color);
   }
 
   &__title {

package/src/components/sp/sp.component.ts

@@ -17,7 +17,7 @@ export const defaultSizes = {
 }
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary A flexible layout container for spacing and arranging child elements in rows or columns with configurable gap, padding, and dividers.
  * @documentation https://zinc.style/components/sp
  * @status experimental
  * @since 1.0
@@ -43,6 +43,7 @@ export default class ZnSp extends ZincElement {
   @property({attribute: 'pad-x', type: Boolean, reflect: true}) padX: boolean = false;
   @property({attribute: 'pad-y', type: Boolean, reflect: true}) padY: boolean = false;
   @property({attribute: 'no-gap', type: Boolean, reflect: true}) noGap: boolean = false;
+  @property({attribute: 'no-pos', type: Boolean, reflect: true}) noPosition: boolean = false;
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
   @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
   @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
@@ -73,6 +74,7 @@ export default class ZnSp extends ZincElement {
         'sp--row': this.row,
         'sp--grow': this.grow,
         'sp--no-gap': this.noGap,
+        'sp--no-pos': this.noPosition,
         'sp--flush': this.flush,
         'sp--flush-y': this.flushY,
         'sp--flush-x': this.flushX,

package/src/components/sp/sp.scss

@@ -9,6 +9,21 @@
   --zn-sp-gap: var(--zn-divide-gap, var(--zn-spacing-medium));
 }
 
+:host([grow]) {
+  display: flex;
+  flex-grow: 1;
+}
+
+:host([max-full]) {
+  max-height: 100%;
+  overflow: hidden;
+}
+
+:host([scroll]) {
+  max-height: 100%;
+  overflow: auto;
+}
+
 .sp {
   position: relative;
   display: flex;
@@ -49,6 +64,10 @@
     flex-direction: row;
   }
 
+  &--no-pos {
+    position: unset;
+  }
+
   &--no-gap {
     gap: 0;
   }

package/src/components/stepper/stepper.component.ts

@@ -5,21 +5,27 @@ import ZincElement from '../../internal/zinc-element';
 import styles from './stepper.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Steppers provide visual feedback about progress through a multi-step process or workflow.
  * @documentation https://zinc.style/components/stepper
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @property {string} caption - A descriptive label displayed above the stepper to indicate the current step or phase.
+ * @property {string} label - An optional label displayed above the caption, typically used for the wizard or workflow name.
+ * @property {number} steps - The total number of steps in the process.
+ * @property {number} value - The current step position (0 to steps). Progress is calculated as value/steps.
+ * @property {boolean} show-progress - When true, displays the step count (e.g., "2 / 5 steps") next to the caption.
  *
- * @event zn-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
+ * @csspart step-container - The container holding the progress line and steps.
+ * @csspart step-line - The background line showing the full step track.
+ * @csspart step-progress - The filled progress indicator showing completion.
+ * @csspart steps - The container for individual step markers.
+ * @csspart step - An individual step marker circle.
+ * @csspart header - The header container with caption and progress text.
+ * @csspart caption - The caption text element.
+ * @csspart progress - The progress count text (e.g., "2 / 5 steps").
+ * @csspart label - The label text container.
+ * @csspart info - The label text element.
  */
 export default class ZnStepper extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);

package/src/components/textarea/textarea.scss

@@ -151,10 +151,6 @@
   overflow-y: hidden;
 }
 
-.form-control-input--flush {
-  margin: 0 !important;
-}
-
 .textarea--transparent {
   background-color: transparent;
   box-shadow: none !important;

package/src/components/tile/tile.component.ts

@@ -28,7 +28,7 @@ import styles from './tile.scss';
 export default class ZnTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'properties', 'actions', 'image');
 
   @property({attribute: 'caption'}) caption: string;
 
@@ -54,6 +54,13 @@ export default class ZnTile extends ZincElement {
     return this.href || this.dataUri;
   }
 
+  private _handleActionsClick(e: MouseEvent) {
+    if (this._isLink()) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
   render() {
     const isLink = this._isLink();
     const tag = isLink ? literal`a` : literal`div`;
@@ -99,8 +106,10 @@ export default class ZnTile extends ZincElement {
           </div>
 
           <div class="tile__right">
-            <slot name="properties" part="properties" class="tile__properties"></slot>
-            <slot name="actions" part="actions" class="tile__actions"></slot>
+            ${hasProperties ? html`
+              <slot name="properties" part="properties" class="tile__properties"></slot>` : ''}
+            ${hasActions ? html`
+              <slot name="actions" part="actions" class="tile__actions" @click=${this._handleActionsClick}></slot>` : ''}
           </div>`}
       </${tag}>`;
   }

package/src/components/tile/tile.scss

@@ -59,7 +59,7 @@
 .tile__right {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   width: 50%;
   flex-grow: 1;
   column-gap: var(--zn-spacing-large);

package/src/components/timer/timer.component.ts

@@ -27,15 +27,28 @@ export default class ZnTimer extends ZincElement {
   @property({type: Number})
   private timestamp = '';
 
+  private _timerId: number | null = null;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._timerId !== null) {
+      clearTimeout(this._timerId);
+      this._timerId = null;
+    }
+  }
+
   private _getLastMessage() {
     const time = new Date(parseInt(this.timestamp) * 1000);
     const diff = (new Date()).getTime() - time.getTime();
     const times = this._getTimes(diff);
 
 
-    setTimeout(() => {
+    if (this._timerId !== null) {
+      clearTimeout(this._timerId);
+    }
+    this._timerId = setTimeout(() => {
       this.requestUpdate();
-    }, 1000);
+    }, 1000) as unknown as number;
 
     return html`
       <div class="last-message upper-limit-reached">