@sankhyalabs/ezui 1.1.71 → 1.1.74

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -1,54 +1,54 @@
 :host {
   /* dimensions */
   /*@doc Define a largura do componente.*/
-  --ta--width: 100%;
+  --text-area--width: 100%;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
-  --ta--border-radius: var(--border--radius-medium, 12px);
+  --text-area--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --ta--font-size: var(--text--medium, 14px);
+  --text-area--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --ta--font-family: var(--font-pattern, Arial);
+  --text-area--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --ta--font-weight: var(--text-weight--large, 500);
+  --text-area--font-weight: var(--text-weight--large, 500);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --ta--color: var(--title--primary, #000);
+  --text-area--color: var(--title--primary, #000);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --ta__input--background-color: var(--background--medium, #e0e0e0);
+  --text-area__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --ta__input--border: var(--border--medium, 2px solid);
+  --text-area__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --ta__input--border-color: var(--ta__input--background-color);
+  --text-area__input--border-color: var(--text-area__input--background-color);
   /*no modo normal usamos a borda com a mesma cor do bg*/
   /*@doc Define a cor da borda do input quando focado.*/
-  --ta__input--focus--border-color: var(--color--primary, #008561);
+  --text-area__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --ta__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --text-area__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/
-  --ta__input--disabled--color: var(--text--disable, #AFB6C0);
+  --text-area__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --ta__input--error--border-color: #CC2936;
+  --text-area__input--error--border-color: #CC2936;
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --ta__message_box--font-size: var(--text--small, 12px);
+  --text-area__message_box--font-size: var(--text--small, 12px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
-  --ta__message_box--info--color: var(--color--success, #22085d);
+  --text-area__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --ta__message_box--error--color: var(--color--error, #FF0000);
+  --text-area__message_box--error--color: var(--color--error, #FF0000);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
-  --ta__label--floating--top: 6px;
+  --text-area__label--floating--top: 6px;
   /*@doc Define o espaçamento superior do label.*/
-  --ta__label--padding-top: 12px;
+  --text-area__label--padding-top: 12px;
   /*@doc Define o espaçamento esquerdo do label.*/
-  --ta__label--padding-left: 14px;
+  --text-area__label--padding-left: 14px;
   /*@doc Define o espaçamento direito do label.*/
-  --ta__label--padding-right: 12px;
+  --text-area__label--padding-right: 12px;
 
   /***************
   host style  
@@ -58,7 +58,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--ta--width);
+  width: var(--text-area--width);
 }
 
 textarea {
@@ -68,9 +68,9 @@ textarea {
   margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
   font-weight: var(--text-weight--large, 600);
-  font-family: var(--ta--font-family);
-  font-size: var(--ta--font-size);
-  color: var(--ta--color);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  color: var(--text-area--color);
   padding: 0;
   background: none;
 }
@@ -83,7 +83,7 @@ textarea:focus {
 textarea:disabled {
   /*public*/
   background-color: transparent;
-  color: var(--ta__input--disabled--color);
+  color: var(--text-area__input--disabled--color);
 }
 
 .textarea {
@@ -94,19 +94,19 @@ textarea:disabled {
   padding-right: var(--space--extra-small);
 
   /*public*/
-  border-radius: var(--ta--border-radius);
-  border: var(--ta__input--border);
-  border-color: var(--ta__input--border-color);
-  background-color: var(--ta__input--background-color);
+  border-radius: var(--text-area--border-radius);
+  border: var(--text-area__input--border);
+  border-color: var(--text-area__input--border-color);
+  background-color: var(--text-area__input--background-color);
 }
 
 .textarea--focus {
-  border-color: var(--ta__input--focus--border-color);
+  border-color: var(--text-area__input--focus--border-color);
 }
 
 .textarea.hasError {
-  color: var(--ta--color);
-  border-color: var(--ta__input--error--border-color);
+  color: var(--text-area--color);
+  border-color: var(--text-area__input--error--border-color);
 }
 
 .message-box {
@@ -120,14 +120,14 @@ textarea:disabled {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--ta--font-family);
-  font-size: var(--ta__message_box--font-size);
-  color: var(--ta__message_box--info--color);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area__message_box--font-size);
+  color: var(--text-area__message_box--info--color);
 }
 
 .hasError {
   /*public*/
-  color: var(--ta__message_box--error--color);
+  color: var(--text-area__message_box--error--color);
 }
 
 .textarea__label {
@@ -140,26 +140,26 @@ textarea:disabled {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--ta__label--padding-right));
-  left: var(--ta--space--medium);
+  width: calc(100% - var(--text-area__label--padding-right));
+  left: var(--text-area--space--medium);
 
   /*public*/
-  font-family: var(--ta--font-family);
-  font-size: var(--ta--font-size);
-  font-weight: var(--ta--font-weight);
-  color: var(--ta--color);
-  top: var(--ta__label--padding-top);
-  left: var(--ta__label--padding-left);
-  padding-right: var(--ta__label--padding-right);
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+  top: var(--text-area__label--padding-top);
+  left: var(--text-area__label--padding-left);
+  padding-right: var(--text-area__label--padding-right);
 }
 
 .textarea__label--floated {
-  font-family: var(--ta--font-family);
+  font-family: var(--text-area--font-family);
   font-size: var(--text--extra-small);
   color: var(--text--primary);
-  top: var(--ta__label--floating--top);
+  top: var(--text-area__label--floating--top);
 }
 
 .textarea__label--disabled {
-  color: var(--ta__input--disabled--color);
+  color: var(--text-area__input--disabled--color);
 }

package/dist/collection/components/ez-time-input/ez-time-input.css

@@ -1,53 +1,4 @@
 :host {
-  /* dimensions */
-  /*@doc Define a altura do componente.*/
-  --eztime--height: 42px;
-  /*@doc Define a largura do componente.*/
-  --eztime--width: 100%;
-  /*@doc Define a largura do slot que contém o ícone.*/
-  --eztime__icon--width: 48px;
-
-  /* general */
-  /*@doc Define o raio da borda do input do componente.*/
-  --eztime--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --eztime--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --eztime--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte do label do componente.*/
-  --eztime--font-weight: var(--text-weight--large, 500);
-  /*@doc Define o espaçamento do label.*/
-  --eztime--space--medium: var(--space--medium, 6px);
-
-  /* input */
-  /*@doc Define a cor de fundo do input.*/
-  --eztime__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define o estilo da borda do input.*/
-  --eztime__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
-  --eztime__input--border-color: var(--eztime__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
-  /*@doc Define a cor da borda do input quando focado.*/
-  --eztime__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --eztime__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor do texto do input.*/
-  --eztime__input--disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --eztime__input--error--border-color: #CC2936;
-
-  /* label */
-  /*@doc Define a cor do texto do label.*/
-  --eztime__label--color: var(--title--primary, #919191);
-
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --eztime__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --eztime__message_box--info--color: var(--color--success, #22085d);
-  /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --eztime__message_box--error--color: var(--color--error, #FF0000);
-
   /***************
      host style  
   ***************/
@@ -55,124 +6,5 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  /*public*/
-  width: var(--eztime--width);
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-input {
-  /*private*/
   width: 100%;
-  box-sizing: border-box;
-  padding: var(--space--medium, 6px);
-  font-weight: var(--text-weight--large, 600);
-  /*public*/
-  height: var(--eztime--height);
-  border-radius: var(--eztime--border-radius);
-  font-family: var(--eztime--font-family);
-  font-size: var(--eztime--font-size);
-  border: var(--eztime__input--border);
-  border-color: var(--eztime__input--border-color);
-  background-color: var(--eztime__input--background-color);
-}
-
-input:disabled {
-  /*public*/
-  background-color: var(--eztime__input--disabled--background-color);
-  color: var(--eztime__input--disabled--color);
-}
-
-input:focus {
-  /*private*/
-  outline: none;
-  /*public*/
-  border-color: var(--eztime__input--focus--border-color);
-}
-
-input.icon--left {
-  padding-left: var(--eztime__icon--width);
-}
-
-input.icon--right {
-  padding-right: var(--eztime__icon--width);
-}
-
-input::placeholder {
-  color: var(--eztime__placeholder--color);
-  font-weight: var(--eztime__placeholder--font-weight);
-}
-
-input:disabled::placeholder {
-  color: var(--eztime__placeholder--disabled--color);
-}
-
-input.hasError {
-  color: inherit;
-  border-color: var(--eztime__input--error--border-color);
-}
-
-input.text--right {
-  text-align: right;
-}
-
-.message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 2px;
-  line-height: 12px;
-  /*public*/
-  font-family: var(--eztime--font-family);
-  font-size: var(--eztime__message_box--font-size);
-  color: var(--eztime__message_box--info--color);
-}
-
-.hasError {
-  /*public*/
-  color: var(--eztime__message_box--error--color);
-}
-
-.input__label {
-  /*public*/
-  font-size: var(--eztime--font-size);
-  font-weight: var(--eztime--font-weight);
-  position: absolute;
-  color: var(it__label--color);
-  top: var(--eztime--space--medium);
-  font-family: var(--eztime--font-family);
-  -webkit-transition: font-size .3s, top .3s;
-  transition: font-size .3s, top .3s;
-  z-index: var(--visible);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  left: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input__label--floated {
-  font-family: var(--eztime--font-family);
-  font-size: var(--text--extra-small);
-  top: var(--space--small);
-  color: var(--text--primary);
-}
-
-.input__label--left {
-  /*public*/
-  left: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input__label--right {
-  /*public*/
-  padding-right: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input--with--label {
-  /*public*/
-  padding-bottom: 0;
 }

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

@@ -1,5 +1,6 @@
-import { Component, Prop, h, Watch, Host, Method } from '@stencil/core';
-import { TimeFormatter, MaskFormatter, NumberUtils } from '@sankhyalabs/core';
+import { Element, Component, Prop, h, Watch, Host, Method, getAssetPath } from "@stencil/core";
+import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzTimeInput {
   constructor() {
     /**
@@ -11,17 +12,6 @@ export class EzTimeInput {
     */
     this.showSeconds = false;
   }
-  showError() {
-    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
   prepareMask() {
     if (this.showSeconds) {
       if (this._maskFormatter == undefined) {
@@ -40,23 +30,6 @@ export class EzTimeInput {
       }
     }
   }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!this._inputElem.classList.contains("input--with--label")) {
-        this._inputElem.classList.add("input--with--label");
-      }
-      if (this.viewValue && this.viewValue.toString().length > 0) {
-        if (!this._labelElem.classList.contains("input__label--floated")) {
-          this._labelElem.classList.add("input__label--floated");
-        }
-      }
-      else {
-        if (this._labelElem.classList.contains("input__label--floated")) {
-          this._labelElem.classList.remove("input__label--floated");
-        }
-      }
-    }
-  }
   onValueChanged() {
     if (this.value === NaN) {
       this.value = undefined;
@@ -79,12 +52,6 @@ export class EzTimeInput {
     this._inputElem.blur();
   }
   //---------------------------------------------
-  // Test Methods
-  //---------------------------------------------
-  setInputElemnt(input) {
-    this._iconElement = input;
-  }
-  //---------------------------------------------
   // Event handlers
   //---------------------------------------------
   handleFocusout() {
@@ -94,7 +61,6 @@ export class EzTimeInput {
       this.clearField();
       this.errorMessage = "Favor inserir um horário válido.";
     }
-    this.adjustFloatingLabel();
   }
   prepareValue(value) {
     try {
@@ -112,40 +78,12 @@ export class EzTimeInput {
     this.viewValue = this._inputElem.value;
     this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
   }
-  adjustIconStyle() {
-    if (this._iconElement) {
-      this._iconElement.style.position = "absolute";
-      this._iconElement.style.display = "flex";
-      this._iconElement.style.alignItems = "center";
-      this._iconElement.style.justifyContent = "center";
-      this._iconElement.style.overflow = "hidden";
-      this._iconElement.style.top = "0px";
-      this._iconElement.style.width = "var(--eztime__icon--width)";
-      this._iconElement.style.height = "var(--eztime--height)";
-      this._iconElement.style.left = "0px";
-      this._iconElement.style.borderRadius = "var(--eztime--border-radius) 0 0 var(--eztime--border-radius)";
-      this._inputElem.classList.add('icon--left');
-      if (this._labelElem) {
-        this._labelElem.classList.add("input__label--left");
-      }
-    }
-    this.showError();
-  }
-  doFocus() {
-    if (this.label && this._labelElem) {
-      if (!this._labelElem.classList.contains("input__label--floated")) {
-        this._labelElem.classList.add("input__label--floated");
-      }
-    }
-  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
     this.onValueChanged();
-    this.adjustIconStyle();
-    this.adjustFloatingLabel();
-    this.showError();
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
   }
   componentWillLoad() {
     this.prepareMask();
@@ -158,12 +96,8 @@ export class EzTimeInput {
   }
   render() {
     return (h(Host, null,
-      h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }),
-      this.label ?
-        h("label", { onClick: () => this._inputElem.focus(), class: this.value ? "input__label input__label--floated" : "input__label", ref: (el) => this._labelElem = el, title: this.label }, this.label)
-        : null,
-      h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
+      h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
+        h("ez-icon", { slot: "leftIcon", href: getAssetPath("./assets/actions-sprite.svg") + "#timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -173,6 +107,7 @@ export class EzTimeInput {
   static get styleUrls() { return {
     "$": ["ez-time-input.css"]
   }; }
+  static get assetsDirs() { return ["../assets"]; }
   static get properties() { return {
     "label": {
       "type": "string",
@@ -313,10 +248,8 @@ export class EzTimeInput {
       }
     }
   }; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
-      "propName": "errorMessage",
-      "methodName": "showError"
-    }, {
       "propName": "showSeconds",
       "methodName": "prepareMask"
     }, {

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

@@ -2,28 +2,28 @@
 
   /* Buttons */
   /*@doc Contém o ícone de fechamento do toast.*/
-  --toast__btn__close__image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg%22%3E<path d="M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z"/></svg>');
+  --ez-toast__btn__close__image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg%22%3E<path d="M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z"/></svg>');
 
   /* Container */
   /*@doc Define a camada em que o container será exibido.*/
-  --toast__container-z-index: var(--more-visible, 2);
+  --ez-toast__container-z-index: var(--more-visible, 2);
   /*@doc Define a cor de fundo do container.*/
-  --toast__container--background-color: var(--color--secondary, #383c45);
+  --ez-toast__container--background-color: var(--color--secondary, #383c45);
 
   /* Icon */
   /*@doc Define o espaçamento à esquerda do ícone.*/
-  --toast__icon--padding-left: var(--space--small, 6px);
+  --ez-toast__icon--padding-left: var(--space--small, 6px);
 }
 
 .toast__container {
   position: fixed;
   display: flex;
   bottom: 100px;
-  z-index: var(--toast__container-z-index);
+  z-index: var(--ez-toast__container-z-index);
   left: 100px;
   width: 30%;
   box-sizing: border-box;
-  background-color: var(--toast__container--background-color);
+  background-color: var(--ez-toast__container--background-color);
   border-radius: 6px;
   align-items: center;
   padding: 12px;
@@ -42,7 +42,7 @@
 }
 
 .message__conteiner--icon {
-  padding-left: var(--toast__icon--padding-left);
+  padding-left: var(--ez-toast__icon--padding-left);
   width: 80%;
 }
 
@@ -63,8 +63,8 @@
   background-color: #FFFFFF;
   width: 12px;
   height: 12px;
-  -webkit-mask-image: var(--toast__btn__close__image);
-  mask-image: var(--toast__btn__close__image);
+  -webkit-mask-image: var(--ez-toast__btn__close__image);
+  mask-image: var(--ez-toast__btn__close__image);
 }
 
 .toast__container--oppened {

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

@@ -10,6 +10,9 @@ export class EzToast {
     */
     this.useIcon = false;
   }
+  /**
+  * Exibe o componente na tela.
+  */
   async show() {
     this.container.classList.add("toast__container--oppened");
     this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
@@ -105,7 +108,7 @@ export class EzToast {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Exibe o componente na tela.",
         "tags": []
       }
     }

package/dist/collection/utils/CSSVarsUtils.js

@@ -0,0 +1,14 @@
+export default class CSSVarsUtils {
+  static applyVarsTextInput(host, textInput) {
+    if (textInput) {
+      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--background-color');
+      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--border-color');
+    }
+  }
+  static applyIfExists(host, textInput, varName) {
+    const prop = getComputedStyle(host).getPropertyValue(varName);
+    if (prop) {
+      textInput.style.setProperty(varName, prop);
+    }
+  }
+}

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,12 @@ export const EzLabelChip: {
   new (): EzLabelChip;
 };
 
+interface EzList extends Components.EzList, HTMLElement {}
+export const EzList: {
+  prototype: EzList;
+  new (): EzList;
+};
+
 interface EzModal extends Components.EzModal, HTMLElement {}
 export const EzModal: {
   prototype: EzModal;