@kubex/zinc 1.0.25 → 1.0.99

package/src/components/animated-button/animated-button.scss

@@ -0,0 +1,228 @@
+@use "../../../scss/shared";
+
+:host {
+  display: inline-block;
+  cursor: pointer;
+}
+
+:host([disabled]) {
+  cursor: wait;
+}
+
+.animated-button {
+  @include shared.button;
+  position: relative;
+  overflow: hidden;
+  min-width: 150px;
+  min-height: 40px;
+  gap: 8px;
+  transition:
+    transform var(--zn-transition-fast) ease,
+    opacity var(--zn-transition-fast) ease;
+  border: none;
+  font-size: 1rem;
+  font-family: inherit;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    cursor: wait;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: 2px;
+  }
+}
+
+.animated-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+.animated-button__text {
+  font-weight: 600;
+  line-height: 1;
+}
+
+.animated-button__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.animated-button__spinner {
+  display: inline-flex;
+  flex-shrink: 0;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Shimmer animation for processing state
+.animated-button__shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+// State: Idle (default blue)
+.animated-button--idle {
+  background-color: rgb(var(--zn-primary)) !important;
+}
+
+// State: Processing (blue with shimmer)
+.animated-button--processing {
+  background-color: rgb(var(--zn-primary)) !important;
+  cursor: wait;
+}
+
+// State: Success (green with fill animation)
+.animated-button--success {
+  background-color: rgb(var(--zn-primary)) !important;
+  cursor: default;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(var(--zn-color-success));
+    animation: successFill var(--zn-transition-slow) ease-out forwards;
+    z-index: 0;
+  }
+
+  .animated-button__content {
+    z-index: 1;
+  }
+
+  .animated-button__icon--success {
+    opacity: 0;
+    animation: iconFadeIn 0.3s ease-out 0.4s forwards;
+  }
+
+  .animated-button__tick {
+    stroke-dasharray: 30;
+    stroke-dashoffset: 30;
+    animation: tickSwoosh 0.5s ease-out 0.4s forwards;
+  }
+}
+
+@keyframes successFill {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes iconFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes tickSwoosh {
+  0% {
+    stroke-dashoffset: 30;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+// State: Failure (red)
+.animated-button--failure {
+  background-color: rgb(var(--zn-color-error)) !important;
+  cursor: not-allowed;
+
+  .animated-button__icon--failure {
+    animation: failureShake var(--zn-transition-medium) ease-out;
+  }
+}
+
+@keyframes failureShake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+// Respect user's motion preferences
+@media (prefers-reduced-motion: reduce) {
+  .animated-button {
+    transition: none;
+  }
+
+  .animated-button--success::before {
+    animation: none;
+    transform: translateY(0);
+  }
+
+  .animated-button__shimmer {
+    animation: none;
+    display: none;
+  }
+
+  .animated-button__spinner {
+    animation: none;
+  }
+
+  .animated-button__icon--success {
+    animation: none;
+    opacity: 1;
+  }
+
+  .animated-button__tick {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  .animated-button__icon--failure {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,143 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import type ZnAnimatedButton from './animated-button.component';
+
+describe('<zn-animated-button>', () => {
+  it('should be accessible', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+    await expect(el).to.be.accessible();
+  });
+
+  it('should render with default idle text', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+    const button = el.shadowRoot?.querySelector('button');
+    expect(button?.textContent?.trim()).to.equal('Purchase');
+  });
+
+  it('should render with custom idle text', async () => {
+    const el = await fixture<ZnAnimatedButton>(
+      html`<zn-animated-button idle-text="Buy Now"></zn-animated-button>`
+    );
+    const button = el.shadowRoot?.querySelector('button');
+    expect(button?.textContent?.trim()).to.equal('Buy Now');
+  });
+
+  it('should be disabled when processing', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+
+    expect(button.disabled).to.be.false;
+
+    button.click();
+    await el.updateComplete;
+
+    expect(button.disabled).to.be.true;
+  });
+
+  it('should emit zn-purchase event when clicked', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+
+    let eventFired = false;
+    el.addEventListener('zn-purchase', () => {
+      eventFired = true;
+    });
+
+    button.click();
+    await el.updateComplete;
+
+    expect(eventFired).to.be.true;
+  });
+
+  it('should transition to success state when setSuccess is called', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+
+    el.setSuccess();
+    await el.updateComplete;
+
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+    expect(button.classList.contains('purchase-button--success')).to.be.true;
+  });
+
+  it('should transition to failure state when setFailure is called', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+
+    el.setFailure('Payment failed');
+    await el.updateComplete;
+
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+    expect(button.classList.contains('purchase-button--failure')).to.be.true;
+    expect(button.textContent).to.include('Payment failed');
+  });
+
+  it('should reset to idle state after failure timeout', async () => {
+    const el = await fixture<ZnAnimatedButton>(
+      html`<zn-animated-button failure-reset-delay="100"></zn-animated-button>`
+    );
+
+    el.setFailure('Error');
+    await el.updateComplete;
+
+    let button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+    expect(button.classList.contains('purchase-button--failure')).to.be.true;
+
+    await waitUntil(
+      () => {
+        button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+        return button.classList.contains('purchase-button--idle');
+      },
+      '',
+      { timeout: 500 }
+    );
+
+    expect(button.classList.contains('purchase-button--idle')).to.be.true;
+  });
+
+  it('should show spinner icon in processing state', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+    button.click();
+    await el.updateComplete;
+
+    const spinner = el.shadowRoot?.querySelector('.purchase-button__spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('should show success icon in success state', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+
+    el.setSuccess();
+    await el.updateComplete;
+
+    const successIcon = el.shadowRoot?.querySelector('.purchase-button__icon--success');
+    expect(successIcon).to.exist;
+  });
+
+  it('should show failure icon in failure state', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
+
+    el.setFailure();
+    await el.updateComplete;
+
+    const failureIcon = el.shadowRoot?.querySelector('.purchase-button__icon--failure');
+    expect(failureIcon).to.exist;
+  });
+
+  it('should respect disabled attribute', async () => {
+    const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button disabled></zn-animated-button>`);
+
+    const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
+    expect(button.disabled).to.be.true;
+
+    let eventFired = false;
+    el.addEventListener('zn-purchase', () => {
+      eventFired = true;
+    });
+
+    button.click();
+    await el.updateComplete;
+
+    expect(eventFired).to.be.false;
+  });
+});

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

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

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

@@ -206,6 +206,11 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     }
   }
 
+  // Override native HTMLButtonElement click method
+  click() {
+    this.handleClick()
+  }
+
   handleClick = () => {
     if (this.disabled) {
       return;

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

@@ -38,22 +38,34 @@ export default class ZnButtonGroup extends ZincElement {
       return;
     }
 
-    let slottedElements = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
+    const allSlotted = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
 
-    slottedElements = slottedElements.filter(el => el.tagName === 'ZN-BUTTON');
-    slottedElements.forEach(el => {
-      const index = slottedElements.indexOf(el);
-      const button = el.closest('zn-button') ?? el.querySelector('zn-button');
+    // Collect buttons from direct zn-button elements and from zn-dropdown wrappers
+    const groupItems: {button: HTMLElement; wrapper?: HTMLElement}[] = [];
+    for (const el of allSlotted) {
+      if (el.tagName === 'ZN-BUTTON') {
+        groupItems.push({button: el});
+      } else if (el.tagName === 'ZN-DROPDOWN') {
+        const innerButton = el.querySelector('zn-button');
+        if (innerButton) {
+          groupItems.push({button: innerButton, wrapper: el});
+        }
+      }
+    }
 
-      if (button) {
-        button.toggleAttribute('data-zn-button-group__button--grow', this.grow);
+    groupItems.forEach(({button, wrapper}, index) => {
+      button.toggleAttribute('data-zn-button-group__button--grow', this.grow);
 
-        if (!this.gap) {
-          button.toggleAttribute('data-zn-button-group__button', true);
-          button.toggleAttribute('data-zn-button-group__button--first', index === 0);
-          button.toggleAttribute('data-zn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
-          button.toggleAttribute('data-zn-button-group__button--last', index === slottedElements.length - 1);
-        }
+      if (!this.gap) {
+        button.toggleAttribute('data-zn-button-group__button', true);
+        button.toggleAttribute('data-zn-button-group__button--first', index === 0);
+        button.toggleAttribute('data-zn-button-group__button--inner', index > 0 && index < groupItems.length - 1);
+        button.toggleAttribute('data-zn-button-group__button--last', index === groupItems.length - 1);
+      }
+
+      // Mark the dropdown wrapper so it can be styled to not break the group layout
+      if (wrapper) {
+        wrapper.toggleAttribute('data-zn-button-group__dropdown', true);
       }
     });
   }

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

@@ -23,6 +23,12 @@
   }
 }
 
+// Ensure dropdown wrappers inside button-group participate in the flex layout
+// without introducing gaps. The data attribute is set by the component logic.
+::slotted([data-zn-button-group__dropdown]) {
+  display: inline-flex !important;
+}
+
 :host([direction="vertical"]),
 zn-button-group[direction="vertical"] {
   width: 100%;

package/src/components/checkbox/checkbox.component.ts

@@ -88,6 +88,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** Draws a container around the checkbox. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Removes a container around the checkbox. */
+  @property({type: Boolean, reflect: true}) borderless = false;
+
   /** Applies styles relevant to checkboxes in a horizontal layout. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
@@ -292,6 +295,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--focused': this.hasFocus,
             'checkbox--indeterminate': this.indeterminate,
             'checkbox--contained': this.contained,
+            'checkbox--no-border': this.borderless,
             'checkbox--horizontal': this.horizontal,
             'checkbox--small': this.size === 'small',
             'checkbox--medium': this.size === 'medium',

package/src/components/checkbox/checkbox.scss

@@ -142,7 +142,6 @@
 }
 
 .svg-icon {
-  width: max(16px, 70%);
   height: max(16px, 70%);
   --icon-color: var(--checkbox-icon-color);
 
@@ -251,6 +250,12 @@
   -webkit-user-select: none;
 }
 
+.checkbox--no-border {
+  border: none !important;
+  outline: none !important;
+  border-radius: 0 !important;
+}
+
 /* Contained */
 .checkbox--contained {
   padding: 1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);
@@ -291,9 +296,7 @@
   .checkbox__control {
     height: 100%;
     width: 100%;
-    border-left: unset;
-    border-top: unset;
-    border-bottom: unset;
+    border: unset;
     box-shadow: unset;
     background-color: var(--zn-color-purple-50);
   }

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

@@ -9,6 +9,12 @@
 :host([horizontal]) .form-control-input {
   display: flex;
   column-gap: var(--zn-spacing-2x-large);
+  flex-wrap: wrap;
+}
+
+::slotted(zn-checkbox[horizontal]) {
+  flex-basis: 20%;
+  min-width: 100px;
 }
 
 :host([contained]) .form-control-input {
@@ -36,6 +42,7 @@
   height: 100%;
 }
 
+
 .form-control {
   position: relative;
   border: none;

package/src/components/chip/chip.component.ts

@@ -27,6 +27,9 @@ export default class ZnChip extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property() icon: string = '';
+  @property() caption: string = '';
+
+  @property({attribute: 'icon-size', type: Number}) iconSize: number = 18;
 
   @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' |
     'transparent' | 'custom' | 'neutral' = 'neutral';
@@ -63,9 +66,11 @@ export default class ZnChip extends ZincElement {
         'chip--large': this.size === 'large',
       })}">
         ${this.icon ? html`
-          <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
+          <zn-icon src="${this.icon}" size="${this.iconSize}"></zn-icon>` : ''}
+        ${this.caption ? html`
+          <span class="chip__caption">${this.caption}</span>` : ''}
         ${hasContent ? html`
-          <slot></slot>` : ''}
+          <span class="chip__value"><slot></slot></span>` : ''}
         ${this.hasSlotController.test('action') ? html`
           <slot name="action" class="chip__action"></slot>` : ''}
       </div>

package/src/components/chip/chip.scss

@@ -2,6 +2,7 @@
 
 :host {
   display: inline-block;
+  vertical-align: middle;
 }
 
 .chip {
@@ -13,11 +14,11 @@
   gap: 4px;
   width: fit-content;
   margin: 1px;
-  text-transform: capitalize;
   justify-content: center;
   align-items: center;
   border: 1px solid transparent;
   line-height: 24px;
+  white-space: nowrap;
 
   &--flush {
     padding: 0;
@@ -80,8 +81,21 @@
   background-color: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
 }
 
+.chip__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip__caption {
+  opacity: 0.7;
+  font-weight: 600;
+
+  &::after {
+    content: ":";
+  }
+}
+
 .chip__action {
-  text-transform: unset;
 }
 
 .chip--small {

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

@@ -1,13 +1,13 @@
-import { classMap } from "lit/directives/class-map.js";
-import { type CSSResultGroup, html, unsafeCSS } from 'lit';
-import { HasSlotController } from "../../internal/slot";
-import { property, state } from 'lit/decorators.js';
-import { Store } from "../../internal/storage";
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {property, state} from 'lit/decorators.js';
+import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
+import type {ZnInputEvent} from "../../events/zn-input";
+import type ZnToggle from "../toggle";
 
 import styles from './collapsible.scss';
-import { ZnInputEvent } from "../../events/zn-input";
-import ZnToggle from "../toggle";
 
 /**
  * @summary Toggles between showing and hiding content when clicked
@@ -23,28 +23,28 @@ import ZnToggle from "../toggle";
 export default class ZnCollapsible extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property({ reflect: true }) caption = '';
+  @property({reflect: true}) caption = '';
 
-  @property({ reflect: true }) description: string;
+  @property({reflect: true}) description: string;
 
-  @property({ reflect: true }) label = '';
+  @property({reflect: true}) label = '';
 
-  @property({ type: Boolean, attribute: 'show-number', reflect: true }) showNumber: boolean = false;
+  @property({type: Boolean, attribute: 'show-number', reflect: true}) showNumber: boolean = false;
 
   // what element name to count
-  @property({ type: String, attribute: 'count-element' }) countElement: string = '*';
+  @property({type: String, attribute: 'count-element'}) countElement: string = '*';
 
-  @property({ type: Boolean, reflect: true }) expanded: boolean = false;
+  @property({type: Boolean, reflect: true}) expanded: boolean = false;
 
-  @property({ attribute: 'default' }) defaultState: 'open' | 'closed';
+  @property({attribute: 'default'}) defaultState: 'open' | 'closed';
 
-  @property({ attribute: 'local-storage', type: Boolean, reflect: true }) localStorage: boolean;
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
 
-  @property({ attribute: 'store-key', reflect: true }) storeKey: string = "";
+  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
 
-  @property({ attribute: 'store-ttl', type: Number, reflect: true }) storeTtl = 0;
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
 
-  @property({ attribute: 'flush', type: Boolean, reflect: true }) flush: boolean = false;
+  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
 
   @state() numberOfItems: number = 0;
 
@@ -74,7 +74,7 @@ export default class ZnCollapsible extends ZincElement {
       this.observer = new MutationObserver(() => {
         this.recalculateNumberOfItems();
       });
-      this.observer.observe(slot, { childList: true, subtree: true });
+      this.observer.observe(slot, {childList: true, subtree: true});
     }
 
     await this.updateComplete;
@@ -99,6 +99,13 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('expanded') && this.storeKey) {
+      this._store.set(this.storeKey, this.expanded.toString());
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.observer) {
@@ -150,7 +157,7 @@ export default class ZnCollapsible extends ZincElement {
             <slot name="label"><p class="label">${this.label}</p></slot>
             ${this.showNumber && !this.expanded ? html`
               <zn-chip size="small" type="primary">${this.numberOfItems}</zn-chip>` : ''}
-            ${this.showArrow  ? html`
+            ${this.showArrow ? html`
               <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>` : ''}
           </div>
         </slot>