@inchurch/matcha-theme 22.33.0 → 22.35.0

package/abstracts/_colors.scss

@@ -66,6 +66,12 @@
         border-color: var(--matcha-color-#{$colorName});
     }
 
+    // O loop gerava `-alpha` para background e color, mas não para border-color — então
+    // `border-color-green-alpha` era classe morta, sem aviso nenhum. O token existe.
+    .border-color-#{$colorName}-alpha {
+        border-color: var(--matcha-color-#{$colorName}-alpha);
+    }
+
     .color-#{$colorName} {
         color: var(--matcha-color-#{$colorName}) !important;
     }
@@ -158,6 +164,51 @@
 .color-text-muted     { color: var(--matcha-color-text-muted) !important; }
 .color-text-hint      { color: var(--matcha-color-text-hint) !important; }
 
+// -------------------------------------------------------------------------------------------------------------------
+// @ Namespaces documentados no Figma que NÃO tinham classe utilitária
+// -------------------------------------------------------------------------------------------------------------------
+// Estes tokens sempre foram emitidos por matcha-css-custom-properties, mas nenhuma classe os
+// alcançava: o consumidor só chegava neles por `var(--matcha-color-*)` dentro de SCSS de
+// componente — exatamente o que a regra do painel proíbe ("nenhum estilo mora só na aplicação").
+// Na prática isso empurrava o consumidor de volta pra paleta Material legada ou pra hex cravado.
+//
+// A lista é fechada de propósito, e cada nome existe em tokens/_color-tokens.scss. Ao acrescentar
+// um token novo por lá, acrescente aqui também — ou ele nasce inalcançável por classe.
+$-namespaced-tokens:
+    // Palette — cor de IDENTIDADE (categoria, marca, série). Não confundir com semântica de estado.
+    "palette-teal", "palette-teal-light", "palette-teal-alpha",
+    "palette-light-blue", "palette-light-blue-light", "palette-light-blue-alpha",
+    "palette-purple", "palette-purple-light", "palette-purple-alpha", "palette-purple-contrast",
+    "palette-pink", "palette-pink-light", "palette-pink-alpha",
+    "palette-orange", "palette-orange-light", "palette-orange-alpha",
+    "palette-yellow", "palette-yellow-light", "palette-yellow-alpha",
+    // Chart — séries de gráfico, com contrast e alpha
+    "chart-series-1", "chart-series-2", "chart-series-3", "chart-series-4", "chart-series-5",
+    "chart-series-1-contrast", "chart-series-2-contrast", "chart-series-3-contrast",
+    "chart-series-4-contrast", "chart-series-5-contrast",
+    "chart-series-1-alpha", "chart-series-2-alpha", "chart-series-3-alpha",
+    "chart-series-4-alpha", "chart-series-5-alpha",
+    // Icon
+    "icon-default", "icon-active",
+    // Interaction
+    "interaction-disabled-bg", "interaction-disabled-bg-alpha", "interaction-disabled-fg",
+    "interaction-disabled-border",
+    // Surface — as variantes que o bloco estático acima não cobria
+    "surface-bg-inverse", "surface-bg-inverse-alpha", "surface-card", "surface-card-strong",
+    "surface-inner", "surface-card-inverse", "surface-sidebar", "surface-sidebar-hover",
+    "surface-table-row-hover", "surface-border-strong", "surface-hover";
+
+// Os cinco atributos, uniformemente — mesma convenção do loop de $color-names acima. Gerar só o
+// "atributo que faz sentido" para cada token exigiria julgamento por nome, e a experiência do
+// painel mostra que a lacuna é pior que o excesso: classe faltando vira hex cravado.
+@each $-token in $-namespaced-tokens {
+    .background-#{$-token} { background: var(--matcha-color-#{$-token}); }
+    .border-color-#{$-token} { border-color: var(--matcha-color-#{$-token}); }
+    .color-#{$-token} { color: var(--matcha-color-#{$-token}) !important; }
+    .fill-#{$-token} { fill: var(--matcha-color-#{$-token}); }
+    .stroke-#{$-token} { stroke: var(--matcha-color-#{$-token}); }
+}
+
 .color-unset {
     color: unset;
 }

package/components/matcha-file-uploader.scss

@@ -55,7 +55,10 @@
   }
 
   .matcha-file-uploader-file__thumb {
-    background: var(--matcha-color-elevation-surface-3, var(--matcha-color-surface-card));
+    // interaction-disabled-bg, e nao elevation-surface-3: a moldura do arquivo nao e uma
+    // superficie elevada, e um fundo neutro atras de um icone — e o surface-3 desaparecia
+    // sobre o card em que a linha vive.
+    background: var(--matcha-color-interaction-disabled-bg);
     color: var(--matcha-color-text-muted);
   }
 

package/components/matcha-panel.scss

@@ -12,6 +12,10 @@
     display: block;
 }
 
+.matcha-panel-overlay[hidden] {
+    overflow: hidden;
+}
+
 .matcha-panel-pane {
     position: absolute;
     display: block;
@@ -86,9 +90,15 @@
 // IMPORTANTE: !important porque o mixin matcha-panel-theme pode ser aplicado com
 // wrapper de tema (ex: body.theme-dark .matcha-panel), elevando especificidade pra
 // 0-2-0, empatando com :has() e vencendo por ordem no cascade.
-.matcha-panel:has(.matcha-calendar),
-.matcha-panel:has(matcha-time-panel),
-.matcha-panel:has(.matcha-time-panel) {
+// FILHO DIRETO (`> `), não descendente: o alvo é "o conteúdo do painel É um
+// calendário/time-panel". Um painel COMPOSTO que só contém um campo de data mais
+// embaixo (matcha-period: presets + dois matcha-date) tem o calendar aninhado no
+// DOM mesmo com o picker fechado — com `:has(.matcha-calendar)` descendente ele
+// perdia fundo, sombra, padding e o max-height (virava lista solta e transbordava
+// a viewport).
+.matcha-panel:has(> .matcha-calendar),
+.matcha-panel:has(> matcha-time-panel),
+.matcha-panel:has(> .matcha-time-panel) {
     background: transparent !important;
     box-shadow: none !important;
     border: none !important;
@@ -109,14 +119,18 @@
 // matcha-date pintava o scrim blurred permanente em mobile e o `pointer-events:
 // auto` bloqueava TODOS os cliques da tela.
 @media (max-width: 639px) {
-    .matcha-panel-overlay:not([hidden]):has(.matcha-calendar) {
+    // Cadeia completa (`> pane > panel > calendar`): o alvo é o overlay do PRÓPRIO
+    // painel-calendário. Sem a cadeia, um painel composto que só aninha um
+    // matcha-date (matcha-period) casava pelo calendar do filho e ganhava scrim
+    // + blur em mobile sem nunca virar sheet.
+    .matcha-panel-overlay:not([hidden]):has(> .matcha-panel-pane > .matcha-panel > .matcha-calendar) {
         pointer-events: auto !important;                   // precisa capturar o backdrop
         background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
         backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
         animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
     }
 
-    .matcha-panel-overlay:not([hidden]) .matcha-panel-pane:has(.matcha-calendar) {
+    .matcha-panel-overlay:not([hidden]) .matcha-panel-pane:has(> .matcha-panel > .matcha-calendar) {
         position: fixed !important;
         inset: auto 0 0 0 !important;
         top: auto !important;
@@ -131,7 +145,7 @@
     }
 
     // Cartão do calendar ocupa a largura toda, com radius só em cima
-    .matcha-panel:has(.matcha-calendar) .matcha-calendar {
+    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar {
         width: 100%;
         min-width: 0;
         border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
@@ -139,10 +153,10 @@
     }
 
     // Dual-month cai pra empilhado em mobile
-    .matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual {
+    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual {
         min-width: 0;
     }
-    .matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual .matcha-calendar-months {
+    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual .matcha-calendar-months {
         flex-direction: column;
     }
 }

package/components/matcha-period.scss

@@ -0,0 +1,174 @@
+// =============================================================================
+// matcha-period.scss — Seletor de período (presets + período personalizado)
+// Gatilho espelha matcha/field/select (mesma altura/tipografia/caret);
+// o conteúdo do painel é lista de matcha-option + editor de duas datas.
+// =============================================================================
+
+// ── Structural (fora do mixin) ──────────────────────────────────────────────
+
+.matcha-period-trigger {
+    position: relative;
+
+    &[aria-disabled='true'] {
+        pointer-events: none;
+        cursor: default;
+    }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-period-theme($theme) {
+    matcha-period {
+        display: block;
+        width: 100%;
+    }
+
+    .matcha-period-container {
+        position: relative;
+        display: block;
+        width: 100%;
+    }
+
+    // ── Gatilho ────────────────────────────────────────────────────────────
+    .matcha-period-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        box-sizing: border-box;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+    }
+
+    .matcha-period-value {
+        flex: 1;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--matcha-color-fg);
+
+        &.matcha-period-placeholder {
+            color: var(--matcha-color-text-placeholder);
+        }
+    }
+
+    .matcha-period-arrow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: var(--matcha-icon-size-sm, 16px);
+        height: var(--matcha-icon-size-sm, 16px);
+        margin-left: var(--matcha-space-100, 8px);
+        color: var(--matcha-color-text-placeholder);
+        transition: transform var(--matcha-duration-fast, 200ms) ease;
+
+        &.matcha-period-arrow-open {
+            transform: rotate(180deg);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
+    // Tipografia do valor por size — mesma escala do matcha-select/input:
+    // SM body-sm 12/16 · MD 14/20 · LG 16/24.
+    matcha-form-field[size='sm'] .matcha-period-value,
+    matcha-form-field[size='tiny'] .matcha-period-value,
+    matcha-form-field[size='small'] .matcha-period-value {
+        font-size: var(--matcha-text-body-sm, 12px);
+        line-height: var(--matcha-leading-body-sm, 16px);
+    }
+
+    matcha-form-field[size='md'] .matcha-period-value,
+    matcha-form-field[size='medium'] .matcha-period-value {
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+    }
+
+    matcha-form-field[size='lg'] .matcha-period-value,
+    matcha-form-field[size='large'] .matcha-period-value,
+    matcha-form-field[size='huge'] .matcha-period-value {
+        font-size: var(--matcha-text-body-lg, 16px);
+        line-height: var(--matcha-leading-body-lg, 24px);
+    }
+
+    // O caret NÃO escala por size (fica 16 em todos os tiers): o glyph vem do
+    // <matcha-icon size="sm">, então crescer só a caixa deixaria o ícone flutuando
+    // no meio. Escalar de verdade (16/20/24, como o matcha-select) depende do field
+    // repassar `size` pro matcha-period — backlog matcha-period-002.
+
+    // Disabled: caret esmaecido (o esmaecimento do texto vem do matcha-form-field)
+    matcha-form-field[disabled] .matcha-period-arrow,
+    matcha-form-field[disabled='true'] .matcha-period-arrow,
+    .matcha-period-disabled .matcha-period-arrow {
+        color: var(--matcha-color-interaction-disabled-fg);
+    }
+
+    // ── Conteúdo do painel ────────────────────────────────────────────────
+    .matcha-period-panel {
+        display: flex;
+        flex-direction: column;
+        padding: var(--matcha-space-050, 4px) 0;
+    }
+
+    .matcha-period-presets {
+        display: flex;
+        flex-direction: column;
+    }
+
+    // Atalho "Período personalizado" — ghost com texto accent. O ghost canônico
+    // usa text-primary (intent do Figma pro botão); aqui o atalho precisa ler como
+    // ação secundária dentro do painel, e o slot --matcha-button-ghost-text é o
+    // ponto de override previsto pelo matcha-button (token, não hex).
+    .matcha-period-custom-toggle {
+        --matcha-button-ghost-text: var(--matcha-color-accent);
+        align-self: flex-start;
+        margin: var(--matcha-space-050, 4px) var(--matcha-space-150, 12px);
+    }
+
+    .matcha-period-custom {
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-150, 12px);
+        padding: 0 var(--matcha-space-150, 12px) var(--matcha-space-150, 12px);
+    }
+
+    .matcha-period-custom-fields {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    .matcha-period-error {
+        margin: 0;
+        color: var(--matcha-color-danger);
+        font-size: var(--matcha-text-body-sm, 12px);
+        line-height: var(--matcha-leading-body-sm, 16px);
+    }
+
+    .matcha-period-apply {
+        width: 100%;
+    }
+
+    // Mobile: uma data por linha sempre — 2 colunas caberiam em largura, mas
+    // ficam apertadas demais pro alvo de toque do ícone de calendário.
+    @media (max-width: 639px) {
+        .matcha-period-custom-fields {
+            grid-template-columns: 1fr;
+        }
+    }
+}

package/components/matcha-select.scss

@@ -285,6 +285,46 @@
     }
   }
 
+  // ═══════════════════════════════════════════════════════════════════════
+  // 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;

package/main.scss

@@ -135,6 +135,8 @@
 @use "./components/matcha-date" as *; // matcha-date-theme($theme)
 @forward "./components/matcha-calendar";
 @use "./components/matcha-calendar" as *; // matcha-calendar-theme($theme)
+@forward "./components/matcha-period";
+@use "./components/matcha-period" as *; // matcha-period-theme($theme)
 @forward "./components/matcha-page-builder";
 @use "./components/matcha-page-builder" as *; // matcha-page-builder($theme)
 @forward "./components/matcha-snack-bar";
@@ -294,6 +296,7 @@
     @include matcha-chip-theme($theme);
     @include matcha-date-theme($theme);
     @include matcha-calendar-theme($theme);
+    @include matcha-period-theme($theme);
     @include matcha-timepicker-theme($theme);
     @include matcha-badge-theme($theme);
     @include matcha-empty-state-theme($theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.33.0",
+  "version": "22.35.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {