@inchurch/matcha-theme 22.7.0 → 22.9.0

package/components/matcha-button-toggle.scss

@@ -217,7 +217,7 @@
         "primary", "accent", "success", "warn", "danger", "info", "disabled";
 
 matcha-button-toggle {
-    display: flex;
+    display: inline-flex;
     @include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
     @include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
     @include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
@@ -229,7 +229,10 @@ matcha-button-toggle {
         a[matcha-button] {
             &:focus-visible:not([disabled]):not([disabled="true"]) {
                 outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-                outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+                // Inset (negativo): o .button-group é scroll container (overflow-x)
+                // e clipa qualquer outline desenhado FORA do botão — anel interno
+                // fica 100% visível mesmo com rolagem.
+                outline-offset: calc(-1 * (var(--matcha-state-focus-ring-width, 2px) + var(--matcha-state-focus-ring-offset, 2px)));
             }
         }
     }
@@ -295,7 +298,7 @@ matcha-button-toggle {
 
             &:focus-visible {
                 outline: 2px solid CanvasText !important;
-                outline-offset: 2px;
+                outline-offset: -4px; // inset — scroll container clipa outline externo
             }
         }
     }
@@ -323,23 +326,65 @@ matcha-button-toggle {
 // Structural rules — aligned with Figma matcha/button-toggle:
 //   Gap=Segmented: buttons share borders (1px hairline between, 2px thin outside)
 //   Gap=Separated: buttons stand apart with gap=space/200 and full radius-lg each
+//   Width: hug content by default (Figma); [stretched] opta pelo fill 100%
+//          com botões dividindo a largura igualmente.
 // =============================================================================
 matcha-button-toggle {
-    display: block;
-    width: 100%;
+    display: inline-flex;
+    max-width: 100%;
 
     .button-group {
         display: flex;
-        width: 100%;
         align-items: stretch;
+        max-width: 100%;
+
+        // ── Overflow: botão NUNCA é esmagado — no pior caso, rola ─────────
+        // flex-shrink default (1) comprimia o conteúdo dos botões quando o
+        // container aperta. Botões mantêm largura natural (flex: 0 0 auto +
+        // nowrap) e o grupo cria rolagem horizontal.
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+
+        // Scrollbar fino e temado (mesmo padrão do matcha-form-field) —
+        // só aparece quando há overflow real.
+        scrollbar-width: thin;                                          // Firefox
+        scrollbar-color: var(--matcha-color-text-placeholder) transparent;
+        &::-webkit-scrollbar              { height: 6px; }
+        &::-webkit-scrollbar-track        { background: transparent; }
+        &::-webkit-scrollbar-thumb {
+            background: var(--matcha-color-text-placeholder);
+            border-radius: 3px;
+        }
+        &::-webkit-scrollbar-thumb:hover  { background: var(--matcha-color-text-secondary); }
 
-        // Children flex-share — each button takes equal width across the row
         > button[matcha-button],
         > a[matcha-button] {
-            flex: 1 1 0;
-            min-width: 0;
+            flex: 0 0 auto;
+            white-space: nowrap;
+        }
+    }
+
+    // ── Stretched (opt-in via [stretched]) — fill 100% do container ───────
+    // Era o default até a 20.x; agora requer a propriedade.
+    &[stretched]:not([stretched="false"]) {
+        display: flex;
+        width: 100%;
+
+        .button-group {
+            width: 100%;
+
+            // Children flex-share — each button takes equal width across the row.
+            // SEM min-width: 0 — o botão nunca encolhe abaixo do conteúdo
+            // (min-content); quando nem isso cabe, o overflow-x do grupo rola.
+            > button[matcha-button],
+            > a[matcha-button] {
+                flex: 1 1 0;
+            }
         }
+    }
 
+    .button-group {
         // ── Separated (default: gap = space/200) ──────────────────────────
         // Each button keeps its own full radius and border-thin (2px).
         // gap already handled by flex gap via [gap] binding in TS.

package/components/matcha-buttons.scss

@@ -476,12 +476,14 @@ a[matcha-link] {
 
     // ── Touch targets (WCAG 2.5.5: 44x44 mínimo em coarse pointers) ──
     // XS (28), SM (32), MD (40) ficam abaixo de 44px — expande hit area invisível.
+    // NÃO re-declarar `position` aqui: o bloco estrutural acima já garante botão
+    // positioned (relative), e o ::after ancora em qualquer positioned. Re-assertar
+    // com [size] sobe a especificidade pra (0,2,1) e quebra consumidores que
+    // reposicionam o botão com absolute (close mobile do notification/banner).
     @media (pointer: coarse) {
         &[size="xs"],
         &[size="sm"], &[size="tiny"],
         &[size="md"], &[size="small"] {
-            position: relative;
-
             &::after {
                 content: '';
                 position: absolute;

package/components/matcha-calendar.scss

@@ -16,8 +16,15 @@
   }
 
   // ── Header ──────────────────────────────────────────────
-  .matcha-calendar-header-label {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
+  // Fundo accent-alpha em repouso (não só no hover) — sinaliza de cara que o
+  // label do mês/ano é clicável (abre view ano/década), não só um título.
+  // Seletor com o pai (.matcha-calendar-header) — precisa de +especificidade
+  // que o próprio `all: unset` da célula, que carrega DEPOIS (CSS de
+  // componente ViewEncapsulation.None sempre entra depois do CSS global do
+  // tema) e tem a mesma especificidade se for só a classe sozinha.
+  .matcha-calendar-header .matcha-calendar-header-label {
+    color: var(--matcha-color-accent);
+    background-color: var(--matcha-color-accent-alpha);
 
     &:hover {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));

package/components/matcha-icon.scss

@@ -27,8 +27,13 @@ matcha-icon[library="symbols"] {
   height: var(--matcha-icon-size-md);
   line-height: var(--matcha-icon-size-md);
 
+  // Canonico e por extenso (tiny/small/medium/large/huge) — regra DS-wide, os
+  // infixes xs/sm/md/lg/xl sao reservados pra breakpoint. Abreviado aceito aqui
+  // so como alias @deprecated (mesmo valor renderizado, 1:1 com size-alias.ts).
   &.i-size-xs,
-  &[size="xs"] {
+  &.i-size-tiny,
+  &[size="xs"],
+  &[size="tiny"] {
     font-size: var(--matcha-icon-size-xs, #{$icon-size-xs});
     width: var(--matcha-icon-size-xs, #{$icon-size-xs});
     height: var(--matcha-icon-size-xs, #{$icon-size-xs});
@@ -36,7 +41,9 @@ matcha-icon[library="symbols"] {
   }
 
   &.i-size-sm,
-  &[size="sm"] {
+  &.i-size-small,
+  &[size="sm"],
+  &[size="small"] {
     font-size: var(--matcha-icon-size-sm);
     width: var(--matcha-icon-size-sm);
     height: var(--matcha-icon-size-sm);
@@ -44,7 +51,9 @@ matcha-icon[library="symbols"] {
   }
 
   &.i-size-md,
-  &[size="md"] {
+  &.i-size-medium,
+  &[size="md"],
+  &[size="medium"] {
     font-size: var(--matcha-icon-size-md);
     width: var(--matcha-icon-size-md);
     height: var(--matcha-icon-size-md);
@@ -52,7 +61,9 @@ matcha-icon[library="symbols"] {
   }
 
   &.i-size-lg,
-  &[size="lg"] {
+  &.i-size-large,
+  &[size="lg"],
+  &[size="large"] {
     font-size: var(--matcha-icon-size-lg);
     width: var(--matcha-icon-size-lg);
     height: var(--matcha-icon-size-lg);
@@ -60,7 +71,9 @@ matcha-icon[library="symbols"] {
   }
 
   &.i-size-xl,
-  &[size="xl"] {
+  &.i-size-huge,
+  &[size="xl"],
+  &[size="huge"] {
     font-size: var(--matcha-icon-size-xl);
     width: var(--matcha-icon-size-xl);
     height: var(--matcha-icon-size-xl);

package/components/matcha-notification.scss

@@ -299,7 +299,7 @@
   &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
 }
 
-// ── Mobile (≤599px) ─────────────────────────────────────────────────────
+// ── Mobile (xs, ≤479px) ─────────────────────────────────────────────────
 // Stack vertical (mesmo padrão do matcha-banner mobile):
 //   [icon na 1ª linha (align-self start)]
 //   → [body (title + description)]

package/components/matcha-panel.scss

@@ -100,15 +100,22 @@
 // ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
 // O panel com calendar vira um painel full-width grudado no rodapé da tela,
 // com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
+//
+// IMPORTANTE: escopar ao overlay ABERTO (`:not([hidden])`). O overlay fica sempre
+// no DOM (o `display: block` da base anula o atributo [hidden] de propósito — o
+// posicionamento mede o conteúdo fechado), e o <matcha-calendar> do matcha-date é
+// renderizado mesmo com o picker fechado. Sem o escopo, qualquer página com um
+// matcha-date pintava o scrim blurred permanente em mobile e o `pointer-events:
+// auto` bloqueava TODOS os cliques da tela.
 @media (max-width: 639px) {
-    .matcha-panel-overlay:has(.matcha-calendar) {
+    .matcha-panel-overlay:not([hidden]):has(.matcha-calendar) {
         pointer-events: auto !important;                   // precisa capturar o backdrop
         background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
         backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
         animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
     }
 
-    .matcha-panel-pane:has(.matcha-calendar) {
+    .matcha-panel-overlay:not([hidden]) .matcha-panel-pane:has(.matcha-calendar) {
         position: fixed !important;
         inset: auto 0 0 0 !important;
         top: auto !important;

package/components/matcha-tabs.scss

@@ -296,8 +296,10 @@ matcha-tabs {
   }
 
   // ── Underline Tab (1:1 Figma DSV3 — border per item) ──────────────────
-  // Cada item tem bg surface-card + border-bottom 4px (surface-border default,
-  // accent selected). Container não tem border próprio (canon Figma).
+  // Item transparente + border-bottom (surface-border default, accent
+  // selected) — sem bg próprio: o retângulo de surface-card destoava quando
+  // o tablist ficava sobre superfície de outro tom (painel, jul/2026).
+  // Container não tem border próprio (canon Figma).
   // Sliding indicator absoluto desliza entre tabs (Material 3 style).
   // Sempre horizontal (vertical não é canon).
   .matcha-tab-underline {
@@ -340,7 +342,7 @@ matcha-tabs {
       // Border bottom 2px — per item (track surface-border, slider sobrepõe accent)
       border-bottom: var(--matcha-border-thin, 2px) solid
         var(--matcha-color-surface-border);
-      background: var(--matcha-color-surface-card);
+      background: transparent;
       cursor: pointer;
       position: relative;
       overflow: hidden;

package/package.json

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