@inchurch/matcha-theme 22.38.2 → 22.38.4

package/components/matcha-select.scss

@@ -1,629 +1,629 @@
-// =============================================================================
-// matcha-select.scss — Select dropdown trigger
-// Aligned with Figma matcha/field/select (tokenized)
-// =============================================================================
-
-// ── Structural (outside mixin) ──────────────────────────────────────────────
-
-.matcha-select-trigger {
-  position: relative;
-  overflow: hidden;
-
-  // State layer (MD3 style) — usado apenas em selects STANDALONE.
-  // Dentro de matcha-form-field a gente desliga: o hover do field (border) cuida.
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: currentColor;
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-
-  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-  &[disabled] { pointer-events: none; cursor: default; }
-
-  @media (prefers-reduced-motion: reduce) {
-    &::before { transition: none; }
-  }
-}
-
-// Dentro de matcha-form-field: hover fica a cargo do form-field (border-color).
-// Remove o tint do state layer pra não duplicar feedback visual.
-.matcha-form-field .matcha-select-trigger::before {
-    display: none;
-}
-
-// ── Theme mixin ─────────────────────────────────────────────────────────────
-
-@mixin matcha-select-theme($theme) {
-  matcha-select {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .matcha-select-container {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-  }
-
-  .matcha-select-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-    cursor: pointer;
-    transition: border-color var(--matcha-duration-fast, 200ms) ease,
-                box-shadow var(--matcha-duration-fast, 200ms) ease;
-    box-sizing: border-box;
-
-    &:focus-visible:not([disabled]) {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-  }
-
-  .matcha-select-value {
-    flex: 1;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--matcha-color-fg);
-
-    &.matcha-select-placeholder {
-      color: var(--matcha-color-text-placeholder);
-    }
-  }
-
-  .matcha-select-arrow {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: var(--matcha-space-100, 8px);
-    transition: transform var(--matcha-duration-fast, 200ms) ease;
-    color: var(--matcha-color-text-placeholder);        // Figma #9AA0A6 dark / placeholder light
-    font-size: 16px;                                    // default SM
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    flex: none;
-
-    &.matcha-select-arrow-open {
-      transform: rotate(180deg);
-    }
-  }
-
-  // Seta por size (Figma matcha/field/select): SM 16 · MD 20 · LG 24
-  matcha-form-field[size="md"] matcha-select .matcha-select-arrow,
-  matcha-form-field[size="medium"] matcha-select .matcha-select-arrow {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-  }
-  matcha-form-field[size="lg"] matcha-select .matcha-select-arrow,
-  matcha-form-field[size="large"] matcha-select .matcha-select-arrow,
-  matcha-form-field[size="huge"] matcha-select .matcha-select-arrow {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-  }
-
-  // Tipografia do value por size: SM/tiny body-sm 12/16 · MD body-md 14/20 · LG body-lg 16/24.
-  // O tier SM usa a MESMA escala do input nativo (matcha-form-field.scss aplica
-  // --matcha-text-body-sm nesse tier). Antes o select herdava 14/20 junto do MD e ficava
-  // 2px maior que input/date dentro do MESMO matcha-field size="small".
-  matcha-form-field[size="lg"] .matcha-select-value,
-  matcha-form-field[size="large"] .matcha-select-value,
-  matcha-form-field[size="huge"] .matcha-select-value {
-    font-size: 16px;
-    line-height: 24px;
-  }
-  matcha-form-field[size="sm"] .matcha-select-value,
-  matcha-form-field[size="tiny"] .matcha-select-value,
-  matcha-form-field[size="small"] .matcha-select-value {
-    font-size: var(--matcha-text-body-sm, 12px);
-    line-height: var(--matcha-leading-body-sm, 16px);
-  }
-  matcha-form-field[size="md"] .matcha-select-value,
-  matcha-form-field[size="medium"] .matcha-select-value {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  // Disabled: seta cinza 38%
-  matcha-form-field[disabled] .matcha-select-arrow,
-  matcha-form-field[disabled="true"] .matcha-select-arrow,
-  matcha-select[disabled] .matcha-select-arrow,
-  .matcha-select-disabled .matcha-select-arrow {
-    color: var(--matcha-color-interaction-disabled-fg);
-  }
-
-  // ── Clear button (× quando clearable + tem valor) ──
-  // Size-responsive igual a seta (SM 16, MD 20, LG 24). Sem círculo no hover.
-  // NOTA: box dimensions + line-height CASAM exatamente com .matcha-select-arrow
-  // pra compensar os baselines diferentes dos icon fonts (close vs arrow_down).
-  .matcha-select-clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;                                        // default SM (matches .matcha-select-arrow)
-    height: 16px;
-    margin: 0 var(--matcha-space-050, 4px) 0 0;         // gap antes da seta
-    padding: 0;
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    color: var(--matcha-color-text-placeholder);
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 16px;                                  // absoluto (match arrow) — essencial pro baseline
-    flex: none;
-    transition: color var(--matcha-duration-fast, 200ms) ease;
-
-    // Ícone interno: força display block + centralização via line-height
-    // pra neutralizar baseline gap dos glyphs
-    > [class^="i-matcha-"],
-    > [class*=" i-matcha-"] {
-      display: inline-block;
-      font-size: inherit;
-      width: 1em;
-      height: 1em;
-      line-height: 1em;
-      vertical-align: middle;
-    }
-
-    &:hover {
-      background: transparent;
-      color: var(--matcha-color-text-primary);
-    }
-
-    &:focus { outline: none; }
-    &:focus-visible {
-      outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-primary);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      border-radius: var(--matcha-radius-md, 4px);
-    }
-  }
-
-  // Clear × por size do form-field — casa 1:1 com a seta (Figma SM 16 · MD 20 · LG 24)
-  matcha-form-field[size="md"] matcha-select .matcha-select-clear,
-  matcha-form-field[size="medium"] matcha-select .matcha-select-clear {
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-  }
-  matcha-form-field[size="lg"] matcha-select .matcha-select-clear,
-  matcha-form-field[size="large"] matcha-select .matcha-select-clear,
-  matcha-form-field[size="huge"] matcha-select .matcha-select-clear {
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-  }
-
-  // ── Disabled ──
-  .matcha-select-disabled {
-    .matcha-select-trigger {
-      pointer-events: none;
-      cursor: default;
-    }
-
-    .matcha-select-value {
-      color: var(--matcha-color-disabled-fg);
-    }
-
-    .matcha-select-arrow {
-      opacity: var(--matcha-opacity-disabled, 0.38);
-    }
-  }
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // Multi-select — chips dentro do trigger
-  // ═══════════════════════════════════════════════════════════════════════
-
-  // Lista de chips FORA da caixa. O chip em si é o matcha-chip (atômico) — aqui só o
-  // empilhamento. As ~95 linhas que desenhavam um chip de 22px próprio saíram: existiam
-  // porque o atômico (36px) não cabia DENTRO da caixa, e os chips deixaram de ficar lá.
-  .matcha-select-chip-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--matcha-space-075, 6px);
-    margin-top: var(--matcha-space-100, 8px);
-  }
-
-
-
-
-
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // Multi-select panel — checkmark + bulk actions header
-  // ═══════════════════════════════════════════════════════════════════════
-
-  // Wrapper dentro do panel. .matcha-select-options-multi modifica options filhas.
-  .matcha-select-options-multi {
-    // Checkmark nas options selecionadas — aparece ANTES do label.
-    // Usa pseudo-element pra não precisar mexer no template de matcha-option.
-    matcha-option[aria-selected="true"] {
-      padding-left: var(--matcha-space-400, 32px);
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: var(--matcha-space-150, 12px);
-        top: 50%;
-        width: 16px;
-        height: 16px;
-        margin-top: -8px;
-        background-color: var(--matcha-color-accent);
-        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
-        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
-        mask-size: contain;
-        -webkit-mask-size: contain;
-        mask-repeat: no-repeat;
-        -webkit-mask-repeat: no-repeat;
-      }
-    }
-
-    // Reserva espaço pro checkmark mesmo nas não-selecionadas (alinhamento do texto)
-    matcha-option {
-      padding-left: var(--matcha-space-400, 32px);
-    }
-  }
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // Selecionadas fixadas no topo ([pinSelected]) — companheiro do modo sem chips
-  // ═══════════════════════════════════════════════════════════════════════
-  // Sem a lista de chips abaixo do campo, o que já foi escolhido só existe DENTRO do
-  // painel — e numa lista longa some no primeiro scroll. A fixação sobe o bloco
-  // selecionado pro topo com `order`: as options são content-projected (quase sempre
-  // por um `@for` do consumidor), então mover os nós quebraria o próximo update da
-  // lista. `order` reordena só a pintura; o DOM fica intacto.
-  //
-  // Quem congela a ordem é o TS (snapshot na abertura do painel) — sem isso a option
-  // pularia de lugar debaixo do cursor a cada clique.
-  .matcha-select-options-pinned {
-    display: flex;
-    flex-direction: column;
-
-    // Ordens explícitas: com `order` no jogo, quem não declara cai em 0. A busca e o
-    // header de ações em lote precisam continuar ACIMA do bloco fixado; carregando e
-    // vazio, ABAIXO de tudo.
-    > .matcha-select-search        { order: -3; }
-    > .matcha-select-bulk-actions  { order: -2; }
-    > .matcha-select-option-pinned { order: -1; }
-    > .matcha-select-loading,
-    > .matcha-select-empty         { order: 1; }
-  }
-
-  // Divisória do bloco fixado — ancorada na ÚLTIMA fixada VISÍVEL, e só quando existe
-  // opção não fixada embaixo (senão seria uma linha solta no fim da lista).
-  // Pseudo-elemento, não `border-bottom`: a option tem margem lateral própria (4px) e a
-  // borda pararia antes da parede do painel, ao contrário da divisória do header de
-  // ações em lote — o negativo sangra até lá sem deslocar o item.
-  .matcha-select-option-pinned-last::after {
-    content: '';
-    position: absolute;
-    left: calc(var(--matcha-space-050, 4px) * -1);
-    right: calc(var(--matcha-space-050, 4px) * -1);
-    // Meio do respiro entre duas options (margem vertical de 2px em cada uma).
-    bottom: calc((var(--matcha-space-025, 2px) + 1px) * -1);
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0, 0, 0, 0.08));
-  }
-
-  // Bulk actions header (Selecionar todos / Limpar / contagem)
-  .matcha-select-bulk-actions {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0,0,0,0.08));
-    margin-bottom: var(--matcha-space-050, 4px);
-  }
-
-  .matcha-select-bulk-btn {
-    appearance: none;
-    border: 0;
-    background: transparent;
-    color: var(--matcha-color-primary);
-    cursor: pointer;
-    font: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
-    border-radius: var(--matcha-radius-sm, 4px);
-    transition: background-color var(--matcha-duration-instant, 80ms) ease;
-
-    &:hover:not(:disabled) { background: var(--matcha-color-primary-surface-hover); }
-    &:disabled { pointer-events: none; opacity: var(--matcha-opacity-disabled, 0.38); }
-    &:focus-visible {
-      outline: 2px solid var(--matcha-color-primary);
-      outline-offset: 1px;
-    }
-  }
-
-  .matcha-select-bulk-btn-ghost {
-    color: var(--matcha-color-text-secondary);
-    font-weight: 400;
-  }
-
-  .matcha-select-bulk-count {
-    margin-left: auto;
-    font-size: 12px;
-    color: var(--matcha-color-text-placeholder);
-    font-weight: 400;
-  }
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // Searchable — input de busca no topo do panel + empty state
-  // ═══════════════════════════════════════════════════════════════════════
-
-  // Zera padding-top do panel quando o search é a 1ª coisa dentro. O search
-  // já tem padding próprio; o padding do panel (8px) somava e gerava gap
-  // visual entre trigger e o campo de busca.
-  .matcha-panel:has(> .matcha-select-options > .matcha-select-search:first-child) {
-    padding-top: 0;
-  }
-
-  .matcha-select-search {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0,0,0,0.08));
-    transition: border-color var(--matcha-duration-instant, 80ms) ease;
-
-    &:focus-within {
-      border-bottom-color: var(--matcha-color-primary);
-    }
-  }
-
-  // Lupa no lugar do placeholder textual "Buscar..." — ícone não precisa de i18n.
-  .matcha-select-search-icon {
-    flex-shrink: 0;
-    color: var(--matcha-color-text-placeholder);
-    pointer-events: none;
-  }
-
-  // Input plano: sem border/background próprios. O container `.matcha-select-search`
-  // faz o papel de "campo" via padding + divider bottom, e focus-within muda a cor
-  // do divider. Evita efeito "card dentro de card" dentro do panel.
-  .matcha-select-search-input {
-    width: 100%;
-    height: 24px;
-    padding: 0 var(--matcha-space-400, 32px) 0 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    color: var(--matcha-color-text-primary);
-    font: inherit;
-    font-size: 13px;
-    outline: none;
-
-    &::placeholder { color: var(--matcha-color-text-placeholder); }
-    &:focus { outline: none; }
-  }
-
-  .matcha-select-search-clear {
-    position: absolute;
-    right: calc(var(--matcha-space-150, 12px) + var(--matcha-space-100, 8px));
-    top: 50%;
-    transform: translateY(-50%);
-    width: 18px;
-    height: 18px;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    border-radius: 50%;
-    color: var(--matcha-color-text-placeholder);
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background: var(--matcha-color-surface-hover, rgba(0,0,0,0.12));
-      color: var(--matcha-color-text-primary);
-    }
-  }
-
-  .matcha-select-empty {
-    padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px);
-    text-align: center;
-    color: var(--matcha-color-text-placeholder);
-    font-size: 13px;
-    font-style: italic;
-  }
-
-  // Loading do painel (backend search mode) — mesmo tom do empty state, com spinner.
-  .matcha-select-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-200, 16px);
-    color: var(--matcha-color-text-placeholder);
-    font-size: 13px;
-  }
-
-  .matcha-select-loading-spinner {
-    width: 14px;
-    height: 14px;
-    flex-shrink: 0;
-    // Mesma cor do spinner do trigger (.matcha-form-field-spinner) — um estado de
-    // loading, uma cor. Antes era accent e o campo mostrava azul + verde ao mesmo tempo.
-    border: 2px solid var(--matcha-color-surface-border);
-    border-top-color: var(--matcha-color-primary);
-    border-radius: 50%;
-    animation: matcha-select-loading-spin 0.7s linear infinite;
-  }
-
-  @keyframes matcha-select-loading-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // Bottom-sheet (mobile) — aligned com Figma matcha/field/select/mobile-sheet
-  // Ativa automaticamente em <=768px (ou via [mode]="'sheet'"). Full-width bottom-anchored.
-  // ═══════════════════════════════════════════════════════════════════════
-  .matcha-select-sheet-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 10002;
-    // Scrim 40% — cor do token com alpha aplicado via rgba (token resolve pra cor sólida)
-    background-color: rgba(0, 0, 0, 0.4);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-fast, 200ms) ease;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    &.matcha-select-sheet-open {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  .matcha-select-sheet {
-    position: relative;
-    width: 100%;
-    max-height: 90vh;
-    min-height: 50vh;
-    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
-    border-top-left-radius: var(--matcha-radius-xl, 16px);
-    border-top-right-radius: var(--matcha-radius-xl, 16px);
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    // Slide-up animation — inicia off-screen e anima em.
-    // Classe `.matcha-select-sheet-open` aplicada diretamente (não via parent)
-    // pra evitar problemas de specificity com containers aninhados.
-    transform: translateY(100%);
-    transition: transform var(--matcha-duration-fast, 200ms) cubic-bezier(0.2, 0, 0, 1);
-
-    &.matcha-select-sheet-open {
-      transform: translateY(0);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
-
-  .matcha-select-sheet-handle {
-    flex: 0 0 auto;
-    width: 40px;
-    height: 4px;
-    margin: var(--matcha-space-150, 12px) auto var(--matcha-space-100, 8px);
-    background: var(--matcha-color-surface-border);
-    opacity: 0.6;
-    border-radius: 2px;
-  }
-
-  .matcha-select-sheet-header {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-  }
-
-  .matcha-select-sheet-title {
-    flex: 1 1 auto;
-    margin: 0;
-    font-family: var(--matcha-font-family);
-    font-size: 17px;
-    font-weight: 600;
-    line-height: 1.3;
-    color: var(--matcha-color-text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .matcha-select-sheet-close {
-    flex: 0 0 auto;
-    appearance: none;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    border-radius: 50%;
-    color: var(--matcha-color-text-secondary);
-    cursor: pointer;
-    font-size: 24px;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color var(--matcha-duration-instant, 80ms) ease;
-
-    &:hover { background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.08)); }
-    &:focus-visible {
-      outline: 2px solid var(--matcha-color-primary);
-      outline-offset: -2px;
-    }
-  }
-
-  // Sheet-mode ajusta o scroll da lista pra caber dentro da sheet
-  .matcha-select-options-sheet {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .matcha-select-sheet-list {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    padding: var(--matcha-space-050, 4px) 0;
-  }
-
-  // Sheet-mode options são full-width com padding mais generoso pra toque
-  .matcha-select-options-sheet matcha-option {
-    padding-left: var(--matcha-space-200, 16px);
-    padding-right: var(--matcha-space-200, 16px);
-    min-height: 48px; // Alvo tátil iOS (44px mínimo + folga)
-  }
-
-  // Safe-area bottom — respeita env() do iOS + fallback 12px
-  .matcha-select-sheet-safe-area {
-    flex: 0 0 auto;
-    height: calc(env(safe-area-inset-bottom, 0px) + var(--matcha-space-150, 12px));
-    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
-  }
-
-  // Quando sheet-mode tá ativo, esconder a arrow do trigger faz menos sentido —
-  // mas mantemos porque ainda comunica "expandable". Tap target expandido.
-  @media (max-width: 768px) {
-    .matcha-select-trigger {
-      min-height: 48px;
-    }
-  }
-
-}
+// =============================================================================
+// matcha-select.scss — Select dropdown trigger
+// Aligned with Figma matcha/field/select (tokenized)
+// =============================================================================
+
+// ── Structural (outside mixin) ──────────────────────────────────────────────
+
+.matcha-select-trigger {
+  position: relative;
+  overflow: hidden;
+
+  // State layer (MD3 style) — usado apenas em selects STANDALONE.
+  // Dentro de matcha-form-field a gente desliga: o hover do field (border) cuida.
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+  }
+
+  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+  &[disabled] { pointer-events: none; cursor: default; }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before { transition: none; }
+  }
+}
+
+// Dentro de matcha-form-field: hover fica a cargo do form-field (border-color).
+// Remove o tint do state layer pra não duplicar feedback visual.
+.matcha-form-field .matcha-select-trigger::before {
+    display: none;
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-select-theme($theme) {
+  matcha-select {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .matcha-select-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .matcha-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    cursor: pointer;
+    transition: border-color var(--matcha-duration-fast, 200ms) ease,
+                box-shadow var(--matcha-duration-fast, 200ms) ease;
+    box-sizing: border-box;
+
+    &:focus-visible:not([disabled]) {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  .matcha-select-value {
+    flex: 1;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--matcha-color-fg);
+
+    &.matcha-select-placeholder {
+      color: var(--matcha-color-text-placeholder);
+    }
+  }
+
+  .matcha-select-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--matcha-space-100, 8px);
+    transition: transform var(--matcha-duration-fast, 200ms) ease;
+    color: var(--matcha-color-text-placeholder);        // Figma #9AA0A6 dark / placeholder light
+    font-size: 16px;                                    // default SM
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    flex: none;
+
+    &.matcha-select-arrow-open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Seta por size (Figma matcha/field/select): SM 16 · MD 20 · LG 24
+  matcha-form-field[size="md"] matcha-select .matcha-select-arrow,
+  matcha-form-field[size="medium"] matcha-select .matcha-select-arrow {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+  matcha-form-field[size="lg"] matcha-select .matcha-select-arrow,
+  matcha-form-field[size="large"] matcha-select .matcha-select-arrow,
+  matcha-form-field[size="huge"] matcha-select .matcha-select-arrow {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+  }
+
+  // Tipografia do value por size: SM/tiny body-sm 12/16 · MD body-md 14/20 · LG body-lg 16/24.
+  // O tier SM usa a MESMA escala do input nativo (matcha-form-field.scss aplica
+  // --matcha-text-body-sm nesse tier). Antes o select herdava 14/20 junto do MD e ficava
+  // 2px maior que input/date dentro do MESMO matcha-field size="small".
+  matcha-form-field[size="lg"] .matcha-select-value,
+  matcha-form-field[size="large"] .matcha-select-value,
+  matcha-form-field[size="huge"] .matcha-select-value {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  matcha-form-field[size="sm"] .matcha-select-value,
+  matcha-form-field[size="tiny"] .matcha-select-value,
+  matcha-form-field[size="small"] .matcha-select-value {
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: var(--matcha-leading-body-sm, 16px);
+  }
+  matcha-form-field[size="md"] .matcha-select-value,
+  matcha-form-field[size="medium"] .matcha-select-value {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  // Disabled: seta cinza 38%
+  matcha-form-field[disabled] .matcha-select-arrow,
+  matcha-form-field[disabled="true"] .matcha-select-arrow,
+  matcha-select[disabled] .matcha-select-arrow,
+  .matcha-select-disabled .matcha-select-arrow {
+    color: var(--matcha-color-interaction-disabled-fg);
+  }
+
+  // ── Clear button (× quando clearable + tem valor) ──
+  // Size-responsive igual a seta (SM 16, MD 20, LG 24). Sem círculo no hover.
+  // NOTA: box dimensions + line-height CASAM exatamente com .matcha-select-arrow
+  // pra compensar os baselines diferentes dos icon fonts (close vs arrow_down).
+  .matcha-select-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;                                        // default SM (matches .matcha-select-arrow)
+    height: 16px;
+    margin: 0 var(--matcha-space-050, 4px) 0 0;         // gap antes da seta
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    color: var(--matcha-color-text-placeholder);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 16px;                                  // absoluto (match arrow) — essencial pro baseline
+    flex: none;
+    transition: color var(--matcha-duration-fast, 200ms) ease;
+
+    // Ícone interno: força display block + centralização via line-height
+    // pra neutralizar baseline gap dos glyphs
+    > [class^="i-matcha-"],
+    > [class*=" i-matcha-"] {
+      display: inline-block;
+      font-size: inherit;
+      width: 1em;
+      height: 1em;
+      line-height: 1em;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background: transparent;
+      color: var(--matcha-color-text-primary);
+    }
+
+    &:focus { outline: none; }
+    &:focus-visible {
+      outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-primary);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      border-radius: var(--matcha-radius-md, 4px);
+    }
+  }
+
+  // Clear × por size do form-field — casa 1:1 com a seta (Figma SM 16 · MD 20 · LG 24)
+  matcha-form-field[size="md"] matcha-select .matcha-select-clear,
+  matcha-form-field[size="medium"] matcha-select .matcha-select-clear {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+  }
+  matcha-form-field[size="lg"] matcha-select .matcha-select-clear,
+  matcha-form-field[size="large"] matcha-select .matcha-select-clear,
+  matcha-form-field[size="huge"] matcha-select .matcha-select-clear {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  // ── Disabled ──
+  .matcha-select-disabled {
+    .matcha-select-trigger {
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .matcha-select-value {
+      color: var(--matcha-color-disabled-fg);
+    }
+
+    .matcha-select-arrow {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Multi-select — chips dentro do trigger
+  // ═══════════════════════════════════════════════════════════════════════
+
+  // Lista de chips FORA da caixa. O chip em si é o matcha-chip (atômico) — aqui só o
+  // empilhamento. As ~95 linhas que desenhavam um chip de 22px próprio saíram: existiam
+  // porque o atômico (36px) não cabia DENTRO da caixa, e os chips deixaram de ficar lá.
+  .matcha-select-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--matcha-space-075, 6px);
+    margin-top: var(--matcha-space-100, 8px);
+  }
+
+
+
+
+
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Multi-select panel — checkmark + bulk actions header
+  // ═══════════════════════════════════════════════════════════════════════
+
+  // Wrapper dentro do panel. .matcha-select-options-multi modifica options filhas.
+  .matcha-select-options-multi {
+    // Checkmark nas options selecionadas — aparece ANTES do label.
+    // Usa pseudo-element pra não precisar mexer no template de matcha-option.
+    matcha-option[aria-selected="true"] {
+      padding-left: var(--matcha-space-400, 32px);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: var(--matcha-space-150, 12px);
+        top: 50%;
+        width: 16px;
+        height: 16px;
+        margin-top: -8px;
+        background-color: var(--matcha-color-accent);
+        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
+        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
+        mask-size: contain;
+        -webkit-mask-size: contain;
+        mask-repeat: no-repeat;
+        -webkit-mask-repeat: no-repeat;
+      }
+    }
+
+    // Reserva espaço pro checkmark mesmo nas não-selecionadas (alinhamento do texto)
+    matcha-option {
+      padding-left: var(--matcha-space-400, 32px);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Selecionadas fixadas no topo ([pinSelected]) — companheiro do modo sem chips
+  // ═══════════════════════════════════════════════════════════════════════
+  // Sem a lista de chips abaixo do campo, o que já foi escolhido só existe DENTRO do
+  // painel — e numa lista longa some no primeiro scroll. A fixação sobe o bloco
+  // selecionado pro topo com `order`: as options são content-projected (quase sempre
+  // por um `@for` do consumidor), então mover os nós quebraria o próximo update da
+  // lista. `order` reordena só a pintura; o DOM fica intacto.
+  //
+  // Quem congela a ordem é o TS (snapshot na abertura do painel) — sem isso a option
+  // pularia de lugar debaixo do cursor a cada clique.
+  .matcha-select-options-pinned {
+    display: flex;
+    flex-direction: column;
+
+    // Ordens explícitas: com `order` no jogo, quem não declara cai em 0. A busca e o
+    // header de ações em lote precisam continuar ACIMA do bloco fixado; carregando e
+    // vazio, ABAIXO de tudo.
+    > .matcha-select-search        { order: -3; }
+    > .matcha-select-bulk-actions  { order: -2; }
+    > .matcha-select-option-pinned { order: -1; }
+    > .matcha-select-loading,
+    > .matcha-select-empty         { order: 1; }
+  }
+
+  // Divisória do bloco fixado — ancorada na ÚLTIMA fixada VISÍVEL, e só quando existe
+  // opção não fixada embaixo (senão seria uma linha solta no fim da lista).
+  // Pseudo-elemento, não `border-bottom`: a option tem margem lateral própria (4px) e a
+  // borda pararia antes da parede do painel, ao contrário da divisória do header de
+  // ações em lote — o negativo sangra até lá sem deslocar o item.
+  .matcha-select-option-pinned-last::after {
+    content: '';
+    position: absolute;
+    left: calc(var(--matcha-space-050, 4px) * -1);
+    right: calc(var(--matcha-space-050, 4px) * -1);
+    // Meio do respiro entre duas options (margem vertical de 2px em cada uma).
+    bottom: calc((var(--matcha-space-025, 2px) + 1px) * -1);
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0, 0, 0, 0.08));
+  }
+
+  // Bulk actions header (Selecionar todos / Limpar / contagem)
+  .matcha-select-bulk-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0,0,0,0.08));
+    margin-bottom: var(--matcha-space-050, 4px);
+  }
+
+  .matcha-select-bulk-btn {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--matcha-color-primary);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
+    border-radius: var(--matcha-radius-sm, 4px);
+    transition: background-color var(--matcha-duration-instant, 80ms) ease;
+
+    &:hover:not(:disabled) { background: var(--matcha-color-primary-surface-hover); }
+    &:disabled { pointer-events: none; opacity: var(--matcha-opacity-disabled, 0.38); }
+    &:focus-visible {
+      outline: 2px solid var(--matcha-color-primary);
+      outline-offset: 1px;
+    }
+  }
+
+  .matcha-select-bulk-btn-ghost {
+    color: var(--matcha-color-text-secondary);
+    font-weight: 400;
+  }
+
+  .matcha-select-bulk-count {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--matcha-color-text-placeholder);
+    font-weight: 400;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Searchable — input de busca no topo do panel + empty state
+  // ═══════════════════════════════════════════════════════════════════════
+
+  // Zera padding-top do panel quando o search é a 1ª coisa dentro. O search
+  // já tem padding próprio; o padding do panel (8px) somava e gerava gap
+  // visual entre trigger e o campo de busca.
+  .matcha-panel:has(> .matcha-select-options > .matcha-select-search:first-child) {
+    padding-top: 0;
+  }
+
+  .matcha-select-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0,0,0,0.08));
+    transition: border-color var(--matcha-duration-instant, 80ms) ease;
+
+    &:focus-within {
+      border-bottom-color: var(--matcha-color-primary);
+    }
+  }
+
+  // Lupa no lugar do placeholder textual "Buscar..." — ícone não precisa de i18n.
+  .matcha-select-search-icon {
+    flex-shrink: 0;
+    color: var(--matcha-color-text-placeholder);
+    pointer-events: none;
+  }
+
+  // Input plano: sem border/background próprios. O container `.matcha-select-search`
+  // faz o papel de "campo" via padding + divider bottom, e focus-within muda a cor
+  // do divider. Evita efeito "card dentro de card" dentro do panel.
+  .matcha-select-search-input {
+    width: 100%;
+    height: 24px;
+    padding: 0 var(--matcha-space-400, 32px) 0 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--matcha-color-text-primary);
+    font: inherit;
+    font-size: 13px;
+    outline: none;
+
+    &::placeholder { color: var(--matcha-color-text-placeholder); }
+    &:focus { outline: none; }
+  }
+
+  .matcha-select-search-clear {
+    position: absolute;
+    right: calc(var(--matcha-space-150, 12px) + var(--matcha-space-100, 8px));
+    top: 50%;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--matcha-color-text-placeholder);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, rgba(0,0,0,0.12));
+      color: var(--matcha-color-text-primary);
+    }
+  }
+
+  .matcha-select-empty {
+    padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px);
+    text-align: center;
+    color: var(--matcha-color-text-placeholder);
+    font-size: 13px;
+    font-style: italic;
+  }
+
+  // Loading do painel (backend search mode) — mesmo tom do empty state, com spinner.
+  .matcha-select-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-200, 16px);
+    color: var(--matcha-color-text-placeholder);
+    font-size: 13px;
+  }
+
+  .matcha-select-loading-spinner {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    // Mesma cor do spinner do trigger (.matcha-form-field-spinner) — um estado de
+    // loading, uma cor. Antes era accent e o campo mostrava azul + verde ao mesmo tempo.
+    border: 2px solid var(--matcha-color-surface-border);
+    border-top-color: var(--matcha-color-primary);
+    border-radius: 50%;
+    animation: matcha-select-loading-spin 0.7s linear infinite;
+  }
+
+  @keyframes matcha-select-loading-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Bottom-sheet (mobile) — aligned com Figma matcha/field/select/mobile-sheet
+  // Ativa automaticamente em <=768px (ou via [mode]="'sheet'"). Full-width bottom-anchored.
+  // ═══════════════════════════════════════════════════════════════════════
+  .matcha-select-sheet-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 10002;
+    // Scrim 40% — cor do token com alpha aplicado via rgba (token resolve pra cor sólida)
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-fast, 200ms) ease;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    &.matcha-select-sheet-open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .matcha-select-sheet {
+    position: relative;
+    width: 100%;
+    max-height: 90vh;
+    min-height: 50vh;
+    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
+    border-top-left-radius: var(--matcha-radius-xl, 16px);
+    border-top-right-radius: var(--matcha-radius-xl, 16px);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    // Slide-up animation — inicia off-screen e anima em.
+    // Classe `.matcha-select-sheet-open` aplicada diretamente (não via parent)
+    // pra evitar problemas de specificity com containers aninhados.
+    transform: translateY(100%);
+    transition: transform var(--matcha-duration-fast, 200ms) cubic-bezier(0.2, 0, 0, 1);
+
+    &.matcha-select-sheet-open {
+      transform: translateY(0);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .matcha-select-sheet-handle {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 4px;
+    margin: var(--matcha-space-150, 12px) auto var(--matcha-space-100, 8px);
+    background: var(--matcha-color-surface-border);
+    opacity: 0.6;
+    border-radius: 2px;
+  }
+
+  .matcha-select-sheet-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+  }
+
+  .matcha-select-sheet-title {
+    flex: 1 1 auto;
+    margin: 0;
+    font-family: var(--matcha-font-family);
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--matcha-color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .matcha-select-sheet-close {
+    flex: 0 0 auto;
+    appearance: none;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--matcha-color-text-secondary);
+    cursor: pointer;
+    font-size: 24px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--matcha-duration-instant, 80ms) ease;
+
+    &:hover { background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.08)); }
+    &:focus-visible {
+      outline: 2px solid var(--matcha-color-primary);
+      outline-offset: -2px;
+    }
+  }
+
+  // Sheet-mode ajusta o scroll da lista pra caber dentro da sheet
+  .matcha-select-options-sheet {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .matcha-select-sheet-list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--matcha-space-050, 4px) 0;
+  }
+
+  // Sheet-mode options são full-width com padding mais generoso pra toque
+  .matcha-select-options-sheet matcha-option {
+    padding-left: var(--matcha-space-200, 16px);
+    padding-right: var(--matcha-space-200, 16px);
+    min-height: 48px; // Alvo tátil iOS (44px mínimo + folga)
+  }
+
+  // Safe-area bottom — respeita env() do iOS + fallback 12px
+  .matcha-select-sheet-safe-area {
+    flex: 0 0 auto;
+    height: calc(env(safe-area-inset-bottom, 0px) + var(--matcha-space-150, 12px));
+    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
+  }
+
+  // Quando sheet-mode tá ativo, esconder a arrow do trigger faz menos sentido —
+  // mas mantemos porque ainda comunica "expandable". Tap target expandido.
+  @media (max-width: 768px) {
+    .matcha-select-trigger {
+      min-height: 48px;
+    }
+  }
+
+}