@inchurch/matcha-theme 22.38.2 → 22.38.4

package/components/matcha-tree-view.scss

@@ -1,636 +1,636 @@
-// =============================================================================
-// 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 ───────────────────────────────────────────────────────────────
-.matcha-tree-view {
-    display:        flex;
-    flex-direction: column;
-    // 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-type: inline-size;
-    container-name: matcha-tree-view;
-
-    .matcha-drop-list-container {
-        display:        flex;
-        flex-direction: column;
-        gap:            0;
-    }
-}
-
-matcha-tree-branch,
-.matcha-tree-view__children {
-    display:        flex;
-    flex-direction: column;
-    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;
-}
-
-// 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 ───────────────────────────────────────────────────────────────
-matcha-tree-view-item {
-    display:         flex;
-    flex-direction:  row;
-    align-items:     stretch;
-    width:           100%;
-    box-sizing:      border-box;
-    outline:         none;
-
-    // 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] {
-        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]:not([disabled]) {
-        cursor: pointer;
-
-        &:focus-visible .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));
-        }
-    }
-
-    // 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 liso (fora do container) — width inline = (level-1) × indentStep ──
-.matcha-tree-view-item__indent {
-    flex: none;
-}
-
-// ── 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;
-    // 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-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);
-}
-
-// 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 é 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);
-}
-
-// ── 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:               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;
-    opacity:             0;
-    transition:          opacity var(--matcha-duration-instant, 80ms) ease;
-
-    &:active { cursor: grabbing; }
-}
-
-// 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-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;
-}
-
-// Alvo de drop de um branch VAZIO — nó expandido sem filhos, lazy-load, árvore
-// vazia. Renderizado durante todo o drag (não só quando já está sob o cursor):
-// sem altura própria o branch tem ~2px e é impossível mirar pra soltar/reparentar
-// dentro do nó. (IN-42506)
-.matcha-tree-view .matcha-drop-list-empty-placeholder {
-    display:         flex;
-    align-items:     center;
-    justify-content: center;
-    min-height:      40px;
-    margin:          var(--matcha-space-050, 4px) 0;
-    padding:         var(--matcha-space-150, 12px);
-    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;
-    // Sem transição: o feedback de aceite/rejeição precisa ser imediato durante o
-    // drag (o estado alterna a cada mousemove perto de uma borda de validação).
-
-    // Drag ativo mas o cursor ainda não chegou / chegou e o drop é válido.
-    &.can-accept {
-        border-color: var(--matcha-color-accent);
-    }
-
-    // Cursor sobre o alvo e o drop é rejeitado (profundidade, ciclo, tipo).
-    &.cannot-accept {
-        border-color: var(--matcha-color-danger);
-        background:    var(--matcha-color-danger-alpha, transparent);
-    }
-}
-
-// 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; }
-}
-
-// 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);
-}
-
-// 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);
-    }
-}
-
-matcha-tree-view-item[expanded] .matcha-tree-view-item__disclosure matcha-icon {
-    transform: rotate(90deg);
-}
-
-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;
-    flex-direction: column;
-    gap:            var(--matcha-border-thin, 2px);
-}
-
-.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);
-}
-
-.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);
-}
-
-// 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; }
-}
-
-@container matcha-tree-view (max-width: 480px) {
-    .matcha-tree-view-item__indent {
-        transform:        scaleX(0.6);
-        transform-origin: left center;
-    }
-
-    .matcha-tree-view-item__row {
-        gap:        var(--matcha-space-050, 4px);
-        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.
-
-// 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__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;
-    }
-}
-
-// ── Theme mixin ─────────────────────────────────────────────────────────────
-@mixin matcha-tree-view-theme($theme) {
-    // Tudo via CSS vars — sem theme-specific overrides.
-}
+// =============================================================================
+// 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 ───────────────────────────────────────────────────────────────
+.matcha-tree-view {
+    display:        flex;
+    flex-direction: column;
+    // 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-type: inline-size;
+    container-name: matcha-tree-view;
+
+    .matcha-drop-list-container {
+        display:        flex;
+        flex-direction: column;
+        gap:            0;
+    }
+}
+
+matcha-tree-branch,
+.matcha-tree-view__children {
+    display:        flex;
+    flex-direction: column;
+    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;
+}
+
+// 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 ───────────────────────────────────────────────────────────────
+matcha-tree-view-item {
+    display:         flex;
+    flex-direction:  row;
+    align-items:     stretch;
+    width:           100%;
+    box-sizing:      border-box;
+    outline:         none;
+
+    // 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] {
+        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]:not([disabled]) {
+        cursor: pointer;
+
+        &:focus-visible .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));
+        }
+    }
+
+    // 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 liso (fora do container) — width inline = (level-1) × indentStep ──
+.matcha-tree-view-item__indent {
+    flex: none;
+}
+
+// ── 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;
+    // 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-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);
+}
+
+// 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 é 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);
+}
+
+// ── 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:               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;
+    opacity:             0;
+    transition:          opacity var(--matcha-duration-instant, 80ms) ease;
+
+    &:active { cursor: grabbing; }
+}
+
+// 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-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;
+}
+
+// Alvo de drop de um branch VAZIO — nó expandido sem filhos, lazy-load, árvore
+// vazia. Renderizado durante todo o drag (não só quando já está sob o cursor):
+// sem altura própria o branch tem ~2px e é impossível mirar pra soltar/reparentar
+// dentro do nó. (IN-42506)
+.matcha-tree-view .matcha-drop-list-empty-placeholder {
+    display:         flex;
+    align-items:     center;
+    justify-content: center;
+    min-height:      40px;
+    margin:          var(--matcha-space-050, 4px) 0;
+    padding:         var(--matcha-space-150, 12px);
+    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;
+    // Sem transição: o feedback de aceite/rejeição precisa ser imediato durante o
+    // drag (o estado alterna a cada mousemove perto de uma borda de validação).
+
+    // Drag ativo mas o cursor ainda não chegou / chegou e o drop é válido.
+    &.can-accept {
+        border-color: var(--matcha-color-accent);
+    }
+
+    // Cursor sobre o alvo e o drop é rejeitado (profundidade, ciclo, tipo).
+    &.cannot-accept {
+        border-color: var(--matcha-color-danger);
+        background:    var(--matcha-color-danger-alpha, transparent);
+    }
+}
+
+// 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; }
+}
+
+// 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);
+}
+
+// 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);
+    }
+}
+
+matcha-tree-view-item[expanded] .matcha-tree-view-item__disclosure matcha-icon {
+    transform: rotate(90deg);
+}
+
+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;
+    flex-direction: column;
+    gap:            var(--matcha-border-thin, 2px);
+}
+
+.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);
+}
+
+.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);
+}
+
+// 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; }
+}
+
+@container matcha-tree-view (max-width: 480px) {
+    .matcha-tree-view-item__indent {
+        transform:        scaleX(0.6);
+        transform-origin: left center;
+    }
+
+    .matcha-tree-view-item__row {
+        gap:        var(--matcha-space-050, 4px);
+        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.
+
+// 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__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;
+    }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+@mixin matcha-tree-view-theme($theme) {
+    // Tudo via CSS vars — sem theme-specific overrides.
+}