@inchurch/matcha-theme 22.3.0 → 22.4.0

package/components/matcha-table.scss

@@ -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,12 +116,6 @@
     --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 ─────────────────
@@ -351,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);
     }
@@ -401,7 +409,12 @@
 
     // 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);
@@ -413,11 +426,13 @@
     // 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 {
+    &[sticky-header],
+    matcha-table[sticky-header] & {
       max-height: var(--matcha-table-sticky-header-max-height, 70vh);
       overflow-y: auto;
     }
-    &.matcha-table-sticky-header thead th {
+    &[sticky-header] thead th,
+    matcha-table[sticky-header] & thead th {
       position: sticky;
       top: 0;
       z-index: 1;
@@ -430,64 +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(.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.
+    // :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}"]:not(.matcha-table-sticky-header) {
+      &[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;
-          // --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.
+        // Ú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}"]:not(.matcha-table-sticky-header) {
+      &[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-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}) {
-          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]: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; }
+    &[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.
@@ -526,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;
@@ -596,13 +607,38 @@
   // 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) {
+  // 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); }
@@ -611,7 +647,8 @@
   // ── Reduced motion ────────────────────────────────────────────────────
   @media (prefers-reduced-motion: reduce) {
     .matcha-table tbody td,
-    .matcha-table.matcha-table-loading tbody tr {
+    .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.3.0",
+  "version": "22.4.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {