@kodaris/krubble-components 1.0.28 → 1.0.30

package/dist/krubble-components.umd.js

@@ -448,7 +448,8 @@
   /**
    * A customizable button component.
    *
-   * @slot - The button content
+   * @slot - The button content (text)
+   * @slot icon - Optional icon to display alongside the button text
    * @fires click - Fired when the button is clicked
    * @fires option-select - Fired when a dropdown option is selected
    */
@@ -475,6 +476,11 @@
            * Dropdown options - when provided, button becomes a dropdown
            */
           this.options = [];
+          /**
+           * Position of the icon relative to the text content.
+           * @attr icon-position
+           */
+          this.iconPosition = 'left';
           this._state = 'idle';
           this._stateText = '';
           this._dropdownOpened = false;
@@ -608,7 +614,10 @@
       }
       render() {
           const content = b `
-      <slot></slot>
+      <span class="content">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </span>
       ${this.options.length ? b `<svg class="caret" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>` : A}
       ${this._state !== 'idle'
             ? b `<span class="state-overlay">
@@ -757,9 +766,9 @@
     }
 
     /* Content */
-    :host(.kr-button--loading) slot,
-    :host(.kr-button--success) slot,
-    :host(.kr-button--error) slot {
+    :host(.kr-button--loading) .content,
+    :host(.kr-button--success) .content,
+    :host(.kr-button--error) .content {
       visibility: hidden;
     }
 
@@ -860,6 +869,34 @@
       color: inherit;
       text-decoration: none;
     }
+
+    /* Content wrapper for icon + text layout */
+    .content {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    :host([icon-position="right"]) .content {
+      flex-direction: row-reverse;
+    }
+
+    /* Icon styling */
+    ::slotted([slot="icon"]) {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+    }
+
+    :host(.kr-button--small) ::slotted([slot="icon"]) {
+      width: 14px;
+      height: 14px;
+    }
+
+    :host(.kr-button--large) ::slotted([slot="icon"]) {
+      width: 22px;
+      height: 22px;
+    }
   `;
   __decorate$e([
       n$1({ type: String, reflect: true })
@@ -882,6 +919,9 @@
   __decorate$e([
       n$1({ type: Array })
   ], exports.KRButton.prototype, "options", void 0);
+  __decorate$e([
+      n$1({ type: String, reflect: true, attribute: 'icon-position' })
+  ], exports.KRButton.prototype, "iconPosition", void 0);
   __decorate$e([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);