@inchurch/matcha-theme 21.3.3 → 22.0.0

package/components/matcha-tree-view.scss

@@ -1,212 +1,257 @@
-// =============================================================================
-// matcha-tree-view.scss — Slot row indentado por nível hierárquico
-// Componente é um FRAME minimal (indent + estados). Consumer compõe o conteúdo
-// livre via ng-content. Responsivo via container queries.
-// =============================================================================
-
-// ── Container opcional (qualquer wrapper .matcha-tree-view) ─────────────────
-// Provê: bg "tray" Figma + gap entre rows + propagação de gap dentro de drop-list.
-.matcha-tree-view {
-    display:        flex;
-    flex-direction: column;
-    gap:            var(--matcha-space-050, 4px);
-    padding:        var(--matcha-space-200, 16px);
-    background:     var(--matcha-color-surface-background);
-    border-radius:  var(--matcha-radius-lg, 8px);
-
-    // Container queries — base pra responsivo dos filhos
-    container-type: inline-size;
-    container-name: matcha-tree-view;
-
-    .matcha-drop-list-container {
-        display:        flex;
-        flex-direction: column;
-        gap:            var(--matcha-space-050, 4px);
-    }
-}
-
-// ── Container data-driven (matcha-tree-view) + branches recursivos ──────────
-// O host <matcha-tree-view> reusa a classe .matcha-tree-view acima (tray + gap).
-// Cada nível é um <matcha-tree-branch> (drop container); a indentação é por item
-// (via [level] do tree-view-item), então os wrappers NÃO adicionam indent.
-matcha-tree-branch,
-.matcha-tree-view__children {
-    display:        flex;
-    flex-direction: column;
-    gap:            var(--matcha-space-050, 4px);
-    min-height:     2px; // alvo de drop mínimo quando o branch está vazio
-}
-
-.matcha-tree-view__node {
-    display: block;
-}
-
-// Feedback de rejeição na zona de reparenting (self-drop / tipo não aceito)
-.matcha-drop-zone-cannot-accept {
-    outline:        2px dashed var(--matcha-color-danger, #e5484d);
-    outline-offset: -2px;
-    border-radius:  var(--matcha-radius-md, 4px);
-}
-
-// ── Item host — flex row com indent dinâmico ────────────────────────────────
-matcha-tree-view-item {
-    display:         flex;
-    flex-direction:  row;
-    align-items:     stretch;
-    width:           100%;
-    box-sizing:      border-box;
-    outline:         none;
-
-    // Disabled
-    &[disabled] {
-        opacity:        0.5;
-        pointer-events: none;
-    }
-
-    // Clickable
-    &[clickable]:not([disabled]) {
-        cursor: pointer;
-
-        &:focus-visible .matcha-tree-view-item__row {
-            outline:        2px solid var(--matcha-color-accent);
-            outline-offset: -2px;
-        }
-    }
-}
-
-// ── Indent (Nível 2+) — width vem inline do componente ──────────────────────
-.matcha-tree-view-item__indent {
-    flex:    none;
-    // height auto — se ajusta ao row
-}
-
-// ── Row — bg transparente por default; container .matcha-tree-view dá bg card
-.matcha-tree-view-item__row {
-    flex:           1;
-    display:        flex;
-    flex-direction: row;
-    align-items:    center;
-    gap:            var(--matcha-space-100, 8px);
-    min-height:     48px;
-    padding:        var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-    background:     transparent;
-    border-bottom:  1px solid var(--matcha-color-surface-border);
-    border-radius:  var(--matcha-radius-md, 4px);
-    box-sizing:     border-box;
-    min-width:      0;
-    transition:     background-color var(--matcha-duration-instant, 80ms) ease;
-
-    // Permitir conteúdo wrap se consumer quiser
-    flex-wrap: var(--matcha-tree-view-item-wrap, nowrap);
-}
-
-// Hover sutil na row
-matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
-    background: var(--matcha-color-surface-hover);
-}
-
-// ── Estilos comuns dos slots opcionais (CSS classes utilitárias do DS) ─────
-// Consumer aplica esses classes nos elementos projetados; o componente NÃO impõe.
-// .matcha-tree-view-item__grip — aplicado automaticamente pela diretiva matchaTreeViewGrip.
-.matcha-tree-view-item__grip {
-    flex:               none;
-    display:            inline-flex;
-    align-items:        center;
-    justify-content:    center;
-    width:              24px;
-    height:             24px;
-    --matcha-icon-color: var(--matcha-color-text-muted);
-    cursor:             grab;
-    transition:         --matcha-icon-color var(--matcha-duration-instant, 80ms) ease;
-
-    &:hover  { --matcha-icon-color: var(--matcha-color-text-primary); }
-    &:active { cursor: grabbing; }
-}
-
-// Dentro do container canon (.matcha-tree-view), row ganha bg "card on tray" (Figma)
-.matcha-tree-view matcha-tree-view-item:not([disabled]) .matcha-tree-view-item__row {
-    background: var(--matcha-color-surface-card);
-}
-.matcha-tree-view matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
-    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
-}
-
-// ── DnD states (compõe com matcha-drop-list) ────────────────────────────────
-.matcha-drag-item.matcha-drag-dragging {
-    opacity: 0.35;
-
-    .matcha-tree-view-item__row { background: var(--matcha-color-surface-hover); }
-}
-
-.matcha-tree-view .matcha-drop-list-placeholder {
-    height:        4px;
-    margin:        var(--matcha-space-050, 4px) 0;
-    background:    var(--matcha-color-accent);
-    border-radius: var(--matcha-radius-sm, 2px);
-    opacity:       0.85;
-    box-shadow:    0 0 0 2px var(--matcha-color-accent-alpha, rgba(168, 217, 78, 0.2));
-    animation:     matcha-tree-view-pulse 800ms ease-in-out infinite alternate;
-}
-
-@keyframes matcha-tree-view-pulse {
-    from { opacity: 0.7; }
-    to   { opacity: 1; }
-}
-
-.matcha-tree-view .matcha-drop-list-empty-placeholder {
-    display:        flex;
-    align-items:    center;
-    justify-content: center;
-    padding:        var(--matcha-space-400, 32px);
-    font-size:      var(--matcha-text-body-sm, 12px);
-    color:          var(--matcha-color-text-muted);
-    border:         2px dashed var(--matcha-color-surface-border);
-    border-radius:  var(--matcha-radius-md, 4px);
-    background:     transparent;
-}
-
-.matcha-drag-item.matcha-drag-dragging .matcha-tree-view-item__grip { cursor: grabbing; }
-
-// ── Entrance animation ──────────────────────────────────────────────────────
-matcha-tree-view-item:not(.matcha-drag-dragging) {
-    animation: matcha-tree-view-item-in 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
-}
-
-@keyframes matcha-tree-view-item-in {
-    from { opacity: 0; transform: translateY(-4px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-// ── Responsividade — container query baseada no .matcha-tree-view container
-// Em containers estreitos (< 480px), reduz indent visual pra preservar espaço útil.
-// Indent visual = padding-left implícito via --matcha-tree-view-item-indent setado
-// inline pelo componente. Container query NÃO consegue overridar inline style
-// diretamente, então usamos uma estratégia diferente: scale do indent div.
-@container matcha-tree-view (max-width: 480px) {
-    .matcha-tree-view-item__indent {
-        // Reduz 50% do width inline — preserva indent visual sem perder hierarquia
-        transform:        scaleX(0.6);
-        transform-origin: left center;
-    }
-
-    .matcha-tree-view-item__row {
-        gap:        var(--matcha-space-050, 4px);
-        padding:    var(--matcha-space-100, 8px);
-        min-height: 44px; // touch target WCAG 2.5.5 em mobile
-    }
-}
-
-// Respeita preferência de redução de movimento
-@media (prefers-reduced-motion: reduce) {
-    matcha-tree-view-item,
-    matcha-tree-view-item:not(.matcha-drag-dragging),
-    .matcha-tree-view .matcha-drop-list-placeholder {
-        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 — Slot row indentado por nível hierárquico
+// Componente é um FRAME minimal (indent + estados). Consumer compõe o conteúdo
+// livre via ng-content. Responsivo via container queries.
+// =============================================================================
+
+// ── Container opcional (qualquer wrapper .matcha-tree-view) ─────────────────
+// Provê: bg "tray" Figma + gap entre rows + propagação de gap dentro de drop-list.
+.matcha-tree-view {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--matcha-space-050, 4px);
+    padding:        var(--matcha-space-200, 16px);
+    background:     var(--matcha-color-surface-background);
+    border-radius:  var(--matcha-radius-lg, 8px);
+
+    // Container queries — base pra responsivo dos filhos
+    container-type: inline-size;
+    container-name: matcha-tree-view;
+
+    .matcha-drop-list-container {
+        display:        flex;
+        flex-direction: column;
+        gap:            var(--matcha-space-050, 4px);
+    }
+}
+
+// ── Container data-driven (matcha-tree-view) + branches recursivos ──────────
+// O host <matcha-tree-view> reusa a classe .matcha-tree-view acima (tray + gap).
+// Cada nível é um <matcha-tree-branch> (drop container); a indentação é por item
+// (via [level] do tree-view-item), então os wrappers NÃO adicionam indent.
+matcha-tree-branch,
+.matcha-tree-view__children {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--matcha-space-050, 4px);
+    min-height:     2px; // alvo de drop mínimo quando o branch está vazio
+}
+
+.matcha-tree-view__node {
+    display: block;
+}
+
+// Feedback de rejeição na zona de reparenting (self-drop / tipo não aceito)
+.matcha-drop-zone-cannot-accept {
+    outline:        2px dashed var(--matcha-color-danger, #e5484d);
+    outline-offset: -2px;
+    border-radius:  var(--matcha-radius-md, 4px);
+}
+
+// ── Item host — flex row com indent dinâmico ────────────────────────────────
+matcha-tree-view-item {
+    display:         flex;
+    flex-direction:  row;
+    align-items:     stretch;
+    width:           100%;
+    box-sizing:      border-box;
+    outline:         none;
+
+    // Disabled
+    &[disabled] {
+        opacity:        0.5;
+        pointer-events: none;
+    }
+
+    // Clickable
+    &[clickable]:not([disabled]) {
+        cursor: pointer;
+
+        &:focus-visible .matcha-tree-view-item__row {
+            outline:        2px solid var(--matcha-color-accent);
+            outline-offset: -2px;
+        }
+    }
+}
+
+// ── Indent (Nível 2+) — width vem inline do componente ──────────────────────
+.matcha-tree-view-item__indent {
+    flex:    none;
+    // height auto — se ajusta ao row
+}
+
+// ── Guias de conector (modo organograma) — render quando [guides] é passado ──
+// Cada célula (largura = indentStep, inline) desenha a linha vertical do ancestral
+// (data-guide=line|tee) e/ou o cotovelo do nó (tee ├ / ell └). Linha via
+// --matcha-tree-view-guide-color (theme-aware, default = surface-border). As
+// verticais transbordam o padding-block da row (--_pad) p/ emendar entre rows —
+// use gap:0 no container quando quiser linhas 100% contínuas.
+.matcha-tree-view-item__guides {
+    flex:       none;
+    align-self: stretch;
+    display:    flex;
+}
+.matcha-tree-view-item__guide {
+    --_guide: var(--matcha-tree-view-guide-color, var(--matcha-color-surface-border));
+    --_pad:   var(--matcha-space-100, 8px);
+    position: relative;
+    flex:     none;
+
+    // Linha vertical no centro — 'line'/'tee' atravessam; 'ell' (último) para no centro.
+    &[data-guide="line"]::before,
+    &[data-guide="tee"]::before,
+    &[data-guide="ell"]::before {
+        content:    "";
+        position:   absolute;
+        left:       50%;
+        top:        calc(-1 * var(--_pad));
+        width:      1px;
+        background: var(--_guide);
+    }
+    &[data-guide="line"]::before,
+    &[data-guide="tee"]::before { bottom: calc(-1 * var(--_pad)); }
+    &[data-guide="ell"]::before { height: calc(50% + var(--_pad)); }
+
+    // Cotovelo horizontal (centro → direita, na metade da altura) — 'tee'/'ell'.
+    &[data-guide="tee"]::after,
+    &[data-guide="ell"]::after {
+        content:    "";
+        position:   absolute;
+        top:        50%;
+        left:       50%;
+        right:      0;
+        height:     1px;
+        background: var(--_guide);
+    }
+}
+
+// ── Row — bg transparente por default; container .matcha-tree-view dá bg card
+.matcha-tree-view-item__row {
+    flex:           1;
+    display:        flex;
+    flex-direction: row;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    min-height:     48px;
+    padding:        var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+    background:     transparent;
+    border-bottom:  1px solid var(--matcha-color-surface-border);
+    border-radius:  var(--matcha-radius-md, 4px);
+    box-sizing:     border-box;
+    min-width:      0;
+    transition:     background-color var(--matcha-duration-instant, 80ms) ease;
+
+    // Permitir conteúdo wrap se consumer quiser
+    flex-wrap: var(--matcha-tree-view-item-wrap, nowrap);
+}
+
+// Hover sutil na row
+matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
+    background: var(--matcha-color-surface-hover);
+}
+
+// ── Estilos comuns dos slots opcionais (CSS classes utilitárias do DS) ─────
+// Consumer aplica esses classes nos elementos projetados; o componente NÃO impõe.
+// .matcha-tree-view-item__grip — aplicado automaticamente pela diretiva matchaTreeViewGrip.
+.matcha-tree-view-item__grip {
+    flex:               none;
+    display:            inline-flex;
+    align-items:        center;
+    justify-content:    center;
+    width:              24px;
+    height:             24px;
+    --matcha-icon-color: var(--matcha-color-text-muted);
+    cursor:             grab;
+    transition:         --matcha-icon-color var(--matcha-duration-instant, 80ms) ease;
+
+    &:hover  { --matcha-icon-color: var(--matcha-color-text-primary); }
+    &:active { cursor: grabbing; }
+}
+
+// Dentro do container canon (.matcha-tree-view), row ganha bg "card on tray" (Figma)
+.matcha-tree-view matcha-tree-view-item:not([disabled]) .matcha-tree-view-item__row {
+    background: var(--matcha-color-surface-card);
+}
+.matcha-tree-view matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
+    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
+}
+
+// ── DnD states (compõe com matcha-drop-list) ────────────────────────────────
+.matcha-drag-item.matcha-drag-dragging {
+    opacity: 0.35;
+
+    .matcha-tree-view-item__row { background: var(--matcha-color-surface-hover); }
+}
+
+.matcha-tree-view .matcha-drop-list-placeholder {
+    height:        4px;
+    margin:        var(--matcha-space-050, 4px) 0;
+    background:    var(--matcha-color-accent);
+    border-radius: var(--matcha-radius-sm, 2px);
+    opacity:       0.85;
+    box-shadow:    0 0 0 2px var(--matcha-color-accent-alpha, rgba(168, 217, 78, 0.2));
+    animation:     matcha-tree-view-pulse 800ms ease-in-out infinite alternate;
+}
+
+@keyframes matcha-tree-view-pulse {
+    from { opacity: 0.7; }
+    to   { opacity: 1; }
+}
+
+.matcha-tree-view .matcha-drop-list-empty-placeholder {
+    display:        flex;
+    align-items:    center;
+    justify-content: center;
+    padding:        var(--matcha-space-400, 32px);
+    font-size:      var(--matcha-text-body-sm, 12px);
+    color:          var(--matcha-color-text-muted);
+    border:         2px dashed var(--matcha-color-surface-border);
+    border-radius:  var(--matcha-radius-md, 4px);
+    background:     transparent;
+}
+
+.matcha-drag-item.matcha-drag-dragging .matcha-tree-view-item__grip { cursor: grabbing; }
+
+// ── Entrance animation ──────────────────────────────────────────────────────
+matcha-tree-view-item:not(.matcha-drag-dragging) {
+    animation: matcha-tree-view-item-in 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes matcha-tree-view-item-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+// ── Responsividade — container query baseada no .matcha-tree-view container
+// Em containers estreitos (< 480px), reduz indent visual pra preservar espaço útil.
+// Indent visual = padding-left implícito via --matcha-tree-view-item-indent setado
+// inline pelo componente. Container query NÃO consegue overridar inline style
+// diretamente, então usamos uma estratégia diferente: scale do indent div.
+@container matcha-tree-view (max-width: 480px) {
+    .matcha-tree-view-item__indent {
+        // Reduz 50% do width inline — preserva indent visual sem perder hierarquia
+        transform:        scaleX(0.6);
+        transform-origin: left center;
+    }
+
+    .matcha-tree-view-item__row {
+        gap:        var(--matcha-space-050, 4px);
+        padding:    var(--matcha-space-100, 8px);
+        min-height: 44px; // touch target WCAG 2.5.5 em mobile
+    }
+}
+
+// Respeita preferência de redução de movimento
+@media (prefers-reduced-motion: reduce) {
+    matcha-tree-view-item,
+    matcha-tree-view-item:not(.matcha-drag-dragging),
+    .matcha-tree-view .matcha-drop-list-placeholder {
+        animation:  none !important;
+        transition: none !important;
+    }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+@mixin matcha-tree-view-theme($theme) {
+    // Tudo via CSS vars — sem theme-specific overrides.
+}