@kodaris/krubble-components 1.0.3 → 1.0.5

package/dist/krubble.bundled.js

@@ -396,16 +396,19 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  * A customizable button component.
  *
  * @slot - The button content
- * @csspart button - The button element
  * @fires click - Fired when the button is clicked
  */
 let 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
          */
@@ -414,104 +417,256 @@ let KRButton = class KRButton extends i$1 {
          * 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>`
+            : ''}
     `;
     }
 };
 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 })
 ], KRButton.prototype, "variant", void 0);
 __decorate$5([
-    n({ type: String })
+    n({ type: String, reflect: true })
+], KRButton.prototype, "color", void 0);
+__decorate$5([
+    n({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
 __decorate$5([
-    n({ type: Boolean })
+    n({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
+__decorate$5([
+    r$1()
+], KRButton.prototype, "_state", void 0);
+__decorate$5([
+    r$1()
+], KRButton.prototype, "_stateText", void 0);
 KRButton = __decorate$5([
     t$1('kr-button')
 ], KRButton);
@@ -1127,10 +1282,13 @@ var KRSnackbar_1;
  * @example
  * ```ts
  * // Show a success message
- * KRSnackbar.show('Item saved successfully', { type: 'success' });
+ * KRSnackbar.show({ message: 'Item saved successfully', type: 'success' });
+ *
+ * // Show a message with title
+ * KRSnackbar.show({ title: 'Upload Complete', message: 'Your file has been uploaded.', type: 'success' });
  *
  * // Show an error that stays until manually dismissed
- * KRSnackbar.show('Failed to save', { type: 'error', duration: 0 });
+ * KRSnackbar.show({ message: 'Failed to save', type: 'error', duration: 0 });
  * ```
  */
 let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
@@ -1141,6 +1299,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
          * The snackbar type/severity. Controls the color scheme and icon.
          */
         this.type = 'info';
+        /**
+         * Optional title to display above the message.
+         */
+        this.title = '';
         /**
          * The message to display in the snackbar.
          */
@@ -1152,16 +1314,24 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
         this.duration = 5000;
     }
     /**
-     * Show a snackbar with the given message and options.
-     * @param message - The message to display
-     * @param options - Optional configuration for type and duration
+     * Show a snackbar with the given options.
+     * @param options - Configuration including message, optional title, type, and duration
      * @returns The created snackbar element
      */
-    static show(message, options) {
+    static show(options) {
         const snackbar = document.createElement('kr-snackbar');
-        snackbar.message = message;
-        snackbar.type = options?.type ?? 'info';
-        snackbar.duration = options?.duration ?? 5000;
+        snackbar.message = options.message;
+        snackbar.title = options.title ?? '';
+        snackbar.type = options.type ?? 'info';
+        if (options.duration !== undefined) {
+            snackbar.duration = options.duration;
+        }
+        else if (snackbar.type === 'error') {
+            snackbar.duration = 0;
+        }
+        else {
+            snackbar.duration = 5000;
+        }
         document.body.appendChild(snackbar);
         return snackbar;
     }
@@ -1170,6 +1340,9 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
         // 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();
@@ -1195,7 +1368,7 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
         }
     }
     updatePositions() {
-        let bottomOffset = 16;
+        let bottomOffset = 24;
         for (const snackbar of KRSnackbar_1.activeSnackbars) {
             snackbar.style.bottom = `${bottomOffset}px`;
             bottomOffset += snackbar.offsetHeight + 8;
@@ -1221,7 +1394,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
         };
         return b `
       ${icons[this.type]}
-      <div class="message">${this.message}</div>
+      <div class="content">
+        ${this.title ? b `<div class="title">${this.title}</div>` : ''}
+        <div class="message">${this.message}</div>
+      </div>
       <button
         class="dismiss"
         type="button"
@@ -1261,6 +1437,10 @@ KRSnackbar.styles = i$4 `
       animation: slideIn 0.2s ease-out;
     }
 
+    :host(.kr-snackbar--has-title) {
+      align-items: flex-start;
+    }
+
     @keyframes slideIn {
       from {
         opacity: 0;
@@ -1332,10 +1512,22 @@ KRSnackbar.styles = i$4 `
       flex-shrink: 0;
       width: 20px;
       height: 20px;
+      margin-top: 1px;
     }
 
-    .message {
+    .content {
       flex: 1;
+      min-width: 0;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #000000;
+      margin: 0 0 2px 0;
+    }
+
+    .message {
       font-size: 14px;
       color: #000000;
       margin: 0;
@@ -1372,6 +1564,9 @@ KRSnackbar.activeSnackbars = [];
 __decorate$1([
     n({ type: String })
 ], KRSnackbar.prototype, "type", void 0);
+__decorate$1([
+    n({ type: String })
+], KRSnackbar.prototype, "title", void 0);
 __decorate$1([
     n({ type: String })
 ], KRSnackbar.prototype, "message", void 0);