@kodaris/krubble-components 1.0.69 → 1.0.70

package/dist/krubble-components.bundled.js

@@ -475,18 +475,34 @@ let KRButton = class KRButton extends i$2 {
          * @attr icon-position
          */
         this.iconPosition = 'left';
+        /**
+         * When true and options are provided, renders as a split button with
+         * separate primary action and dropdown trigger zones.
+         */
+        this.split = false;
         this._state = 'idle';
         this._stateText = '';
         this._dropdownOpened = false;
         this._handleHostClick = (e) => {
+            if (this.split && this.options.length) {
+                return;
+            }
             if (this.options.length) {
                 e.stopPropagation();
                 this._toggleDropdown();
             }
         };
         this._handleKeydown = (e) => {
+            if (e.key === 'Escape' && this._dropdownOpened) {
+                this._dropdownOpened = false;
+                return;
+            }
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
+                if (this.split && this.options.length) {
+                    this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+                    return;
+                }
                 if (this.options.length) {
                     this._toggleDropdown();
                 }
@@ -494,8 +510,11 @@ let KRButton = class KRButton extends i$2 {
                     this.click();
                 }
             }
-            if (e.key === 'Escape' && this._dropdownOpened) {
-                this._dropdownOpened = false;
+            if (this.split && this.options.length && e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this._dropdownOpened) {
+                    this._toggleDropdown();
+                }
             }
         };
         this._handleClickOutside = (e) => {
@@ -518,6 +537,20 @@ let KRButton = class KRButton extends i$2 {
         this.removeEventListener('click', this._handleHostClick);
         document.removeEventListener('click', this._handleClickOutside);
     }
+    _handleSplitPrimaryClick(e) {
+        e.stopPropagation();
+        if (this._dropdownOpened) {
+            this._dropdownOpened = false;
+        }
+        this.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleSplitTriggerClick(e) {
+        e.stopPropagation();
+        this._toggleDropdown();
+    }
     _toggleDropdown() {
         this._dropdownOpened = !this._dropdownOpened;
         if (this._dropdownOpened) {
@@ -630,8 +663,38 @@ let KRButton = class KRButton extends i$2 {
         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');
+        this.classList.toggle('kr-button--split', this.split && !!this.options.length);
     }
     render() {
+        if (this.split && this.options.length) {
+            return b `
+        <div class="split-primary" @click=${(e) => this._handleSplitPrimaryClick(e)}>
+          <span class="content">
+            <slot name="icon"></slot>
+            <slot></slot>
+          </span>
+          ${this._state !== 'idle'
+                ? b `<span class="state-overlay">
+                ${this._state === 'loading'
+                    ? b `<span class="spinner"></span>`
+                    : this._stateText}
+              </span>`
+                : A}
+        </div>
+        <div class="split-divider"></div>
+        <div class="split-trigger" @click=${(e) => this._handleSplitTriggerClick(e)}>
+          <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>
+        </div>
+        <div class="dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}">
+          ${this.options.map(option => b `
+            <button
+              class="dropdown-item"
+              @click=${(e) => this._handleOptionClick(option, e)}
+            >${option.label}</button>
+          `)}
+        </div>
+      `;
+        }
         const content = b `
       <span class="content">
         <slot name="icon"></slot>
@@ -931,6 +994,154 @@ KRButton.styles = i$5 `
       width: 22px;
       height: 22px;
     }
+
+    /* ========================
+       Split Button
+       ======================== */
+
+    :host(.kr-button--split) {
+      padding: 0;
+      pointer-events: none;
+    }
+
+    .split-primary,
+    .split-trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      cursor: pointer;
+      pointer-events: auto;
+    }
+
+    .split-primary {
+      padding: 0 16px 0 22px;
+      border-radius: 20px 0 0 20px;
+      position: relative;
+      flex: 1;
+    }
+
+    .split-trigger {
+      padding: 0 14px 0 8px;
+      border-radius: 0 20px 20px 0;
+    }
+
+    .split-trigger .caret {
+      margin: 0;
+    }
+
+    .split-divider {
+      width: 1px;
+      height: 100%;
+      flex-shrink: 0;
+    }
+
+    .dropdown {
+      pointer-events: auto;
+    }
+
+    /* Split: zone hover — flat primary */
+    :host(.kr-button--flat.kr-button--primary) .split-primary:hover,
+    :host(.kr-button--flat.kr-button--primary) .split-trigger:hover {
+      background: #0e1f35;
+    }
+
+    /* Split: zone hover — flat secondary */
+    :host(.kr-button--flat.kr-button--secondary) .split-primary:hover,
+    :host(.kr-button--flat.kr-button--secondary) .split-trigger:hover {
+      background: #e5e7eb;
+    }
+
+    /* Split: zone hover — flat danger */
+    :host(.kr-button--flat.kr-button--danger) .split-primary:hover,
+    :host(.kr-button--flat.kr-button--danger) .split-trigger:hover {
+      background: #b91c1c;
+    }
+
+    /* Split: zone hover — outline primary */
+    :host(.kr-button--outline.kr-button--primary) .split-primary:hover,
+    :host(.kr-button--outline.kr-button--primary) .split-trigger:hover {
+      background: rgba(22, 48, 82, 0.05);
+    }
+
+    /* Split: zone hover — outline secondary */
+    :host(.kr-button--outline.kr-button--secondary) .split-primary:hover,
+    :host(.kr-button--outline.kr-button--secondary) .split-trigger:hover {
+      background: #f9fafb;
+    }
+
+    /* Split: zone hover — outline danger */
+    :host(.kr-button--outline.kr-button--danger) .split-primary:hover,
+    :host(.kr-button--outline.kr-button--danger) .split-trigger:hover {
+      background: rgba(219, 38, 39, 0.05);
+    }
+
+    /* Split: divider colors — flat variants */
+    :host(.kr-button--flat.kr-button--primary) .split-divider {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    :host(.kr-button--flat.kr-button--secondary) .split-divider {
+      background: rgba(0, 0, 0, 0.15);
+    }
+
+    :host(.kr-button--flat.kr-button--danger) .split-divider {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    /* Split: divider colors — outline variants */
+    :host(.kr-button--outline.kr-button--primary) .split-divider {
+      background: #163052;
+    }
+
+    :host(.kr-button--outline.kr-button--secondary) .split-divider {
+      background: #d1d5db;
+    }
+
+    :host(.kr-button--outline.kr-button--danger) .split-divider {
+      background: rgb(219, 38, 39);
+    }
+
+    /* Split: size small */
+    :host(.kr-button--split.kr-button--small) .split-primary {
+      padding: 0 12px 0 16px;
+    }
+
+    :host(.kr-button--split.kr-button--small) .split-trigger {
+      padding: 0 10px;
+    }
+
+    /* Split: size large */
+    :host(.kr-button--split.kr-button--large) .split-primary {
+      padding: 0 18px 0 24px;
+      border-radius: 30px 0 0 30px;
+    }
+
+    :host(.kr-button--split.kr-button--large) .split-trigger {
+      padding: 0 16px;
+      border-radius: 0 30px 30px 0;
+    }
+
+    /* Split: disabled */
+    :host([disabled]) .split-primary,
+    :host([disabled]) .split-trigger {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* Split: loading/success/error — overlay in primary zone only */
+    :host(.kr-button--split.kr-button--loading) .split-primary .content,
+    :host(.kr-button--split.kr-button--success) .split-primary .content,
+    :host(.kr-button--split.kr-button--error) .split-primary .content {
+      visibility: hidden;
+    }
+
+    :host(.kr-button--split.kr-button--loading) .split-trigger,
+    :host(.kr-button--split.kr-button--success) .split-trigger,
+    :host(.kr-button--split.kr-button--error) .split-trigger {
+      pointer-events: none;
+      opacity: 0.6;
+    }
   `;
 __decorate$l([
     n$1({ type: String, reflect: true })
@@ -956,6 +1167,9 @@ __decorate$l([
 __decorate$l([
     n$1({ type: String, reflect: true, attribute: 'icon-position' })
 ], KRButton.prototype, "iconPosition", void 0);
+__decorate$l([
+    n$1({ type: Boolean, reflect: true })
+], KRButton.prototype, "split", void 0);
 __decorate$l([
     r$1()
 ], KRButton.prototype, "_state", void 0);