@inchurch/matcha-theme 20.0.11 → 20.276.0

package/components/matcha-drop-list.scss

@@ -115,6 +115,47 @@
         }
     }
 
+    // =============================================================================
+    // DROP ZONE (matchaDropZone directive — reparenting target)
+    // =============================================================================
+
+    .matcha-drop-zone-cannot-accept {
+        border: 2px dashed getRed($theme) !important;
+        border-radius: 8px;
+        background-color: getRedAlpha($theme);
+        cursor: not-allowed;
+        transition: background-color 0.15s linear, border-color 0.15s linear;
+    }
+
+    // Fix C: quando o drop zone pai está rejeitado (vermelho), a lista filha
+    // recebendo o drag também deve ficar vermelha — não verde.
+    .matcha-drop-zone-cannot-accept .matcha-drop-list-container.matcha-drop-list-receiving {
+        background-color: getRedAlpha($theme);
+        border-color: getRed($theme);
+
+        &::before {
+            background: linear-gradient(45deg,
+                transparent 25%, getRedAlpha($theme) 25%, getRedAlpha($theme) 50%,
+                transparent 50%, transparent 75%, getRedAlpha($theme) 75%, getRedAlpha($theme));
+            background-size: 16px 16px;
+            animation: drop-zone-animation 0.8s linear infinite;
+            opacity: 0.6;
+        }
+    }
+
+    // =============================================================================
+    // GHOST CLONE (criado dinamicamente no body durante o drag)
+    // =============================================================================
+
+    .matcha-drag-ghost {
+        pointer-events: none;
+        opacity: 0.85;
+        z-index: 9999;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+        border-radius: var(--matcha-radius-md, 4px);
+        will-change: transform;
+    }
+
     // =============================================================================
     // ITENS ARRASTÁVEIS — Template A
     // =============================================================================
@@ -240,7 +281,7 @@
         }
 
         small {
-            font-size: var(--matcha-text-caption, 11px);
+            font-size: var(--matcha-text-p-tiny, 11px);
             font-style: italic;
             color: getForegroundAlpha($theme);
         }

package/components/matcha-empty-state.scss

@@ -1,118 +1,230 @@
 // =============================================================================
-// matcha-empty-state.scss — Empty state placeholder
-// Aligned with Figma matcha/empty-state: Tamanho(2) × Ação(2) × Descrição(2)
+// matcha-empty-state.scss — Figma DSV3 matcha/empty-state (14935:130)
+// 6 variants: Tamanho (Padrão 400/Compacto 280) × Ação (Sim/Não) × Descrição (Sim/Não)
+// + extensão DSV3: variantes semânticas (success/warning/error/info), slot media,
+//   heading level configurável, anúncio aria-live opt-in.
 // =============================================================================
 
 // ── Structural ──────────────────────────────────────────────────────────────
 
 matcha-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  padding: var(--matcha-space-600, 48px) var(--matcha-space-400, 32px);
-  box-sizing: border-box;
-  text-align: center;
-}
-
-.matcha-empty-state__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--matcha-space-200, 16px);
-  max-width: 400px;
-  width: 100%;
-}
-
-.matcha-empty-state__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: var(--matcha-radius-xl, 16px);
-  flex-shrink: 0;
+    display:         flex;
+    flex-direction:  column;
+    align-items:     center;
+    justify-content: center;
+    gap:             var(--matcha-space-200, 16px);
+    width:           400px;
+    max-width:       100%;
+    // Centraliza o bloco horizontalmente quando o parent é mais largo que 400px
+    // (canon Figma DSV3 — empty-state sempre no centro do container).
+    margin-inline:   auto;
+    padding:         var(--matcha-space-600, 48px) var(--matcha-space-400, 32px);
+    box-sizing:      border-box;
+    text-align:      center;
 }
 
+// ── Container do ícone — 64×64 com bg disabled e opacity 0.4 ────────────────
+.matcha-empty-state__icon-container {
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    flex-shrink:      0;
+    width:            64px;
+    height:           64px;
+    border-radius:    var(--matcha-radius-xl, 16px);
+    background-color: var(--matcha-color-interaction-disabled-bg, #282C34);
+    opacity:          var(--matcha-opacity-overlay-soft, 0.4);
+    overflow:         hidden;
+}
+
+// ── Ícone dentro do container — 28×28 (Figma exato) ────────────────────────
+matcha-empty-state .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state .matcha-empty-state__icon-container matcha-icon {
+    font-size:   28px;
+    width:       28px;
+    height:      28px;
+    line-height: 28px;
+    color:       var(--matcha-color-text-primary, #E8EAED);
+}
+
+// ── Variantes semânticas — colorem o container do ícone ────────────────────
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-success, #4caf50);
+}
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-warn, #ff9800);
+}
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-danger, #f44336);
+}
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-info, #64B5F6);
+}
+
+// Em variantes semânticas, ícone fica branco/contraste, sem opacity baixa
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container {
+    opacity: 1;
+}
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-on-feedback, #FFFFFF);
+}
+
+// Pareamento canônico por variant — usa o token *-contrast de cada feedback,
+// que respeita WCAG AA em ambos os themes (preto em dark / branco em light
+// pros tons claros; e o inverso pros tons escuros).
+// !important: a regra global do matcha-icon (`matcha-icon { color: ... }`)
+// tem mesma specificity que esses descendant selectors em alguns casos, e o
+// browser cai no source order. !important garante que o contrast vence sempre.
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-success-contrast) !important;
+}
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-warn-contrast) !important;
+}
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-danger-contrast) !important;
+}
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-info-contrast) !important;
+}
+
+// ── Slot media (ilustração custom) — 64×64 default, 48×48 compact ──────────
+matcha-empty-state [matchaEmptyStateMedia] {
+    display:        block;
+    flex-shrink:    0;
+    max-width:      120px;
+    max-height:     120px;
+    object-fit:     contain;
+}
+
+// Quando slot media presente, esconde o container do ícone padrão
+matcha-empty-state:has([matchaEmptyStateMedia]) .matcha-empty-state__icon-container {
+    display: none;
+}
+
+// ── Bloco texto — título + descrição ────────────────────────────────────────
 .matcha-empty-state__text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
+    display:        flex;
+    flex-direction: column;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    width:          100%;
 }
 
+// ── Título — matcha/text/button-lg (16/600/22, letter-spacing 0.2) ─────────
 .matcha-empty-state__title {
-  font-size: var(--matcha-text-lg, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: 1.4;
-  margin: 0;
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-label-lg, 16px);
+    font-weight:    var(--matcha-weight-semibold, 600);
+    line-height:    var(--matcha-leading-label-lg, 22px);
+    letter-spacing: 0.2px;
+    color:          var(--matcha-color-text-primary, #E8EAED);
+    margin:         0;
+    max-width:      336px;
 }
 
+// ── Descrição — matcha/text/body-md (14/400/20) — w fixo 210px (Figma) ─────
 .matcha-empty-state__description {
-  font-size: var(--matcha-text-md, 14px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: 1.5;
-  max-width: 320px;
-  margin: 0;
+    font-family: var(--matcha-font-family);
+    font-size:   var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-md, 20px);
+    color:       var(--matcha-color-text-secondary);
+    margin:      0;
+    max-width:   210px;
 }
 
+// ── Slot da ação — suporta múltiplas ações com gap padrão ──────────────────
 .matcha-empty-state__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+    display:         inline-flex;
+    flex-wrap:       wrap;
+    align-items:     center;
+    justify-content: center;
+    gap:             var(--matcha-space-100, 8px);
 }
 
-// ── Compact variant ──
+// Esconde container vazio (sem ng-content projetado)
+.matcha-empty-state__action:empty {
+    display: none;
+}
+
+// ── Compact variant — 280px largura, ícone menor, padding reduzido ─────────
+matcha-empty-state[size="compact"],
 matcha-empty-state.matcha-empty-state--compact {
-  padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+    width:   280px;
+    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+    gap:     var(--matcha-space-150, 12px);
+
+    .matcha-empty-state__icon-container {
+        width:         48px;
+        height:        48px;
+        border-radius: var(--matcha-radius-lg, 12px);
+    }
 
-  .matcha-empty-state__content {
-    max-width: 280px;
-    gap: var(--matcha-space-150, 12px);
-  }
+    .matcha-empty-state__icon,
+    matcha-icon.matcha-empty-state__icon {
+        font-size:   20px;
+        width:       20px;
+        height:      20px;
+        line-height: 20px;
+    }
 
-  .matcha-empty-state__icon {
-    width: 40px;
-    height: 40px;
-    border-radius: var(--matcha-radius-lg, 8px);
-  }
+    .matcha-empty-state__title {
+        font-size:   var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+        max-width:   240px;
+    }
 
-  .matcha-empty-state__title {
-    font-size: var(--matcha-text-md, 14px);
-  }
+    .matcha-empty-state__description {
+        max-width: 240px;
+    }
 }
 
-// ── Responsive fallback ──
+// ── Responsive: telas pequenas reduzem padding lateral ─────────────────────
 @media (max-width: 479px) {
-  matcha-empty-state:not(.matcha-empty-state--compact) {
-    padding: var(--matcha-space-400, 32px) var(--matcha-space-250, 20px);
-
-    .matcha-empty-state__icon {
-      width: 48px;
-      height: 48px;
-      border-radius: var(--matcha-radius-lg, 8px);
+    matcha-empty-state:not([size="compact"]):not(.matcha-empty-state--compact) {
+        padding: var(--matcha-space-400, 32px) var(--matcha-space-250, 20px);
     }
-  }
 }
 
 // =============================================================================
-// Theme
+// Theme mixin — vazia. Tudo via CSS custom properties globais.
 // =============================================================================
 
 @mixin matcha-empty-state-theme($theme) {
-  .matcha-empty-state__icon {
-    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-    opacity: var(--matcha-opacity-disabled, 0.38);
-  }
-
-  .matcha-empty-state__title {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-empty-state__description {
-    color: var(--matcha-color-hint, #{getGrey($theme)});
-  }
+    // Sem overrides — tokens globais bastam.
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-empty-state {
+        .matcha-empty-state__icon-container {
+            background: Canvas !important;
+            border: 1px solid CanvasText !important;
+            opacity: 1 !important;
+
+            matcha-icon { color: CanvasText !important; }
+        }
+    }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+    matcha-empty-state * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+// ── Print ──
+// Empty state é informacional — mantém visível, ação pode hide.
+@media print {
+    matcha-empty-state .matcha-empty-state__action {
+        display: none !important;
+    }
 }

package/components/matcha-flag.scss

@@ -1,62 +1,103 @@
-@use "sass:map";
-
 // =============================================================================
-// matcha-flag.scss — Country flags & payment brand flags
-// Aligned with Figma matcha/flag/país + matcha/flag/pagamento:
-//   País: 4 variants (Brasil, EUA, Portugal, Espanha) — 22×16px (2:3)
-//   Pagamento: 20 variants (Mastercard, Visa, PIX...) — 32×24px
-//   Used in: phone DDI selector, payment forms, transaction lists
-// Angular: matcha-flag
+// matcha-flag.scss — Bandeiras (country) + Pagamento (payment)
+//
+// 1:1 Figma DSV3 (i04CyWczuVctwRjE5VbJh7):
+//   - matcha/flag/country  (3969:15347)  — 24x24 frame, 22x16 flag (2:3)
+//   - matcha/flag/payment  (3205:13569)  — 32x24 SVG card (4:3)
+//
+// API host attrs (set pelo MatchaFlagComponent):
+//   data-set   — country | payment
+//   data-name  — slug (brasil, visa, pix, etc.)
+//   data-size  — sm | md | lg
+//
+// Componentes:
+//   .matcha-flag                — host (inline-flex, alinha + tamanho)
+//   .matcha-flag__emoji         — span unicode (country)
+//   .matcha-flag__svg           — wrapper innerHTML SVG (payment)
+//
+// Usado em: matcha-phone (DDI), forms de pagamento, transaction lists, hero CTA.
 // =============================================================================
 
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-flag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img, svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-// ── Country flags (2:3 ratio) ───────────────────────────────────────────────
+@mixin matcha-flag($theme) {
 
-.matcha-flag--country {
-  width: 22px;
-  height: 16px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
+    // ── Host ─────────────────────────────────────────────────────────────────
+    .matcha-flag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        line-height: 1;
+        // Default size = md (sobrescrito por data-size abaixo)
+        width: var(--matcha-flag-w, 32px);
+        height: var(--matcha-flag-h, 24px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
 
-.matcha-flag--country-lg {
-  width: 32px;
-  height: 24px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
+    // ── Emoji (country) ─────────────────────────────────────────────────────
+    // Emoji ocupa o box todo; font-size ditando o tamanho do glyph.
+    .matcha-flag__emoji {
+        font-size: calc(var(--matcha-flag-h, 24px) * 0.95);
+        line-height: 1;
+        // Emoji-style render — força o emoji color (algumas fonts renderizam
+        // o codepoint como texto B&W; emoji color preserva as cores nacionais)
+        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+        font-variant-emoji: emoji;
+    }
 
-// ── Payment flags (4:3 ratio) ───────────────────────────────────────────────
+    // ── SVG (payment) ───────────────────────────────────────────────────────
+    .matcha-flag__svg {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
 
-.matcha-flag--payment {
-  width: 32px;
-  height: 24px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
-
-.matcha-flag--payment-lg {
-  width: 48px;
-  height: 36px;
-  border-radius: var(--matcha-radius-md, 4px);
-}
+        svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    }
 
-// ── Theme (border for visibility on dark/light) ────────────────────────────
+    // ── Set: country — 2:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="country"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="small"],
+    .matcha-flag[data-set="country"][data-size="sm"] {
+        --matcha-flag-w: 16px;
+        --matcha-flag-h: 12px;
+    }
+    .matcha-flag[data-set="country"][data-size="medium"],
+    .matcha-flag[data-set="country"][data-size="md"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="large"],
+    .matcha-flag[data-set="country"][data-size="lg"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
 
-@mixin matcha-flag-theme($theme) {
-  .matcha-flag {
-    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
-  }
+    // ── Set: payment — 4:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="payment"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="small"],
+    .matcha-flag[data-set="payment"][data-size="sm"] {
+        --matcha-flag-w: 24px;
+        --matcha-flag-h: 18px;
+    }
+    .matcha-flag[data-set="payment"][data-size="medium"],
+    .matcha-flag[data-set="payment"][data-size="md"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="large"],
+    .matcha-flag[data-set="payment"][data-size="lg"] {
+        --matcha-flag-w: 48px;
+        --matcha-flag-h: 36px;
+        border-radius: var(--matcha-radius-md, 4px);
+    }
 }