@inchurch/matcha-theme 22.40.1 → 22.40.2

package/components/matcha-tree-view.scss

@@ -1,658 +1,658 @@
-// =============================================================================
-// 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;
-}
-
-// ── 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;
-    // 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;
-
-    // O padding mora no BRANCH, não no bloco: a faixa do recuo (onde passa a
-    // guia) é da lista de filhos no hit-test do arraste. No bloco, o cursor
-    // sobre a guia caía na lista de fora, e o destino mostrado era outro.
-    > matcha-tree-branch {
-        padding-inline-start: var(--matcha-tree-view-indent-step, 32px);
-    }
-}
-
-@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 > matcha-tree-branch {
-    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;
-}
-
-// "Solte aqui para tornar filho" — o alvo de uma pasta ABERTA e VAZIA que aceita
-// o item (Figma: filhos · vazio). Aparece durante todo o arraste pra dar onde
-// mirar (IN-42506), mas só onde o drop é possível: nunca numa página, nunca na
-// outra árvore. É sempre neutro: quando o cursor chega nele (`.is-target`), o
-// destaque é o Recebendo na linha do PAI — um sinal só, como no Figma.
-.matcha-tree-view .matcha-drop-list-empty-placeholder {
-    display:         flex;
-    align-items:     center;
-    justify-content: center;
-    min-height:      48px;
-    margin:          var(--matcha-space-050, 4px) 0;
-    padding:         var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-    font-size:       var(--matcha-text-body-sm, 12px);
-    line-height:     16px;
-    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;
-    box-sizing:      border-box;
-    pointer-events:  auto;
-}
-
-// 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) ──────────────────
-// Um alvo por vez: a árvore resolve o destino sob o cursor e pinta UMA coisa —
-// Recebendo na pasta que vai receber, Recusado na linha que não aceita, ou a
-// linha do Figma entre irmãos. As classes vêm do branch (estado da árvore).
-
-// Dragging = o FANTASMA na origem, durante o arraste inteiro (Figma:
-// opacity/disabled). Esmaece o bloco todo: a subárvore vai junto com o nó.
-.matcha-tree-view .matcha-tree-view__node.is-dragging {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-}
-
-// Durante o arraste o hover das linhas sai de cena: um fundo de hover sob o
-// cursor parecia um segundo alvo ao lado do Recebendo, e o grip e o kebab
-// revelados na linha de destino eram ruído (ela é destino, não alvo de clique).
-.matcha-tree-view--dragging matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
-    background: transparent;
-}
-
-.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__grip,
-.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__actions {
-    opacity: 0;
-}
-
-// Recebendo = a pasta que vai receber o item como filho: tinta accent + hairline
-// accent. Mesma especificidade da regra acima e declarada depois: vence o hover
-// suprimido e o selected.
-.matcha-tree-view .matcha-tree-view__node.is-drop-into > 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 (tipo ou profundidade), só na linha sob o cursor:
-// tracejado danger de 2px (Figma: border/thin).
-.matcha-tree-view .matcha-tree-view__node.is-drop-rejected > matcha-tree-view-item .matcha-tree-view-item__row {
-    outline:        var(--matcha-border-thin, 2px) dashed var(--matcha-color-danger);
-    outline-offset: calc(-1 * var(--matcha-border-thin, 2px));
-}
-
-// Entre irmãos = a linha do Figma (matcha/tree-view/drop-indicator): 2px accent
-// com uma bolinha no começo, na borda do nó e no recuo do nível dele.
-.matcha-tree-view__drop-line {
-    position:       absolute;
-    inset-inline:   0;
-    top:            calc(-1 * var(--matcha-border-thin, 2px) / 2);
-    height:         var(--matcha-border-thin, 2px);
-    border-radius:  var(--matcha-radius-pill, 9999px);
-    background:     var(--matcha-color-accent);
-    pointer-events: none;
-    z-index:        1;
-
-    &::before {
-        content:            "";
-        position:           absolute;
-        inset-inline-start: 0;
-        top:                50%;
-        width:              var(--matcha-space-075, 6px);
-        height:             var(--matcha-space-075, 6px);
-        border-radius:      var(--matcha-radius-pill, 9999px);
-        background:         var(--matcha-color-accent);
-        transform:          translateY(-50%);
-    }
-
-    &--after {
-        top:    auto;
-        bottom: calc(-1 * var(--matcha-border-thin, 2px) / 2);
-    }
-}
-
-// Levantado = a cópia que acompanha o cursor: SÓ a linha, com superfície e
-// elevação level-2 — a sombra é da row, não da caixa do clone. Escopado no
-// clone de nó da árvore: o ghost das listas planas segue com a opacidade e a
-// sombra do drop-list.
-.matcha-drag-ghost:has(> .matcha-tree-view__node) {
-    opacity:       1;
-    box-shadow:    none;
-    border-radius: 0;
-}
-
-// 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 {
-    .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;
-}
-
-// 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;
+}
+
+// ── 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;
+    // 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;
+
+    // O padding mora no BRANCH, não no bloco: a faixa do recuo (onde passa a
+    // guia) é da lista de filhos no hit-test do arraste. No bloco, o cursor
+    // sobre a guia caía na lista de fora, e o destino mostrado era outro.
+    > matcha-tree-branch {
+        padding-inline-start: var(--matcha-tree-view-indent-step, 32px);
+    }
+}
+
+@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 > matcha-tree-branch {
+    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;
+}
+
+// "Solte aqui para tornar filho" — o alvo de uma pasta ABERTA e VAZIA que aceita
+// o item (Figma: filhos · vazio). Aparece durante todo o arraste pra dar onde
+// mirar (IN-42506), mas só onde o drop é possível: nunca numa página, nunca na
+// outra árvore. É sempre neutro: quando o cursor chega nele (`.is-target`), o
+// destaque é o Recebendo na linha do PAI — um sinal só, como no Figma.
+.matcha-tree-view .matcha-drop-list-empty-placeholder {
+    display:         flex;
+    align-items:     center;
+    justify-content: center;
+    min-height:      48px;
+    margin:          var(--matcha-space-050, 4px) 0;
+    padding:         var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+    font-size:       var(--matcha-text-body-sm, 12px);
+    line-height:     16px;
+    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;
+    box-sizing:      border-box;
+    pointer-events:  auto;
+}
+
+// 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) ──────────────────
+// Um alvo por vez: a árvore resolve o destino sob o cursor e pinta UMA coisa —
+// Recebendo na pasta que vai receber, Recusado na linha que não aceita, ou a
+// linha do Figma entre irmãos. As classes vêm do branch (estado da árvore).
+
+// Dragging = o FANTASMA na origem, durante o arraste inteiro (Figma:
+// opacity/disabled). Esmaece o bloco todo: a subárvore vai junto com o nó.
+.matcha-tree-view .matcha-tree-view__node.is-dragging {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+}
+
+// Durante o arraste o hover das linhas sai de cena: um fundo de hover sob o
+// cursor parecia um segundo alvo ao lado do Recebendo, e o grip e o kebab
+// revelados na linha de destino eram ruído (ela é destino, não alvo de clique).
+.matcha-tree-view--dragging matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
+    background: transparent;
+}
+
+.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__grip,
+.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__actions {
+    opacity: 0;
+}
+
+// Recebendo = a pasta que vai receber o item como filho: tinta accent + hairline
+// accent. Mesma especificidade da regra acima e declarada depois: vence o hover
+// suprimido e o selected.
+.matcha-tree-view .matcha-tree-view__node.is-drop-into > 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 (tipo ou profundidade), só na linha sob o cursor:
+// tracejado danger de 2px (Figma: border/thin).
+.matcha-tree-view .matcha-tree-view__node.is-drop-rejected > matcha-tree-view-item .matcha-tree-view-item__row {
+    outline:        var(--matcha-border-thin, 2px) dashed var(--matcha-color-danger);
+    outline-offset: calc(-1 * var(--matcha-border-thin, 2px));
+}
+
+// Entre irmãos = a linha do Figma (matcha/tree-view/drop-indicator): 2px accent
+// com uma bolinha no começo, na borda do nó e no recuo do nível dele.
+.matcha-tree-view__drop-line {
+    position:       absolute;
+    inset-inline:   0;
+    top:            calc(-1 * var(--matcha-border-thin, 2px) / 2);
+    height:         var(--matcha-border-thin, 2px);
+    border-radius:  var(--matcha-radius-pill, 9999px);
+    background:     var(--matcha-color-accent);
+    pointer-events: none;
+    z-index:        1;
+
+    &::before {
+        content:            "";
+        position:           absolute;
+        inset-inline-start: 0;
+        top:                50%;
+        width:              var(--matcha-space-075, 6px);
+        height:             var(--matcha-space-075, 6px);
+        border-radius:      var(--matcha-radius-pill, 9999px);
+        background:         var(--matcha-color-accent);
+        transform:          translateY(-50%);
+    }
+
+    &--after {
+        top:    auto;
+        bottom: calc(-1 * var(--matcha-border-thin, 2px) / 2);
+    }
+}
+
+// Levantado = a cópia que acompanha o cursor: SÓ a linha, com superfície e
+// elevação level-2 — a sombra é da row, não da caixa do clone. Escopado no
+// clone de nó da árvore: o ghost das listas planas segue com a opacidade e a
+// sombra do drop-list.
+.matcha-drag-ghost:has(> .matcha-tree-view__node) {
+    opacity:       1;
+    box-shadow:    none;
+    border-radius: 0;
+}
+
+// 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 {
+    .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;
+}
+
+// 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.
+}