@inchurch/matcha-theme 22.38.2 → 22.38.3

package/components/matcha-panel.scss

@@ -1,216 +1,216 @@
-@use "sass:map";
-
-// Estrutura Overlay Local
-.matcha-panel-overlay {
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    // Acima de modal (999) e overlay base (1000) — panel pode ser aberto dentro de modal
-    z-index: var(--matcha-z-popover-floating, 10001);
-    pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
-    display: block;
-}
-
-.matcha-panel-overlay[hidden] {
-    overflow: hidden;
-}
-
-.matcha-panel-pane {
-    position: absolute;
-    display: block;
-    max-height: 100%;
-    pointer-events: auto; // Reativa cliques para o painel em si
-    box-sizing: border-box;
-}
-
-.matcha-panel {
-    // Figma matcha/panel (14276:67): radius xl, padding 8/0, max-height 280
-    border-radius: var(--matcha-radius-xl, 16px);
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    max-height: var(--matcha-panel-max-height, 280px);
-    width: 100%;
-    padding: var(--matcha-space-100, 8px) 0;
-
-    // Animações (fade + scale leve, easing standard)
-    opacity: 0;
-    transform: scale(0.96) translateY(calc(-1 * var(--matcha-space-050, 4px)));
-    transition: opacity var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
-                transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
-
-    position: relative;
-    z-index: auto;
-
-    // Estados de abertura
-    &.matcha-panel-open {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
-
-    // Posicionamento vertical
-    &.matcha-panel-top {
-        transform-origin: bottom center;
-    }
-
-    &.matcha-panel-bottom {
-        transform-origin: top center;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .matcha-panel {
-        transition: none;
-    }
-}
-
-// Conteúdo do painel
-.matcha-panel-content {
-    overflow-y: auto;
-    flex: 1;
-}
-
-// Painéis de menu nunca rolam na horizontal. Como .matcha-panel declara só
-// `overflow-y: auto`, o `overflow-x` computa como `auto` (regra CSS: um eixo
-// visible + o outro não-visible → o visible vira auto). Numa lista longa (scroll
-// vertical) o scrollbar vertical reduz a largura útil e os itens em `nowrap`
-// induzem um scrollbar horizontal fantasma. Fixar overflow-x hidden elimina a
-// barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
-// submenus são portados pro <body> (não são descendentes) — logo não são clipados;
-// select/autocomplete/calendar ficam intactos.
-.matcha-panel:has(> .matcha-menu-content),
-.matcha-panel:has(.matcha-select-options) {
-    overflow-x: hidden;
-}
-
-// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
-// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
-// apenas de container de posicionamento — evita "duplicar" visual do cartão.
-// 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.
-// 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;
-    border-radius: 0 !important;
-    padding: 0 !important;
-    max-height: none !important;
-    overflow: visible !important;
-}
-
-// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
-// O panel com calendar vira um painel full-width grudado no rodapé da tela,
-// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
-//
-// IMPORTANTE: escopar ao overlay ABERTO (`:not([hidden])`). O overlay fica sempre
-// no DOM (o `display: block` da base anula o atributo [hidden] de propósito — o
-// posicionamento mede o conteúdo fechado), e o <matcha-calendar> do matcha-date é
-// renderizado mesmo com o picker fechado. Sem o escopo, qualquer página com um
-// matcha-date pintava o scrim blurred permanente em mobile e o `pointer-events:
-// auto` bloqueava TODOS os cliques da tela.
-@media (max-width: 639px) {
-    // 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-panel > .matcha-calendar) {
-        position: fixed !important;
-        inset: auto 0 0 0 !important;
-        top: auto !important;
-        left: 0 !important;
-        right: 0 !important;
-        bottom: 0 !important;
-        width: 100% !important;
-        min-width: 0 !important;
-        transform: none !important;
-        max-height: 90vh;
-        animation: matcha-panel-sheet-up var(--matcha-duration-normal, 220ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
-    }
-
-    // Cartão do calendar ocupa a largura toda, com radius só em cima
-    .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;
-        padding: var(--matcha-space-250, 20px);
-    }
-
-    // Dual-month cai pra empilhado em mobile
-    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual {
-        min-width: 0;
-    }
-    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual .matcha-calendar-months {
-        flex-direction: column;
-    }
-}
-
-@keyframes matcha-panel-sheet-up {
-    from { transform: translateY(100%); }
-    to   { transform: translateY(0); }
-}
-
-@keyframes matcha-panel-backdrop-fade {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-@mixin matcha-panel-theme($theme) {
-
-    .matcha-panel {
-        // Floating overlay (dropdown/popover) — surface-card-strong (pure white
-        // light, lifted dark). Inline cards usam soft default; panel flutua.
-        background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
-        color: var(--matcha-color-text-primary, var(--matcha-color-fg));
-
-        // Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
-        box-shadow: var(--matcha-shadow-3);
-        border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-
-        &:focus-within {
-            box-shadow: var(--matcha-shadow-4);
-        }
-    }
-
-    // Responsividade — em mobile, panel mais compacto
-    @media (max-width: 768px) {
-        .matcha-panel {
-            max-height: var(--matcha-space-1600, 192px);
-            min-width:  var(--matcha-space-1200, 96px);
-            border-radius: var(--matcha-radius-lg, 12px);
-        }
-    }
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    .matcha-panel {
-        background: Canvas !important;
-        border: 1px solid CanvasText !important;
-        box-shadow: none !important;
-    }
-}
-
-// ── Print ──
-// Panels são floating/popover — somem em papel.
-@media print {
-    .matcha-panel {
-        display: none !important;
-    }
-}
+@use "sass:map";
+
+// Estrutura Overlay Local
+.matcha-panel-overlay {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    // Acima de modal (999) e overlay base (1000) — panel pode ser aberto dentro de modal
+    z-index: var(--matcha-z-popover-floating, 10001);
+    pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
+    display: block;
+}
+
+.matcha-panel-overlay[hidden] {
+    overflow: hidden;
+}
+
+.matcha-panel-pane {
+    position: absolute;
+    display: block;
+    max-height: 100%;
+    pointer-events: auto; // Reativa cliques para o painel em si
+    box-sizing: border-box;
+}
+
+.matcha-panel {
+    // Figma matcha/panel (14276:67): radius xl, padding 8/0, max-height 280
+    border-radius: var(--matcha-radius-xl, 16px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    max-height: var(--matcha-panel-max-height, 280px);
+    width: 100%;
+    padding: var(--matcha-space-100, 8px) 0;
+
+    // Animações (fade + scale leve, easing standard)
+    opacity: 0;
+    transform: scale(0.96) translateY(calc(-1 * var(--matcha-space-050, 4px)));
+    transition: opacity var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+                transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+
+    position: relative;
+    z-index: auto;
+
+    // Estados de abertura
+    &.matcha-panel-open {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+
+    // Posicionamento vertical
+    &.matcha-panel-top {
+        transform-origin: bottom center;
+    }
+
+    &.matcha-panel-bottom {
+        transform-origin: top center;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matcha-panel {
+        transition: none;
+    }
+}
+
+// Conteúdo do painel
+.matcha-panel-content {
+    overflow-y: auto;
+    flex: 1;
+}
+
+// Painéis de menu nunca rolam na horizontal. Como .matcha-panel declara só
+// `overflow-y: auto`, o `overflow-x` computa como `auto` (regra CSS: um eixo
+// visible + o outro não-visible → o visible vira auto). Numa lista longa (scroll
+// vertical) o scrollbar vertical reduz a largura útil e os itens em `nowrap`
+// induzem um scrollbar horizontal fantasma. Fixar overflow-x hidden elimina a
+// barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
+// submenus são portados pro <body> (não são descendentes) — logo não são clipados;
+// select/autocomplete/calendar ficam intactos.
+.matcha-panel:has(> .matcha-menu-content),
+.matcha-panel:has(.matcha-select-options) {
+    overflow-x: hidden;
+}
+
+// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
+// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
+// apenas de container de posicionamento — evita "duplicar" visual do cartão.
+// 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.
+// 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;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+}
+
+// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
+// O panel com calendar vira um painel full-width grudado no rodapé da tela,
+// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
+//
+// IMPORTANTE: escopar ao overlay ABERTO (`:not([hidden])`). O overlay fica sempre
+// no DOM (o `display: block` da base anula o atributo [hidden] de propósito — o
+// posicionamento mede o conteúdo fechado), e o <matcha-calendar> do matcha-date é
+// renderizado mesmo com o picker fechado. Sem o escopo, qualquer página com um
+// matcha-date pintava o scrim blurred permanente em mobile e o `pointer-events:
+// auto` bloqueava TODOS os cliques da tela.
+@media (max-width: 639px) {
+    // 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-panel > .matcha-calendar) {
+        position: fixed !important;
+        inset: auto 0 0 0 !important;
+        top: auto !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        min-width: 0 !important;
+        transform: none !important;
+        max-height: 90vh;
+        animation: matcha-panel-sheet-up var(--matcha-duration-normal, 220ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+    }
+
+    // Cartão do calendar ocupa a largura toda, com radius só em cima
+    .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;
+        padding: var(--matcha-space-250, 20px);
+    }
+
+    // Dual-month cai pra empilhado em mobile
+    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual {
+        min-width: 0;
+    }
+    .matcha-panel:has(> .matcha-calendar) > .matcha-calendar.is-dual .matcha-calendar-months {
+        flex-direction: column;
+    }
+}
+
+@keyframes matcha-panel-sheet-up {
+    from { transform: translateY(100%); }
+    to   { transform: translateY(0); }
+}
+
+@keyframes matcha-panel-backdrop-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@mixin matcha-panel-theme($theme) {
+
+    .matcha-panel {
+        // Floating overlay (dropdown/popover) — surface-card-strong (pure white
+        // light, lifted dark). Inline cards usam soft default; panel flutua.
+        background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
+        color: var(--matcha-color-text-primary, var(--matcha-color-fg));
+
+        // Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
+        box-shadow: var(--matcha-shadow-3);
+        border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+
+        &:focus-within {
+            box-shadow: var(--matcha-shadow-4);
+        }
+    }
+
+    // Responsividade — em mobile, panel mais compacto
+    @media (max-width: 768px) {
+        .matcha-panel {
+            max-height: var(--matcha-space-1600, 192px);
+            min-width:  var(--matcha-space-1200, 96px);
+            border-radius: var(--matcha-radius-lg, 12px);
+        }
+    }
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    .matcha-panel {
+        background: Canvas !important;
+        border: 1px solid CanvasText !important;
+        box-shadow: none !important;
+    }
+}
+
+// ── Print ──
+// Panels são floating/popover — somem em papel.
+@media print {
+    .matcha-panel {
+        display: none !important;
+    }
+}