@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-avatar.scss

@@ -10,46 +10,71 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  overflow: hidden;
+  // SEM overflow:hidden — o status indicator fica no canto fora do círculo
+  // visível e seria cortado. A <img> com border-radius inherit já se arredonda
+  // sozinha; SVG e Initials ficam dentro dos bounds.
   border-radius: var(--matcha-radius-pill, 9999px);
 
   font-weight: var(--matcha-weight-medium, 500);
   user-select: none;
   flex-shrink: 0;
+}
+
+// =============================================================================
+// Ring colored (additive) — controlado pelo [ring] @Input do component.
+// 2px solid + halo alpha externo. Não ocupa layout (box-shadow puro).
+//
+// Aplicado no .matcha-avatar INNER (não no host) porque o inner é quem tem
+// width/height/border-radius:pill — box-shadow segue o radius desse elemento
+// e renderiza circular. No host (inline default) sairia retangular.
+// =============================================================================
+matcha-avatar[ring] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-avatar-ring-color, currentColor);
+}
 
-  // ── Sizes (aligned with Figma) ──
+matcha-avatar[ring]:not([ring="neutral"]) .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-avatar-ring-color, currentColor),
+    0 0 0 5px var(--matcha-avatar-ring-halo, transparent);
+}
+
+// ── Variants (sizes, initials, icon, disabled) — nested em .matcha-avatar pra
+// usar `&.matcha-avatar-*` syntax. Bloco separado do base styles (linha 8-21)
+// porque matcha-avatar[ring] (acima) é regra absoluta, não nested.
+.matcha-avatar {
+  // ── Sizes — Canonical 5-step scale: tiny 24 · small 40 · medium 56 · large 80 · huge 96.
+  // Abbreviations kept as @deprecated aliases, mapped BY PIXEL SIZE (old 32px `sm` dropped → tiny).
+  // NOTE: --matcha-avatar-* tokens still carry the legacy abbreviated names; re-tier them to
+  // tiny/small/medium/large/huge on the Figma/DSV3 side (token rename is design-driven).
+  &.matcha-avatar-tiny,
   &.matcha-avatar-xs,
-  &.matcha-avatar-tiny {
+  &.matcha-avatar-sm {
     width: var(--matcha-avatar-xs, 24px);
     height: var(--matcha-avatar-xs, 24px);
     font-size: var(--matcha-text-2xs, 10px);
     line-height: 1;
   }
 
-  &.matcha-avatar-sm,
-  &.matcha-avatar-small {
-    width: var(--matcha-avatar-sm, 32px);
-    height: var(--matcha-avatar-sm, 32px);
-    font-size: var(--matcha-text-sm, 12px);
-    line-height: 1;
-  }
-
-  &.matcha-avatar-md,
-  &.matcha-avatar-medium {
+  &.matcha-avatar-small,
+  &.matcha-avatar-md {
     width: var(--matcha-avatar-md, 40px);
     height: var(--matcha-avatar-md, 40px);
     font-size: var(--matcha-text-md, 14px);
     line-height: 1;
   }
 
-  &.matcha-avatar-lg,
-  &.matcha-avatar-large {
+  &.matcha-avatar-medium,
+  &.matcha-avatar-lg {
     width: var(--matcha-avatar-lg, 56px);
     height: var(--matcha-avatar-lg, 56px);
     font-size: var(--matcha-text-2xl, 20px);
     line-height: 1;
   }
 
+  &.matcha-avatar-large,
   &.matcha-avatar-xl {
     width: var(--matcha-avatar-xl, 80px);
     height: var(--matcha-avatar-xl, 80px);
@@ -57,8 +82,8 @@
     line-height: 1;
   }
 
-  &.matcha-avatar-2xl,
-  &.matcha-avatar-huge {
+  &.matcha-avatar-huge,
+  &.matcha-avatar-2xl {
     width: var(--matcha-avatar-2xl, 96px);
     height: var(--matcha-avatar-2xl, 96px);
     font-size: var(--matcha-text-4xl, 32px);
@@ -94,14 +119,94 @@
   }
 }
 
+// ── Placeholder — vazado canônico (Figma matcha/avatar 5668:32088) ──────────
+// SVG usa fill-rule=evenodd: disco preenchido com currentColor + silhueta vazada.
+// `currentColor` do disco precisa ser a COR DA MARCA (não o contrast da .color class
+// global, que é branco/preto). Override aqui força o token de palette.
+.matcha-avatar.matcha-avatar--placeholder {
+  background: transparent !important;
+
+  &.light-blue { color: var(--matcha-color-palette-light-blue) !important; }
+  &.pink       { color: var(--matcha-color-palette-pink) !important; }
+  &.teal       { color: var(--matcha-color-palette-teal) !important; }
+  &.purple     { color: var(--matcha-color-palette-purple) !important; }
+  &.orange     { color: var(--matcha-color-palette-orange) !important; }
+  &.yellow     { color: var(--matcha-color-palette-yellow) !important; }
+  &.neutral    { color: var(--matcha-color-icon-default) !important; }
+}
+
+// Neutral em Initials — cinza canônico Figma (icon-default).
+.matcha-avatar:not(.matcha-avatar--placeholder).neutral {
+  background: var(--matcha-color-icon-default);
+}
+
+// ── Initials — bg + fg por palette canônica Figma DSV3 (6 cores) ────────────
+// O palette inverte por tema (light=tons saturados, dark=tons claros). text-primary
+// também inverte (#1a1d21 light / #e8eaed dark). Combinar os dois → contraste péssimo
+// em dark mode (1.2-2.9:1 FAIL). Por isso fg é fixed-per-color, não token-based.
+//
+// Light mode: pink/teal/purple bg escuros → fg branco. light-blue/orange/yellow bg
+//             claros → fg preto (light-blue precisa #000 puro pra AA por 0.08).
+// Dark mode:  todos os bg ficam lighter → fg preto funciona em tudo (5-12:1).
+
+.matcha-avatar:not(.matcha-avatar--placeholder) {
+  // Backgrounds (mesmo seletor pros 2 temas — palette token já inverte sozinho).
+  &.light-blue { background: var(--matcha-color-palette-light-blue); }
+  &.pink       { background: var(--matcha-color-palette-pink); }
+  &.teal       { background: var(--matcha-color-palette-teal); }
+  &.purple     { background: var(--matcha-color-palette-purple); }
+  &.orange     { background: var(--matcha-color-palette-orange); }
+  &.yellow     { background: var(--matcha-color-palette-yellow); }
+}
+
+// Light mode — bgs saturados (pink/teal/purple = escuros), fg branco passa AA.
+// orange/yellow/light-blue = claros, fg precisa ser dark (#000 pra light-blue por margem).
+.theme-default-light .matcha-avatar:not(.matcha-avatar--placeholder) {
+  &.light-blue { color: #000; }              // 5.42:1 AA
+  &.pink       { color: #fff; }              // 4.95:1 AA
+  &.teal       { color: #fff; }              // 5.32:1 AA
+  &.purple     { color: #fff; }              // 6.30:1 AA
+  &.orange     { color: #1a1a1a; }           // 4.59:1 AA
+  &.yellow     { color: #1a1a1a; }           // 8.52:1 AAA
+  &.neutral    { color: #fff; }              // icon-default #5f656b vs #fff = 5.18:1 AA
+}
+
+// Dark mode — todos os bgs ficam lighter (#54c5f7, #e46291, #4fb7ad, etc).
+// Texto branco falha em todos. Texto dark funciona em todos.
+.theme-default-dark .matcha-avatar:not(.matcha-avatar--placeholder) {
+  &.light-blue { color: #1a1a1a; }           // 8.87:1 AAA
+  &.pink       { color: #1a1a1a; }           // 5.35:1 AA
+  &.teal       { color: #1a1a1a; }           // 7.22:1 AAA
+  &.purple     { color: #1a1a1a; }           // 4.98:1 AA
+  &.orange     { color: #1a1a1a; }           // 8.58:1 AAA
+  &.yellow     { color: #1a1a1a; }           // 11.94:1 AAA
+  &.neutral    { color: #1a1a1a; }           // icon-default #9aa0a6 vs #1a1a1a = 5.97:1 AA
+}
+
+// ── Screen reader only utility (visualmente oculto, lido por AT) ────────────
+.matcha-avatar-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 // ── Status indicator ────────────────────────────────────────────────────────
+// Cores estruturais (online/offline/busy) ficam fora do mixin pra renderizar
+// independente de classe de tema (`theme-default-light`, etc.). Tokens com
+// fallback hardcoded resolvem o caso de tema não inicializado.
 
 .matcha-avatar-status {
   position: absolute;
   bottom: 0;
   right: 0;
   border-radius: var(--matcha-radius-pill, 9999px);
-  border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface, white);
+  border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-card, #fff);
   box-sizing: border-box;
 
   // Size scales with avatar
@@ -121,41 +226,76 @@
 
   .matcha-avatar-2xl &,
   .matcha-avatar-huge & { width: var(--matcha-avatar-status-2xl, 18px); height: var(--matcha-avatar-status-2xl, 18px); }
+
+  // Cores estruturais — fallback hardcoded pra funcionar mesmo sem tema.
+  &.matcha-avatar-status--online  { background-color: var(--matcha-color-success, #16a34a); }
+  &.matcha-avatar-status--offline { background-color: var(--matcha-color-text-placeholder, #9ca3af); }
+  &.matcha-avatar-status--busy    { background-color: var(--matcha-color-danger, #dc2626); }
 }
 
 // ── Theme mixin ─────────────────────────────────────────────────────────────
 
 @mixin matcha-avatar-theme($theme) {
   .matcha-avatar {
-    .matcha-avatar-icon {
-      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
-    }
+    // Placeholder: SVG usa fill="currentColor" e herda do host. A classe de
+    // cor (.blue/.orange/etc) define color=foreground + background=cor cheia,
+    // então o icon vazado fica visível na cor escolhida pelo usuário.
+    // Sem fallback hardcoded aqui — quando o user não passa color, o @Input
+    // default 'blue' resolve via .blue do matcha-style.css.
 
     &.matcha-avatar--disabled,
     &.color-disabled {
       background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
       color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
-
-      .matcha-avatar-icon {
-        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
-      }
     }
   }
 
-  // ── Status colors ──
+  // Status border-color por tema (estrutural já resolve cores de fundo via tokens).
   .matcha-avatar-status {
-    border-color: var(--matcha-color-surface, #{getSurface($theme)});
+    border-color: var(--matcha-color-surface-card, #{getSurface($theme)});
+  }
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
 
-    &.matcha-avatar-status--online {
-      background-color: var(--matcha-color-success, #{getSuccess($theme)});
+// Forced colors (Windows High Contrast) — bg colors podem virar invisíveis,
+// usar SelectedItem/Highlight pros estados, CanvasText/Canvas pra borders.
+@media (forced-colors: active) {
+  .matcha-avatar {
+    border: 1px solid CanvasText;
+
+    &.matcha-avatar--disabled,
+    &.color-disabled {
+      opacity: 0.5;
+      border-color: GrayText;
     }
+  }
+
+  // Status dot — em high-contrast as 3 cores ficam idênticas. Compensamos
+  // com pattern visual: online=fill, offline=outline, busy=outline duplo.
+  .matcha-avatar-status {
+    background: SelectedItem !important;
+    border: 2px solid Canvas !important;
 
     &.matcha-avatar-status--offline {
-      background-color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+      background: Canvas !important;
+      border: 2px solid CanvasText !important;
     }
 
     &.matcha-avatar-status--busy {
-      background-color: var(--matcha-color-danger, #{getDanger($theme)});
+      background: SelectedItem !important;
+      box-shadow: 0 0 0 2px Canvas, 0 0 0 4px CanvasText;
     }
   }
 }
+
+// Reduced motion — mata todas transitions/animations.
+@media (prefers-reduced-motion: reduce) {
+  .matcha-avatar,
+  .matcha-avatar-status {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/components/matcha-badge.scss

@@ -44,8 +44,8 @@
   min-width: var(--matcha-space-250, 20px);
   height: var(--matcha-space-250, 20px);
   padding: 1px var(--matcha-space-050, 4px);
-  font-size: var(--matcha-text-caption, 11px);
-  line-height: var(--matcha-leading-caption, 14px);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
   font-weight: var(--matcha-weight-regular, 400);
   letter-spacing: 0;
   border-width: var(--matcha-border-thin, 2px);
@@ -56,8 +56,8 @@
 .matcha-badge--label {
   position: static;
   padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
-  font-size: var(--matcha-text-caption, 11px);
-  line-height: var(--matcha-leading-caption, 14px);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
   font-weight: var(--matcha-weight-regular, 400);
   gap: var(--matcha-space-050, 4px);
 }

package/components/matcha-breadcrumb.scss

@@ -1,126 +1,232 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-breadcrumb.scss — Navigation breadcrumb trail
-// Aligned with Figma matcha/breadcrumb/item:
-//   Estado(3: Link, Atual, Disabled) × Ícone?(2: Yes, No)
-//   Separator: matcha/icon/chevron (Right) between items
-// =============================================================================
-
-@mixin matcha-breadcrumb-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  matcha-breadcrumb {
-    // ── Link items ──
-    .breadcrumb-item-link {
-      background: var(--matcha-color-surface-2, #{getSurfaceAlpha($theme)});
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-      &:hover:not([disabled]):not(.disabled) {
-        .breadcrumb-state {
-          opacity: var(--matcha-state-hover, 0.08);
-        }
-      }
-
-      &:active:not([disabled]):not(.disabled) {
-        .breadcrumb-state {
-          opacity: var(--matcha-state-active, 0.12);
-        }
-      }
-
-      &: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);
-      }
-    }
-
-    // ── Current page ──
-    .breadcrumb-item-current {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    // ── Separator ──
-    .breadcrumb-separator {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
-
-    // ── Disabled ──
-    .breadcrumb-item-link.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-
-  // ── Breadcrumb item (link) ──
-  .breadcrumb-item-link {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-150, 12px);
-    border: none;
-    border-radius: var(--matcha-radius-lg, 8px);
-    cursor: pointer;
-    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);
-    white-space: nowrap;
-    text-decoration: none;
-    position: relative;
-    overflow: hidden;
-
-    // State layer
-    .breadcrumb-state {
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-
-    matcha-icon {
-      flex-shrink: 0;
-    }
-  }
-
-  // ── Current page ──
-  .breadcrumb-item-current {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-150, 12px) 0;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    font-weight: var(--matcha-weight-medium, 500);
-    line-height: var(--matcha-leading-body-md, 20px);
-    white-space: nowrap;
-
-    matcha-icon {
-      flex-shrink: 0;
-    }
-  }
-
-  // ── Separator ──
-  .breadcrumb-separator {
-    flex-shrink: 0;
-    width: var(--matcha-icon-size-sm, 16px);
-    height: var(--matcha-icon-size-sm, 16px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  matcha-breadcrumb .breadcrumb-state {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-breadcrumb.scss — Navigation breadcrumb trail (Figma DSV3 15831:35)
+//
+// Estado(3: Link, Atual, Disabled) × Ícone?(2: Yes, No) = 6 variantes
+//   Link/Disabled — bg surface-2, p 12, radius lg, text/secondary, Regular 14/20
+//   Atual — sem bg, py 12 (sem px), text/primary, Medium 14/20
+//   Separador — matcha/icon/chevron variant=right entre itens
+// =============================================================================
+
+@mixin matcha-breadcrumb-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-breadcrumb {
+    // ── Link items (clicáveis) ──
+    .breadcrumb-item-link {
+      // Figma DSV3: bg = matcha/color/elevation/surface-2 (canônico)
+      background: var(--matcha-color-elevation-surface-2, #{getSurfaceAlpha($theme)});
+      color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+
+      &:hover:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-hover, 0.08);
+        }
+      }
+
+      &:active:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-active, 0.12);
+        }
+      }
+
+      &: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);
+      }
+    }
+
+    // ── Página atual ──
+    .breadcrumb-item-current {
+      color: var(--matcha-color-text-primary, #{getForeground($theme)});
+    }
+
+    // ── Separator (chevron) ──
+    .breadcrumb-separator {
+      color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+    }
+
+    // ── Disabled (real disabled — não confundir com ellipsis) ──
+    .breadcrumb-item-link--disabled {
+      opacity: var(--matcha-opacity-disabled, 0.5);
+      pointer-events: none;
+    }
+
+    // ── Ellipsis (…) — visibilidade NORMAL (não é disabled).
+    //    Quando clicável (maxItems ativo), tem hover/focus state-layer normal.
+    //    Quando estático (--static), só muda cursor pra default.
+    .breadcrumb-ellipsis {
+      // Mantém color/bg do Link. Sem opacity reduzida.
+      color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+
+      &--static {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+matcha-breadcrumb {
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  .breadcrumb-li {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  // ── Item link (Link/Disabled/Ellipsis) ──
+  // Figma: pad 12, radius lg, gap 8 (com ícone) ou 0 (sem). gap controlado por
+  // `> matcha-icon + span` (presença do ícone como sibling).
+  .breadcrumb-item-link {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: var(--matcha-space-150, 12px);
+    border: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    cursor: pointer;
+    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);
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    // Gap 8 só quando o ícone está presente (Figma: gap=0 sem ícone)
+    > matcha-icon + .breadcrumb-text {
+      margin-left: var(--matcha-space-100, 8px);
+    }
+
+    // State layer (hover/active overlay)
+    .breadcrumb-state {
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Página atual ──
+  // Figma: SEM bg, py 12 (sem px), Medium 500, gap 8/0 igual ao link.
+  .breadcrumb-item-current {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: var(--matcha-space-150, 12px) 0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-md, 20px);
+    box-sizing: border-box;
+
+    > matcha-icon + .breadcrumb-text {
+      margin-left: var(--matcha-space-100, 8px);
+    }
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Texto do item — single-line + truncate quando max-width está setado ──
+  .breadcrumb-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  // ── Separator ──
+  .breadcrumb-separator {
+    flex-shrink: 0;
+    width: var(--matcha-icon-size-sm, 16px);
+    height: var(--matcha-icon-size-sm, 16px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-breadcrumb .breadcrumb-state {
+    transition: none;
+  }
+}
+
+// ── Mobile responsive ───────────────────────────────────────────────────────
+// Em viewports estreitas, items longos sem maxWidth podem estourar. flex-wrap
+// nowrap + overflow-x evita quebra de linha; consumer deve usar maxItems pra
+// auto-truncar trail. Default sem max-width = nowrap horizontal (scroll se
+// container permite, senão clip).
+@media (max-width: 639px) {
+  matcha-breadcrumb .breadcrumb-list {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;          // Firefox
+    -ms-overflow-style: none;       // IE/Edge legacy
+    &::-webkit-scrollbar { display: none; }
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+  matcha-breadcrumb {
+    .breadcrumb-item-link {
+      background: Canvas !important;
+      color: LinkText !important;
+      border: 1px solid CanvasText;
+
+      &:hover, &:focus { color: ActiveText !important; }
+    }
+
+    .breadcrumb-item-current {
+      color: CanvasText !important;
+      background: transparent !important;
+    }
+
+    .breadcrumb-separator {
+      color: GrayText !important;
+    }
+
+    .breadcrumb-item-link:focus-visible {
+      outline: 2px solid CanvasText !important;
+    }
+  }
+}
+
+// ── Print ──
+// Breadcrumb é navigation chrome — some em impressão (página impressa não
+// precisa de "como cheguei aqui").
+@media print {
+  matcha-breadcrumb {
+    display: none !important;
+  }
+}
+