@inchurch/matcha-theme 22.36.2 → 22.38.0

package/components/matcha-file-uploader.scss

@@ -14,6 +14,29 @@
 
 @mixin matcha-file-uploader-theme($theme) {
 
+  // ── Shell (modo múltiplo: moldura única em volta de dropzone + lista) ──
+  // Recebe o mesmo tratamento visual da dropzone porque é ELE que passa a ser
+  // a "área de upload" quando a lista mora dentro — inclusive o realce de
+  // dragover, já que os handlers de drag vivem aqui.
+  .matcha-file-uploader-shell {
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
+    border-color: var(--matcha-color-surface-border);
+
+    &.matcha-file-uploader-dragover {
+      background: var(--matcha-color-accent-alpha);
+      border-color: var(--matcha-color-accent);
+    }
+
+    &.matcha-file-uploader-disabled {
+      opacity: 0.5;
+      // pointer-events + cursor default, não `not-allowed`: constraint #14 do
+      // INTERACTION-SYSTEM (o lint de CSS avisa). A dropzone legada abaixo ainda
+      // usa not-allowed — rastreado no backlog, fora do escopo desta mudança.
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
   // ── Dropzone ──
   .matcha-file-uploader-dropzone {
     background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
@@ -29,6 +52,14 @@
       cursor: not-allowed;
       pointer-events: none;
     }
+
+    // Dentro do shell a moldura e o fundo são do shell — a dropzone é só a
+    // afordância de clique. Duas classes de propósito: precisa vencer o bloco
+    // acima, que tem a mesma especificidade.
+    &.matcha-file-uploader-dropzone--inset {
+      background: transparent;
+      border-color: transparent;
+    }
   }
 
   .matcha-file-uploader-dropzone__icon-pill {
@@ -94,8 +125,27 @@
       color: var(--matcha-color-text-primary);
     }
 
-    &.matcha-file-uploader-file__action--delete:hover {
+    // Apagar é vermelho EM REPOUSO, não só no hover: remover arquivo é
+    // destrutivo e irreversível, e num modo múltiplo com vários itens
+    // empilhados a ação precisa ser distinguível antes de o ponteiro chegar
+    // nela (em touch não há hover nenhum). `danger` é papel, não hue —
+    // o tema pode remapear.
+    //
+    // `--matcha-icon-color` é obrigatório, e não redundante com o `color`: o
+    // matcha-icon resolve o glyph por `var(--matcha-icon-color, …-icon-default)`
+    // (matcha-icon.scss:97) e NÃO herda o `color` do pai. Era por isso que o
+    // vermelho antigo de hover nunca chegou a pintar a lixeira.
+    &.matcha-file-uploader-file__action--delete {
       color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
+
+      // Fundo tinted em vez de surface-hover neutro, e a cor é reafirmada
+      // porque o :hover genérico acima empurraria text-primary.
+      &:hover {
+        background: var(--matcha-color-danger-alpha);
+        color: var(--matcha-color-danger);
+        --matcha-icon-color: var(--matcha-color-danger);
+      }
     }
   }
 
@@ -116,6 +166,15 @@
     &:hover {
       background: var(--matcha-color-surface-card);
     }
+
+    // Mesma regra do delete na linha. Aqui só o GLYPH vira danger: o fundo
+    // continua sendo a pastilha de surface-card, que é o que garante contraste
+    // do ícone sobre uma imagem qualquer — trocá-lo por danger-alpha (10%)
+    // deixaria o vermelho competir com a foto atrás.
+    &.matcha-file-uploader-card__action--delete {
+      color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
+    }
   }
 }
 
@@ -137,6 +196,75 @@
   width: 100%;
 }
 
+// ── Shell (modo múltiplo) ────────────────────────────────────────────────────
+// A "área de upload" quando a lista mora dentro: uma moldura tracejada só,
+// com a dropzone no topo e a lista rolável embaixo. Sem arquivo nenhum o
+// resultado é visualmente idêntico à dropzone solta — só a moldura mudou de
+// dono, do filho para o pai.
+.matcha-file-uploader-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--matcha-border-thin, 2px) dashed transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden; // o radius precisa cortar a lista que rola por dentro
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              border-color var(--matcha-duration-instant, 80ms) linear;
+
+  // Classe de dimensionamento posta NO HOST tem que alcancar o shell — mesmo
+  // padrao (e mesmo racional) do matcha-grid, grid.component.scss:11-18. Sem
+  // isto, `<matcha-file-uploader class="h-400">` esticaria o host e deixaria o
+  // shell na altura do conteudo, e a area continuaria crescendo por dentro.
+  //
+  // `height: 100%` contra host de altura auto resolve pra `auto`: e no-op para
+  // quem nao define altura, portanto value-preserving nos usos existentes.
+  height: 100%;
+
+  // O foco visível é da dropzone interna (o elemento focável), não do shell.
+  &:focus-within {
+    outline: none;
+  }
+
+  // Com altura definida no host, e a DROPZONE que absorve a sobra: com 1 arquivo
+  // ela fica grande e a area nao tem buraco; conforme a lista cresce, cede
+  // espaco ate o proprio conteudo (pill + dois textos), que o min-height auto
+  // do flex protege de ser esmagado. Sem altura definida, nao ha sobra para
+  // distribuir e o resultado e o mesmo de antes.
+  .matcha-file-uploader-dropzone--inset {
+    flex: 1 1 auto;
+  }
+}
+
+// ── Lista de arquivos rolável (dentro do shell) ──────────────────────────────
+// max-height em custom property com fallback, igual --matcha-panel-max-height
+// (280px é o mesmo teto que select/autocomplete/panel já usam para "lista com
+// mais conteúdo abaixo"). Passar `none` devolve o crescimento ilimitado antigo.
+.matcha-file-uploader-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-100, 8px);
+  min-height: 0; // sem isso o floor de min-content impede o scroll no flex
+  // Pede o tamanho do conteudo e ENCOLHE quando falta espaco — e ai o scroll
+  // interno assume. E o que faz a lista caber quando o host tem altura definida
+  // e o teto de 280px seria maior do que sobrou.
+  flex: 0 1 auto;
+  max-height: var(--matcha-file-uploader-list-max-height, 280px);
+  overflow-y: auto;
+  overflow-x: hidden; // scrollbar vertical + nowrap gera barra horizontal fantasma
+  overscroll-behavior: contain; // o scroll não vaza pra página ao chegar no fim
+  -webkit-overflow-scrolling: touch;
+  padding: 0 var(--matcha-space-100, 8px) var(--matcha-space-100, 8px);
+}
+
+// Dentro da lista o espaçamento é do `gap` — o margin-top do item rolaria
+// junto e daria um respiro fantasma no topo do scroll.
+.matcha-file-uploader-list > .matcha-file-uploader-file,
+.matcha-file-uploader-list > .matcha-file-uploader-card {
+  margin-top: 0;
+}
+
+
 // ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
 .matcha-file-uploader-dropzone {
   display: flex;
@@ -157,6 +285,24 @@
   }
 }
 
+// Dropzone dentro do shell: sem moldura própria (é do shell) e sem o radius
+// que arredondaria um canto interno. Mantém padding, cursor e foco.
+// Precisa vir DEPOIS do bloco base: mesma especificidade (uma classe), então é
+// a ordem que decide — declarado antes, o `border: 2px dashed` do base vencia e
+// sobravam 2px de borda transparente dentro do shell.
+.matcha-file-uploader-dropzone--inset {
+  border-width: 0;
+  border-radius: 0;
+
+  // Anel de foco PARA DENTRO. A dropzone inset ocupa a largura toda do shell,
+  // que tem `overflow: hidden` (o radius precisa cortar a lista rolável): com o
+  // `outline-offset: 2px` do bloco base o anel cai fora da caixa e é ceifado,
+  // deixando o alvo de teclado sem indicação visível nas laterais.
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
 // layout="card": dropzone vazio compartilha a proporção do card preenchido
 // (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
 // MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
@@ -369,6 +515,14 @@
     width: 20px;
     height: 20px;
   }
+  // Com o uploader desabilitado a linha continua legivel, mas as acoes saem de
+  // operacao. `pointer-events: none` + `cursor: default` em vez de
+  // `not-allowed`: constraint #14 do INTERACTION-SYSTEM.
+  &:disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+  }
 }
 
 // ── Card layout — preview preenchido 16:9 + ações no hover (Estado=Drop filled) ──
@@ -429,6 +583,14 @@
     width: 18px;
     height: 18px;
   }
+
+  // Mesma regra da acao da linha: desabilitado sai de operacao sem virar
+  // `not-allowed` (constraint #14 do INTERACTION-SYSTEM).
+  &:disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+  }
 }
 
 // ── Cropper inline (modo crop: imagem única) ──────────────────────────────
@@ -464,6 +626,7 @@
 
 // ── Reduced motion ───────────────────────────────────────────────────────────
 @media (prefers-reduced-motion: reduce) {
+  .matcha-file-uploader-shell,
   .matcha-file-uploader-dropzone,
   .matcha-file-uploader-file__progress-fill,
   .matcha-file-uploader-file__action,

package/components/matcha-table.scss

@@ -424,6 +424,33 @@
       --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-accent);
     }
 
+    // O ALVO é a CÉLULA inteira, não só o texto do nome.
+    //
+    // A âncora envolve o nome, e em título curto isso vira um alvo de poucos pixels —
+    // reclamação de quem usa, medida em séries. O `::after` esticado resolve sem trocar
+    // a âncora por handler de clique: o href continua existindo, então ctrl+clique,
+    // clique do meio e "abrir em nova aba" seguem funcionando, e o foco de teclado
+    // continua sendo o do link.
+    //
+    // De quebra conserta o hover: a regra acima só pinta a linha quando o mouse está
+    // sobre o TEXTO. Com a área esticada, pinta ao entrar na célula — que é o que faz
+    // a linha parecer clicável.
+    //
+    // Escopado em `.matcha-table td` de propósito: `a[matcha-cell-link]` também aparece
+    // em card de listagem, fora de tabela, e lá o link deve seguir do tamanho do texto.
+    //
+    // O custo é a seleção de texto DENTRO desta célula. No resto da linha continua
+    // funcionando, que é a diferença para a linha toda clicável.
+    td:has(a[matcha-cell-link]) {
+      position: relative;
+    }
+
+    td a[matcha-cell-link]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
     tbody tr.is-selected td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
     }

package/components/matcha-tree-view.scss

@@ -1,54 +1,195 @@
 // =============================================================================
-// matcha-tree-view.scss — Slot row indentado por nível hierárquico
-// Componente é um FRAME minimal (indent + estados). Consumer compõe o conteúdo
-// livre via ng-content. Responsivo via container queries.
+// matcha-tree-view.scss — árvore hierárquica do painel (Figma DSV3 matcha/tree-view)
+//
+// UMA anatomia de linha pra qualquer nó:
+//   [grip 32 · disclosure 32 · identidade (dot|avatar + nome, linha secundária) · meta (cargo + contadores) · ações]
+// Nível NÃO é variante: é o recuo do bloco de filhos (32px) + uma guia vertical
+// alinhada ao centro da primeira coluna da linha do pai. O consumer compõe a
+// linha com as classes de slot abaixo; o componente não impõe conteúdo.
 // =============================================================================
 
-// ── Container opcional (qualquer wrapper .matcha-tree-view) ─────────────────
-// Provê: bg "tray" Figma + gap entre rows + propagação de gap dentro de drop-list.
+// ── Container ───────────────────────────────────────────────────────────────
 .matcha-tree-view {
     display:        flex;
     flex-direction: column;
-    gap:            var(--matcha-space-050, 4px);
-    padding:        var(--matcha-space-200, 16px);
-    background:     var(--matcha-color-surface-background);
-    border-radius:  var(--matcha-radius-lg, 8px);
+    // Sem tray e sem gap. A árvore vive na superfície da página: fundo próprio
+    // + rows-card + respiro entre elas transformavam a hierarquia numa pilha de
+    // chips, e o card opaco de cada row cobria a guia, que saía tracejada.
+    gap:            0;
+    padding:        0;
+    background:     transparent;
+    border-radius:  0;
 
-    // Container queries — base pra responsivo dos filhos
     container-type: inline-size;
     container-name: matcha-tree-view;
 
     .matcha-drop-list-container {
         display:        flex;
         flex-direction: column;
-        gap:            var(--matcha-space-050, 4px);
+        gap:            0;
     }
 }
 
-// ── Container data-driven (matcha-tree-view) + branches recursivos ──────────
-// O host <matcha-tree-view> reusa a classe .matcha-tree-view acima (tray + gap).
-// Cada nível é um <matcha-tree-branch> (drop container); a indentação é por item
-// (via [level] do tree-view-item), então os wrappers NÃO adicionam indent.
 matcha-tree-branch,
 .matcha-tree-view__children {
     display:        flex;
     flex-direction: column;
-    gap:            var(--matcha-space-050, 4px);
+    gap:            0;
     min-height:     2px; // alvo de drop mínimo quando o branch está vazio
 }
 
+// ── Recuo (bloco de filhos) ────────────────────────────────────────────────
+// O recuo é do BLOCO, não de cada linha: o item dentro do container não recua
+// sozinho, e a guia vira UM traço por nível, contínuo por estrutura.
+.matcha-tree-view__children {
+    position:             relative;
+    padding-inline-start: var(--matcha-tree-view-indent-step, 32px);
+    // Motion do Figma: filhos entram em 200ms, desacelerando.
+    animation: matcha-tree-view-children-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-decelerated, ease-out) both;
+}
+
+@keyframes matcha-tree-view-children-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+// O wrapper do nó é um .matcha-drag-item, e o drop-list desenha nele um state
+// layer (::before, currentColor a 8% no hover). Como o wrapper CONTÉM a
+// subárvore, passar o mouse num neto pintava a árvore inteira de cinza. Sem
+// state layer aqui: o hover é da ROW. Fica ANTES das regras da guia de
+// propósito — elas reutilizam o ::before com a mesma especificidade e vencem
+// por ordem.
+.matcha-tree-view .matcha-tree-view__node.matcha-drag-item::before {
+    content: none;
+}
+
+// ── Guia de recuo ───────────────────────────────────────────────────────────
+// Vive no WRAPPER de cada nó filho, não no bloco: no bloco a vertical iria até
+// o fim dele, e quando o último filho tem subárvore a guia do pai desceria ao
+// lado dos netos sugerindo irmãos que não existem.
+//
+// X = centro da PRIMEIRA coluna da linha do pai (16px): o chevron quando a
+// árvore não arrasta, o gutter do grip quando arrasta. Medido a partir da
+// origem do wrapper do filho, isso é `meio controle - passo do recuo`,
+// negativo de propósito. A guia no centro do CHEVRON cairia em cima da coluna
+// do grip dos filhos, que é a mesma coluna deslocada um nível.
+.matcha-tree-view--guides .matcha-tree-view__node {
+    position: relative;
+}
+
+.matcha-tree-view--guides .matcha-tree-view__children .matcha-tree-view__node::before {
+    content:    "";
+    position:   absolute;
+    inset-block: 0;
+    inset-inline-start: calc(
+        var(--matcha-tree-view-control-size, 32px) / 2
+        - var(--matcha-tree-view-indent-step, 32px)
+    );
+    width:      var(--matcha-border-hairline, 1px);
+    background: var(--matcha-tree-view-guide-color, currentColor);
+    // Estrutura de leitura, não moldura: matcha/opacity/secondary (0.54) dá
+    // ~2.9:1 no light e ~4.2:1 no dark, que num traço de 1px lê como fio.
+    opacity:    var(--matcha-opacity-secondary, 0.54);
+    pointer-events: none;
+}
+
+// O state layer do drop-list (.matcha-drag-item:hover::before, opacidade 8%)
+// empata em especificidade com a regra acima e apagava a guia da linha sob o
+// mouse. Uma regra com :hover/:active vence e mantém a opacidade da guia.
+.matcha-tree-view--guides .matcha-tree-view__children .matcha-tree-view__node:hover::before,
+.matcha-tree-view--guides .matcha-tree-view__children .matcha-tree-view__node:active::before {
+    opacity: var(--matcha-opacity-secondary, 0.54);
+}
+
+// Último irmão: a guia para no CENTRO da linha dele. Mora na row porque só ela
+// conhece a própria altura, então o pé fica no centro mesmo com linha secundária.
+.matcha-tree-view--guides .matcha-tree-view__children .matcha-tree-view__node.is-last::before {
+    content: none;
+}
+
+.matcha-tree-view--guides .matcha-tree-view__children .matcha-tree-view__node.is-last
+.matcha-tree-view-item__row::before {
+    content:    "";
+    position:   absolute;
+    inset-inline-start: calc(
+        var(--matcha-tree-view-control-size, 32px) / 2
+        - var(--matcha-tree-view-indent-step, 32px)
+    );
+    top:        0;
+    height:     50%;
+    width:      var(--matcha-border-hairline, 1px);
+    background: var(--matcha-tree-view-guide-color, currentColor);
+    opacity:    var(--matcha-opacity-secondary, 0.54);
+    pointer-events: none;
+}
+
+// Recuo travado ([maxIndentLevel]): o bloco não recua nem desenha guia; a linha
+// fica no recuo do pai e o contexto entrega `clamped` pra ela sinalizar (L5+).
+.matcha-tree-view .matcha-tree-view__children.is-clamped {
+    padding-inline-start: 0;
+}
+
+.matcha-tree-view--guides .matcha-tree-view__children.is-clamped > matcha-tree-branch > .matcha-tree-view__node::before,
+.matcha-tree-view--guides .matcha-tree-view__children.is-clamped > matcha-tree-branch > .matcha-tree-view__node.is-last
+.matcha-tree-view-item__row::before {
+    content: none;
+}
+
+// Telas estreitas: metade do passo. Sem isso, 4 níveis comem metade da largura
+// e o nome do nó (a informação) fica sem espaço.
+@container matcha-tree-view (max-width: 480px) {
+    .matcha-tree-view__children {
+        --matcha-tree-view-indent-step: var(--matcha-space-200, 16px);
+    }
+}
+
+// ── Wrapper do nó (o treeitem ARIA) ─────────────────────────────────────────
 .matcha-tree-view__node {
     display: block;
+    outline: none;
 }
 
-// Feedback de rejeição na zona de reparenting (self-drop / tipo não aceito)
-.matcha-drop-zone-cannot-accept {
-    outline:        2px dashed var(--matcha-color-danger, #e5484d);
-    outline-offset: -2px;
-    border-radius:  var(--matcha-radius-md, 4px);
+// A row e a subárvore dela são IRMÃS dentro do wrapper, porque a recursão
+// (<matcha-tree-children>) mora no template da row. O wrapper também é o
+// .matcha-drag-item, que o drop-list declara `display: flex` em linha: sem
+// forçar coluna, os filhos renderizam à DIREITA da row.
+.matcha-tree-view .matcha-tree-view__node {
+    display:        flex;
+    flex-direction: column;
+    align-items:    stretch;
+    // Padding ZERO: o respiro é da row (48px de min-height). Somar aqui levava
+    // o ritmo a 72px por linha e recuava TODOS os descendentes a cada nível.
+    padding:        0;
+    // E não pinta fundo: o wrapper CONTÉM a subárvore, e a parte que a row não
+    // cobre virava uma faixa de tom diferente a cada nível.
+    background:     transparent;
+    box-shadow:     none;
+    border-radius:  0;
+    overflow:       visible;
+}
+
+// Focus (teclado) na LINHA do nó focado — roving tabindex do container. O anel
+// do drop-list (no wrapper, com offset) contornaria a subárvore inteira.
+.matcha-tree-view .matcha-tree-view__node.matcha-drag-item:focus-visible {
+    outline: none;
+}
+
+.matcha-tree-view .matcha-tree-view__node:focus-visible > matcha-tree-view-item .matcha-tree-view-item__row {
+    outline:        var(--matcha-border-thin, 2px) solid var(--matcha-color-accent);
+    outline-offset: calc(-1 * var(--matcha-border-thin, 2px));
+}
+
+// "Não arrastável" num nó de árvore NÃO é "desabilitado". O drop-list marca a
+// row com .matcha-drag-disabled (pointer-events:none + cores de disabled), regra
+// pensada pra um card FOLHA. Aqui a row CONTÉM a própria subárvore e
+// pointer-events é herdado: apagaria os filhos do hit-test. Restaura.
+.matcha-tree-view .matcha-tree-view__node.matcha-drag-disabled {
+    pointer-events:   auto;
+    color:            inherit;
+    background-color: transparent;
 }
 
-// ── Item host — flex row com indent dinâmico ────────────────────────────────
+// ── Item host ───────────────────────────────────────────────────────────────
 matcha-tree-view-item {
     display:         flex;
     flex-direction:  row;
@@ -57,195 +198,414 @@ matcha-tree-view-item {
     box-sizing:      border-box;
     outline:         none;
 
-    // Disabled
+    // Disabled por TOKEN, sem opacidade no wrapper (padrão do Matcha): texto e
+    // ícones em disabled/fg, e a linha sai do hit-test.
     &[disabled] {
-        opacity:        0.5;
-        pointer-events: none;
+        color:               var(--matcha-color-disabled-fg);
+        --matcha-icon-color: var(--matcha-color-disabled-fg);
+        pointer-events:      none;
+
+        .matcha-tree-view-item__name,
+        .matcha-tree-view-item__counters strong { color: inherit; }
     }
 
-    // Clickable
     &[clickable]:not([disabled]) {
         cursor: pointer;
 
         &:focus-visible .matcha-tree-view-item__row {
-            outline:        2px solid var(--matcha-color-accent);
-            outline-offset: -2px;
+            outline:        var(--matcha-border-thin, 2px) solid var(--matcha-color-accent);
+            outline-offset: calc(-1 * var(--matcha-border-thin, 2px));
+        }
+    }
+
+    // Selected = barra de 2px accent à esquerda + tinta neutra. O preenchimento
+    // cheio competia com o painel do nó-célula, que também é um fundo. Vale
+    // pelo [selected] do item e pelo treeitem selecionado no container.
+    &[selected] .matcha-tree-view-item__row,
+    .matcha-tree-view__node.is-selected > & .matcha-tree-view-item__row {
+        background: var(--matcha-color-surface-hover);
+
+        &::after {
+            content:            "";
+            position:           absolute;
+            inset-block:        0;
+            inset-inline-start: 0;
+            width:              var(--matcha-border-thin, 2px);
+            border-radius:      var(--matcha-border-hairline, 1px);
+            background:         var(--matcha-color-accent);
         }
     }
 }
 
-// ── Indent (Nível 2+) — width vem inline do componente ──────────────────────
+// ── Indent liso (fora do container) — width inline = (level-1) × indentStep ──
 .matcha-tree-view-item__indent {
-    flex:    none;
-    // height auto — se ajusta ao row
-}
-
-// ── Guias de conector (modo organograma) — render quando [guides] é passado ──
-// Cada célula (largura = indentStep, inline) desenha a linha vertical do ancestral
-// (data-guide=line|tee) e/ou o cotovelo do nó (tee ├ / ell └). Linha via
-// --matcha-tree-view-guide-color (theme-aware, default = surface-border). As
-// verticais transbordam o padding-block da row (--_pad) p/ emendar entre rows —
-// use gap:0 no container quando quiser linhas 100% contínuas.
-.matcha-tree-view-item__guides {
-    flex:       none;
-    align-self: stretch;
-    display:    flex;
-}
-.matcha-tree-view-item__guide {
-    --_guide: var(--matcha-tree-view-guide-color, var(--matcha-color-surface-border));
-    --_pad:   var(--matcha-space-100, 8px);
-    position: relative;
-    flex:     none;
-
-    // Linha vertical no centro — 'line'/'tee' atravessam; 'ell' (último) para no centro.
-    &[data-guide="line"]::before,
-    &[data-guide="tee"]::before,
-    &[data-guide="ell"]::before {
-        content:    "";
-        position:   absolute;
-        left:       50%;
-        top:        calc(-1 * var(--_pad));
-        width:      1px;
-        background: var(--_guide);
-    }
-    &[data-guide="line"]::before,
-    &[data-guide="tee"]::before { bottom: calc(-1 * var(--_pad)); }
-    &[data-guide="ell"]::before { height: calc(50% + var(--_pad)); }
-
-    // Cotovelo horizontal (centro → direita, na metade da altura) — 'tee'/'ell'.
-    &[data-guide="tee"]::after,
-    &[data-guide="ell"]::after {
-        content:    "";
-        position:   absolute;
-        top:        50%;
-        left:       50%;
-        right:      0;
-        height:     1px;
-        background: var(--_guide);
-    }
+    flex: none;
 }
 
-// ── Row — bg transparente por default; container .matcha-tree-view dá bg card
+// ── Row ─────────────────────────────────────────────────────────────────────
 .matcha-tree-view-item__row {
+    position:       relative; // contexto do pé da guia e da barra de seleção
     flex:           1;
     display:        flex;
     flex-direction: row;
     align-items:    center;
     gap:            var(--matcha-space-100, 8px);
     min-height:     48px;
-    padding:        var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+    // Sem padding à esquerda: a primeira coluna (grip ou disclosure) começa na
+    // origem da linha, e é o centro dela (16px) que a guia do próximo nível usa.
+    padding:        var(--matcha-space-100, 8px) var(--matcha-space-150, 12px) var(--matcha-space-100, 8px) 0;
     background:     transparent;
-    border-bottom:  1px solid var(--matcha-color-surface-border);
     border-radius:  var(--matcha-radius-md, 4px);
     box-sizing:     border-box;
     min-width:      0;
     transition:     background-color var(--matcha-duration-instant, 80ms) ease;
+    flex-wrap:      var(--matcha-tree-view-item-wrap, nowrap);
+}
 
-    // Permitir conteúdo wrap se consumer quiser
-    flex-wrap: var(--matcha-tree-view-item-wrap, nowrap);
+// Sem primeira coluna (nem grip nem disclosure: o drill-down mobile, uma lista
+// achatada), a identidade colava na borda e o hover encostava no dot. A row
+// recupera o respiro lateral que a coluna de 32px dava de graça.
+.matcha-tree-view-item__row:not(:has(> .matcha-tree-view-item__grip, > .matcha-tree-view-item__disclosure)) {
+    padding-inline-start: var(--matcha-space-150, 12px);
 }
 
-// Hover sutil na row
+// Hover é o ÚNICO fundo que a row ganha fora de selected: transparente, a guia
+// passa por trás sem ser recortada a cada linha.
 matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
     background: var(--matcha-color-surface-hover);
 }
 
-// ── Estilos comuns dos slots opcionais (CSS classes utilitárias do DS) ─────
-// Consumer aplica esses classes nos elementos projetados; o componente NÃO impõe.
-// .matcha-tree-view-item__grip — aplicado automaticamente pela diretiva matchaTreeViewGrip.
+// ── Prioridade de encolhimento — a identidade nunca cede primeiro ───────────
+.matcha-tree-view-item__row > * {
+    min-width: 0; // permite truncar em vez de transbordar
+}
+
+// ── Slots da linha (classes que o consumer aplica no conteúdo projetado) ────
+
+// Grip: primeira coluna, 32px, NO FLUXO. Reserva o espaço só quando existe
+// (árvore arrastável) e revela o ícone em hover/focus. Em árvore arrastável,
+// projete o grip em TODAS as linhas, raiz inclusive, pra as colunas alinharem.
 .matcha-tree-view-item__grip {
-    flex:               none;
-    display:            inline-flex;
-    align-items:        center;
-    justify-content:    center;
-    width:              24px;
-    height:             24px;
+    flex:                none;
+    display:             inline-flex;
+    align-items:         center;
+    justify-content:     center;
+    width:               var(--matcha-tree-view-control-size, 32px);
+    height:              var(--matcha-tree-view-control-size, 32px);
     --matcha-icon-color: var(--matcha-color-text-muted);
-    cursor:             grab;
-    transition:         --matcha-icon-color var(--matcha-duration-instant, 80ms) ease;
+    cursor:              grab;
+    opacity:             0;
+    transition:          opacity var(--matcha-duration-instant, 80ms) ease;
 
-    &:hover  { --matcha-icon-color: var(--matcha-color-text-primary); }
     &:active { cursor: grabbing; }
 }
 
-// Dentro do container canon (.matcha-tree-view), row ganha bg "card on tray" (Figma)
-.matcha-tree-view matcha-tree-view-item:not([disabled]) .matcha-tree-view-item__row {
-    background: var(--matcha-color-surface-card);
+// Ações (kebab): slot reservado, ícone só em hover/focus. 11 kebabs sempre
+// visíveis eram uma coluna de ruído; o slot fica pra os contadores não pularem.
+.matcha-tree-view-item__actions {
+    flex:        none;
+    display:     flex;
+    align-items: center;
+    gap:         var(--matcha-space-050, 4px);
+    min-width:   var(--matcha-tree-view-control-size, 32px);
+    opacity:     0;
+    transition:  opacity var(--matcha-duration-instant, 80ms) ease;
 }
-.matcha-tree-view matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
-    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
+
+matcha-tree-view-item:hover .matcha-tree-view-item__grip,
+matcha-tree-view-item:focus-within .matcha-tree-view-item__grip,
+.matcha-tree-view__node:focus-visible > matcha-tree-view-item .matcha-tree-view-item__grip,
+.matcha-drag-ghost .matcha-tree-view-item__grip,
+matcha-tree-view-item:hover .matcha-tree-view-item__actions,
+matcha-tree-view-item:focus-within .matcha-tree-view-item__actions,
+.matcha-tree-view__node:focus-visible > matcha-tree-view-item .matcha-tree-view-item__actions {
+    opacity: 1;
 }
 
-// ── DnD states (compõe com matcha-drop-list) ────────────────────────────────
-.matcha-drag-item.matcha-drag-dragging {
-    opacity: 0.35;
+// Em ponteiro grosso (toque) não existe hover: grip e ações ficam visíveis.
+@media (hover: none) {
+    .matcha-tree-view-item__grip,
+    .matcha-tree-view-item__actions { opacity: 1; }
+}
 
-    .matcha-tree-view-item__row { background: var(--matcha-color-surface-hover); }
+// Navegar (›): o trailing do drill-down mobile. Sempre visível; substitui as
+// ações quando a linha inteira navega.
+.matcha-tree-view-item__navigate {
+    flex:                none;
+    display:             inline-flex;
+    align-items:         center;
+    justify-content:     center;
+    width:               var(--matcha-tree-view-control-size, 32px);
+    height:              var(--matcha-tree-view-control-size, 32px);
+    --matcha-icon-color: var(--matcha-color-text-muted);
 }
 
-.matcha-tree-view .matcha-drop-list-placeholder {
-    height:        4px;
-    margin:        var(--matcha-space-050, 4px) 0;
-    background:    var(--matcha-color-accent);
-    border-radius: var(--matcha-radius-sm, 2px);
-    opacity:       0.85;
-    box-shadow:    0 0 0 2px var(--matcha-color-accent-alpha, rgba(168, 217, 78, 0.2));
-    animation:     matcha-tree-view-pulse 800ms ease-in-out infinite alternate;
+// Disclosure: 32px, reserva o slot mesmo na folha (use a classe num <span>
+// vazio) pra a identidade alinhar entre irmãos. Um único chevron-right que o
+// tema gira em 150ms quando o item está [expanded]; caption em repouso, texto
+// no hover/focus.
+matcha-tree-view-item .matcha-tree-view-item__disclosure {
+    flex:                none;
+    display:             inline-flex;
+    align-items:         center;
+    justify-content:     center;
+    width:               var(--matcha-tree-view-control-size, 32px);
+    height:              var(--matcha-tree-view-control-size, 32px);
+    --matcha-icon-color: var(--matcha-color-text-muted);
+
+    matcha-icon {
+        transition: transform 150ms var(--matcha-easing-standard, ease);
+    }
 }
 
-@keyframes matcha-tree-view-pulse {
-    from { opacity: 0.7; }
-    to   { opacity: 1; }
+matcha-tree-view-item[expanded] .matcha-tree-view-item__disclosure matcha-icon {
+    transform: rotate(90deg);
 }
 
-.matcha-tree-view .matcha-drop-list-empty-placeholder {
+matcha-tree-view-item:hover .matcha-tree-view-item__disclosure,
+matcha-tree-view-item:focus-within .matcha-tree-view-item__disclosure,
+.matcha-tree-view__node:focus-visible > matcha-tree-view-item .matcha-tree-view-item__disclosure {
+    --matcha-icon-color: var(--matcha-color-text-primary);
+}
+
+// Identidade (dot|avatar + textos). Fica com o espaço que sobra e é a ÚLTIMA a
+// ceder: sem isso o flex encolhe na ordem do DOM e, em tela estreita, o NOME
+// chegava a zero enquanto cargo e contador ficavam intactos.
+.matcha-tree-view-item__identity {
+    flex:        1 1 auto;
+    min-width:   4ch; // piso: sempre sobra o começo do nome
+    display:     flex;
+    align-items: center;
+    gap:         var(--matcha-space-100, 8px);
+    // SEM overflow:hidden. Quem trunca é o texto (min-width:0 + text-overflow
+    // no __name/__secondary), e recortar aqui comia os 2px do anel de nível do
+    // avatar — que ficava com as beiradas retas — e comeria também o anel de
+    // foco de qualquer controle projetado na identidade.
+    overflow:    visible;
+
+    > * { min-width: 0; }
+}
+
+// Cor de nível: no dot (6px + anel a 20%) ou no anel do avatar. O consumer
+// informa a cor em --matcha-tree-view-level-color; sem ela, herda o texto.
+.matcha-tree-view-item__dot {
+    flex:          none;
+    width:         6px;
+    height:        6px;
+    margin:        var(--matcha-border-thin, 2px);
+    border-radius: var(--matcha-radius-pill, 9999px);
+    background:    var(--matcha-tree-view-level-color, currentColor);
+    box-shadow:    0 0 0 var(--matcha-border-thin, 2px)
+                   color-mix(in srgb, var(--matcha-tree-view-level-color, currentColor) 20%, transparent);
+}
+
+.matcha-tree-view-item__avatar {
+    flex:    none;
+    display: inline-flex;
+
+    .matcha-avatar {
+        border-radius: var(--matcha-radius-pill, 9999px);
+        box-shadow:    0 0 0 var(--matcha-border-thin, 2px) var(--matcha-tree-view-level-color, transparent);
+    }
+}
+
+// Textos: nome (label-medium) e linha secundária opcional (p-small, caption).
+// Com linha secundária a row cresce pra 64px sozinha.
+.matcha-tree-view-item__text {
+    flex:           1 1 auto;
+    min-width:      0;
     display:        flex;
-    align-items:    center;
-    justify-content: center;
-    padding:        var(--matcha-space-400, 32px);
-    font-size:      var(--matcha-text-body-sm, 12px);
-    color:          var(--matcha-color-text-muted);
-    border:         2px dashed var(--matcha-color-surface-border);
-    border-radius:  var(--matcha-radius-md, 4px);
-    background:     transparent;
+    flex-direction: column;
+    gap:            var(--matcha-border-thin, 2px);
 }
 
-.matcha-drag-item.matcha-drag-dragging .matcha-tree-view-item__grip { cursor: grabbing; }
+.matcha-tree-view-item__name {
+    display:       block;
+    min-width:     0;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+    white-space:   nowrap;
+    font-size:     var(--matcha-text-label-md, 14px);
+    font-weight:   var(--matcha-font-weight-medium, 500);
+    line-height:   20px;
+    color:         var(--matcha-color-text-primary);
+}
 
-// ── Entrance animation ──────────────────────────────────────────────────────
-matcha-tree-view-item:not(.matcha-drag-dragging) {
-    animation: matcha-tree-view-item-in 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
+.matcha-tree-view-item__secondary {
+    display:       block;
+    min-width:     0;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+    white-space:   nowrap;
+    font-size:     var(--matcha-text-body-sm, 12px);
+    line-height:   16px;
+    color:         var(--matcha-color-text-muted);
 }
 
-@keyframes matcha-tree-view-item-in {
-    from { opacity: 0; transform: translateY(-4px); }
-    to   { opacity: 1; transform: translateY(0); }
+// Meta (cargo + contadores). Cede ANTES do nome e, quando não cabe, sai de cena.
+.matcha-tree-view-item__meta {
+    flex:                0 1 auto;
+    min-width:           0;
+    margin-inline-start: auto;
+    display:             flex;
+    align-items:         center;
+    gap:                 var(--matcha-space-100, 8px);
+    overflow:            hidden;
+    color:               var(--matcha-color-text-muted);
+}
+
+// Cargo é TEXTO, não pílula: pílula em toda linha é peso repetido 30 vezes na
+// tela. Pílula (matcha-badge) fica pra ESTADO (Inativo, Pendente).
+.matcha-tree-view-item__cargo {
+    flex:        none;
+    font-size:   var(--matcha-text-label-sm, 12px);
+    font-weight: var(--matcha-font-weight-medium, 500);
+    line-height: 16px;
+    color:       var(--matcha-color-text-muted);
+    white-space: nowrap;
+}
+
+// Contadores: números tabulares (alinham à direita sem parecer relatório) e
+// sem zero à esquerda — isso é do dado, não do CSS: "2 células", não "02".
+.matcha-tree-view-item__counters {
+    flex:                 none;
+    display:              inline-flex;
+    align-items:          baseline;
+    gap:                  var(--matcha-space-050, 4px);
+    font-variant-numeric: tabular-nums;
+    white-space:          nowrap;
+
+    strong {
+        font-size:   var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-font-weight-medium, 500);
+        color:       var(--matcha-color-text-primary);
+    }
+
+    small {
+        font-size:      var(--matcha-text-p-tiny, 11px);
+        letter-spacing: 0.3px;
+        color:          var(--matcha-color-text-muted);
+    }
+}
+
+// Só some quando não há mesmo onde caber. Entre 360 e 480 o flex encolhe o
+// meta antes do nome.
+@container matcha-tree-view (max-width: 360px) {
+    .matcha-tree-view-item__meta { display: none; }
 }
 
-// ── Responsividade — container query baseada no .matcha-tree-view container
-// Em containers estreitos (< 480px), reduz indent visual pra preservar espaço útil.
-// Indent visual = padding-left implícito via --matcha-tree-view-item-indent setado
-// inline pelo componente. Container query NÃO consegue overridar inline style
-// diretamente, então usamos uma estratégia diferente: scale do indent div.
 @container matcha-tree-view (max-width: 480px) {
     .matcha-tree-view-item__indent {
-        // Reduz 50% do width inline — preserva indent visual sem perder hierarquia
         transform:        scaleX(0.6);
         transform-origin: left center;
     }
 
     .matcha-tree-view-item__row {
         gap:        var(--matcha-space-050, 4px);
-        padding:    var(--matcha-space-100, 8px);
-        min-height: 44px; // touch target WCAG 2.5.5 em mobile
+        min-height: 44px; // alvo de toque WCAG 2.5.5 em mobile
+    }
+}
+
+// ── Drag-and-drop (compõe com o motor do matcha-drop-list) ──────────────────
+
+// Dragging = o FANTASMA na origem. O motor do drop-list aplica isso INLINE no
+// wrapper arrastado (opacidade + translate dos irmãos) — não há classe pra
+// estilizar aqui; o que o tema garante é que o wrapper não ganhe fundo, sombra
+// ou escala de "card solto" (ver as regras do wrapper acima).
+
+// Levantado = a cópia que acompanha o cursor: SÓ a linha, com superfície e
+// elevação level-2. O motor clona o wrapper inteiro (a subárvore junto);
+// esconder os filhos no clone deixa a cópia do tamanho de uma linha.
+.matcha-drag-ghost {
+    box-shadow: none; // a elevação é da row, não da caixa do clone
+
+    .matcha-tree-view__children-host { display: none; }
+
+    .matcha-tree-view-item__row {
+        background:    var(--matcha-color-surface);
+        box-shadow:    var(--matcha-shadow-2);
+        border-radius: var(--matcha-radius-md, 4px);
     }
+
+    .matcha-tree-view-item__grip { opacity: 1; }
+}
+
+// Região do aria-live: só pra leitor de tela.
+.matcha-tree-view__live {
+    position: absolute;
+    width:    1px;
+    height:   1px;
+    margin:   -1px;
+    padding:  0;
+    overflow: hidden;
+    clip:     rect(0 0 0 0);
+    white-space: nowrap;
+    border:   0;
+}
+
+// Recebendo = o PAI que vai receber o drop dentro: tinta accent + hairline
+// accent na linha dele. O motor marca o branch dos filhos; a linha do pai é a
+// irmã anterior do bloco, daí o :has() com filhos diretos.
+.matcha-tree-view .matcha-tree-view__node:has(
+    > .matcha-tree-view__children-host > .matcha-tree-view__children > matcha-tree-branch.matcha-drop-list-receiving
+) > matcha-tree-view-item .matcha-tree-view-item__row {
+    background: var(--matcha-color-accent-surface-hover, var(--matcha-color-accent-alpha));
+    box-shadow: inset 0 0 0 var(--matcha-border-hairline, 1px) var(--matcha-color-accent);
+}
+
+// Recusado = destino inválido por TIPO: tracejado danger na linha do pai. A
+// zona em si não ganha moldura, e a subárvore de quem está sendo arrastado
+// (.matcha-drop-zone-self) não é pintada: rejeitar a si mesmo é óbvio.
+.matcha-tree-view .matcha-tree-view__node:has(
+    > .matcha-tree-view__children-host > .matcha-drop-zone-cannot-accept:not(.matcha-drop-zone-self)
+) > matcha-tree-view-item .matcha-tree-view-item__row {
+    outline:        var(--matcha-border-hairline, 1px) dashed var(--matcha-color-danger);
+    outline-offset: calc(-1 * var(--matcha-border-hairline, 1px));
+}
+
+// A moldura listrada/tracejada que o drop-list dá à zona não vale na árvore.
+.matcha-tree-view .matcha-tree-view__children.matcha-drop-zone-cannot-accept {
+    outline:    none;
+    background: transparent;
+    border:     0;
+}
+
+// O branch NÃO herda a moldura listrada do drop-list plano.
+.matcha-tree-view matcha-tree-branch.matcha-drop-list-receiving,
+.matcha-tree-view matcha-tree-branch.matcha-drop-list-can-accept,
+.matcha-tree-view matcha-tree-branch.matcha-drop-list-cannot-accept {
+    background: transparent;
+    border:     0;
+    padding:    0;
+
+    &::before { content: none; }
+}
+
+// Entre irmãos NÃO há linha indicadora: o motor abre o espaço do item arrastado
+// (translateY nos irmãos, 150ms) e deixa o fantasma na origem. É o "indicador"
+// do código; o bloco drop-indicator do Figma é a representação estática disso.
+
+// Alvo "Solte aqui" quando o pai ainda não tem filhos.
+.matcha-tree-view .matcha-drop-list-empty-placeholder {
+    display:         flex;
+    align-items:     center;
+    justify-content: center;
+    min-height:      48px;
+    padding:         var(--matcha-space-150, 12px);
+    font-size:       var(--matcha-text-body-sm, 12px);
+    color:           var(--matcha-color-text-muted);
+    border:          var(--matcha-border-hairline, 1px) dashed var(--matcha-color-surface-border);
+    border-radius:   var(--matcha-radius-md, 4px);
+    background:      transparent;
 }
 
 // Respeita preferência de redução de movimento
 @media (prefers-reduced-motion: reduce) {
-    matcha-tree-view-item,
-    matcha-tree-view-item:not(.matcha-drag-dragging),
-    .matcha-tree-view .matcha-drop-list-placeholder {
+    .matcha-tree-view__children,
+    .matcha-tree-view-item__disclosure matcha-icon,
+    .matcha-tree-view-item__row,
+    .matcha-tree-view-item__grip,
+    .matcha-tree-view-item__actions {
         animation:  none !important;
         transition: none !important;
     }

package/package.json

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