@sankhyalabs/ezui 1.1.160 → 1.1.161

package/dist/collection/components/ez-grid/subcomponents/{gridconfig/grid-config.css → ez-grid-config/ez-grid-config.css}

@@ -1,5 +1,4 @@
 :host {
-
     /*@doc Define o espaçamento utilizado no rodapé do componente.*/
     --ez-grid-config__footer--padding-top: var(--space--medium, 12px);
 
@@ -15,8 +14,10 @@
     /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
     --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o peso do texto utilizado para o titulo do componente.*/
     --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
@@ -26,19 +27,22 @@
     --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
 
     /*@doc Define a cor da barra de rolagem do componente.*/
-    --ez-grid-config__main__scrollbar--background-color: var(--text--primary, #626e82);
+    --ez-grid-config__scrollbar--background-color: var(--text--primary, #626e82);
 
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --ez-grid-config__main__scrollbar--border-radius: var(--border--radius-medium, 12px);
+    --ez-grid-config__scrollbar--border-radius: var(--border--radius-medium, 12px);
 
     /* @doc Define o estilo do texto do grupo da lista. */
-    --ez-grid__group--font-family: var(--font-pattern, "Sora");
+    --ez-grid-config__group--font-family: var(--font-pattern, "Sora");
+
     /* @doc Define o tamanho do texto do grupo da lista. */
-    --ez-grid__group--font-size: var(--text--medium, 14px);
+    --ez-grid-config__group--font-size: var(--text--medium, 14px);
+
     /* @doc Define o peso do texto do grupo da lista. */
-    --ez-grid__group--font-weight: var(--text-weight--large, 600);
+    --ez-grid-config__group--font-weight: var(--text-weight--large, 600);
+
     /* @doc Define o espaçamento inferior do grupo da lista. */
-    --ez-grid__group--padding-bottom: var(--space-small, 6px);
+    --ez-grid-config__group--padding-bottom: var(--space-small, 6px);
 
     display: grid;
     grid-template-rows: auto 1fr auto;
@@ -46,6 +50,13 @@
     width: 100%;
 }
 
+@media screen and (min-width: 480px) {
+    :host {
+        width: 359px;
+        max-width: 359px;
+    }
+}
+
 .padding-right--medium {
     padding-right: var(--space--medium);
 }
@@ -53,15 +64,18 @@
 ez-list {
     height: 100%;
 }
-.heigth-calc{
+
+.height-calc {
     max-height: calc(100% - 24px);
 }
 
 .grid-config__footer {
-    padding-top: var(--ez-grid-config__footer--padding-top);
     display: flex;
     justify-content: flex-end;
     width: 100%;
+
+    /*public*/
+    padding-top: var(--ez-grid-config__footer--padding-top);
 }
 
 .hidden {
@@ -69,15 +83,19 @@ ez-list {
 }
 
 .grid-config__main {
-    padding-right: var(--ez-grid-config__main--padding-right);
     overflow-y: auto;
+
+    /*public*/
+    padding-right: var(--ez-grid-config__main--padding-right);
 }
 
 .tabselector-container {
+    /*public*/
     padding: var(--ez-grid-config__tabselector-container--padding) 0;
 }
 
 .button-close {
+    /*public*/
     padding-left: var(--ez-grid-config__button-close--padding-left);
 }
 
@@ -85,10 +103,11 @@ ez-list {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 359px;
+    width: 100%;
 }
 
 .subtitle {
+    /*public*/
     font-family: var(--ez-grid-config__subtitle--font-family);
     font-size: var(--ez-grid-config__subtitle--font-size);
     color: var(--text--primary);
@@ -97,13 +116,15 @@ ez-list {
 .title {
     display: flex;
     margin: 0;
-    font-family: var(--ez-grid-config__title--font-family);
-    font-size: var(--title--large);
-    font-weight: var(--ez-grid-config__title--font-weight);
     line-height: normal;
     letter-spacing: 0em;
     text-align: left;
+
+    /*public*/
     color: var(--title--primary);
+    font-family: var(--ez-grid-config__title--font-family);
+    font-size: var(--title--large);
+    font-weight: var(--ez-grid-config__title--font-weight);
 }
 
 .grid-config__main::-webkit-scrollbar-track {
@@ -111,19 +132,24 @@ ez-list {
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
-    background-color: var(--ez-grid-config__main__scrollbar--background-color);
-    border-radius: var(--ez-grid-config__main__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--ez-grid-config__scrollbar--background-color);
+    border-radius: var(--ez-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar {
     background-color: #f0f2f5;
+
+    /*public*/
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
 }
+
 .group-name {
-    font-family: var(--ez-grid__group--font-family);
-    font-size: var(--ez-grid__group--font-size);
-    font-weight: var(--ez-grid__group--font-weight);
-    padding-bottom: var(--ez-grid__group--padding-bottom);
+    /*public*/
+    font-family: var(--ez-grid-config__group--font-family);
+    font-size: var(--ez-grid-config__group--font-size);
+    font-weight: var(--ez-grid-config__group--font-weight);
+    padding-bottom: var(--ez-grid-config__group--padding-bottom);
 }

package/dist/collection/components/ez-grid/subcomponents/{gridconfig/grid-config.js → ez-grid-config/ez-grid-config.js}

@@ -1,7 +1,7 @@
 import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 import ApplicationUtils from '../../../../utils/ApplicationUtils';
-export class GridConfig {
+export class EzGridConfig {
   constructor() {
     this._orderListItems = [];
     this._orderPriorityList = [];
@@ -82,7 +82,7 @@ export class GridConfig {
       selectedOption = item.ascending == true ? 'asc' : 'desc';
     }
     return (h("div", null,
-      h("select-box", { selectedOption: selectedOption, key: 'select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
+      h("ez-select-box", { selectedOption: selectedOption, key: 'ez-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -435,18 +435,18 @@ export class GridConfig {
       h("div", { class: "grid-config__main" },
         h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
         h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"),
-        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
+        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
       h("div", { class: "grid-config__footer" },
         h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
         h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
   }
-  static get is() { return "grid-config"; }
+  static get is() { return "ez-grid-config"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
-    "$": ["grid-config.css"]
+    "$": ["ez-grid-config.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["grid-config.css"]
+    "$": ["ez-grid-config.css"]
   }; }
   static get assetsDirs() { return ["../assets"]; }
   static get properties() { return {
@@ -495,10 +495,10 @@ export class GridConfig {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "../../controller/EzGridController"
           }
@@ -523,10 +523,10 @@ export class GridConfig {
         "text": ""
       },
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "../../controller/EzGridController"
           }

package/dist/collection/components/ez-grid/subcomponents/{select-box/select-box.css → ez-select-box/ez-select-box.css}

@@ -1,10 +1,9 @@
-
-ez-combo-box{
+ez-combo-box {
     width: 100px;
 }
 
-.grid-config-combo{
+.grid-config-combo {
     --ez-text-input--height: 28px;
     --ez-text-input__input--background-color: #fff;
     --ez-text-input__input--border-color: #dce0e8;
-}
+}

package/dist/collection/components/ez-grid/subcomponents/{select-box/select-box.js → ez-select-box/ez-select-box.js}

@@ -9,13 +9,13 @@ export class SelectBox {
       h("option", { value: "asc" }, "A-Z"),
       h("option", { value: "desc" }, "Z-A")));
   }
-  static get is() { return "select-box"; }
+  static get is() { return "ez-select-box"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["select-box.css"]
+    "$": ["ez-select-box.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["select-box.css"]
+    "$": ["ez-select-box.css"]
   }; }
   static get assetsDirs() { return ["../assets"]; }
   static get properties() { return {

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

@@ -1,78 +1,102 @@
 :host {
-
   /* @doc Define a camada de visibilidae do componente. */
   --ez-list__host--z-index: var(--visible, 1);
+
   /* @doc Define o raio da borda do componente. */
   --ez-list__host--border-radius: var(--border--radius-medium, 12px);
+
   /* @doc Define o espaçamento entre a lista e o componente. */
   --ez-list__host--padding: var(--space--medium, 12px);
 
   /* @doc Define o espaçamento interno do ícone. */
-  --ez-list__icon__padding: var(--space--small, 6px);
+  --ez-list__icon--padding: var(--space--small, 6px);
+
   /* @doc Define a cor do ícone de arrasto do item da lista. */
   --ez-list__icon--color: #AFB6C0;
 
   /* @doc Define o espaçamento externo do item da lista. */
-  --ez-list__item__margin: 0 var(--space--small, 6px);
+  --ez-list__item--margin: 0 var(--space--small, 6px);
+
   /* @doc Define a cor do texto do item da lista. */
   --ez-list__item--color: var(--title--primary, #2b3a54);
+
   /* @doc Define o estilo borda inferior do item da lista. */
   --ez-list__item--border-bottom: var(--border--small, 1px solid);
+
   /* @doc Define a cor da borda inferior do item da lista. */
   --ez-list__item--border-color: var(--title--primary, #2b3a54);
+
   /* @doc Define o estilo do texto do item da lista. */
   --ez-list__item--font-family: var(--font-pattern, "Sora");
+
   /* @doc Define o tamanho do texto do item da lista. */
   --ez-list__item--font-size: var(--text--medium, 14px);
 
   /* @doc Define o espaçamento lateral direito para items selecionados. */
   --ez-list__selectable--padding-right: var(--space--small, 6px);
+  
   /* @doc Define o espaçamento lateral esquerdo para items selecionados. */
   --ez-list__selectable--padding-left: var(--space--small, 6px);
 
   /*@doc Define o raio da borda de items selecionados.*/
-  --ez-list__selected-item__border-radius: var(--border--radius-small, 6px);
+  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);
+  
   /*@doc Define a cor de fundo de items selecionados.*/
-  --ez-list__selected-item__background: var(--color--primary-300, #E2F4EF);
+  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);
 
   /* @doc Define o estilo do texto do grupo da lista. */
   --ez-list__group--font-family: var(--font-pattern, "Sora");
+  
   /* @doc Define o tamanho do texto do grupo da lista. */
   --ez-list__group--font-size: var(--text--medium, 14px);
+  
   /* @doc Define o peso do texto do grupo da lista. */
   --ez-list__group--font-weight: var(--text-weight--large, 600);
+  
   /* @doc Define o espaçamento inferior do grupo da lista. */
   --ez-list__group--padding-bottom: var(--space-small, 6px);
 
   /* @doc Define o estilo do texto da área de transferência de grupos. */
-  --ez-list__group__overlay--font-family: var(--font-pattern, "Sora");
+  --ez-list__group-overlay--font-family: var(--font-pattern, "Sora");
+
   /* @doc Define o tamanho do texto da área de transferência de grupos. */
-  --ez-list__group__overlay--font-size: var(--text--medium, 14px);
+  --ez-list__group-overlay--font-size: var(--text--medium, 14px);
 
   /*@doc Define o raio da borda da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__group-container-scrollbar--border-radius: var(--border--radius-small, 6px);
+  
   /*@doc Define a largura da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__group-container-scrollbar--width: var(--space--medium, 12px);
+  
   /*@doc Define a cor da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__group-container-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+  /*@doc Define a cor de fundo da barra de rolagem do container de grupos.*/
+  --ez-list__group-container-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
   /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
   --ez-list__over--border--color: var(--color--primary, #008561);
 
-  /*@doc Define o espaçamento do container de itens arrastáveis .*/
-  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
-
   /*@doc Define a altura do container para arrasto para última posição .*/
   --ez-list__last-droppable-space--height: var(--space--small, 6px);
 
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__draggable-scrollbar--border-radius: var(--border--radius-small, 6px);
+
   /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__draggable-scrollbar--width: var(--space--medium, 12px);
+
   /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__draggable-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-list__draggable-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
+  
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);
+
   /* @doc Define a imagem do ícone de drag. */
-  --ez-list__draggable__icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
+  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
 
   max-height: 100%;
   width: 100%;
@@ -94,6 +118,7 @@ p {
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   flex: 1;
+  width: 100%;
 }
 
 .dragging {
@@ -118,8 +143,9 @@ p {
 
 .item-content {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
+  width: calc(100% - 41px);
 }
 
 .draggable-list {
@@ -128,12 +154,16 @@ p {
   margin: 0;
   width: 100%;
   max-height: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list li {
   background-color: #fff;
   display: flex;
-  margin: var(--ez-list__item__margin);
+  margin: var(--ez-list__item--margin);
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   color: var(--ez-list__item--color);
@@ -159,19 +189,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .draggable-list::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .draggable-list::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .draggable-icon {
@@ -188,8 +218,8 @@ p {
   background-color: var(--ez-list__icon--color);
   width: 18px;
   height: 18px;
-  -webkit-mask-image: var(--ez-list__draggable__icon--image);
-  mask-image: var(--ez-list__draggable__icon--image);
+  -webkit-mask-image: var(--ez-list__draggable-icon--image);
+  mask-image: var(--ez-list__draggable-icon--image);
 }
 
 * {
@@ -213,6 +243,10 @@ p {
   overflow-y: auto;
   outline: none;
   width: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-name {
@@ -234,19 +268,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .group-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__group-container__scrollbar--background-color);
-  border-radius: var(--ez-list__group-container__scrollbar--border-radius);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__group-container-scrollbar--border-radius);
 }
 
 .group-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__group-container__scrollbar--width);
-  max-width: var(--ez-list__group-container__scrollbar--width);
-  min-width: var(--ez-list__group-container__scrollbar--width);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
+  width: var(--ez-list__group-container-scrollbar--width);
+  max-width: var(--ez-list__group-container-scrollbar--width);
+  min-width: var(--ez-list__group-container-scrollbar--width);
 }
 
 .section-container {
@@ -260,6 +294,10 @@ p {
   max-height: 100%;
   overflow-y: auto;
   outline: none;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .group-items-container {
@@ -270,24 +308,24 @@ p {
 }
 
 .items-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .items-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .items-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .group-overlay {
-  font-family: var(--ez-list__group__overlay--font-family);
-  font-size: var(--ez-list__group__overlay--font-size);
+  font-family: var(--ez-list__group-overlay--font-family);
+  font-size: var(--ez-list__group-overlay--font-size);
   background: rgba(226, 244, 239, 0.8);
   border: 1px solid #008561;
   border-radius: 8px;
@@ -318,8 +356,8 @@ p {
 }
 
 .selected-item {
-  background: var(--ez-list__selected-item__background);
-  border-radius: var(--ez-list__selected-item__border-radius);
+  background: var(--ez-list__selected-item--background-color);
+  border-radius: var(--ez-list__selected-item--border-radius);
 }
 
 .slot-item {

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

@@ -54,8 +54,8 @@
 .modal__content {
   display: flex;
   flex-wrap: wrap;
-  /* Cálculo deve ser revisto pois foi feito apenas para lista de tarefas */
-  max-height: calc(100% - 48px);
+  box-sizing: border-box;
+  max-height: 100%;
   height: 100%;
   overflow-y: auto;
   background-color: rgb(255, 255, 255);

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

@@ -86,6 +86,12 @@ export const EzGrid: {
   new (): EzGrid;
 };
 
+interface EzGridConfig extends Components.EzGridConfig, HTMLElement {}
+export const EzGridConfig: {
+  prototype: EzGridConfig;
+  new (): EzGridConfig;
+};
+
 interface EzIcon extends Components.EzIcon, HTMLElement {}
 export const EzIcon: {
   prototype: EzIcon;
@@ -134,6 +140,12 @@ export const EzSearch: {
   new (): EzSearch;
 };
 
+interface EzSelectBox extends Components.EzSelectBox, HTMLElement {}
+export const EzSelectBox: {
+  prototype: EzSelectBox;
+  new (): EzSelectBox;
+};
+
 interface EzTabselector extends Components.EzTabselector, HTMLElement {}
 export const EzTabselector: {
   prototype: EzTabselector;
@@ -176,18 +188,6 @@ export const EzViewStack: {
   new (): EzViewStack;
 };
 
-interface GridConfig extends Components.GridConfig, HTMLElement {}
-export const GridConfig: {
-  prototype: GridConfig;
-  new (): GridConfig;
-};
-
-interface SelectBox extends Components.SelectBox, HTMLElement {}
-export const SelectBox: {
-  prototype: SelectBox;
-  new (): SelectBox;
-};
-
 interface TestDu extends Components.TestDu, HTMLElement {}
 export const TestDu: {
   prototype: TestDu;