@inchurch/matcha-theme 20.0.3

package/components/matcha-select.scss

@@ -0,0 +1,661 @@
+// =============================================================================
+// 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, #{getAccent($theme)});
+      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, #{getForeground($theme)});
+
+    &.matcha-select-placeholder {
+      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+    }
+  }
+
+  // Combobox input (searchable + single): plano, herda tipografia do trigger,
+  // sem border/background próprios — parece o próprio campo.
+  .matcha-select-combobox-input {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+    font: inherit;
+    font-family: var(--matcha-font-family);
+    outline: none;
+    text-overflow: ellipsis;
+    cursor: text;
+
+    &::placeholder {
+      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+    }
+
+    &:disabled {
+      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      cursor: not-allowed;
+      background: transparent;
+    }
+  }
+
+  // Modo combobox: trigger não tem cursor pointer (quem manda é o input).
+  .matcha-select-trigger.matcha-select-combobox {
+    cursor: text;
+  }
+
+  .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 (Figma): SM/MD body-md 14/20 · LG body-lg 16/24
+  matcha-form-field[size="lg"] .matcha-select-value,
+  matcha-form-field[size="lg"] .matcha-select-combobox-input,
+  matcha-form-field[size="large"] .matcha-select-value,
+  matcha-form-field[size="large"] .matcha-select-combobox-input,
+  matcha-form-field[size="huge"] .matcha-select-value,
+  matcha-form-field[size="huge"] .matcha-select-combobox-input {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  matcha-form-field[size="sm"] .matcha-select-value,
+  matcha-form-field[size="sm"] .matcha-select-combobox-input,
+  matcha-form-field[size="md"] .matcha-select-value,
+  matcha-form-field[size="md"] .matcha-select-combobox-input,
+  matcha-form-field[size="tiny"] .matcha-select-value,
+  matcha-form-field[size="tiny"] .matcha-select-combobox-input,
+  matcha-form-field[size="small"] .matcha-select-value,
+  matcha-form-field[size="small"] .matcha-select-combobox-input,
+  matcha-form-field[size="medium"] .matcha-select-value,
+  matcha-form-field[size="medium"] .matcha-select-combobox-input {
+    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, #{getDisabledContrast($theme)});
+    }
+
+    .matcha-select-arrow {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Multi-select — chips dentro do trigger
+  // ═══════════════════════════════════════════════════════════════════════
+
+  // Container dos chips (substitui .matcha-select-value quando multiple=true)
+  .matcha-select-chips {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--matcha-space-050, 4px);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  // Trigger em modo multi precisa de padding vertical leve pras chips respirarem
+  // e altura automática (cresce com número de chips).
+  .matcha-select-trigger.matcha-select-multiple {
+    padding-top: var(--matcha-space-025, 2px);
+    padding-bottom: var(--matcha-space-025, 2px);
+    min-height: inherit;
+    flex-wrap: nowrap;
+  }
+
+  // Chip individual — pill pequeno com label + × remove
+  .matcha-select-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--matcha-space-050, 4px);
+    max-width: 100%;
+    height: 22px;
+    padding: 0 var(--matcha-space-075, 6px);
+    background: var(--matcha-color-accent-2-surface, rgba(0,0,0,0.08));
+    color: var(--matcha-color-text-primary);
+    border-radius: var(--matcha-radius-pill, 12px);
+    font-family: var(--matcha-font-family);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  // Label do chip (trunca com ellipsis em chips longos)
+  .matcha-select-chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 160px;
+  }
+
+  // Botão × individual de cada chip
+  .matcha-select-chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--matcha-color-text-placeholder);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 14px;
+    transition: background-color var(--matcha-duration-instant, 80ms) ease,
+                color           var(--matcha-duration-instant, 80ms) ease;
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, rgba(0,0,0,0.12));
+      color: var(--matcha-color-text-primary);
+    }
+
+    &:focus { outline: none; }
+    &:focus-visible {
+      outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-primary);
+      outline-offset: 1px;
+    }
+  }
+
+  // Chip sizes acompanham o size do form-field (opcional — mantém SM como default)
+  matcha-form-field[size="md"] matcha-select .matcha-select-chip,
+  matcha-form-field[size="medium"] matcha-select .matcha-select-chip {
+    height: 24px;
+    font-size: 13px;
+  }
+  matcha-form-field[size="lg"] matcha-select .matcha-select-chip,
+  matcha-form-field[size="large"] matcha-select .matcha-select-chip {
+    height: 28px;
+    font-size: 14px;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // 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-primary);
+        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);
+    }
+  }
+
+  // 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;
+    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);
+    }
+  }
+
+  // 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;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // 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);
+    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);
+  }
+
+  // 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;
+    }
+  }
+
+}