@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-nav.scss

@@ -6,42 +6,67 @@
 
 // ── 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; // enables ::before state layer positioning
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-  border-radius: var(--matcha-radius-md, 4px);
-  cursor: pointer;
-  transition: background-color 150ms;
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
-  box-sizing: border-box;
   text-decoration: none;
   color: inherit;
   user-select: none;
-
-  // State layer
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: currentColor;
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-
-  &:hover:not(.matcha-nav-item--disabled)::before { opacity: var(--matcha-state-hover, 0.08); }
-  &:active:not(.matcha-nav-item--disabled)::before { opacity: var(--matcha-state-active, 0.12); }
+  // 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;
@@ -58,57 +83,137 @@
   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 (accordion children, Notion-style border)
-.matcha-nav-item--indented {
-  padding: var(--matcha-space-075, 6px) var(--matcha-space-100, 8px);
-  padding-left: var(--matcha-space-300, 24px);
+// 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);
-  border-left: var(--matcha-border-thin, 2px) solid transparent;
 
   .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;
+  }
 }
 
-// ── Nav Rail (72px sidebar) ──────────────────────────────────────────────────
+// 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;
-  width: 64px;
+  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-025, 2px);
-  padding: var(--matcha-space-050, 4px) 0;
+  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;
 
@@ -117,176 +222,226 @@
   &::-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;
-  border-radius: var(--matcha-radius-lg, 8px);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--matcha-radius-xl, 12px);
   cursor: pointer;
   flex-shrink: 0;
   position: relative;
-  transition: background-color 150ms;
+  // 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;
 
-  &:hover { opacity: 0.85; }
+  // 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;
-  gap: var(--matcha-space-025, 2px);
-  padding: var(--matcha-space-100, 8px) 0 var(--matcha-space-150, 12px);
+  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;
-  opacity: 0.15;
-  margin: var(--matcha-space-050, 4px) 0;
 }
 
-// ── Nav Panel (216px sub-panel) ──────────────────────────────────────────────
+// ── 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;
-  width: 256px;
+  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: var(--matcha-space-250, 20px) var(--matcha-space-250, 20px) 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;
-}
 
-.matcha-nav-panel__brand {
-  height: 16px;
-}
-
-.matcha-nav-panel__divider {
-  width: 28px;
-  height: 1px;
-  opacity: 0.4;
+  // 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;
+  }
 }
 
-.matcha-nav-panel__module {
+// 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;
 }
 
-.matcha-nav-panel__module-icon {
-  width: 16px;
-  height: 16px;
+// 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.
 
-.matcha-command-palette-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 20vh;
-  animation: matcha-cmd-overlay-in 150ms ease-out;
+@media (prefers-reduced-motion: reduce) {
+  .matcha-nav-item,
+  .matcha-nav-rail__module {
+    animation: none;
+    transition: none;
+  }
 }
 
-.matcha-command-palette {
-  display: flex;
-  flex-direction: column;
-  width: 520px;
-  max-width: calc(100vw - 32px);
-  max-height: 60vh;
-  border-radius: var(--matcha-radius-2xl, 24px);
-  overflow: hidden;
-  z-index: 9999;
-  animation: matcha-cmd-in 150ms ease-out;
-}
+// ── 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-command-palette__search {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-250, 20px);
-  flex-shrink: 0;
-}
+    &.matcha-nav-item--active > .matcha-nav-item__row {
+      background: Highlight;
+      color: HighlightText;
+      border-inline-start: 3px solid Highlight;
+    }
 
-.matcha-command-palette__input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-size: var(--matcha-text-title-sm, 16px);
-  outline: none;
-}
+    &: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;
+    }
 
-.matcha-command-palette__results {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-025, 2px);
-  padding: var(--matcha-space-100, 8px);
-  flex: 1;
-  overflow-y: auto;
-}
+    &:focus-visible .matcha-nav-item__row {
+      outline-color: CanvasText;
+    }
+  }
 
-.matcha-command-palette__result {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-  border-radius: var(--matcha-radius-sm, 2px);
-  cursor: pointer;
-  transition: background-color 100ms;
-}
+  // ── Nav Rail ──
+  .matcha-nav-rail {
+    border-inline-end-color: CanvasText;
+  }
 
-.matcha-command-palette__footer {
-  display: flex;
-  align-items: center;
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-250, 20px);
-  font-size: var(--matcha-text-caption, 11px);
-  flex-shrink: 0;
-}
+  [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;
+  }
 
-@keyframes matcha-cmd-in {
-  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-}
+  [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; }
+  }
 
-@keyframes matcha-cmd-overlay-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  .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 ──
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .matcha-command-palette,
-  .matcha-command-palette-overlay,
-  .matcha-nav-item,
-  .matcha-nav-rail__module {
-    animation: none;
-    transition: none;
+// ── 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;
   }
 }
 
@@ -295,156 +450,132 @@
 // =============================================================================
 
 @mixin matcha-nav-theme($theme) {
-  // ── Nav Item ──
+  // ── 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-fg, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary, #{getForeground($theme)});
 
     .matcha-nav-item__label {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .matcha-nav-item__icon {
-      color: var(--matcha-color-hint, #{getGrey($theme)});
+      color: var(--matcha-color-text-primary, #{getForeground($theme)});
     }
 
+    .matcha-nav-item__icon,
     .matcha-nav-item__chevron {
-      color: var(--matcha-color-hint, #{getGrey($theme)});
+      color: var(--matcha-color-text-secondary, #{getGrey($theme)});
     }
 
-    &:hover {
-      background-color: rgba(var(--matcha-state-layer, 255,255,255), 0.08);
+    // 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);
     }
 
-    // Active state (current selected item)
-    &.matcha-nav-item--active {
-      background-color: var(--matcha-color-accent-surface-hover, #{getAccentAlpha($theme)});
-      border-left: 3px solid var(--matcha-color-accent, #{getAccent($theme)});
+    // 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 {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        font-weight: 500;
+        font-weight: var(--matcha-weight-medium, 500);
       }
 
-      .matcha-nav-item__icon {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
+      .matcha-nav-item__badge {
+        font-weight: var(--matcha-weight-medium, 500);
+        color: var(--matcha-color-text-inverse, #1a1d21);
       }
     }
 
-    // Expanded (parent with open children — subtle bg highlight)
-    &.matcha-nav-item--expanded {
-      background-color: rgba(var(--matcha-state-layer, 255,255,255), 0.04);
-
-      .matcha-nav-item__label {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        font-weight: 400;
-      }
-
-      .matcha-nav-item__icon {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-      }
+    // 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);
+    }
 
-      .matcha-nav-item__chevron {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        opacity: 0.7;
-      }
+    // Badge — Figma DSV3 feedback/danger bg + danger-contrast fg (Padrão).
+    .matcha-nav-item__badge {
+      background: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+      color: var(--matcha-color-feedback-danger-contrast, rgba(0, 0, 0, 0.87));
     }
 
-    // Disabled
+    // Disabled — texto/ícone caem pra disabled-fg.
     &.matcha-nav-item--disabled {
       .matcha-nav-item__label,
-      .matcha-nav-item__icon {
-        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      .matcha-nav-item__icon,
+      .matcha-nav-item__chevron {
+        color: var(--matcha-color-interaction-disabled-fg);
       }
     }
   }
 
-  // Indented (Notion-style border)
-  .matcha-nav-item--indented {
-    border-left-color: var(--matcha-color-accent, #{getAccent($theme)});
-
-    &.matcha-nav-item--active {
-      background-color: var(--matcha-color-accent-surface-hover, #{getAccentAlpha($theme)});
-      border-left: 3px solid var(--matcha-color-accent, #{getAccent($theme)});
-
-      .matcha-nav-item__label {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        font-weight: 500;
-      }
-    }
-  }
+  // Indented — placeholder pra futuras diferenças de tema (border já no base).
 
-  // ── Nav Rail ──
+  // ── 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: var(--matcha-color-surface, #{getSurface($theme)});
-    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+    background-color: color-mix(
+      in srgb,
+      var(--matcha-color-surface-bg, #{getBackground($theme)}) 96%,
+      var(--matcha-color-fg, #{getForeground($theme)}) 4%
+    );
   }
 
+  [matcha-nav-rail-module],
   .matcha-nav-rail__module {
-    color: var(--matcha-color-hint, #{getGrey($theme)});
+    // 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, #{getGrey($theme)});
+
+    matcha-icon {
+      color: var(--matcha-color-text-secondary, #{getGrey($theme)});
+    }
 
-    &.matcha-nav-rail__module--active {
-      background-color: var(--matcha-color-accent-surface, #{getAccentAlpha($theme)});
+    // 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, #{getAccent($theme)});
+
+      matcha-icon {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+      }
     }
   }
 
   .matcha-nav-rail__divider {
-    background-color: var(--matcha-color-border, #{getGrey($theme)});
+    background-color: var(--matcha-color-surface-border, #{getGrey($theme)});
   }
 
-  // ── Nav Panel ──
+  // ── 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, #{getSurface($theme)});
-    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getForegroundAlpha($theme)});
+    background-color: var(--matcha-color-surface-card, #{getSurface($theme)});
+    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
   }
 
   .matcha-nav-panel__divider {
-    background-color: var(--matcha-color-border, #{getForegroundAlpha($theme)});
+    background-color: var(--matcha-color-surface-border, #{getGrey($theme)});
   }
 
-  .matcha-nav-panel__module {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+  .matcha-nav-panel__title {
+    color: var(--matcha-color-text-primary, #{getForeground($theme)});
   }
 
-  .matcha-nav-panel__module-icon {
-    color: var(--matcha-color-hint, #{getGrey($theme)});
+  .matcha-nav-panel__title-icon {
+    color: var(--matcha-color-text-secondary, #{getGrey($theme)});
   }
 
-  // ── Command Palette ──
-  .matcha-command-palette-overlay {
-    background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
-  }
-
-  .matcha-command-palette {
-    $is-dark: map.get($theme, is-dark);
-    background-color: var(--matcha-color-surface, #{getSurface($theme)});
-    box-shadow: var(--matcha-shadow-4, #{if($is-dark, $shadow-4-dark, $shadow-4-light)});
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
-    }
-  }
-
-  .matcha-command-palette__input {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-
-    &::placeholder {
-      color: var(--matcha-color-hint, #{getGrey($theme)});
-    }
-  }
-
-  .matcha-command-palette__result {
-    color: var(--matcha-color-fg-secondary, #{getGrey($theme)});
-
-    &:hover,
-    &.matcha-command-palette__result--selected {
-      background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-  }
-
-  .matcha-command-palette__footer {
-    background-color: var(--matcha-color-surface-bg, #{getBackground($theme)});
-    color: var(--matcha-color-hint, #{getGrey($theme)});
-  }
+  // ── Command Palette theme em matcha-command-palette.scss (canônico) ──
 }