@inchurch/matcha-theme 22.38.2 → 22.38.3

package/components/matcha-avatar.scss

@@ -1,426 +1,426 @@
-// =============================================================================
-// matcha-avatar.scss — Avatar component (photo, initials, placeholder + status)
-// Aligned with Figma Avatar/Matcha: XS(24) SM(32) MD(40) LG(56) XL(80) 2XL(96)
-//
-// Estado visual (size/color/status/disabled/placeholder) é selecionado por
-// ATRIBUTO no host (`matcha-avatar[size="medium"]`), não por classe — mesmo
-// padrão já usado pelo `ring` abaixo e pelo `outline`/`link` do matcha-button.
-// A classe `.matcha-avatar` na bolinha interna é só identidade estrutural.
-// =============================================================================
-
-// ── Structural (outside mixin) ──────────────────────────────────────────────
-
-// Host — SEMPRE inline-flex, incondicional (não depende de haver conteúdo
-// projetado). Com zero filhos em matcha-avatar-name/-caption/slot genérico,
-// um flex container de um único item (a bolinha) renderiza idêntico a um
-// avatar bare de hoje — não precisa de @ContentChild pra alternar layout.
-matcha-avatar {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-
-  &[orientation="stacked"] {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-.matcha-avatar-text {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-matcha-avatar-name {
-  display: block;
-  color: var(--matcha-color-text-primary);
-  font-weight: var(--matcha-weight-medium, 500);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-matcha-avatar-caption {
-  display: block;
-  color: var(--matcha-color-text-muted);
-  font-weight: var(--matcha-weight-regular, 400);
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.matcha-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  // 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.
-//
-// Os 6 tokens semânticos resolvem inteiro aqui via seletor de atributo — var()
-// direto, sem custom property nem lookup no componente. Halo (glow externo) só
-// em accent/success/warn/danger; primary/neutral só têm o anel sólido. Cor
-// literal (hex/rgb/var arbitrário) é o ÚNICO caso que passa pela custom
-// property --matcha-avatar-ring-color (não dá pra enumerar seletor de atributo
-// pra valor arbitrário) — branch de fallback no final, sem halo.
-// =============================================================================
-matcha-avatar[ring="accent"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-accent),
-    0 0 0 5px var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.10));
-}
-
-matcha-avatar[ring="success"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-success),
-    0 0 0 5px var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
-}
-
-matcha-avatar[ring="warn"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-warn),
-    0 0 0 5px var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
-}
-
-matcha-avatar[ring="danger"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-danger),
-    0 0 0 5px var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
-}
-
-matcha-avatar[ring="primary"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-primary);
-}
-
-matcha-avatar[ring="neutral"] .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-color-surface-border);
-}
-
-// Fallback — [ring] presente mas não é nenhum dos 6 tokens acima (cor literal).
-matcha-avatar[ring]:not([ring="accent"]):not([ring="success"]):not([ring="warn"]):not([ring="danger"]):not([ring="primary"]):not([ring="neutral"]) .matcha-avatar {
-  box-shadow:
-    0 0 0 2px transparent,
-    0 0 0 3px var(--matcha-avatar-ring-color, currentColor);
-}
-
-// ── Sizes — Canonical 5-step scale: tiny 24 · small 40 · medium 56 · large 80 · huge 96.
-// O setter do [size] já normaliza os apelidos abreviados (xs/sm/md/lg/xl/2xl) pro nome
-// canônico antes de refletir o atributo — só precisa dos 5 branches aqui.
-// NOTE: --matcha-avatar-* tokens ainda carregam os nomes abreviados legados; retierar pra
-// tiny/small/medium/large/huge do lado Figma/DSV3 é trabalho separado (design-driven).
-matcha-avatar[size="tiny"] .matcha-avatar {
-  width: var(--matcha-avatar-xs, 24px);
-  height: var(--matcha-avatar-xs, 24px);
-  font-size: var(--matcha-text-2xs, 10px);
-  line-height: 1;
-}
-
-matcha-avatar[size="small"] .matcha-avatar {
-  width: var(--matcha-avatar-md, 40px);
-  height: var(--matcha-avatar-md, 40px);
-  font-size: var(--matcha-text-md, 14px);
-  line-height: 1;
-}
-
-matcha-avatar[size="medium"] .matcha-avatar {
-  width: var(--matcha-avatar-lg, 56px);
-  height: var(--matcha-avatar-lg, 56px);
-  font-size: var(--matcha-text-2xl, 20px);
-  line-height: 1;
-}
-
-matcha-avatar[size="large"] .matcha-avatar {
-  width: var(--matcha-avatar-xl, 80px);
-  height: var(--matcha-avatar-xl, 80px);
-  font-size: var(--matcha-text-3xl, 24px);
-  line-height: 1;
-}
-
-matcha-avatar[size="huge"] .matcha-avatar {
-  width: var(--matcha-avatar-2xl, 96px);
-  height: var(--matcha-avatar-2xl, 96px);
-  font-size: var(--matcha-text-4xl, 32px);
-  line-height: 1;
-}
-
-// ── Tipografia de matcha-avatar-name/-caption por [size] — mesmo [size] que
-// já governa a bolinha, sem input separado nem seletor de irmão.
-matcha-avatar[size="tiny"] {
-  matcha-avatar-name { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
-  matcha-avatar-caption { font-size: var(--matcha-text-xs, 11px); line-height: var(--matcha-leading-xs, 14px); }
-}
-matcha-avatar[size="small"] {
-  matcha-avatar-name { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
-  matcha-avatar-caption { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
-}
-matcha-avatar[size="medium"] {
-  matcha-avatar-name { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
-  matcha-avatar-caption { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
-}
-matcha-avatar[size="large"] {
-  matcha-avatar-name { font-size: var(--matcha-text-xl, 18px); line-height: var(--matcha-leading-xl, 24px); }
-  matcha-avatar-caption { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
-}
-matcha-avatar[size="huge"] {
-  matcha-avatar-name { font-size: var(--matcha-text-title-lg, 20px); line-height: var(--matcha-leading-title-lg, 28px); }
-  matcha-avatar-caption { font-size: var(--matcha-text-xl, 18px); line-height: var(--matcha-leading-xl, 24px); }
-}
-
-// ── Stacked (hero/profile header) — tipografia maior, negrito, centralizada.
-matcha-avatar[orientation="stacked"] {
-  &[size="tiny"], &[size="small"] {
-    matcha-avatar-name { font-size: var(--matcha-text-title-sm, 16px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-sm, 22px); }
-    matcha-avatar-caption { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
-  }
-  &[size="medium"], &[size="large"] {
-    matcha-avatar-name { font-size: var(--matcha-text-title-md, 18px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-md, 24px); }
-    matcha-avatar-caption { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
-  }
-  &[size="huge"] {
-    matcha-avatar-name { font-size: var(--matcha-text-title-lg, 20px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-lg, 28px); }
-    matcha-avatar-caption { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
-  }
-}
-
-.matcha-avatar {
-  // ── Image ──
-  .matcha-avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: inherit;
-  }
-
-  // ── Initials ──
-  .matcha-avatar-initials {
-    font-weight: var(--matcha-weight-medium, 500);
-    text-transform: uppercase;
-    letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
-  }
-
-  // ── Placeholder icon ──
-  .matcha-avatar-icon {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-// ── Disabled ─────────────────────────────────────────────────────────────────
-// `.color-disabled` preservado como gatilho manual alternativo (pré-existente,
-// não gerido pelo componente) — `[disabled]` é o gatilho canônico hoje.
-matcha-avatar[disabled] .matcha-avatar,
-.matcha-avatar.color-disabled {
-  opacity: var(--matcha-opacity-disabled, 0.38);
-  pointer-events: none;
-}
-
-// ── 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[placeholder] .matcha-avatar {
-  background: transparent !important;
-}
-
-matcha-avatar[color="primary"][placeholder]    .matcha-avatar { color: var(--matcha-color-primary) !important; }
-matcha-avatar[color="light-blue"][placeholder] .matcha-avatar { color: var(--matcha-color-palette-light-blue) !important; }
-matcha-avatar[color="pink"][placeholder]       .matcha-avatar { color: var(--matcha-color-palette-pink) !important; }
-matcha-avatar[color="teal"][placeholder]       .matcha-avatar { color: var(--matcha-color-palette-teal) !important; }
-matcha-avatar[color="purple"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-purple) !important; }
-matcha-avatar[color="orange"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-orange) !important; }
-matcha-avatar[color="yellow"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-yellow) !important; }
-matcha-avatar[color="neutral"][placeholder]    .matcha-avatar { color: var(--matcha-color-icon-default) !important; }
-
-// Neutral em Initials — cinza canônico Figma (icon-default).
-matcha-avatar[color="neutral"]:not([placeholder]) .matcha-avatar {
-  background: var(--matcha-color-icon-default);
-}
-
-// ── Initials — bg + fg por cor (primary semântico + 6 da palette Figma DSV3) ─
-// 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 da palette é fixed-per-color, não token-based.
-// `primary` é semântico — usa `--matcha-color-primary-contrast`, já resolvido por tema.
-//
-// 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[color="primary"]:not([placeholder])    .matcha-avatar { background: var(--matcha-color-primary); }
-matcha-avatar[color="light-blue"]:not([placeholder]) .matcha-avatar { background: var(--matcha-color-palette-light-blue); }
-matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { background: var(--matcha-color-palette-pink); }
-matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { background: var(--matcha-color-palette-teal); }
-matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-purple); }
-matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-orange); }
-matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-yellow); }
-
-matcha-avatar[color="primary"]:not([placeholder]) .matcha-avatar {
-  color: var(--matcha-color-primary-contrast);
-}
-
-// 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[color="light-blue"]:not([placeholder]) .matcha-avatar { color: #000; }              // 5.42:1 AA
-.theme-default-light matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { color: #fff; }              // 4.95:1 AA
-.theme-default-light matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { color: #fff; }              // 5.32:1 AA
-.theme-default-light matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { color: #fff; }              // 6.30:1 AA
-.theme-default-light matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 4.59:1 AA
-.theme-default-light matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 8.52:1 AAA
-.theme-default-light matcha-avatar[color="neutral"]:not([placeholder])    .matcha-avatar { 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[color="light-blue"]:not([placeholder]) .matcha-avatar { color: #1a1a1a; }           // 8.87:1 AAA
-.theme-default-dark matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { color: #1a1a1a; }           // 5.35:1 AA
-.theme-default-dark matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { color: #1a1a1a; }           // 7.22:1 AAA
-.theme-default-dark matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 4.98:1 AA
-.theme-default-dark matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 8.58:1 AAA
-.theme-default-dark matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 11.94:1 AAA
-.theme-default-dark matcha-avatar[color="neutral"]:not([placeholder])    .matcha-avatar { color: #1a1a1a; }           // icon-default #9aa0a6 vs #1a1a1a = 5.97:1 AA
-
-// ── Avatar Group — empilhamento horizontal com overlap + overflow "+N" ──────
-// Substitui a composição manual (SCSS local) feita nas telas. -10px de overlap
-// é um offset visual bespoke (não genérico) — mantido literal de propósito.
-.matcha-avatar-group {
-  display: inline-flex;
-  align-items: center;
-
-  matcha-avatar {
-    margin-left: -10px;
-    border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-card);
-    border-radius: var(--matcha-radius-pill, 9999px);
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  &__more {
-    margin-left: var(--matcha-space-100, 8px);
-    font-size: var(--matcha-text-sm, 12px);
-    font-weight: var(--matcha-weight-semibold, 600);
-    color: var(--matcha-color-text-secondary);
-  }
-}
-
-// ── 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-card, #fff);
-  box-sizing: border-box;
-
-  // Size scales with avatar — keyed off [size] do host, não classe.
-  matcha-avatar[size="tiny"] & { width: var(--matcha-avatar-status-xs, 8px); height: var(--matcha-avatar-status-xs, 8px); }
-  matcha-avatar[size="small"] & { width: var(--matcha-avatar-status-sm, 10px); height: var(--matcha-avatar-status-sm, 10px); }
-  matcha-avatar[size="medium"] & { width: var(--matcha-avatar-status-md, 12px); height: var(--matcha-avatar-status-md, 12px); }
-  matcha-avatar[size="large"] & { width: var(--matcha-avatar-status-lg, 14px); height: var(--matcha-avatar-status-lg, 14px); }
-  matcha-avatar[size="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"]  .matcha-avatar-status { background-color: var(--matcha-color-success, #16a34a); }
-matcha-avatar[status="offline"] .matcha-avatar-status { background-color: var(--matcha-color-text-placeholder, #9ca3af); }
-matcha-avatar[status="busy"]    .matcha-avatar-status { background-color: var(--matcha-color-danger, #dc2626); }
-
-// ── Theme mixin ─────────────────────────────────────────────────────────────
-
-@mixin matcha-avatar-theme($theme) {
-  matcha-avatar[disabled] .matcha-avatar,
-  .matcha-avatar.color-disabled {
-    background-color: var(--matcha-color-disabled-bg);
-    color: var(--matcha-color-disabled-fg);
-  }
-
-  // Status border-color por tema (estrutural já resolve cores de fundo via tokens).
-  .matcha-avatar-status {
-    border-color: var(--matcha-color-surface-card);
-  }
-}
-
-// =============================================================================
-// A11y / modernity media queries
-// =============================================================================
-
-// 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] .matcha-avatar,
-  .matcha-avatar.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"] .matcha-avatar-status {
-    background: Canvas !important;
-    border: 2px solid CanvasText !important;
-  }
-
-  matcha-avatar[status="busy"] .matcha-avatar-status {
-    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;
-  }
-}
+// =============================================================================
+// matcha-avatar.scss — Avatar component (photo, initials, placeholder + status)
+// Aligned with Figma Avatar/Matcha: XS(24) SM(32) MD(40) LG(56) XL(80) 2XL(96)
+//
+// Estado visual (size/color/status/disabled/placeholder) é selecionado por
+// ATRIBUTO no host (`matcha-avatar[size="medium"]`), não por classe — mesmo
+// padrão já usado pelo `ring` abaixo e pelo `outline`/`link` do matcha-button.
+// A classe `.matcha-avatar` na bolinha interna é só identidade estrutural.
+// =============================================================================
+
+// ── Structural (outside mixin) ──────────────────────────────────────────────
+
+// Host — SEMPRE inline-flex, incondicional (não depende de haver conteúdo
+// projetado). Com zero filhos em matcha-avatar-name/-caption/slot genérico,
+// um flex container de um único item (a bolinha) renderiza idêntico a um
+// avatar bare de hoje — não precisa de @ContentChild pra alternar layout.
+matcha-avatar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+
+  &[orientation="stacked"] {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+.matcha-avatar-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+matcha-avatar-name {
+  display: block;
+  color: var(--matcha-color-text-primary);
+  font-weight: var(--matcha-weight-medium, 500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+matcha-avatar-caption {
+  display: block;
+  color: var(--matcha-color-text-muted);
+  font-weight: var(--matcha-weight-regular, 400);
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.matcha-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  // 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.
+//
+// Os 6 tokens semânticos resolvem inteiro aqui via seletor de atributo — var()
+// direto, sem custom property nem lookup no componente. Halo (glow externo) só
+// em accent/success/warn/danger; primary/neutral só têm o anel sólido. Cor
+// literal (hex/rgb/var arbitrário) é o ÚNICO caso que passa pela custom
+// property --matcha-avatar-ring-color (não dá pra enumerar seletor de atributo
+// pra valor arbitrário) — branch de fallback no final, sem halo.
+// =============================================================================
+matcha-avatar[ring="accent"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-accent),
+    0 0 0 5px var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.10));
+}
+
+matcha-avatar[ring="success"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-success),
+    0 0 0 5px var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
+}
+
+matcha-avatar[ring="warn"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-warn),
+    0 0 0 5px var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
+}
+
+matcha-avatar[ring="danger"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-danger),
+    0 0 0 5px var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
+}
+
+matcha-avatar[ring="primary"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-primary);
+}
+
+matcha-avatar[ring="neutral"] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-color-surface-border);
+}
+
+// Fallback — [ring] presente mas não é nenhum dos 6 tokens acima (cor literal).
+matcha-avatar[ring]:not([ring="accent"]):not([ring="success"]):not([ring="warn"]):not([ring="danger"]):not([ring="primary"]):not([ring="neutral"]) .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-avatar-ring-color, currentColor);
+}
+
+// ── Sizes — Canonical 5-step scale: tiny 24 · small 40 · medium 56 · large 80 · huge 96.
+// O setter do [size] já normaliza os apelidos abreviados (xs/sm/md/lg/xl/2xl) pro nome
+// canônico antes de refletir o atributo — só precisa dos 5 branches aqui.
+// NOTE: --matcha-avatar-* tokens ainda carregam os nomes abreviados legados; retierar pra
+// tiny/small/medium/large/huge do lado Figma/DSV3 é trabalho separado (design-driven).
+matcha-avatar[size="tiny"] .matcha-avatar {
+  width: var(--matcha-avatar-xs, 24px);
+  height: var(--matcha-avatar-xs, 24px);
+  font-size: var(--matcha-text-2xs, 10px);
+  line-height: 1;
+}
+
+matcha-avatar[size="small"] .matcha-avatar {
+  width: var(--matcha-avatar-md, 40px);
+  height: var(--matcha-avatar-md, 40px);
+  font-size: var(--matcha-text-md, 14px);
+  line-height: 1;
+}
+
+matcha-avatar[size="medium"] .matcha-avatar {
+  width: var(--matcha-avatar-lg, 56px);
+  height: var(--matcha-avatar-lg, 56px);
+  font-size: var(--matcha-text-2xl, 20px);
+  line-height: 1;
+}
+
+matcha-avatar[size="large"] .matcha-avatar {
+  width: var(--matcha-avatar-xl, 80px);
+  height: var(--matcha-avatar-xl, 80px);
+  font-size: var(--matcha-text-3xl, 24px);
+  line-height: 1;
+}
+
+matcha-avatar[size="huge"] .matcha-avatar {
+  width: var(--matcha-avatar-2xl, 96px);
+  height: var(--matcha-avatar-2xl, 96px);
+  font-size: var(--matcha-text-4xl, 32px);
+  line-height: 1;
+}
+
+// ── Tipografia de matcha-avatar-name/-caption por [size] — mesmo [size] que
+// já governa a bolinha, sem input separado nem seletor de irmão.
+matcha-avatar[size="tiny"] {
+  matcha-avatar-name { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
+  matcha-avatar-caption { font-size: var(--matcha-text-xs, 11px); line-height: var(--matcha-leading-xs, 14px); }
+}
+matcha-avatar[size="small"] {
+  matcha-avatar-name { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
+  matcha-avatar-caption { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
+}
+matcha-avatar[size="medium"] {
+  matcha-avatar-name { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
+  matcha-avatar-caption { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
+}
+matcha-avatar[size="large"] {
+  matcha-avatar-name { font-size: var(--matcha-text-xl, 18px); line-height: var(--matcha-leading-xl, 24px); }
+  matcha-avatar-caption { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
+}
+matcha-avatar[size="huge"] {
+  matcha-avatar-name { font-size: var(--matcha-text-title-lg, 20px); line-height: var(--matcha-leading-title-lg, 28px); }
+  matcha-avatar-caption { font-size: var(--matcha-text-xl, 18px); line-height: var(--matcha-leading-xl, 24px); }
+}
+
+// ── Stacked (hero/profile header) — tipografia maior, negrito, centralizada.
+matcha-avatar[orientation="stacked"] {
+  &[size="tiny"], &[size="small"] {
+    matcha-avatar-name { font-size: var(--matcha-text-title-sm, 16px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-sm, 22px); }
+    matcha-avatar-caption { font-size: var(--matcha-text-sm, 12px); line-height: var(--matcha-leading-sm, 16px); }
+  }
+  &[size="medium"], &[size="large"] {
+    matcha-avatar-name { font-size: var(--matcha-text-title-md, 18px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-md, 24px); }
+    matcha-avatar-caption { font-size: var(--matcha-text-md, 14px); line-height: var(--matcha-leading-md, 20px); }
+  }
+  &[size="huge"] {
+    matcha-avatar-name { font-size: var(--matcha-text-title-lg, 20px); font-weight: var(--matcha-weight-bold, 700); line-height: var(--matcha-leading-title-lg, 28px); }
+    matcha-avatar-caption { font-size: var(--matcha-text-lg, 16px); line-height: var(--matcha-leading-lg, 24px); }
+  }
+}
+
+.matcha-avatar {
+  // ── Image ──
+  .matcha-avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  // ── Initials ──
+  .matcha-avatar-initials {
+    font-weight: var(--matcha-weight-medium, 500);
+    text-transform: uppercase;
+    letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
+  }
+
+  // ── Placeholder icon ──
+  .matcha-avatar-icon {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ── Disabled ─────────────────────────────────────────────────────────────────
+// `.color-disabled` preservado como gatilho manual alternativo (pré-existente,
+// não gerido pelo componente) — `[disabled]` é o gatilho canônico hoje.
+matcha-avatar[disabled] .matcha-avatar,
+.matcha-avatar.color-disabled {
+  opacity: var(--matcha-opacity-disabled, 0.38);
+  pointer-events: none;
+}
+
+// ── 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[placeholder] .matcha-avatar {
+  background: transparent !important;
+}
+
+matcha-avatar[color="primary"][placeholder]    .matcha-avatar { color: var(--matcha-color-primary) !important; }
+matcha-avatar[color="light-blue"][placeholder] .matcha-avatar { color: var(--matcha-color-palette-light-blue) !important; }
+matcha-avatar[color="pink"][placeholder]       .matcha-avatar { color: var(--matcha-color-palette-pink) !important; }
+matcha-avatar[color="teal"][placeholder]       .matcha-avatar { color: var(--matcha-color-palette-teal) !important; }
+matcha-avatar[color="purple"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-purple) !important; }
+matcha-avatar[color="orange"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-orange) !important; }
+matcha-avatar[color="yellow"][placeholder]     .matcha-avatar { color: var(--matcha-color-palette-yellow) !important; }
+matcha-avatar[color="neutral"][placeholder]    .matcha-avatar { color: var(--matcha-color-icon-default) !important; }
+
+// Neutral em Initials — cinza canônico Figma (icon-default).
+matcha-avatar[color="neutral"]:not([placeholder]) .matcha-avatar {
+  background: var(--matcha-color-icon-default);
+}
+
+// ── Initials — bg + fg por cor (primary semântico + 6 da palette Figma DSV3) ─
+// 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 da palette é fixed-per-color, não token-based.
+// `primary` é semântico — usa `--matcha-color-primary-contrast`, já resolvido por tema.
+//
+// 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[color="primary"]:not([placeholder])    .matcha-avatar { background: var(--matcha-color-primary); }
+matcha-avatar[color="light-blue"]:not([placeholder]) .matcha-avatar { background: var(--matcha-color-palette-light-blue); }
+matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { background: var(--matcha-color-palette-pink); }
+matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { background: var(--matcha-color-palette-teal); }
+matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-purple); }
+matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-orange); }
+matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { background: var(--matcha-color-palette-yellow); }
+
+matcha-avatar[color="primary"]:not([placeholder]) .matcha-avatar {
+  color: var(--matcha-color-primary-contrast);
+}
+
+// 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[color="light-blue"]:not([placeholder]) .matcha-avatar { color: #000; }              // 5.42:1 AA
+.theme-default-light matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { color: #fff; }              // 4.95:1 AA
+.theme-default-light matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { color: #fff; }              // 5.32:1 AA
+.theme-default-light matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { color: #fff; }              // 6.30:1 AA
+.theme-default-light matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 4.59:1 AA
+.theme-default-light matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 8.52:1 AAA
+.theme-default-light matcha-avatar[color="neutral"]:not([placeholder])    .matcha-avatar { 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[color="light-blue"]:not([placeholder]) .matcha-avatar { color: #1a1a1a; }           // 8.87:1 AAA
+.theme-default-dark matcha-avatar[color="pink"]:not([placeholder])       .matcha-avatar { color: #1a1a1a; }           // 5.35:1 AA
+.theme-default-dark matcha-avatar[color="teal"]:not([placeholder])       .matcha-avatar { color: #1a1a1a; }           // 7.22:1 AAA
+.theme-default-dark matcha-avatar[color="purple"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 4.98:1 AA
+.theme-default-dark matcha-avatar[color="orange"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 8.58:1 AAA
+.theme-default-dark matcha-avatar[color="yellow"]:not([placeholder])     .matcha-avatar { color: #1a1a1a; }           // 11.94:1 AAA
+.theme-default-dark matcha-avatar[color="neutral"]:not([placeholder])    .matcha-avatar { color: #1a1a1a; }           // icon-default #9aa0a6 vs #1a1a1a = 5.97:1 AA
+
+// ── Avatar Group — empilhamento horizontal com overlap + overflow "+N" ──────
+// Substitui a composição manual (SCSS local) feita nas telas. -10px de overlap
+// é um offset visual bespoke (não genérico) — mantido literal de propósito.
+.matcha-avatar-group {
+  display: inline-flex;
+  align-items: center;
+
+  matcha-avatar {
+    margin-left: -10px;
+    border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-card);
+    border-radius: var(--matcha-radius-pill, 9999px);
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  &__more {
+    margin-left: var(--matcha-space-100, 8px);
+    font-size: var(--matcha-text-sm, 12px);
+    font-weight: var(--matcha-weight-semibold, 600);
+    color: var(--matcha-color-text-secondary);
+  }
+}
+
+// ── 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-card, #fff);
+  box-sizing: border-box;
+
+  // Size scales with avatar — keyed off [size] do host, não classe.
+  matcha-avatar[size="tiny"] & { width: var(--matcha-avatar-status-xs, 8px); height: var(--matcha-avatar-status-xs, 8px); }
+  matcha-avatar[size="small"] & { width: var(--matcha-avatar-status-sm, 10px); height: var(--matcha-avatar-status-sm, 10px); }
+  matcha-avatar[size="medium"] & { width: var(--matcha-avatar-status-md, 12px); height: var(--matcha-avatar-status-md, 12px); }
+  matcha-avatar[size="large"] & { width: var(--matcha-avatar-status-lg, 14px); height: var(--matcha-avatar-status-lg, 14px); }
+  matcha-avatar[size="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"]  .matcha-avatar-status { background-color: var(--matcha-color-success, #16a34a); }
+matcha-avatar[status="offline"] .matcha-avatar-status { background-color: var(--matcha-color-text-placeholder, #9ca3af); }
+matcha-avatar[status="busy"]    .matcha-avatar-status { background-color: var(--matcha-color-danger, #dc2626); }
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-avatar-theme($theme) {
+  matcha-avatar[disabled] .matcha-avatar,
+  .matcha-avatar.color-disabled {
+    background-color: var(--matcha-color-disabled-bg);
+    color: var(--matcha-color-disabled-fg);
+  }
+
+  // Status border-color por tema (estrutural já resolve cores de fundo via tokens).
+  .matcha-avatar-status {
+    border-color: var(--matcha-color-surface-card);
+  }
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
+
+// 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] .matcha-avatar,
+  .matcha-avatar.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"] .matcha-avatar-status {
+    background: Canvas !important;
+    border: 2px solid CanvasText !important;
+  }
+
+  matcha-avatar[status="busy"] .matcha-avatar-status {
+    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;
+  }
+}