@kubex/zinc 1.0.25 → 1.0.99

package/src/components/cols/cols.component.ts

@@ -53,12 +53,24 @@ export default class ZnCols extends ZincElement {
     this.maxColumns = layout.reduce((a, b) => a + b, 0);
 
     const prefix = 'zn-col-';
-    this.querySelectorAll(':scope > *').forEach((element: HTMLElement, index) => {
+    // Only count children slotted into the default slot (no slot attribute)
+    const children = Array.from(this.querySelectorAll(':scope > *:not([slot])')) as HTMLElement[];
+    const colsPerRow = layout.length;
+    const lastRowStart = children.length - (children.length % colsPerRow || colsPerRow);
+
+    children.forEach((element, index) => {
       const classes = element.className.split(' ').filter((c) => !c.startsWith(prefix));
       element.className = classes.join(' ');
 
-      const col = index % layout.length;
+      const col = index % colsPerRow;
       element.classList.add(prefix + layout[col]);
+
+      // Clip overflow on last-row elements to hide the ::before border pseudo
+      if(this.border && index >= lastRowStart) {
+        element.style.overflow = 'hidden';
+      } else {
+        element.style.overflow = '';
+      }
     });
 
     return html`

package/src/components/cols/cols.scss

@@ -6,6 +6,10 @@
   --col-width: 23%;
 }
 
+:host([contents]) {
+  display: contents;
+}
+
 .cols {
   display: flex;
   flex-wrap: wrap;
@@ -72,7 +76,8 @@
   }
 
   // Adds full-width lines between bordered cols
-  &--border ::slotted(*:not(:last-child)):before {
+  // Last row elements get overflow:hidden via JS to clip this pseudo
+  &--border ::slotted(*):before {
     content: "";
     position: absolute;
     bottom: -1px;
@@ -82,17 +87,6 @@
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  // Stops the last child/row having a border
-  &--border ::slotted(*:last-child):before {
-    content: "";
-    position: absolute;
-    bottom: -1px;
-    left: -100vw;
-    right: -5px;
-    z-index: 1111;
-    border-bottom: 1px solid var(--zn-panel-background-color) !important;
-  }
-
   &--pad {
     padding: var(--zn-spacing-2x-small);
   }

package/src/components/confirm/confirm.component.ts

@@ -178,6 +178,13 @@ export default class ZnConfirm extends ZincElement {
       form.action = this.action;
       form.method = 'POST';
 
+      // copy data-attributes from the confirm element to the form
+      Array.from(this.attributes).forEach(attr => {
+        if (attr.name.startsWith('data-')) {
+          form?.setAttribute(attr.name, attr.value);
+        }
+      });
+
       this.querySelectorAll('input').forEach((el: HTMLInputElement) => {
         form?.appendChild(el.cloneNode() as Node);
       })

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

@@ -1,10 +1,10 @@
-import {property, query, state} from 'lit/decorators.js';
+import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property, query, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import type ZnTooltip from "../tooltip";
 
 import styles from './copy-button.scss';
-import {classMap} from "lit/directives/class-map.js";
-import ZnTooltip from "../tooltip";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -44,6 +44,7 @@ export default class ZnCopyButton extends ZincElement {
 
   @property() src = '';
 
+  @property({type: Number, reflect: true}) size: number = 24;
 
   /**
    * An id that references an element in the same document from which data will be copied. If both this and `value` are
@@ -67,20 +68,20 @@ export default class ZnCopyButton extends ZincElement {
         content=${copyLabel}>
         <button class="copy-button__button" part="button" @click=${this.handleCopy}>
           <slot part="copy-icon" name="copy-icon">
-            <zn-icon src="${this.src ? this.src : 'content_copy'}"></zn-icon>
+            <zn-icon src="${this.src ? this.src : 'content_copy'}" size="${this.size}"></zn-icon>
           </slot>
           <slot part="success-icon" name="success-icon" hidden>
-            <zn-icon src="check"></zn-icon>
+            <zn-icon src="check" size="${this.size}"></zn-icon>
           </slot>
           <slot part="error-icon" name="error-icon" hidden>
-            <zn-icon src="priority_high"></zn-icon>
+            <zn-icon src="priority_high" size="${this.size}"></zn-icon>
           </slot>
         </button>
       </zn-tooltip>
     `;
   }
 
-  private async showStatus(status: 'success' | 'error') {
+  private showStatus(status: 'success' | 'error') {
     const iconToShow = status === 'success' ? this.successIcon : this.errorIcon;
     this.tooltip.content = status === 'success' ? 'Copied!' : 'Error!';
 
@@ -103,7 +104,7 @@ export default class ZnCopyButton extends ZincElement {
     }
     this.isCopying = true;
 
-    let valueToCopy = this.value||this.textContent;
+    let valueToCopy = this.value || this.textContent;
 
     if (this.from) {
       const root = this.getRootNode() as ShadowRoot | Document;
@@ -140,14 +141,14 @@ export default class ZnCopyButton extends ZincElement {
 
     if (!valueToCopy) {
       console.error('No value to copy. Please provide a value or a valid "from" attribute.');
-      await this.showStatus('error');
+      this.showStatus('error');
       this.emit('zn-error');
       return;
     }
 
     try {
       await navigator.clipboard.writeText(valueToCopy);
-      await this.showStatus('success');
+      this.showStatus('success');
       this.emit('zn-copy', {
         detail: {
           value: valueToCopy
@@ -155,7 +156,7 @@ export default class ZnCopyButton extends ZincElement {
       })
     } catch (error) {
       console.error('Failed to copy text: ', error);
-      await this.showStatus('error');
+      this.showStatus('error');
       this.emit('zn-error');
     }
 

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

@@ -6,48 +6,73 @@ import {
   type DataProviderOption,
   emptyDataProvider,
   type LocalDataProvider,
+  usStateDataProvider,
 } from "./providers/provider";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
+import ZnOption from "../option";
+import ZnSelect from "../select";
 import type {ZincFormControl} from '../../internal/zinc-element';
-import type ZnSelect from "../select";
 
 import styles from './data-select.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary A select component with built-in data providers for common options like colors, currencies, and countries.
  * @documentation https://zinc.style/components/data-select
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @dependency zn-select
+ * @dependency zn-option
  *
- * @event zn-event-name - Emitted as an example.
+ * @event zn-input - Emitted when the select's value changes.
+ * @event zn-clear - Emitted when the clear button is activated.
+ * @event blur - Emitted when the select loses focus.
  *
- * @slot - The default slot.
- * @slot example - An example slot.
+ * @slot label - The select's label. Alternatively, you can use the `label` attribute.
+ * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
+ * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.
+ * @slot help-text - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.
  *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
+ * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).
+ * @csspart expand-icon - The container that wraps the expand icon (forwarded from zn-select).
+ * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).
+ * @csspart form-control-input - The select's wrapper (forwarded from zn-select).
+ * @csspart display-input - The element that displays the selected option's label (forwarded from zn-select).
  */
 export default class ZnDataSelect extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-select': ZnSelect,
+    'zn-option': ZnOption,
+  };
 
   @query('#select') select: ZnSelect;
-  @query('#select__prefix') selectPrefix: HTMLElement;
 
   /** The name of the select. Used for form submission. */
   @property() name: string;
 
-  /** The value of the select. Used for form submission. */
-  @property() value: string;
+  /** The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings. */
+  @property({
+    converter: {
+      fromAttribute: (value: string | null) => {
+        if (!value) return '';
+        return value;
+      },
+      toAttribute: (value: string | string[]) => {
+        if (Array.isArray(value)) {
+          return value.join(',');
+        }
+        return value || '';
+      }
+    }
+  }) value: string | string[] = '';
 
   /** The provider of the select. */
-  @property() provider: 'color' | 'currency' | 'country' | 'phone';
+  @property() provider: 'color' | 'currency' | 'country' | 'phone' | 'us-state';
 
   /** The position of the icon. */
   @property({attribute: 'icon-position'}) iconPosition: 'start' | 'end' | 'none' = 'none';
@@ -70,6 +95,9 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   /** Include an "All" option at the top. */
   @property({type: Boolean, attribute: 'allow-all'}) allowAll = false;
 
+  /** Include a "Common" option that selects multiple common currencies. */
+  @property({type: Boolean, attribute: 'allow-common'}) allowCommon = false;
+
   /** The selects label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -91,12 +119,23 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   /** The selects required attribute. */
   @property({type: Boolean, reflect: true}) required = false;
 
+  /** Disables the select. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
   @property({attribute: "icon-only", type: Boolean, reflect: true}) iconOnly = false;
 
   @property({type: Boolean}) multiple = false;
 
+  @property({attribute: "select-first", type: Boolean}) selectFirst = false;
+
+  @property() distinct = "";
+
+  @property() conditional = "";
+
   protected readonly formControlController = new FormControlController(this);
 
+  private selectObserver?: MutationObserver;
+
   get validationMessage() {
     return this.select.validationMessage;
   }
@@ -120,13 +159,39 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener('keydown', this.closeOnTab);
+    this.selectObserver?.disconnect();
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues) {
+  protected async firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
+
+    if (this.select) {
+      await this.select.updateComplete;
+      this.select.addEventListener('zn-change', () => {
+        this._updatePrefix();
+      });
+      this._observeSelectDisabled();
+    }
     this._updatePrefix();
   }
 
+  protected async updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+
+    if (_changedProperties.has('value') || _changedProperties.has('multiple')) {
+      this._normalizeValue();
+    }
+
+    if (_changedProperties.has('value') ||
+      _changedProperties.has('provider') ||
+      _changedProperties.has('iconPosition')) {
+      if (this.select) {
+        await this.select.updateComplete;
+      }
+      this._updatePrefix();
+    }
+  }
+
   checkValidity(): boolean {
     return this.select.checkValidity();
   }
@@ -145,7 +210,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
 
   closeOnTab = (e: KeyboardEvent) => {
     if (this.select.open && e.key === 'Tab') {
-      this.select.hide();
+      this.select.hide().then();
     }
   }
 
@@ -153,15 +218,20 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   async handleValueChange() {
     await this.updateComplete;
     this.formControlController.updateValidity();
+    if (this.select) {
+      await this.select.updateComplete;
+      await new Promise(resolve => setTimeout(resolve, 0));
+    }
     this._updatePrefix();
   }
 
   handleInput = (e: Event) => {
-    this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
+    const target = e.target as ZnSelect;
+    this.value = target.value ?? (this.multiple ? [] : '');
   };
 
   handleClear = () => {
-    this.value = '';
+    this.value = this.multiple ? [] : '';
   }
 
   getLocalProvider(name: string): LocalDataProvider<DataProviderOption> {
@@ -169,11 +239,13 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
       case 'color':
         return colorDataProvider;
       case 'currency':
-        return currencyDataProvider;
+        return currencyDataProvider(this.allowCommon);
       case 'country':
         return countryDataProvider;
       case 'phone':
         return countryDialPrefixDataProvider;
+      case 'us-state':
+        return usStateDataProvider;
       default:
         return emptyDataProvider;
     }
@@ -189,16 +261,35 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     let data = localProvider.getData;
 
     if (filterKeys.length) {
-      data = localProvider.getData.filter(item => filterKeys.includes(item.key));
+      const normalizedFilterKeys = filterKeys.map(key => key.toUpperCase());
+      data = localProvider.getData.reduce<DataProviderOption[]>((acc, item) => {
+        const key = item.key.toUpperCase();
+        if (key.includes(',')) {
+          const parts = key.split(',').map(p => p.trim());
+          const matchingParts = parts.filter(part => normalizedFilterKeys.includes(part));
+          if (matchingParts.length > 1) {
+            acc.push({
+              ...item,
+              key: matchingParts.join(','),
+              value: `Common - ${matchingParts.join(', ')}`
+            });
+          }
+        } else if (normalizedFilterKeys.includes(key)) {
+          acc.push(item);
+        }
+        return acc;
+      }, []);
     }
 
     if (this.provider !== 'color' && this.allowAll) {
-      const label = {
+      const label: Record<string, string> = {
         currency: 'All Currencies',
         country: 'All Countries',
-        phone: 'All Phones'
-      }[this.provider] || 'All';
-      const allOption: DataProviderOption = {key: '', value: label, prefix: ''};
+        phone: 'All Phones',
+        'us-state': 'All States'
+      };
+      const allLabel = label[this.provider] || 'All';
+      const allOption: DataProviderOption = {key: '', value: allLabel, prefix: ''};
       data = [allOption, ...data.filter(item => item.key !== allOption.key)];
     }
 
@@ -213,50 +304,130 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  required=${this.required || nothing}
                  placement=${this.placement}
                  name="${this.name}"
+                 distinct="${this.distinct}"
+                 ?disabled="${this.disabled}"
+                 ?select-first="${this.selectFirst}"
+                 conditional="${this.conditional}"
                  @zn-input="${this.handleInput}"
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}
-                 value="${this.value}"
+                 .value="${this.value}"
                  ?multiple=${this.multiple}
                  placeholder="${this.getPlaceholder(localProvider)}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
         ${(this.iconPosition !== 'none' || this.iconOnly) ? html`
-          <div id="select__prefix" slot="prefix" class="select__prefix"></div>` : ''}
+          <div slot="prefix"
+               class="select__icon ${this.iconPosition === 'end' ? 'select__icon--end' : ''}"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`
           <zn-option class="select__option" value="${item.key}">
             ${(this.iconPosition !== 'none' || this.iconOnly) ? html`<span
-              slot="${this.iconPosition === 'end' ? 'suffix' : 'prefix'}">${item.prefix}</span>` : ''}
+              slot="prefix">${item.prefix}</span>` : ''}
             ${this.iconOnly ? undefined : item.value}
           </zn-option>`)}
       </zn-select>`;
   }
 
   private _updatePrefix() {
-    // Set the prefix of the select to the selected values prefix
-    const selectedOption = this.select.selectedOptions[0];
-    if (selectedOption && (this.iconPosition !== 'none' || this.iconOnly) && this.selectPrefix) {
-      if (this.iconPosition === 'none' && this.iconOnly) {
-        this.iconPosition = 'start';
-      }
-      const slot = this.iconPosition === 'start'
-        ? selectedOption.querySelector('[slot="prefix"]')
-        : selectedOption.querySelector('[slot="suffix"]');
-      if (slot) {
-        this.selectPrefix.innerHTML = '';
-        this.selectPrefix.appendChild(slot.cloneNode(true));
-      } else {
-        this.selectPrefix.innerHTML = '';
-      }
-    } else if (this.selectPrefix) {
-      this.selectPrefix.innerHTML = '';
+    if (!this.select || !this.shadowRoot) {
+      return;
+    }
+
+    const selectIcon = this.shadowRoot.querySelector('.select__icon')!;
+    const shouldShowIcon = this.iconPosition !== 'none' || this.iconOnly;
+    if (!shouldShowIcon) {
+      if (selectIcon) selectIcon.innerHTML = '';
+      this._updateIconEmptyState();
+      return;
+    }
+
+    if (this.iconPosition === 'none' && this.iconOnly) {
+      this.iconPosition = 'start';
+    }
+
+    const selectedOptions = this.select.selectedOptions;
+    if (!selectedOptions || selectedOptions.length === 0) {
+      if (selectIcon) selectIcon.innerHTML = '';
+      this._updateIconEmptyState();
+      return;
+    }
+
+    if (!selectIcon) {
+      return;
+    }
+
+    const selectedOption = selectedOptions[0];
+    const slot = selectedOption.querySelector('[slot="prefix"]');
+
+    if (slot) {
+      selectIcon.innerHTML = '';
+      selectIcon.appendChild(slot.cloneNode(true));
+    } else {
+      selectIcon.innerHTML = '';
+    }
+
+    this._updateIconEmptyState();
+  }
+
+  private _updateIconEmptyState() {
+    if (!this.shadowRoot) return;
+
+    const selectIcon = this.shadowRoot.querySelector('.select__icon');
+    const isEmpty = !selectIcon || selectIcon.innerHTML.trim() === '';
+
+    if (isEmpty) {
+      this.setAttribute('icon-empty', '');
+    } else {
+      this.removeAttribute('icon-empty');
     }
   }
 
   private getPlaceholder(localProvider: LocalDataProvider<any>) {
-    if (this.value) {
+    if (!this.value) {
+      return `Choose a ${localProvider.getName}`;
+    }
+
+    const hasValue = Array.isArray(this.value) ? this.value.length > 0 : this.value.length > 0;
+    if (hasValue) {
       return '';
     }
 
     return `Choose a ${localProvider.getName}`
   }
+
+  private _observeSelectDisabled() {
+    if (!this.select) return;
+
+    this._syncDisabledState();
+
+    this.selectObserver = new MutationObserver(() => {
+      this._syncDisabledState();
+    });
+
+    this.selectObserver.observe(this.select, {
+      attributes: true,
+      attributeFilter: ['disabled']
+    });
+  }
+
+  private _syncDisabledState() {
+    if (!this.select) return;
+
+    this.disabled = this.select.disabled;
+  }
+
+  private _normalizeValue() {
+    if (this.multiple) {
+      if (typeof this.value === 'string') {
+        if (this.value === '') {
+          this.value = [];
+        } else {
+          this.value = this.value.split(',').map(v => v.trim()).filter(v => v !== '');
+        }
+      }
+    } else {
+      if (Array.isArray(this.value)) {
+        this.value = this.value.length > 0 ? this.value[0] : '';
+      }
+    }
+  }
 }

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

@@ -1,5 +1,6 @@
 @use "../../wc";
 
+// Color icon palette
 $colors: (
   red: var(--zn-color-red-500),
   blue: var(--zn-color-blue-500),
@@ -12,15 +13,47 @@ $colors: (
   gray: var(--zn-color-gray-500)
 );
 
+// Size spacing configuration
+$sizes: (
+  small: var(--zn-input-spacing-small),
+  medium: var(--zn-input-spacing-medium),
+  large: var(--zn-input-spacing-large)
+);
+
+// Mixin for icon spacing based on size
+@mixin icon-spacing($size, $spacing) {
+  :host([size="#{$size}"]) .select__icon {
+    padding-inline-start: $spacing;
+    margin-inline-end: $spacing;
+  }
+}
+
+// Mixin for end-positioned icon spacing
+@mixin icon-end-spacing($size, $spacing) {
+  :host([size="#{$size}"]) .select__icon--end {
+    padding-inline-start: 0;
+    padding-inline-end: $spacing;
+    margin-inline-end: 0;
+    margin-inline-start: auto;
+  }
+}
+
+// Mixin for combobox padding restoration
+@mixin combobox-padding($condition, $size, $spacing) {
+  :host([#{$condition}][size="#{$size}"]) zn-select::part(combobox) {
+    padding-inline-start: $spacing !important;
+  }
+}
+
 :host {
   display: block;
 }
 
 .color-icon {
-  width: 15px;
-  height: 15px;
+  width: var(--zn-spacing-medium);
+  height: var(--zn-spacing-medium);
   display: block;
-  border-radius: 100%;
+  border-radius: var(--zn-border-radius-circle);
   flex-shrink: 0;
 
   @each $name, $color in $colors {
@@ -34,10 +67,37 @@ zn-select::part(listbox) {
   max-height: 300px;
 }
 
-.select__prefix {
-  font-size: 20px;
+.select__icon {
+  font-size: var(--zn-font-size-x-large);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
 
   &:empty {
-    display: contents;
+    display: none;
   }
 }
+
+@each $size, $spacing in $sizes {
+  @include icon-spacing($size, $spacing);
+  @include icon-end-spacing($size, $spacing);
+  @include combobox-padding('icon-position="end"', $size, $spacing);
+  @include combobox-padding('icon-position="start"][icon-empty', $size, $spacing);
+}
+
+:host(:not([size])) .select__icon {
+  padding-inline-start: var(--zn-input-spacing-medium);
+  margin-inline-end: var(--zn-input-spacing-medium);
+}
+
+:host(:not([size])) .select__icon--end {
+  padding-inline-start: 0;
+  padding-inline-end: var(--zn-input-spacing-medium);
+  margin-inline-end: 0;
+  margin-inline-start: auto;
+}
+
+:host([icon-position="end"]:not([size])) zn-select::part(combobox),
+:host([icon-position="start"][icon-empty]:not([size])) zn-select::part(combobox) {
+  padding-inline-start: var(--zn-input-spacing-medium) !important;
+}