@inchurch/matcha-theme 22.36.1 → 22.36.2

package/components/matcha-button-toggle.scss

@@ -461,3 +461,24 @@ matcha-button-toggle {
         }
     }
 }
+
+// =============================================================================
+// Readonly — seleção legível, clique inerte
+// =============================================================================
+// NENHUMA troca de cor aqui, e é isso que separa `readonly` de `disabled`: o bloco
+// `&[disabled]` acima aplica os mixins `disabled-*-button` nos botões inativos, apagando
+// justamente o contraste que diz qual opção está selecionada. Numa tela cujo propósito é LER
+// esse estado, apagá-lo é o oposto do que se quer.
+//
+// O que muda é só a promessa de interação: o ponteiro deixa de sugerir clique. A inércia em si
+// mora no `onSelect` do componente, não aqui — CSS não deve ser a trava.
+matcha-button-toggle[readonly] {
+
+    .button-group {
+
+        button[matcha-button],
+        a[matcha-button] {
+            cursor: default;
+        }
+    }
+}

package/components/matcha-checkbox.scss

@@ -13,16 +13,19 @@
         }
 
         // ── Hover (off) — bg sutil surface alpha (Figma matcha/state-layer) ─
-        &:not([disabled]):hover .matcha-checkbox-container {
+        // `[readonly]` entra nas guardas de hover/active junto de `[disabled]`: nao vai
+        // acontecer nada no clique, entao prometer interacao e mentir. Mas NAO entra nas regras
+        // de COR abaixo — e justamente por isso que readonly existe: o estado continua legivel.
+        &:not([disabled]):not([readonly]):hover .matcha-checkbox-container {
             background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.04));
             box-shadow: var(--matcha-shadow-1);
         }
 
         // ── Hover/Focus quando checked/indeterminate — accent-alpha bg ─────
-        &:not([disabled]):hover :is([checked], [indeterminate]) ~ .matcha-checkbox-container,
+        &:not([disabled]):not([readonly]):hover :is([checked], [indeterminate]) ~ .matcha-checkbox-container,
         // fallback global (estado checked/indeterminate sem condicional)
-        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--checked),
-        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--indeterminate) {
+        &:not([disabled]):not([readonly]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--checked),
+        &:not([disabled]):not([readonly]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--indeterminate) {
             background: var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.1));
         }
 
@@ -67,6 +70,14 @@
         &[disabled] .matcha-checkbox-label {
             color: var(--matcha-color-disabled-fg);
         }
+
+        // ── Readonly — cursor de leitura, e NENHUMA troca de cor ───────────
+        // O ponteiro deixa de ser `pointer` porque nao ha o que acionar; o glyph e o label
+        // ficam com a cor normal, que e o ponto de usar readonly em vez de disabled.
+        &[readonly] .matcha-checkbox,
+        &[readonly] .matcha-checkbox-container {
+            cursor: default;
+        }
     }
 }
 
@@ -107,7 +118,7 @@ $matcha-checkbox-touch: 36px;
 }
 
 // Active overlay — só quando não disabled
-matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before {
+matcha-checkbox:not([disabled]):not([readonly]) .matcha-checkbox-container:active::before {
     opacity: var(--matcha-state-active);
 }
 

package/components/matcha-tooltip.scss

@@ -46,6 +46,17 @@
     }
 }
 
+// Texto do tooltip — `pre-line` respeita as quebras (`\n`) que o directive insere
+// entre os itens quando `matchaTooltip` recebe um array (1 informação por linha);
+// linhas longas ainda quebram normalmente. O alinhamento vem da custom property
+// `--matcha-tooltip-text-align` que o directive seta a partir de `matchaTooltipAlign`
+// (default center) — só é perceptível com múltiplas linhas.
+.matcha-tooltip-text {
+    white-space: pre-line;
+    overflow-wrap: anywhere;
+    text-align: var(--matcha-tooltip-text-align, 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).

package/package.json

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