@sankhyalabs/ezui 6.5.0-dev.5 → 6.5.0-dev.6

package/dist/cjs/ez-split-button.cjs.entry.js

@@ -6,17 +6,75 @@ const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const index$1 = require('./index-4ae2f4f6.js');
 
-const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #2B3A54);--ez-split-button--font-size:var(--text--small, 12px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--light, #ffffff);--ez-split-button--border-radius:var(--border--radius-large, 24px);--ez-split-button--border:1px solid var(--color--strokes);--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--background--light, #ffffff);--ez-split-button--disabled-color:var(--text--primary);--ez-split-button--disabled--background-color:var(--background--medium);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none;justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button:focus{box-shadow:0 0 0 2px var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__right-button:focus{box-shadow:2px 0 0 0 var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:active,.ez-split-button__right-button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled{border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled{border:var(--ez-split-button--disabled-border);border-left:none}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+const ezSplitButtonCss = ":host{--ez-split-button--min-width:var(--space--40, 40px);--ez-split-button--width:auto;--ez-split-button--height:var(--space--32, 32px);--ez-split-button__medium-icon--width:var(--space--40, 40px);--ez-split-button__large-icon--width:var(--space--44, 44px);--ez-split-button__label--padding-top:var(--space--0, 0px);--ez-split-button__label--padding-bottom:var(--space--0, 0px);--ez-split-button__right-button--padding-left:var(--space--8, 8px);--ez-split-button__right-button--padding-right:var(--space--12, 12px);--ez-split-button--color:var(--color--ocean-green-600, #008561);--ez-split-button__left-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button__right-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button--background-color:var(--color--gray-70, #FFFFFF);--ez-split-button--border:1px solid var(--color--gray-90, #EAEAEA);--ez-split-button--font-size:var(--font-size--default, 14px);--ez-split-button--line-height:var(--line-height--28, 28px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--font-weight--regular,400);--ez-split-button--border-radius:var(--border--radius-24, 24px);--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--disabled-color:var(--color--gray-400, #77777A);--ez-split-button--disabled--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;display:flex;width:fit-content}:host(.ez-split-button--primary){--ez-split-button--color:var(--color--gray-70);--ez-split-button--background-color:var(--color--ocean-green-500);--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button__left-icon--color:var(--color--gray-70);--ez-split-button__right-icon--color:var(--color--gray-70);--ez-split-button--hover-color:var(--color--gray-70);--ez-split-button--hover--background-color:var(--color--ocean-green-700);--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--gray-70);--ez-split-button--right-icon--hover-color:var(--color--gray-70);--ez-split-button--disabled-color:var(--color--gray-70);--ez-split-button--disabled--background-color:var(--color--gray-400);--ez-split-button--disabled--border:none;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}:host(.ez-split-button--secondary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:var(--color--gray-70);--ez-split-button--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-600);--ez-split-button--hover--background-color:var(--color--gray-80);--ez-split-button--hover--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:var(--color--gray-80);--ez-split-button--disabled--border:1px solid var(--color--gray-200);--ez-split-button--disabled-icon-color:var(--color--gray-400);--ez-split-button__left-icon--disabled-color:var(--color--gray-300);--ez-split-button__right-icon--disabled-color:var(--color--gray-300)}:host(.ez-split-button--tertiary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:transparent;--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-800);--ez-split-button--hover--background-color:transparent;--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:transparent;--ez-split-button--disabled--border:transparent;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}.ez-split-button.large{--ez-split-button--height:var(--space--42, 42px)}.ez-split-button.medium{--ez-split-button--height:var(--space--32, 32px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear, transform 0.15s ease;white-space:nowrap;overflow:hidden;transform:scale(1);min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none}label{cursor:pointer;line-height:var(--ez-split-button--line-height)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none;gap:var(--space--8, 8px);padding-left:var(--space--12, 12px);padding-right:var(--space--8, 8px)}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button.force-focus-visible,.ez-split-button__left-button:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--ocean-green-200), \n    -2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__right-button.force-focus-visible,.ez-split-button__right-button:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--ocean-green-200), \n    2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__left-button[aria-disabled].force-focus-visible,.ez-split-button__left-button[aria-disabled]:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--petroleum-100), \n    -2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.ez-split-button__right-button[aria-disabled].force-focus-visible,.ez-split-button__right-button[aria-disabled]:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--petroleum-100), \n    2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled],.ez-split-button__left-button:disabled label,.ez-split-button__left-button[aria-disabled] label,.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button__left-icon--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__left-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__right-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-left:none}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__divider{width:1px;box-sizing:border-box;position:relative;background-color:var(--ez-split-button--background-color);height:var(--ez-split-button--height);border-top:var(--ez-split-button--border);border-bottom:var(--ez-split-button--border)}.ez-split-button__divider[aria-disabled],.ez-split-button__divider.disabled{cursor:not-allowed;background-color:var(--ez-split-button--disabled--background-color);border-top:var(--ez-split-button--disabled--border);border-bottom:var(--ez-split-button--disabled--border)}.ez-split-button__divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 10%);border-radius:2px;height:75%;top:10%;bottom:10%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left);padding-right:var(--ez-split-button__right-button--padding-right)}.ez-split-button{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}.ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(255, 255, 255, 0.3);pointer-events:none;transform:scale(0);animation:ripple-animation 0.6s linear;z-index:0}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}:host .ripple,:host(.ez-split-button--secondary) .ripple{background:rgba(0, 133, 97, 0.2)}:host(.ez-split-button--primary) .ripple{background:rgba(255, 255, 255, 0.3)}:host(.ez-split-button--tertiary) .ripple{background:rgba(0, 133, 97, 0.15)}.ez-split-button__left-button.pressed,.ez-split-button__right-button.pressed{transform:scale(0.98)}.ez-split-button__left-button>*:not(.ripple),.ez-split-button__right-button>*:not(.ripple){position:relative;z-index:1}.ez-split-button__left-button:disabled .ripple,.ez-split-button__left-button[aria-disabled] .ripple,.ez-split-button__right-button:disabled .ripple,.ez-split-button__right-button[aria-disabled] .ripple{display:none}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled],.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{transform:scale(1) !important}";
 
+const ANIMATION_TIMINGS = {
+  PRESSED_DURATION: 150,
+  RIPPLE_DURATION: 600
+};
 const EzSplitButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonClick = index.createEvent(this, "buttonClick", 7);
     this.dropdownItemClick = index.createEvent(this, "dropdownItemClick", 7);
     this.dropdownSubActionClick = index.createEvent(this, "dropdownSubActionClick", 7);
+    this.rippleCounter = 0;
+    this.eventListeners = new WeakMap();
+    this.createRipple = (event, isLeftButton) => {
+      const button = isLeftButton ? this.leftButton : this.rightButton;
+      if (!button || this.isButtonDisabled || this.suppressAnimation)
+        return;
+      const coordinates = this.getEventCoordinates(event);
+      const rect = button.getBoundingClientRect();
+      const ripplePosition = {
+        x: coordinates.x - rect.left,
+        y: coordinates.y - rect.top
+      };
+      const newRipple = Object.assign(Object.assign({}, ripplePosition), { id: ++this.rippleCounter });
+      this.addRippleToButton(newRipple, isLeftButton);
+    };
+    /**
+     * Método responsável em posicionar o dropdown na tela.
+     * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+     */
+    this.positionDropdown = () => {
+      if (!this.rightButton || !this.dropdownParent)
+        return;
+      requestAnimationFrame(() => {
+        const { rightButton, dropdownParent } = this;
+        const rightButtonRect = rightButton.getBoundingClientRect();
+        const dropdownRect = dropdownParent.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        // Calcule posições de forma mais eficiente
+        const spaceBelow = viewportHeight - rightButtonRect.bottom;
+        const spaceAbove = rightButtonRect.top;
+        const spaceRight = viewportWidth - rightButtonRect.left;
+        const spaceLeft = rightButtonRect.left;
+        const shouldOpenUpward = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
+        const shouldOpenLeftward = spaceRight < dropdownRect.width && spaceLeft > dropdownRect.width;
+        const styles = this.calculateDropdownPosition(rightButtonRect, dropdownRect, shouldOpenUpward, shouldOpenLeftward);
+        Object.assign(dropdownParent.style, styles);
+      });
+    };
+    this.removeForcedFocusVisibleLeft = () => {
+      var _a;
+      (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+    };
+    this.removeForcedFocusVisibleRight = () => {
+      var _a;
+      (_a = this.rightButton) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+    };
+    this.leftRipples = [];
+    this.rightRipples = [];
+    this.isLeftPressed = false;
+    this.isRightPressed = false;
     this.show = false;
     this.enabled = true;
+    this.isDisabled = false;
     this.iconName = undefined;
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
     this.image = undefined;
     this.items = undefined;
     this.label = undefined;
@@ -24,6 +82,8 @@ const EzSplitButton = class {
     this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
+    this.variant = undefined;
+    this.suppressAnimation = false;
     this.itemBuilder = undefined;
   }
   /**
@@ -38,12 +98,14 @@ const EzSplitButton = class {
    */
   async setLeftButtonFocus() {
     this.leftButton.focus();
+    this.leftButton.classList.add("force-focus-visible");
   }
   /**
    * Aplica o foco no botão do dropdown.
-   */
+  */
   async setRightButtonFocus() {
     this.rightButton.focus();
+    this.rightButton.classList.add("force-focus-visible");
   }
   /**
    * Abre ou Fecha o dropdown do Split Button.
@@ -57,18 +119,99 @@ const EzSplitButton = class {
   async isOpenedDropdown() {
     return this.show;
   }
+  getEventCoordinates(event) {
+    if (event instanceof MouseEvent) {
+      return { x: event.clientX, y: event.clientY };
+    }
+    return {
+      x: event.touches[0].clientX,
+      y: event.touches[0].clientY
+    };
+  }
+  addRippleToButton(ripple, isLeftButton) {
+    if (isLeftButton) {
+      this.leftRipples = [...this.leftRipples, ripple];
+      this.setButtonPressed(true, true);
+      this.scheduleRippleCleanup(ripple, true);
+    }
+    else {
+      this.rightRipples = [...this.rightRipples, ripple];
+      this.setButtonPressed(false, true);
+      this.scheduleRippleCleanup(ripple, false);
+    }
+  }
+  setButtonPressed(isLeftButton, pressed) {
+    if (isLeftButton) {
+      this.isLeftPressed = pressed;
+    }
+    else {
+      this.isRightPressed = pressed;
+    }
+  }
+  scheduleRippleCleanup(ripple, isLeftButton) {
+    setTimeout(() => {
+      this.setButtonPressed(isLeftButton, false);
+    }, ANIMATION_TIMINGS.PRESSED_DURATION);
+    setTimeout(() => {
+      this.removeRipple(ripple.id, isLeftButton);
+    }, ANIMATION_TIMINGS.RIPPLE_DURATION);
+  }
+  removeRipple(rippleId, isLeftButton) {
+    if (isLeftButton) {
+      this.leftRipples = this.leftRipples.filter(ripple => ripple.id !== rippleId);
+    }
+    else {
+      this.rightRipples = this.rightRipples.filter(ripple => ripple.id !== rippleId);
+    }
+  }
+  onMouseDown(event) {
+    const composedPath = event.composedPath();
+    const isLeftButton = composedPath.includes(this.leftButton);
+    const isRightButton = composedPath.includes(this.rightButton);
+    if (isLeftButton) {
+      this.createRipple(event, true);
+      return;
+    }
+    if (isRightButton) {
+      this.createRipple(event, false);
+      return;
+    }
+  }
+  onTouchStart(event) {
+    const composedPath = event.composedPath();
+    const isLeftButton = composedPath.includes(this.leftButton);
+    const isRightButton = composedPath.includes(this.rightButton);
+    if (isLeftButton) {
+      this.createRipple(event, true);
+      return;
+    }
+    if (isRightButton) {
+      this.createRipple(event, false);
+      return;
+    }
+  }
   clickListener(evt) {
-    if (!this.enabled) {
+    const isDisabled = !this.enabled ||
+      this.isDisabled === true ||
+      this.isDisabled === "" ||
+      this.isDisabled === "full";
+    if (isDisabled) {
       evt.preventDefault();
       evt.stopPropagation();
       evt.stopImmediatePropagation();
     }
   }
-  getIconSize(sizeParam = 'medium') {
+  shouldShowLabelOnLeftButton() {
+    return this.mode !== 'icon-only';
+  }
+  shouldShowIconOnLeftButton() {
+    return this.mode !== 'default';
+  }
+  getIconSize(defaultSize = 'medium') {
     var _a;
-    const sizeList = ['small', 'medium', 'large'];
+    const validSizes = ['small', 'medium', 'large'];
     const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+    return validSizes.includes(sizeLowerCase) ? sizeLowerCase : defaultSize;
   }
   closeDropdown() {
     this.show = false;
@@ -79,95 +222,127 @@ const EzSplitButton = class {
   handleDropdownItemClick(evt) {
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
+    this.closeDropdown();
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
     evt.stopPropagation();
     this.closeDropdown();
   }
-  resolveOffsetParentRect() {
-    var _a, _b;
-    const offsetParentRect = (_b = (_a = this.dropdownParent) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const rectWithoutScroll = {
-      top: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) + scrollTop,
-      left: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) + scrollLeft,
-      bottom: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.bottom) + scrollTop,
-      right: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.right) + scrollLeft,
-      width: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.width,
-      height: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.height
+  calculateDropdownPosition(buttonRect, dropdownRect, openUpward, openLeftward) {
+    const baseOffset = this.offsetParentRect || { top: 0, left: 0 };
+    return {
+      top: openUpward ? 'auto' : `${buttonRect.bottom - baseOffset.top + window.scrollY}px`,
+      bottom: openUpward ? `${window.innerHeight - buttonRect.top - window.scrollY}px` : 'auto',
+      left: openLeftward
+        ? `${buttonRect.right - dropdownRect.width - baseOffset.left + window.scrollX}px`
+        : `${buttonRect.left - baseOffset.left + window.scrollX}px`,
+      maxHeight: openUpward ? `${buttonRect.top - baseOffset.top}px` : 'none'
     };
-    this.offsetParentRect = rectWithoutScroll;
   }
-  /**
-   * Método responsável em posicionar o dropdown na tela.
-   * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
-   */
-  positionDropdown() {
-    var _a, _b, _c, _d, _e, _f;
-    const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
-    const rightButtonRect = _rightButton.getBoundingClientRect();
-    const dropdownParentRect = _dropdownParent.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - (rightButtonRect.bottom + ((_a = this.offsetParentRect) === null || _a === void 0 ? void 0 : _a.top));
-    const spaceAbove = rightButtonRect.top + ((_b = this.offsetParentRect) === null || _b === void 0 ? void 0 : _b.top);
-    const spaceRight = window.innerWidth - (rightButtonRect.left + ((_c = this.offsetParentRect) === null || _c === void 0 ? void 0 : _c.left));
-    const spaceLeft = rightButtonRect.left;
-    const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
-    const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
-    let top = `${rightButtonRect.bottom - ((_d = this.offsetParentRect) === null || _d === void 0 ? void 0 : _d.top) + window.scrollY}px`;
-    let left = `${rightButtonRect.left - ((_e = this.offsetParentRect) === null || _e === void 0 ? void 0 : _e.left) + window.scrollX}px`;
-    let bottom = 'auto';
-    if (hasSpaceBelow) {
-      bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
-      top = 'auto';
-      _dropdownParent.style.maxHeight = `${spaceAbove}px`;
-    }
-    if (hasSpaceRight) {
-      left = `${rightButtonRect.right - dropdownParentRect.width - ((_f = this.offsetParentRect) === null || _f === void 0 ? void 0 : _f.left) + window.scrollX}px`;
-    }
-    _dropdownParent.style.top = top;
-    _dropdownParent.style.bottom = bottom;
-    _dropdownParent.style.left = left;
-  }
-  setEvents() {
-    window.removeEventListener('scroll', this.positionDropdown.bind(this));
-    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  setupEventListeners() {
+    const controller = new AbortController();
+    const { signal } = controller;
+    window.addEventListener('scroll', this.positionDropdown, { signal, passive: true });
+    window.addEventListener('resize', this.positionDropdown, { signal, passive: true });
+    this.eventListeners.set(this._element, controller);
+  }
+  cleanupEventListeners() {
+    const controller = this.eventListeners.get(this._element);
+    if (controller) {
+      controller.abort();
+      this.eventListeners.delete(this._element);
+    }
   }
   async componentWillLoad() {
     this.i18n = await index$1.initI18n();
-    this.setEvents();
-  }
-  componentWillRender() {
-    this.resolveOffsetParentRect();
   }
   componentDidLoad() {
-    if (this._element)
+    this.addElementIDs();
+    this.setupEventListeners();
+    this.addBlurListeners();
+    setTimeout(() => this.positionDropdown(), 0);
+  }
+  disconnectedCallback() {
+    this.cleanupEventListeners();
+    this.removeBlurListeners();
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.positionDropdown();
+    }
+  }
+  addElementIDs() {
+    if (this._element) {
       core.ElementIDUtils.addIDInfo(this._element);
+    }
     if (this.leftButton) {
-      const dataInfo = { id: 'embedded' };
-      core.ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+      core.ElementIDUtils.addIDInfo(this.leftButton, 'leftButton', { id: 'embedded' });
     }
     if (this.rightButton) {
-      const dataInfo = { id: 'embedded' };
-      core.ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+      core.ElementIDUtils.addIDInfo(this.rightButton, 'rightButton', { id: 'embedded' });
     }
-    this.positionDropdown();
   }
-  componentDidUpdate() {
-    this.positionDropdown();
+  renderRipples(ripples) {
+    return ripples.map((ripple) => (index.h("span", { key: ripple.id, class: "ripple", style: {
+        left: `${ripple.x - 10}px`,
+        top: `${ripple.y - 10}px`,
+      } })));
   }
   render() {
     const hasIconButton = this.shouldShowIconOnLeftButton();
     const hasLabelButton = this.shouldShowLabelOnLeftButton();
     const iconSize = this.getIconSize();
-    return (index.h("div", { class: "label-icon" }, index.h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && index.h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && index.h("label", { title: this.leftTitle || this.label }, this.label)), index.h("div", { class: "dropdown" }, index.h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, index.h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (index.h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
+    return (index.h(index.Host, { class: this.variant ? `ez-split-button--${this.variant}` : '' }, index.h("div", { class: `ez-split-button ${this.size} ${this.mode}` }, this.renderLeftButton(hasIconButton, hasLabelButton, iconSize), this.renderDivider(), this.renderDropdownSection(iconSize))));
   }
-  shouldShowLabelOnLeftButton() {
-    return ['icon-left', 'default'].includes(this.mode);
+  renderLeftButton(hasIconButton, hasLabelButton, iconSize) {
+    return (index.h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode} ${this.isLeftPressed ? 'pressed' : ''}`, title: this.leftTitle || this.label, type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.handleButtonClick(), ref: el => (this.leftButton = el) }, hasIconButton && this.renderLeftIcon(iconSize), hasLabelButton && this.renderLabel(), !this.suppressAnimation && this.renderRipples(this.leftRipples)));
   }
-  shouldShowIconOnLeftButton() {
-    return ['icon-left', 'icon-only'].includes(this.mode);
+  renderDivider() {
+    return index.h("div", { class: `ez-split-button__divider ${this.mode} ez-split-button__divider--${this.size} ${this.isButtonDisabled ? 'disabled' : ''}`, "aria-disabled": this.isButtonAriaDisabled });
+  }
+  renderDropdownSection(iconSize) {
+    return (index.h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
+  }
+  renderRightButton(iconSize) {
+    return (index.h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ${this.isRightPressed ? 'pressed' : ''}`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.toggleDropdown(), ref: el => (this.rightButton = el) }, this.renderRightIcon(iconSize), !this.suppressAnimation && this.renderRipples(this.rightRipples)));
+  }
+  renderDropdownContent() {
+    return (index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && this.renderDropdown()));
+  }
+  renderLeftIcon(iconSize) {
+    return (index.h("ez-icon", { href: this.image, iconName: this.leftIconName || this.iconName, size: iconSize }));
+  }
+  renderLabel() {
+    return index.h("label", { title: this.leftTitle || this.label }, this.label);
+  }
+  renderRightIcon(iconSize) {
+    const iconName = this.rightIconName || 'chevron-down';
+    const containerClass = `ez-split-button__right-button-container ${iconSize ? `btn-icon--${iconSize}` : ''}`;
+    return (index.h("ez-icon", { class: containerClass, iconName: iconName, size: iconSize }));
+  }
+  renderDropdown() {
+    return (index.h("ez-dropdown", { items: this.items, onClick: evt => evt.stopPropagation(), onEzOutsideClick: () => this.closeDropdown(), onEzClick: evt => this.handleDropdownItemClick(evt), onEzSubActionClick: evt => this.handleDropdownSubActionClick(evt), itemBuilder: this.itemBuilder }));
+  }
+  addBlurListeners() {
+    var _a, _b;
+    this.removeBlurListeners();
+    (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.removeForcedFocusVisibleLeft);
+    (_b = this.rightButton) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.removeForcedFocusVisibleRight);
+  }
+  removeBlurListeners() {
+    var _a, _b;
+    (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisibleLeft);
+    (_b = this.rightButton) === null || _b === void 0 ? void 0 : _b.removeEventListener('blur', this.removeForcedFocusVisibleRight);
+  }
+  connectedCallback() {
+    this.addBlurListeners();
+  }
+  get isButtonDisabled() {
+    return this.isDisabled === "full" || !this.enabled;
+  }
+  get isButtonAriaDisabled() {
+    return this.isDisabled === true || this.isDisabled === "";
   }
   get _element() { return index.getElement(this); }
 };