@sankhyalabs/ezui 1.1.73 → 1.1.76

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

@@ -2,56 +2,56 @@
 
   /* dimensions */
   /*@doc Define a largura do componente.*/
-  --button--min-width: 100px;
+  --ez-button--min-width: 100px;
 
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --button--height: 42px;
+  --ez-button--height: 42px;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --button__icon--width: 18px;
+  --ez-button__icon--width: 18px;
   /*@doc Define o espaçamento entre o ícone e o label.*/
-  --button__inline__icon--padding: 12px;
+  --ez-button__inline__icon--padding: 12px;
 
   /*@doc Define o espaçamento superior ao label.*/
-  --button--padding-top: var(--space--medium, 12px);
+  --ez-button--padding-top: var(--space--medium, 12px);
   /*@doc Define o espaçamento inferior ao label.*/
-  --button--padding-bottom: var(--space--medium, 12px);
+  --ez-button--padding-bottom: var(--space--medium, 12px);
   /*@doc Define o espaçamento à direita do label.*/
-  --button--padding-right: var(--space--large, 24px);
+  --ez-button--padding-right: var(--space--large, 24px);
   /*@doc Define o espaçamento à esquerda do label.*/
-  --button--padding-left: var(--space--large, 24px);
+  --ez-button--padding-left: var(--space--large, 24px);
 
   /* general */
   /*@doc Define a cor do label.*/
-  --button--color: var(--text--primary, #FFF);
+  --ez-button--color: var(--text--primary, #FFF);
   /*@doc Define o tamanho do label.*/
-  --button--font-size: var(--text--medium, 14px);
+  --ez-button--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --button--font-family: var(--font-pattern, Arial);
+  --ez-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --button--font-weight: var(--text-weight--large);
+  --ez-button--font-weight: var(--text-weight--large);
   /*@doc Define a cor de fundo do botão.*/
-  --button--background-color: var(--background--medium, #c0c0c0);
+  --ez-button--background-color: var(--background--medium, #c0c0c0);
   /*@doc Define o raio da borda do botão.*/
-  --button--border-radius: var(--border--radius-large, 12px);
+  --ez-button--border-radius: var(--border--radius-large, 12px);
   /*@doc Define o estilo da borda do botão.*/
-  --button--border: none;
+  --ez-button--border: none;
 
   /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --button--hover--background-color: var(--background--strong, var(--button--background-color));
+  --ez-button--hover--background-color: var(--background--strong, var(--ez-button--background-color));
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
-  --button--disabled-color: var(--text--disable);
+  --ez-button--disabled-color: var(--text--disable);
   /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-  --button--disabled--background-color: var(--color--disable-secondary);
+  --ez-button--disabled--background-color: var(--color--disable-secondary);
 
   /*@doc Define o estido da borda quando o botão está selecionado.*/
-  --button--focus--border: var(--button--border);
+  --ez-button--focus--border: var(--ez-button--border);
   /*@doc Define a sombra do botão quando selecionado.*/
-  --button--focus--box-shadow: none;
+  --ez-button--focus--box-shadow: none;
 
   /*@doc Define a cor do texto do botão no modo link.*/
-  --button--link-color: var(--title--primary, '#C0C0C0');
+  --ez-button--link-color: var(--title--primary, '#C0C0C0');
 }
 
 ez-icon {
@@ -68,35 +68,35 @@ button {
   transition: background-color 0.2s linear;
 
   /*public*/
-  min-width: var(--button--min-width);
-  height: var(--button--height);
-  font-family: var(--button--font-family);
-  font-size: var(--button--font-size);
-  font-weight: var(--button--font-weight);
-  padding: var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);
-  border-radius: var(--button--border-radius);
-
-  background-color: var(--button--background-color);
-  color: var(--button--color);
-  fill: var(--button--color);
-  border: var(--button--border);
+  min-width: var(--ez-button--min-width);
+  height: var(--ez-button--height);
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  padding: var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);
+  border-radius: var(--ez-button--border-radius);
+
+  background-color: var(--ez-button--background-color);
+  color: var(--ez-button--color);
+  fill: var(--ez-button--color);
+  border: var(--ez-button--border);
 }
 
 button:hover {
-  background-color: var(--button--hover--background-color);
+  background-color: var(--ez-button--hover--background-color);
 }
 
 button:focus {
   /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
   outline: none;
-  border: var(--button--focus--border);
-  box-shadow: var(--button--focus--box-shadow);
+  border: var(--ez-button--focus--border);
+  box-shadow: var(--ez-button--focus--box-shadow);
 }
 
 button:disabled {
-  background-color: var(--button--disabled--background-color);
-  color: var(--button--disabled-color);
-  fill: var(--button--disabled-color);
+  background-color: var(--ez-button--disabled--background-color);
+  color: var(--ez-button--disabled-color);
+  fill: var(--ez-button--disabled-color);
   border: none;
   cursor: no-drop;
 }
@@ -108,12 +108,31 @@ button.icon {
   padding: 0px;
 }
 
+.label-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--ez-button--color);
+}
+
+.label-icon label {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+}
+
+
 a {
   /*private*/
-  font-family: var(--button--font-family);
-  font-size: var(--button--font-size);
-  font-weight: var(--button--font-weight);
-  color: var(--button--link-color);
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  color: var(--ez-button--link-color);
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -16,10 +16,10 @@ export class EzButton {
     if (this.mode == "link") {
       content.style.display = "inline";
       if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--button__inline__icon--padding)";
+        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
       }
       else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--button__inline__icon--padding)";
+        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
       }
     }
     else {
@@ -32,6 +32,13 @@ export class EzButton {
         h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
             evt.stopPropagation(); } })));
     }
+    else if (this.mode == "label-icon") {
+      return (h("div", { class: "label-icon" },
+        h("button", { class: "icon", type: "button", disabled: !this.enabled },
+          h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
+              evt.stopPropagation(); } })),
+        h("label", { title: this.label }, this.label)));
+    }
     else if (this.mode == "link") {
       return (h("a", null,
         h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),

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

@@ -1,66 +1,66 @@
 :host {
   /*@doc Define a família da fonte do componente.*/
-  --cal--font-family: var(--font-pattern, Arial);
+  --ez-calendar--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor dos textos dentro do componente.*/
-  --cal--color: var(--title--primary, #626e82);
+  --ez-calendar--color: var(--title--primary, #626e82);
   /*@doc Define a sombra dos textos dentro do componente.*/
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
 
   /* cal__body */
   /*@doc Define a cor de fundo do corpo do calendário.*/
-  --cal__body--background-color: var(--background--xlight, #FFF);
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
   /*@doc Define o espaçamento do corpo do calendário.*/
-  --cal__body--padding: var(--space--medium, 12px);
+  --ez-calendar__body--padding: var(--space--medium, 12px);
   /*@doc Define o raio da borda do corpo do calendário.*/
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define a sombra do corpo do calendário.*/
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
 
   /* cal__header */
   /*@doc Define a espessura da borda inferior do header.*/
-  --cal__header-line--stroke: 2px;
+  --ez-calendar__header-line--stroke: 2px;
   /*@doc Define a cor da borda inferior do header.*/
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
 
   /* nav buttons */
   /*@doc Define a cor do ícone de navegação.*/
-  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
   /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
-  --cal__nav-btn--hover--fill: var(--color--primary, #350404);
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
   /*@doc Define a largura do ícone de navegação.*/
-  --cal__nav-btn--width: 10px;
+  --ez-calendar__nav-btn--width: 10px;
   /*@doc Define a altura do ícone de navegação.*/
-  --cal__nav-btn--height: 16px;
+  --ez-calendar__nav-btn--height: 16px;
   /*@doc Contém a imagem do ícone de navegação à esquerda.*/
-  --cal__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
   /*@doc Contém a imagem do ícone de navegação à direita.*/
-  --cal__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
 
   /* cell */
   /*@doc Define o espaçamento vertical entre as células.*/
-  --cal__cell--margin: 0px var(--space--small, 12px);
+  --ez-calendar__cell--margin: 0px var(--space--small, 12px);
   /*@doc Define a largura das células.*/
-  --cal__cell--width: var(--space--large, 24px);
+  --ez-calendar__cell--width: var(--space--large, 24px);
   /*@doc Define o espaçamento horizontal entre as células.*/
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --ez-calendar__cell--padding: var(--space--extra-small, 3px) 0px;
   /*@doc Define o raio da borda das células.*/
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--over--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor de fundo das células selecionadas.*/
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
   /*@doc Define a cor do texto da célula selecionada.*/
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
 
   /* btn today */
   /*@doc Define a cor do texto do botão "Hoje".*/
-  --cal__btn-today--color: var(--color--primary);
+  --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define o raio da borda do botão "Hoje".*/
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
   /***************
      host style  
@@ -78,10 +78,10 @@
   flex-direction: column;
 
   /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
+  background-color: var(--ez-calendar__body--background-color);
+  padding: var(--ez-calendar__body--padding);
+  border-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
 }
 
 .calendar__header {
@@ -92,10 +92,10 @@
   margin: var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
 }
 
 .calendar__btn-next, .calendar__btn-previous {
@@ -113,27 +113,27 @@
   display: flex;
 
   /*public*/
-  background-color: var(--cal__nav-btn--fill);
+  background-color: var(--ez-calendar__nav-btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
 }
 
 .calendar__btn-previous::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--previous-image);
-  mask-image: var(--cal__nav-btn--previous-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
 }
 
 .calendar__btn-next::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--next-image);
-  mask-image: var(--cal__nav-btn--next-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
 }
 
 .calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
   /*public*/
-  background-color: var(--cal__nav-btn--hover--fill);
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
 }
 
 .calendar__lbl-month {
@@ -142,9 +142,9 @@
   font-size: var(--title--medium, 16px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__line {
@@ -163,24 +163,24 @@
   font-size: var(--text--small, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
 }
 
 
 .calendar__cell:hover {
   /*public*/
-  background-color: var(--cal__cell--over--background-color);
+  background-color: var(--ez-calendar__cell--over--background-color);
 }
 
 .calendar__cell--secondary {
   /*public*/
-  color: var(--cal__cell--outset--color);
+  color: var(--ez-calendar__cell--outset--color);
 }
 
 .calendar__cell--unselectable:hover {
@@ -195,15 +195,15 @@
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__cell--selected, .calendar__cell--selected:hover {
   /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
 }
 
 .calendar__body {
@@ -227,13 +227,13 @@
   padding: var(--space--extra-small, 6px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  text-shadow: var(--ez-calendar--text-shadow);
+  color: var(--ez-calendar__btn-today--color);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
 }
 
 .calendar__btn-today:hover {
   /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
 }

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

@@ -1,11 +1,11 @@
-import { FloatingManager } from '@sankhyalabs/core';
-import { Component, forceUpdate, h, Prop, Method, Event, Watch } from '@stencil/core';
+import { FloatingManager } from "@sankhyalabs/core";
+import { Component, forceUpdate, h, Prop, Method, Event, Watch } from "@stencil/core";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = 'Hoje';
-    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    this._todayLabel = "Hoje";
+    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
+    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     /**
      * A data selecionada no calendário
      */
@@ -26,18 +26,21 @@ export class EzCalendar {
     if (this.floating) {
       this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
       window.requestAnimationFrame(() => {
-        this._box.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
     }
   }
+  /**
+  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
+  */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
     const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
     if (availableBottom) {
-      this.show(topOffset + 'px', undefined, 'unset');
+      this.show(topOffset + "px", undefined, "unset");
     }
     else {
-      this.show('unset', undefined, bottomOffset + 'px');
+      this.show("unset", undefined, bottomOffset + "px");
     }
   }
   /**
@@ -223,7 +226,7 @@ export class EzCalendar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo necess\u00E1rio para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espa\u00E7o.",
         "tags": []
       }
     },

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -1,39 +1,39 @@
 :host {
   /*@doc Define a altura do componente quando colapsado.*/
-  --collapsible-box--height: 42px;
+  --ez-collapsible-box--height: 42px;
 
   /*@doc Define o tamanho da fonte do header.*/
-  --collapsible-box--font-size: var(--title--medium, 14px);
+  --ez-collapsible-box--font-size: var(--title--medium, 14px);
   /*@doc Define a família da fonte do header.*/
-  --collapsible-box--font-family: var(--font-pattern, Arial);
+  --ez-collapsible-box--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do header.*/
-  --collapsible-box--font-weight: var(--text-weight--large, 600);
+  --ez-collapsible-box--font-weight: var(--text-weight--large, 600);
   /*@doc Define a cor da fonte do header.*/
-  --collapsible-box--color: var(--title--primary);
+  --ez-collapsible-box--color: var(--title--primary);
 
   /*@doc Contém a imagem do chevron no tamanho xsmall.*/
-  --collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
+  --ez-collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho small.*/
-  --collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
+  --ez-collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho medium.*/
-  --collapsible-box__btn--image--medium: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+  --ez-collapsible-box__btn--image--medium: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho large.*/
-  --collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
+  --ez-collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho xlarge.*/
-  --collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
+  --ez-collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
 
   /*@doc Define a cor do chevron.*/
-  --collapsible-box__btn--fill: var(--collapsible-box--color);
+  --ez-collapsible-box__btn--fill: var(--ez-collapsible-box--color);
 
   /*@doc Define a largura do botão que contém o chevron.*/
-  --collapsible-box__btn--width: 10px;
+  --ez-collapsible-box__btn--width: 10px;
 
   /*@doc Define a altura do botão que contém o chevron.*/
-  --collapsible-box__btn--height: 16px;
+  --ez-collapsible-box__btn--height: 16px;
 
   /***************
      host style  
@@ -60,10 +60,10 @@
   width: 100%;
 
   /*public*/
-  font-family: var(--collapsible-box--font-family);
-  font-size: var(--collapsible-box--font-size);
-  font-weight: var(--collapsible-box--font-weight);
-  color: var(--collapsible-box--color);
+  font-family: var(--ez-collapsible-box--font-family);
+  font-size: var(--ez-collapsible-box--font-size);
+  font-weight: var(--ez-collapsible-box--font-weight);
+  color: var(--ez-collapsible-box--color);
 }
 
 .collapsible-box__label--icon-right {
@@ -73,10 +73,10 @@
   text-overflow: ellipsis;
 
   /*public*/
-  font-family: var(--collapsible-box--font-family);
-  font-size: var(--collapsible-box--font-size);
-  font-weight: var(--collapsible-box--font-weight);
-  color: var(--collapsible-box--color);
+  font-family: var(--ez-collapsible-box--font-family);
+  font-size: var(--ez-collapsible-box--font-size);
+  font-weight: var(--ez-collapsible-box--font-weight);
+  color: var(--ez-collapsible-box--color);
 }
 
 .collapsible-box__btn {
@@ -94,10 +94,10 @@
   display: flex;
 
   /*public*/
-  background-color: var(--collapsible-box__btn--fill);
+  background-color: var(--ez-collapsible-box__btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos mascara.*/
-  width: var(--collapsible-box__btn--width);
-  height: var(--collapsible-box__btn--height);
+  width: var(--ez-collapsible-box__btn--width);
+  height: var(--ez-collapsible-box__btn--height);
   transition: transform var(--transition);
   transform: rotate(90deg);
 }
@@ -105,36 +105,36 @@
 .collapsible-box__btn--xsmall::after {
   width: 7.5px;
   height: 12px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--xsmall);
-  mask-image: var(--collapsible-box__btn--image--xsmall);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xsmall);
+  mask-image: var(--ez-collapsible-box__btn--image--xsmall);
 }
 
 .collapsible-box__btn--small::after {
   width: 8.68px;
   height: 14px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--small);
-  mask-image: var(--collapsible-box__btn--image--small);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--small);
+  mask-image: var(--ez-collapsible-box__btn--image--small);
 }
 
 .collapsible-box__btn--medium::after {
   width: 10px;
   height: 16px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--medium);
-  mask-image: var(--collapsible-box__btn--image--medium);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--medium);
+  mask-image: var(--ez-collapsible-box__btn--image--medium);
 }
 
 .collapsible-box__btn--large::after {
   width: 11.25px;
   height: 18px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--large);
-  mask-image: var(--collapsible-box__btn--image--large);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--large);
+  mask-image: var(--ez-collapsible-box__btn--image--large);
 }
 
 .collapsible-box__btn--xlarge::after {
   width: 12.5px;
   height: 20px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--xlarge);
-  mask-image: var(--collapsible-box__btn--image--xlarge);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xlarge);
+  mask-image: var(--ez-collapsible-box__btn--image--xlarge);
 }
 
 .collapsible-box__btn--collapsed::after {