@kodaris/krubble-components 1.0.4 → 1.0.5

package/dist/krubble.umd.js

@@ -402,16 +402,19 @@
    * A customizable button component.
    *
    * @slot - The button content
-   * @csspart button - The button element
    * @fires click - Fired when the button is clicked
    */
   exports.KRButton = class KRButton extends i$1 {
       constructor() {
           super(...arguments);
           /**
-           * The button variant style
+           * The button variant (shape)
            */
-          this.variant = 'primary';
+          this.variant = 'flat';
+          /**
+           * The button color
+           */
+          this.color = 'primary';
           /**
            * The button size
            */
@@ -420,104 +423,256 @@
            * Whether the button is disabled
            */
           this.disabled = false;
+          this._state = 'idle';
+          this._stateText = '';
+          this._handleKeydown = (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  this.click();
+              }
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute('role', 'button');
+          this.setAttribute('tabindex', '0');
+          this.addEventListener('keydown', this._handleKeydown);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.removeEventListener('keydown', this._handleKeydown);
+      }
+      /**
+       * Shows a loading spinner and disables the button.
+       */
+      showLoading() {
+          this._clearStateTimeout();
+          this._state = 'loading';
+          this._stateText = '';
+      }
+      /**
+       * Shows a success state with optional custom text.
+       * @param text - Text to display (default: "Saved")
+       * @param duration - Duration in ms before auto-reset (default: 2000)
+       */
+      showSuccess(text = 'Success', duration = 2000) {
+          this._clearStateTimeout();
+          this._state = 'success';
+          this._stateText = text;
+          this._stateTimeout = window.setTimeout(() => this.reset(), duration);
+      }
+      /**
+       * Shows an error state with optional custom text.
+       * @param text - Text to display (default: "Error")
+       * @param duration - Duration in ms before auto-reset (default: 2000)
+       */
+      showError(text = 'Error', duration = 2000) {
+          this._clearStateTimeout();
+          this._state = 'error';
+          this._stateText = text;
+          this._stateTimeout = window.setTimeout(() => this.reset(), duration);
+      }
+      /**
+       * Resets the button to its idle state.
+       */
+      reset() {
+          this._clearStateTimeout();
+          this._state = 'idle';
+          this._stateText = '';
+      }
+      _clearStateTimeout() {
+          if (this._stateTimeout) {
+              clearTimeout(this._stateTimeout);
+              this._stateTimeout = undefined;
+          }
+      }
+      updated(changedProperties) {
+          // Reflect state classes to host
+          this.classList.toggle('kr-button--loading', this._state === 'loading');
+          this.classList.toggle('kr-button--success', this._state === 'success');
+          this.classList.toggle('kr-button--error', this._state === 'error');
+          this.classList.toggle(`kr-button--${this.variant}`, true);
+          this.classList.toggle(`kr-button--${this.color}`, true);
+          this.classList.toggle('kr-button--small', this.size === 'small');
+          this.classList.toggle('kr-button--large', this.size === 'large');
       }
       render() {
-          const sizeClass = this.size !== 'medium' ? this.size : '';
           return b `
-      <button
-        part="button"
-        class="${this.variant} ${sizeClass}"
-        ?disabled=${this.disabled}
-      >
-        <slot></slot>
-      </button>
+      <slot></slot>
+      ${this._state !== 'idle'
+            ? b `<span class="state-overlay">
+            ${this._state === 'loading'
+                ? b `<span class="spinner"></span>`
+                : this._stateText}
+          </span>`
+            : ''}
     `;
       }
   };
   exports.KRButton.styles = i$4 `
     :host {
-      display: inline-block;
-    }
-
-    button {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
       font-family: inherit;
       font-size: 14px;
       font-weight: 400;
       letter-spacing: 0.01em;
       padding: 0 22px;
       height: 36px;
-      line-height: 36px;
       border: none;
       border-radius: 20px;
       cursor: pointer;
       transition: background 0.15s ease;
+      user-select: none;
+      box-sizing: border-box;
     }
 
-    button:active:not(:disabled) {
-      transform: scale(0.98);
+    :host([disabled]),
+    :host(.kr-button--loading),
+    :host(.kr-button--success),
+    :host(.kr-button--error) {
+      cursor: not-allowed;
+      pointer-events: none;
     }
 
-    button:disabled {
+    :host([disabled]:not(.kr-button--loading):not(.kr-button--success):not(.kr-button--error)) {
       opacity: 0.5;
-      cursor: not-allowed;
     }
 
-    /* Variants */
-    button.primary {
+    /* Flat + Primary (default) */
+    :host,
+    :host(.kr-button--flat.kr-button--primary) {
       background: #163052;
       color: white;
     }
 
-    button.primary:hover:not(:disabled) {
+    :host(:hover:not([disabled])),
+    :host(.kr-button--flat.kr-button--primary:hover:not([disabled])) {
       background: #0e1f35;
     }
 
-    button.secondary {
+    /* Flat + Secondary */
+    :host(.kr-button--flat.kr-button--secondary) {
       background: #f3f4f6;
       color: #374151;
     }
 
-    button.secondary:hover:not(:disabled) {
+    :host(.kr-button--flat.kr-button--secondary:hover:not([disabled])) {
       background: #e5e7eb;
     }
 
-    button.outline {
+    /* Outline + Primary */
+    :host(.kr-button--outline.kr-button--primary) {
+      background: transparent;
+      border: 1px solid #163052;
+      color: #163052;
+    }
+
+    :host(.kr-button--outline.kr-button--primary:hover:not([disabled])) {
+      background: rgba(22, 48, 82, 0.05);
+    }
+
+    /* Outline + Secondary */
+    :host(.kr-button--outline.kr-button--secondary) {
       background: transparent;
       border: 1px solid #d1d5db;
       color: #374151;
-      box-shadow: none;
     }
 
-    button.outline:hover:not(:disabled) {
+    :host(.kr-button--outline.kr-button--secondary:hover:not([disabled])) {
       background: #f9fafb;
       border-color: #9ca3af;
-      box-shadow: none;
     }
 
     /* Sizes */
-    button.small {
+    :host(.kr-button--small) {
       font-size: 13px;
       height: 28px;
-      line-height: 28px;
       padding: 0 16px;
     }
 
-    button.large {
-      font-size: 1rem;
+    :host(.kr-button--large) {
+      font-size: 16px;
       height: 44px;
-      line-height: 44px;
       padding: 0 24px;
+      border-radius: 30px;
+    }
+
+    /* State colors */
+    :host(.kr-button--success) {
+      background: #198754 !important;
+      color: white !important;
+    }
+
+    :host(.kr-button--error) {
+      background: rgb(220, 53, 69) !important;
+      color: white !important;
+    }
+
+    /* Content */
+    :host(.kr-button--loading) slot,
+    :host(.kr-button--success) slot,
+    :host(.kr-button--error) slot {
+      visibility: hidden;
+    }
+
+    /* State overlay */
+    .state-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Spinner */
+    @keyframes kr-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .spinner {
+      width: 12px;
+      height: 12px;
+      border: 2.5px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: kr-spin 0.6s linear infinite;
+    }
+
+    :host(.kr-button--small) .spinner {
+      width: 10px;
+      height: 10px;
+      border-width: 2px;
+    }
+
+    :host(.kr-button--large) .spinner {
+      width: 16px;
+      height: 16px;
+      border-width: 3px;
     }
   `;
   __decorate$5([
-      n({ type: String })
+      n({ type: String, reflect: true })
   ], exports.KRButton.prototype, "variant", void 0);
   __decorate$5([
-      n({ type: String })
+      n({ type: String, reflect: true })
+  ], exports.KRButton.prototype, "color", void 0);
+  __decorate$5([
+      n({ type: String, reflect: true })
   ], exports.KRButton.prototype, "size", void 0);
   __decorate$5([
-      n({ type: Boolean })
+      n({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "disabled", void 0);
+  __decorate$5([
+      r$1()
+  ], exports.KRButton.prototype, "_state", void 0);
+  __decorate$5([
+      r$1()
+  ], exports.KRButton.prototype, "_stateText", void 0);
   exports.KRButton = __decorate$5([
       t$1('kr-button')
   ], exports.KRButton);
@@ -1191,6 +1346,9 @@
           // Set role and type class on host
           this.setAttribute('role', 'alert');
           this.classList.add(`kr-snackbar--${this.type}`);
+          if (this.title) {
+              this.classList.add('kr-snackbar--has-title');
+          }
           // Add to active snackbars and update positions
           KRSnackbar_1.activeSnackbars.push(this);
           this.updatePositions();
@@ -1272,7 +1430,7 @@
       left: 16px;
       z-index: 10000;
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: 12px;
       padding: 14px 12px 14px 16px;
       border-radius: 8px;
@@ -1285,6 +1443,10 @@
       animation: slideIn 0.2s ease-out;
     }
 
+    :host(.kr-snackbar--has-title) {
+      align-items: flex-start;
+    }
+
     @keyframes slideIn {
       from {
         opacity: 0;