@kubex/zinc 1.0.25 → 1.0.99

package/scss/_root.scss

@@ -83,11 +83,11 @@
   --zn-shadow: 10, 10, 10;
   --zn-panel-secondary: 27, 27, 30;
   --zn-panel-opacity: 1;
-  --zn-text: 149, 163, 184;
+  --zn-text: 159, 173, 194;
   --zn-text-heading: 241, 245, 249;
   --zn-text-page-title: 225, 225, 225;
   --zn-text-panel-title: 181, 158, 255;
-  --zn-panel-highlight: 255, 255, 255;
+  --zn-panel-highlight: 25, 27, 32;
   --zn-panel-highlight-opacity: 0.1;
   --zn-border-color: 50, 50, 60;
   --zn-input-bg: 28, 28, 32;

package/scss/boot.scss

@@ -40,6 +40,25 @@
   background-color: var(--zn-input-background-color);
 }
 
+.air-datepicker-global-container {
+  z-index: 1000000;
+}
+
+.air-datepicker-button {
+  border: none;
+  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  border-radius: var(--adp-border-radius);
+  font-family: var(--adp-font-family), sans-serif;
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-normal);
+  cursor: pointer;
+  color: rgba(var(--zn-text), var(--zn-text-opacity));
+
+  &:hover {
+    background-color: var(--zn-input-background-color-hover) !important;
+  }
+}
+
 // Utility to minimize flashing of undefined web components
 .zn-cloak:has(:not(:defined)) {
   animation: 2s step-end zn-cloak;

package/scss/shared/layout.scss

@@ -48,6 +48,11 @@
   justify-content: space-between;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .flex-bottom {
   display: flex;
   align-items: flex-end;

package/scss/themes/_light.scss

@@ -390,8 +390,8 @@
   --zn-font-size-x-small: 0.75rem; // 12px // 10.5px
   --zn-font-size-small: 0.929rem; // 14px // 13px
   --zn-font-size-medium: 1rem; // 16px // 14px
-  --zn-font-size-large: 1.25rem; // 20px // 16px
-  --zn-font-size-x-large: 1.5rem; // 24px // 21px
+  --zn-font-size-large: 1.15rem; // 20px // 16px
+  --zn-font-size-x-large: 1.25rem; // 24px // 21px
   --zn-font-size-2x-large: 2.25rem; // 36px // 31.5px
   --zn-font-size-3x-large: 3rem; // 48px // 42px
   --zn-font-size-4x-large: 4.5rem; // 72px // 63px
@@ -512,7 +512,7 @@
   --zn-toggle-size-large: 1.375rem; // 22px
 
   /* Overlays */
-  --zn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+  --zn-overlay-background-color: hsl(none 0% 0% / 0.7);
 
   /* Panels */
   --zn-panel-background-color: var(--zn-color-neutral-0);

package/src/components/alert/alert.scss

@@ -45,6 +45,7 @@ p {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  align-self: start;
   text-align: left;
   padding: 8px;
 

package/src/components/animated-button/README.md

@@ -0,0 +1,306 @@
+# Animated Button Component
+
+A stateful button component designed for purchase/payment flows with built-in loading, success, and error states, complete with smooth animations and automatic state management.
+
+## Features
+
+- **4 States**: Idle (blue), Processing (blue with shimmer), Success (green with animated fill and drawing checkmark), Failure (red with error)
+- **Smooth Animations**:
+  - Success state: Background fills from bottom with green color
+  - Checkmark draws itself with a satisfying "swoosh" effect
+  - Shimmer animation during processing
+  - Shake animation on failure
+- **Auto State Management**: Automatically resets from failure state after a configurable delay
+- **Auto Redirect**: Redirects after successful purchase with configurable delay
+- **Event-Driven**: Emit custom events for purchase flow integration
+- **Accessible**: Supports `aria-live` regions and respects `prefers-reduced-motion`
+- **Consistent Height**: Button maintains the same height across all states
+
+## Installation
+
+```typescript
+import '@kubex/zinc/components/animated-button';
+```
+
+Or if auto-loading is enabled, just use the tag:
+
+```html
+<zn-animated-button></zn-animated-button>
+```
+
+## Basic Usage
+
+```html
+<zn-animated-button id="purchase-btn"></zn-animated-button>
+
+<script>
+  const button = document.getElementById('purchase-btn');
+
+  button.addEventListener('zn-purchase', async (event) => {
+    const { setSuccess, setFailure } = event.detail;
+
+    try {
+      const response = await fetch('/api/purchase', { method: 'POST' });
+
+      if (response.ok) {
+        setSuccess();
+      } else {
+        setFailure('Payment failed');
+      }
+    } catch (error) {
+      setFailure(error.message);
+    }
+  });
+</script>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `idle-text` | `string` | `'Purchase'` | Text displayed in idle state |
+| `processing-text` | `string` | `'Purchasing'` | Text displayed in processing state |
+| `success-text` | `string` | `'Success'` | Text displayed in success state |
+| `failure-text` | `string` | `'Failed'` | Text displayed in failure state |
+| `redirect-url` | `string` | `''` | URL to redirect to after success |
+| `redirect-delay` | `number` | `1500` | Milliseconds to wait before redirecting (after success) |
+| `failure-reset-delay` | `number` | `2000` | Milliseconds to wait before auto-resetting from failure |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `name` | `string` | `''` | Form control name |
+| `value` | `string` | `''` | Form control value |
+
+## Methods
+
+### `purchase(): Promise<void>`
+
+Programmatically trigger the purchase flow.
+
+```javascript
+const button = document.getElementById('purchase-btn');
+await button.purchase();
+```
+
+### `setSuccess(): void`
+
+Manually set the button to success state. Triggers the redirect timer.
+
+```javascript
+button.setSuccess();
+```
+
+### `setFailure(message?: string): void`
+
+Manually set the button to failure state with an optional error message. Triggers the auto-reset timer.
+
+```javascript
+button.setFailure('Payment declined');
+```
+
+### `reset(): void`
+
+Reset the button to idle state, clearing any timers.
+
+```javascript
+button.reset();
+```
+
+## Events
+
+### `zn-purchase`
+
+Emitted when the button is clicked in idle state. The event detail contains:
+
+- `value`: The form control value
+- `setSuccess()`: Function to set success state
+- `setFailure(message?: string)`: Function to set failure state
+
+```javascript
+button.addEventListener('zn-purchase', (event) => {
+  const { value, setSuccess, setFailure } = event.detail;
+
+  // Implement purchase logic
+  if (purchaseSuccessful) {
+    setSuccess();
+  } else {
+    setFailure('Error message');
+  }
+});
+```
+
+**Note**: The event is cancelable. Call `event.preventDefault()` to prevent the state transition.
+
+### `zn-redirect`
+
+Emitted when the redirect timer completes after success. The event detail contains:
+
+- `url`: The redirect URL
+
+```javascript
+button.addEventListener('zn-redirect', (event) => {
+  console.log('Redirecting to:', event.detail.url);
+});
+```
+
+## State Flow
+
+```
+       ┌─────────┐
+       │  Idle   │ (Blue)
+       │ Default │
+       └────┬────┘
+            │ Click
+            ↓
+       ┌─────────┐
+       │Processing│ (Blue + Shimmer)
+       │ Disabled │
+       └────┬────┘
+            │
+      ┌─────┴─────┐
+      │           │
+      ↓           ↓
+┌─────────┐  ┌─────────┐
+│Success  │  │ Failure │ (Red + Error Icon)
+│(Green + │  │ Disabled│
+│ Check)  │  └────┬────┘
+└────┬────┘       │
+     │            │ Auto-reset (2s)
+     │            ↓
+     │       ┌─────────┐
+     │       │  Idle   │
+     │       └─────────┘
+     │
+     │ Redirect (1.5s)
+     ↓
+  [Redirect]
+```
+
+## Styling
+
+The component uses CSS custom properties from the Zinc design system:
+
+- `--zn-primary`: Primary color (blue, idle state)
+- `--zn-color-success`: Success color (green)
+- `--zn-color-error`: Error color (red)
+- `--zn-transition-medium`: Transition duration for color changes
+- `--zn-transition-fast`: Transition duration for interactions
+- `--zn-border-radius-medium`: Border radius
+
+### CSS Parts
+
+The component doesn't expose CSS parts but follows BEM naming:
+
+- `.purchase-button`: Main button element
+- `.purchase-button--idle`: Idle state modifier
+- `.purchase-button--processing`: Processing state modifier
+- `.purchase-button--success`: Success state modifier
+- `.purchase-button--failure`: Failure state modifier
+- `.purchase-button__content`: Content wrapper
+- `.purchase-button__text`: Text element
+- `.purchase-button__spinner`: Spinning loading icon
+- `.purchase-button__shimmer`: Shimmer animation overlay
+- `.purchase-button__icon`: Icon element
+
+## Accessibility
+
+- The button includes `aria-live="polite"` for screen reader announcements of state changes
+- The button includes `aria-busy` attribute during processing state
+- Respects `prefers-reduced-motion` media query:
+  - Disables all animations including success fill, checkmark drawing, and shimmer
+  - Shows instant state changes for users who prefer reduced motion
+- Proper focus states with visible outline
+- Disabled state prevents interaction and is properly announced
+- Consistent button height prevents layout shift that could confuse users
+
+## Examples
+
+### Simple Success Flow
+
+```html
+<zn-animated-button id="btn"></zn-animated-button>
+
+<script>
+  document.getElementById('btn').addEventListener('zn-purchase', async (e) => {
+    const { setSuccess } = e.detail;
+    await new Promise(r => setTimeout(r, 2000)); // Simulate API
+    setSuccess();
+  });
+</script>
+```
+
+### With Error Handling
+
+```html
+<zn-animated-button
+  id="btn"
+  failure-text="Payment Failed"
+></zn-animated-button>
+
+<script>
+  document.getElementById('btn').addEventListener('zn-purchase', async (e) => {
+    const { setSuccess, setFailure } = e.detail;
+
+    try {
+      const response = await fetch('/api/purchase', { method: 'POST' });
+      const data = await response.json();
+
+      if (response.ok) {
+        setSuccess();
+      } else {
+        setFailure(data.error || 'Payment failed');
+      }
+    } catch (error) {
+      setFailure('Network error');
+    }
+  });
+</script>
+```
+
+### Custom Text and Timing
+
+```html
+<zn-animated-button
+  idle-text="Complete Purchase"
+  processing-text="Processing Payment"
+  success-text="Payment Complete"
+  failure-text="Transaction Failed"
+  redirect-url="/thank-you"
+  redirect-delay="3000"
+  failure-reset-delay="4000"
+></zn-animated-button>
+```
+
+### Manual Control
+
+```javascript
+const button = document.getElementById('purchase-btn');
+
+// Trigger purchase programmatically
+await button.purchase();
+
+// Or control state directly
+button.setSuccess();
+button.setFailure('Insufficient funds');
+button.reset();
+```
+
+## Dependencies
+
+- `zn-icon`: Icon component for spinner, success, and failure icons
+
+## Browser Support
+
+Works in all modern browsers that support:
+- Web Components (Custom Elements)
+- CSS Custom Properties
+- CSS Animations
+- ES Modules
+
+## Testing
+
+Run tests with:
+
+```bash
+npm test
+```
+
+See `purchase-button.test.ts` for test examples.

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

@@ -0,0 +1,229 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from '../icon/icon.component';
+
+import styles from './animated-button.scss';
+
+type AnimatedButtonState = 'idle' | 'processing' | 'success' | 'failure';
+
+export default class ZnAnimatedButton extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  static dependencies = {
+    'zn-icon': ZnIcon
+  };
+
+  @state() private currentState: AnimatedButtonState = 'idle';
+  @state() private errorMessage = '';
+
+  /** The text to display in the idle state */
+  @property({attribute: 'idle-text'}) idleText = 'Purchase';
+
+  /** The text to display in the processing state */
+  @property({attribute: 'processing-text'}) processingText = 'Purchasing';
+
+  /** The text to display in the success state */
+  @property({attribute: 'success-text'}) successText = 'Success';
+
+  /** The text to display in the failure state */
+  @property({attribute: 'failure-text'}) failureText = 'Failed';
+
+  /** The URL to redirect to after successful purchase */
+  @property({attribute: 'redirect-url'}) redirectUrl = '';
+
+  /** Delay in milliseconds before redirecting after success (default: 1500ms) */
+  @property({type: Number, attribute: 'redirect-delay'}) redirectDelay = 1500;
+
+  /** Delay in milliseconds before resetting from failure state (default: 2000ms) */
+  @property({type: Number, attribute: 'failure-reset-delay'}) failureResetDelay = 2000;
+
+  /** Disabled state */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  /** The name of the form control (required for form submission) */
+  @property() name = '';
+
+  /** The value of the form control */
+  @property() value = '';
+
+  private resetTimeout?: number;
+  private redirectTimeout?: number;
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.clearTimeouts();
+  }
+
+  private clearTimeouts() {
+    if (this.resetTimeout) {
+      clearTimeout(this.resetTimeout);
+      this.resetTimeout = undefined;
+    }
+    if (this.redirectTimeout) {
+      clearTimeout(this.redirectTimeout);
+      this.redirectTimeout = undefined;
+    }
+  }
+
+  /** Programmatically trigger the purchase flow */
+  public purchase(): void {
+    if (this.currentState !== 'idle' || this.disabled) {
+      return;
+    }
+
+    this.handlePurchase();
+  }
+
+  /** Set the button to success state manually */
+  public setSuccess(): void {
+    this.clearTimeouts();
+    this.currentState = 'success';
+    this.scheduleRedirect();
+  }
+
+  /** Set the button to failure state manually with optional error message */
+  public setFailure(message = ''): void {
+    this.clearTimeouts();
+    this.errorMessage = message;
+    this.currentState = 'failure';
+    this.scheduleReset();
+  }
+
+  /** Reset the button to idle state */
+  public reset(): void {
+    this.clearTimeouts();
+    this.currentState = 'idle';
+    this.errorMessage = '';
+  }
+
+  private handlePurchase() {
+    this.clearTimeouts();
+    this.currentState = 'processing';
+
+    const event = this.emit('zn-purchase', {
+      cancelable: true,
+      detail: {
+        value: this.value,
+        setSuccess: () => this.setSuccess(),
+        setFailure: (message?: string) => this.setFailure(message)
+      }
+    });
+
+    // If the event was prevented, reset to idle
+    if (event.defaultPrevented) {
+      this.currentState = 'idle';
+    }
+  }
+
+  private scheduleRedirect() {
+    this.redirectTimeout = window.setTimeout(() => {
+      if (this.redirectUrl) {
+        window.location.href = this.redirectUrl;
+      }
+      this.emit('zn-redirect', {
+        detail: {url: this.redirectUrl}
+      });
+    }, this.redirectDelay);
+  }
+
+  private scheduleReset() {
+    this.resetTimeout = window.setTimeout(() => {
+      this.reset();
+    }, this.failureResetDelay);
+  }
+
+  private handleClick() {
+    if (this.currentState === 'idle' && !this.disabled) {
+      this.handlePurchase();
+    }
+  }
+
+  protected render() {
+    const isDisabled = this.disabled || this.currentState !== 'idle';
+    const showSpinner = this.currentState === 'processing';
+    const showSuccess = this.currentState === 'success';
+    const showFailure = this.currentState === 'failure';
+
+    const classes = {
+      'animated-button': true,
+      'animated-button--idle': this.currentState === 'idle',
+      'animated-button--processing': this.currentState === 'processing',
+      'animated-button--success': this.currentState === 'success',
+      'animated-button--failure': this.currentState === 'failure'
+    };
+
+    let buttonText = this.idleText;
+    if (this.currentState === 'processing') buttonText = this.processingText;
+    if (this.currentState === 'success') buttonText = this.successText;
+    if (this.currentState === 'failure') buttonText = this.failureText;
+
+    return html`
+      <button
+        class=${classMap(classes)}
+        ?disabled=${isDisabled}
+        @click=${this.handleClick}
+        type="button"
+        aria-live="polite"
+        aria-busy=${showSpinner}
+      >
+        ${showSpinner
+          ? html`
+            <span class="animated-button__content">
+                <zn-icon
+                  class="animated-button__spinner"
+                  src="progress_activity"
+                  size="20"
+                  color="white"
+                ></zn-icon>
+                <span class="animated-button__text">${buttonText}</span>
+              </span>
+            <span class="animated-button__shimmer"></span>
+          `
+          : showSuccess
+            ? html`
+              <span class="animated-button__content">
+                  <svg
+                    class="animated-button__icon animated-button__icon--success"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class="animated-button__tick"
+                      d="M5 13l4 4L19 7"
+                      stroke="white"
+                      stroke-width="3"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                  <span class="animated-button__text">${buttonText}</span>
+                </span>
+            `
+            : showFailure
+              ? html`
+                <span class="animated-button__content">
+                    <zn-icon
+                      class="animated-button__icon animated-button__icon--failure"
+                      src="cancel"
+                      size="20"
+                      color="white"
+                    ></zn-icon>
+                    <span class="animated-button__text">
+                      ${buttonText}${this.errorMessage ? `: ${this.errorMessage}` : ''}
+                    </span>
+                  </span>
+              `
+              : html`
+                <span class="animated-button__content">
+                    <span class="animated-button__text">${buttonText}</span>
+                  </span>
+              `}
+      </button>
+    `;
+  }
+}