@sankhyalabs/ezui 6.6.0 → 6.7.0-dev.1

package/dist/collection/components/ez-button/ez-button.js

@@ -1,19 +1,54 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class EzButton {
   constructor() {
+    this.createRipple = (event) => {
+      const button = this._button;
+      if (!button || this.isDisabled || !this.enabled)
+        return;
+      const rect = button.getBoundingClientRect();
+      let clientX, clientY;
+      if (event instanceof MouseEvent) {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      }
+      else {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      }
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      const newRipple = { x, y, id: Date.now() };
+      this.ripples = [...this.ripples, newRipple];
+      this.isPressed = true;
+      setTimeout(() => {
+        this.isPressed = false;
+      }, 150);
+      setTimeout(() => {
+        this.ripples = this.ripples.filter(ripple => ripple.id !== newRipple.id);
+      }, 600);
+    };
+    this.ripples = [];
+    this.isPressed = false;
     this.label = undefined;
     this.enabled = true;
+    this.isDisabled = false;
     this.mode = "regular";
     this.image = undefined;
     this.iconName = undefined;
-    this.size = undefined;
+    this.size = "medium";
+    this.variant = undefined;
+    this.type = "button";
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.suppressAnimation = false;
   }
   /**
    * Aplica o foco no botão.
    */
   async setFocus() {
     this._button.focus();
+    this._button.classList.add("force-focus-visible");
   }
   /**
    * Remove o foco do botão.
@@ -21,12 +56,32 @@ export class EzButton {
   async setBlur() {
     this._button.blur();
   }
+  onMouseDown(event) {
+    this.createRipple(event);
+  }
+  onTouchStart(event) {
+    this.createRipple(event);
+  }
   clickListener(evt) {
-    if (!this.enabled) {
+    const isDisabled = !this.enabled ||
+      this.isDisabled === true ||
+      this.isDisabled === "" ||
+      this.isDisabled === "full";
+    if (isDisabled) {
       evt.stopImmediatePropagation();
     }
   }
+  removeForcedFocusVisible() {
+    var _a;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+  }
+  connectedCallback() {
+    var _a, _b;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
+    (_b = this._button) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
+  }
   componentDidLoad() {
+    var _a;
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element);
     }
@@ -34,17 +89,23 @@ export class EzButton {
       const dataInfo = { id: 'embedded' };
       ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
+  }
+  disconnectCallback() {
+    var _a;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
   }
   getButtonSize(sizeParam = "medium") {
     const sizeList = ["x-small", "small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
     return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
   }
-  getIconSize(sizeParam = "medium") {
-    const sizeList = ["small", "medium", "large"];
-    const sizeLowerCase = this.size && this.size.toLowerCase();
-    const sizeMapped = sizeLowerCase === "x-small" ? "small" : sizeLowerCase;
-    return sizeList.includes(sizeMapped) ? sizeMapped : sizeParam;
+  getButtonSizeClass() {
+    return this.getButtonSize() ? `btn-icon--${this.getButtonSize()}` : "";
+  }
+  getIconSize() {
+    const iconSize = this.size === "x-small" ? "small" : this.size;
+    return iconSize;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -52,31 +113,40 @@ export class EzButton {
     if (!!content) {
       if (this.mode == "link") {
         content.style.display = "inline";
-        if (slot.name == "leftIcon") {
-          content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
-        }
-        else if (slot.name == "rightIcon") {
-          content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
-        }
       }
       else {
         content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
       }
     }
   }
+  renderRipples() {
+    return this.ripples.map((ripple) => (h("span", { key: ripple.id, class: "ripple", style: {
+        left: `${ripple.x - 10}px`,
+        top: `${ripple.y - 10}px`,
+      } })));
+  }
   render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
-    }
-    else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
-    }
-    else if (this.mode == "link") {
-      return (h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { class: this.getButtonSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
+    const renderButton = () => {
+      if (this.mode == "icon") {
+        return (h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()));
+      }
+      if (this.mode == "label-icon") {
+        return (h("div", { class: `label-icon  ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}` }, h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()), h("label", { title: this.label }, this.label)));
+      }
+      if (this.mode == "link") {
+        return (h("a", { class: `${this.getIconSize()} ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}`, tabIndex: 0, ref: (el) => this._button = el }, this.leftIconName
+          ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
+          : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
+          ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
+          : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      }
+      return (h("button", { class: `${this.getButtonSize("")} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, this.leftIconName
+        ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
+        : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
+        ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
+        : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), !this.suppressAnimation && this.renderRipples()));
+    };
+    return (h(Host, { class: `${this.variant ? `ez-button--${this.variant}` : ""}` }, renderButton()));
   }
   static get is() { return "ez-button"; }
   static get encapsulation() { return "shadow"; }
@@ -120,13 +190,34 @@ export class EzButton {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `isDisabled` prop instead."
+            }],
           "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
         },
         "attribute": "enabled",
         "reflect": true,
         "defaultValue": "true"
       },
+      "isDisabled": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | \"full\" | \"\"",
+          "resolved": "\"\" | \"full\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro o clique no bot\u00E3o fica desabilitado mas a navega\u00E7\u00E3o continua funcional.\nSe full, o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
+        },
+        "attribute": "is-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "mode": {
         "type": "string",
         "mutable": false,
@@ -183,7 +274,7 @@ export class EzButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
           "references": {}
         },
@@ -194,10 +285,104 @@ export class EzButton {
           "text": "Define o tamanho do ez-button."
         },
         "attribute": "size",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"medium\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a variante do ez-button."
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo do bot\u00E3o.\nPode ser `button`, `submit` ou `reset`."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "leftIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone esquerdo do ez-button.\nTem prioridade sobre o slot `leftIcon`."
+        },
+        "attribute": "left-icon-name",
+        "reflect": false
+      },
+      "rightIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone direto do ez-button.\nTem prioridade sobre o slot `rightIcon`."
+        },
+        "attribute": "right-icon-name",
+        "reflect": false
+      },
+      "suppressAnimation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro, desabilita a anima\u00E7\u00E3o de ripple."
+        },
+        "attribute": "suppress-animation",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "ripples": {},
+      "isPressed": {}
+    };
+  }
   static get methods() {
     return {
       "setFocus": {
@@ -237,6 +422,18 @@ export class EzButton {
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{
+        "name": "mousedown",
+        "method": "onMouseDown",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchstart",
+        "method": "onTouchStart",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
         "name": "click",
         "method": "clickListener",
         "target": undefined,

package/dist/collection/components/ez-chip/ez-chip.css

@@ -24,19 +24,15 @@
   --ez-label-chip__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
   --ez-label-chip__label__container--border-color-strokes: transparent;
-  /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
-  --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
   /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
-  --ez-label-chip__label__container-color--disable-secondary: var(--color--gray-80, #F9F9F9);
+  --ez-label-chip__label__container-color--disabled: var(--color--gray-80, #F9F9F9);
   /*@doc Define a cor de fundo do container.*/
   --ez-label-chip__label__container--background-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor da borda do container quando ativo.*/
-  --ez-label-chip__label__container--border-color: #0085610F;
-    /*@doc Define a cor da borda do container quando ativo.*/
   --ez-label-chip__label__container--border-color-active: transparent;
-  /*@doc Define a cor do fundo do container quando o cursor está ativo.*/
+  /*@doc Define a cor do fundo do container quando está ativo.*/
   --ez-label-chip__label__container--default--background-color--active: var(--color--ocean-green-700, #00684C);
-  /*@doc Define a cor do texto quando o cursor está sobre ele.*/
+  /*@doc Define a cor do texto quando está ativo.*/
   --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
   --ez-label-chip__label__container--text--disabled: var(--color--gray-300, #A4A5A7);
@@ -44,8 +40,6 @@
   --ez-label-chip__label__container--default--border-color--active: var(--color--ocean-green-200);
   /*@doc Define a cor da borda quando o componente está ativo e na variação secundária.*/
   --ez-label-chip__label__container--secondary--border-color--active: var(--color--gray-200);
-  /*@doc Define a margem superior.*/
-  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 0px);
 }
 
 .label__text {
@@ -82,7 +76,6 @@
   border-radius: var(--ez-label-chip__label__container--border-radius);
   padding: 0 var(--ez-label-chip__horizontal-padding);
   outline-color: var(--ez-label-chip__label__container--default--border-color--active);
-  margin-top: var(--ez-label-chip__label__container--default--margin-top);
 }
 
 .label__container[data-size="default"] {
@@ -123,62 +116,119 @@
 
 /*PRIMARY*/
 
-.label__container[data-color-type="primary"] ez-icon {
+.label__container ez-icon {
   --ez-icon--color: var(--ez-label-chip__label--icon--primary);
 }
 
-:host .label__container[data-color-type="primary"] ::slotted(ez-icon) {
+:host .label__container ::slotted(ez-icon) {
   --ez-icon--color: var(--ez-label-chip__label--icon--primary);
 }
 
-.label__container[data-color-type="primary"][data-color-state="default"] {
+.label__container[data-color-state="default"] {
   border-color: var(--ez-label-chip__label__container--border-color-strokes);
   background-color: var(--ez-label-chip__label__container--background-color);
   color: var(--ez-label-chip__label--text--primary);
 }
 
-.label__container[data-color-type="primary"][data-color-state="active"] {
+.label__container[data-color-state="active"] {
   border-color: var(--ez-label-chip__label__container--border-color-active);
   background-color: var(--ez-label-chip__label__container--default--background-color--active);
   color: var(--ez-label-chip__label__container--default--color--active);
 }
 
-.label__container[data-color-type="primary"]:focus {
+.label__container:focus {
   box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
 /*SECONDARY*/
+.label__container[data-color-type="secondary"] {
+  --ez-label-chip__label--icon--primary: var(--color--gray-300, #A4A5A7);
+  --ez-label-chip__label__container--border-color-strokes: var(--color--gray-200, #D2D2D3);
+  --ez-label-chip__label__container--background-color: var(--color--gray-70, #F7F7F8);
+  --ez-label-chip__label--text--primary: var(--color--ocean-green-1000, #00281D);
+  --ez-label-chip__label__container--border-color-active: var(--color--gray-200, #D2D2D3);
+  --ez-label-chip__label__container--default--background-color--active: var(--color--primary-300, #6BB8A3);
+  --ez-label-chip__label__container--default--color--active: var(--color--ocean-green-600, #008561);
+  --ez-label-chip__label__container--default--border-color--active: var(--color--ocean-green-600, #008561);
+}
+
+/*ERROR*/
+.label__container[data-color-type="error"] {
+  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--red-600, #BD0025);
+  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--red-700, #97001E);
+  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
+}
 
-.label__container[data-color-type="secondary"] ez-icon {
-  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+/*ERROR-LIGHT*/
+.label__container[data-color-type="error-light"] {
+  --ez-label-chip__label--icon--primary: var(--color--red-600, #BD0025);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--red-200, #F2CCD3);
+  --ez-label-chip__label--text--primary: var(--color--red-600, #BD0025);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--red-300, #E599A8);
+  --ez-label-chip__label__container--default--color--active: var(--color--red-600, #BD0025);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
 }
 
-:host .label__container[data-color-type="secondary"] ::slotted(ez-icon) {
-  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+
+/*WARNING*/
+.label__container[data-color-type="warning"] {
+  --ez-label-chip__label--icon--primary: var(--color--yellow-900, #604701);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--yellow-600, #EFB103);
+  --ez-label-chip__label--text--primary: var(--color--yellow-900, #604701);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--yellow-700, #BF8E02);
+  --ez-label-chip__label__container--default--color--active: var(--color--yellow-900, #604701);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
 }
 
-.label__container[data-color-type="secondary"][data-color-state="default"] {
-  border-color: var(--color--gray-200, #D2D2D3);
-  background-color: var(--color--gray-70);
-  color: var(--color--ocean-green-1000, #00281D);
+/*WARNING-LIGHT*/
+.label__container[data-color-type="warning-light"] {
+  --ez-label-chip__label--icon--primary: var(--color--yellow-600, #EFB103);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--yellow-200, #FDF6E4);
+  --ez-label-chip__label--text--primary: var(--color--yellow-600, #EFB103);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--yellow-300, #F6EB8A);
+  --ez-label-chip__label__container--default--color--active: var(--color--yellow-600, #EFB103);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
 }
 
-.label__container[data-color-type="secondary"][data-color-state="active"] {
-  border-color: var(--color--gray-200, #D2D2D3);
-  background-color: var(--color--primary-300, #f2faf8);
-  color: var(--color--primary, #f2faf8);
+/*SUCCESS*/
+.label__container[data-color-type="success"] {
+  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--green-600, #157A00);
+  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--green-700, #116200);
+  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
 }
 
-.label__container[data-color-type="secondary"]:focus {
-  color: var(--color--primary, #007a5a);
-  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--secondary--border-color--active);
+/*SUCCESS-LIGHT*/
+.label__container[data-color-type="success-light"] {
+  --ez-label-chip__label--icon--primary: var(--color--green-600, #157A00);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
+  --ez-label-chip__label__container--background-color: var(--color--green-200, #C8E6C9);
+  --ez-label-chip__label--text--primary: var(--color--green-600, #157A00);
+  --ez-label-chip__label__container--border-color-active: transparent;
+  --ez-label-chip__label__container--default--background-color--active: var(--color--green-300, #A5D6A7);
+  --ez-label-chip__label__container--default--color--active: var(--color--green-600, #157A00);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
 }
 
 /*DISABLED*/
-
 .label__container[data-color-state="disabled"] {
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  border-color: var(--ez-label-chip__label__container-color--disabled);
+  background-color: var(--ez-label-chip__label__container-color--disabled);
   color: var(--ez-label-chip__label__container--text--disabled);
   cursor: not-allowed;
   filter: none;
@@ -186,4 +236,9 @@
 
 .label__container[data-color-state="disabled"] ez-icon {
   --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+}
+
+
+:host .label__container[data-color-state="disabled"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
 }

package/dist/collection/components/ez-chip/ez-chip.js

@@ -37,11 +37,10 @@ export class EzChip {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick(event) {
+  handleClick() {
     if (!this.enabled) {
       return;
     }
-    event.stopPropagation();
     if (this.mode === "action") {
       return this.actionClick.emit();
     }
@@ -334,9 +333,13 @@ export class EzChip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
+          "original": "EzChipType",
+          "resolved": "\"error\" | \"error-light\" | \"primary\" | \"secondary\" | \"success\" | \"success-light\" | \"warning\" | \"warning-light\"",
+          "references": {
+            "EzChipType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -897,6 +897,21 @@ export class EzComboBox {
             }
           }
         }
+      }, {
+        "method": "ezVisibilityChange",
+        "name": "ezVisibilityChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de visibilidade do popover."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -168,7 +168,7 @@ export class EzDateInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', "data-element-id": this._elem.getAttribute("data-element-id") }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); } }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', "data-element-id": this._elem.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); } }))));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-grid/ez-grid.js

@@ -384,6 +384,7 @@ export class EzGrid {
   handlePageChange() {
     this.resetPaginationState();
     this._gridController.setFocusFirstRow();
+    this.ezPageChangedChanged.emit();
   }
   previousPage() {
     if (this.dataUnit) {
@@ -1214,6 +1215,21 @@ export class EzGrid {
             }
           }
         }
+      }, {
+        "method": "ezPageChangedChanged",
+        "name": "ezPageChangedChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido a p\u00E1gina atual \u00E9 alterada."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "ezColumnFilterChanged",
         "name": "ezColumnFilterChanged",