@inchurch/matcha-theme 22.2.0 → 22.4.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.
@@ -55,6 +55,9 @@
     --matcha-table-border-header:            var(--matcha-border-thin, 2px);
     --matcha-table-border-row:               var(--matcha-border-hairline, 1px);
     --matcha-table-bordered-radius:          var(--matcha-radius-md, 4px);
+    // Escala de card (não a mesma de --matcha-table-bordered-radius, que é só
+    // pro inset border fino) — roundedTop arredonda o CONTAINER inteiro.
+    --matcha-table-rounded-top-radius:       var(--matcha-radius-xl, 16px);
 
     // ── Surface colors ────────────────────────────────────────────────────
     --matcha-table-cell-bg:                  var(--matcha-color-surface-card);
@@ -113,19 +116,19 @@
     --matcha-table-resize-indicator-width:   var(--matcha-border-hairline, 1px);
     --matcha-table-resize-indicator-height:  50%;
     --matcha-table-resize-indicator-top:     25%;
-
-    // ── Sticky cols shadow ────────────────────────────────────────────────
-    --matcha-table-sticky-shadow-offset:     var(--matcha-space-100, 8px);
-    --matcha-table-sticky-shadow-blur:       var(--matcha-space-200, 16px);
-    --matcha-table-sticky-shadow-color:      var(--matcha-color-elevation-shadow, #000);
-    --matcha-table-sticky-shadow-alpha:      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);
@@ -345,28 +348,39 @@
       }
     }
 
-    // ── Modifiers via host classes (Angular bind quando striped/hover/etc) ─
+    // ── Modifiers via atributo no host (Angular @HostBinding, ver
+    // table.component.ts) ──────────────────────────────────────────────────
+    // Cada modifier tem 2 seletores alternativos: `&[x]` (forma legado — o
+    // host JÁ É `.matcha-table`, self) e `matcha-table[x] &` (forma elemento
+    // — o atributo mora no host `<matcha-table>`, mas o alvo real é o filho
+    // `.matcha-table` dentro do wrapper; CSS alcança via descendente, não
+    // precisa o atributo estar duplicado no filho).
     // Striped usa :where() pra dropar specificity do :nth-child — hover vence.
-    &.matcha-table-striped tbody tr:where(:nth-child(even)) td {
+    &[striped] tbody tr:where(:nth-child(even)) td,
+    matcha-table[striped] & tbody tr:where(:nth-child(even)) td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-striped);
     }
 
-    &.matcha-table-hover tbody tr:hover td {
+    &[hover] tbody tr:hover td,
+    matcha-table[hover] & tbody tr:hover td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-hover);
     }
 
     // Stripe-aware hover: row PAR ganha alpha mais forte pra preservar stripe.
-    &.matcha-table-striped tbody tr:where(:nth-child(even)).is-clickable:hover td,
-    &.matcha-table-striped.matcha-table-hover tbody tr:where(:nth-child(even)):hover td {
+    &[striped] tbody tr:where(:nth-child(even)).is-clickable:hover td,
+    matcha-table[striped] & tbody tr:where(:nth-child(even)).is-clickable:hover td,
+    &[striped][hover] tbody tr:where(:nth-child(even)):hover td,
+    matcha-table[striped][hover] & tbody tr:where(:nth-child(even)):hover td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-striped);
     }
 
-    // Variante de hover accent (input `rowHover="accent"` → classe host
-    // `matcha-table-hover-accent`). Rebinda a var de hover no PRÓPRIO `<table>`,
+    // Variante de hover accent (input `rowHover="accent"` → atributo host
+    // `data-row-hover="accent"`). Rebinda a var de hover no PRÓPRIO `<table>`,
     // com especificidade acima do default — dispensa o consumer de furar o
     // encapsulamento com `::ng-deep`. Substitui o override manual repetido em
     // members/visitors/history/datas-comemorativas.
-    &.matcha-table-hover-accent {
+    &[data-row-hover="accent"],
+    matcha-table[data-row-hover="accent"] & {
       --matcha-table-row-bg-hover:         var(--matcha-color-accent-surface-hover);
       --matcha-table-row-bg-hover-striped: var(--matcha-color-accent-surface-hover);
     }
@@ -395,14 +409,30 @@
 
     // Bordered — box-shadow inset em vez de border real (não clipa shadows
     // externos das sticky cols, que projetam pra fora da <table>).
-    &.matcha-table-bordered {
+    // Conhecido: em alguns casos (sticky-header/colunas fixas, forma
+    // elemento) o background opaco das cells pode encobrir parte deste
+    // traço — não resolvido nesta rodada (fora do escopo desta tarefa); se
+    // precisar de borda garantida num caso desses, use a utility class de
+    // borda (ex.: `b-1`) direto no consumo do componente.
+    &[bordered] {
       box-shadow: inset 0 0 0 var(--matcha-table-border-row)
         var(--matcha-table-border-color);
       border-radius: var(--matcha-table-bordered-radius);
     }
 
-    // Sticky header (vertical scroll)
-    &.matcha-table-sticky-header thead th {
+    // 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).
+    &[sticky-header],
+    matcha-table[sticky-header] & {
+      max-height: var(--matcha-table-sticky-header-max-height, 70vh);
+      overflow-y: auto;
+    }
+    &[sticky-header] thead th,
+    matcha-table[sticky-header] & thead th {
       position: sticky;
       top: 0;
       z-index: 1;
@@ -415,49 +445,59 @@
     &[data-size="spacious"] tbody td { height: var(--matcha-table-cell-height-spacious); }
 
     // ── 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.
+    // Performance: nada de box-shadow com blur nem background-image (gradient)
+    // aqui — são caros de repaint/compositar MULTIPLICADOS por linha (uma
+    // tabela de 40+ linhas com 2 colunas sticky = 80 elementos), e causavam
+    // queda de FPS real no scroll (medido em produção). Custo mínimo:
+    // background-color sólido (fixo, não acompanha hover/tint — troca-se
+    // fidelidade visual por performance) + border 1px sólida no lugar da
+    // sombra de scroll-edge (borda é essencialmente grátis pro compositor,
+    // sombra com blur não é).
+    //
+    // :not([sticky-header])/: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, desliga a
+    // coluna fixa inteira quando stickyHeader está ativo — só o header fixo
+    // (mais universalmente útil) permanece. `sticky-header` agora é atributo
+    // no host — o 2º `:not()` cobre o caso em que o host é o wrapper (forma
+    // elemento, `sticky-header` não está no `.matcha-table` em si, está no
+    // `<matcha-table>` ancestral). `data-sticky-start`/`-end` continuam só no
+    // nó real (mirrorAttributesToRealTable), não precisam de alternativa.
     @for $i from 1 through 4 {
-      &[data-sticky-start="#{$i}"] {
+      &[data-sticky-start="#{$i}"]:not([sticky-header]):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);
+          background-color: var(--matcha-color-surface-card);
         }
-        // Última cell do grupo sticky-start projeta shadow scroll-edge.
+        // Última cell do grupo sticky-start marca o scroll-edge com borda fina.
         thead th:nth-child(#{$i}),
         tbody tr td:nth-child(#{$i}) {
-          box-shadow: var(--matcha-table-sticky-shadow-offset) 0
-            var(--matcha-table-sticky-shadow-blur)
-            calc(-1 * var(--matcha-table-sticky-shadow-offset))
-            color-mix(in srgb, var(--matcha-table-sticky-shadow-color)
-                              var(--matcha-table-sticky-shadow-alpha), transparent);
+          border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
         }
       }
 
-      &[data-sticky-end="#{$i}"] {
+      &[data-sticky-end="#{$i}"]:not([sticky-header]):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);
         }
         thead th:nth-last-child(#{$i}),
         tbody tr td:nth-last-child(#{$i}) {
-          box-shadow: calc(-1 * var(--matcha-table-sticky-shadow-offset)) 0
-            var(--matcha-table-sticky-shadow-blur)
-            calc(-1 * var(--matcha-table-sticky-shadow-offset))
-            color-mix(in srgb, var(--matcha-table-sticky-shadow-color)
-                              var(--matcha-table-sticky-shadow-alpha), transparent);
+          border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
         }
       }
     }
 
-    &[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([sticky-header]):not(matcha-table[sticky-header] &) thead th:first-child,
+    &[data-sticky-start]:not([sticky-header]):not(matcha-table[sticky-header] &) tbody tr td:first-child { left: 0; }
+    &[data-sticky-end]:not([sticky-header]):not(matcha-table[sticky-header] &)   thead th:last-child,
+    &[data-sticky-end]:not([sticky-header]):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.
@@ -496,7 +536,8 @@
     }
 
     // ── Loading state global — pulse + aria-busy ─────────────────────────
-    &.matcha-table-loading tbody tr {
+    &[loading] tbody tr,
+    matcha-table[loading] & tbody tr {
       animation: matcha-table-loading-pulse
                  var(--matcha-table-loading-pulse-duration)
                  ease-in-out infinite;
@@ -563,6 +604,41 @@
     }
   }
 
+  // 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. `sticky-header` mora no HOST `<matcha-table>` (@HostBinding,
+  // não mais na `<table>` filha) — como o host é ANCESTRAL do wrapper, um
+  // descendente simples já alcança, sem precisar de `:has()`.
+  matcha-table[sticky-header] > .matcha-table__scroll {
+    max-height: var(--matcha-table-sticky-header-max-height, 70vh);
+    overflow-y: auto;
+  }
+
+  // roundedTop — regra TOP-LEVEL (fora do bloco .matcha-table acima): alcança
+  // o host na forma legado (self, `.matcha-table[rounded-top]`, o próprio
+  // `<table>` é a superfície visual) e o wrapper de scroll na forma elemento
+  // (descendente a partir do host `<matcha-table rounded-top>` — só o
+  // wrapper precisa do radius, ele já clipa a `<table>` interna via
+  // overflow non-visible, a `<table>` em si não precisa do próprio radius).
+  //
+  // Fallback inline no 2º var() é OBRIGATÓRIO: --matcha-table-rounded-top-radius
+  // é declarada dentro do bloco `.matcha-table { }` acima — na forma elemento
+  // `.matcha-table__scroll` é PAI de `.matcha-table` (o wrapper envolve a
+  // table real), não descendente. CSS custom property só desce a árvore, não
+  // sobe — sem o fallback aqui a var nunca resolve nesse elemento (bug
+  // silencioso: sem erro, só o border-radius nunca aparece). O fallback ainda
+  // respeita um override do consumer, se ele setar a var em algum ancestral
+  // real do wrapper (ex.: no próprio host `<matcha-table>` ou em `:root`).
+  .matcha-table[rounded-top] {
+    border-top-left-radius: var(--matcha-table-rounded-top-radius);
+    border-top-right-radius: var(--matcha-table-rounded-top-radius);
+  }
+  matcha-table[rounded-top] .matcha-table__scroll {
+    border-top-left-radius: var(--matcha-table-rounded-top-radius, var(--matcha-radius-xl, 16px));
+    border-top-right-radius: var(--matcha-table-rounded-top-radius, var(--matcha-radius-xl, 16px));
+  }
+
   @keyframes matcha-table-loading-pulse {
     0%, 100% { opacity: 1; }
     50%      { opacity: var(--matcha-table-loading-pulse-opacity-min); }
@@ -570,8 +646,9 @@
 
   // ── 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[loading] tbody tr,
+    matcha-table[loading] .matcha-table tbody tr {
       transition: none;
       animation: none;
     }

package/package.json

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