@inchurch/matcha-theme 22.38.2 → 22.38.4

package/components/matcha-form-field.scss

@@ -1,883 +1,883 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "../tokens/breakpoints-tokens" as *;
-// =============================================================================
-// matcha-form-field.scss — FONTE ÚNICA de estilo do matcha-form-field
-// (estrutura, states, sizes, tipografia). O component SCSS é comment-only.
-// =============================================================================
-
-// ═══ Estrutura e states (migrado do matcha-form-field.component.scss) ═══════
-// Histórico: estas regras viviam no SCSS do componente (ViewEncapsulation.
-// Emulated). Seletor de host escrito como `matcha-form-field[...]` ganhava
-// sufixo [_ngcontent-…] e virava CSS morto — caso do disabled, cuja opacity
-// nunca aplicou. Global no tema, o que está escrito é o que vale; os antigos
-// ::ng-deep viram seletores diretos.
-
-// Wrapper stacked: Label → gap → Box → gap → Hint (Figma matcha/field/_base)
-.matcha-form-field-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--matcha-space-075, 6px);  // Figma matcha/field/text: gap 6px entre label/box/hint
-    width: 100%;
-}
-
-// Box do input — onde fica o input/select/textarea
-// Figma: align-self: stretch → ocupa toda a largura do wrapper
-.matcha-form-field {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    width: 100%;                                                        // stretch pro wrapper
-    min-height: 44px;                                                   // MD default
-    padding: 0 var(--matcha-space-150, 12px);                           // pad horizontal 12
-    border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-border, #E1E7E2);
-    border-radius: var(--matcha-radius-lg, 8px);
-    background: transparent;
-    box-sizing: border-box;
-    transition: border-color var(--matcha-duration-fast, 200ms);
-}
-
-// Slots prefix/suffix — elementos decorativos antes/depois do input
-.matcha-form-field .matcha-form-field-prefix,
-.matcha-form-field .matcha-form-field-suffix {
-    display: inline-flex;
-    align-items: center;
-    flex: none;
-    color: var(--matcha-color-text-label);
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-font-size-sm, 14px);
-    font-weight: var(--matcha-weight-regular, 400);
-    line-height: var(--matcha-leading-body-md, 20px);
-    user-select: none;
-}
-
-.matcha-form-field .matcha-form-field-prefix:not(:empty) + * {
-    padding-left: 0;
-}
-
-// Hover / focus-within (Figma matcha/field/_base State=Focus).
-// Disabled não chega aqui (pointer-events: none nas regras de disabled abaixo);
-// readonly neutraliza o hover na regra própria de readonly; error e data-color
-// vencem por especificidade/ordem.
-.matcha-form-field:hover {
-    border-color: var(--matcha-color-surface-border-strong);
-}
-
-.matcha-form-field:focus-within {
-    border-color: var(--matcha-color-primary, #1664C2);
-}
-
-// Color variants via data-color — override border-color
-.matcha-form-field[data-color="accent"]  { border-color: var(--matcha-color-accent); }
-.matcha-form-field[data-color="primary"] { border-color: var(--matcha-color-primary); }
-.matcha-form-field[data-color="danger"]  { border-color: var(--matcha-color-danger); }
-.matcha-form-field[data-color="warn"]    { border-color: var(--matcha-color-warn); }
-.matcha-form-field[data-color="success"] { border-color: var(--matcha-color-success); }
-.matcha-form-field[data-color="info"]    { border-color: var(--matcha-color-info); }
-
-// Sizes (Figma heights): SM 36, MD 44, LG 52.
-// Alturas não são responsivas — a tipografia responsiva fica no mixin abaixo.
-matcha-form-field[size="sm"] .matcha-form-field,
-matcha-form-field[size="tiny"] .matcha-form-field,
-matcha-form-field[size="small"] .matcha-form-field {
-    min-height: 36px;
-    padding: 0 var(--matcha-space-150, 12px);
-}
-matcha-form-field[size="md"] .matcha-form-field,
-matcha-form-field[size="medium"] .matcha-form-field {
-    min-height: 44px;
-    padding: 0 var(--matcha-space-150, 12px);
-}
-matcha-form-field[size="lg"] .matcha-form-field,
-matcha-form-field[size="large"] .matcha-form-field,
-matcha-form-field[size="huge"] .matcha-form-field {
-    min-height: 52px;
-    padding: 0 var(--matcha-space-200, 16px);
-}
-
-// Disabled — Figma aplica opacity 0.38 no WRAPPER inteiro
-// (label, field-box e hint ficam apagados de uma vez).
-// EXCEÇÃO: tooltip do label preserva opacity=1 e pointer-events pra manter a
-// pergunta "por que desabilitado?" respondível (UX crítico pra forms complexos).
-// Sem border-color especial: o token interaction-disabled-border tem MAIS
-// contraste que a borda normal e anulava o esmaecimento — a borda fica a normal
-// e a opacity apaga o conjunto uniformemente.
-matcha-form-field[disabled]:not([disabled="false"]) {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-
-    .matcha-form-field {
-        pointer-events: none;
-        cursor: default;
-    }
-
-    // Tooltip icon continua interativo e legível mesmo com wrapper disabled
-    .matcha-label-tooltip {
-        opacity: calc(1 / var(--matcha-opacity-disabled, 0.38));
-        pointer-events: auto;
-    }
-}
-
-// Fallback legado (classe aplicada via JS quando o input interno tem disabled);
-// cursor/cores de texto dessa classe vivem no theme mixin mais abaixo.
-.matcha-form-field-disabled {
-    pointer-events: none;
-}
-
-// Error state (Figma: border danger) — via @Input() error ou data-color="danger"
-matcha-form-field[error]:not([error="false"]) .matcha-form-field {
-    border-color: var(--matcha-color-danger);
-}
-
-// ─── Simulação de states em docs/playgrounds ────────────────────────────
-matcha-form-field.is-state-focus .matcha-form-field {
-    border-color: var(--matcha-color-primary) !important;
-}
-
-matcha-form-field.is-state-disabled {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-    pointer-events: none;
-}
-
-// ─── Field-range override (Figma matcha/field/range) ────────────────────
-// Field-range renderiza DUAS caixas bordadas próprias (start/end com separador).
-// O form-field externo NÃO deve desenhar sua box — apenas empilha label + range + hint.
-.matcha-form-field:has(matcha-field-range) {
-    border: none;
-    background: transparent;
-    padding: 0;
-    min-height: 0;
-    gap: 0;
-}
-
-matcha-form-field[size="sm"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="tiny"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="small"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="md"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="medium"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="lg"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="large"] .matcha-form-field:has(matcha-field-range),
-matcha-form-field[size="huge"] .matcha-form-field:has(matcha-field-range) {
-    min-height: 0;
-    padding: 0;
-    border: none;
-}
-
-// Erro: não mexe na borda do wrapper (já é none), a cor do erro vai para as halves
-matcha-form-field[error]:not([error="false"]) .matcha-form-field:has(matcha-field-range) {
-    border: none;
-}
-
-// ─── Textarea override (Figma matcha/field/textarea) ────────────────────
-// Quando o field contém textarea, o wrapper vira column + padding all-sides
-// Heights por size: SM 80px · MD 100px · LG 120px
-.matcha-form-field:has(textarea) {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: var(--matcha-space-150, 12px);
-    min-height: 80px; // fallback SM
-}
-
-matcha-form-field[size="sm"] .matcha-form-field:has(textarea),
-matcha-form-field[size="tiny"] .matcha-form-field:has(textarea),
-matcha-form-field[size="small"] .matcha-form-field:has(textarea) {
-    min-height: 80px;
-    padding: var(--matcha-space-150, 12px);
-}
-matcha-form-field[size="md"] .matcha-form-field:has(textarea),
-matcha-form-field[size="medium"] .matcha-form-field:has(textarea) {
-    min-height: 100px;
-    padding: var(--matcha-space-150, 12px);
-}
-matcha-form-field[size="lg"] .matcha-form-field:has(textarea),
-matcha-form-field[size="large"] .matcha-form-field:has(textarea),
-matcha-form-field[size="huge"] .matcha-form-field:has(textarea) {
-    min-height: 120px;
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-}
-
-// ─── Search: ícone lupa automático após o input[type=search] (Figma suffix icon) ──
-// Mesmo padding horizontal dos outros fields. Por size: SM 16 · MD 20 · LG 24.
-.matcha-form-field:has(input[type="search"])::after {
-    content: '\e90c';                        // codepoint "search" em MatchaIcons
-    font-family: 'MatchaIcons' !important;   // fonte registrada no projects/matcha-icons/matcha-icons.css
-    font-weight: normal;
-    font-style: normal;
-    font-variant: normal;
-    speak: none;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    color: var(--matcha-color-text-placeholder);
-    font-size: 16px;
-    line-height: 16px;
-    flex: none;
-    pointer-events: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-matcha-form-field[size="md"] .matcha-form-field:has(input[type="search"])::after,
-matcha-form-field[size="medium"] .matcha-form-field:has(input[type="search"])::after {
-    font-size: 20px;
-    line-height: 20px;
-}
-matcha-form-field[size="lg"] .matcha-form-field:has(input[type="search"])::after,
-matcha-form-field[size="large"] .matcha-form-field:has(input[type="search"])::after,
-matcha-form-field[size="huge"] .matcha-form-field:has(input[type="search"])::after {
-    font-size: 24px;
-    line-height: 24px;
-}
-
-// Hierarquia de trailing icons: loading > clear × > suffix default.
-// Cada nível oculta os abaixo pra não empilhar ícones redundantes.
-
-// Loading: spinner assume o suffix; oculta lupa + × juntos.
-.matcha-form-field:has(input[type="search"]):has(.matcha-form-field-spinner)::after,
-.matcha-form-field:has(.matcha-form-field-spinner) .matcha-clear-button {
-    display: none !important;
-}
-
-// Clear visível (input com valor): × toma o lugar da lupa default.
-.matcha-form-field:has(input[type="search"]):has(.matcha-clear-button--visible)::after {
-    display: none;
-}
-
-// ── 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;
-
-        // Figma: text-placeholder (#6E747A dark / #9AA0A6 light); opacity 1
-        // porque o Firefox aplica opacity < 1 no ::placeholder por default
-        &::placeholder {
-            color: var(--matcha-color-text-placeholder);
-            opacity: 1;
-        }
-
-        &: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 azul/amarelo nativo e usa os tokens ──
-    // Browsers pintam autofill com um background-color INTERNO que ignora
-    // `background-color` normal via CSS (prioridade de UA style). O workaround
-    // padrão cobre esse fundo com um box-shadow inset opaco do tamanho da caixa —
-    // e por isso a cor do box-shadow tem que ser OPACA e igual ao fundo real por
-    // trás do input, não `transparent` (bug anterior: transparent não cobre nada,
-    // o azul nativo do Chrome continuava visível por baixo -- ilegível no tema
-    // escuro, onde o contraste com o texto claro inverte). O input em si é
-    // `background-color: transparent` (linha ~33): o que aparece por trás é o
-    // matcha-card que envolve o form-field na esmagadora maioria dos usos deste
-    // painel -- por isso surface-card, não surface-bg (fundo da PÁGINA, um tom
-    // mais escuro/mais claro que o card e que deixaria um contorno visível).
-    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de
-    // reaplicar o bg nativo antes do box-shadow cobrir.
-    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 var(--matcha-color-surface-card) 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) — mesmo par accent do
-    // ::selection global (base/_reset.scss). Era primary-alpha aqui e azul do SO no
-    // resto da app: duas cores de seleção diferentes na mesma tela.
-    input::selection,
-    textarea::selection {
-        background-color: var(--matcha-color-accent);
-        color: var(--matcha-color-accent-text-on);
-    }
-
-    // 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 E largura totais do form-field (clique abre
-    // dropdown em qualquer ponto da caixa)
-    matcha-select,
-    .matcha-select-container,
-    .matcha-select-trigger {
-        height: 100%;
-    }
-
-    .matcha-select-container,
-    .matcha-select-trigger {
-        width: 100%;
-    }
-
-    // Suffix costuma agrupar mais de uma info (contador de caracteres + ícone de
-    // status/erro) — 8px de respiro entre elas. Regra global (sem ::ng-deep): o
-    // host do <matcha-suffix> tem class .matcha-form-field-suffix e vive dentro do
-    // matcha-form-field. O display:inline-flex vem do component scss.
-    .matcha-form-field-suffix {
-        gap: var(--matcha-space-100, 8px);
-    }
-
-    // @deprecated `.matcha-suffix` (div avulsa) — use o componente <matcha-suffix>
-    // (host `.matcha-form-field-suffix`), que já traz o gap de 8px entre múltiplas
-    // infos. Mantido só por retrocompat; migrar consumidores e remover numa próxima major.
-    .matcha-suffix {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        gap: var(--matcha-space-100, 8px);
-    }
-}
-
-// ─── 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.
-// IN-40430 (painel): a tipografia vale pra QUALQUER host do counter — quando o span
-// caía fora do .matcha-form-field-wrapper (textarea/usos legados), ficava sem estilo
-// e herdava fonte maior que o próprio texto do campo.
-.matcha-char-counter {
-    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;
-}
-
-.matcha-form-field-wrapper > .matcha-char-counter {
-    align-self: flex-end;
-    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 — FONTE ÚNICA de estilo do matcha-form-field
+// (estrutura, states, sizes, tipografia). O component SCSS é comment-only.
+// =============================================================================
+
+// ═══ Estrutura e states (migrado do matcha-form-field.component.scss) ═══════
+// Histórico: estas regras viviam no SCSS do componente (ViewEncapsulation.
+// Emulated). Seletor de host escrito como `matcha-form-field[...]` ganhava
+// sufixo [_ngcontent-…] e virava CSS morto — caso do disabled, cuja opacity
+// nunca aplicou. Global no tema, o que está escrito é o que vale; os antigos
+// ::ng-deep viram seletores diretos.
+
+// Wrapper stacked: Label → gap → Box → gap → Hint (Figma matcha/field/_base)
+.matcha-form-field-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--matcha-space-075, 6px);  // Figma matcha/field/text: gap 6px entre label/box/hint
+    width: 100%;
+}
+
+// Box do input — onde fica o input/select/textarea
+// Figma: align-self: stretch → ocupa toda a largura do wrapper
+.matcha-form-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    width: 100%;                                                        // stretch pro wrapper
+    min-height: 44px;                                                   // MD default
+    padding: 0 var(--matcha-space-150, 12px);                           // pad horizontal 12
+    border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-border, #E1E7E2);
+    border-radius: var(--matcha-radius-lg, 8px);
+    background: transparent;
+    box-sizing: border-box;
+    transition: border-color var(--matcha-duration-fast, 200ms);
+}
+
+// Slots prefix/suffix — elementos decorativos antes/depois do input
+.matcha-form-field .matcha-form-field-prefix,
+.matcha-form-field .matcha-form-field-suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    color: var(--matcha-color-text-label);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-font-size-sm, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-md, 20px);
+    user-select: none;
+}
+
+.matcha-form-field .matcha-form-field-prefix:not(:empty) + * {
+    padding-left: 0;
+}
+
+// Hover / focus-within (Figma matcha/field/_base State=Focus).
+// Disabled não chega aqui (pointer-events: none nas regras de disabled abaixo);
+// readonly neutraliza o hover na regra própria de readonly; error e data-color
+// vencem por especificidade/ordem.
+.matcha-form-field:hover {
+    border-color: var(--matcha-color-surface-border-strong);
+}
+
+.matcha-form-field:focus-within {
+    border-color: var(--matcha-color-primary, #1664C2);
+}
+
+// Color variants via data-color — override border-color
+.matcha-form-field[data-color="accent"]  { border-color: var(--matcha-color-accent); }
+.matcha-form-field[data-color="primary"] { border-color: var(--matcha-color-primary); }
+.matcha-form-field[data-color="danger"]  { border-color: var(--matcha-color-danger); }
+.matcha-form-field[data-color="warn"]    { border-color: var(--matcha-color-warn); }
+.matcha-form-field[data-color="success"] { border-color: var(--matcha-color-success); }
+.matcha-form-field[data-color="info"]    { border-color: var(--matcha-color-info); }
+
+// Sizes (Figma heights): SM 36, MD 44, LG 52.
+// Alturas não são responsivas — a tipografia responsiva fica no mixin abaixo.
+matcha-form-field[size="sm"] .matcha-form-field,
+matcha-form-field[size="tiny"] .matcha-form-field,
+matcha-form-field[size="small"] .matcha-form-field {
+    min-height: 36px;
+    padding: 0 var(--matcha-space-150, 12px);
+}
+matcha-form-field[size="md"] .matcha-form-field,
+matcha-form-field[size="medium"] .matcha-form-field {
+    min-height: 44px;
+    padding: 0 var(--matcha-space-150, 12px);
+}
+matcha-form-field[size="lg"] .matcha-form-field,
+matcha-form-field[size="large"] .matcha-form-field,
+matcha-form-field[size="huge"] .matcha-form-field {
+    min-height: 52px;
+    padding: 0 var(--matcha-space-200, 16px);
+}
+
+// Disabled — Figma aplica opacity 0.38 no WRAPPER inteiro
+// (label, field-box e hint ficam apagados de uma vez).
+// EXCEÇÃO: tooltip do label preserva opacity=1 e pointer-events pra manter a
+// pergunta "por que desabilitado?" respondível (UX crítico pra forms complexos).
+// Sem border-color especial: o token interaction-disabled-border tem MAIS
+// contraste que a borda normal e anulava o esmaecimento — a borda fica a normal
+// e a opacity apaga o conjunto uniformemente.
+matcha-form-field[disabled]:not([disabled="false"]) {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+
+    .matcha-form-field {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    // Tooltip icon continua interativo e legível mesmo com wrapper disabled
+    .matcha-label-tooltip {
+        opacity: calc(1 / var(--matcha-opacity-disabled, 0.38));
+        pointer-events: auto;
+    }
+}
+
+// Fallback legado (classe aplicada via JS quando o input interno tem disabled);
+// cursor/cores de texto dessa classe vivem no theme mixin mais abaixo.
+.matcha-form-field-disabled {
+    pointer-events: none;
+}
+
+// Error state (Figma: border danger) — via @Input() error ou data-color="danger"
+matcha-form-field[error]:not([error="false"]) .matcha-form-field {
+    border-color: var(--matcha-color-danger);
+}
+
+// ─── Simulação de states em docs/playgrounds ────────────────────────────
+matcha-form-field.is-state-focus .matcha-form-field {
+    border-color: var(--matcha-color-primary) !important;
+}
+
+matcha-form-field.is-state-disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+}
+
+// ─── Field-range override (Figma matcha/field/range) ────────────────────
+// Field-range renderiza DUAS caixas bordadas próprias (start/end com separador).
+// O form-field externo NÃO deve desenhar sua box — apenas empilha label + range + hint.
+.matcha-form-field:has(matcha-field-range) {
+    border: none;
+    background: transparent;
+    padding: 0;
+    min-height: 0;
+    gap: 0;
+}
+
+matcha-form-field[size="sm"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="tiny"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="small"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="md"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="medium"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="lg"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="large"] .matcha-form-field:has(matcha-field-range),
+matcha-form-field[size="huge"] .matcha-form-field:has(matcha-field-range) {
+    min-height: 0;
+    padding: 0;
+    border: none;
+}
+
+// Erro: não mexe na borda do wrapper (já é none), a cor do erro vai para as halves
+matcha-form-field[error]:not([error="false"]) .matcha-form-field:has(matcha-field-range) {
+    border: none;
+}
+
+// ─── Textarea override (Figma matcha/field/textarea) ────────────────────
+// Quando o field contém textarea, o wrapper vira column + padding all-sides
+// Heights por size: SM 80px · MD 100px · LG 120px
+.matcha-form-field:has(textarea) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--matcha-space-150, 12px);
+    min-height: 80px; // fallback SM
+}
+
+matcha-form-field[size="sm"] .matcha-form-field:has(textarea),
+matcha-form-field[size="tiny"] .matcha-form-field:has(textarea),
+matcha-form-field[size="small"] .matcha-form-field:has(textarea) {
+    min-height: 80px;
+    padding: var(--matcha-space-150, 12px);
+}
+matcha-form-field[size="md"] .matcha-form-field:has(textarea),
+matcha-form-field[size="medium"] .matcha-form-field:has(textarea) {
+    min-height: 100px;
+    padding: var(--matcha-space-150, 12px);
+}
+matcha-form-field[size="lg"] .matcha-form-field:has(textarea),
+matcha-form-field[size="large"] .matcha-form-field:has(textarea),
+matcha-form-field[size="huge"] .matcha-form-field:has(textarea) {
+    min-height: 120px;
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+}
+
+// ─── Search: ícone lupa automático após o input[type=search] (Figma suffix icon) ──
+// Mesmo padding horizontal dos outros fields. Por size: SM 16 · MD 20 · LG 24.
+.matcha-form-field:has(input[type="search"])::after {
+    content: '\e90c';                        // codepoint "search" em MatchaIcons
+    font-family: 'MatchaIcons' !important;   // fonte registrada no projects/matcha-icons/matcha-icons.css
+    font-weight: normal;
+    font-style: normal;
+    font-variant: normal;
+    speak: none;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    color: var(--matcha-color-text-placeholder);
+    font-size: 16px;
+    line-height: 16px;
+    flex: none;
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+matcha-form-field[size="md"] .matcha-form-field:has(input[type="search"])::after,
+matcha-form-field[size="medium"] .matcha-form-field:has(input[type="search"])::after {
+    font-size: 20px;
+    line-height: 20px;
+}
+matcha-form-field[size="lg"] .matcha-form-field:has(input[type="search"])::after,
+matcha-form-field[size="large"] .matcha-form-field:has(input[type="search"])::after,
+matcha-form-field[size="huge"] .matcha-form-field:has(input[type="search"])::after {
+    font-size: 24px;
+    line-height: 24px;
+}
+
+// Hierarquia de trailing icons: loading > clear × > suffix default.
+// Cada nível oculta os abaixo pra não empilhar ícones redundantes.
+
+// Loading: spinner assume o suffix; oculta lupa + × juntos.
+.matcha-form-field:has(input[type="search"]):has(.matcha-form-field-spinner)::after,
+.matcha-form-field:has(.matcha-form-field-spinner) .matcha-clear-button {
+    display: none !important;
+}
+
+// Clear visível (input com valor): × toma o lugar da lupa default.
+.matcha-form-field:has(input[type="search"]):has(.matcha-clear-button--visible)::after {
+    display: none;
+}
+
+// ── 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;
+
+        // Figma: text-placeholder (#6E747A dark / #9AA0A6 light); opacity 1
+        // porque o Firefox aplica opacity < 1 no ::placeholder por default
+        &::placeholder {
+            color: var(--matcha-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &: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 azul/amarelo nativo e usa os tokens ──
+    // Browsers pintam autofill com um background-color INTERNO que ignora
+    // `background-color` normal via CSS (prioridade de UA style). O workaround
+    // padrão cobre esse fundo com um box-shadow inset opaco do tamanho da caixa —
+    // e por isso a cor do box-shadow tem que ser OPACA e igual ao fundo real por
+    // trás do input, não `transparent` (bug anterior: transparent não cobre nada,
+    // o azul nativo do Chrome continuava visível por baixo -- ilegível no tema
+    // escuro, onde o contraste com o texto claro inverte). O input em si é
+    // `background-color: transparent` (linha ~33): o que aparece por trás é o
+    // matcha-card que envolve o form-field na esmagadora maioria dos usos deste
+    // painel -- por isso surface-card, não surface-bg (fundo da PÁGINA, um tom
+    // mais escuro/mais claro que o card e que deixaria um contorno visível).
+    // `transition: ... 5000s` é o "truque dos 5000 segundos" — impede o browser de
+    // reaplicar o bg nativo antes do box-shadow cobrir.
+    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 var(--matcha-color-surface-card) 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) — mesmo par accent do
+    // ::selection global (base/_reset.scss). Era primary-alpha aqui e azul do SO no
+    // resto da app: duas cores de seleção diferentes na mesma tela.
+    input::selection,
+    textarea::selection {
+        background-color: var(--matcha-color-accent);
+        color: var(--matcha-color-accent-text-on);
+    }
+
+    // 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 E largura totais do form-field (clique abre
+    // dropdown em qualquer ponto da caixa)
+    matcha-select,
+    .matcha-select-container,
+    .matcha-select-trigger {
+        height: 100%;
+    }
+
+    .matcha-select-container,
+    .matcha-select-trigger {
+        width: 100%;
+    }
+
+    // Suffix costuma agrupar mais de uma info (contador de caracteres + ícone de
+    // status/erro) — 8px de respiro entre elas. Regra global (sem ::ng-deep): o
+    // host do <matcha-suffix> tem class .matcha-form-field-suffix e vive dentro do
+    // matcha-form-field. O display:inline-flex vem do component scss.
+    .matcha-form-field-suffix {
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    // @deprecated `.matcha-suffix` (div avulsa) — use o componente <matcha-suffix>
+    // (host `.matcha-form-field-suffix`), que já traz o gap de 8px entre múltiplas
+    // infos. Mantido só por retrocompat; migrar consumidores e remover numa próxima major.
+    .matcha-suffix {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+    }
+}
+
+// ─── 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.
+// IN-40430 (painel): a tipografia vale pra QUALQUER host do counter — quando o span
+// caía fora do .matcha-form-field-wrapper (textarea/usos legados), ficava sem estilo
+// e herdava fonte maior que o próprio texto do campo.
+.matcha-char-counter {
+    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;
+}
+
+.matcha-form-field-wrapper > .matcha-char-counter {
+    align-self: flex-end;
+    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;
+        }
+    }
+}