@sankhyalabs/ezui 6.5.0-dev.1 → 6.5.0-dev.10

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

@@ -1,57 +1,141 @@
 :host {
-
     /* dimensions */
     /*@doc Define a largura mínima do componente.*/
-    --ez-split-button--min-width: 24;
+    --ez-split-button--min-width: var(--space--40, 40px);
     /*@doc Define a largura do componente.*/
-    --ez-split-button--width: 'auto';
-    /*@doc Define a altura do componente.*/
-    --ez-split-button__medium--height: 32px;
-    --ez-split-button__large--height: 42px;
+    --ez-split-button--width: auto;
+    /*@doc Define a altura do componente, quando size medium.*/
+    --ez-split-button--height: var(--space--32, 32px);
+    /*@doc Define a largura do slot que contém o ícone.*/
+    --ez-split-button__medium-icon--width: var(--space--40, 40px);
     /*@doc Define a largura do slot que contém o ícone.*/
-    --ez-split-button__medium-icon--width: 40px;
-    --ez-split-button__large-icon--width: 44px;
-    /*@doc Define o espaçamento entre o ícone e o label.*/
-    --ez-split-button__inline__icon--gap: 6px;
+    --ez-split-button__large-icon--width: var(--space--44, 44px);
     /*@doc Define o espaçamento superior ao label.*/
-    --ez-split-button__label--padding-top: 0px;
+    --ez-split-button__label--padding-top: var(--space--0, 0px);
     /*@doc Define o espaçamento inferior ao label.*/
-    --ez-split-button__label--padding-bottom: 0px;
+    --ez-split-button__label--padding-bottom: var(--space--0, 0px);
     /*@doc Define o espaçamento esquerdo ao ícone.*/
-    --ez-split-button__right-button--padding-left: 8px;
+    --ez-split-button__right-button--padding-left: var(--space--8, 8px);
+    /*@doc Define o espaçamento direito ao ícone.*/
+    --ez-split-button__right-button--padding-right: var(--space--12, 12px);
+
     /* general */
+
+    /* colors */
     /*@doc Define a cor do label.*/
-    --ez-split-button--color: var(--title--primary, #2B3A54);
+    --ez-split-button--color: var(--color--ocean-green-600, #008561);
+    /*@doc Define a cor do ícone esquerdo.*/
+    --ez-split-button__left-icon--color: var(--color--ocean-green-600, #008561);
+    /*@doc Define a cor do ícone direito.*/
+    --ez-split-button__right-icon--color: var(--color--ocean-green-600, #008561);
+    /*@doc Define a cor de fundo do botão.*/
+    --ez-split-button--background-color: var(--color--gray-70, #FFFFFF);
+    /*@doc Define o estilo da borda do botão.*/
+    --ez-split-button--border: 1px solid var(--color--gray-90, #EAEAEA);
+    
+
     /*@doc Define o tamanho do label.*/
-    --ez-split-button--font-size: var(--text--small, 12px);
+    --ez-split-button--font-size: var(--font-size--default, 14px);
+    /*@doc Define a altura da linha do label.*/
+    --ez-split-button--line-height: var(--line-height--28, 28px);
+
     /*@doc Define a família da fonte do label.*/
     --ez-split-button--font-family: var(--font-pattern, Arial);
     /*@doc Define o peso da fonte do label.*/
-    --ez-split-button--font-weight: var(--text-weight--large);
-    /*@doc Define a cor de fundo do botão.*/
-    --ez-split-button--background-color: var(--background--light, #ffffff);
+    --ez-split-button--font-weight: var(--font-weight--regular,400);
     /*@doc Define o raio da borda do botão.*/
-    --ez-split-button--border-radius: var(--border--radius-large, 24px);
-    /*@doc Define o estilo da borda do botão.*/
-    --ez-split-button--border: 1px solid var(--color--strokes);
-    /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
-    --ez-split-button--justify-content: center;
+    --ez-split-button--border-radius: var(--border--radius-24, 24px);
     /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
     --ez-split-button--hover-color: var(--color--primary-600, #007a5a);
     /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-    --ez-split-button--hover--background-color: var(--background--light, #ffffff);
+    --ez-split-button--hover--background-color: var(--color--gray-80, #F9F9F9);
     /*@doc Define a cor do texto quando o botão está desabilitado.*/
-    --ez-split-button--disabled-color: var(--text--primary);
+    --ez-split-button--disabled-color: var(--color--gray-400, #77777A);
     /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-    --ez-split-button--disabled--background-color: var(--background--medium);
+    --ez-split-button--disabled--background-color: var(--color--gray-80, #F9F9F9);
     /*@doc Define o estido da borda quando o botão está selecionado.*/
     --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
     /*@doc Define a sombra do botão quando selecionado.*/
     --ez-split-button--focus--box-shadow: none;
-    /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
-    --ez-split-button--active-color: var(--color--primary-700);
-     /*@doc Define a cor do fundo ao ativar o botão.*/
-    --ez-split-button--active--background-color: var(--background--strong);
+
+    display: flex;
+    width: fit-content;
+  }
+
+  :host(.ez-split-button--primary) {
+  /* default */
+  --ez-split-button--color: var(--color--gray-70);
+  --ez-split-button--background-color: var(--color--ocean-green-500);
+  --ez-split-button--font-weight: var(--font-weight--regular);
+  --ez-split-button--border: none;
+  --ez-split-button__left-icon--color: var(--color--gray-70);
+  --ez-split-button__right-icon--color: var(--color--gray-70);
+  /* hover */
+  --ez-split-button--hover-color: var(--color--gray-70);
+  --ez-split-button--hover--background-color: var(--color--ocean-green-700);
+  --ez-split-button--hover--border: none;
+  --ez-split-button--left-icon--hover-color: var(--color--gray-70);
+  --ez-split-button--right-icon--hover-color: var(--color--gray-70);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--color--gray-70);
+  --ez-split-button--disabled--background-color: var(--color--gray-400);
+  --ez-split-button--disabled--border: none;
+  --ez-split-button--disabled-icon-color: var(--color--gray-200);
+  --ez-split-button__left-icon--disabled-color: var(--color--gray-200);
+  --ez-split-button__right-icon--disabled-color: var(--color--gray-200);
+}
+
+:host(.ez-split-button--secondary) {
+  /* default */
+  --ez-split-button--color: var(--color--ocean-green-600);
+  --ez-split-button--background-color: var(--color--gray-70);
+  --ez-split-button--border: 1px solid var(--color--gray-90);
+  --ez-split-button--left-icon--color: var(--color--ocean-green-600);
+  --ez-split-button--right-icon--color: var(--color--ocean-green-600);
+  /* hover */
+  --ez-split-button--hover-color: var(--color--ocean-green-600);
+  --ez-split-button--hover--background-color: var(--color--gray-80);
+  --ez-split-button--hover--border: 1px solid var(--color--gray-90);
+  --ez-split-button--left-icon--hover-color: var(--color--ocean-green-600);
+  --ez-split-button--right-icon--hover-color: var(--color--ocean-green-600);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--color--gray-400);
+  --ez-split-button--disabled--background-color: var(--color--gray-80);
+  --ez-split-button--disabled--border: 1px solid var(--color--gray-200);
+  --ez-split-button--disabled-icon-color: var(--color--gray-400);
+  --ez-split-button__left-icon--disabled-color: var(--color--gray-300);
+  --ez-split-button__right-icon--disabled-color: var(--color--gray-300);
+}
+
+:host(.ez-split-button--tertiary) {
+  /* default */
+  --ez-split-button--color: var(--color--ocean-green-600);
+  --ez-split-button--background-color: transparent;
+  --ez-split-button--font-weight: var(--font-weight--regular);
+  --ez-split-button--border: none;
+  --ez-split-button--left-icon--color: var(--color--ocean-green-600);
+  --ez-split-button--right-icon--color: var(--color--ocean-green-600);
+  /* hover */
+  --ez-split-button--hover-color: var(--color--ocean-green-800);
+  --ez-split-button--hover--background-color: transparent;
+  --ez-split-button--hover--border: none;
+  --ez-split-button--left-icon--hover-color: var(--color--ocean-green-800);
+  --ez-split-button--right-icon--hover-color: var(--color--ocean-green-800);
+  /* disabled */
+  --ez-split-button--disabled-color: var(--color--gray-400);
+  --ez-split-button--disabled--background-color: transparent;
+  --ez-split-button--disabled--border: transparent;
+  --ez-split-button--disabled-icon-color: var(--color--gray-200);
+  --ez-split-button__left-icon--disabled-color: var(--color--gray-200);
+  --ez-split-button__right-icon--disabled-color: var(--color--gray-200);
+}
+
+  .ez-split-button.large {
+    --ez-split-button--height: var(--space--42, 42px);
+  }
+
+  .ez-split-button.medium {
+    --ez-split-button--height: var(--space--32, 32px);
   }
   
   ez-icon {
@@ -65,13 +149,15 @@
     align-items: center;
     margin: 0;
     cursor: pointer;
-    transition: background-color 0.2s linear;
+    transition: background-color 0.2s linear, transform 0.15s ease;
     white-space: nowrap;
-  
+    overflow: hidden;
+    transform: scale(1);
+
     /*public*/
     min-width: var(--ez-split-button--min-width);
     width: var(--ez-split-button--width);
-    height: var(--ez-split-button__medium--height);
+    height: var(--ez-split-button--height);
     font-family: var(--ez-split-button--font-family);
     font-size: var(--ez-split-button--font-size);
     font-weight: var(--ez-split-button--font-weight);
@@ -82,25 +168,20 @@
     color: var(--ez-split-button--color);
     fill: var(--ez-split-button--color);
     border: none;
-    justify-content: var(--ez-split-button--justify-content);
   }
 
   label {
     cursor: pointer;
+    line-height: var(--ez-split-button--line-height);
   }
 
-  button:active {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--ez-split-button--active--background-color);
-    color: var(--ez-split-button--active-color);
-    fill: var(--ez-split-button--active-color);
-    --ez-icon--color: var(--ez-split-button--active-color);
-  }
   .ez-split-button__left-button{
     border: var(--ez-split-button--border);
     border-right: none;
     outline: none;
+    gap: var(--space--8, 8px);
+    padding-left: var(--space--12, 12px);
+    padding-right: var(--space--8, 8px);
   }
   .ez-split-button__right-button{
     border: var(--ez-split-button--border);
@@ -108,19 +189,51 @@
     outline: none;
   }
 
-  .ez-split-button__left-button:focus{
+  .ez-split-button__left-button.force-focus-visible,
+  .ez-split-button__left-button:focus-visible{
+    /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
     box-shadow: 
-    0 0 0 2px var(--color--primary-300), /* right */
-    0 2px 0 0 var(--color--primary-300), /* bottom */
-    0 -2px 0 0 var(--color--primary-300); /* top */
+    -1px 1px 0px 1px var(--color--gray-70), 
+    -1px -1px 0px 1px var(--color--gray-70), 
+    -2px -2px 0px 2px var(--color--ocean-green-200), 
+    -2px 2px 0px 2px var(--color--ocean-green-200), 
+    0px -2px 0px 2px var(--color--ocean-green-200), 
+    0px 2px 0px 2px var(--color--ocean-green-200)
 
   }
-  .ez-split-button__right-button:focus {
-  box-shadow: 
-    2px 0 0 0 var(--color--primary-300), /* right */
-    0 2px 0 0 var(--color--primary-300), /* bottom */
-    0 -2px 0 0 var(--color--primary-300); /* top */
+  .ez-split-button__right-button.force-focus-visible,
+  .ez-split-button__right-button:focus-visible {
+    /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+    box-shadow: 
+    1px 1px 0px 1px var(--color--gray-70), 
+    1px -1px 0px 1px var(--color--gray-70), 
+    2px -2px 0px 2px var(--color--ocean-green-200), 
+    2px 2px 0px 2px var(--color--ocean-green-200), 
+    0px -2px 0px 2px var(--color--ocean-green-200), 
+    0px 2px 0px 2px var(--color--ocean-green-200)
+  }
 
+  .ez-split-button__left-button[aria-disabled].force-focus-visible,
+  .ez-split-button__left-button[aria-disabled]:focus-visible {
+    /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+    box-shadow: 
+    -1px 1px 0px 1px var(--color--gray-70), 
+    -1px -1px 0px 1px var(--color--gray-70), 
+    -2px -2px 0px 2px var(--color--petroleum-100), 
+    -2px 2px 0px 2px var(--color--petroleum-100), 
+    0px -2px 0px 2px var(--color--petroleum-100), 
+    0px 2px 0px 2px var(--color--petroleum-100)
+  }
+  .ez-split-button__right-button[aria-disabled].force-focus-visible,
+  .ez-split-button__right-button[aria-disabled]:focus-visible {
+    /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
+    box-shadow: 
+    1px 1px 0px 1px var(--color--gray-70), 
+    1px -1px 0px 1px var(--color--gray-70), 
+    2px -2px 0px 2px var(--color--petroleum-100), 
+    2px 2px 0px 2px var(--color--petroleum-100), 
+    0px -2px 0px 2px var(--color--petroleum-100), 
+    0px 2px 0px 2px var(--color--petroleum-100)
   }
 
   .ez-split-button__left-button:hover,
@@ -132,66 +245,31 @@
     --ez-icon--color: var(--ez-split-button--hover-color);
   }
 
-  .ez-split-button__left-button:active,
-  .ez-split-button__right-button:active {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--ez-split-button--active--background-color);
-    color: var(--ez-split-button--active-color);
-    fill: var(--ez-split-button--active-color);
-    --ez-icon--color: var(--ez-split-button--active-color);
-  }
-
   .ez-split-button__left-button:disabled,
+  .ez-split-button__left-button[aria-disabled],
   .ez-split-button__left-button:disabled label,
-  .ez-split-button__right-button:disabled{
+  .ez-split-button__left-button[aria-disabled] label,
+  .ez-split-button__right-button:disabled,
+  .ez-split-button__right-button[aria-disabled]{
     background-color: var(--ez-split-button--disabled--background-color);
     color: var(--ez-split-button--disabled-color);
     fill: var(--ez-split-button--disabled-color);
     border: none;
-    --ez-icon--color: var(--ez-split-button--disabled-color);
+    --ez-icon--color: var(--ez-split-button__left-icon--disabled-color);
     cursor: not-allowed;
-  }
-  .ez-split-button__left-button:disabled{
+  }  
+  .ez-split-button__left-button:disabled,
+  .ez-split-button__left-button[aria-disabled]{
+    --ez-icon--color: var(--ez-split-button__left-icon--disabled-color);
     border: var(--ez-split-button--disabled-border);
     border-right: none;
   }
-  .ez-split-button__right-button:disabled{
+  .ez-split-button__right-button:disabled,
+  .ez-split-button__right-button[aria-disabled]{
+    --ez-icon--color: var(--ez-split-button__right-icon--disabled-color);
     border: var(--ez-split-button--disabled-border);
     border-left: none;
   }
-  
-  button.large {
-    height: var(--ez-split-button__large--height);
-  }
-
-  button.medium {
-    height: var(--ez-split-button__medium--height);
-  }
-
-  /*default*/
-  .default label {
-    padding: var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px;
-  }
-
-  /*icon-left*/
-  .icon-left {
-    gap: var(--ez-split-button__inline__icon--gap);
-  }
-  
-  .icon-left label {
-    padding-right: 12px;
-  }
-
-  .icon-left ez-icon {
-    padding-left: 20px;
-  }
-
-  /*icon-only*/
-  .icon-only {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
 
   .ez-split-button__right-button {
     border-top-right-radius: var(--ez-split-button--border-radius);
@@ -200,26 +278,33 @@
     border-bottom-left-radius:0;
     border-right: var(--ez-split-button--border);
   }
-  
-  .ez-split-button__right-button--medium {
-    min-width: var(--ez-split-button__medium-icon--width);
-  }
 
-  .ez-split-button__right-button--large {
-    min-width: var(--ez-split-button__large-icon--width);
+  .ez-split-button__divider {
+    width: 1px;
+    box-sizing: border-box;
+    position: relative;
+    background-color: var(--ez-split-button--background-color);
+    height: var(--ez-split-button--height);
+    border-top: var(--ez-split-button--border);
+    border-bottom: var(--ez-split-button--border);
   }
 
-  .ez-split-button__right-button--divider {
-    top: 10%;
-    bottom: 10%;
+  .ez-split-button__divider[aria-disabled],
+  .ez-split-button__divider.disabled {
+    cursor: not-allowed;
+    background-color: var(--ez-split-button--disabled--background-color);
+    border-top: var(--ez-split-button--disabled--border);
+    border-bottom: var(--ez-split-button--disabled--border);
   }
-  .ez-split-button__right-button--divider:before {
+  .ez-split-button__divider:before {
     content: "";
     position: absolute;
     left: 0;
-    border-left: 1px solid rgba(0, 0, 0, 20%);
+    border-left: 1px solid rgba(0, 0, 0, 10%);
     border-radius: 2px;
     height: 75%;
+    top: 10%;
+    bottom: 10%;
   }
   
   .btn-icon--medium {
@@ -234,20 +319,15 @@
     position: absolute;
     left: 0;
     padding-left: var(--ez-split-button__right-button--padding-left);
+    padding-right: var(--ez-split-button__right-button--padding-right)
   }
   
-  .label-icon {
+  .ez-split-button {
     display: flex;
     flex-direction: row;
     align-items: center;
     color: var(--ez-split-button--color);
   }
-  
-  .label-icon:active {
-    color: var(--ez-split-button--active-color);
-    fill: var(--ez-split-button--active-color);
-    --ez-icon--color: var(--ez-split-button--active-color);
-  }
 
   .dropdown {
     display: flex;
@@ -265,3 +345,63 @@
   .dropdown-content > ez-dropdown {
     position: relative;
 }
+
+.ripple {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  z-index: 0;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+:host .ripple,
+:host(.ez-split-button--secondary) .ripple {
+  background: rgba(0, 133, 97, 0.2);
+}
+
+:host(.ez-split-button--primary) .ripple {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+:host(.ez-split-button--tertiary) .ripple {
+  background: rgba(0, 133, 97, 0.15);
+}
+
+.ez-split-button__left-button.pressed,
+.ez-split-button__right-button.pressed {
+  transform: scale(0.98);
+}
+
+
+.ez-split-button__left-button > *:not(.ripple),
+.ez-split-button__right-button > *:not(.ripple) {
+  position: relative;
+  z-index: 1;
+}
+
+.ez-split-button__left-button:disabled .ripple,
+.ez-split-button__left-button[aria-disabled] .ripple,
+.ez-split-button__right-button:disabled .ripple,
+.ez-split-button__right-button[aria-disabled] .ripple {
+  display: none;
+}
+
+.ez-split-button__left-button:disabled,
+.ez-split-button__left-button[aria-disabled],
+.ez-split-button__right-button:disabled,
+.ez-split-button__right-button[aria-disabled] {
+  transform: scale(1) !important;
+}
+
+/* Apply variant styles to buttons */