@inchurch/matcha-theme 22.14.4 → 22.15.0

package/components/matcha-form-field.scss

@@ -349,10 +349,22 @@
         height: 100%;
     }
 
+    // Suffix costuma agrupar mais de uma info (contador de caracteres + ícone de
+    // status/erro) — 8px de respiro entre elas. Regra global (sem ::ng-deep): o
+    // host do <matcha-suffix> tem class .matcha-form-field-suffix e vive dentro do
+    // matcha-form-field. O display:inline-flex vem do component scss.
+    .matcha-form-field-suffix {
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    // @deprecated `.matcha-suffix` (div avulsa) — use o componente <matcha-suffix>
+    // (host `.matcha-form-field-suffix`), que já traz o gap de 8px entre múltiplas
+    // infos. Mantido só por retrocompat; migrar consumidores e remover numa próxima major.
     .matcha-suffix {
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
+        gap: var(--matcha-space-100, 8px);
     }
 }
 
@@ -418,8 +430,10 @@ matcha-form-field[readonly="true"] .matcha-form-field {
 // ── Char counter (injetado via Renderer2 pelo matchaCharCounter directive) ──
 // Figma matcha/field/textarea: body-sm 12/16, text-secondary, align right.
 // Precisa ser global (sem ngcontent) porque o span vem de fora da view do form-field.
-.matcha-form-field-wrapper > .matcha-char-counter {
-    align-self: flex-end;
+// IN-40430 (painel): a tipografia vale pra QUALQUER host do counter — quando o span
+// caía fora do .matcha-form-field-wrapper (textarea/usos legados), ficava sem estilo
+// e herdava fonte maior que o próprio texto do campo.
+.matcha-char-counter {
     font-family: var(--matcha-font-family);
     font-size: var(--matcha-text-body-sm, 12px);
     font-weight: var(--matcha-weight-regular, 400);
@@ -429,6 +443,10 @@ matcha-form-field[readonly="true"] .matcha-form-field {
     margin: 0;
     padding: 0;
     user-select: none;
+}
+
+.matcha-form-field-wrapper > .matcha-char-counter {
+    align-self: flex-end;
     transition: color var(--matcha-duration-fast, 200ms) ease;
 
     // 3 níveis visuais (0-89% = neutro, 90-99% = warn, 100%+ = danger).

package/components/matcha-progress-bar.scss

@@ -286,7 +286,8 @@ matcha-progress-bar[type="segmented"] {
     matcha-progress-bar {
         .progress-fill { transition: none; }
         .progress-indeterminate,
-        .progress-indeterminate::before { animation: none; }
+        .progress-indeterminate::before,
+        .progress-indeterminate::after { animation: none; }
         .progress-segment { transition: none; }
     }
 }
@@ -294,7 +295,7 @@ matcha-progress-bar[type="segmented"] {
 // ── Forced colors ──
 @media (forced-colors: active) {
     matcha-progress-bar {
-        .progress-track {
+        .progress {
             background: Canvas !important;
             border: 1px solid CanvasText !important;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.14.4",
+  "version": "22.15.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {