@inchurch/matcha-theme 22.14.3 → 22.14.5

package/components/matcha-button-toggle.scss

@@ -357,6 +357,15 @@ matcha-button-toggle {
     display: inline-flex;
     max-width: 100%;
 
+    // ── Label projetado (<matcha-label>) — empilha ACIMA do grupo (stacked,
+    // igual matcha-form-field). Gated por :has(> matcha-label): sem label, o
+    // host continua inline-flex row EXATAMENTE como antes (zero regressão).
+    &:has(> matcha-label) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--matcha-space-075, 6px);   // mesmo gap label↔box do matcha-form-field
+    }
+
     .button-group {
         display: flex;
         align-items: stretch;

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);
     }
 }
 

package/package.json

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