@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-nav.scss

@@ -1,581 +1,581 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-nav.scss — Navigation system (nav-item, nav-rail, nav-panel, command-palette)
-// =============================================================================
-
-// ── Nav Item ─────────────────────────────────────────────────────────────────
-
-// Host: wrapper estrutural. Não tem padding/bg — só layout column pra empilhar
-// row + children. Permite que o consumer aninhe nav-items sem quebrar o layout.
-.matcha-nav-item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  text-decoration: none;
-  color: inherit;
-  user-select: none;
-  // Reset pra <button>/<a> caso o host venha como esses elementos.
-  appearance: none;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  text-align: start;
-  outline: none;
-
-  &.matcha-nav-item--disabled {
-    pointer-events: none;
-    cursor: default;
-
-    .matcha-nav-item__row {
-      cursor: default;
-    }
-  }
-
-  // Focus-visible no host (keyboard) → repassa pro __row (visual).
-  &:focus-visible .matcha-nav-item__row {
-    outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-    outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
-  }
-}
-
-// Row: o "botão" visível do nav-item — Figma DSV3 1:1.
-//   Expansível: pad 8/12, gap 8, radius md (4px), body-md (14/20 regular)
-//   Indentado:  pad 6/8/24, gap 8, radius sm (2px), body-sm (12/16 regular)
-//   Ativo: bg accent/alpha + border-inline-start 3px accent + label medium 500
-//   Hover: bg accent/surface-hover
-//   Expandido: bg accent/surface-pressed
-//
-// box-sizing: border-box + border-inline-start: 3px solid accent (no Ativo)
-// gera shift de 3px no content (Padrão @12 → Ativo @15) — literal Figma.
-.matcha-nav-item__row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  padding-block: var(--matcha-space-100, 8px);
-  padding-inline: var(--matcha-space-150, 12px);
-  border-radius: var(--matcha-radius-md, 4px);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  width: 100%;
-  box-sizing: border-box;
-  transition: background-color var(--matcha-duration-instant, 80ms) ease,
-              border-color var(--matcha-duration-instant, 80ms) ease;
-}
-
-.matcha-nav-item__icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-}
-
-.matcha-nav-item__label {
-  flex: 1;
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Badge — Figma DSV3 spec (matcha/badge variant Label/Danger):
-// padding 2/8, gap 4, radius pill (9999), bg feedback/danger, caption (11/14, letter 0.3).
-// Em Ativo, font-weight medium 500 (Figma).
-.matcha-nav-item__badge {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
-  gap: var(--matcha-space-050, 4px);
-  border-radius: var(--matcha-radius-pill, 9999px);
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-p-tiny, 11px);
-  line-height: var(--matcha-leading-p-tiny, 14px);
-  letter-spacing: var(--matcha-letter-spacing-caption, 0.3px);
-  font-weight: 400;
-}
-
-// Contador de itens da seção (drawer header) — número discreto à direita do label.
-.matcha-nav-item__count {
-  flex-shrink: 0;
-  font-family: var(--matcha-font-family);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-  color: var(--matcha-color-text-secondary);
-  opacity: 0.7;
-  margin-left: auto;
-  margin-right: 4px;
-}
-
-// Chevron — SVG matcha-icon variant=right (fixo). Rotaciona 90° via CSS quando
-// item está expandido. Easing-emphasized (Material 3 spring) pra rotação smooth.
-.matcha-nav-item__chevron {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-  transition: transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-  transform: rotate(0deg);
-
-  .matcha-nav-item--expanded & {
-    transform: rotate(90deg);
-  }
-}
-
-// Indented variant (subitem) — Figma DSV3: só label, padding 6/8/24, radius sm.
-.matcha-nav-item--indented .matcha-nav-item__row {
-  padding-block: var(--matcha-space-075, 6px);
-  padding-inline: var(--matcha-space-300, 24px) var(--matcha-space-100, 8px);
-  border-radius: var(--matcha-radius-sm, 2px);
-
-  .matcha-nav-item__label {
-    font-size: var(--matcha-text-body-sm, 12px);
-    line-height: 16px;
-  }
-
-  // Esconde slots não-canônicos do indentado (Figma só permite label).
-  .matcha-nav-item__icon,
-  .matcha-nav-item__badge,
-  .matcha-nav-item__chevron {
-    display: none;
-  }
-}
-
-// Children container (nav-items aninhados quando pai está expandido).
-// Flex column garante que filhos empilhem verticalmente, NÃO inline com o row.
-// Gap 4px igual ao items slot do panel — mantém rítmo visual consistente.
-// Margin-top 4px separa o primeiro filho do row do pai.
-//
-// Animation: fade + slight slide-down ao montar (cada vez que *ngIf entra).
-// Duration fast 200ms easing-emphasized — entra suave, não abrupto.
-.matcha-nav-item__children {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--matcha-space-050, 4px);
-  margin-top: var(--matcha-space-050, 4px);
-  width: 100%;
-  animation: matcha-nav-item-children-in
-             var(--matcha-duration-fast, 200ms)
-             var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-}
-
-@keyframes matcha-nav-item-children-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-// ── Nav Rail (72px sidebar — Figma DSV3 1:1 com matcha/nav-rail) ────────────
-
-.matcha-nav-rail {
-  // Wrapper externo: 72px wide, full height.
-  // Bg surface/bg (1 nível abaixo do panel) — cria depth tonal sutil sem
-  // precisar de border ou shadow. Pattern canônico de DS modernos (Slack,
-  // VS Code, Linear): rail "recuado" + panel "elevado". Hierarquia Z via tom.
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 72px;
-  height: 100%;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 0;
-}
-
-.matcha-nav-rail__header {
-  // Figma: 72×56, padding 4/0, flex row center.
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: var(--matcha-grid-header-height, 56px);
-  padding: var(--matcha-space-050, 4px) 0;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-.matcha-nav-rail__modules {
-  // Figma: padding 12/0, gap 4, flex column center.
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--matcha-space-050, 4px);
-  padding: var(--matcha-space-150, 12px) 0;
-  flex: 1;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  // Hide scrollbar but keep scroll
-  scrollbar-width: none;
-  &::-webkit-scrollbar { display: none; }
-}
-
-// Module button — Figma: 44×44 (touch target), radius 12, sem padding.
-// Suporta tanto o atributo de slot (consumer projeta com `matcha-nav-rail-module`)
-// quanto a classe BEM (caso consumer use `.matcha-nav-rail__module` diretamente).
-[matcha-nav-rail-module],
-.matcha-nav-rail__module {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  border-radius: var(--matcha-radius-xl, 12px);
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-  // Reset pra <button>
-  appearance: none;
-  font: inherit;
-  color: inherit;
-  transition: background-color var(--matcha-duration-instant, 80ms) ease,
-              color var(--matcha-duration-instant, 80ms) ease;
-
-  // Focus-visible — keyboard nav.
-  &:focus-visible {
-    outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-    outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-  }
-}
-
-.matcha-nav-rail__footer {
-  // Figma: padding 8/0, flex column center.
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding: var(--matcha-space-100, 8px) 0;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-.matcha-nav-rail__divider {
-  // Figma: 28×1, bg surface/border (rgba(255,255,255,0.12) dark).
-  // Sem opacity extra — token já tem 12% built-in.
-  flex-shrink: 0;
-  width: 28px;
-  height: 1px;
-}
-
-// ── Nav Panel (216px sub-panel — Figma DSV3 1:1 com matcha/nav-panel) ───────
-// Estrutura: header (title-row) → divider 192×1 → items slot.
-// Bg surface/card · só border-right (não border completa) · width 216 fixa.
-
-.matcha-nav-panel {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 216px;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0;
-  overflow: hidden;
-}
-
-// Header — Figma: padding 20/20/16/20, gap 16.
-// Logical properties pra suporte RTL automático.
-// Aceita slot custom via [matcha-nav-panel-header] OU default title-row.
-.matcha-nav-panel__header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--matcha-space-200, 16px);
-  padding-block-start: var(--matcha-space-250, 20px);
-  padding-block-end:   var(--matcha-space-200, 16px);
-  padding-inline:      var(--matcha-space-250, 20px);
-  width: 100%;
-  box-sizing: border-box;
-  flex-shrink: 0;
-
-  // Default title-row some quando consumer projeta slot custom
-  // (priority pro custom, sem precisar de boolean prop).
-  &:has([matcha-nav-panel-header]) .matcha-nav-panel__title-row--default {
-    display: none;
-  }
-}
-
-// Title row — Figma: padding 0, gap 8, body-md regular 14/20.
-.matcha-nav-panel__title-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  width: 100%;
-  height: 20px;
-  min-width: 0;
-}
-
-.matcha-nav-panel__title-icon {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.matcha-nav-panel__title {
-  flex: 1;
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Divider — Figma: 192×1 (= 216 - 12 - 12 padding sides), sibling do header.
-// Centrado via margin auto.
-.matcha-nav-panel__divider {
-  flex-shrink: 0;
-  width: 192px;
-  height: 1px;
-  margin: 0 auto;
-}
-
-// Items slot — Figma: padding 12 (todos lados), gap 4, scroll vertical.
-.matcha-nav-panel__items {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--matcha-space-050, 4px);
-  padding: var(--matcha-space-150, 12px);
-  flex: 1;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  // Hide scrollbar mas mantém scroll funcional.
-  scrollbar-width: thin;
-}
-
-// ── Command Palette ──────────────────────────────────────────────────────────
-// Estilos do command-palette movidos pra matcha-command-palette.scss (canônico).
-// Mantido aqui só o reduced-motion das outras nav classes.
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-nav-item,
-  .matcha-nav-rail__module {
-    animation: none;
-    transition: none;
-  }
-}
-
-// ── Forced colors (Windows High Contrast) ──────────────────────────────────
-// Bgs translúcidos (accent-surface-hover, accent-alpha) somem em high-contrast.
-// Usa system colors (Highlight, SelectedItem, CanvasText) sempre visíveis.
-@media (forced-colors: active) {
-  // ── Nav Item ──
-  .matcha-nav-item {
-    forced-color-adjust: none;
-
-    &.matcha-nav-item--active > .matcha-nav-item__row {
-      background: Highlight;
-      color: HighlightText;
-      border-inline-start: 3px solid Highlight;
-    }
-
-    &:not(.matcha-nav-item--disabled):not(.matcha-nav-item--active) > .matcha-nav-item__row:hover,
-    &.matcha-nav-item--expanded:not(.matcha-nav-item--active) > .matcha-nav-item__row {
-      background: SelectedItem;
-      color: SelectedItemText;
-    }
-
-    &:focus-visible .matcha-nav-item__row {
-      outline-color: CanvasText;
-    }
-  }
-
-  // ── Nav Rail ──
-  .matcha-nav-rail {
-    border-inline-end-color: CanvasText;
-  }
-
-  [matcha-nav-rail-module]:hover:not([aria-current]):not(.matcha-nav-rail__module--active),
-  .matcha-nav-rail__module:hover:not([aria-current]):not(.matcha-nav-rail__module--active) {
-    background: SelectedItem;
-    color: SelectedItemText;
-  }
-
-  [matcha-nav-rail-module][aria-current],
-  [matcha-nav-rail-module].matcha-nav-rail__module--active,
-  .matcha-nav-rail__module--active {
-    background: Highlight;
-    color: HighlightText;
-
-    matcha-icon { color: HighlightText; }
-  }
-
-  .matcha-nav-rail__divider {
-    background-color: CanvasText;
-  }
-
-  // ── Nav Panel ──
-  .matcha-nav-panel {
-    border-color: CanvasText;
-  }
-
-  .matcha-nav-panel__divider {
-    background-color: CanvasText;
-  }
-
-  // ── Command Palette: high-contrast em matcha-command-palette.scss ──
-}
-
-// ── Print ──────────────────────────────────────────────────────────────────
-// Convenção DS: chrome de navegação some em impressão — conteúdo full-page.
-@media print {
-  .matcha-nav-rail,
-  .matcha-nav-panel {
-    display: none !important;
-  }
-}
-
-// =============================================================================
-// Theme mixin
-// =============================================================================
-
-@mixin matcha-nav-theme($theme) {
-  // ── Nav Item ── Figma DSV3 (node 14998:10045) — tokens accent diretos
-  // Bg/border/etc aplicados no .matcha-nav-item__row (não no host) — assim
-  // os filhos aninhados não herdam o bg do pai expandido/ativo.
-  .matcha-nav-item {
-    color: var(--matcha-color-text-primary);
-
-    .matcha-nav-item__label {
-      color: var(--matcha-color-text-primary);
-    }
-
-    .matcha-nav-item__icon,
-    .matcha-nav-item__chevron {
-      color: var(--matcha-color-text-secondary);
-    }
-
-    // Hover — bg accent/surface-hover direto (Figma usa este token, não state-layer).
-    &:not(.matcha-nav-item--disabled):not(.matcha-nav-item--active) > .matcha-nav-item__row:hover {
-      background-color: var(--matcha-color-accent-surface-hover);
-    }
-
-    // Ativo — bg accent/alpha + border-inline-start 3px accent + label medium.
-    // 1:1 literal Figma. Aplicado no __row (não host) pra não vazar pros filhos.
-    &.matcha-nav-item--active > .matcha-nav-item__row {
-      background-color: var(--matcha-color-accent-alpha);
-      border-inline-start: 3px solid var(--matcha-color-accent);
-
-      .matcha-nav-item__label {
-        font-weight: var(--matcha-weight-medium, 500);
-      }
-
-      .matcha-nav-item__badge {
-        font-weight: var(--matcha-weight-medium, 500);
-        color: var(--matcha-color-text-inverse, #1a1d21);
-      }
-    }
-
-    // Expandido — pai com filhos abertos: bg accent/surface-pressed.
-    &.matcha-nav-item--expanded:not(.matcha-nav-item--active) > .matcha-nav-item__row {
-      background-color: var(--matcha-color-accent-surface-pressed);
-    }
-
-    // Badge — Figma DSV3 feedback/danger bg + danger-contrast fg (Padrão).
-    .matcha-nav-item__badge {
-      background: var(--matcha-color-feedback-danger);
-      color: var(--matcha-color-feedback-danger-contrast, rgba(0, 0, 0, 0.87));
-    }
-
-    // Disabled — texto/ícone caem pra disabled-fg.
-    &.matcha-nav-item--disabled {
-      .matcha-nav-item__label,
-      .matcha-nav-item__icon,
-      .matcha-nav-item__chevron {
-        color: var(--matcha-color-interaction-disabled-fg);
-      }
-    }
-  }
-
-  // Indented — placeholder pra futuras diferenças de tema (border já no base).
-
-  // ── Nav Rail (depth sutil — light/dark adaptativo) ──
-  // Bg = surface-bg (page layer) + 4% foreground overlay via color-mix.
-  // Cria tonal step VISIBLE em ambos modes:
-  //   - Light: surface-bg #f1f4f1 + 4% fg #2a2d33 → ~#e8ebe7 (recesso vs page brighter)
-  //   - Dark:  surface-bg #111318 + 4% fg #e8eaed → ~#1a1c20 (peak vs page darker)
-  // Antes usava surface-card 85% transparente, que em light ficava imperceptível
-  // (surface-card ≈ surface-bg no zona do branco — humano não distingue ~7 units).
-  .matcha-nav-rail {
-    background-color: color-mix(
-      in srgb,
-      var(--matcha-color-surface-bg) 96%,
-      var(--matcha-color-fg) 4%
-    );
-  }
-
-  [matcha-nav-rail-module],
-  .matcha-nav-rail__module {
-    // Inactive: text-secondary no button + override no matcha-icon filho
-    // (matcha-icon tem regra global no theme com mesma especificidade,
-    // então precisa target explícito pra vencer no cascade).
-    color: var(--matcha-color-text-secondary);
-
-    matcha-icon {
-      color: var(--matcha-color-text-secondary);
-    }
-
-    // Hover (inactive): bg accent/surface-hover (state-layer canon Figma).
-    &:hover:not(.matcha-nav-rail__module--active):not([aria-current]) {
-      background-color: var(--matcha-color-accent-surface-hover);
-    }
-
-    // Active: bg accent/surface-hover + icon accent.
-    // Figma usa #161E12 (accent/surface-hover token), não accent/alpha.
-    // Aceita .--active class OU aria-current (pattern ARIA canônico).
-    &.matcha-nav-rail__module--active,
-    &[aria-current] {
-      background-color: var(--matcha-color-accent-surface-hover);
-      color: var(--matcha-color-accent);
-
-      matcha-icon {
-        color: var(--matcha-color-accent);
-      }
-    }
-  }
-
-  .matcha-nav-rail__divider {
-    background-color: var(--matcha-color-surface-border);
-  }
-
-  // ── Nav Panel (Figma DSV3 1:1) ──
-  // bg surface/card (1 step acima do rail). Sem shadow — só tonal hierarchy.
-  .matcha-nav-panel {
-    background-color: var(--matcha-color-surface-card);
-    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-  }
-
-  .matcha-nav-panel__divider {
-    background-color: var(--matcha-color-surface-border);
-  }
-
-  .matcha-nav-panel__title {
-    color: var(--matcha-color-text-primary);
-  }
-
-  .matcha-nav-panel__title-icon {
-    color: var(--matcha-color-text-secondary);
-  }
-
-  // ── Command Palette theme em matcha-command-palette.scss (canônico) ──
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-nav.scss — Navigation system (nav-item, nav-rail, nav-panel, command-palette)
+// =============================================================================
+
+// ── Nav Item ─────────────────────────────────────────────────────────────────
+
+// Host: wrapper estrutural. Não tem padding/bg — só layout column pra empilhar
+// row + children. Permite que o consumer aninhe nav-items sem quebrar o layout.
+.matcha-nav-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  text-decoration: none;
+  color: inherit;
+  user-select: none;
+  // Reset pra <button>/<a> caso o host venha como esses elementos.
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  outline: none;
+
+  &.matcha-nav-item--disabled {
+    pointer-events: none;
+    cursor: default;
+
+    .matcha-nav-item__row {
+      cursor: default;
+    }
+  }
+
+  // Focus-visible no host (keyboard) → repassa pro __row (visual).
+  &:focus-visible .matcha-nav-item__row {
+    outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+    outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
+  }
+}
+
+// Row: o "botão" visível do nav-item — Figma DSV3 1:1.
+//   Expansível: pad 8/12, gap 8, radius md (4px), body-md (14/20 regular)
+//   Indentado:  pad 6/8/24, gap 8, radius sm (2px), body-sm (12/16 regular)
+//   Ativo: bg accent/alpha + border-inline-start 3px accent + label medium 500
+//   Hover: bg accent/surface-hover
+//   Expandido: bg accent/surface-pressed
+//
+// box-sizing: border-box + border-inline-start: 3px solid accent (no Ativo)
+// gera shift de 3px no content (Padrão @12 → Ativo @15) — literal Figma.
+.matcha-nav-item__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding-block: var(--matcha-space-100, 8px);
+  padding-inline: var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-md, 4px);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  transition: background-color var(--matcha-duration-instant, 80ms) ease,
+              border-color var(--matcha-duration-instant, 80ms) ease;
+}
+
+.matcha-nav-item__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.matcha-nav-item__label {
+  flex: 1;
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Badge — Figma DSV3 spec (matcha/badge variant Label/Danger):
+// padding 2/8, gap 4, radius pill (9999), bg feedback/danger, caption (11/14, letter 0.3).
+// Em Ativo, font-weight medium 500 (Figma).
+.matcha-nav-item__badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
+  gap: var(--matcha-space-050, 4px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
+  letter-spacing: var(--matcha-letter-spacing-caption, 0.3px);
+  font-weight: 400;
+}
+
+// Contador de itens da seção (drawer header) — número discreto à direita do label.
+.matcha-nav-item__count {
+  flex-shrink: 0;
+  font-family: var(--matcha-font-family);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  color: var(--matcha-color-text-secondary);
+  opacity: 0.7;
+  margin-left: auto;
+  margin-right: 4px;
+}
+
+// Chevron — SVG matcha-icon variant=right (fixo). Rotaciona 90° via CSS quando
+// item está expandido. Easing-emphasized (Material 3 spring) pra rotação smooth.
+.matcha-nav-item__chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  opacity: 0.5;
+  transition: transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  transform: rotate(0deg);
+
+  .matcha-nav-item--expanded & {
+    transform: rotate(90deg);
+  }
+}
+
+// Indented variant (subitem) — Figma DSV3: só label, padding 6/8/24, radius sm.
+.matcha-nav-item--indented .matcha-nav-item__row {
+  padding-block: var(--matcha-space-075, 6px);
+  padding-inline: var(--matcha-space-300, 24px) var(--matcha-space-100, 8px);
+  border-radius: var(--matcha-radius-sm, 2px);
+
+  .matcha-nav-item__label {
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: 16px;
+  }
+
+  // Esconde slots não-canônicos do indentado (Figma só permite label).
+  .matcha-nav-item__icon,
+  .matcha-nav-item__badge,
+  .matcha-nav-item__chevron {
+    display: none;
+  }
+}
+
+// Children container (nav-items aninhados quando pai está expandido).
+// Flex column garante que filhos empilhem verticalmente, NÃO inline com o row.
+// Gap 4px igual ao items slot do panel — mantém rítmo visual consistente.
+// Margin-top 4px separa o primeiro filho do row do pai.
+//
+// Animation: fade + slight slide-down ao montar (cada vez que *ngIf entra).
+// Duration fast 200ms easing-emphasized — entra suave, não abrupto.
+.matcha-nav-item__children {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--matcha-space-050, 4px);
+  margin-top: var(--matcha-space-050, 4px);
+  width: 100%;
+  animation: matcha-nav-item-children-in
+             var(--matcha-duration-fast, 200ms)
+             var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+}
+
+@keyframes matcha-nav-item-children-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+// ── Nav Rail (72px sidebar — Figma DSV3 1:1 com matcha/nav-rail) ────────────
+
+.matcha-nav-rail {
+  // Wrapper externo: 72px wide, full height.
+  // Bg surface/bg (1 nível abaixo do panel) — cria depth tonal sutil sem
+  // precisar de border ou shadow. Pattern canônico de DS modernos (Slack,
+  // VS Code, Linear): rail "recuado" + panel "elevado". Hierarquia Z via tom.
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 72px;
+  height: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+}
+
+.matcha-nav-rail__header {
+  // Figma: 72×56, padding 4/0, flex row center.
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--matcha-grid-header-height, 56px);
+  padding: var(--matcha-space-050, 4px) 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.matcha-nav-rail__modules {
+  // Figma: padding 12/0, gap 4, flex column center.
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+  padding: var(--matcha-space-150, 12px) 0;
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  // Hide scrollbar but keep scroll
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+// Module button — Figma: 44×44 (touch target), radius 12, sem padding.
+// Suporta tanto o atributo de slot (consumer projeta com `matcha-nav-rail-module`)
+// quanto a classe BEM (caso consumer use `.matcha-nav-rail__module` diretamente).
+[matcha-nav-rail-module],
+.matcha-nav-rail__module {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--matcha-radius-xl, 12px);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  // Reset pra <button>
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  transition: background-color var(--matcha-duration-instant, 80ms) ease,
+              color var(--matcha-duration-instant, 80ms) ease;
+
+  // Focus-visible — keyboard nav.
+  &:focus-visible {
+    outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+    outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+  }
+}
+
+.matcha-nav-rail__footer {
+  // Figma: padding 8/0, flex column center.
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: var(--matcha-space-100, 8px) 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.matcha-nav-rail__divider {
+  // Figma: 28×1, bg surface/border (rgba(255,255,255,0.12) dark).
+  // Sem opacity extra — token já tem 12% built-in.
+  flex-shrink: 0;
+  width: 28px;
+  height: 1px;
+}
+
+// ── Nav Panel (216px sub-panel — Figma DSV3 1:1 com matcha/nav-panel) ───────
+// Estrutura: header (title-row) → divider 192×1 → items slot.
+// Bg surface/card · só border-right (não border completa) · width 216 fixa.
+
+.matcha-nav-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 216px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+}
+
+// Header — Figma: padding 20/20/16/20, gap 16.
+// Logical properties pra suporte RTL automático.
+// Aceita slot custom via [matcha-nav-panel-header] OU default title-row.
+.matcha-nav-panel__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--matcha-space-200, 16px);
+  padding-block-start: var(--matcha-space-250, 20px);
+  padding-block-end:   var(--matcha-space-200, 16px);
+  padding-inline:      var(--matcha-space-250, 20px);
+  width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  // Default title-row some quando consumer projeta slot custom
+  // (priority pro custom, sem precisar de boolean prop).
+  &:has([matcha-nav-panel-header]) .matcha-nav-panel__title-row--default {
+    display: none;
+  }
+}
+
+// Title row — Figma: padding 0, gap 8, body-md regular 14/20.
+.matcha-nav-panel__title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  width: 100%;
+  height: 20px;
+  min-width: 0;
+}
+
+.matcha-nav-panel__title-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.matcha-nav-panel__title {
+  flex: 1;
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Divider — Figma: 192×1 (= 216 - 12 - 12 padding sides), sibling do header.
+// Centrado via margin auto.
+.matcha-nav-panel__divider {
+  flex-shrink: 0;
+  width: 192px;
+  height: 1px;
+  margin: 0 auto;
+}
+
+// Items slot — Figma: padding 12 (todos lados), gap 4, scroll vertical.
+.matcha-nav-panel__items {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--matcha-space-050, 4px);
+  padding: var(--matcha-space-150, 12px);
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  // Hide scrollbar mas mantém scroll funcional.
+  scrollbar-width: thin;
+}
+
+// ── Command Palette ──────────────────────────────────────────────────────────
+// Estilos do command-palette movidos pra matcha-command-palette.scss (canônico).
+// Mantido aqui só o reduced-motion das outras nav classes.
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-nav-item,
+  .matcha-nav-rail__module {
+    animation: none;
+    transition: none;
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──────────────────────────────────
+// Bgs translúcidos (accent-surface-hover, accent-alpha) somem em high-contrast.
+// Usa system colors (Highlight, SelectedItem, CanvasText) sempre visíveis.
+@media (forced-colors: active) {
+  // ── Nav Item ──
+  .matcha-nav-item {
+    forced-color-adjust: none;
+
+    &.matcha-nav-item--active > .matcha-nav-item__row {
+      background: Highlight;
+      color: HighlightText;
+      border-inline-start: 3px solid Highlight;
+    }
+
+    &:not(.matcha-nav-item--disabled):not(.matcha-nav-item--active) > .matcha-nav-item__row:hover,
+    &.matcha-nav-item--expanded:not(.matcha-nav-item--active) > .matcha-nav-item__row {
+      background: SelectedItem;
+      color: SelectedItemText;
+    }
+
+    &:focus-visible .matcha-nav-item__row {
+      outline-color: CanvasText;
+    }
+  }
+
+  // ── Nav Rail ──
+  .matcha-nav-rail {
+    border-inline-end-color: CanvasText;
+  }
+
+  [matcha-nav-rail-module]:hover:not([aria-current]):not(.matcha-nav-rail__module--active),
+  .matcha-nav-rail__module:hover:not([aria-current]):not(.matcha-nav-rail__module--active) {
+    background: SelectedItem;
+    color: SelectedItemText;
+  }
+
+  [matcha-nav-rail-module][aria-current],
+  [matcha-nav-rail-module].matcha-nav-rail__module--active,
+  .matcha-nav-rail__module--active {
+    background: Highlight;
+    color: HighlightText;
+
+    matcha-icon { color: HighlightText; }
+  }
+
+  .matcha-nav-rail__divider {
+    background-color: CanvasText;
+  }
+
+  // ── Nav Panel ──
+  .matcha-nav-panel {
+    border-color: CanvasText;
+  }
+
+  .matcha-nav-panel__divider {
+    background-color: CanvasText;
+  }
+
+  // ── Command Palette: high-contrast em matcha-command-palette.scss ──
+}
+
+// ── Print ──────────────────────────────────────────────────────────────────
+// Convenção DS: chrome de navegação some em impressão — conteúdo full-page.
+@media print {
+  .matcha-nav-rail,
+  .matcha-nav-panel {
+    display: none !important;
+  }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-nav-theme($theme) {
+  // ── Nav Item ── Figma DSV3 (node 14998:10045) — tokens accent diretos
+  // Bg/border/etc aplicados no .matcha-nav-item__row (não no host) — assim
+  // os filhos aninhados não herdam o bg do pai expandido/ativo.
+  .matcha-nav-item {
+    color: var(--matcha-color-text-primary);
+
+    .matcha-nav-item__label {
+      color: var(--matcha-color-text-primary);
+    }
+
+    .matcha-nav-item__icon,
+    .matcha-nav-item__chevron {
+      color: var(--matcha-color-text-secondary);
+    }
+
+    // Hover — bg accent/surface-hover direto (Figma usa este token, não state-layer).
+    &:not(.matcha-nav-item--disabled):not(.matcha-nav-item--active) > .matcha-nav-item__row:hover {
+      background-color: var(--matcha-color-accent-surface-hover);
+    }
+
+    // Ativo — bg accent/alpha + border-inline-start 3px accent + label medium.
+    // 1:1 literal Figma. Aplicado no __row (não host) pra não vazar pros filhos.
+    &.matcha-nav-item--active > .matcha-nav-item__row {
+      background-color: var(--matcha-color-accent-alpha);
+      border-inline-start: 3px solid var(--matcha-color-accent);
+
+      .matcha-nav-item__label {
+        font-weight: var(--matcha-weight-medium, 500);
+      }
+
+      .matcha-nav-item__badge {
+        font-weight: var(--matcha-weight-medium, 500);
+        color: var(--matcha-color-text-inverse, #1a1d21);
+      }
+    }
+
+    // Expandido — pai com filhos abertos: bg accent/surface-pressed.
+    &.matcha-nav-item--expanded:not(.matcha-nav-item--active) > .matcha-nav-item__row {
+      background-color: var(--matcha-color-accent-surface-pressed);
+    }
+
+    // Badge — Figma DSV3 feedback/danger bg + danger-contrast fg (Padrão).
+    .matcha-nav-item__badge {
+      background: var(--matcha-color-feedback-danger);
+      color: var(--matcha-color-feedback-danger-contrast, rgba(0, 0, 0, 0.87));
+    }
+
+    // Disabled — texto/ícone caem pra disabled-fg.
+    &.matcha-nav-item--disabled {
+      .matcha-nav-item__label,
+      .matcha-nav-item__icon,
+      .matcha-nav-item__chevron {
+        color: var(--matcha-color-interaction-disabled-fg);
+      }
+    }
+  }
+
+  // Indented — placeholder pra futuras diferenças de tema (border já no base).
+
+  // ── Nav Rail (depth sutil — light/dark adaptativo) ──
+  // Bg = surface-bg (page layer) + 4% foreground overlay via color-mix.
+  // Cria tonal step VISIBLE em ambos modes:
+  //   - Light: surface-bg #f1f4f1 + 4% fg #2a2d33 → ~#e8ebe7 (recesso vs page brighter)
+  //   - Dark:  surface-bg #111318 + 4% fg #e8eaed → ~#1a1c20 (peak vs page darker)
+  // Antes usava surface-card 85% transparente, que em light ficava imperceptível
+  // (surface-card ≈ surface-bg no zona do branco — humano não distingue ~7 units).
+  .matcha-nav-rail {
+    background-color: color-mix(
+      in srgb,
+      var(--matcha-color-surface-bg) 96%,
+      var(--matcha-color-fg) 4%
+    );
+  }
+
+  [matcha-nav-rail-module],
+  .matcha-nav-rail__module {
+    // Inactive: text-secondary no button + override no matcha-icon filho
+    // (matcha-icon tem regra global no theme com mesma especificidade,
+    // então precisa target explícito pra vencer no cascade).
+    color: var(--matcha-color-text-secondary);
+
+    matcha-icon {
+      color: var(--matcha-color-text-secondary);
+    }
+
+    // Hover (inactive): bg accent/surface-hover (state-layer canon Figma).
+    &:hover:not(.matcha-nav-rail__module--active):not([aria-current]) {
+      background-color: var(--matcha-color-accent-surface-hover);
+    }
+
+    // Active: bg accent/surface-hover + icon accent.
+    // Figma usa #161E12 (accent/surface-hover token), não accent/alpha.
+    // Aceita .--active class OU aria-current (pattern ARIA canônico).
+    &.matcha-nav-rail__module--active,
+    &[aria-current] {
+      background-color: var(--matcha-color-accent-surface-hover);
+      color: var(--matcha-color-accent);
+
+      matcha-icon {
+        color: var(--matcha-color-accent);
+      }
+    }
+  }
+
+  .matcha-nav-rail__divider {
+    background-color: var(--matcha-color-surface-border);
+  }
+
+  // ── Nav Panel (Figma DSV3 1:1) ──
+  // bg surface/card (1 step acima do rail). Sem shadow — só tonal hierarchy.
+  .matcha-nav-panel {
+    background-color: var(--matcha-color-surface-card);
+    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+  }
+
+  .matcha-nav-panel__divider {
+    background-color: var(--matcha-color-surface-border);
+  }
+
+  .matcha-nav-panel__title {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-nav-panel__title-icon {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  // ── Command Palette theme em matcha-command-palette.scss (canônico) ──
+}