@inchurch/matcha-theme 20.0.11 → 20.276.0

package/components/matcha-snack-bar.scss

@@ -2,14 +2,19 @@
 
 // =============================================================================
 // matcha-snack-bar.scss — Snack Bar / Toast (floating feedback)
-// Aligned with Figma matcha/snack-bar:
-//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
-//   Structure: Icon + Body(Title + Description) + CTA Button + Close
-//   Bg: surface/card solid + border-left status color + shadow level-3
+// 1:1 com Figma DSV3 `matcha/snackbar` (5902:13641):
+//   Status (5): Erro · Alerta · Sucesso · Ideia · Neutro
+//   Estrutura single-row 68h: Icon + Body(Title + Description) + CTA + Close
+//   pad 12/16, gap 12; border-left 4px status color; bg surface-card sólido.
 //
-// Diferença do Notification:
-//   Notification = in-page (bg alpha 10%, sem shadow)
-//   Snackbar = floating (bg sólido, shadow, position fixed)
+// Buttons internos = canon DSV3:
+//   - Action: <button matcha-button variant="outline" size="sm"> → estilo vem do matcha-buttons.scss
+//   - Close:  <button matcha-icon-button variant="ghost" size="sm"> → idem
+// Por isso este arquivo NÃO duplica width/height/border/states pros buttons —
+// só faz flex-shrink: 0 pra não esticar.
+//
+// vs Notification: Notification = in-page (bg alpha, sem shadow); Snackbar = floating
+// (bg sólido, shadow level-3, position fixed).
 // =============================================================================
 
 // ── Structural ──────────────────────────────────────────────────────────────
@@ -19,41 +24,50 @@ matcha-snack-bar {
   z-index: var(--matcha-z-snackbar, 9999);
   right: var(--matcha-space-300, 24px);
   top: var(--matcha-space-300, 24px);
-  transform: translateX(calc(100% + 40px));
+  // Enter animation: slide + scale-in + fade (canon Material 3 emphasized).
+  // Mais natural que slide-only — sinaliza "entrou no plano" sem ser distrativo.
+  transform: translateY(-8px) scale(0.96);
   opacity: 0;
   pointer-events: none;
   transition:
-    opacity var(--matcha-duration-moderate, 300ms) ease,
-    transform var(--matcha-duration-moderate, 300ms) ease;
+    opacity var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
   min-width: var(--matcha-snackbar-min-width, 360px);
   max-width: var(--matcha-snackbar-max-width, 520px);
+  touch-action: pan-y; // permite swipe horizontal pra dismiss
 
   // ── Position variants ──
   &[position="bottom"] {
     top: auto;
     bottom: var(--matcha-space-300, 24px);
+    transform: translateY(8px) scale(0.96);
   }
 
   &[position="center"] {
     right: auto;
     left: 50%;
-    transform: translateX(-50%) translateY(-20px);
+    transform: translateX(-50%) translateY(-8px) scale(0.96);
   }
 
   // ── Visible state ──
   &.matcha-snack-bar-visible {
     opacity: 1;
     pointer-events: auto;
-    transform: translateX(0);
+    transform: translateY(0) scale(1);
+  }
+
+  &[position="bottom"].matcha-snack-bar-visible {
+    transform: translateY(0) scale(1);
   }
 
   &[position="center"].matcha-snack-bar-visible {
-    transform: translateX(-50%) translateY(0);
+    transform: translateX(-50%) translateY(0) scale(1);
   }
 }
 
-// ── Content container ───────────────────────────────────────────────────────
-
+// ── Content container (single-row 68h Figma) ────────────────────────────────
+// Frosted glass: bg semi-transparente + backdrop-filter blur — moderniza sem
+// quebrar a semântica de "não-bloqueante" (blur só atrás do card, não na tela).
 .matcha-snack-bar-content {
   display: flex;
   align-items: center;
@@ -62,9 +76,16 @@ matcha-snack-bar {
   border-radius: var(--matcha-radius-lg, 8px);
   border: var(--matcha-border-hairline, 1px) solid transparent;
   border-left: var(--matcha-border-medium, 4px) solid transparent;
+  box-sizing: border-box;
+  // min-height = 68 (figma single-row); cresce se body wrappar.
+  min-height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-350, 28px));
+  // Frosted glass — funciona em Safari/Chrome/Firefox 103+; degrade gracioso
+  // (bg sólido sobrescreve no theme mixin via fallback).
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  backdrop-filter: blur(12px) saturate(140%);
 }
 
-// ── Icon ────────────────────────────────────────────────────────────────────
+// ── Icon (24×24 outlined leading) ───────────────────────────────────────────
 
 .matcha-snack-bar-icon {
   flex-shrink: 0;
@@ -75,7 +96,7 @@ matcha-snack-bar {
   height: var(--matcha-icon-size-md, 24px);
 }
 
-// ── Body (Title + Description) ──────────────────────────────────────────────
+// ── Body (Title + Description, gap 4) ───────────────────────────────────────
 
 .matcha-snack-bar-body {
   flex: 1;
@@ -99,80 +120,17 @@ matcha-snack-bar {
   line-height: var(--matcha-leading-body-md, 20px);
 }
 
-// ── CTA Button ──────────────────────────────────────────────────────────────
-
+// ── CTA Action button — só flex-shrink (estilo vem do matcha-button). ──────
 .matcha-snack-bar-action {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  padding: 0 var(--matcha-space-100, 8px);
-  border: var(--matcha-border-thin, 2px) solid currentColor;
-  border-radius: var(--matcha-radius-lg, 8px);
-  background: transparent;
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-button-sm, 13px);
-  font-weight: var(--matcha-weight-medium, 500);
-  letter-spacing: 0.2px;
-  cursor: pointer;
-  color: inherit;
-  position: relative;
-  overflow: hidden;
-
-  // State layer
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: currentColor;
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
 }
 
-// ── Close button ────────────────────────────────────────────────────────────
-
+// ── Close icon-button — só flex-shrink (estilo vem do matcha-icon-button). ─
 .matcha-snack-bar-close {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  border-radius: var(--matcha-radius-pill, 9999px);
-  color: inherit;
-  opacity: 0.7;
-  position: relative;
-  overflow: hidden;
-  transition: opacity var(--matcha-duration-instant, 80ms) linear;
-
-  // State layer
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: currentColor;
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-  &:hover { opacity: 1; }
 }
 
-// ── Responsive ──────────────────────────────────────────────────────────────
-
+// ── Responsive (mobile: stretch full-width) ────────────────────────────────
 @include media-breakpoint('xs') {
   matcha-snack-bar {
     left: var(--matcha-space-200, 16px);
@@ -183,17 +141,14 @@ matcha-snack-bar {
 }
 
 // ── Reduced motion ──────────────────────────────────────────────────────────
-
 @media (prefers-reduced-motion: reduce) {
-  matcha-snack-bar,
-  .matcha-snack-bar-close::before,
-  .matcha-snack-bar-action::before {
+  matcha-snack-bar {
     transition: none;
   }
 }
 
 // =============================================================================
-// Theme mixin
+// Theme mixin — status colors via [color] attr
 // =============================================================================
 
 @mixin matcha-snack-bar-theme($theme) {
@@ -201,66 +156,104 @@ matcha-snack-bar {
 
   matcha-snack-bar {
 
-    // ── Focus rings ──
-    .matcha-snack-bar-close:focus-visible,
-    .matcha-snack-bar-action:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-
-    // ── Base (no status) ──
+    // ── Base (neutral / no specific status) ──
+    // Bg semi-transparente pro frosted glass (backdrop-filter) ter o que blurrar.
+    // Fallback sólido em browsers sem suporte (degrade gracioso via @supports).
     .matcha-snack-bar-content {
-      background: var(--matcha-color-surface, #{getSurface($theme)});
+      background: var(--matcha-color-surface-card-alpha, #{rgba(if($is-dark, #1C1F26, #FFFFFF), 0.82)});
       color: var(--matcha-color-fg, #{getForeground($theme)});
       border-color: var(--matcha-color-border, #{getGrey($theme)});
       box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
     }
 
-    .matcha-snack-bar-title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+    // Fallback sólido pra browsers sem backdrop-filter.
+    @supports not (backdrop-filter: blur(1px)) {
+      .matcha-snack-bar-content {
+        background: var(--matcha-color-surface, #{getSurface($theme)});
+      }
     }
 
-    .matcha-snack-bar-description {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
+    .matcha-snack-bar-title       { color: var(--matcha-color-fg, #{getForeground($theme)}); }
+    .matcha-snack-bar-description { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
 
-    // ── Status variants: border-left + icon/action color ──
+    // ── Status — canon DSV3 (mesmo pattern do matcha-notification):
+    //    1. `border-left-color` → cor do status na borda esquerda
+    //    2. `--matcha-icon-color` → matcha-icon herda via custom property
+    //    3. `--matcha-button-color-*` no .matcha-snack-bar-action → matcha-button
+    //       (Outline SM) renderiza com border/text/state-layer todos na status color
+    //
+    // Reforça semantic: icon + border-left + CTA = mesma cor.
 
-    &[color="error"] .matcha-snack-bar-content,
-    &[color="danger"] .matcha-snack-bar-content {
+    &[color="error"]   .matcha-snack-bar-content,
+    &[color="danger"]  .matcha-snack-bar-content {
       border-left-color: var(--matcha-color-danger, #{getDanger($theme)});
-
-      .matcha-snack-bar-icon,
-      .matcha-snack-bar-action { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+      --matcha-icon-color: var(--matcha-color-danger, #{getDanger($theme)});
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-danger);
+        --matcha-button-color-hover: var(--matcha-color-danger-hover);
+        --matcha-button-color-pressed: var(--matcha-color-danger-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-danger-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-danger-alpha);
+        --matcha-button-color-edge: var(--matcha-color-danger);
+        color: var(--matcha-color-danger);
+      }
     }
 
     &[color="warning"] .matcha-snack-bar-content,
-    &[color="warn"] .matcha-snack-bar-content {
+    &[color="warn"]    .matcha-snack-bar-content {
       border-left-color: var(--matcha-color-warn, #{getWarn($theme)});
-
-      .matcha-snack-bar-icon,
-      .matcha-snack-bar-action { color: var(--matcha-color-warn, #{getWarn($theme)}); }
+      --matcha-icon-color: var(--matcha-color-warn, #{getWarn($theme)});
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-warn);
+        --matcha-button-color-hover: var(--matcha-color-warn-hover);
+        --matcha-button-color-pressed: var(--matcha-color-warn-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-warn-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-warn-alpha);
+        --matcha-button-color-edge: var(--matcha-color-warn);
+        color: var(--matcha-color-warn);
+      }
     }
 
     &[color="success"] .matcha-snack-bar-content {
       border-left-color: var(--matcha-color-success, #{getSuccess($theme)});
-
-      .matcha-snack-bar-icon,
-      .matcha-snack-bar-action { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+      --matcha-icon-color: var(--matcha-color-success, #{getSuccess($theme)});
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-success);
+        --matcha-button-color-hover: var(--matcha-color-success-hover);
+        --matcha-button-color-pressed: var(--matcha-color-success-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-success-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-success-alpha);
+        --matcha-button-color-edge: var(--matcha-color-success);
+        color: var(--matcha-color-success);
+      }
     }
 
     &[color="info"] .matcha-snack-bar-content {
       border-left-color: var(--matcha-color-info, #{getInfo($theme)});
-
-      .matcha-snack-bar-icon,
-      .matcha-snack-bar-action { color: var(--matcha-color-info, #{getInfo($theme)}); }
+      --matcha-icon-color: var(--matcha-color-info, #{getInfo($theme)});
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-info);
+        --matcha-button-color-hover: var(--matcha-color-info-hover);
+        --matcha-button-color-pressed: var(--matcha-color-info-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-info-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-info-alpha);
+        --matcha-button-color-edge: var(--matcha-color-info);
+        color: var(--matcha-color-info);
+      }
     }
 
+    // Neutro — bg/border surface; icon + CTA mantêm cor padrão (não-status).
     &[color="neutral"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-border, #{getGrey($theme)});
+      border-left-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+      --matcha-icon-color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
 
-      .matcha-snack-bar-icon { color: var(--matcha-color-text-hint, #{getBlueGrey($theme)}); }
-      .matcha-snack-bar-action { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+      .matcha-snack-bar-action {
+        color: var(--matcha-color-text-label);
+      }
     }
   }
 }

package/components/matcha-spinner.scss

@@ -1,78 +1,97 @@
 // =============================================================================
-// matcha-spinner.scss — Spinner loading indicator
-// Aligned with Figma matcha/spinner: Size(XS/SM/MD/LG/XL)
+// matcha-spinner.scss — Spinner loading indicator (1:1 com Figma DSV3)
+// =============================================================================
+// Spec canônica matcha/spinner (DSV3):
+//   • Sizes: XS 24/3 · SM 32/4 · MD 40/5 · LG 48/5 · XL 56/5 (px / stroke)
+//   • Track (rail): #282C34 (matcha/color/disabled-bg dark)
+//   • Arc (indicator): cor semântica do prop [color] — 6 opções DSV3
+//
+// IMPORTANTE: animação de rotação NÃO está aqui — vem via WAAPI no
+// spinner.component.ts (rotação de 360° infinita). Esse arquivo só pinta
+// cores e ajusta o offset do arc determinate.
 // =============================================================================
 
-@mixin generate-matcha-spinner-size-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+@mixin matcha-spinner-theme($theme) {
+    $semantic-colors: (
+        accent:  getAccent,
+        primary: getPrimary,
+        success: getSuccess,
+        warn:    getWarn,
+        danger:  getDanger,
+        info:    getInfo,
+    );
 
-            &[size#{$infix}="xs"],
-            &[size#{$infix}="tiny"] {
-                svg { width: px-to-rem(24px); height: px-to-rem(24px); }
-            }
+    matcha-spinner {
+        --matcha-spinner-fill: var(--matcha-color-accent, #{getAccent($theme)});
 
-            &[size#{$infix}="sm"],
-            &[size#{$infix}="small"] {
-                svg { width: px-to-rem(32px); height: px-to-rem(32px); }
+        @each $name, $fn in $semantic-colors {
+            &[color="#{$name}"] {
+                --matcha-spinner-fill: var(--matcha-color-#{$name}, #{call($fn, $theme)});
             }
+        }
+    }
+}
 
-            &[size#{$infix}="md"],
-            &[size#{$infix}="medium"] {
-                svg { width: px-to-rem(40px); height: px-to-rem(40px); }
-            }
+.matcha-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
 
-            &[size#{$infix}="lg"],
-            &[size#{$infix}="large"] {
-                svg { width: px-to-rem(48px); height: px-to-rem(48px); }
-            }
+    .spinner-wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-            &[size#{$infix}="xl"],
-            &[size#{$infix}="huge"] {
-                svg { width: px-to-rem(56px); height: px-to-rem(56px); }
-            }
-        }
+    .spinner {
+        display: block;
+    }
+
+    // Determinate: SVG rotacionado -90deg pra arc começar em 12h (default SVG é 3h).
+    .spinner--determinate {
+        transform: rotate(-90deg);
     }
 
-    &:not([size]) {
-        svg { width: px-to-rem(40px); height: px-to-rem(40px); }
+    .spinner-track {
+        stroke: var(--matcha-color-disabled-bg, #282C34);
+    }
+
+    .spinner-arc {
+        stroke: var(--matcha-spinner-fill);
+        transition: stroke-dashoffset var(--matcha-duration-fast, 200ms) ease;
     }
 }
 
-// Theme mixin (kept from original — color loop)
-@mixin matcha-spinner-theme($theme) {
-    $color-functions: (
-        red: getRed, pink: getPink, purple: getPurple, deep-purple: getDeepPurple,
-        indigo: getIndigo, blue: getBlue, light-blue: getLightBlue, cyan: getCyan,
-        teal: getTeal, green: getGreen, light-green: getLightGreen, lime: getLime,
-        yellow: getYellow, amber: getAmber, orange: getOrange, deep-orange: getDeepOrange,
-        brown: getBrown, grey: getGrey, blue-grey: getBlueGrey,
-        primary: getPrimary, accent: getAccent, success: getSuccess,
-        warn: getWarn, danger: getDanger, info: getInfo,
-    );
+// ── High contrast ──────────────────────────────────────────────────────────
+@media (prefers-contrast: high) {
+    .matcha-spinner .spinner-track {
+        stroke: var(--matcha-color-text-secondary, #888);
+    }
+}
 
-    matcha-spinner {
-        @include generate-matcha-spinner-size-classes($helper-breakpoints);
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+    .matcha-spinner {
+        .spinner-track  { stroke: GrayText !important; }
+        .spinner-circle { stroke: CanvasText !important; }
+    }
+}
 
-        @each $colorName, $colorFn in $color-functions {
-            &[color="#{'' + $colorName}"] {
-                svg circle {
-                    stroke: call(#{$colorFn}, $theme);
-                }
-            }
-        }
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+    .matcha-spinner {
+        animation: none !important;
 
-        &:not([color]) {
-            svg circle {
-                stroke: var(--matcha-color-accent, #{getAccent($theme)});
-            }
-        }
+        .spinner-circle { animation: none !important; }
     }
+}
 
-    @media (prefers-reduced-motion: reduce) {
-        matcha-spinner svg {
-            animation-duration: 0s;
-        }
+// ── Print ──
+// Spinner é loading — não tem semântica em papel.
+@media print {
+    matcha-spinner,
+    .matcha-spinner {
+        display: none !important;
     }
 }

package/components/matcha-status-pill.scss

@@ -0,0 +1,82 @@
+// =============================================================================
+// matcha-status-pill — tons com cor + bg-alpha + halo no dot por estado.
+// Mapeamento Figma DSV3 (matcha/status-pill, fileKey i04CyWczuVctwRjE5VbJh7).
+// =============================================================================
+
+matcha-status-pill {
+    // ── Active (success) ────────────────────────────────────────────────────
+    &[tone="active"] {
+        color: var(--matcha-color-success, #16a34a);
+        background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
+        border-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.30));
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-success, #16a34a);
+            box-shadow: 0 0 0 3px var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.20));
+        }
+
+        &[interactive]:hover:not([disabled]) {
+            background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.16));
+            border-color: var(--matcha-color-success);
+        }
+    }
+
+    // ── Pending (warn) ──────────────────────────────────────────────────────
+    &[tone="pending"] {
+        color: var(--matcha-color-warn, #f59e0b);
+        background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
+        border-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.30));
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-warn, #f59e0b);
+            box-shadow: 0 0 0 3px var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.20));
+        }
+
+        &[interactive]:hover:not([disabled]) {
+            background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.16));
+            border-color: var(--matcha-color-warn);
+        }
+    }
+
+    // ── Refused (danger) ────────────────────────────────────────────────────
+    &[tone="refused"] {
+        color: var(--matcha-color-danger, #ef4444);
+        background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
+        border-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.30));
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-danger, #ef4444);
+            box-shadow: 0 0 0 3px var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.20));
+        }
+
+        &[interactive]:hover:not([disabled]) {
+            background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.16));
+            border-color: var(--matcha-color-danger);
+        }
+    }
+
+    // ── Inactive / Unknown (cinza muted) ────────────────────────────────────
+    &[tone="inactive"],
+    &[tone="unknown"] {
+        color: var(--matcha-color-text-muted, #9ca3af);
+        background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.04));
+        border-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.14));
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-text-muted, #9ca3af);
+        }
+
+        &[interactive]:hover:not([disabled]) {
+            background-color: var(--matcha-color-surface-bg);
+            border-color: var(--matcha-color-text-muted);
+        }
+    }
+
+    // Unknown ainda diferencia com itálico + dot opaco.
+    &[tone="unknown"] {
+        font-style: italic;
+        font-weight: var(--matcha-weight-regular, 400);
+
+        .matcha-status-pill__dot { opacity: 0.5; }
+    }
+}