@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-form-field.scss

@@ -1,606 +1,606 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "../tokens/breakpoints-tokens" as *;
-// =============================================================================
-// matcha-form-field.scss — Theme mixin (stacked pattern, Figma matcha/field/_base)
-// Border colors vêm do data-color (component SCSS). Theme mixin cuida de:
-//   - tipografia do input (size por breakpoint)
-//   - placeholder color
-//   - disabled text color
-// =============================================================================
-
-// ── Structural (inputs) — sem border, sem bg (box wraps) ────────────────────
-
-// ─── Filhos projetáveis do form-field ────────────────────────────────────
-// Todos os tipos de input que podem ser projetados DEVEM preencher o espaço
-// disponível e herdar padding/border/bg do wrapper externo (.matcha-form-field).
-// O componente filho NÃO deve ter padding/border próprio quando dentro do field.
-.matcha-form-field {
-    input,
-    input[type="text"],
-    input[type="email"],
-    input[type="tel"],
-    input[type="url"],
-    input[type="password"],
-    input[type="number"],
-    input[type="search"],
-    input[type="date"],
-    input[type="time"],
-    textarea {
-        flex: 1 1 auto;
-        width: 100%;
-        min-width: 0;
-        min-height: 0;          // evita que altura natural do input expanda o container
-        background-color: transparent;
-        outline: none;
-        box-shadow: none;
-        border: none;
-        padding: 0;             // wrapper fornece padding horizontal
-        margin: 0;
-        font-family: var(--matcha-font-family);
-        font-size: var(--matcha-font-size-sm, 14px);           // Figma MD placeholder/value 14/400/20
-        font-weight: var(--matcha-weight-regular, 400);
-        line-height: var(--matcha-leading-body-md, 20px);
-        color: var(--matcha-color-text-primary);               // Figma filled value: #E8EAED dark / #0E1116 light
-        resize: none;
-
-        &:disabled {
-            color: var(--matcha-color-interaction-disabled-fg);
-            -webkit-text-fill-color: var(--matcha-color-interaction-disabled-fg);  // Safari override
-        }
-    }
-
-    // Textarea ocupa TODA a altura disponível do wrapper (que é column mode).
-    // Quando `matchaAutoGrow` está ligado, a directive aplica `.matcha-autogrow`
-    // e controla altura via JS — o override abaixo solta o 100% forçado.
-    textarea {
-        height: 100%;
-        min-height: 100%;
-        align-self: stretch;
-
-        &.matcha-autogrow {
-            height: auto;        // directive calcula e seta inline
-            min-height: 0;       // flex: 1 já garante piso via wrapper min-height
-        }
-    }
-
-    // ── Scrollbar estilizada no textarea (Webkit + Firefox) ──────────────────
-    // Usa tokens do DS em vez do scrollbar nativo cinza feio do Chrome/Windows.
-    // Aplica tanto no textarea "rows fixo" (se user passar rows pequeno + muito texto)
-    // quanto no `.matcha-autogrow` depois de atingir `maxRows`.
-    textarea {
-        scrollbar-width: thin;                                          // Firefox
-        scrollbar-color: var(--matcha-color-text-placeholder)
-                         transparent;                                   // thumb + track
-
-        &::-webkit-scrollbar              { width: 6px; height: 6px; }
-        &::-webkit-scrollbar-track        { background: transparent; }
-        &::-webkit-scrollbar-thumb {
-            background: var(--matcha-color-text-placeholder);
-            border-radius: var(--matcha-radius-pill, 999px);
-        }
-        &::-webkit-scrollbar-thumb:hover  { background: var(--matcha-color-text-secondary); }
-    }
-
-    input:focus,
-    textarea:focus {
-        outline: none;
-    }
-
-    // Truncate: quando o campo é menor que placeholder/value, corta com ellipsis
-    // Evita overflow feio em sidebars, colunas estreitas, responsive mobile.
-    input {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-
-        // Placeholder também trunca (Chrome/Safari precisam do ::placeholder explícito)
-        &::placeholder {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-    }
-
-    // ── Autofill (Chrome/Safari) — mata o background amarelo/azul e usa os tokens ──
-    // Browsers injetam background-color inline no -webkit-autofill (prioridade sobre CSS normal).
-    // O workaround padrão: box-shadow inset transparente (não sobreposto) + text-fill-color pro texto.
-    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de re-aplicar o bg.
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-webkit-autofill:active,
-    textarea:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
-        -webkit-text-fill-color: var(--matcha-color-text-primary) !important;
-        caret-color: var(--matcha-color-primary) !important;
-        transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
-    }
-
-    // Caret color (cursor piscando) = primary pra match com focus border
-    input,
-    textarea {
-        caret-color: var(--matcha-color-primary);
-    }
-
-    // Selection highlight (quando user seleciona texto) — usa token de primary com alpha
-    input::selection,
-    textarea::selection {
-        background: var(--matcha-color-primary-alpha);
-        color: var(--matcha-color-text-primary);
-    }
-
-    // Componentes projetados — todos preenchem a largura e não adicionam borda/padding próprio
-    matcha-select,
-    matcha-autocomplete,
-    matcha-date,
-    matcha-field-range,
-    matcha-time,
-    matcha-phone {
-        flex: 1 1 auto;
-        width: 100%;
-        min-width: 0;
-        display: flex;
-        align-items: center;
-        background: transparent;
-        border: none;
-        padding: 0;
-    }
-
-    // matcha-phone: padding/bg próprios do componente quebram o layout dentro do field
-    matcha-phone .matcha-phone {
-        padding: 0;
-        background: transparent;
-        font-size: inherit;
-        width: 100%;
-    }
-
-    // matcha-date/time: container do componente preenche o espaço sem padding/border próprios
-    matcha-date .matcha-date-container,
-    matcha-time .matcha-time-container {
-        width: 100%;
-        background: transparent;
-        border: none;
-        padding: 0;
-        min-width: 0;
-        gap: var(--matcha-space-100, 8px);
-    }
-
-    // ── matchaPasswordToggle: botão do olho injetado ao lado de input[type="password"] ──
-    // Figma matcha/field/password: ícone 16/20/24 por size, cor text-placeholder (#9AA0A6)
-    .matcha-password-toggle-button {
-        flex: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;                                                        // SM default
-        height: 16px;
-        padding: 0;
-        margin: 0;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        color: var(--matcha-color-text-placeholder);                        // #9AA0A6
-        transition: color var(--matcha-duration-fast, 200ms) ease;
-
-        &:hover:not(:disabled) {
-            color: var(--matcha-color-text-primary);
-        }
-
-        &:disabled {
-            cursor: not-allowed;
-            color: var(--matcha-color-interaction-disabled-fg);
-        }
-
-        &:focus { outline: none; }
-        &:focus-visible {
-            outline: 2px solid var(--matcha-color-primary);
-            outline-offset: 2px;
-            border-radius: var(--matcha-radius-md, 4px);
-        }
-
-        > [class^="i-matcha-"],
-        > [class*=" i-matcha-"] {
-            font-size: inherit !important;
-            width: 1em !important;
-            height: 1em !important;
-            line-height: 1 !important;
-            color: inherit !important;
-        }
-    }
-
-    // ── matchaQuantityStepper: wrapper flex-row + dois botões (−/+) ──────
-    // Figma matcha/field/quantity: gap 4, ícones 16px constante, cor #9AA0A6
-    .matcha-quantity-stepper {
-        flex: none;
-        display: inline-flex;
-        align-items: center;
-        gap: var(--matcha-space-050, 4px);
-    }
-
-    .matcha-quantity-stepper-button {
-        flex: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;                                        // Figma: constante 16px em todos os sizes
-        height: 16px;
-        padding: 0;
-        margin: 0;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        color: var(--matcha-color-text-placeholder);        // #9AA0A6
-        transition: color var(--matcha-duration-fast, 200ms) ease;
-
-        &:hover:not(:disabled) {
-            color: var(--matcha-color-text-primary);
-        }
-
-        &:disabled {
-            cursor: not-allowed;
-            color: var(--matcha-color-interaction-disabled-fg);
-        }
-
-        &:focus { outline: none; }
-        &:focus-visible {
-            outline: 2px solid var(--matcha-color-primary);
-            outline-offset: 2px;
-            border-radius: var(--matcha-radius-md, 4px);
-        }
-
-        > [class^="i-matcha-"],
-        > [class*=" i-matcha-"] {
-            font-size: 16px !important;
-            width: 16px !important;
-            height: 16px !important;
-            line-height: 1 !important;
-            color: inherit !important;
-        }
-    }
-
-    // Esconde spinner nativo (Figma usa botões customizados)
-    input[type="number"][matchaQuantityStepper] {
-        -moz-appearance: textfield;
-        appearance: textfield;
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            appearance: none;
-            margin: 0;
-        }
-    }
-
-    // Esconde botão × nativo do Chrome/Safari em input[type="search"]
-    // (o matchaClearButton directive injeta nosso próprio — não duplicar)
-    input[type="search"] {
-        &::-webkit-search-cancel-button,
-        &::-webkit-search-decoration,
-        &::-webkit-search-results-button,
-        &::-webkit-search-results-decoration {
-            -webkit-appearance: none;
-            appearance: none;
-            display: none;
-        }
-    }
-
-    // ── matchaClearButton: botão × ao lado de search/text ────────────────
-    // Figma-consistent: 16/20/24 por size, cor text-placeholder
-    .matcha-clear-button {
-        flex: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px; height: 16px;
-        padding: 0;
-        // margin-left: auto empurra o × pro final do flex row, imune a irmãos
-        // invisíveis (ng-content placeholders, matcha-autocomplete host que
-        // acaba como sibling quando projetado via matcha-field, etc).
-        margin: 0 0 0 auto;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        color: var(--matcha-color-text-placeholder);
-        transition: color var(--matcha-duration-fast, 200ms) ease;
-        position: relative;
-
-        &:hover:not(:disabled) { color: var(--matcha-color-text-primary); }
-
-        &:focus { outline: none; }
-        &:focus-visible {
-            outline: 2px solid var(--matcha-color-primary);
-            outline-offset: 2px;
-            border-radius: var(--matcha-radius-md, 4px);
-        }
-
-        > [class^="i-matcha-"],
-        > [class*=" i-matcha-"] {
-            font-size: 16px !important;
-            width: 16px !important; height: 16px !important;
-            line-height: 1 !important;
-            color: inherit !important;
-        }
-    }
-
-    // matchaCharCounter removido daqui — agora é irmão do .matcha-form-field
-    // (vive no wrapper), estilizado fora deste bloco pra funcionar em qualquer size.
-    // Nota: estilo precisa ser GLOBAL (este arquivo) porque o span é injetado via
-    // Renderer2 sem _ngcontent — CSS scoped do Emulated não matcha.
-
-    // ── Loading spinner no suffix do field ────────────────────────────────
-    .matcha-form-field-spinner {
-        flex: none;
-        display: inline-block;
-        width: 16px; height: 16px;
-        border: 2px solid var(--matcha-color-surface-border);
-        border-top-color: var(--matcha-color-primary);
-        border-radius: 50%;
-        animation: matcha-spin 800ms linear infinite;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation-duration: 2000ms;
-        }
-    }
-
-    // Select trigger ocupa altura total do form-field (clique abre dropdown em qualquer ponto)
-    matcha-select,
-    .matcha-select-container,
-    .matcha-select-trigger {
-        height: 100%;
-    }
-
-    .matcha-suffix {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-    }
-}
-
-// ─── Password toggle: tamanho do ícone por size do form-field ──────────────
-// (Figma matcha/field/password: SM 16 · MD 20 · LG 24)
-matcha-form-field[size="md"] .matcha-password-toggle-button,
-matcha-form-field[size="medium"] .matcha-password-toggle-button {
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-}
-
-matcha-form-field[size="lg"] .matcha-password-toggle-button,
-matcha-form-field[size="large"] .matcha-password-toggle-button,
-matcha-form-field[size="huge"] .matcha-password-toggle-button {
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-}
-
-// ── Spinner keyframes ────────────────────────────────────────────────────
-@keyframes matcha-spin {
-    to { transform: rotate(360deg); }
-}
-
-// ── Readonly state ───────────────────────────────────────────────────────
-// Visual mais sutil que disabled: texto legível, selecionável, copiável.
-// Diferença vs disabled: cor normal do texto (não muted) + cursor `text` no input
-// (sinaliza "você pode selecionar e copiar"), enquanto disabled = not-allowed.
-matcha-form-field[readonly="true"] .matcha-form-field {
-    background: var(--matcha-color-surface-bg);
-
-    input, textarea {
-        cursor: text;          // nativo do input — reforça que texto é selecionável
-        user-select: text;     // explícito pra evitar reset acidental
-    }
-
-    // Remove hover border change (não é editável, hover não deve sugerir edição)
-    &:hover { border-color: var(--matcha-color-surface-border); }
-}
-
-// ── Touch targets (WCAG 2.5.5: 44x44 mínimo em coarse pointers) ─────────
-// Expande hit area sem mudar visual (pseudo-element overlay).
-@media (pointer: coarse) {
-    .matcha-password-toggle-button,
-    .matcha-quantity-stepper-button,
-    .matcha-clear-button,
-    matcha-date .matcha-date-picker-button,
-    matcha-time .matcha-time-picker-button,
-    matcha-field-range .matcha-field-range-button,
-    matcha-phone .matcha-phone-country {
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            inset: -14px;                  // expande 14px em cada lado = 44x44 total (16 + 14*2)
-            // invisível, mas capturavel — só expande o hit area
-        }
-    }
-}
-
-// ── Char counter (injetado via Renderer2 pelo matchaCharCounter directive) ──
-// Figma matcha/field/textarea: body-sm 12/16, text-secondary, align right.
-// Precisa ser global (sem ngcontent) porque o span vem de fora da view do form-field.
-.matcha-form-field-wrapper > .matcha-char-counter {
-    align-self: flex-end;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-sm, 12px);
-    font-weight: var(--matcha-weight-regular, 400);
-    line-height: var(--matcha-leading-body-sm, 16px);
-    color: var(--matcha-color-text-secondary);
-    text-align: right;
-    margin: 0;
-    padding: 0;
-    user-select: none;
-    transition: color var(--matcha-duration-fast, 200ms) ease;
-
-    // 3 níveis visuais (0-89% = neutro, 90-99% = warn, 100%+ = danger).
-    // `is-near-limit` é aplicado a partir de 90%; `is-at-limit` sobrepõe a partir de 100%.
-    &.is-near-limit:not(.is-at-limit) {
-        color: var(--matcha-color-warn);
-    }
-
-    &.is-at-limit {
-        color: var(--matcha-color-danger);
-        font-weight: var(--matcha-weight-semibold, 600);
-    }
-}
-
-// ── Caps Lock hint (injetado pelo matchaCapsLockHint em input[type="password"]) ──
-// Renderiza abaixo do field, mesmo nível do char counter. Usa cor warn (amarelo/laranja)
-// pra sinalizar risco sem ser erro (user pode estar digitando intencionalmente).
-.matcha-form-field-wrapper > .matcha-caps-lock-hint {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--matcha-space-050, 4px);
-    align-self: flex-start;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-sm, 12px);
-    font-weight: var(--matcha-weight-regular, 400);
-    line-height: var(--matcha-leading-body-sm, 16px);
-    color: var(--matcha-color-warn);
-    margin-top: var(--matcha-space-050, 4px);
-    user-select: none;
-
-    > [class^="i-matcha-"] {
-        font-size: 14px;
-        line-height: 14px;
-    }
-}
-
-// ── Responsive size classes (aligned with Figma SM/MD/LG) ───────────────────
-
-@mixin generate-matcha-form-field-size-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-
-            &[size#{$infix}="sm"],
-            &[size#{$infix}="tiny"],
-            &[size#{$infix}="small"] {
-                .matcha-form-field input,
-                .matcha-form-field textarea {
-                    font-size: var(--matcha-text-body-sm, 12px);
-                    line-height: var(--matcha-leading-body-sm, 16px);
-                }
-            }
-
-            &[size#{$infix}="md"],
-            &[size#{$infix}="medium"] {
-                .matcha-form-field input,
-                .matcha-form-field textarea {
-                    font-size: var(--matcha-font-size-sm, 14px);
-                    line-height: var(--matcha-leading-body-md, 20px);
-                }
-            }
-
-            &[size#{$infix}="lg"],
-            &[size#{$infix}="large"],
-            &[size#{$infix}="huge"] {
-                .matcha-form-field input,
-                .matcha-form-field textarea {
-                    font-size: var(--matcha-font-size-md, 16px);
-                    line-height: var(--matcha-leading-body-lg, 24px);
-                }
-            }
-        }
-    }
-}
-
-// ── Theme mixin ─────────────────────────────────────────────────────────────
-
-@mixin matcha-form-field($theme) {
-    .matcha-form-field {
-        input[type="text"],
-        input[type="email"],
-        input[type="tel"],
-        input[type="url"],
-        input[type="password"],
-        input[type="number"],
-        input[type="search"],
-        input[type="date"],
-        input[type="time"],
-        textarea {
-            color: var(--matcha-color-text-primary);
-
-            &::placeholder {
-                color: var(--matcha-color-text-placeholder);
-            }
-        }
-
-        input:disabled,
-        textarea:disabled {
-            color: var(--matcha-color-interaction-disabled-fg);
-        }
-
-        // Disabled: muted text, cursor not-allowed (sinalização inequívoca de "não pode interagir").
-        // `cursor: not-allowed` vai no wrapper; `pointer-events: none` fica só no input/textarea
-        // pra herdar o cursor do parent e não bloquear eventos no wrapper (senão cursor não aparece).
-        &.matcha-form-field-disabled {
-            cursor: not-allowed;
-
-            input, textarea {
-                pointer-events: none;
-                color: var(--matcha-color-interaction-disabled-fg);
-
-                &::placeholder {
-                    color: var(--matcha-color-interaction-disabled-fg);
-                    opacity: 0.7;
-                }
-            }
-        }
-    }
-
-    matcha-form-field {
-        @include generate-matcha-form-field-size-classes($helper-breakpoints);
-    }
-}
-
-// ── Forced colors ──
-// Field precisa border + bg explícitos pra ser visível como input.
-@media (forced-colors: active) {
-    matcha-form-field {
-        .matcha-field-control,
-        .matcha-form-field__control {
-            border: 1px solid CanvasText !important;
-            background: Canvas !important;
-            color: CanvasText !important;
-        }
-
-        // Estado focused
-        &.is-focused .matcha-field-control,
-        &.is-focused .matcha-form-field__control,
-        .matcha-field-control:focus-within,
-        .matcha-form-field__control:focus-within {
-            outline: 2px solid CanvasText !important;
-            outline-offset: 2px;
-        }
-
-        // Estado erro/invalid
-        &.is-invalid .matcha-field-control,
-        &.has-error .matcha-form-field__control {
-            border-color: CanvasText !important;
-            border-width: 2px !important;
-        }
-
-        &[disabled],
-        &.is-disabled {
-            opacity: 0.5;
-
-            .matcha-field-control,
-            .matcha-form-field__control {
-                border-color: GrayText !important;
-                color: GrayText !important;
-            }
-        }
-    }
-}
-
-// ── Print ──
-// Form fields preservam estado (form values). Sem fundo decorativo.
-@media print {
-    matcha-form-field {
-        .matcha-field-control,
-        .matcha-form-field__control {
-            border: 1px solid currentColor !important;
-            background: transparent !important;
-        }
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "../tokens/breakpoints-tokens" as *;
+// =============================================================================
+// matcha-form-field.scss — Theme mixin (stacked pattern, Figma matcha/field/_base)
+// Border colors vêm do data-color (component SCSS). Theme mixin cuida de:
+//   - tipografia do input (size por breakpoint)
+//   - placeholder color
+//   - disabled text color
+// =============================================================================
+
+// ── Structural (inputs) — sem border, sem bg (box wraps) ────────────────────
+
+// ─── Filhos projetáveis do form-field ────────────────────────────────────
+// Todos os tipos de input que podem ser projetados DEVEM preencher o espaço
+// disponível e herdar padding/border/bg do wrapper externo (.matcha-form-field).
+// O componente filho NÃO deve ter padding/border próprio quando dentro do field.
+.matcha-form-field {
+    input,
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="search"],
+    input[type="date"],
+    input[type="time"],
+    textarea {
+        flex: 1 1 auto;
+        width: 100%;
+        min-width: 0;
+        min-height: 0;          // evita que altura natural do input expanda o container
+        background-color: transparent;
+        outline: none;
+        box-shadow: none;
+        border: none;
+        padding: 0;             // wrapper fornece padding horizontal
+        margin: 0;
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-font-size-sm, 14px);           // Figma MD placeholder/value 14/400/20
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-body-md, 20px);
+        color: var(--matcha-color-text-primary);               // Figma filled value: #E8EAED dark / #0E1116 light
+        resize: none;
+
+        &:disabled {
+            color: var(--matcha-color-interaction-disabled-fg);
+            -webkit-text-fill-color: var(--matcha-color-interaction-disabled-fg);  // Safari override
+        }
+    }
+
+    // Textarea ocupa TODA a altura disponível do wrapper (que é column mode).
+    // Quando `matchaAutoGrow` está ligado, a directive aplica `.matcha-autogrow`
+    // e controla altura via JS — o override abaixo solta o 100% forçado.
+    textarea {
+        height: 100%;
+        min-height: 100%;
+        align-self: stretch;
+
+        &.matcha-autogrow {
+            height: auto;        // directive calcula e seta inline
+            min-height: 0;       // flex: 1 já garante piso via wrapper min-height
+        }
+    }
+
+    // ── Scrollbar estilizada no textarea (Webkit + Firefox) ──────────────────
+    // Usa tokens do DS em vez do scrollbar nativo cinza feio do Chrome/Windows.
+    // Aplica tanto no textarea "rows fixo" (se user passar rows pequeno + muito texto)
+    // quanto no `.matcha-autogrow` depois de atingir `maxRows`.
+    textarea {
+        scrollbar-width: thin;                                          // Firefox
+        scrollbar-color: var(--matcha-color-text-placeholder)
+                         transparent;                                   // thumb + track
+
+        &::-webkit-scrollbar              { width: 6px; height: 6px; }
+        &::-webkit-scrollbar-track        { background: transparent; }
+        &::-webkit-scrollbar-thumb {
+            background: var(--matcha-color-text-placeholder);
+            border-radius: var(--matcha-radius-pill, 999px);
+        }
+        &::-webkit-scrollbar-thumb:hover  { background: var(--matcha-color-text-secondary); }
+    }
+
+    input:focus,
+    textarea:focus {
+        outline: none;
+    }
+
+    // Truncate: quando o campo é menor que placeholder/value, corta com ellipsis
+    // Evita overflow feio em sidebars, colunas estreitas, responsive mobile.
+    input {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        // Placeholder também trunca (Chrome/Safari precisam do ::placeholder explícito)
+        &::placeholder {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+
+    // ── Autofill (Chrome/Safari) — mata o background amarelo/azul e usa os tokens ──
+    // Browsers injetam background-color inline no -webkit-autofill (prioridade sobre CSS normal).
+    // O workaround padrão: box-shadow inset transparente (não sobreposto) + text-fill-color pro texto.
+    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de re-aplicar o bg.
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active,
+    textarea:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: var(--matcha-color-text-primary) !important;
+        caret-color: var(--matcha-color-primary) !important;
+        transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
+    }
+
+    // Caret color (cursor piscando) = primary pra match com focus border
+    input,
+    textarea {
+        caret-color: var(--matcha-color-primary);
+    }
+
+    // Selection highlight (quando user seleciona texto) — usa token de primary com alpha
+    input::selection,
+    textarea::selection {
+        background: var(--matcha-color-primary-alpha);
+        color: var(--matcha-color-text-primary);
+    }
+
+    // Componentes projetados — todos preenchem a largura e não adicionam borda/padding próprio
+    matcha-select,
+    matcha-autocomplete,
+    matcha-date,
+    matcha-field-range,
+    matcha-time,
+    matcha-phone {
+        flex: 1 1 auto;
+        width: 100%;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        background: transparent;
+        border: none;
+        padding: 0;
+    }
+
+    // matcha-phone: padding/bg próprios do componente quebram o layout dentro do field
+    matcha-phone .matcha-phone {
+        padding: 0;
+        background: transparent;
+        font-size: inherit;
+        width: 100%;
+    }
+
+    // matcha-date/time: container do componente preenche o espaço sem padding/border próprios
+    matcha-date .matcha-date-container,
+    matcha-time .matcha-time-container {
+        width: 100%;
+        background: transparent;
+        border: none;
+        padding: 0;
+        min-width: 0;
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    // ── matchaPasswordToggle: botão do olho injetado ao lado de input[type="password"] ──
+    // Figma matcha/field/password: ícone 16/20/24 por size, cor text-placeholder (#9AA0A6)
+    .matcha-password-toggle-button {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;                                                        // SM default
+        height: 16px;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--matcha-color-text-placeholder);                        // #9AA0A6
+        transition: color var(--matcha-duration-fast, 200ms) ease;
+
+        &:hover:not(:disabled) {
+            color: var(--matcha-color-text-primary);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            color: var(--matcha-color-interaction-disabled-fg);
+        }
+
+        &:focus { outline: none; }
+        &:focus-visible {
+            outline: 2px solid var(--matcha-color-primary);
+            outline-offset: 2px;
+            border-radius: var(--matcha-radius-md, 4px);
+        }
+
+        > [class^="i-matcha-"],
+        > [class*=" i-matcha-"] {
+            font-size: inherit !important;
+            width: 1em !important;
+            height: 1em !important;
+            line-height: 1 !important;
+            color: inherit !important;
+        }
+    }
+
+    // ── matchaQuantityStepper: wrapper flex-row + dois botões (−/+) ──────
+    // Figma matcha/field/quantity: gap 4, ícones 16px constante, cor #9AA0A6
+    .matcha-quantity-stepper {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--matcha-space-050, 4px);
+    }
+
+    .matcha-quantity-stepper-button {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;                                        // Figma: constante 16px em todos os sizes
+        height: 16px;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--matcha-color-text-placeholder);        // #9AA0A6
+        transition: color var(--matcha-duration-fast, 200ms) ease;
+
+        &:hover:not(:disabled) {
+            color: var(--matcha-color-text-primary);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            color: var(--matcha-color-interaction-disabled-fg);
+        }
+
+        &:focus { outline: none; }
+        &:focus-visible {
+            outline: 2px solid var(--matcha-color-primary);
+            outline-offset: 2px;
+            border-radius: var(--matcha-radius-md, 4px);
+        }
+
+        > [class^="i-matcha-"],
+        > [class*=" i-matcha-"] {
+            font-size: 16px !important;
+            width: 16px !important;
+            height: 16px !important;
+            line-height: 1 !important;
+            color: inherit !important;
+        }
+    }
+
+    // Esconde spinner nativo (Figma usa botões customizados)
+    input[type="number"][matchaQuantityStepper] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            appearance: none;
+            margin: 0;
+        }
+    }
+
+    // Esconde botão × nativo do Chrome/Safari em input[type="search"]
+    // (o matchaClearButton directive injeta nosso próprio — não duplicar)
+    input[type="search"] {
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-decoration,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+            -webkit-appearance: none;
+            appearance: none;
+            display: none;
+        }
+    }
+
+    // ── matchaClearButton: botão × ao lado de search/text ────────────────
+    // Figma-consistent: 16/20/24 por size, cor text-placeholder
+    .matcha-clear-button {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px; height: 16px;
+        padding: 0;
+        // margin-left: auto empurra o × pro final do flex row, imune a irmãos
+        // invisíveis (ng-content placeholders, matcha-autocomplete host que
+        // acaba como sibling quando projetado via matcha-field, etc).
+        margin: 0 0 0 auto;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--matcha-color-text-placeholder);
+        transition: color var(--matcha-duration-fast, 200ms) ease;
+        position: relative;
+
+        &:hover:not(:disabled) { color: var(--matcha-color-text-primary); }
+
+        &:focus { outline: none; }
+        &:focus-visible {
+            outline: 2px solid var(--matcha-color-primary);
+            outline-offset: 2px;
+            border-radius: var(--matcha-radius-md, 4px);
+        }
+
+        > [class^="i-matcha-"],
+        > [class*=" i-matcha-"] {
+            font-size: 16px !important;
+            width: 16px !important; height: 16px !important;
+            line-height: 1 !important;
+            color: inherit !important;
+        }
+    }
+
+    // matchaCharCounter removido daqui — agora é irmão do .matcha-form-field
+    // (vive no wrapper), estilizado fora deste bloco pra funcionar em qualquer size.
+    // Nota: estilo precisa ser GLOBAL (este arquivo) porque o span é injetado via
+    // Renderer2 sem _ngcontent — CSS scoped do Emulated não matcha.
+
+    // ── Loading spinner no suffix do field ────────────────────────────────
+    .matcha-form-field-spinner {
+        flex: none;
+        display: inline-block;
+        width: 16px; height: 16px;
+        border: 2px solid var(--matcha-color-surface-border);
+        border-top-color: var(--matcha-color-primary);
+        border-radius: 50%;
+        animation: matcha-spin 800ms linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation-duration: 2000ms;
+        }
+    }
+
+    // Select trigger ocupa altura total do form-field (clique abre dropdown em qualquer ponto)
+    matcha-select,
+    .matcha-select-container,
+    .matcha-select-trigger {
+        height: 100%;
+    }
+
+    .matcha-suffix {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+}
+
+// ─── Password toggle: tamanho do ícone por size do form-field ──────────────
+// (Figma matcha/field/password: SM 16 · MD 20 · LG 24)
+matcha-form-field[size="md"] .matcha-password-toggle-button,
+matcha-form-field[size="medium"] .matcha-password-toggle-button {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+}
+
+matcha-form-field[size="lg"] .matcha-password-toggle-button,
+matcha-form-field[size="large"] .matcha-password-toggle-button,
+matcha-form-field[size="huge"] .matcha-password-toggle-button {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+}
+
+// ── Spinner keyframes ────────────────────────────────────────────────────
+@keyframes matcha-spin {
+    to { transform: rotate(360deg); }
+}
+
+// ── Readonly state ───────────────────────────────────────────────────────
+// Visual mais sutil que disabled: texto legível, selecionável, copiável.
+// Diferença vs disabled: cor normal do texto (não muted) + cursor `text` no input
+// (sinaliza "você pode selecionar e copiar"), enquanto disabled = not-allowed.
+matcha-form-field[readonly="true"] .matcha-form-field {
+    background: var(--matcha-color-surface-bg);
+
+    input, textarea {
+        cursor: text;          // nativo do input — reforça que texto é selecionável
+        user-select: text;     // explícito pra evitar reset acidental
+    }
+
+    // Remove hover border change (não é editável, hover não deve sugerir edição)
+    &:hover { border-color: var(--matcha-color-surface-border); }
+}
+
+// ── Touch targets (WCAG 2.5.5: 44x44 mínimo em coarse pointers) ─────────
+// Expande hit area sem mudar visual (pseudo-element overlay).
+@media (pointer: coarse) {
+    .matcha-password-toggle-button,
+    .matcha-quantity-stepper-button,
+    .matcha-clear-button,
+    matcha-date .matcha-date-picker-button,
+    matcha-time .matcha-time-picker-button,
+    matcha-field-range .matcha-field-range-button,
+    matcha-phone .matcha-phone-country {
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: -14px;                  // expande 14px em cada lado = 44x44 total (16 + 14*2)
+            // invisível, mas capturavel — só expande o hit area
+        }
+    }
+}
+
+// ── Char counter (injetado via Renderer2 pelo matchaCharCounter directive) ──
+// Figma matcha/field/textarea: body-sm 12/16, text-secondary, align right.
+// Precisa ser global (sem ngcontent) porque o span vem de fora da view do form-field.
+.matcha-form-field-wrapper > .matcha-char-counter {
+    align-self: flex-end;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-sm, 12px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-sm, 16px);
+    color: var(--matcha-color-text-secondary);
+    text-align: right;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+    transition: color var(--matcha-duration-fast, 200ms) ease;
+
+    // 3 níveis visuais (0-89% = neutro, 90-99% = warn, 100%+ = danger).
+    // `is-near-limit` é aplicado a partir de 90%; `is-at-limit` sobrepõe a partir de 100%.
+    &.is-near-limit:not(.is-at-limit) {
+        color: var(--matcha-color-warn);
+    }
+
+    &.is-at-limit {
+        color: var(--matcha-color-danger);
+        font-weight: var(--matcha-weight-semibold, 600);
+    }
+}
+
+// ── Caps Lock hint (injetado pelo matchaCapsLockHint em input[type="password"]) ──
+// Renderiza abaixo do field, mesmo nível do char counter. Usa cor warn (amarelo/laranja)
+// pra sinalizar risco sem ser erro (user pode estar digitando intencionalmente).
+.matcha-form-field-wrapper > .matcha-caps-lock-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--matcha-space-050, 4px);
+    align-self: flex-start;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-sm, 12px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-sm, 16px);
+    color: var(--matcha-color-warn);
+    margin-top: var(--matcha-space-050, 4px);
+    user-select: none;
+
+    > [class^="i-matcha-"] {
+        font-size: 14px;
+        line-height: 14px;
+    }
+}
+
+// ── Responsive size classes (aligned with Figma SM/MD/LG) ───────────────────
+
+@mixin generate-matcha-form-field-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="sm"],
+            &[size#{$infix}="tiny"],
+            &[size#{$infix}="small"] {
+                .matcha-form-field input,
+                .matcha-form-field textarea {
+                    font-size: var(--matcha-text-body-sm, 12px);
+                    line-height: var(--matcha-leading-body-sm, 16px);
+                }
+            }
+
+            &[size#{$infix}="md"],
+            &[size#{$infix}="medium"] {
+                .matcha-form-field input,
+                .matcha-form-field textarea {
+                    font-size: var(--matcha-font-size-sm, 14px);
+                    line-height: var(--matcha-leading-body-md, 20px);
+                }
+            }
+
+            &[size#{$infix}="lg"],
+            &[size#{$infix}="large"],
+            &[size#{$infix}="huge"] {
+                .matcha-form-field input,
+                .matcha-form-field textarea {
+                    font-size: var(--matcha-font-size-md, 16px);
+                    line-height: var(--matcha-leading-body-lg, 24px);
+                }
+            }
+        }
+    }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-form-field($theme) {
+    .matcha-form-field {
+        input[type="text"],
+        input[type="email"],
+        input[type="tel"],
+        input[type="url"],
+        input[type="password"],
+        input[type="number"],
+        input[type="search"],
+        input[type="date"],
+        input[type="time"],
+        textarea {
+            color: var(--matcha-color-text-primary);
+
+            &::placeholder {
+                color: var(--matcha-color-text-placeholder);
+            }
+        }
+
+        input:disabled,
+        textarea:disabled {
+            color: var(--matcha-color-interaction-disabled-fg);
+        }
+
+        // Disabled: muted text, cursor not-allowed (sinalização inequívoca de "não pode interagir").
+        // `cursor: not-allowed` vai no wrapper; `pointer-events: none` fica só no input/textarea
+        // pra herdar o cursor do parent e não bloquear eventos no wrapper (senão cursor não aparece).
+        &.matcha-form-field-disabled {
+            cursor: not-allowed;
+
+            input, textarea {
+                pointer-events: none;
+                color: var(--matcha-color-interaction-disabled-fg);
+
+                &::placeholder {
+                    color: var(--matcha-color-interaction-disabled-fg);
+                    opacity: 0.7;
+                }
+            }
+        }
+    }
+
+    matcha-form-field {
+        @include generate-matcha-form-field-size-classes($helper-breakpoints);
+    }
+}
+
+// ── Forced colors ──
+// Field precisa border + bg explícitos pra ser visível como input.
+@media (forced-colors: active) {
+    matcha-form-field {
+        .matcha-field-control,
+        .matcha-form-field__control {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
+            color: CanvasText !important;
+        }
+
+        // Estado focused
+        &.is-focused .matcha-field-control,
+        &.is-focused .matcha-form-field__control,
+        .matcha-field-control:focus-within,
+        .matcha-form-field__control:focus-within {
+            outline: 2px solid CanvasText !important;
+            outline-offset: 2px;
+        }
+
+        // Estado erro/invalid
+        &.is-invalid .matcha-field-control,
+        &.has-error .matcha-form-field__control {
+            border-color: CanvasText !important;
+            border-width: 2px !important;
+        }
+
+        &[disabled],
+        &.is-disabled {
+            opacity: 0.5;
+
+            .matcha-field-control,
+            .matcha-form-field__control {
+                border-color: GrayText !important;
+                color: GrayText !important;
+            }
+        }
+    }
+}
+
+// ── Print ──
+// Form fields preservam estado (form values). Sem fundo decorativo.
+@media print {
+    matcha-form-field {
+        .matcha-field-control,
+        .matcha-form-field__control {
+            border: 1px solid currentColor !important;
+            background: transparent !important;
+        }
+    }
+}