@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-slide-toggle.scss

@@ -1,369 +1,369 @@
-// =============================================================================
-// matcha-slide-toggle.scss — Migração Fase 3.1
-//
-// Template B: replaced element com child container
-//   - input[type="checkbox"] é replaced element (::before/::after são pseudo-elementos
-//     internos do browser para track/thumb, não suportam state layer externo)
-//   - label é o container hit area → recebe o state layer (::before)
-//   - Pattern: color: getXxx($theme) no label → currentColor funciona no ::before
-//
-// Mudanças:
-//   [3.1-A] State layer em label (container do replaced element)
-//   [3.1-B] cursor: not-allowed + opacity no .matcha-slide-toggle-disabled removidos
-//   [3.1-C] Disabled: tokens semânticos no mixin
-//   [3.1-D] :focus-within no mixin (foco está no input dentro do label)
-//   [3.1-E] transition: all → transições específicas
-//   [3.1-F] @media (prefers-reduced-motion: reduce) adicionado
-//   [3.1-G] :not([disabled]) guards via seletor de contexto do pai
-// =============================================================================
-
-@mixin matcha-slide-toggle-theme($theme) {
-    matcha-slide-toggle {
-        // Figma matcha/switch (14510:226): track off sem fill + stroke text-label, thumb off text-primary
-        input[type="checkbox"] {
-            &::before {
-                background-color: transparent;
-                border-color: var(--matcha-color-text-label);
-            }
-
-            &::after {
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                background-color: var(--matcha-color-text-primary);
-            }
-        }
-
-        // ── Sem cor / accent ───────────────────────────────────────────────
-        &:not([color]),
-        &[color="accent"] {
-            // [3.1-A] color no label → currentColor para o state layer
-            label {
-                color: var(--matcha-color-accent);
-            }
-
-            input[type="checkbox"] {
-                &:checked {
-                    &::before {
-                        background-color: var(--matcha-color-accent);
-                        border-color: var(--matcha-color-accent);
-                    }
-
-                    &::after {
-                        background-color: var(--matcha-color-accent-contrast);
-                    }
-                }
-            }
-        }
-
-        // ── Semântica: primary ─────────────────────────────────────────────
-        &[color="primary"] {
-            label { color: var(--matcha-color-primary); } // [3.1-A]
-
-            input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-primary);
-                border-color: var(--matcha-color-primary);
-            }
-
-            input[type="checkbox"]:checked::after {
-                background-color: var(--matcha-color-primary-contrast);
-            }
-        }
-
-        // ── Semântica: success ─────────────────────────────────────────────
-        &[color="success"] {
-            label { color: var(--matcha-color-success); } // [3.1-A]
-
-            input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-success);
-                border-color: var(--matcha-color-success);
-            }
-
-            input[type="checkbox"]:checked::after {
-                background-color: var(--matcha-color-success-contrast);
-            }
-        }
-
-        // ── Semântica: warn ────────────────────────────────────────────────
-        &[color="warn"] {
-            label { color: var(--matcha-color-warn); } // [3.1-A]
-
-            input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-warn);
-                border-color: var(--matcha-color-warn);
-            }
-
-            input[type="checkbox"]:checked::after {
-                background-color: var(--matcha-color-warn-contrast);
-            }
-        }
-
-        // ── Semântica: danger ──────────────────────────────────────────────
-        &[color="danger"] {
-            label { color: var(--matcha-color-danger); } // [3.1-A]
-
-            input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-danger);
-                border-color: var(--matcha-color-danger);
-            }
-
-            input[type="checkbox"]:checked::after {
-                background-color: var(--matcha-color-danger-contrast);
-            }
-        }
-
-        // ── Semântica: info ────────────────────────────────────────────────
-        &[color="info"] {
-            label { color: var(--matcha-color-info); } // [3.1-A]
-
-            input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-info);
-                border-color: var(--matcha-color-info);
-            }
-
-            input[type="checkbox"]:checked::after {
-                background-color: var(--matcha-color-info-contrast);
-            }
-        }
-
-        // ── Error state (aligned with Figma State=Error) ──────────────────
-        &.matcha-slide-toggle-error,
-        &[error] {
-            input[type="checkbox"] {
-                &::before {
-                    border-color: var(--matcha-color-danger);
-                }
-
-                &:checked::before {
-                    background-color: var(--matcha-color-danger);
-                    border-color: var(--matcha-color-danger);
-                }
-            }
-        }
-
-        // ── Loading state (aligned with Figma State=Loading) ────────────────
-        &.matcha-slide-toggle-loading,
-        &[loading] {
-            pointer-events: none;
-
-            input[type="checkbox"]::after {
-                animation: matcha-toggle-loading 800ms linear infinite;
-            }
-        }
-
-        // ── [3.1-C] Disabled — tokens semânticos (sem opacity no host) ─────
-        &[disabled] {
-            label {
-                color: var(--matcha-color-disabled-fg);
-            }
-
-            input[type="checkbox"] {
-                &::before {
-                    background-color: var(--matcha-color-disabled-bg);
-                    border-color:     var(--matcha-color-disabled-bg);
-                }
-
-                &::after {
-                    background-color: var(--matcha-color-disabled-fg);
-                }
-            }
-        }
-
-        // Focus ring: só em navegação por teclado (não mostra em clique com mouse).
-        // :has(input:focus-visible) — apenas mostra outline quando o input interno
-        // tem focus-visible (keyboard nav), não em :focus geral (mouse click).
-        label:has(input:focus-visible) {
-            outline:        var(--matcha-state-focus-ring-width, 2px) solid
-                            var(--matcha-color-primary);
-            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-        }
-
-        // Label padrão — Figma: text-primary. Slot pra consumer override.
-        .matcha-slide-toggle-label {
-            color: var(--matcha-slide-toggle-label-color, var(--matcha-color-text-primary));
-        }
-    }
-}
-
-
-// =============================================================================
-// Bloco estrutural — fora do mixin de tema
-// =============================================================================
-
-// [3.1-A] label recebe o state layer
-// input[type="checkbox"] é replaced element — state layer externo vai no container (label)
-matcha-slide-toggle label {
-    position:   relative;
-    overflow:   hidden;
-
-    // State layer — segue INTERACTION-SYSTEM.md template B
-    &::before {
-        content:        '';
-        position:       absolute;
-        inset:          0;
-        background:     currentColor; // herda o color (var(--matcha-color-*)) definido por variante
-        opacity:        0;
-        pointer-events: none;
-        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-}
-
-// [3.1-G] Hover/active: [disabled] está em matcha-slide-toggle (pai), não no label
-// Seletor de contexto do pai evita ativar o state layer quando desabilitado
-matcha-slide-toggle:not([disabled]) label:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
-matcha-slide-toggle:not([disabled]) label:active::before { opacity: var(--matcha-state-active, 0.12); }
-
-matcha-slide-toggle {
-    label {
-        display:                    inline-flex;
-        align-items:                center;
-        gap:                        var(--matcha-space-100, 8px); // Figma: gap 8 entre switch e content
-        cursor:                     pointer;
-        -webkit-tap-highlight-color: transparent;
-        vertical-align:             middle;
-
-        .matcha-slide-toggle-label {
-            font-family: var(--matcha-font-family, 'Manrope', sans-serif);
-            font-size:   var(--matcha-text-body-md, 14px);
-            line-height: 20px;
-            font-weight: 400;
-            user-select: none;
-        }
-    }
-
-    // [3.1-B] Disabled — sem cursor: not-allowed, sem opacity no host
-    // pointer-events: none bloqueia interação; cores via tokens no mixin
-    &[disabled] {
-        pointer-events: none;
-
-        label {
-            cursor: default;
-        }
-    }
-
-    input[type="checkbox"] {
-        appearance:         none;
-        -webkit-appearance: none;
-        position:           relative;
-        display:            inline-block;
-        width:              36px;
-        height:             20px;
-        margin:             0;
-        outline:            none;
-        cursor:             pointer;
-        vertical-align:     middle;
-        min-width:          36px;  // garante que não fique < 36px
-        flex-shrink:        0;     // se estiver dentro de um container flex
-
-        &::before {
-            content:       "";
-            position:      absolute;
-            top:           50%;
-            left:          0;
-            transform:     translateY(-50%);
-            width:         100%;
-            height:        20px;
-            border-width:  2px;
-            border-style:  solid;
-            border-radius: var(--matcha-radius-xl, 16px);
-            box-sizing:    border-box;
-
-            // [3.1-E] transition específico (não 'all')
-            transition:    background-color 0.15s linear;
-        }
-
-        // Figma matcha/switch: thumb 12×12 off → 16×16 on (14510:226)
-        &::after {
-            content:       "";
-            position:      absolute;
-            top:           4px;
-            left:          4px;
-            width:         12px;
-            height:        12px;
-            border-radius: 50%;
-
-            transition:
-                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                left 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                background-color 0.15s linear,
-                outline 0.1s ease-out;
-        }
-
-        &:checked {
-            &::after {
-                top:       2px;
-                left:      2px;
-                width:     16px;
-                height:    16px;
-                transform: translateX(16px);  // desliza 16px (36 - 16 - 2×2 = 16)
-            }
-        }
-
-        &:focus-visible::after {
-            outline-offset: 2px;
-        }
-    }
-
-    // ── Loading animation ──
-    @keyframes matcha-toggle-loading {
-        0%   { opacity: 1; }
-        50%  { opacity: 0.4; }
-        100% { opacity: 1; }
-    }
-
-    // [3.1-F] Movimento reduzido — obrigatório (WCAG 2.3.3)
-    @media (prefers-reduced-motion: reduce) {
-        input[type="checkbox"] {
-            &::before { transition: none; }
-            &::after  { transition: none; animation: none; }
-        }
-
-        label::before { transition: none; }
-    }
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    matcha-slide-toggle,
-    .matcha-slide-toggle {
-        input[type="checkbox"] {
-            // Track
-            &::before {
-                background: Canvas !important;
-                border: 1px solid CanvasText !important;
-            }
-
-            // Thumb
-            &::after {
-                background: ButtonFace !important;
-                border: 1px solid CanvasText !important;
-            }
-
-            &:checked::before {
-                background: Highlight !important;
-                border-color: Highlight !important;
-            }
-
-            &:focus-visible::before {
-                outline: 2px solid CanvasText !important;
-                outline-offset: 2px;
-            }
-
-            &:disabled::before,
-            &:disabled::after {
-                border-color: GrayText !important;
-            }
-        }
-    }
-}
-
-// ── Print ──
-@media print {
-    matcha-slide-toggle,
-    .matcha-slide-toggle {
-        input[type="checkbox"] {
-            &::before { border: 1px solid currentColor !important; }
-        }
-    }
-}
+// =============================================================================
+// matcha-slide-toggle.scss — Migração Fase 3.1
+//
+// Template B: replaced element com child container
+//   - input[type="checkbox"] é replaced element (::before/::after são pseudo-elementos
+//     internos do browser para track/thumb, não suportam state layer externo)
+//   - label é o container hit area → recebe o state layer (::before)
+//   - Pattern: color: getXxx($theme) no label → currentColor funciona no ::before
+//
+// Mudanças:
+//   [3.1-A] State layer em label (container do replaced element)
+//   [3.1-B] cursor: not-allowed + opacity no .matcha-slide-toggle-disabled removidos
+//   [3.1-C] Disabled: tokens semânticos no mixin
+//   [3.1-D] :focus-within no mixin (foco está no input dentro do label)
+//   [3.1-E] transition: all → transições específicas
+//   [3.1-F] @media (prefers-reduced-motion: reduce) adicionado
+//   [3.1-G] :not([disabled]) guards via seletor de contexto do pai
+// =============================================================================
+
+@mixin matcha-slide-toggle-theme($theme) {
+    matcha-slide-toggle {
+        // Figma matcha/switch (14510:226): track off sem fill + stroke text-label, thumb off text-primary
+        input[type="checkbox"] {
+            &::before {
+                background-color: transparent;
+                border-color: var(--matcha-color-text-label);
+            }
+
+            &::after {
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                background-color: var(--matcha-color-text-primary);
+            }
+        }
+
+        // ── Sem cor / accent ───────────────────────────────────────────────
+        &:not([color]),
+        &[color="accent"] {
+            // [3.1-A] color no label → currentColor para o state layer
+            label {
+                color: var(--matcha-color-accent);
+            }
+
+            input[type="checkbox"] {
+                &:checked {
+                    &::before {
+                        background-color: var(--matcha-color-accent);
+                        border-color: var(--matcha-color-accent);
+                    }
+
+                    &::after {
+                        background-color: var(--matcha-color-accent-contrast);
+                    }
+                }
+            }
+        }
+
+        // ── Semântica: primary ─────────────────────────────────────────────
+        &[color="primary"] {
+            label { color: var(--matcha-color-primary); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-primary);
+                border-color: var(--matcha-color-primary);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: var(--matcha-color-primary-contrast);
+            }
+        }
+
+        // ── Semântica: success ─────────────────────────────────────────────
+        &[color="success"] {
+            label { color: var(--matcha-color-success); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-success);
+                border-color: var(--matcha-color-success);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: var(--matcha-color-success-contrast);
+            }
+        }
+
+        // ── Semântica: warn ────────────────────────────────────────────────
+        &[color="warn"] {
+            label { color: var(--matcha-color-warn); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-warn);
+                border-color: var(--matcha-color-warn);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: var(--matcha-color-warn-contrast);
+            }
+        }
+
+        // ── Semântica: danger ──────────────────────────────────────────────
+        &[color="danger"] {
+            label { color: var(--matcha-color-danger); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-danger);
+                border-color: var(--matcha-color-danger);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: var(--matcha-color-danger-contrast);
+            }
+        }
+
+        // ── Semântica: info ────────────────────────────────────────────────
+        &[color="info"] {
+            label { color: var(--matcha-color-info); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-info);
+                border-color: var(--matcha-color-info);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: var(--matcha-color-info-contrast);
+            }
+        }
+
+        // ── Error state (aligned with Figma State=Error) ──────────────────
+        &.matcha-slide-toggle-error,
+        &[error] {
+            input[type="checkbox"] {
+                &::before {
+                    border-color: var(--matcha-color-danger);
+                }
+
+                &:checked::before {
+                    background-color: var(--matcha-color-danger);
+                    border-color: var(--matcha-color-danger);
+                }
+            }
+        }
+
+        // ── Loading state (aligned with Figma State=Loading) ────────────────
+        &.matcha-slide-toggle-loading,
+        &[loading] {
+            pointer-events: none;
+
+            input[type="checkbox"]::after {
+                animation: matcha-toggle-loading 800ms linear infinite;
+            }
+        }
+
+        // ── [3.1-C] Disabled — tokens semânticos (sem opacity no host) ─────
+        &[disabled] {
+            label {
+                color: var(--matcha-color-disabled-fg);
+            }
+
+            input[type="checkbox"] {
+                &::before {
+                    background-color: var(--matcha-color-disabled-bg);
+                    border-color:     var(--matcha-color-disabled-bg);
+                }
+
+                &::after {
+                    background-color: var(--matcha-color-disabled-fg);
+                }
+            }
+        }
+
+        // Focus ring: só em navegação por teclado (não mostra em clique com mouse).
+        // :has(input:focus-visible) — apenas mostra outline quando o input interno
+        // tem focus-visible (keyboard nav), não em :focus geral (mouse click).
+        label:has(input:focus-visible) {
+            outline:        var(--matcha-state-focus-ring-width, 2px) solid
+                            var(--matcha-color-primary);
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+
+        // Label padrão — Figma: text-primary. Slot pra consumer override.
+        .matcha-slide-toggle-label {
+            color: var(--matcha-slide-toggle-label-color, var(--matcha-color-text-primary));
+        }
+    }
+}
+
+
+// =============================================================================
+// Bloco estrutural — fora do mixin de tema
+// =============================================================================
+
+// [3.1-A] label recebe o state layer
+// input[type="checkbox"] é replaced element — state layer externo vai no container (label)
+matcha-slide-toggle label {
+    position:   relative;
+    overflow:   hidden;
+
+    // State layer — segue INTERACTION-SYSTEM.md template B
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor; // herda o color (var(--matcha-color-*)) definido por variante
+        opacity:        0;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
+
+// [3.1-G] Hover/active: [disabled] está em matcha-slide-toggle (pai), não no label
+// Seletor de contexto do pai evita ativar o state layer quando desabilitado
+matcha-slide-toggle:not([disabled]) label:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-slide-toggle:not([disabled]) label:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+matcha-slide-toggle {
+    label {
+        display:                    inline-flex;
+        align-items:                center;
+        gap:                        var(--matcha-space-100, 8px); // Figma: gap 8 entre switch e content
+        cursor:                     pointer;
+        -webkit-tap-highlight-color: transparent;
+        vertical-align:             middle;
+
+        .matcha-slide-toggle-label {
+            font-family: var(--matcha-font-family, 'Manrope', sans-serif);
+            font-size:   var(--matcha-text-body-md, 14px);
+            line-height: 20px;
+            font-weight: 400;
+            user-select: none;
+        }
+    }
+
+    // [3.1-B] Disabled — sem cursor: not-allowed, sem opacity no host
+    // pointer-events: none bloqueia interação; cores via tokens no mixin
+    &[disabled] {
+        pointer-events: none;
+
+        label {
+            cursor: default;
+        }
+    }
+
+    input[type="checkbox"] {
+        appearance:         none;
+        -webkit-appearance: none;
+        position:           relative;
+        display:            inline-block;
+        width:              36px;
+        height:             20px;
+        margin:             0;
+        outline:            none;
+        cursor:             pointer;
+        vertical-align:     middle;
+        min-width:          36px;  // garante que não fique < 36px
+        flex-shrink:        0;     // se estiver dentro de um container flex
+
+        &::before {
+            content:       "";
+            position:      absolute;
+            top:           50%;
+            left:          0;
+            transform:     translateY(-50%);
+            width:         100%;
+            height:        20px;
+            border-width:  2px;
+            border-style:  solid;
+            border-radius: var(--matcha-radius-xl, 16px);
+            box-sizing:    border-box;
+
+            // [3.1-E] transition específico (não 'all')
+            transition:    background-color 0.15s linear;
+        }
+
+        // Figma matcha/switch: thumb 12×12 off → 16×16 on (14510:226)
+        &::after {
+            content:       "";
+            position:      absolute;
+            top:           4px;
+            left:          4px;
+            width:         12px;
+            height:        12px;
+            border-radius: 50%;
+
+            transition:
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                left 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.15s linear,
+                outline 0.1s ease-out;
+        }
+
+        &:checked {
+            &::after {
+                top:       2px;
+                left:      2px;
+                width:     16px;
+                height:    16px;
+                transform: translateX(16px);  // desliza 16px (36 - 16 - 2×2 = 16)
+            }
+        }
+
+        &:focus-visible::after {
+            outline-offset: 2px;
+        }
+    }
+
+    // ── Loading animation ──
+    @keyframes matcha-toggle-loading {
+        0%   { opacity: 1; }
+        50%  { opacity: 0.4; }
+        100% { opacity: 1; }
+    }
+
+    // [3.1-F] Movimento reduzido — obrigatório (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        input[type="checkbox"] {
+            &::before { transition: none; }
+            &::after  { transition: none; animation: none; }
+        }
+
+        label::before { transition: none; }
+    }
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-slide-toggle,
+    .matcha-slide-toggle {
+        input[type="checkbox"] {
+            // Track
+            &::before {
+                background: Canvas !important;
+                border: 1px solid CanvasText !important;
+            }
+
+            // Thumb
+            &::after {
+                background: ButtonFace !important;
+                border: 1px solid CanvasText !important;
+            }
+
+            &:checked::before {
+                background: Highlight !important;
+                border-color: Highlight !important;
+            }
+
+            &:focus-visible::before {
+                outline: 2px solid CanvasText !important;
+                outline-offset: 2px;
+            }
+
+            &:disabled::before,
+            &:disabled::after {
+                border-color: GrayText !important;
+            }
+        }
+    }
+}
+
+// ── Print ──
+@media print {
+    matcha-slide-toggle,
+    .matcha-slide-toggle {
+        input[type="checkbox"] {
+            &::before { border: 1px solid currentColor !important; }
+        }
+    }
+}