@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-radio.scss

@@ -1,528 +1,320 @@
 // =============================================================================
-// matcha-radio.scss — Migração Fase 3.1
+// matcha-radio.scss — Figma DSV3 matcha/radio (14354:184)
 //
-// Mudanças em relação ao original:
-//   [3.1-A] State layer em .matcha-radio-container (replaced element: input não suporta ::before)
-//           Pattern: color: getXxx($theme) no container → currentColor funciona no ::before
-//   [3.1-B] .matcha-radio-container:hover background-color removido (substituído por state layer)
-//   [3.1-C] Ripple de paleta: // ok: ripple palette. Semântico (accent/primary/…): CSS var com fallback
-//           Semantic colors (primary/accent/success/warn/danger/info): usa CSS vars com fallback
-//   [3.1-D] :focus → removido (vazio); :focus-visible adicionado dentro do mixin ($theme disponível)
-//   [3.1-E] Disabled: opacity:0.6 + cursor:not-allowed removidos; tokens semânticos usados
-//   [3.1-F] transition: all → transition: border-color específico
-//   [3.1-G] @media (prefers-reduced-motion: reduce) adicionado
-//   [3.1-H] :not([disabled]) guards via seletor de contexto do pai
+// Estrutura visual (1:1 com Figma):
+//   .matcha-radio-wrapper (label) — flex row + gap 8px
+//     .matcha-radio-touch (span) — 36×36 pillshape, state-layer, hover bg
+//       .matcha-radio-input (input radio) — 18×18 native, dot 8×8 ::after
+//     .matcha-radio-text (span) — coluna label + desc + hint
+//
+// Color system: accent (default) + 6 semânticas (primary/success/warn/danger/info).
+// Paleta legacy Material 1 (red/pink/purple/blue/...) REMOVIDA — DSV3 não suporta.
 // =============================================================================
 
-@mixin matcha-radio($theme) {
-    matcha-radio {
-
-        // ── Sem cor: usa accent ────────────────────────────────────────────
-        &:not([color]) {
-            // [3.1-A] color no container → currentColor para o state layer
-            .matcha-radio-container {
-                color: var(--matcha-color-accent, #{getAccent($theme)});
-            }
-
-            input[type="radio"] {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-                &:active {
-                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
-                }
-
-                &:checked {
-                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
-
-                    &::after {
-                        background-color: var(--matcha-color-accent, #{getAccent($theme)});
-                    }
-                }
-            }
-
-            // [3.1-C] ripple — accent é semântico, usa CSS var com fallback
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
-            }
-        }
-
-        // ── Com cor customizada ────────────────────────────────────────────
-        &[color] {
-            input[type="radio"] {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-            }
-        }
-
-        // ── Paleta: red ────────────────────────────────────────────────────
-        &[color="red"] {
-            .matcha-radio-container { color: getRed($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getRed($theme); }
-            input[type="radio"]:checked            { border-color: getRed($theme); }
-            input[type="radio"]:checked::after     { background-color: getRed($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getRedContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: pink ───────────────────────────────────────────────────
-        &[color="pink"] {
-            .matcha-radio-container { color: getPink($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getPink($theme); }
-            input[type="radio"]:checked            { border-color: getPink($theme); }
-            input[type="radio"]:checked::after     { background-color: getPink($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getPinkContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: purple ─────────────────────────────────────────────────
-        &[color="purple"] {
-            .matcha-radio-container { color: getPurple($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getPurple($theme); }
-            input[type="radio"]:checked            { border-color: getPurple($theme); }
-            input[type="radio"]:checked::after     { background-color: getPurple($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getPurpleContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: deep-purple ────────────────────────────────────────────
-        &[color="deep-purple"] {
-            .matcha-radio-container { color: getDeepPurple($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getDeepPurple($theme); }
-            input[type="radio"]:checked            { border-color: getDeepPurple($theme); }
-            input[type="radio"]:checked::after     { background-color: getDeepPurple($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getDeepPurpleContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: indigo ─────────────────────────────────────────────────
-        &[color="indigo"] {
-            .matcha-radio-container { color: getIndigo($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getIndigo($theme); }
-            input[type="radio"]:checked            { border-color: getIndigo($theme); }
-            input[type="radio"]:checked::after     { background-color: getIndigo($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getIndigoContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: blue ───────────────────────────────────────────────────
-        &[color="blue"] {
-            .matcha-radio-container { color: getBlue($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getBlue($theme); }
-            input[type="radio"]:checked            { border-color: getBlue($theme); }
-            input[type="radio"]:checked::after     { background-color: getBlue($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getBlueContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: light-blue ─────────────────────────────────────────────
-        &[color="light-blue"] {
-            .matcha-radio-container { color: getLightBlue($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getLightBlue($theme); }
-            input[type="radio"]:checked            { border-color: getLightBlue($theme); }
-            input[type="radio"]:checked::after     { background-color: getLightBlue($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getLightBlueContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: cyan ───────────────────────────────────────────────────
-        &[color="cyan"] {
-            .matcha-radio-container { color: getCyan($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getCyan($theme); }
-            input[type="radio"]:checked            { border-color: getCyan($theme); }
-            input[type="radio"]:checked::after     { background-color: getCyan($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getCyanContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: teal ───────────────────────────────────────────────────
-        &[color="teal"] {
-            .matcha-radio-container { color: getTeal($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getTeal($theme); }
-            input[type="radio"]:checked            { border-color: getTeal($theme); }
-            input[type="radio"]:checked::after     { background-color: getTeal($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getTealContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: green ──────────────────────────────────────────────────
-        &[color="green"] {
-            .matcha-radio-container { color: getGreen($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getGreen($theme); }
-            input[type="radio"]:checked            { border-color: getGreen($theme); }
-            input[type="radio"]:checked::after     { background-color: getGreen($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getGreenContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: light-green ────────────────────────────────────────────
-        &[color="light-green"] {
-            .matcha-radio-container { color: getLightGreen($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getLightGreen($theme); }
-            input[type="radio"]:checked            { border-color: getLightGreen($theme); }
-            input[type="radio"]:checked::after     { background-color: getLightGreen($theme); }
-
-            .matcha-radio-container .ripple {
-                background: rgba(getLightGreenContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: lime ───────────────────────────────────────────────────
-        &[color="lime"] {
-            .matcha-radio-container { color: getLime($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getLime($theme); }
-            input[type="radio"]:checked            { border-color: getLime($theme); }
-            input[type="radio"]:checked::after     { background-color: getLime($theme); }
+// ── Estrutural ─────────────────────────────────────────────────────────────
 
-            .matcha-radio-container .ripple {
-                background: rgba(getLimeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
-
-        // ── Paleta: yellow ─────────────────────────────────────────────────
-        &[color="yellow"] {
-            .matcha-radio-container { color: getYellow($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getYellow($theme); }
-            input[type="radio"]:checked            { border-color: getYellow($theme); }
-            input[type="radio"]:checked::after     { background-color: getYellow($theme); }
+matcha-radio {
+    display:        inline-flex;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    cursor:         pointer;
+    font-family:    var(--matcha-font-family);
 
-            .matcha-radio-container .ripple {
-                background: rgba(getYellowContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
+    // Disabled — pointer/cursor only (cores via tokens semânticos no mixin)
+    &[disabled] {
+        pointer-events: none;
+        cursor:         default;
 
-        // ── Paleta: amber ──────────────────────────────────────────────────
-        &[color="amber"] {
-            .matcha-radio-container { color: getAmber($theme); } // [3.1-A]
+        .matcha-radio-wrapper { cursor: default; }
+    }
 
-            input[type="radio"]:active             { border-color: getAmber($theme); }
-            input[type="radio"]:checked            { border-color: getAmber($theme); }
-            input[type="radio"]:checked::after     { background-color: getAmber($theme); }
+    // Movimento reduzido (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        .matcha-radio-input,
+        .matcha-radio-touch::before { transition: none; }
+    }
+}
 
-            .matcha-radio-container .ripple {
-                background: rgba(getAmberContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
+.matcha-radio-wrapper {
+    display:        inline-flex;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    cursor:         pointer;
+    user-select:    none;
+}
 
-        // ── Paleta: orange ─────────────────────────────────────────────────
-        &[color="orange"] {
-            .matcha-radio-container { color: getOrange($theme); } // [3.1-A]
+// Quando há descrição/hint (multi-linha), volta pra align-items: flex-start
+// pra evitar que o glyph fique no meio do bloco texto.
+matcha-radio:has(.matcha-radio-description),
+matcha-radio:has(.matcha-radio-hint) {
+    .matcha-radio-wrapper { align-items: flex-start; }
+}
 
-            input[type="radio"]:active             { border-color: getOrange($theme); }
-            input[type="radio"]:checked            { border-color: getOrange($theme); }
-            input[type="radio"]:checked::after     { background-color: getOrange($theme); }
+// ── Touch target — 36×36 pillshape (Figma DSV3) ─────────────────────────────
+// Container circular grande pra área clicável extendida (WCAG 2.5.5).
+// Glyph visual continua 18×18 dentro, mas hover/click cobre 36×36.
+.matcha-radio-touch {
+    position:       relative;
+    display:        inline-flex;
+    align-items:    center;
+    justify-content: center;
+    width:          var(--matcha-radio-touch-size, 36px);
+    height:         var(--matcha-radio-touch-size, 36px);
+    flex-shrink:    0;
+    border-radius:  var(--matcha-radius-pill, 9999px);
+    overflow:       hidden;
+
+    // State layer — segue padrão DSV3 (currentColor + opacity tokenizada).
+    // currentColor herda do .matcha-radio-touch que recebe color por variante (mixin).
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor;
+        opacity:        0;
+        border-radius:  inherit;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
 
-            .matcha-radio-container .ripple {
-                background: rgba(getOrangeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
+// Hover/active state-layer — só quando NÃO disabled
+matcha-radio:not([disabled]) .matcha-radio-touch:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-radio:not([disabled]) .matcha-radio-touch:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+// ── Input radio nativo — vector 18×18 ────────────────────────────────────
+.matcha-radio-input {
+    appearance:         none;
+    -webkit-appearance: none;
+    width:              var(--matcha-radio-size, 18px);
+    height:             var(--matcha-radio-size, 18px);
+    padding:            0;
+    margin:              0;
+    border-width:       2px;
+    border-style:       solid;
+    border-radius:      50%;
+    cursor:             pointer;
+    position:           relative;
+    box-sizing:         border-box;
+    transition:         border-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, ease);
+
+    // Dot interno (checked) — 8×8 centralizado via inset
+    &:checked::after {
+        content:       '';
+        position:      absolute;
+        inset:         3px;
+        border-radius: 50%;
+    }
+}
 
-        // ── Paleta: deep-orange ────────────────────────────────────────────
-        &[color="deep-orange"] {
-            .matcha-radio-container { color: getDeepOrange($theme); } // [3.1-A]
+// ── Coluna texto (label + description + hint) ────────────────────────────
+.matcha-radio-text {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--matcha-space-025, 2px);
+    min-width:      0;
+}
 
-            input[type="radio"]:active             { border-color: getDeepOrange($theme); }
-            input[type="radio"]:checked            { border-color: getDeepOrange($theme); }
-            input[type="radio"]:checked::after     { background-color: getDeepOrange($theme); }
+// Em multi-linha (com desc/hint), aplica padding-top no text pra alinhar
+// o label com o centro vertical do glyph (touch 36px, glyph centro em 18px;
+// label-sm height 16px → padding-top 10px alinha label-center com glyph-center).
+matcha-radio:has(.matcha-radio-description) .matcha-radio-text,
+matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
+    padding-top: var(--matcha-space-150, 10px);
+}
 
-            .matcha-radio-container .ripple {
-                background: rgba(getDeepOrangeContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
+// Label — Figma matcha/text/label-sm (12/500/16) — não body-sm que é regular
+.matcha-radio-label {
+    display:     inline-flex;
+    align-items: center;
+    gap:         var(--matcha-space-050, 4px);
+    font-family: var(--matcha-font-family);
+    font-size:   var(--matcha-text-label-sm, 12px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-label-sm, 16px);
+    color:       var(--matcha-radio-label-color, var(--matcha-color-text-primary));
+    cursor:      pointer;
+    user-select: none;
+}
 
-        // ── Paleta: brown ──────────────────────────────────────────────────
-        &[color="brown"] {
-            .matcha-radio-container { color: getBrown($theme); } // [3.1-A]
+// Asterisco required — danger
+.matcha-radio-required {
+    color:       var(--matcha-color-danger);
+    font-weight: var(--matcha-weight-medium, 500);
+}
 
-            input[type="radio"]:active             { border-color: getBrown($theme); }
-            input[type="radio"]:checked            { border-color: getBrown($theme); }
-            input[type="radio"]:checked::after     { background-color: getBrown($theme); }
+// Description — caption 11/14 letter-spacing 0.3 (Figma DSV3)
+.matcha-radio-description {
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-p-tiny, 11px);
+    line-height:    var(--matcha-leading-p-tiny, 14px);
+    letter-spacing: 0.3px;
+    color:          var(--matcha-color-text-secondary);
+}
 
-            .matcha-radio-container .ripple {
-                background: rgba(getBrownContrast($theme), 0.1) !important; // ok: ripple palette
-            }
-        }
+// Hint (só em error) — danger
+.matcha-radio-hint {
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-p-tiny, 11px);
+    line-height:    var(--matcha-leading-p-tiny, 14px);
+    letter-spacing: 0.3px;
+    color:          var(--matcha-color-danger);
+}
 
-        // ── Paleta: grey ───────────────────────────────────────────────────
-        &[color="grey"] {
-            .matcha-radio-container { color: getGrey($theme); } // [3.1-A]
+// =============================================================================
+// Theme mixin — cores por variante (accent default + 6 semânticas DSV3)
+// Paleta Material 1 (red/pink/purple/...) REMOVIDA — não faz parte do DSV3.
+// =============================================================================
 
-            input[type="radio"]:active             { border-color: getGrey($theme); }
-            input[type="radio"]:checked            { border-color: getGrey($theme); }
-            input[type="radio"]:checked::after     { background-color: getGrey($theme); }
+@mixin matcha-radio($theme) {
+    matcha-radio {
 
-            .matcha-radio-container .ripple {
-                background: rgba(getGreyContrast($theme), 0.1) !important; // ok: ripple palette
+        // ── Default (sem [color]) e [color="accent"] = accent ─────────────────
+        &:not([color]),
+        &[color="accent"] {
+            .matcha-radio-touch {
+                color: var(--matcha-color-accent);
             }
-        }
 
-        // ── Paleta: blue-grey ──────────────────────────────────────────────
-        &[color="blue-grey"] {
-            .matcha-radio-container { color: getBlueGrey($theme); } // [3.1-A]
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
 
-            input[type="radio"]:active             { border-color: getBlueGrey($theme); }
-            input[type="radio"]:checked            { border-color: getBlueGrey($theme); }
-            input[type="radio"]:checked::after     { background-color: getBlueGrey($theme); }
+                &:checked {
+                    border-color: var(--matcha-color-accent);
 
-            .matcha-radio-container .ripple {
-                background: rgba(getBlueGreyContrast($theme), 0.1) !important; // ok: ripple palette
+                    &::after {
+                        background-color: var(--matcha-color-accent);
+                    }
+                }
             }
         }
 
-        // ── Semântica: primary ─────────────────────────────────────────────
+        // ── primary ────────────────────────────────────────────────────────
         &[color="primary"] {
-            .matcha-radio-container { color: var(--matcha-color-primary, #{getPrimary($theme)}); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-            input[type="radio"]:checked            { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-            input[type="radio"]:checked::after     { background-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
-
-            // [3.1-C] semantic: CSS var com fallback SCSS
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-primary-contrast-alpha, #{getPrimaryContrastAlpha($theme)}) !important;
-            }
-        }
-
-        // ── Semântica: accent ──────────────────────────────────────────────
-        &[color="accent"] {
-            .matcha-radio-container { color: var(--matcha-color-accent, #{getAccent($theme)}); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-            input[type="radio"]:checked            { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-            input[type="radio"]:checked::after     { background-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
+            .matcha-radio-touch { color: var(--matcha-color-primary); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                &:checked {
+                    border-color: var(--matcha-color-primary);
+                    &::after { background-color: var(--matcha-color-primary); }
+                }
             }
         }
 
-        // ── Semântica: success ─────────────────────────────────────────────
+        // ── success ────────────────────────────────────────────────────────
         &[color="success"] {
-            .matcha-radio-container { color: getSuccess($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getSuccess($theme); }
-            input[type="radio"]:checked            { border-color: getSuccess($theme); }
-            input[type="radio"]:checked::after     { background-color: getSuccess($theme); }
-
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-success-contrast-alpha, #{getSuccessContrastAlpha($theme)}) !important;
+            .matcha-radio-touch { color: var(--matcha-color-success); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                &:checked {
+                    border-color: var(--matcha-color-success);
+                    &::after { background-color: var(--matcha-color-success); }
+                }
             }
         }
 
-        // ── Semântica: warn ────────────────────────────────────────────────
+        // ── warn ───────────────────────────────────────────────────────────
         &[color="warn"] {
-            .matcha-radio-container { color: getWarn($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getWarn($theme); }
-            input[type="radio"]:checked            { border-color: getWarn($theme); }
-            input[type="radio"]:checked::after     { background-color: getWarn($theme); }
-
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-warn-contrast-alpha, #{getWarnContrastAlpha($theme)}) !important;
+            .matcha-radio-touch { color: var(--matcha-color-warn); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                &:checked {
+                    border-color: var(--matcha-color-warn);
+                    &::after { background-color: var(--matcha-color-warn); }
+                }
             }
         }
 
-        // ── Semântica: danger ──────────────────────────────────────────────
+        // ── danger ─────────────────────────────────────────────────────────
         &[color="danger"] {
-            .matcha-radio-container { color: getDanger($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getDanger($theme); }
-            input[type="radio"]:checked            { border-color: getDanger($theme); }
-            input[type="radio"]:checked::after     { background-color: getDanger($theme); }
-
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-danger-contrast-alpha, #{getDangerContrastAlpha($theme)}) !important;
+            .matcha-radio-touch { color: var(--matcha-color-danger); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                &:checked {
+                    border-color: var(--matcha-color-danger);
+                    &::after { background-color: var(--matcha-color-danger); }
+                }
             }
         }
 
-        // ── Semântica: info ────────────────────────────────────────────────
+        // ── info ───────────────────────────────────────────────────────────
         &[color="info"] {
-            .matcha-radio-container { color: getInfo($theme); } // [3.1-A]
-
-            input[type="radio"]:active             { border-color: getInfo($theme); }
-            input[type="radio"]:checked            { border-color: getInfo($theme); }
-            input[type="radio"]:checked::after     { background-color: getInfo($theme); }
-
-            .matcha-radio-container .ripple {
-                background: var(--matcha-color-info-contrast-alpha, #{getInfoContrastAlpha($theme)}) !important;
+            .matcha-radio-touch { color: var(--matcha-color-info); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                &:checked {
+                    border-color: var(--matcha-color-info);
+                    &::after { background-color: var(--matcha-color-info); }
+                }
             }
         }
 
-        // ── Error state (aligned with Figma State=Error) ──────────────────
+        // ── Error state (Figma DSV3 State=Error) — sobrescreve cor do glyph ──
         &.matcha-radio-error,
-        &[error] {
-            input[type="radio"] {
-                border-color: var(--matcha-color-danger, #{getDanger($theme)});
-
-                &:checked {
-                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+        &[error="true"] {
+            .matcha-radio-input {
+                border-color: var(--matcha-color-danger) !important;
 
-                    &::after {
-                        background-color: var(--matcha-color-danger, #{getDanger($theme)});
-                    }
+                &:checked::after {
+                    background-color: var(--matcha-color-danger) !important;
                 }
             }
         }
 
-        // ── [3.1-D] Disabled — tokens semânticos (sem opacity no host) ─────
+        // ── Disabled (Figma DSV3 opacity 0.5) ────────────────────────────────
         &[disabled] {
-            input[type="radio"] {
-                border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-            }
+            opacity: var(--matcha-opacity-option-disabled, 0.5);
 
-            // Container recebe cor de disabled para que currentColor do state layer seja correto
-            // (state layer já está bloqueado por pointer-events, mas garante visual consistente)
-            .matcha-radio-container {
-                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            .matcha-radio-input {
+                border-color: var(--matcha-color-interaction-disabled-fg);
             }
 
-            .matcha-radio-label {
-                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            .matcha-radio-label,
+            .matcha-radio-description,
+            .matcha-radio-hint {
+                color: var(--matcha-color-interaction-disabled-fg);
             }
         }
 
-        // ── [3.1-D] :focus-visible — DEVE ficar no mixin (precisa de #{getForeground($theme)}) ──
-        // Aplica no container circular (o foco é visível ali, não no input oculto)
-        .matcha-radio-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);
+        // ── Focused — outline 2px primary no touch (não desloca layout) ──────
+        .matcha-radio-input:focus-visible {
+            outline: none;
         }
-
-        // Label padrão (preservado do original)
-        .matcha-radio-label {
-            color: getGrey($theme);
+        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
+            outline:        var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
+            outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
         }
     }
 }
 
-
-// =============================================================================
-// Bloco estrutural — fora do mixin de tema
-// =============================================================================
-
-// [3.1-A] Container do radio recebe o state layer
-// input[type="radio"] é replaced element — ::before não renderiza nele
-// O container (.matcha-radio-container) é a área clicável circular
-.matcha-radio-container {
-    position:      relative;
-    overflow:      hidden;
-    border-radius: 50%;    // área de hover circular (Material Design radio pattern)
-
-    // State layer — segue INTERACTION-SYSTEM.md template
-    &::before {
-        content:        '';
-        position:       absolute;
-        inset:          0;
-        background:     currentColor; // usa color: getXxx($theme) definido no mixin por variante
-        opacity:        0;
-        border-radius:  inherit;
-        pointer-events: none;
-        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-}
-
-// [3.1-H] Hover/active: [disabled] está em matcha-radio (pai), não no container
-// Seletor de contexto do pai evita ativar o state layer quando desabilitado
-matcha-radio:not([disabled]) .matcha-radio-container:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
-matcha-radio:not([disabled]) .matcha-radio-container:active::before { opacity: var(--matcha-state-active, 0.12); }
-
-matcha-radio {
-    display:     inline-flex;
-    align-items: center;
-    gap:         8px;
-    cursor:      pointer;
-
-    input[type="radio"] {
-        appearance:         none;
-        -webkit-appearance: none;
-        width:              var(--matcha-radio-size, 18px);
-        height:             var(--matcha-radio-size, 18px);
-        padding:            0;
-        margin:             0;
-        border-radius:      50%;
-        border-width:       2px;
-        border-style:       solid;
-        cursor:             pointer;
-        position:           relative;
-
-        // [3.1-F] transition específico (não 'all')
-        transition:         border-color 0.2s ease;
-
-        // outline: none REMOVIDO — :focus-visible no mixin garante acessibilidade
-        // &:focus {} REMOVIDO — estava vazio (WCAG 2.4.7)
-
-        &:checked::after {
-            content:       '';
-            position:      absolute;
-            left:          3px;
-            top:           3px;
-            width:         8px;
-            height:        8px;
-            border-radius: 50%;
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-radio {
+        .matcha-radio-circle {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
         }
-    }
-
-    // Figma matcha/radio label: 12px Medium line 16 (weight 500, diferente do checkbox 400)
-    .matcha-radio-label {
-        font-size:   var(--matcha-text-body-sm, 12px);
-        font-weight: var(--matcha-weight-medium, 500);
-        line-height: var(--matcha-leading-body-sm, 16px);
-        user-select: none;
-        cursor:      pointer;
-    }
 
-    // [3.1-E] Disabled — sem opacity no host, sem cursor: not-allowed
-    // pointer-events: none é suficiente para bloquear interação
-    // Cores gerenciadas pelo mixin via tokens semânticos
-    &[disabled] {
-        pointer-events: none;
-        cursor:         default;
+        &.is-checked .matcha-radio-circle::after,
+        &[checked] .matcha-radio-circle::after {
+            background: Highlight !important;
+        }
 
-        input[type="radio"] {
-            // cursor: not-allowed REMOVIDO (pointer-events: none o torna ineficaz)
+        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
+            outline: 2px solid CanvasText !important;
         }
 
-        .matcha-radio-label {
-            cursor: default;
+        &.is-disabled,
+        &[disabled] {
+            opacity: 0.5;
+            .matcha-radio-circle { border-color: GrayText !important; }
         }
     }
+}
 
-    // [3.1-G] Movimento reduzido — obrigatório (WCAG 2.3.3)
-    @media (prefers-reduced-motion: reduce) {
-        input[type="radio"] { transition: none; }
-
-        .matcha-radio-container::before { transition: none; }
+// ── Print ──
+@media print {
+    matcha-radio .matcha-radio-circle {
+        border: 1px solid currentColor !important;
     }
 }