@sankhyalabs/ezui 2.5.2 → 2.6.1

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

@@ -61,36 +61,12 @@
 
   /* @doc Define o tamanho do texto da área de transferência de grupos. */
   --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-small, 6px);
-  
-  /*@doc Define a largura da barra de rolagem do container de grupos.*/
-  --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-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 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-small, 6px);
-
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --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-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);
@@ -98,10 +74,26 @@
   /* @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>');
 
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-list__scrollbar--width: var(--space--medium, 12px);
+
   max-height: 100%;
   width: 100%;
   background-color: #fff;
   display: flex;
+
+  /*public*/
   z-index: var(--ez-list__host--z-index);
 }
 
@@ -115,10 +107,12 @@ p {
   border-top: 1px dashed #fff;
   justify-content: space-between;
   background-color: #fff;
-  font-family: var(--ez-list__item--font-family);
-  font-size: var(--ez-list__item--font-size);
   flex: 1;
   width: 100%;
+
+  /*public*/
+  font-family: var(--ez-list__item--font-family);
+  font-size: var(--ez-list__item--font-size);
 }
 
 .dragging {
@@ -133,6 +127,8 @@ p {
 
 .selectable {
   cursor: pointer;
+
+  /*public*/
   padding-right: var(--ez-list__selectable--padding-right);
   padding-left: var(--ez-list__selectable--padding-left);
 }
@@ -157,7 +153,6 @@ p {
 }
 
 .draggable-list {
-  color: var(--text-color);
   padding: 0;
   margin: 0;
   width: 100%;
@@ -165,51 +160,72 @@ p {
   scrollbar-width: thin;
 
   /*public*/
-  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
+  color: var(--text-color);
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
 }
 
 .draggable-list li {
   background-color: #fff;
   display: flex;
+  height: 32px;
+
+  /*public*/
   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);
-  height: 32px;
 }
 
 .over {
+  /*public*/
   border-top: 1px dashed var(--ez-list__over--border--color);
 }
 
 .last-droppable-space {
+  /*public*/
   height: var(--ez-list__last-droppable-space--height);
 }
 
 .draggable-selected {
+  /*public*/
   background-color: var(--background--strong) !important;
 }
 
 .draggable-selected div:hover {
+  /*public*/
   background-color: var(--background--strong) !important;
 }
 
+.draggable-list::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
 
-/* Precisamos dos tokens do scrollbar */
 .draggable-list::-webkit-scrollbar-track {
-  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
 .draggable-list::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
-  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
-.draggable-list::-webkit-scrollbar {
-  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-list::-webkit-scrollbar-thumb:vertical:hover,
+.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.draggable-list::-webkit-scrollbar-thumb:vertical:active,
+.draggable-list::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
 }
 
 .draggable-icon {
@@ -223,9 +239,11 @@ p {
 .draggable-icon::after {
   content: '';
   display: flex;
-  background-color: var(--ez-list__icon--color);
   width: 18px;
   height: 18px;
+
+  /*public*/
+  background-color: var(--ez-list__icon--color);
   -webkit-mask-image: var(--ez-list__draggable-icon--image);
   mask-image: var(--ez-list__draggable-icon--image);
 }
@@ -254,18 +272,20 @@ p {
   scrollbar-width: thin;
 
   /*public*/
-  scrollbar-color: var(--ez-list__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary);
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
 }
 
 .group-name {
-  font-family: var(--ez-list__group--font-family);
-  font-size: var(--ez-list__group--font-size);
-  font-weight: var(--ez-list__group--font-weight);
-  padding-bottom: var(--ez-list__group--padding-bottom);
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   user-select: none;
+
+  /*public*/
+  font-family: var(--ez-list__group--font-family);
+  font-size: var(--ez-list__group--font-size);
+  font-weight: var(--ez-list__group--font-weight);
+  padding-bottom: var(--ez-list__group--padding-bottom);
 }
 
 .group {
@@ -273,22 +293,36 @@ p {
   flex-direction: column;
 }
 
+.group-container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
 
-/* Precisamos dos tokens do scrollbar */
 .group-container::-webkit-scrollbar-track {
-  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
 .group-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__group-container-scrollbar--background-color-primary);
-  border-radius: var(--ez-list__group-container-scrollbar--border-radius);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
-.group-container::-webkit-scrollbar {
-  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);
+.group-container::-webkit-scrollbar-thumb:vertical:hover,
+.group-container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.group-container::-webkit-scrollbar-thumb:vertical:active,
+.group-container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
 }
 
 .section-container {
@@ -305,7 +339,7 @@ p {
   scrollbar-width: thin;
 
   /*public*/
-  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
 }
 
 .group-items-container {
@@ -315,25 +349,39 @@ p {
   outline: none;
 }
 
+.items-container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
+
 .items-container::-webkit-scrollbar-track {
-  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
 .items-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
-  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
 }
 
-.items-container::-webkit-scrollbar {
-  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);
+.items-container::-webkit-scrollbar-thumb:vertical:hover,
+.items-container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.items-container::-webkit-scrollbar-thumb:vertical:active,
+.items-container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
 }
 
 .group-overlay {
-  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;
@@ -347,6 +395,10 @@ p {
   z-index: 2;
   margin: 0;
   cursor: pointer;
+
+  /*public*/
+  font-family: var(--ez-list__group-overlay--font-family);
+  font-size: var(--ez-list__group-overlay--font-size);
 }
 
 .presetedHeight {
@@ -364,6 +416,7 @@ p {
 }
 
 .selected-item {
+  /*public*/
   background: var(--ez-list__selected-item--background-color);
   border-radius: var(--ez-list__selected-item--border-radius);
 }

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

@@ -2,16 +2,30 @@
   /*@doc Define a cor de efeito de sombreado com componente.*/
   --ez-scroller--box-shadow-color: var(--background--body, #fafcff);
 
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--width: var(--space--small, 6px);
+
   display: flex;
   cursor: grab;
   width: 100%;
 }
 
-.dragging{
-  cursor: grabbing; 
+.dragging {
+  cursor: grabbing;
 }
 
-.ez-scroller__container{
+.ez-scroller__container {
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
@@ -19,15 +33,15 @@
   scrollbar-width: thin;
 
   /*public*/
-  scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary);
+  scrollbar-color: var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background);
 }
 
-.ez-scroller__container--horizontal{
+.ez-scroller__container--horizontal {
   flex-direction: row;
   overflow-y: hidden;
   overflow-x: hidden;
-  padding-bottom: var(--space--small);
-  margin-bottom: calc(var(--space--small) * -1);
+  padding-bottom: var(--ez-scroller__scrollbar--width);
+  margin-bottom: calc(var(--ez-scroller__scrollbar--width) * -1);
 }
 
 .ez-scroller__container--horizontal:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
@@ -44,11 +58,11 @@
   padding-bottom: 0px;
 }
 
-.ez-scroller__container--vertical{
+.ez-scroller__container--vertical {
   overflow-y: hidden;
   overflow-x: hidden;
-  padding-right: var(--space--small);
-  margin-right: calc(var(--space--small) * -1);
+  padding-right: var(--ez-scroller__scrollbar--width);
+  margin-right: calc(var(--ez-scroller__scrollbar--width) * -1);
 }
 
 .ez-scroller__container--vertical:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
@@ -65,27 +79,43 @@
   padding-right: 0px;
 }
 
-.ez-scroller__container--both{
+.ez-scroller__container--both {
   overflow: auto;
 }
 
+.ez-scroller__container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+  width: var(--ez-scroller__scrollbar--width);
+  height: var(--ez-scroller__scrollbar--width);
+  max-width: var(--ez-scroller__scrollbar--width);
+  min-width: var(--ez-scroller__scrollbar--width);
+}
+
 .ez-scroller__container::-webkit-scrollbar-track {
-  background-color: var(--scrollbar--secondary);
-  border-radius: var(--border--radius-small);
   visibility: hidden;
+
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+  border-radius: var(--ez-scroller__scrollbar--border-radius);
 }
 
 .ez-scroller__container::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar--primary);
-  border-radius: var(--border--radius-small);
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-default);
+  border-radius: var(--ez-scroller__scrollbar--border-radius);
 }
 
-.ez-scroller__container::-webkit-scrollbar {
-  background-color: var(--scrollbar--secondary);
-  width: var(--space--small);
-  height: var(--space--small);
-  max-width: var(--space--small);
-  min-width: var(--space--small);
+.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-hover);
+}
+
+.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-clicked);
 }
 
 .ez-scroller__shadow-start,

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

@@ -74,6 +74,12 @@ export const EzDialog: {
   new (): EzDialog;
 };
 
+interface EzFileItem extends Components.EzFileItem, HTMLElement {}
+export const EzFileItem: {
+  prototype: EzFileItem;
+  new (): EzFileItem;
+};
+
 interface EzFilterInput extends Components.EzFilterInput, HTMLElement {}
 export const EzFilterInput: {
   prototype: EzFilterInput;