@kodaris/krubble-components 1.0.69 → 1.0.70

package/dist/krubble-components.umd.js

@@ -481,18 +481,34 @@
            * @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();
                   }
@@ -500,8 +516,11 @@
                       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) => {
@@ -524,6 +543,20 @@
           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) {
@@ -636,8 +669,38 @@
           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>
@@ -937,6 +1000,154 @@
       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 })
@@ -962,6 +1173,9 @@
   __decorate$l([
       n$1({ type: String, reflect: true, attribute: 'icon-position' })
   ], exports.KRButton.prototype, "iconPosition", void 0);
+  __decorate$l([
+      n$1({ type: Boolean, reflect: true })
+  ], exports.KRButton.prototype, "split", void 0);
   __decorate$l([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);