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

package/dist/custom-elements/index.js

@@ -2803,6 +2803,7 @@ const ptBrTranslations = {
       loading: "Carregando",
       apply: "Aplicar",
       cancel: "Cancelar",
+      confirm: "Confirmar",
       ok: "OK",
       alerts: "Avisos",
       requiredInfo: " (obrigatório) *",
@@ -3095,6 +3096,7 @@ const enUsTranslations = {
       loading: "Loading",
       apply: "Apply",
       cancel: "Cancel",
+      confirm: "Confirm",
       ok: "OK",
       alerts: "Alerts",
       requiredInfo: " (required) *",
@@ -3387,6 +3389,7 @@ const esEsTranslations = {
       loading: "Cargando",
       apply: "Aplicar",
       cancel: "Cancelar",
+      confirm: "Confirmar",
       ok: "OK",
       alerts: "Avisos",
       requiredInfo: " (obligatorio) *",
@@ -82798,7 +82801,7 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
   static get style() { return ezPopoverPlusCss; }
 };
 
-const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--md, 20px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--large, 20px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;height:calc(100% - 44px)}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset;gap:var(--space--16, 16px)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;flex:1;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--24, 24px)}.popup__header{width:100%;display:flex;align-items:center}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzPopup$1 = class extends HTMLElement$1 {
   constructor() {
@@ -82807,29 +82810,23 @@ const EzPopup$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezClosePopup = createEvent(this, "ezClosePopup", 7);
     this.ezPopupAction = createEvent(this, "ezPopupAction", 7);
-    this._sizeClasses = {
-      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
-      "small": "col--sd-5",
-      "medium": "col--sd-6",
-      "large": "col--sd-9",
-      "x-large": "col--sd-11",
-      "default": "ez-popup__size-limit--x-small",
-      "auto": "",
-    };
     this.size = "medium";
     this.opened = false;
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
     this.enabledScroll = false;
+    this.autoClose = true;
+    this.footerButtons = [];
   }
   observeConfig() {
     this.manageOverflow();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
-    if (this.opened && this._popupRef) {
-      this._popupRef.focus();
-    }
+    this.popUpFocus();
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
@@ -82864,31 +82861,96 @@ const EzPopup$1 = class extends HTMLElement$1 {
     if (!this.opened) {
       return;
     }
-    requestAnimationFrame(() => {
-      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
-      if (this._popupRef && slot === null) {
-        this._popupRef.focus();
-      }
-    });
+    if (this._popupRef) {
+      this._popupRef.focus();
+    }
   }
   getGridSize() {
-    if (this.size === "auto")
-      return "";
-    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
-  }
-  handlePopupHeight() {
-    return this.heightMode === 'auto' ? 'popup__container--auto' : '';
+    const _sizeClasses = {
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
+      "small": "col--sd-5",
+      "medium": "col--sd-6",
+      "large": "col--sd-9",
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
+      "auto": "",
+    };
+    if (!this.size || !_sizeClasses.hasOwnProperty(this.size)) {
+      return _sizeClasses["medium"];
+    }
+    return _sizeClasses[this.size] || _sizeClasses["medium"];
   }
-  handlePopupOverflowY() {
-    return this.enabledScroll ? 'popup__overflow-y--auto' : '';
+  getDialogClass() {
+    let className = 'popup__container';
+    if (this.heightMode === 'auto') {
+      className += ' popup__container--auto';
+    }
+    if (this.enabledScroll) {
+      className += ' popup__overflow-y--auto';
+    }
+    className += ` ${this.getGridSize()}`;
+    return className;
   }
   componentDidRender() {
     this.manageOverlay();
     this.popUpFocus();
   }
+  handleAutoClose(event) {
+    if (!this.opened || !this._popupRef || !this.autoClose) {
+      return;
+    }
+    if (this._popupRef.contains(event.target)) {
+      return;
+    }
+    const slot = this._popupRef.querySelector('slot');
+    if (slot && slot.assignedElements().length > 0) {
+      const assignedElements = slot.assignedElements();
+      for (const element of assignedElements) {
+        if (element.contains(event.target)) {
+          return;
+        }
+      }
+    }
+    if (this._popupRef.shadowRoot && this._popupRef.shadowRoot.contains(event.target)) {
+      return;
+    }
+    this.closePopup();
+  }
+  handleDefaultPropsButtonsByIndex(index) {
+    switch (index) {
+      case 0:
+        return {
+          label: this.i18n ? this.i18n('app.confirm') : 'Confirmar',
+          variant: "primary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+            this.ezPopupAction.emit("OK");
+          }
+        };
+      case 1:
+        return {
+          label: this.i18n ? this.i18n('app.cancel') : 'Cancelar',
+          variant: "secondary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+      case 2:
+        return {
+          label: this.i18n ? this.i18n('app.close') : 'Fechar',
+          variant: "tertiary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+    }
+  }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: `popup__container ${(this.handlePopupHeight())} ${this.handlePopupOverflowY()}` }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
-      h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
+    return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), this.footerButtons.length > 0 && (h("footer", { class: "popup__footer" }, this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps)))))))))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -88636,8 +88698,12 @@ const EzSpinner$1 = class extends HTMLElement$1 {
   static get style() { return ezSpinnerCss; }
 };
 
-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$1 = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -88646,9 +88712,63 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
     this.buttonClick = createEvent(this, "buttonClick", 7);
     this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
     this.dropdownSubActionClick = 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;
@@ -88656,6 +88776,8 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
     this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
+    this.variant = undefined;
+    this.suppressAnimation = false;
     this.itemBuilder = undefined;
   }
   /**
@@ -88670,12 +88792,14 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
    */
   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.
@@ -88689,18 +88813,99 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
   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;
@@ -88711,95 +88916,127 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
   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
-    };
-    this.offsetParentRect = rectWithoutScroll;
+  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'
+    };
   }
-  /**
-   * 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;
+  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);
   }
-  setEvents() {
-    window.removeEventListener('scroll', this.positionDropdown.bind(this));
-    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  cleanupEventListeners() {
+    const controller = this.eventListeners.get(this._element);
+    if (controller) {
+      controller.abort();
+      this.eventListeners.delete(this._element);
+    }
   }
   async componentWillLoad() {
     this.i18n = await 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) {
       ElementIDUtils.addIDInfo(this._element);
+    }
     if (this.leftButton) {
-      const dataInfo = { id: 'embedded' };
-      ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+      ElementIDUtils.addIDInfo(this.leftButton, 'leftButton', { id: 'embedded' });
     }
     if (this.rightButton) {
-      const dataInfo = { id: 'embedded' };
-      ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+      ElementIDUtils.addIDInfo(this.rightButton, 'rightButton', { id: 'embedded' });
     }
-    this.positionDropdown();
   }
-  componentDidUpdate() {
-    this.positionDropdown();
+  renderRipples(ripples) {
+    return ripples.map((ripple) => (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 (h("div", { class: "label-icon" }, 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 && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, 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) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (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 (h(Host, { class: this.variant ? `ez-split-button--${this.variant}` : '' }, 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 (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 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 (h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
+  }
+  renderRightButton(iconSize) {
+    return (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 (h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && this.renderDropdown()));
+  }
+  renderLeftIcon(iconSize) {
+    return (h("ez-icon", { href: this.image, iconName: this.leftIconName || this.iconName, size: iconSize }));
+  }
+  renderLabel() {
+    return 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 (h("ez-icon", { class: containerClass, iconName: iconName, size: iconSize }));
+  }
+  renderDropdown() {
+    return (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 this; }
   static get style() { return ezSplitButtonCss; }
@@ -92711,7 +92948,7 @@ const EzPagination = /*@__PURE__*/proxyCustomElement(EzPagination$1, [2,"ez-pagi
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
 const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-popover-core",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
 const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
-const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"],"enabledScroll":[4,"enabled-scroll"]}]);
+const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"],"enabledScroll":[4,"enabled-scroll"],"autoClose":[4,"auto-close"],"footerButtons":[16]}]);
 const EzProgressBar = /*@__PURE__*/proxyCustomElement(EzProgressBar$1, [2,"ez-progress-bar",{"percent":[514],"label":[513],"helpText":[513,"help-text"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
 const EzRichText = /*@__PURE__*/proxyCustomElement(EzRichText$1, [2,"ez-rich-text",{"showPreview":[4,"show-preview"],"value":[1537],"label":[513],"mode":[513],"enabled":[516],"rows":[514],"errorMessage":[1537,"error-message"],"canShowError":[516,"can-show-error"],"showConfigs":[4,"show-configs"],"showTextFormat":[4,"show-text-format"],"showUndoRedo":[4,"show-undo-redo"],"previewMode":[32]},[[0,"executeToolbarCommand","handleExecuteToolbarCommand"]]]);
@@ -92730,7 +92967,7 @@ const EzSimpleImageUploader = /*@__PURE__*/proxyCustomElement(EzSimpleImageUploa
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"template":[1],"count":[2],"variant":[1],"width":[1],"height":[1],"marginTop":[1,"margin-top"],"marginRight":[1,"margin-right"],"marginBottom":[1,"margin-bottom"],"marginLeft":[1,"margin-left"],"animation":[1]}]);
 const EzSortableList = /*@__PURE__*/proxyCustomElement(EzSortableList$1, [1,"ez-sortable-list",{"title":[1],"hideHeader":[4,"hide-header"],"hideTotalizer":[4,"hide-totalizer"],"group":[1],"dataSource":[16],"idSortableList":[1,"id-sortable-list"],"entityLabel":[1,"entity-label"],"entityLabelPlural":[1,"entity-label-plural"],"emptyMessage":[1,"empty-message"],"hoverFeedback":[4,"hover-feedback"],"enableMultipleSelection":[4,"enable-multiple-selection"],"removeItensMoved":[4,"remove-itens-moved"],"itemRightSlotBuilder":[1040],"itemLeftSlotBuilder":[1040],"filterTerm":[32],"selectedItems":[32]}]);
 const EzSpinner = /*@__PURE__*/proxyCustomElement(EzSpinner$1, [1,"ez-spinner",{"size":[1]}]);
-const EzSplitButton = /*@__PURE__*/proxyCustomElement(EzSplitButton$1, [1,"ez-split-button",{"show":[516],"enabled":[516],"iconName":[513,"icon-name"],"image":[513],"items":[16],"label":[513],"leftTitle":[513,"left-title"],"rightTitle":[513,"right-title"],"mode":[513],"size":[513],"itemBuilder":[16]},[[2,"click","clickListener"]]]);
+const EzSplitButton = /*@__PURE__*/proxyCustomElement(EzSplitButton$1, [1,"ez-split-button",{"show":[1540],"enabled":[516],"isDisabled":[520,"is-disabled"],"iconName":[513,"icon-name"],"leftIconName":[513,"left-icon-name"],"rightIconName":[513,"right-icon-name"],"image":[513],"items":[16],"label":[513],"leftTitle":[513,"left-title"],"rightTitle":[513,"right-title"],"mode":[513],"size":[513],"variant":[1537],"suppressAnimation":[1540,"suppress-animation"],"itemBuilder":[16],"leftRipples":[32],"rightRipples":[32],"isLeftPressed":[32],"isRightPressed":[32]},[[1,"mousedown","onMouseDown"],[1,"touchstart","onTouchStart"],[2,"click","clickListener"]]]);
 const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [4,"ez-split-item",{"label":[1],"enableExpand":[516,"enable-expand"],"size":[1],"structural":[4],"_expanded":[32]}]);
 const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1],"anchorToExpand":[4,"anchor-to-expand"],"structural":[4]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);