@inchurch/matcha-theme 22.26.1 → 22.27.1

package/components/matcha-buttons.scss

@@ -860,6 +860,46 @@ a[matcha-icon-button] {
     // componente não precisa reafirmar nada aqui.
 }
 
+// ── matcha-button COM TEXTO: auto-size do matcha-icon projetado ──────────────
+// O icon-button (acima) e o matcha-button[icon] (icon-only, no bloco &[icon]) já escalavam o
+// ícone; o botão com texto não escalava nada, então o matcha-icon caía no próprio default
+// (--matcha-icon-size-md, 24px) — proporcional só de MD (40px) pra cima. Num tiny (28px, texto
+// 11/14) sobrava um ícone de 24px.
+//
+// Escala igual à do icon-button: XS/tiny → 16 · SM/small → 20 · MD+ → 24 (o default do
+// matcha-icon já é 24, então MD/LG/XL não precisam de regra).
+//
+// Duas diferenças deliberadas em relação ao icon-button:
+//   1. `matcha-icon:not([size])` — aqui o ícone divide o botão com o texto, e um `size`
+//      explícito do consumidor é escolha legítima que deve continuar valendo. O auto-size só
+//      age quando ninguém decidiu.
+//   2. sem `!important`, consequência do item 1: como a regra nem casa quando há `size`, não há
+//      disputa de especificidade contra a classe `.i-size-*` que o componente emite.
+//
+// `:not([icon])` e `:not([matcha-icon-button])` preservam os dois casos que já tinham
+// tratamento próprio. O bloco icon-only usa `[icon]:not([icon="false"])`, então em teoria
+// `icon="false"` é botão com texto e deveria entrar aqui; não há um único uso dessa forma no
+// showcase nem no painel, e um seletor extra só para ela seria ruído.
+button[matcha-button]:not([matcha-icon-button]):not([icon]),
+a[matcha-button]:not([matcha-icon-button]):not([icon]) {
+    &[size="xs"] matcha-icon:not([size]),
+    &[size="tiny"] matcha-icon:not([size]) {
+        font-size: var(--matcha-icon-size-sm, 16px);
+        width: var(--matcha-icon-size-sm, 16px);
+        height: var(--matcha-icon-size-sm, 16px);
+        line-height: var(--matcha-icon-size-sm, 16px);
+    }
+
+    // 20px não tem token (a escala de ícone vai 16/24/32) — mesmo literal que o icon-button usa.
+    &[size="sm"] matcha-icon:not([size]),
+    &[size="small"] matcha-icon:not([size]) {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+    }
+}
+
 // ── Forced colors (Windows High Contrast) ──
 // Buttons precisam ser claramente acionáveis em high-contrast.
 @media (forced-colors: active) {

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.26.1",
+  "version": "22.27.1",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {