@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-notification.scss

@@ -1,413 +1,413 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-notification.scss — In-page notification banner / alert
-// Aligned with Figma matcha/notification:
-//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
-//   × Slots: icon, title, description, CTA button, close
-// Angular: matcha-notification
-// =============================================================================
-
-@mixin matcha-notification-theme($theme) {
-
-  // Title sempre text-primary, description sempre text-secondary (Figma DSV3).
-  // Texto fica legível porque bg é alpha 10% — usuário lê o texto sobre o
-  // surface real, não sobre a tinta.
-  .matcha-notification__title {
-    color: var(--matcha-color-text-primary);
-  }
-
-  .matcha-notification__description {
-    color: var(--matcha-color-text-secondary);
-  }
-
-  // Close icon — color icon/default (token DSV3 #5f656b light / #9aa0a6 dark).
-  .matcha-notification__close {
-    color: var(--matcha-color-icon-default, var(--matcha-color-text-secondary));
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-  }
-
-  // ── Status × cores (Figma 1:1) ──
-  // Tokens canon: --matcha-color-{danger|warn|success|info} (sem prefix "feedback-").
-  // --matcha-icon-color cascateia pros matcha-icon (filhos do banner).
-  // --matcha-button-color* setado em button[matcha-notification-action] — selector
-  // mais específico que o default do button[matcha-button] (vence cascade).
-  .matcha-notification--error {
-    background: var(--matcha-color-danger-alpha);
-    border-left-color: var(--matcha-color-danger);
-    --matcha-icon-color: var(--matcha-color-danger);
-
-    button[matcha-notification-action],
-    a[matcha-notification-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);
-    }
-  }
-
-  .matcha-notification--warning {
-    background: var(--matcha-color-warn-alpha);
-    border-left-color: var(--matcha-color-warn);
-    --matcha-icon-color: var(--matcha-color-warn);
-
-    button[matcha-notification-action],
-    a[matcha-notification-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);
-    }
-  }
-
-  .matcha-notification--success {
-    background: var(--matcha-color-success-alpha);
-    border-left-color: var(--matcha-color-success);
-    --matcha-icon-color: var(--matcha-color-success);
-
-    button[matcha-notification-action],
-    a[matcha-notification-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);
-    }
-  }
-
-  .matcha-notification--info {
-    background: var(--matcha-color-info-alpha);
-    border-left-color: var(--matcha-color-info);
-    --matcha-icon-color: var(--matcha-color-info);
-
-    button[matcha-notification-action],
-    a[matcha-notification-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 surface/bg-alpha (50%) + border surface/border + icon/CTA neutros.
-  .matcha-notification--neutral {
-    background: var(--matcha-color-surface-bg-alpha);
-    border-left-color: var(--matcha-color-surface-border);
-    --matcha-icon-color: var(--matcha-color-icon-default);
-
-    button[matcha-notification-action],
-    a[matcha-notification-action] {
-      --matcha-button-color-edge: var(--matcha-color-text-secondary);
-      color: var(--matcha-color-text-secondary);
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-// Notification — Figma DSV3 1:1 (matcha/notification 15955:692):
-// Layout HORIZONTAL · pad/gap por size variant · radius 8.
-// Bg ALPHA 10% (subtle tint) + border-left 4px (status color) + elevation level-2.
-// Texto fica legível sobre surface real (bg apenas tinta sutil).
-//
-// Sizes (canon DSV3):
-//   sm — pad 6/12, gap 8, font body-sm 12/16 (forms compactos, drawer)
-//   md — pad 12/16, gap 12, font body-md 14/20 (default)
-//   lg — pad 20/24, gap 20, font body-lg 16/24 (hero, dashboard top)
-.matcha-notification {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding-block: var(--matcha-space-150, 12px);
-  padding-inline: var(--matcha-space-200, 16px);
-  border-radius: var(--matcha-radius-lg, 8px);
-  border-left: var(--matcha-border-medium, 4px) solid transparent;
-  box-shadow: var(--matcha-shadow-2, 0 4px 16px -2px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04));
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;  // contém o countdown bar absolute
-
-  // sm — compact pra forms densos / drawer
-  &[size="sm"] {
-    gap: var(--matcha-space-100, 8px);
-    padding-block: var(--matcha-space-075, 6px);
-    padding-inline: var(--matcha-space-150, 12px);
-
-    .matcha-notification__title,
-    .matcha-notification__description {
-      font-size: var(--matcha-text-body-sm, 12px);
-      line-height: var(--matcha-leading-body-sm, 16px);
-    }
-    .matcha-notification__media-default {
-      width: var(--matcha-icon-size-sm, 20px);
-      height: var(--matcha-icon-size-sm, 20px);
-    }
-  }
-
-  // lg — hero / dashboard top
-  &[size="lg"] {
-    gap: var(--matcha-space-250, 20px);
-    padding-block: var(--matcha-space-250, 20px);
-    padding-inline: var(--matcha-space-300, 24px);
-
-    .matcha-notification__title,
-    .matcha-notification__description {
-      font-size: var(--matcha-text-body-lg, 16px);
-      line-height: var(--matcha-leading-body-lg, 24px);
-    }
-    .matcha-notification__media-default {
-      width: var(--matcha-icon-size-lg, 28px);
-      height: var(--matcha-icon-size-lg, 28px);
-    }
-  }
-}
-
-// ── Media slot ──
-// Slot wrapper. Tem 2 children possíveis:
-//   1. consumer projetado via [matcha-notification-media] (matcha-icon-badge, etc)
-//   2. fallback __media-default (matcha-icon do status)
-// CSS esconde o fallback quando há projected content.
-.matcha-notification__media {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.matcha-notification__media-default {
-  width: var(--matcha-icon-size-md, 24px);
-  height: var(--matcha-icon-size-md, 24px);
-}
-
-// Hide fallback default icon when consumer projeta media slot.
-// `:has` é resolved no parent — checa se há filho com attr [matcha-notification-media].
-.matcha-notification__media:has([matcha-notification-media]) .matcha-notification__media-default {
-  display: none;
-}
-
-// ── Body ──
-.matcha-notification__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
-  min-width: 0;
-
-  // Body inteiro some se nenhum slot interno tem conteúdo.
-  &:not(:has(.matcha-notification__title > *, .matcha-notification__description > *)) {
-    display: none;
-  }
-}
-
-// Title — slot semibold (distinção tipográfica do description).
-.matcha-notification__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-body-md, 20px);
-  color: var(--matcha-notification-title-color, var(--matcha-color-text-primary));
-
-  &:not(:has(*)) { display: none; }
-}
-
-.matcha-notification__description {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-md, 20px);
-  color: var(--matcha-notification-description-color, var(--matcha-color-text-secondary));
-
-  &:not(:has(*)):empty { display: none; }
-}
-
-// ── Actions slot (CTAs) ──
-.matcha-notification__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  flex-shrink: 0;
-
-  &:not(:has(*)) { display: none; }
-}
-
-// ── Countdown bar (autoDismiss > 0) ──
-// Bar 2px na base, scaleX(progress) — visual de "tempo esgotando".
-.matcha-notification__countdown {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
-  height: var(--matcha-border-thin, 2px);
-  background: currentColor;
-  color: var(--matcha-color-info);  // sobrescrito pelo status modifier (abaixo)
-  transform-origin: left center;
-  transition: transform var(--matcha-duration-instant, 80ms) linear;
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.matcha-notification--error   .matcha-notification__countdown { color: var(--matcha-color-danger); }
-.matcha-notification--warning .matcha-notification__countdown { color: var(--matcha-color-warn); }
-.matcha-notification--success .matcha-notification__countdown { color: var(--matcha-color-success); }
-.matcha-notification--info    .matcha-notification__countdown { color: var(--matcha-color-info); }
-.matcha-notification--neutral .matcha-notification__countdown { color: var(--matcha-color-text-secondary); }
-
-.matcha-notification__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);
-  position: relative;
-  overflow: hidden;
-  transition: color 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); }
-}
-
-// ── Mobile (≤599px) ─────────────────────────────────────────────────────
-// Stack vertical (mesmo padrão do matcha-banner mobile):
-//   [icon na 1ª linha (align-self start)]
-//   → [body (title + description)]
-//   → [CTA action alinhado à esquerda, natural width]
-//   close vira absolute top-right (não compete por espaço no flow).
-//
-// `.is-mobile-preview` aplica os mesmos rules em qualquer viewport — útil pra
-// demonstrar o layout mobile em pages de documentação sem redimensionar.
-@mixin matcha-notification-mobile {
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--matcha-space-150, 12px);
-  padding-block: var(--matcha-space-150, 12px);
-  padding-inline: var(--matcha-space-200, 16px);
-  padding-right: var(--matcha-space-500, 40px); // reserva espaço pro close absolute
-  // position: relative já no host (containment do countdown bar)
-
-  // Media na sua própria linha, alinhado à esquerda (não centralizado).
-  .matcha-notification__media {
-    align-self: flex-start;
-  }
-
-  // Body ocupa largura total da coluna.
-  .matcha-notification__body {
-    width: 100%;
-    min-width: 0;
-  }
-
-  // Actions wrapper full-width pra acomodar CTAs.
-  .matcha-notification__actions {
-    width: 100%;
-  }
-
-  // CTA actions alinhados à esquerda no natural width.
-  button[matcha-notification-action],
-  a[matcha-notification-action] {
-    align-self: flex-start;
-  }
-
-  // Close: top-right absolute, fora do flow vertical.
-  .matcha-notification__close {
-    position: absolute;
-    top: var(--matcha-space-100, 8px);
-    right: var(--matcha-space-100, 8px);
-    z-index: 2;
-  }
-}
-
-@include media-breakpoint('xs') {
-  .matcha-notification { @include matcha-notification-mobile; }
-}
-
-.matcha-notification.is-mobile-preview {
-  @include matcha-notification-mobile;
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-notification__close,
-  .matcha-notification__close::before {
-    transition: none;
-  }
-
-  // Countdown bar visual some — auto-dismiss continua, só sem ticking visual.
-  .matcha-notification__countdown {
-    transition: none;
-    display: none;
-  }
-}
-
-// ── Forced colors (Windows High Contrast) ──
-// Bg alpha + shadow ficam invisíveis. Border-left vira solid CanvasText
-// e ganha border full pra delimitar visualmente.
-@media (forced-colors: active) {
-  .matcha-notification {
-    background: Canvas;
-    border: 1px solid CanvasText;
-    border-left-width: 4px;
-    box-shadow: none;
-    color: CanvasText;
-  }
-
-  .matcha-notification__icon { color: CanvasText; }
-  .matcha-notification__title { color: CanvasText; }
-  .matcha-notification__description { color: CanvasText; }
-
-  .matcha-notification__close {
-    color: CanvasText;
-
-    &:focus-visible {
-      outline: 2px solid CanvasText;
-    }
-  }
-}
-
-// ── Print ──
-// Notification é informacional — mantém visível, sem bg/shadow.
-@media print {
-  .matcha-notification {
-    background: transparent;
-    box-shadow: none;
-    border: 1px solid currentColor;
-    border-left-width: 4px;
-    break-inside: avoid;
-  }
-
-  .matcha-notification__close {
-    display: none;
-  }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-notification.scss — In-page notification banner / alert
+// Aligned with Figma matcha/notification:
+//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
+//   × Slots: icon, title, description, CTA button, close
+// Angular: matcha-notification
+// =============================================================================
+
+@mixin matcha-notification-theme($theme) {
+
+  // Title sempre text-primary, description sempre text-secondary (Figma DSV3).
+  // Texto fica legível porque bg é alpha 10% — usuário lê o texto sobre o
+  // surface real, não sobre a tinta.
+  .matcha-notification__title {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-notification__description {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  // Close icon — color icon/default (token DSV3 #5f656b light / #9aa0a6 dark).
+  .matcha-notification__close {
+    color: var(--matcha-color-icon-default, var(--matcha-color-text-secondary));
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  // ── Status × cores (Figma 1:1) ──
+  // Tokens canon: --matcha-color-{danger|warn|success|info} (sem prefix "feedback-").
+  // --matcha-icon-color cascateia pros matcha-icon (filhos do banner).
+  // --matcha-button-color* setado em button[matcha-notification-action] — selector
+  // mais específico que o default do button[matcha-button] (vence cascade).
+  .matcha-notification--error {
+    background: var(--matcha-color-danger-alpha);
+    border-left-color: var(--matcha-color-danger);
+    --matcha-icon-color: var(--matcha-color-danger);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--warning {
+    background: var(--matcha-color-warn-alpha);
+    border-left-color: var(--matcha-color-warn);
+    --matcha-icon-color: var(--matcha-color-warn);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--success {
+    background: var(--matcha-color-success-alpha);
+    border-left-color: var(--matcha-color-success);
+    --matcha-icon-color: var(--matcha-color-success);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--info {
+    background: var(--matcha-color-info-alpha);
+    border-left-color: var(--matcha-color-info);
+    --matcha-icon-color: var(--matcha-color-info);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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 surface/bg-alpha (50%) + border surface/border + icon/CTA neutros.
+  .matcha-notification--neutral {
+    background: var(--matcha-color-surface-bg-alpha);
+    border-left-color: var(--matcha-color-surface-border);
+    --matcha-icon-color: var(--matcha-color-icon-default);
+
+    button[matcha-notification-action],
+    a[matcha-notification-action] {
+      --matcha-button-color-edge: var(--matcha-color-text-secondary);
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+// Notification — Figma DSV3 1:1 (matcha/notification 15955:692):
+// Layout HORIZONTAL · pad/gap por size variant · radius 8.
+// Bg ALPHA 10% (subtle tint) + border-left 4px (status color) + elevation level-2.
+// Texto fica legível sobre surface real (bg apenas tinta sutil).
+//
+// Sizes (canon DSV3):
+//   sm — pad 6/12, gap 8, font body-sm 12/16 (forms compactos, drawer)
+//   md — pad 12/16, gap 12, font body-md 14/20 (default)
+//   lg — pad 20/24, gap 20, font body-lg 16/24 (hero, dashboard top)
+.matcha-notification {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding-block: var(--matcha-space-150, 12px);
+  padding-inline: var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  border-left: var(--matcha-border-medium, 4px) solid transparent;
+  box-shadow: var(--matcha-shadow-2, 0 4px 16px -2px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04));
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;  // contém o countdown bar absolute
+
+  // sm — compact pra forms densos / drawer
+  &[size="sm"] {
+    gap: var(--matcha-space-100, 8px);
+    padding-block: var(--matcha-space-075, 6px);
+    padding-inline: var(--matcha-space-150, 12px);
+
+    .matcha-notification__title,
+    .matcha-notification__description {
+      font-size: var(--matcha-text-body-sm, 12px);
+      line-height: var(--matcha-leading-body-sm, 16px);
+    }
+    .matcha-notification__media-default {
+      width: var(--matcha-icon-size-sm, 20px);
+      height: var(--matcha-icon-size-sm, 20px);
+    }
+  }
+
+  // lg — hero / dashboard top
+  &[size="lg"] {
+    gap: var(--matcha-space-250, 20px);
+    padding-block: var(--matcha-space-250, 20px);
+    padding-inline: var(--matcha-space-300, 24px);
+
+    .matcha-notification__title,
+    .matcha-notification__description {
+      font-size: var(--matcha-text-body-lg, 16px);
+      line-height: var(--matcha-leading-body-lg, 24px);
+    }
+    .matcha-notification__media-default {
+      width: var(--matcha-icon-size-lg, 28px);
+      height: var(--matcha-icon-size-lg, 28px);
+    }
+  }
+}
+
+// ── Media slot ──
+// Slot wrapper. Tem 2 children possíveis:
+//   1. consumer projetado via [matcha-notification-media] (matcha-icon-badge, etc)
+//   2. fallback __media-default (matcha-icon do status)
+// CSS esconde o fallback quando há projected content.
+.matcha-notification__media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.matcha-notification__media-default {
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+}
+
+// Hide fallback default icon when consumer projeta media slot.
+// `:has` é resolved no parent — checa se há filho com attr [matcha-notification-media].
+.matcha-notification__media:has([matcha-notification-media]) .matcha-notification__media-default {
+  display: none;
+}
+
+// ── Body ──
+.matcha-notification__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+
+  // Body inteiro some se nenhum slot interno tem conteúdo.
+  &:not(:has(.matcha-notification__title > *, .matcha-notification__description > *)) {
+    display: none;
+  }
+}
+
+// Title — slot semibold (distinção tipográfica do description).
+.matcha-notification__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-body-md, 20px);
+  color: var(--matcha-notification-title-color, var(--matcha-color-text-primary));
+
+  &:not(:has(*)) { display: none; }
+}
+
+.matcha-notification__description {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-md, 20px);
+  color: var(--matcha-notification-description-color, var(--matcha-color-text-secondary));
+
+  &:not(:has(*)):empty { display: none; }
+}
+
+// ── Actions slot (CTAs) ──
+.matcha-notification__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  flex-shrink: 0;
+
+  &:not(:has(*)) { display: none; }
+}
+
+// ── Countdown bar (autoDismiss > 0) ──
+// Bar 2px na base, scaleX(progress) — visual de "tempo esgotando".
+.matcha-notification__countdown {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: var(--matcha-border-thin, 2px);
+  background: currentColor;
+  color: var(--matcha-color-info);  // sobrescrito pelo status modifier (abaixo)
+  transform-origin: left center;
+  transition: transform var(--matcha-duration-instant, 80ms) linear;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.matcha-notification--error   .matcha-notification__countdown { color: var(--matcha-color-danger); }
+.matcha-notification--warning .matcha-notification__countdown { color: var(--matcha-color-warn); }
+.matcha-notification--success .matcha-notification__countdown { color: var(--matcha-color-success); }
+.matcha-notification--info    .matcha-notification__countdown { color: var(--matcha-color-info); }
+.matcha-notification--neutral .matcha-notification__countdown { color: var(--matcha-color-text-secondary); }
+
+.matcha-notification__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);
+  position: relative;
+  overflow: hidden;
+  transition: color 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); }
+}
+
+// ── Mobile (≤599px) ─────────────────────────────────────────────────────
+// Stack vertical (mesmo padrão do matcha-banner mobile):
+//   [icon na 1ª linha (align-self start)]
+//   → [body (title + description)]
+//   → [CTA action alinhado à esquerda, natural width]
+//   close vira absolute top-right (não compete por espaço no flow).
+//
+// `.is-mobile-preview` aplica os mesmos rules em qualquer viewport — útil pra
+// demonstrar o layout mobile em pages de documentação sem redimensionar.
+@mixin matcha-notification-mobile {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--matcha-space-150, 12px);
+  padding-block: var(--matcha-space-150, 12px);
+  padding-inline: var(--matcha-space-200, 16px);
+  padding-right: var(--matcha-space-500, 40px); // reserva espaço pro close absolute
+  // position: relative já no host (containment do countdown bar)
+
+  // Media na sua própria linha, alinhado à esquerda (não centralizado).
+  .matcha-notification__media {
+    align-self: flex-start;
+  }
+
+  // Body ocupa largura total da coluna.
+  .matcha-notification__body {
+    width: 100%;
+    min-width: 0;
+  }
+
+  // Actions wrapper full-width pra acomodar CTAs.
+  .matcha-notification__actions {
+    width: 100%;
+  }
+
+  // CTA actions alinhados à esquerda no natural width.
+  button[matcha-notification-action],
+  a[matcha-notification-action] {
+    align-self: flex-start;
+  }
+
+  // Close: top-right absolute, fora do flow vertical.
+  .matcha-notification__close {
+    position: absolute;
+    top: var(--matcha-space-100, 8px);
+    right: var(--matcha-space-100, 8px);
+    z-index: 2;
+  }
+}
+
+@include media-breakpoint('xs') {
+  .matcha-notification { @include matcha-notification-mobile; }
+}
+
+.matcha-notification.is-mobile-preview {
+  @include matcha-notification-mobile;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-notification__close,
+  .matcha-notification__close::before {
+    transition: none;
+  }
+
+  // Countdown bar visual some — auto-dismiss continua, só sem ticking visual.
+  .matcha-notification__countdown {
+    transition: none;
+    display: none;
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+// Bg alpha + shadow ficam invisíveis. Border-left vira solid CanvasText
+// e ganha border full pra delimitar visualmente.
+@media (forced-colors: active) {
+  .matcha-notification {
+    background: Canvas;
+    border: 1px solid CanvasText;
+    border-left-width: 4px;
+    box-shadow: none;
+    color: CanvasText;
+  }
+
+  .matcha-notification__icon { color: CanvasText; }
+  .matcha-notification__title { color: CanvasText; }
+  .matcha-notification__description { color: CanvasText; }
+
+  .matcha-notification__close {
+    color: CanvasText;
+
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+    }
+  }
+}
+
+// ── Print ──
+// Notification é informacional — mantém visível, sem bg/shadow.
+@media print {
+  .matcha-notification {
+    background: transparent;
+    box-shadow: none;
+    border: 1px solid currentColor;
+    border-left-width: 4px;
+    break-inside: avoid;
+  }
+
+  .matcha-notification__close {
+    display: none;
+  }
+}