matcha-theme 20.55.0 → 20.57.0

package/components/matcha-buttons.scss

@@ -129,7 +129,7 @@ a[matcha-button] {
     &[size="medium"],
     &[size="large"],
     &[size="huge"] {
-        min-width: 24px;
+        // min-width: 24px;
     }
 
     @include generate-matcha-button-size-classes($helper-breakpoints);
@@ -255,25 +255,55 @@ a[matcha-button] {
         }
 
         @each $colorName, $colorFn in $color-functions {
+            // Background do ripple para outline e basic
             &[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
             &[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
                 background: call(#{$colorFn}Alpha, $theme)
             }
+            // Background e color do botão para alpha
             &[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
                 background: call(#{$colorFn}Alpha, $theme);
                 color: call(#{$colorFn}, $theme);
+
+                // Divider dentro do botão para alpha
+                matcha-divider {
+                    .border-color-disabled {
+                        border-color: call(#{$colorFn}, $theme) !important;
+                        opacity: 0.3 !important;
+                    }
+                }
             }
+            // Color do botão para outline, link e basic
             &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
             &[color="#{'' + $colorName}"][link]:not([link="false"]),
             &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
                 color: call(#{$colorFn}, $theme);
+                // Divider dentro do botão para outline, link e basic
+                matcha-divider {
+                    .border-color-disabled {
+                        border-color: call(#{$colorFn}, $theme) !important;
+                        opacity: 0.3 !important;
+                    }
+                }
             }
+
+            // Background e color do botão para default
             &[color="#{'' + $colorName}"]{
                 background: call(#{$colorFn}, $theme);
                 color: call(#{$colorFn}Contrast, $theme);
+
+                // Divider dentro do botão para default
+                matcha-divider {
+                    .border-color-disabled {
+                        border-color: call(#{$colorFn}Contrast, $theme) !important;
+                        opacity: 0.3 !important;
+                    }
+                }
             }
+            // Ripple dentro do botão para default
             &[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
 
+
             &[disabled],
             &[disabled]:not([disabled="false"]),
             &[disabled="true"] {

package/components/matcha-divider.scss

@@ -0,0 +1,23 @@
+@mixin matcha-divider-theme($theme) {
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    matcha-divider {
+        box-sizing: border-box;
+
+        &[direction="vertical"] {
+            display: flex;
+            flex-direction: column;
+            align-self: stretch;
+        }
+
+        &[direction="horizontal"] {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+        }
+    }
+}

package/components/matcha-drawer.scss

@@ -1,157 +1,149 @@
 // -------------------------------------------------------------------------------------------------------------------
-// @ Matcha Drawer Component Styles
+// @ Matcha Drawer Component Styles (Refatorado baseado no Angular Material Sidenav)
+// @ Todos os estilos consolidados aqui para facilitar manutenção
 // -------------------------------------------------------------------------------------------------------------------
 
 @mixin matcha-drawer-theme($theme) {
-  // Variáveis do tema
+  $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  // ===== HOST STYLES =====
-  matcha-drawer {
+  // ===== DRAWER CONTAINER =====
+  matcha-drawer-container {
     display: block;
-    transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-    z-index: 10;
-    position: relative;
-  }
-
-  // ===== DRAWER CONTAINER WRAPPER =====
-  .matcha-drawer-container-wrapper {
-    display: flex;
-    height: 100%;
-    width: 100%;
     position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
     overflow: hidden;
-  }
-
-  // ===== DRAWER CONTENT WRAPPER =====
-  .matcha-drawer-content-wrapper {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  // ===== BACKDROP =====
-  .matcha-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: getBackgroundAlpha($theme);
-    backdrop-filter: blur(6px);
-    z-index: 9;
-    cursor: pointer;
-  }
-
-  // ===== DRAWER CONTAINER =====
-  .matcha-drawer-container {
-    display: flex;
-    height: 100%;
-    background: getBackground($theme);
-    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    background-color: getBackground($theme);
+    color: getForeground($theme);
 
-    // Posicionamento
-    &.matcha-drawer-left {
+    // Backdrop
+    .matcha-drawer-backdrop {
+      position: absolute;
+      top: 0;
       left: 0;
-    }
-
-    &.matcha-drawer-right {
       right: 0;
+      bottom: 0;
+      display: block;
+      z-index: 3;
+      visibility: hidden;
+      background-color: getBackgroundAlpha($theme);
+      backdrop-filter: blur(4px);
+      opacity: 0;
+      transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
+                  visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    // Modos de operação
-    &.matcha-drawer-overlay-mode {
-      position: absolute;
-      top: 0;
-      z-index: 10;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
-      border-radius: 0 8px 8px 0;
-      width: 320px !important; // Largura fixa para overlay
+    // Backdrop visível quando há drawer aberto
+    &.matcha-drawer-container-has-open .matcha-drawer-backdrop {
+      visibility: visible;
+      opacity: 1;
     }
 
-    &.matcha-drawer-push-mode {
+    // Container do conteúdo principal
+    .matcha-drawer-content-container {
       position: relative;
-      border-right: 1px solid getDisabled($theme);
-      z-index: 1;
+      z-index: 0; // Menor que o drawer (z-index: 3)
+      display: block;
+      height: 100%;
+      overflow: auto;
     }
-
   }
 
-  // ===== DRAWER CONTENT =====
-  .matcha-drawer-content {
-    display: flex;
-    flex-direction: column;
-    background-color: getBackground($theme);
-    width: 100%;
-    height: 100%;
+  // ===== DRAWER =====
+  matcha-drawer {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 10; // Maior z-index para garantir que fique acima do conteúdo
+    outline: 0;
+    box-sizing: border-box;
     overflow-y: auto;
-  }
+    overflow-x: hidden;
+    transform: translate3d(-100%, 0, 0);
+    visibility: hidden;
+    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
+                visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    background-color: getBackground($theme);
+    color: getForeground($theme);
+    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),
+                0 16px 24px 2px rgba(0,0,0,.14),
+                0 6px 30px 5px rgba(0,0,0,.12);
+    pointer-events: auto; // Garante que seja sempre clicável
 
-  // ===== DRAWER HEADER =====
-  .matcha-drawer-header {
-    border-bottom: 1px solid getDisabled($theme);
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+    // Largura agora é controlada pela propriedade width do componente
+    // width: 256px; // Removido - agora é dinâmico
 
-  // ===== DRAWER MAIN CONTENT =====
-  .matcha-drawer-main-content {
-    flex: 1;
-    padding: 16px;
-  }
+    // Posição end (direita)
+    &.matcha-drawer-end {
+      right: 0;
+      transform: translate3d(100%, 0, 0);
+    }
 
-  // ===== DRAWER FOOTER =====
-  .matcha-drawer-footer {
-    padding: 16px;
-    border-top: 1px solid getDisabled($theme);
-  }
+    // Estado aberto
+    &.matcha-drawer-opened {
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
 
-  // ===== DRAWER CLOSE BUTTON =====
-  .matcha-drawer-close-button {
-    padding: 8px;
-    border-radius: 4px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: getForeground($theme);
-    transition: background-color 0.2s ease;
+    // Modo over - fica por cima com z-index maior
+    &.matcha-drawer-over {
+      z-index: 15; // Maior que o z-index base (10)
+      border-right: 1px solid getDisabled($theme);
 
-    &:hover {
-      background-color: rgba(getSurface($theme), 0.04);
+      &.matcha-drawer-end {
+        border-right: none;
+        border-left: 1px solid getDisabled($theme);
+      }
     }
-  }
 
-  // ===== HOVER EFFECTS =====
-  .sub-sidebar-item:hover:not(.disabled) {
-    transform: translateY(-1px);
-    background-color: map-get($accent, default);
-  }
+    // Modo side - fica fixo sem shadow
+    &.matcha-drawer-side {
+      z-index: 10; // Mantém o z-index base
+      border-right: 1px solid getDisabled($theme);
+      box-shadow: none;
 
-  // ===== RESPONSIVO =====
-  @media (max-width: 1023px) {
-    .matcha-drawer-container {
-      width: 100% !important;
+      &.matcha-drawer-end {
+        border-right: none;
+        border-left: 1px solid getDisabled($theme);
+      }
     }
-  }
 
-  // ===== CENTRALIZAÇÃO EM TELAS GRANDES =====
-  @media (min-width: 1920px) {
-    .matcha-drawer-container {
-      transform: translateX(calc(50vw - 960px));
+    // Modo push - empurra o conteúdo sem shadow
+    &.matcha-drawer-push {
+      border-right: 1px solid getDisabled($theme);
+      box-shadow: none;
+
+      &.matcha-drawer-end {
+        border-right: none;
+        border-left: 1px solid getDisabled($theme);
+      }
+    }
+
+    // Inner container do drawer
+    .matcha-drawer-inner-container {
+      width: 100%;
+      height: 100%;
+      -webkit-overflow-scrolling: touch;
+      display: flex;
+      flex-direction: column;
+      position: relative; // Garante posicionamento correto
+      pointer-events: auto; // Garante que seja clicável
     }
   }
 
-  // ===== ACESSIBILIDADE =====
-  .matcha-drawer-container:focus {
-    outline: 2px solid getAccent($theme);
-    outline-offset: 2px;
+  // ===== DRAWER CONTENT =====
+  matcha-drawer-content {
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: 100%;
+    overflow: auto;
+    transition: margin 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   }
 }

package/main.scss

@@ -53,7 +53,7 @@
 @import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
 @import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
 @import "./components/matcha-slider.scss"; // matcha-slider($theme)
-
+@import "./components/matcha-divider.scss"; // matcha-divider($theme)
 @import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
 @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
 @import "./components/matcha-modal.scss"; // matcha-modal($theme)
@@ -174,4 +174,5 @@
     @include matcha-paginator-theme($theme);
     @include matcha-slider-theme($theme);
     @include matcha-highlight-theme($theme);
+    @include matcha-divider-theme($theme);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "20.55.0",
+    "version": "20.57.0",
     "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {