@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-date.scss

@@ -1,81 +1,81 @@
-// =========================================================
-// * Matcha Date Styles
-// =========================================================
-
-@mixin matcha-date-theme($theme) {
-  .matcha-date-input {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-
-    &::placeholder {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
-    }
-
-    &:disabled {
-      opacity: var(--matcha-opacity-disabled, 0.38);
-      color: var(--matcha-color-disabled, #{getDisabled($theme)});
-    }
-  }
-}
-
-.matcha-date-input {
-  width: 100%;
-  font-size: var(--matcha-text-body-md, 14px);
-  font-family: inherit;
-  line-height: 1.5;
-  color: var(--matcha-text-primary, #333);
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-  &::placeholder {
-    color: var(--matcha-text-placeholder, #999);
-  }
-
-  &:disabled {
-    pointer-events: none; cursor: default;
-    opacity: 0.6;
-    color: var(--matcha-text-disabled, #999);
-  }
-
-  // Customização do ícone do calendário
-  &::-webkit-calendar-picker-indicator {
-    cursor: pointer;
-    filter: opacity(0.6);
-    transition: filter 0.2s ease;
-
-    &:hover {
-      filter: opacity(1);
-    }
-  }
-
-  &:disabled::-webkit-calendar-picker-indicator {
-    pointer-events: none; cursor: default;
-    opacity: 0.3;
-  }
-
-  // Firefox
-  &::-moz-calendar-picker-indicator {
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  &:disabled::-moz-calendar-picker-indicator {
-    pointer-events: none; cursor: default;
-    opacity: 0.3;
-  }
-}
-
-// Integração com matcha-form-field
-matcha-form-field {
-  matcha-date {
-    width: 100%;
-    display: block;
-  }
-}
-
+// =========================================================
+// * Matcha Date Styles
+// =========================================================
+
+@mixin matcha-date-theme($theme) {
+  .matcha-date-input {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+
+    &::placeholder {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    &:disabled {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+      color: var(--matcha-color-disabled, #{getDisabled($theme)});
+    }
+  }
+}
+
+.matcha-date-input {
+  width: 100%;
+  font-size: var(--matcha-text-body-md, 14px);
+  font-family: inherit;
+  line-height: 1.5;
+  color: var(--matcha-text-primary, #333);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &::placeholder {
+    color: var(--matcha-text-placeholder, #999);
+  }
+
+  &:disabled {
+    pointer-events: none; cursor: default;
+    opacity: 0.6;
+    color: var(--matcha-text-disabled, #999);
+  }
+
+  // Customização do ícone do calendário
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: opacity(0.6);
+    transition: filter 0.2s ease;
+
+    &:hover {
+      filter: opacity(1);
+    }
+  }
+
+  &:disabled::-webkit-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+
+  // Firefox
+  &::-moz-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &:disabled::-moz-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+}
+
+// Integração com matcha-form-field
+matcha-form-field {
+  matcha-date {
+    width: 100%;
+    display: block;
+  }
+}
+

package/components/matcha-divider.scss

@@ -1,45 +1,100 @@
 // =============================================================================
-// matcha-divider.scss — Divider line (horizontal/vertical)
-// Aligned with Figma matcha/divider: Direção(Horizontal/Vertical) = 2 variants
+// matcha-divider.scss — Figma DSV3 matcha/divider (14905:34)
+// 2 variants visuais: Direção=Horizontal (280×1px) / Vertical (1×80px+)
+// Cor: matcha/color/text/hint @ matcha/opacity/strong (0.3)
+// Tipografia label: matcha/text/caption (11/14)
+// + extensão M3: slot label opcional ("OU", "Nova seção") + inset variant
 // =============================================================================
 
 // ── Structural ──────────────────────────────────────────────────────────────
+// Note: divider não tem animação por design — não precisa de prefers-reduced-motion.
 
 matcha-divider {
-  display: flex;
-  box-sizing: border-box;
-  flex-shrink: 0;
-
-  &[direction="horizontal"],
-  &:not([direction]) {
-    flex-direction: row;
-    width: 100%;
-
-    .matcha-divider-line {
-      width: 100%;
-      height: 0;
-      border-top: var(--matcha-border-hairline, 1px) solid;
-    }
-  }
+    box-sizing: border-box;
+    flex-shrink: 0;
 
-  &[direction="vertical"] {
-    flex-direction: column;
-    align-self: stretch;
+    // ── Horizontal default (sem direction ou direction="horizontal") ──
+    &[direction="horizontal"],
+    &:not([direction]) {
+        display:        flex;
+        flex-direction: row;
+        align-items:    center;
+        width:          100%;
+    }
 
-    .matcha-divider-line {
-      width: 0;
-      height: 100%;
-      border-left: var(--matcha-border-hairline, 1px) solid;
+    // ── Vertical ──
+    &[direction="vertical"] {
+        display:        inline-flex;
+        flex-direction: column;
+        align-items:    center;
+        align-self:     stretch;
     }
-  }
 }
 
-// ── Theme mixin ─────────────────────────────────────────────────────────────
+// ── Linha — 1px hairline com text/hint @ opacity-strong (canônico Figma) ────
+.matcha-divider-line {
+    flex: 1 1 auto;
+    background-color: var(--matcha-color-text-hint, #9AA0A6);
+    opacity:          var(--matcha-opacity-strong, 0.3);
+    pointer-events:   none;
+}
+
+matcha-divider[direction="horizontal"] .matcha-divider-line,
+matcha-divider:not([direction]) .matcha-divider-line {
+    height:    var(--matcha-border-hairline, 1px);
+    min-width: var(--matcha-border-hairline, 1px);
+}
+
+matcha-divider[direction="vertical"] .matcha-divider-line {
+    width:      var(--matcha-border-hairline, 1px);
+    min-height: var(--matcha-border-hairline, 1px);
+}
+
+// ── Inset variants — linha não-completa (M3 List Divider) ──────────────────
+// Útil em listas com avatar (linha começa depois do avatar)
+matcha-divider[direction="horizontal"][inset="start"] .matcha-divider-line:first-of-type,
+matcha-divider:not([direction])[inset="start"] .matcha-divider-line:first-of-type {
+    margin-left: var(--matcha-space-700, 56px);
+}
+matcha-divider[direction="horizontal"][inset="end"] .matcha-divider-line:last-of-type,
+matcha-divider:not([direction])[inset="end"] .matcha-divider-line:last-of-type {
+    margin-right: var(--matcha-space-300, 24px);
+}
+matcha-divider[direction="horizontal"][inset="both"] .matcha-divider-line,
+matcha-divider:not([direction])[inset="both"] .matcha-divider-line {
+    margin-left: var(--matcha-space-300, 24px);
+    margin-right: var(--matcha-space-300, 24px);
+}
+
+// ── Label slot ──────────────────────────────────────────────────────────────
+// Tipografia: matcha/text/caption (11/14 Regular) text-secondary.
+// Quando vazio (:empty), CSS :has esconde slot + segunda linha.
+.matcha-divider-label {
+    display:         inline-flex;
+    align-items:     center;
+    justify-content: center;
+    flex:            0 0 auto;
+    padding:         0 var(--matcha-space-100, 8px);
+    font-family:     var(--matcha-font-family);
+    font-size:       var(--matcha-text-p-tiny, 11px);
+    font-weight:     var(--matcha-weight-regular, 400);
+    line-height:     var(--matcha-leading-p-tiny, 14px);
+    color:           var(--matcha-color-text-secondary);
+    white-space:     nowrap;
+    user-select:     none;
+}
+
+// Vertical: padding em volta vertical (não horizontal)
+matcha-divider[direction="vertical"] .matcha-divider-label {
+    padding: var(--matcha-space-100, 8px) 0;
+}
+
+// ============================================================================
+// Theme mixin — vazia. Todas as cores/tokens via CSS custom properties globais
+// (já reagem a tema light/dark via _css-custom-properties.scss).
+// Mantida só por compat com main.scss que faz @include matcha-divider-theme($theme).
+// ============================================================================
 
 @mixin matcha-divider-theme($theme) {
-  matcha-divider {
-    .matcha-divider-line {
-      border-color: var(--matcha-color-border, #{getGrey($theme)});
-    }
-  }
+    // Sem overrides — tokens globais bastam.
 }

package/components/matcha-drawer.scss

@@ -16,6 +16,17 @@
     to   { opacity: 0; }
 }
 
+// Shake feedback — disparado quando ESC/backdrop click são bloqueados por
+// disableClose=true. Sinaliza visualmente que a ação foi capturada mas
+// bloqueada (em vez de silent fail).
+@keyframes matcha-drawer-shake {
+    0%, 100% { transform: translate3d(0, 0, 0); }
+    20%      { transform: translate3d(-8px, 0, 0); }
+    40%      { transform: translate3d(8px, 0, 0); }
+    60%      { transform: translate3d(-4px, 0, 0); }
+    80%      { transform: translate3d(4px, 0, 0); }
+}
+
 @media (prefers-reduced-motion: reduce) {
     matcha-drawer,
     .matcha-drawer-backdrop,
@@ -25,6 +36,47 @@
     }
 }
 
+// ── Forced colors (Windows High Contrast) ──
+// rgba/blur/shadow somem; usar Canvas/CanvasText/SelectedItem.
+@media (forced-colors: active) {
+    matcha-drawer {
+        border: 1px solid CanvasText !important;
+        background: Canvas !important;
+        box-shadow: none !important;
+    }
+
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.7) !important;
+        backdrop-filter: none !important;
+    }
+
+    matcha-drawer:focus-visible {
+        outline: 2px solid CanvasText !important;
+    }
+}
+
+// ── Reduced transparency ──
+// Backdrop blur 4px → solid 85% pra usuários com dificuldade de ler sobre blur.
+@media (prefers-reduced-transparency: reduce) {
+    .matcha-drawer-backdrop {
+        background: rgba(0, 0, 0, 0.85) !important;
+        backdrop-filter: none !important;
+    }
+}
+
+// ── Print ──
+// Drawer + chrome flutuante somem em impressão.
+@media print {
+    matcha-drawer,
+    .matcha-drawer-backdrop {
+        display: none !important;
+    }
+
+    matcha-drawer-content {
+        margin: 0 !important;
+    }
+}
+
 // =============================================================================
 // Theme mixin
 // =============================================================================
@@ -77,38 +129,55 @@
 
     // ── Drawer ──
     matcha-drawer {
-        display: block;
+        display: flex;
+        flex-direction: column;
         position: absolute;
         top: 0;
         bottom: 0;
+        // Default position=start ancora à esquerda. End/bottom override via .matcha-drawer-end/.matcha-drawer-bottom.
+        // Sem o explícito, layouts que usam o drawer dentro de containers flexíveis renderizam fora da posição esperada.
+        left: 0;
         z-index: 10;
         outline: 0;
         box-sizing: border-box;
-        overflow-y: auto;
-        overflow-x: hidden;
+        // Drawer raiz não scrolla — só o body slot scrolla (overflow-y:auto).
+        // Header/footer são flex-shrink:0 e ficam fixos.
+        overflow: hidden;
+        // Defensivo: drawer nunca extrapola viewport mesmo com [width] absurdo.
+        max-width: 100vw;
         transform: translate3d(-100%, 0, 0);
         visibility: hidden;
+        // Width inclusa pra animar resize dinâmico (responsive token, [width] bound).
         transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
-                    visibility var(--matcha-duration-normal, 200ms) ease;
+                    visibility var(--matcha-duration-normal, 200ms) ease,
+                    width var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
         background-color: var(--matcha-color-surface, #{getSurface($theme)});
         color: var(--matcha-color-fg, #{getForeground($theme)});
         pointer-events: auto;
 
-        // Shadow level 3 (modals, drawers)
-        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+        // Shadow inline (3 stacked) — Figma DSV3 spec exato pro drawer.
+        // Não usa --matcha-shadow-3 token porque o Figma drawer também usa inline
+        // (não bound a um effect style). Side/push modes removem via override.
+        box-shadow:
+            0 0 1px rgba(0, 0, 0, 0.08),
+            0 4px 16px rgba(0, 0, 0, 0.12),
+            0 16px 48px rgba(0, 0, 0, 0.16);
 
         @if $is-dark {
-            border-right: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+            // surface-border é o token canônico DSV3 (rgba 255,255,255,0.12 dark).
+            // Era rgba(255,255,255,0.06) hardcoded — quase invisível e fora do token system.
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
         }
 
-        // Position end (right)
+        // Position end (right) — overrides left:0 default
         &.matcha-drawer-end {
+            left: auto;
             right: 0;
             transform: translate3d(100%, 0, 0);
 
             @if $is-dark {
                 border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
             }
         }
 
@@ -119,28 +188,65 @@
             right: 0;
             bottom: 0;
             width: 100%;
-            max-height: 90vh;
+            // 90% do container (relative ao matcha-drawer-container parent).
+            // Em produção (container = viewport via 100vh), == 90vh efetivo.
+            // Em playground/embed (container 360px), == 324px e respeita o frame.
+            // min() com fallback 90vh garante comportamento se parent for auto.
+            max-height: min(90vh, 90%);
             border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
             transform: translate3d(0, 100%, 0);
 
             @if $is-dark {
                 border-right: none;
-                border-top: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+                border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
             } @else {
                 border-right: none;
             }
 
-            // Drag handle
+            // safe-area-inset-bottom — iPhone X+ home indicator não cobre footer.
+            // Aplicado no slot footer porque é onde botões/CTAs ficam.
+            .matcha-drawer__slot--footer {
+                padding-block-end: max(var(--drawer-pad-y), env(safe-area-inset-bottom, var(--drawer-pad-y)));
+            }
+        }
+
+        // ── Drag handle (bottom sheet drag-to-dismiss) ──
+        // Real elemento (não pseudo) pra capturar pointer events. Renderiza só
+        // em position=bottom. 32×4 visual + 32×24 hit area via pad pra touch.
+        .matcha-drawer__handle {
+            display: none;
+            flex-shrink: 0;
+            width: 100%;
+            padding: var(--matcha-space-100, 8px) 0;
+            cursor: grab;
+            touch-action: none; // bloqueia scroll-pan vertical default no handle
+            user-select: none;
+
             &::before {
                 content: '';
                 display: block;
                 width: 32px;
                 height: 4px;
-                margin: var(--matcha-space-100, 8px) auto;
+                margin: 0 auto;
                 border-radius: var(--matcha-radius-sm, 2px);
                 background: var(--matcha-color-hint, #{getGrey($theme)});
                 opacity: 0.3;
             }
+
+            &:active {
+                cursor: grabbing;
+
+                &::before { opacity: 0.5; }
+            }
+        }
+
+        &.matcha-drawer-bottom .matcha-drawer__handle {
+            display: block;
+        }
+
+        // Drag em andamento — desabilita transition pra seguir o dedo 1:1.
+        &.matcha-drawer--dragging {
+            transition: none !important;
         }
 
         // Opened state
@@ -154,68 +260,113 @@
             z-index: 15;
         }
 
-        // Mode: side — fixed, no shadow, border only
+        // Mode: side — fixed, no shadow, border via surface-border token (DSV3 canônico).
         &.matcha-drawer-side {
             z-index: 10;
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
             box-shadow: none;
 
             &.matcha-drawer-end {
                 border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
             }
         }
 
-        // Mode: push — pushes content, border only
+        // Mode: push — pushes content, border only.
         &.matcha-drawer-push {
-            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
             box-shadow: none;
 
             &.matcha-drawer-end {
                 border-right: none;
-                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
             }
         }
 
-        // Inner container
-        .matcha-drawer-inner-container {
-            width: 100%;
-            height: 100%;
+        // Shake state — feedback visual quando ESC/backdrop bloqueados por disableClose.
+        // Animation roda 400ms, sobrepondo o transform: translate3d(0,0,0) do .matcha-drawer-opened.
+        // Após terminar, transform volta pro estado .matcha-drawer-opened normal.
+        &.matcha-drawer-shake {
+            animation: matcha-drawer-shake 400ms ease-in-out;
+        }
+
+        // ── Slot architecture (header / body / footer) ──
+        //
+        // CSS vars (consumer override sem !important):
+        //   --drawer-pad-x / --drawer-pad-y → padding uniforme de cada slot
+        //   --drawer-divider                → border entre slots (default mostra)
+        //
+        // Cada slot tem padding UNIFORME (não asymmetric). Header e footer
+        // ganham border-bottom/top respectivamente — separação visual clara
+        // sem depender de gaps assimétricos. Pattern canônico Material/Antd.
+        //
+        // Defaults simétricos 20/20 (calibração 2026-05-08): alinha com card md
+        // e segue padrão DS moderno (Material 16, shadcn 24, Notion 16 — 20 é o
+        // sweet spot). Antes era 24/20 assimétrico — quirky e sem motivo claro.
+        --drawer-pad-x: var(--matcha-space-250, 20px);
+        --drawer-pad-y: var(--matcha-space-250, 20px);
+        --drawer-divider: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+
+        .matcha-drawer__slot {
             display: flex;
             flex-direction: column;
+            min-width: 0;
+
+            // Hide vazio (Chrome 105+/Safari 15.4+/FF 121+).
+            &:not(:has(*)) {
+                display: none;
+            }
+        }
+
+        // Header — fixo no topo (não scrolla com body). Border-bottom separa do body.
+        // Elemento projetado pelo consumer recebe flex row via `> *`.
+        .matcha-drawer__slot--header {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-bottom: var(--drawer-divider);
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+            }
+        }
+
+        // Body — cresce e scrolla quando overflow.
+        .matcha-drawer__slot--body {
+            flex: 1 1 auto;
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            color: var(--matcha-color-fg, #{getForeground($theme)});
             -webkit-overflow-scrolling: touch;
+            gap: var(--matcha-space-150, 12px);
         }
-    }
 
-    // ── Drawer header ──
-    .matcha-drawer-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-        color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
+        // Footer — fixo no bottom. Border-top separa do body.
+        .matcha-drawer__slot--footer {
+            flex: 0 0 auto;
+            padding: var(--drawer-pad-y) var(--drawer-pad-x);
+            border-top: var(--drawer-divider);
 
-    // ── Drawer content ──
-    .matcha-drawer-content-area {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: var(--matcha-space-300, 24px);
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+            > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+                gap: var(--matcha-space-150, 12px);
+                width: 100%;
+                min-width: 0;
+                flex-wrap: wrap;
+            }
+        }
     }
 
-    // ── Drawer footer ──
-    .matcha-drawer-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--matcha-space-150, 12px);
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-        flex-shrink: 0;
-    }
 
     // ── Drawer content (main page) ──
     matcha-drawer-content {

package/components/matcha-drop-image.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-drop-image — Estilos completos vivem no próprio componente
+// (drop-image.component.scss com ViewEncapsulation.None).
+//
+// Esse arquivo mantém apenas o mixin no-op pra preservar a chamada @include
+// no main.scss sem quebrar. Quando o componente DSV3 amadurecer e precisar de
+// theme-specific styling (light/dark sass-side), retornar aqui.
+// =============================================================================
+
+@mixin matcha-drop-image-theme($theme) {
+  // No-op — estilos no componente.
+}