@inchurch/matcha-theme 20.0.11 → 20.276.0

package/components/matcha-tooltip.scss

@@ -1,128 +1,222 @@
 // =============================================================================
-// matcha-tooltip.scss — Tooltip with arrow (4 positions + close button)
-// Aligned with Figma matcha/tooltip: Posição(4) × Close(2) = 5 variants
+// matcha-tooltip.scss — Tooltip with arrow (4 positions + close variant)
+// Aligned with Figma DSV3 matcha/tooltip (14846:89): 5 variants
+//
+// Figma canonical:
+//   bg     = var(--matcha-color-text-primary, #e8eaed)        (light em dark theme)
+//   text   = var(--matcha-color-surface-card, #1c1f26)        (dark sobre bg light)
+//   pad    = 8 16 (variante close: 8 12 8 16, gap 8)
+//   radius = 8 (var(--matcha-radius-lg))
+//   font   = Manrope Medium 14/20, letter-spacing 0.2
+//   arrow  = 13.856 × 6 (triângulo, mesma cor do bg)
 // =============================================================================
 
 .matcha-tooltip-content {
-    // Figma matcha/tooltip: pad 8/16, radius 8, text 14/500/20 (Medium)
     position: absolute;
     z-index: var(--matcha-z-tooltip, 400);
+
     padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
     border-radius: var(--matcha-radius-lg, 8px);
-    font-size: var(--matcha-text-md, 14px);
+
+    font-family: var(--matcha-font-family, 'Manrope', sans-serif);
+    font-size: var(--matcha-text-body-md, 14px);
     font-weight: var(--matcha-weight-medium, 500);
     line-height: var(--matcha-leading-body-md, 20px);
+    letter-spacing: 0.2px;
+
     width: auto;
     max-width: 500px;
     text-overflow: ellipsis;
+
     display: inline-flex;
-    gap: var(--matcha-space-100, 8px);
     align-items: center;
     justify-content: center;
+    gap: var(--matcha-space-100, 8px);
     text-align: center;
+    // pointer-events: auto pra cursor poder entrar no overlay e cancelar o hideDelay
+    // (permite seleção/cópia do texto sem perder o tooltip). Margin de 8px com host
+    // garante que não há sobreposição do clique.
+    pointer-events: auto;
 
-    // Arrow — default: above (arrow points down)
-    &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
-        content: "";
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 6px 8px 0 8px;
-        bottom: -4px;
-        left: 50%;
-        border-radius: var(--matcha-radius-none, 0);
-        transform: translateX(-50%);
+    // Variante com close — gap 8, pr-12 (espaço pro X)
+    &.matcha-tooltip-content--with-close {
+        padding-right: var(--matcha-space-150, 12px);
     }
 }
 
-// Close button
-.matcha-tooltip-close {
-    display: flex;
-    pointer-events: auto;
-    cursor: pointer;
-
-    &::before {
-        content: "\e92a";
-        font-family: 'MatchaIcons';
-        font-size: var(--matcha-icon-size-sm, 16px);
-        line-height: 16px;
-        width: 16px;
-        height: 16px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
+// ── Arrow (mesma cor do bg) — 13.856×6 — ::after triangular ────────────────
+// Tamanho via border-style: solid trick. base 13.856 ≈ 2×7px borders → border-width
+// horizontal ~7, vertical 6. Mantemos arredondado pelo Figma (13.856 × 6).
+//
+// Posicionamento: arrow normalmente centrada no box (left: 50% ou top: 50%), mas
+// quando o tooltip é clamped pela viewport, o directive computa um shift em px
+// (--matcha-tooltip-arrow-shift-x / -y) pra arrow re-alinhar com o trigger.
+// Default 0px (fallback puro 50% — comportamento padrão sem clamp).
+.matcha-tooltip-content_above::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 6px 7px 0 7px;
+    bottom: -6px;
+    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
+    transform: translateX(-50%);
 }
 
-// Arrow — below (arrow points up)
-.matcha-tooltip-content_below::before {
+.matcha-tooltip-content_below::after {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 0px 8px 6px 8px;
-    top: -4px;
-    left: 50%;
+    border-width: 0 7px 6px 7px;
+    top: -6px;
+    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
     transform: translateX(-50%);
 }
 
-// Arrow — left (arrow points right)
 .matcha-tooltip-content_left::after {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 8px 0 8px 6px;
-    top: 50%;
-    right: -4px;
+    border-width: 7px 0 7px 6px;
+    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
+    right: -6px;
     transform: translateY(-50%);
 }
 
-// Arrow — right (arrow points left)
 .matcha-tooltip-content_right::after {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 8px 6px 8px 0;
-    top: 50%;
-    left: -4px;
+    border-width: 7px 6px 7px 0;
+    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
+    left: -6px;
     transform: translateY(-50%);
 }
 
-// ── Theme mixin ─────────────────────────────────────────────────────────────
+// ── Close button (16×16 com X via Matcha icon font) ────────────────────────
+.matcha-tooltip-close {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    pointer-events: auto;
+    transition: opacity var(--matcha-duration-instant, 80ms) ease;
+
+    &::before {
+        content: "\e92a";
+        font-family: 'MatchaIcons';
+        font-size: var(--matcha-icon-size-sm, 16px);
+        line-height: 16px;
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
+        outline-offset: 2px;
+        border-radius: var(--matcha-radius-sm, 4px);
+    }
+}
 
+// =============================================================================
+// Theme mixin — cores do bg/text/arrow vinculadas ao tema
+// =============================================================================
 @mixin matcha-tooltip-theme($theme) {
     .matcha-tooltip-content {
-        background-color: var(--matcha-color-bg-inverse, #{getForeground($theme)});
-        color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
+        // Figma: bg = text-primary (light em dark theme), text = surface-card (dark)
+        background-color: var(--matcha-color-text-primary, #{getForeground($theme)});
+        color: var(--matcha-color-surface-card, #{getForegroundInverse($theme)});
+        box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.18));
+    }
 
-        // Arrow colors per position
-        &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
-            border-color: var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent transparent transparent;
-        }
+    // Arrow: mesma cor do bg, lado oposto à direção do tooltip
+    .matcha-tooltip-content_above::after {
+        border-color: var(--matcha-color-text-primary, #{getForeground($theme)})
+                      transparent transparent transparent;
+    }
+    .matcha-tooltip-content_below::after {
+        border-color: transparent transparent
+                      var(--matcha-color-text-primary, #{getForeground($theme)}) transparent;
+    }
+    .matcha-tooltip-content_left::after {
+        border-color: transparent transparent transparent
+                      var(--matcha-color-text-primary, #{getForeground($theme)});
+    }
+    .matcha-tooltip-content_right::after {
+        border-color: transparent
+                      var(--matcha-color-text-primary, #{getForeground($theme)})
+                      transparent transparent;
     }
 
-    .matcha-tooltip-content_below::before {
-        border-color: transparent transparent var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent;
+    .matcha-tooltip-close {
+        color: var(--matcha-color-surface-card, #{getForegroundInverse($theme)});
+        opacity: 0.7;
+
+        &:hover  { opacity: 1; }
+        &:active { opacity: 0.9; }
     }
+}
 
-    .matcha-tooltip-content_left::after {
-        border-color: transparent transparent transparent var(--matcha-color-bg-inverse, #{getForeground($theme)});
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
+
+// Forced colors (Windows High Contrast) — usa system colors visíveis.
+@media (forced-colors: active) {
+    .matcha-tooltip-content {
+        background: Canvas !important;
+        color: CanvasText !important;
+        border: 1px solid CanvasText;
+        box-shadow: none !important;
     }
 
+    .matcha-tooltip-content_above::after,
+    .matcha-tooltip-content_below::after,
+    .matcha-tooltip-content_left::after,
     .matcha-tooltip-content_right::after {
-        border-color: transparent var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent transparent;
+        // Arrow vira invisível em high-contrast (sem solução elegante com border-color),
+        // a borda do tooltip cobre a função de delimitação visual.
+        display: none;
+    }
+
+    .matcha-tooltip-close:focus-visible {
+        outline: 2px solid CanvasText !important;
+    }
+}
+
+// Reduced motion — entra/sai sem animação.
+@media (prefers-reduced-motion: reduce) {
+    .matcha-tooltip-content {
+        transition: none !important;
+        animation: none !important;
     }
 
     .matcha-tooltip-close {
-        color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
-        opacity: 0.7;
+        transition: none !important;
+    }
+}
 
-        &:hover { opacity: 1; }
+// Print — chrome flutuante some.
+@media print {
+    .matcha-tooltip-content {
+        display: none !important;
     }
 }

package/components/matcha-tree-view.scss

@@ -0,0 +1,189 @@
+// =============================================================================
+// 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);
+    }
+}
+
+// ── 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.
+}