@inchurch/matcha-theme 22.6.1 → 22.8.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));
@@ -104,6 +111,24 @@
       background-color: transparent;
       box-shadow: none;
     }
+
+    // Marcador de dia (dot). is-selected é outlined (não filled, ver acima) então
+    // convive sem ajuste; range anchors SÃO filled com --matcha-color-accent — mesma
+    // cor invisibilizaria o dot, por isso o contraste-swap abaixo.
+    &.is-marked::after {
+      background-color: var(--matcha-color-calendar-marker-bg, var(--matcha-color-accent));
+    }
+
+    &.is-range-start.is-marked::after,
+    &.is-range-end.is-marked::after {
+      background-color: var(--matcha-color-calendar-marker-contrast-bg, var(--matcha-color-accent-contrast));
+      box-shadow: 0 0 0 1px var(--matcha-color-accent);
+    }
+
+    &.is-disabled.is-marked::after,
+    &.is-other-month.is-marked::after {
+      background-color: var(--matcha-color-interaction-disabled-fg);
+    }
   }
 
   // ── Grid views (Year / Decade) ──────────────────────────
@@ -163,7 +188,7 @@
     border: 1px solid CanvasText;
     background: Canvas;
 
-    .matcha-calendar-day-cell {
+    .matcha-calendar-cell {
       border: 1px solid transparent;
 
       &.is-selected {
@@ -182,6 +207,11 @@
         color: GrayText !important;
       }
 
+      &.is-marked::after {
+        background: CanvasText !important;
+        forced-color-adjust: none;
+      }
+
       &:focus-visible {
         outline: 2px solid CanvasText !important;
         outline-offset: -2px;
@@ -214,5 +244,10 @@
     box-shadow: none !important;
     border: 1px solid currentColor;
     break-inside: avoid;
+
+    .matcha-calendar-cell.is-marked::after {
+      background: CanvasText;
+      box-shadow: none;
+    }
   }
 }

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-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.6.1",
+  "version": "22.8.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {