@inchurch/matcha-theme 22.27.0 → 22.27.2

package/components/matcha-accordion.scss

@@ -45,9 +45,13 @@
     }
 
     // ── Content text ──
-    .accordion-content {
-      color: var(--matcha-color-text-label);
-    }
+    // NÃO definir `color` aqui. `.accordion-content` é slot de conteúdo
+    // ARBITRÁRIO (form, tabela, parágrafo, componente inteiro) — impor cor
+    // sequestra tudo que for projetado. Até 22.27.1 este seletor aplicava
+    // `--matcha-color-text-label` (#7a818a), deixando todo texto de accordion
+    // cinza; o consumidor herda `--matcha-color-fg` (#2a2d33) do body reset,
+    // que é a cor correta. Mesmo contrato do matcha-card, cujo
+    // `.matcha-card__slot--content` também não define cor.
 
     // ── Chevron ──
     .accordion-chevron {

package/components/matcha-nav.scss

@@ -482,11 +482,116 @@
   // ── Command Palette: high-contrast em matcha-command-palette.scss ──
 }
 
+// ── Nav Drawer ───────────────────────────────────────────────────────────────
+// Navegação em drawer (Figma DSV3 node 19228:2014) — a forma da navegação quando
+// não há espaço pro par rail + panel. Compõe matcha-drawer-container +
+// matcha-drawer mode=over; aqui só a anatomia e o ritmo da árvore.
+
+.matcha-nav-drawer {
+  // Cobre a viewport pra ancorar o backdrop do container (que é absolute/inset:0).
+  // Sem isso o scrim ficaria do tamanho do pai onde o drawer foi declarado.
+  position: fixed;
+  inset: 0;
+  z-index: var(--matcha-nav-drawer-z, 1000);
+  // Fechado não pode capturar clique da página que está por baixo.
+  pointer-events: none;
+
+  &.matcha-nav-drawer--opened {
+    pointer-events: auto;
+  }
+
+  // Contained — ancora no ancestral posicionado em vez da viewport. Preview e
+  // embed (playground da doc dentro de um frame de phone). Mesmo cenário que o
+  // matcha-drawer já reconhece no max-height do bottom sheet.
+  &.matcha-nav-drawer--contained {
+    position: absolute;
+  }
+
+  // O container tem bg opaco próprio (é feito pra envolver a app). Aqui ele é só
+  // âncora de posicionamento — opaco cobriria a página inteira mesmo fechado.
+  .matcha-drawer-container {
+    height: 100%;
+    background-color: transparent;
+  }
+
+  // Ritmo dos slots: a navegação define o próprio (Figma), não o padding 20/20
+  // genérico do drawer. As CSS vars existem pra isso — sem !important.
+  matcha-drawer {
+    --drawer-pad-x: var(--matcha-space-150, 12px);
+    --drawer-pad-y: var(--matcha-space-150, 12px);
+  }
+
+  // Header — brand à esquerda, close à direita (space-between vem do slot).
+  .matcha-nav-drawer__brand {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  // Busca — largura total, logo abaixo do header e antes da árvore.
+  .matcha-nav-drawer__search {
+    display: block;
+    width: 100%;
+    flex-shrink: 0;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  // Árvore de navegação.
+  .matcha-nav-drawer__items {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--matcha-space-050, 4px);
+    width: 100%;
+  }
+
+  // Hierarquia de 3 níveis. O matcha-nav-item só tem UM flag de indentação
+  // (`indented`), reservado ao nível 3 — que também é o único que o Figma
+  // permite sem ícone/chevron. O recuo do nível 2 vem daqui, do container,
+  // pra não sobrecarregar o contrato público do nav-item nem mexer no desktop.
+  //
+  // 24px = ícone (16) + gap (8) do row do módulo. Isso alinha o label do filho
+  // com o label do pai, formando uma coluna de texto. Com menos que isso o filho
+  // renderiza à ESQUERDA do label do pai (o pai tem ícone, o filho não) e a
+  // hierarquia lê invertida. O nível 3 soma os 24 do `indented` por cima.
+  .matcha-nav-drawer__items > .matcha-nav-item > .matcha-nav-item__children {
+    padding-inline-start: var(--matcha-space-300, 24px);
+  }
+
+  // Footer — lista de itens empilhada. O slot do drawer é feito pra botões de
+  // ação (row, alinhado à direita); a navegação precisa do oposto.
+  .matcha-drawer__slot--footer > * {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: var(--matcha-space-025, 2px);
+  }
+
+  .matcha-nav-drawer__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--matcha-space-025, 2px);
+    width: 100%;
+  }
+
+  // O wrapper do slot existe sempre (é do template), então o :has() do drawer
+  // não consegue esconder o footer vazio sozinho — a checagem real é esta.
+  .matcha-drawer__slot--footer:not(:has(matcha-nav-drawer-footer)) {
+    display: 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 {
+  .matcha-nav-panel,
+  .matcha-nav-drawer {
     display: none !important;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.27.0",
+  "version": "22.27.2",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {