@inchurch/matcha-theme 22.20.0 → 22.21.0

package/components/matcha-form-field.scss

@@ -101,16 +101,26 @@
         }
     }
 
-    // ── Autofill (Chrome/Safari) — mata o background amarelo/azul e usa os tokens ──
-    // Browsers injetam background-color inline no -webkit-autofill (prioridade sobre CSS normal).
-    // O workaround padrão: box-shadow inset transparente (não sobreposto) + text-fill-color pro texto.
-    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de re-aplicar o bg.
+    // ── Autofill (Chrome/Safari) — mata o azul/amarelo nativo e usa os tokens ──
+    // Browsers pintam autofill com um background-color INTERNO que ignora
+    // `background-color` normal via CSS (prioridade de UA style). O workaround
+    // padrão cobre esse fundo com um box-shadow inset opaco do tamanho da caixa —
+    // e por isso a cor do box-shadow tem que ser OPACA e igual ao fundo real por
+    // trás do input, não `transparent` (bug anterior: transparent não cobre nada,
+    // o azul nativo do Chrome continuava visível por baixo -- ilegível no tema
+    // escuro, onde o contraste com o texto claro inverte). O input em si é
+    // `background-color: transparent` (linha ~33): o que aparece por trás é o
+    // matcha-card que envolve o form-field na esmagadora maioria dos usos deste
+    // painel -- por isso surface-card, não surface-bg (fundo da PÁGINA, um tom
+    // mais escuro/mais claro que o card e que deixaria um contorno visível).
+    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de
+    // reaplicar o bg nativo antes do box-shadow cobrir.
     input:-webkit-autofill,
     input:-webkit-autofill:hover,
     input:-webkit-autofill:focus,
     input:-webkit-autofill:active,
     textarea:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-box-shadow: 0 0 0 1000px var(--matcha-color-surface-card) inset !important;
         -webkit-text-fill-color: var(--matcha-color-text-primary) !important;
         caret-color: var(--matcha-color-primary) !important;
         transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;

package/components/matcha-tabs.scss

@@ -308,10 +308,17 @@ matcha-tabs {
     background: transparent;
     position: relative;
 
-    // Mobile-friendly horizontal scroll
-    &.matcha-tab-scrollable {
+    // ── Scroll horizontal é o DEFAULT do underline (desktop e mobile) ─────
+    // A linha de tabs nunca deve vazar do container: quando não cabe, rola.
+    // O input `scrollable` continua existindo (compat) mas virou no-op — o
+    // comportamento que ele ligava agora é o padrão.
+    // Exceção: com [responsiveGrid] ativo o nav vira grid multi-linha abaixo de
+    // 1024px e precisa de overflow visível pra crescer em altura — quem manda
+    // no overflow nesse caso é a regra de `.tabs-nav-responsive-grid`
+    // (matcha-components/.../tabs/tabs.component.scss).
+    &:not(.tabs-nav-responsive-grid) {
       overflow-x: auto;
-      scrollbar-width: thin;
+      overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
     }
 
@@ -381,6 +388,11 @@ matcha-tabs {
         font-weight: var(--matcha-weight-semibold, 600);
         line-height: var(--matcha-leading-title-sm, 22px);
         border-bottom-color: var(--matcha-color-accent);
+        // Ícone acompanha o label no Underline. matcha-icon não herda
+        // currentColor por design — resolve `--matcha-icon-color`, então o
+        // override é via CSS var (pattern documentado em matcha-icon.scss).
+        // Card NÃO faz isso: lá o selected é text-primary, não accent.
+        --matcha-icon-color: var(--matcha-color-accent);
       }
 
       // ── Disabled ──
@@ -404,7 +416,8 @@ matcha-tabs {
   }
 
   // ── Card Tab (canon Figma) ────────────────────────────────────────────
-  // Card 2px border accent quando selected · texto text-primary (NÃO accent).
+  // Card 2px border accent quando selected · texto e ícone accent também
+  // (decisão de Design 2026-08-04 — antes era text-primary).
   // Suporta horizontal (default) e vertical (icon stacked).
   .matcha-tab-card {
     display: flex;
@@ -482,12 +495,18 @@ matcha-tabs {
       }
       &:active:not(:disabled)::before { opacity: var(--matcha-tab-state-opacity-active); }
 
-      // ── Selecionado (Figma: border accent · texto text-primary NÃO accent) ──
+      // ── Selecionado (border + texto + ícone accent) ──
+      // Decisão de Design 2026-08-04: o selected do Card passa a ser accent no
+      // texto e no ícone também, não só na border — antes o texto era
+      // text-primary (canon Figma antigo). Figma `matcha/tabs` pendente de
+      // atualização; até lá o código é a fonte da verdade deste estado.
       &.active,
       &[aria-selected="true"] {
         border-color: var(--matcha-color-accent);
-        color: var(--matcha-color-fg);
+        color: var(--matcha-color-accent);
         font-weight: var(--matcha-weight-medium, 500);
+        // matcha-icon não herda currentColor — override via CSS var.
+        --matcha-icon-color: var(--matcha-color-accent);
       }
 
       // ── Disabled ──
@@ -515,6 +534,31 @@ matcha-tabs {
     .matcha-tab-item matcha-icon { flex-shrink: 0; }
   }
 
+  // ── Scrollbar do tablist que rola ─────────────────────────────────────
+  // Fonte única da APARÊNCIA do scroll horizontal — vale pro `scrollable` e
+  // pro grid responsivo no desktop, que só declaram o overflow. A barra
+  // nativa do OS (grossa, com setas) competia visualmente com as tabs.
+  // Propriedades são inertes quando não há overflow, então podem ficar nos
+  // dois tipos sem condicional.
+  .matcha-tab-underline,
+  .matcha-tab-card {
+    scrollbar-width: thin;
+    scrollbar-color: var(--matcha-color-surface-border) transparent;
+
+    &::-webkit-scrollbar {
+      height: var(--matcha-space-050, 4px);
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--matcha-color-surface-border);
+      border-radius: var(--matcha-radius-pill, 9999px);
+    }
+  }
+
   // ── Badge (notificações, contagens) ───────────────────────────────────
   .matcha-tab-item__badge {
     display: inline-flex;
@@ -578,13 +622,9 @@ matcha-tabs {
   }
 }
 
-// ── Mobile: Underline auto-scrollable em viewports estreitos ────────────
-@media (max-width: 639px) {
-  .matcha-tab-underline:not(.matcha-tab-scrollable) {
-    overflow-x: auto;
-    scrollbar-width: thin;
-  }
-}
+// (Antes havia aqui um bloco @media (max-width: 639px) ligando overflow-x no
+// underline "não scrollable" — redundante desde que o scroll virou o default do
+// tipo em qualquer viewport.)
 
 // ── Reduced motion (WCAG 2.2.2) ─────────────────────────────────────────
 @media (prefers-reduced-motion: reduce) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.20.0",
+  "version": "22.21.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {