@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-checkbox.scss

@@ -1,467 +1,99 @@
 // =============================================================================
-// matcha-checkbox.scss — Migração Fase 3.1
-//
-// Segue o mesmo padrão do matcha-radio.scss migrado.
-// Diferenças em relação ao radio:
-//   - input:checked preenche background (não apenas border)
-//   - estado :indeterminate adicional
-//   - ::after no input é checkmark (borda rotacionada), não círculo
-//   - .matcha-checkbox-container (análogo a .matcha-radio-container)
-//
-// Mudanças:
-//   [3.1-A] State layer em .matcha-checkbox-container (replaced element pattern)
-//   [3.1-B] background-color: rgba() removido; color: getXxx($theme) no container
-//   [3.1-C] Ripple de paleta: // ok: ripple palette. Semântico (accent/primary/…): CSS var com fallback
-//   [3.1-D] :focus-visible no mixin; :focus vazio removido
-//   [3.1-E] Disabled: opacity:0.6 + cursor:not-allowed removidos; tokens semânticos
-//   [3.1-F] transition: all → border-color específico
-//   [3.1-G] @media (prefers-reduced-motion: reduce) adicionado
-//   [3.1-H] :not([disabled]) via seletor de contexto do pai
+// matcha-checkbox.scss — Figma DSV3 matcha/checkbox (628fe66922)
+// Touch target 36×36 pill + SVG glyph 24×24 (off / checked / indeterminate).
+// Input nativo sr-only mantém a11y; visual via SVG inline no template.
 // =============================================================================
 
 @mixin matcha-checkbox($theme) {
     matcha-checkbox {
-
-        // ── Sem cor: usa accent ────────────────────────────────────────────
-        &:not([color]) {
-            .matcha-checkbox-container {
-                color: var(--matcha-color-accent, #{getAccent($theme)}); // [3.1-A]
-            }
-
-            input[type="checkbox"] {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-                &:active {
-                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
-                }
-
-                &:checked {
-                    background-color: var(--matcha-color-accent, #{getAccent($theme)});
-                    border-color:     var(--matcha-color-accent, #{getAccent($theme)});
-
-                    &::after {
-                        border-color: getAccentContrast($theme);
-                    }
-                }
-
-                &:indeterminate {
-                    background-color: getGrey($theme);
-                    border-color:     getGrey($theme);
-
-                    &::after {
-                        background-color: getGreyContrast($theme);
-                    }
-                }
-            }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
-            }
-        }
-
-        // ── Com cor customizada ────────────────────────────────────────────
-        &[color] {
-            input[type="checkbox"] {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-                &:indeterminate {
-                    background-color: getGrey($theme);
-                    border-color:     getGrey($theme);
-
-                    &::after {
-                        background-color: getGreyContrast($theme);
-                    }
-                }
-            }
-        }
-
-        // ── Paleta: red ────────────────────────────────────────────────────
-        &[color="red"] {
-            .matcha-checkbox-container { color: getRed($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getRed($theme); }
-            input[type="checkbox"]:checked            { background-color: getRed($theme); border-color: getRed($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getRedContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getRedContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: pink ───────────────────────────────────────────────────
-        &[color="pink"] {
-            .matcha-checkbox-container { color: getPink($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getPink($theme); }
-            input[type="checkbox"]:checked            { background-color: getPink($theme); border-color: getPink($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getPinkContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getPinkContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: purple ─────────────────────────────────────────────────
-        &[color="purple"] {
-            .matcha-checkbox-container { color: getPurple($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getPurple($theme); }
-            input[type="checkbox"]:checked            { background-color: getPurple($theme); border-color: getPurple($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getPurpleContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getPurpleContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: deep-purple ────────────────────────────────────────────
-        &[color="deep-purple"] {
-            .matcha-checkbox-container { color: getDeepPurple($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getDeepPurple($theme); }
-            input[type="checkbox"]:checked            { background-color: getDeepPurple($theme); border-color: getDeepPurple($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getDeepPurpleContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getDeepPurpleContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: indigo ─────────────────────────────────────────────────
-        &[color="indigo"] {
-            .matcha-checkbox-container { color: getIndigo($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getIndigo($theme); }
-            input[type="checkbox"]:checked            { background-color: getIndigo($theme); border-color: getIndigo($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getIndigoContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getIndigoContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: blue ───────────────────────────────────────────────────
-        &[color="blue"] {
-            .matcha-checkbox-container { color: getBlue($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getBlue($theme); }
-            input[type="checkbox"]:checked            { background-color: getBlue($theme); border-color: getBlue($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getBlueContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getBlueContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: light-blue ─────────────────────────────────────────────
-        &[color="light-blue"] {
-            .matcha-checkbox-container { color: getLightBlue($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getLightBlue($theme); }
-            input[type="checkbox"]:checked            { background-color: getLightBlue($theme); border-color: getLightBlue($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getLightBlueContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getLightBlueContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: cyan ───────────────────────────────────────────────────
-        &[color="cyan"] {
-            .matcha-checkbox-container { color: getCyan($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getCyan($theme); }
-            input[type="checkbox"]:checked            { background-color: getCyan($theme); border-color: getCyan($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getCyanContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getCyanContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: teal ───────────────────────────────────────────────────
-        &[color="teal"] {
-            .matcha-checkbox-container { color: getTeal($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getTeal($theme); }
-            input[type="checkbox"]:checked            { background-color: getTeal($theme); border-color: getTeal($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getTealContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getTealContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: green ──────────────────────────────────────────────────
-        &[color="green"] {
-            .matcha-checkbox-container { color: getGreen($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getGreen($theme); }
-            input[type="checkbox"]:checked            { background-color: getGreen($theme); border-color: getGreen($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getGreenContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getGreenContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: light-green ────────────────────────────────────────────
-        &[color="light-green"] {
-            .matcha-checkbox-container { color: getLightGreen($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getLightGreen($theme); }
-            input[type="checkbox"]:checked            { background-color: getLightGreen($theme); border-color: getLightGreen($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getLightGreenContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getLightGreenContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: lime ───────────────────────────────────────────────────
-        &[color="lime"] {
-            .matcha-checkbox-container { color: getLime($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getLime($theme); }
-            input[type="checkbox"]:checked            { background-color: getLime($theme); border-color: getLime($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getLimeContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getLimeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: yellow ─────────────────────────────────────────────────
-        &[color="yellow"] {
-            .matcha-checkbox-container { color: getYellow($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getYellow($theme); }
-            input[type="checkbox"]:checked            { background-color: getYellow($theme); border-color: getYellow($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getYellowContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getYellowContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: amber ──────────────────────────────────────────────────
-        &[color="amber"] {
-            .matcha-checkbox-container { color: getAmber($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getAmber($theme); }
-            input[type="checkbox"]:checked            { background-color: getAmber($theme); border-color: getAmber($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getAmberContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getAmberContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: orange ─────────────────────────────────────────────────
-        &[color="orange"] {
-            .matcha-checkbox-container { color: getOrange($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getOrange($theme); }
-            input[type="checkbox"]:checked            { background-color: getOrange($theme); border-color: getOrange($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getOrangeContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getOrangeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: deep-orange ────────────────────────────────────────────
-        &[color="deep-orange"] {
-            .matcha-checkbox-container { color: getDeepOrange($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getDeepOrange($theme); }
-            input[type="checkbox"]:checked            { background-color: getDeepOrange($theme); border-color: getDeepOrange($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getDeepOrangeContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getDeepOrangeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: brown ──────────────────────────────────────────────────
-        &[color="brown"] {
-            .matcha-checkbox-container { color: getBrown($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getBrown($theme); }
-            input[type="checkbox"]:checked            { background-color: getBrown($theme); border-color: getBrown($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getBrownContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getBrownContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: grey ───────────────────────────────────────────────────
-        &[color="grey"] {
-            .matcha-checkbox-container { color: getGrey($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getGrey($theme); }
-            input[type="checkbox"]:checked            { background-color: getGrey($theme); border-color: getGrey($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getGreyContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getGreyContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: blue-grey ──────────────────────────────────────────────
-        &[color="blue-grey"] {
-            .matcha-checkbox-container { color: getBlueGrey($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getBlueGrey($theme); }
-            input[type="checkbox"]:checked            { background-color: getBlueGrey($theme); border-color: getBlueGrey($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getBlueGreyContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: rgba(getBlueGreyContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Semântica: primary ─────────────────────────────────────────────
-        &[color="primary"] {
-            .matcha-checkbox-container { color: var(--matcha-color-primary, #{getPrimary($theme)}); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-            input[type="checkbox"]:checked            { background-color: var(--matcha-color-primary, #{getPrimary($theme)}); border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-            input[type="checkbox"]:checked::after     { border-color: getPrimaryContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-primary-contrast-alpha, #{getPrimaryContrastAlpha($theme)}) !important;
-            }
+        // ── Off state — glyph cinza (icon-default) ─────────────────────────
+        // Default applies to all colors (vector unchecked é sempre cinza).
+        .matcha-checkbox-icon--outline {
+            color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
         }
 
-        // ── Semântica: accent ──────────────────────────────────────────────
-        &[color="accent"] {
-            .matcha-checkbox-container { color: var(--matcha-color-accent, #{getAccent($theme)}); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-            input[type="checkbox"]:checked            { background-color: var(--matcha-color-accent, #{getAccent($theme)}); border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-            input[type="checkbox"]:checked::after     { border-color: getAccentContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
-            }
+        // ── Hover (off) — bg sutil surface alpha (Figma matcha/state-layer) ─
+        &:not([disabled]):hover .matcha-checkbox-container {
+            background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.04));
+            box-shadow: var(--matcha-shadow-1);
         }
 
-        // ── Semântica: success ─────────────────────────────────────────────
-        &[color="success"] {
-            .matcha-checkbox-container { color: getSuccess($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getSuccess($theme); }
-            input[type="checkbox"]:checked            { background-color: getSuccess($theme); border-color: getSuccess($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getSuccessContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-success-contrast-alpha, #{getSuccessContrastAlpha($theme)}) !important;
-            }
+        // ── Hover/Focus quando checked/indeterminate — accent-alpha bg ─────
+        &:not([disabled]):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) {
+            background: var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.1));
         }
 
-        // ── Semântica: warn ────────────────────────────────────────────────
-        &[color="warn"] {
-            .matcha-checkbox-container { color: getWarn($theme); } // [3.1-A]
-
-            input[type="checkbox"]:active             { border-color: getWarn($theme); }
-            input[type="checkbox"]:checked            { background-color: getWarn($theme); border-color: getWarn($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getWarnContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-warn-contrast-alpha, #{getWarnContrastAlpha($theme)}) !important;
-            }
+        // ── Focus visible — border 2px info (Figma) ────────────────────────
+        .matcha-checkbox-container:has(input:focus-visible) {
+            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-info, #{getInfo($theme)});
         }
 
-        // ── Semântica: danger ──────────────────────────────────────────────
-        &[color="danger"] {
-            .matcha-checkbox-container { color: getDanger($theme); } // [3.1-A]
+        // ── Cores per-color: checked + indeterminate fill = a cor escolhida
+        // O .matcha-checkbox-icon--outline ignora color (sempre cinza).
 
-            input[type="checkbox"]:active             { border-color: getDanger($theme); }
-            input[type="checkbox"]:checked            { background-color: getDanger($theme); border-color: getDanger($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getDangerContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-danger-contrast-alpha, #{getDangerContrastAlpha($theme)}) !important;
-            }
-        }
+        // Sem [color]: accent
+        &:not([color]) .matcha-checkbox-icon--checked,
+        &:not([color]) .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent, #{getAccent($theme)}); }
 
-        // ── Semântica: info ────────────────────────────────────────────────
-        &[color="info"] {
-            .matcha-checkbox-container { color: getInfo($theme); } // [3.1-A]
+        // Semântica
+        &[color="accent"]  .matcha-checkbox-icon--checked,
+        &[color="accent"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent, #{getAccent($theme)}); }
+        &[color="primary"] .matcha-checkbox-icon--checked,
+        &[color="primary"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+        &[color="success"] .matcha-checkbox-icon--checked,
+        &[color="success"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+        &[color="warn"]    .matcha-checkbox-icon--checked,
+        &[color="warn"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-warn, #{getWarn($theme)}); }
+        &[color="danger"]  .matcha-checkbox-icon--checked,
+        &[color="danger"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+        &[color="info"]    .matcha-checkbox-icon--checked,
+        &[color="info"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-info, #{getInfo($theme)}); }
 
-            input[type="checkbox"]:active             { border-color: getInfo($theme); }
-            input[type="checkbox"]:checked            { background-color: getInfo($theme); border-color: getInfo($theme); }
-            input[type="checkbox"]:checked::after     { border-color: getInfoContrast($theme); }
-
-            .matcha-checkbox-container .ripple {
-                background: var(--matcha-color-info-contrast-alpha, #{getInfoContrastAlpha($theme)}) !important;
-            }
-        }
-
-        // ── Error state (aligned with Figma State=Error) ──────────────────
+        // ── Error state — glyph fica danger (override em outline, checked, indeterminate)
         &.matcha-checkbox-error,
         &[error] {
-            input[type="checkbox"] {
-                border-color: var(--matcha-color-danger, #{getDanger($theme)});
-
-                &:checked {
-                    background-color: var(--matcha-color-danger, #{getDanger($theme)});
-                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
-                }
-            }
+            .matcha-checkbox-icon { color: var(--matcha-color-danger, #{getDanger($theme)}); }
         }
 
-        // ── [3.1-E] Disabled — tokens semânticos ──────────────────────────
-        &[disabled] {
-            input[type="checkbox"] {
-                border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-
-                &:checked {
-                    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-                    border-color:     var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-
-                    &::after {
-                        border-color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-                    }
-                }
-            }
-
-            .matcha-checkbox-container {
-                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-            }
-
-            .matcha-checkbox-label {
-                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
-            }
-        }
+        // ── Disabled — opacity reduzida (host) ─────────────────────────────
+        &[disabled] .matcha-checkbox-icon { color: var(--matcha-color-icon-default, #{getBlueGrey($theme)}); }
 
-        // ── [3.1-D] :focus-visible — DEVE ficar no mixin ──────────────────
-        .matcha-checkbox-container:focus-within {
-            outline:        var(--matcha-state-focus-ring-width, 2px) solid
-                            var(--matcha-color-primary, #{getPrimary($theme)});
-            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-        }
+        // Label colors
+        .matcha-checkbox-label { color: var(--matcha-checkbox-label-color, var(--matcha-color-text-primary, #{getForeground($theme)})); }
 
-        // Label padrão (preservado do original)
-        .matcha-checkbox-label {
-            color: getGrey($theme);
+        &[disabled] .matcha-checkbox-label {
+            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
         }
     }
 }
 
-
 // =============================================================================
 // Bloco estrutural — fora do mixin de tema
+// Spec Figma matcha/checkbox: touch target 36×36 pill, SVG glyph 24×24 inset.
 // =============================================================================
 
-// [3.1-A] Container recebe o state layer (mesmo pattern do radio)
-.matcha-checkbox-container {
-    position:      relative;
-    overflow:      hidden;
-    border-radius: 50%;    // área de hover circular
+// Touch target pill 36×36 — Figma spec, sem token genérico equivalente
+$matcha-checkbox-touch: 36px;
 
+// Touch target — pill com state layer (hover halo + active overlay)
+.matcha-checkbox-container {
+    position:        relative;
+    display:         inline-flex;
+    align-items:     center;
+    justify-content: center;
+    width:           $matcha-checkbox-touch;
+    height:          $matcha-checkbox-touch;
+    flex-shrink:     0;
+    border-radius:   var(--matcha-radius-pill);
+    overflow:        hidden;
+    transition:
+        background-color var(--matcha-duration-instant) var(--matcha-easing-standard),
+        box-shadow       var(--matcha-duration-instant) var(--matcha-easing-standard);
+
+    // State layer ::before — halo translúcido pra hover/active
     &::before {
         content:        '';
         position:       absolute;
@@ -470,85 +102,154 @@
         opacity:        0;
         border-radius:  inherit;
         pointer-events: none;
-        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+        transition:     opacity var(--matcha-duration-instant) linear;
     }
 }
 
-// [3.1-H] Seletor de contexto do pai — [disabled] está em matcha-checkbox, não no container
-matcha-checkbox:not([disabled]) .matcha-checkbox-container:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
-matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before { opacity: var(--matcha-state-active, 0.12); }
+// Active overlay — só quando não disabled
+matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before {
+    opacity: var(--matcha-state-active);
+}
 
 matcha-checkbox {
-    display:     inline-flex;
-    align-items: center;
-    gap:         var(--matcha-space-100, 8px);
-    cursor:      pointer;
+    display: inline-block;  // host wrapper — sem flex próprio (label faz layout)
+    cursor:  pointer;
+
+    // Label interno controla o layout horizontal (touch target + texto).
+    // align-items: center centraliza visualmente o LABEL com o glyph 24×24
+    // do touch target. Description/hint fluem abaixo via column do .matcha-checkbox-text.
+    > .matcha-checkbox {
+        display:     inline-flex;
+        align-items: center;
+        gap:         var(--matcha-space-100);
+        cursor:      pointer;
+    }
 
+    // Input nativo — sr-only (semântica + sincroniza estado, sem visual próprio)
     input[type="checkbox"] {
-        appearance:         none;
-        -webkit-appearance: none;
-        width:              var(--matcha-checkbox-size, 18px);
-        height:             var(--matcha-checkbox-size, 18px);
-        padding:            0;
-        border-radius:      var(--matcha-radius-md, 4px);
-        border-width:       var(--matcha-border-thin, 2px);
-        border-style:       solid;
-        cursor:             pointer;
-        position:           relative;
-
-        // [3.1-F] transition específico (não 'all')
-        transition:         border-color 0.2s ease, background-color 0.2s ease;
-
-        // outline: none REMOVIDO — :focus-visible no mixin garante acessibilidade
-        // &:focus {} REMOVIDO — estava vazio (WCAG 2.4.7)
-
-        // Checkmark glyph: valores pixel-level s\u00e3o geometria do desenho
-        // dentro da caixa 16px (n\u00e3o tokens sem\u00e2nticos por natureza)
-        &:checked::after {
-            content:      '';
-            position:     absolute;
-            left:         var(--matcha-space-050, 4px);
-            top:          0;
-            width:        5px;  // glyph
-            height:       10px; // glyph
-            border-style: solid;
-            border-width: 0 var(--matcha-border-thin, 2px) var(--matcha-border-thin, 2px) 0;
-            transform:    rotate(45deg);
-        }
+        position:    absolute;
+        width:       var(--matcha-border-hairline);
+        height:      var(--matcha-border-hairline);
+        padding:     0;
+        margin:      calc(-1 * var(--matcha-border-hairline));
+        overflow:    hidden;
+        clip:        rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border:      0;
+    }
 
-        &:indeterminate::after {
-            content:  '';
-            position: absolute;
-            left:     3px; // glyph
-            top:      7px; // glyph
-            width:    var(--matcha-space-100, 8px);
-            height:   var(--matcha-border-thin, 2px);
-        }
+    // SVG glyph — 24×24 dentro do touch target 36×36 (centralizado por flex)
+    .matcha-checkbox-icon {
+        width:          24px; // Figma matcha/icon size canonical
+        height:         24px;
+        flex-shrink:    0;
+        pointer-events: none;
+        transition:     color var(--matcha-duration-fast) var(--matcha-easing-standard);
     }
 
-    // Figma matcha/checkbox label: 12px Regular line 16 (matcha/color/text/primary)
+    // Label column — gap 2 entre label/description/hint. Sem padding-top
+    // (centralização vem do align-items:center do flex pai).
+    .matcha-checkbox-text {
+        display:        flex;
+        flex-direction: column;
+        gap:            var(--matcha-space-025);
+        min-width:      0;
+    }
+
+    // Label — Figma matcha/text/body-sm (12/16 Regular)
     .matcha-checkbox-label {
-        font-size:   var(--matcha-text-body-sm, 12px);
-        font-weight: var(--matcha-weight-regular, 400);
-        line-height: var(--matcha-leading-body-sm, 16px);
+        font-family: var(--matcha-font-family);
+        font-size:   var(--matcha-text-body-sm);
+        font-weight: var(--matcha-weight-regular);
+        line-height: var(--matcha-leading-body-sm);
         user-select: none;
         cursor:      pointer;
     }
 
-    // [3.1-E] Disabled — sem opacity no host, sem cursor: not-allowed
+    // Asterisco de required — danger color, espaçamento sutil
+    .matcha-checkbox-required {
+        color:        var(--matcha-color-danger);
+        margin-left:  var(--matcha-space-025);
+        user-select:  none;
+    }
+
+    // Description — Figma matcha/text/caption (11/14 Regular text-secondary)
+    .matcha-checkbox-description {
+        font-family:    var(--matcha-font-family);
+        font-size:      var(--matcha-text-p-tiny);
+        font-weight:    var(--matcha-weight-regular);
+        line-height:    var(--matcha-leading-p-tiny);
+        letter-spacing: var(--matcha-letter-spacing-caption);
+        color:          var(--matcha-color-text-secondary);
+        user-select:    none;
+    }
+
+    // Hint text — Figma matcha/text/caption (11/14). Cor secondary por default,
+    // vira danger quando o host tem error (.matcha-checkbox-error).
+    .matcha-checkbox-hint {
+        font-family:    var(--matcha-font-family);
+        font-size:      var(--matcha-text-p-tiny);
+        font-weight:    var(--matcha-weight-regular);
+        line-height:    var(--matcha-leading-p-tiny);
+        letter-spacing: var(--matcha-letter-spacing-caption);
+        color:          var(--matcha-color-text-secondary);
+        user-select:    none;
+    }
+    // Error state: hint danger + glyph danger (override em todos os 3 SVGs)
+    .matcha-checkbox-error {
+        .matcha-checkbox-hint { color: var(--matcha-color-danger); }
+        .matcha-checkbox-icon { color: var(--matcha-color-danger); }
+    }
+
+    // Disabled — opacity 0.5 (Figma) + bloqueio de pointer events
     &[disabled] {
         pointer-events: none;
         cursor:         default;
+        opacity:        var(--matcha-opacity-secondary); // 0.54 ≈ Figma 0.5
 
-        .matcha-checkbox-label {
-            cursor: default;
-        }
+        .matcha-checkbox-label { cursor: default; }
     }
 
-    // [3.1-G] Movimento reduzido — obrigatório (WCAG 2.3.3)
+    // Reduced motion (WCAG 2.3.3)
     @media (prefers-reduced-motion: reduce) {
-        input[type="checkbox"] { transition: none; }
+        .matcha-checkbox-container,
+        .matcha-checkbox-container::before,
+        .matcha-checkbox-icon { transition: none; }
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+    matcha-checkbox {
+        .matcha-checkbox-box {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
+        }
+
+        &.is-checked .matcha-checkbox-box,
+        &[checked] .matcha-checkbox-box {
+            background: Highlight !important;
+            border-color: Highlight !important;
+        }
+
+        &:focus-visible .matcha-checkbox-box {
+            outline: 2px solid CanvasText !important;
+            outline-offset: 2px;
+        }
+
+        &.is-disabled,
+        &[disabled] {
+            opacity: 0.5;
+
+            .matcha-checkbox-box { border-color: GrayText !important; }
+        }
+    }
+}
 
-        .matcha-checkbox-container::before { transition: none; }
+// ── Print ──
+// Checkbox preserva estado (form value matter em papel).
+@media print {
+    matcha-checkbox .matcha-checkbox-box {
+        border: 1px solid currentColor !important;
     }
 }