@inchurch/matcha-theme 22.2.0 → 22.3.0

package/components/matcha-table.scss

@@ -29,7 +29,7 @@
   // CSS vars do componente — única fonte de verdade. ZERO literal hardcoded
   // fora deste bloco. Consumer override qualquer um no escopo do <table>.
   // ═══════════════════════════════════════════════════════════════════════
-  table.matcha-table {
+  .matcha-table {
     // ── Dimensions ────────────────────────────────────────────────────────
     // Calibrado pra density moderna (Stripe/Linear/Notion). Comfortable era 52
     // antes — apertado em telas wide. 58px equilibra densidade × respiro.
@@ -122,10 +122,16 @@
   }
 
   // ── Base — display table nativo + typography via vars ─────────────────
-  table.matcha-table {
+  .matcha-table {
     display: table;
     width: 100%;
-    border-collapse: collapse;
+    // separate (não collapse) + spacing 0 → visualmente idêntico (zero gap
+    // entre cells), mas `border-collapse: collapse` é conhecido por quebrar
+    // `position: sticky` em <th>/<td> em vários browsers — especialmente
+    // quando a cell precisa ficar sticky nos DOIS eixos ao mesmo tempo (linha
+    // + coluna, o canto stickyHeader × stickyStart/stickyEnd). Só existe
+    // border-bottom no arquivo (nenhum border-top) — sem risco de borda dupla.
+    border-collapse: separate;
     border-spacing: 0;
     font-family: var(--matcha-font-family);
     font-size: var(--matcha-table-font-size);
@@ -401,7 +407,16 @@
       border-radius: var(--matcha-table-bordered-radius);
     }
 
-    // Sticky header (vertical scroll)
+    // Sticky header (vertical scroll). Forma legado: o host (a própria table) é
+    // o container de scroll. Default do componente é overflow-y:hidden (só
+    // horizontal é fallback passivo — dois scrolls na tela atrapalham mobile);
+    // stickyHeader é opt-in EXPLÍCITO, reabilita overflow-y:auto de propósito
+    // + altura máxima (sem isso não há o que rolar, o header não tem contra o
+    // que grudar). Altura configurável via var (default 70vh).
+    &.matcha-table-sticky-header {
+      max-height: var(--matcha-table-sticky-header-max-height, 70vh);
+      overflow-y: auto;
+    }
     &.matcha-table-sticky-header thead th {
       position: sticky;
       top: 0;
@@ -417,13 +432,27 @@
     // ── Sticky columns (start/end) — canon scroll horizontal ──────────────
     // Shadow scroll-edge via color-mix() pra tokenizar — funciona em light
     // E dark. Offsets/blur/cor todos via var.
+    //
+    // :not(.matcha-table-sticky-header) — combinar sticky column COM sticky
+    // header exige que a cell de CANTO (cabeçalho da coluna fixa) fique sticky
+    // nos dois eixos (top E left/right) ao mesmo tempo — inconsistente entre
+    // browsers em cells de <table> (documentado no JSDoc do componente). Em vez
+    // de deixar o canto quebrado (cabeçalho da coluna fixa não gruda, mostra
+    // dado errado por trás), desliga a coluna fixa inteira quando stickyHeader
+    // está ativo — só o header fixo (mais universalmente útil) permanece.
     @for $i from 1 through 4 {
-      &[data-sticky-start="#{$i}"] {
+      &[data-sticky-start="#{$i}"]:not(.matcha-table-sticky-header) {
         thead th:nth-child(-n+#{$i}),
         tbody tr td:nth-child(-n+#{$i}) {
           position: sticky;
           z-index: 2;
-          background: var(--matcha-table-cell-bg);
+          // --matcha-table-cell-bg em hover/rowHover="accent"/striped é um TINT
+          // translúcido (rgba ~12-18%) — correto pra cells normais (nada sólido
+          // atrás), mas cells sticky têm conteúdo real rolando por baixo. Duas
+          // camadas: background-color sempre opaco, background-image pinta o
+          // tint (mesma var, já cascade certo) por cima.
+          background-color: var(--matcha-color-surface-card);
+          background-image: linear-gradient(var(--matcha-table-cell-bg), var(--matcha-table-cell-bg));
         }
         // Última cell do grupo sticky-start projeta shadow scroll-edge.
         thead th:nth-child(#{$i}),
@@ -436,12 +465,13 @@
         }
       }
 
-      &[data-sticky-end="#{$i}"] {
+      &[data-sticky-end="#{$i}"]:not(.matcha-table-sticky-header) {
         thead th:nth-last-child(-n+#{$i}),
         tbody tr td:nth-last-child(-n+#{$i}) {
           position: sticky;
           z-index: 2;
-          background: var(--matcha-table-cell-bg);
+          background-color: var(--matcha-color-surface-card);
+          background-image: linear-gradient(var(--matcha-table-cell-bg), var(--matcha-table-cell-bg));
         }
         thead th:nth-last-child(#{$i}),
         tbody tr td:nth-last-child(#{$i}) {
@@ -454,10 +484,10 @@
       }
     }
 
-    &[data-sticky-start] thead th:first-child,
-    &[data-sticky-start] tbody tr td:first-child { left: 0; }
-    &[data-sticky-end]   thead th:last-child,
-    &[data-sticky-end]   tbody tr td:last-child { right: 0; }
+    &[data-sticky-start]:not(.matcha-table-sticky-header) thead th:first-child,
+    &[data-sticky-start]:not(.matcha-table-sticky-header) tbody tr td:first-child { left: 0; }
+    &[data-sticky-end]:not(.matcha-table-sticky-header)   thead th:last-child,
+    &[data-sticky-end]:not(.matcha-table-sticky-header)   tbody tr td:last-child { right: 0; }
 
     // ── Variant accent (semantic row coloring) ────────────────────────────
     // Defaults canon Figma DSV3: equal=info, plus=success, minus=danger.
@@ -563,6 +593,16 @@
     }
   }
 
+  // Sticky header — forma ELEMENTO (`<matcha-table>`, ver table.component.ts).
+  // Aqui quem rola de verdade é `.matcha-table__scroll` (o wrapper), não a
+  // `<table class="matcha-table">` interna — a altura máxima precisa ir no
+  // wrapper. `:has()` alcança o pai a partir da tabela filha (já usado no
+  // showcase — ver page-matcha-table.component.scss).
+  .matcha-table__scroll:has(> table.matcha-table-sticky-header) {
+    max-height: var(--matcha-table-sticky-header-max-height, 70vh);
+    overflow-y: auto;
+  }
+
   @keyframes matcha-table-loading-pulse {
     0%, 100% { opacity: 1; }
     50%      { opacity: var(--matcha-table-loading-pulse-opacity-min); }
@@ -570,8 +610,8 @@
 
   // ── Reduced motion ────────────────────────────────────────────────────
   @media (prefers-reduced-motion: reduce) {
-    table.matcha-table tbody td,
-    table.matcha-table.matcha-table-loading tbody tr {
+    .matcha-table tbody td,
+    .matcha-table.matcha-table-loading tbody tr {
       transition: none;
       animation: none;
     }

package/package.json

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