@inchurch/matcha-theme 22.38.2 → 22.38.3

package/components/matcha-table.scss

@@ -1,722 +1,722 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-table — `<table matcha-table>` directive (1:1 Figma DSV3 15641:275)
-//
-// API canon:
-//   <table matcha-table size="comfortable" striped hover bordered stickyHeader
-//                       [stickyStart]="N" [stickyEnd]="N" [loading]="isLoading">
-//     <thead><tr><th>...</th></tr></thead>
-//     <tbody><tr><td>...</td></tr></tbody>
-//   </table>
-//
-// Companion directives (a11y automática):
-//   [matcha-table-sortable] em <th>  — aria-sort + tabindex + keyboard
-//   [rowClick] em <tr>              — AÇÃO na linha (abrir modal, selecionar). Só o
-//                                     binding já ativa tudo (tabindex + Enter/Space
-//                                     + hover accent na linha inteira)
-//
-// Navegação (leva pra outra página) NÃO é [rowClick]:
-//   <a matcha-cell-link [routerLink]> dentro do <td> — âncora de verdade, então
-//   ctrl+clique/clique do meio/botão direito funcionam e o resto da linha segue
-//   selecionável. Ponteiro e tom accent aparecem só sobre a âncora, pintando a linha
-//   inteira. Os dois no mesmo <tr> é proibido pelo canon (dois hovers competindo).
-//
-// Helpers CSS-only:
-//   td.numeric  → tabular-nums
-//   td.truncate → ellipsis (text overflow)
-//   td[data-align] → alinhamento (data-alinhamento / td.text-{center,right} deprecated)
-//   tr.equal/.plus/.minus → variant semantic accent (cor via CSS var)
-//   tr.child-item → indent + accent esmaecido
-//   tr.is-selected → highlight
-// =============================================================================
-
-@mixin matcha-table-modern($theme) {
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // CSS vars do componente — única fonte de verdade. ZERO literal hardcoded
-  // fora deste bloco. Consumer override qualquer um no escopo do <table>.
-  // ═══════════════════════════════════════════════════════════════════════
-  .matcha-table {
-    // ── Dimensions ────────────────────────────────────────────────────────
-    // Calibrado pra density moderna (Stripe/Linear/Notion). Comfortable era 52
-    // antes — apertado em telas wide. 58px equilibra densidade × respiro.
-    --matcha-table-cell-height-compact:      var(--matcha-space-500, 40px);
-    --matcha-table-cell-height-comfortable:  58px;
-    --matcha-table-cell-height-spacious:     var(--matcha-space-800, 64px);
-    // Padding uniforme L/R — assimétrico cria sensação de "primeira coluna
-    // afastada do resto". 16px ambos lados é canon moderno.
-    --matcha-table-cell-padding-x-left:      var(--matcha-space-200, 16px);
-    --matcha-table-cell-padding-x-right:     var(--matcha-space-200, 16px);
-    --matcha-table-cell-min-width:           var(--matcha-space-1500, 120px);
-    --matcha-table-paginator-spacing:        var(--matcha-space-300, 24px);
-
-    // ── Typography (modern density Stripe/Linear) ─────────────────────────
-    --matcha-table-font-size:                13px;
-    --matcha-table-font-line-height:         18px;
-    --matcha-table-header-font-size:         var(--matcha-text-body-sm, 12px);
-    --matcha-table-header-font-line-height:  var(--matcha-leading-body-sm, 16px);
-    --matcha-table-header-letter-spacing:    0.04em;
-
-    // ── Borders / radius ──────────────────────────────────────────────────
-    --matcha-table-border-color:             var(--matcha-color-interaction-disabled-border);
-    --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);
-    --matcha-table-row-bg-selected:          var(--matcha-color-accent-alpha-12,
-                                              rgba(var(--matcha-color-accent), 0.12));
-    --matcha-table-row-bg-striped:           var(--matcha-color-surface-card-alt,
-                                              rgba(var(--matcha-color-fg), 0.02));
-    // Hover NÃO usa surface-table-row-hover token (tá próximo demais de surface-card
-    // em dark e fica imperceptível). Calibrado pra delta visível mesmo sobre stripe.
-    // CSS custom property values são TEXTO LITERAL pro Sass — fn calls Sass
-    // dentro NÃO são avaliadas. Precisa interpolação `#{}` pra forçar Sass a
-    // evaluar `var(--matcha-color-fg)` ANTES do output. Sem isso, o valor sai
-    // literal no bundle (ex: `rgba(var(--matcha-color-fg), 0.12)`) e o browser
-    // descarta como invalid CSS (= chevron invisível, hover sem cor, etc).
-    --matcha-table-row-bg-hover:             rgba(var(--matcha-color-fg), 0.12);
-    --matcha-table-row-bg-hover-striped:     rgba(var(--matcha-color-fg), 0.18);
-    --matcha-table-header-bg-hover:          rgba(var(--matcha-color-fg), 0.10);
-    // Hover da linha que NAVEGA: tom accent, disparado só quando o ponteiro está
-    // sobre a âncora da célula (ver "Row navegável" adiante). Fora dela a linha usa
-    // o hover neutro acima — é esse contraste que diz ao usuário onde clicar.
-    --matcha-table-row-bg-hover-accent:      var(--matcha-color-accent-surface-hover);
-
-    // ── Sort indicator colors ─────────────────────────────────────────────
-    // Inactive usa alpha 0.45 no foreground — claramente VISÍVEL como "ali tem
-    // sort", sem competir com texto do header. Hover/ativo passa pra accent full.
-    --matcha-table-sort-icon-color:          rgba(var(--matcha-color-fg), 0.45);
-    --matcha-table-sort-icon-color-active:   var(--matcha-color-accent);
-    --matcha-table-sort-icon-size:           var(--matcha-space-250, 20px);
-
-    // ── Empty cell placeholder ────────────────────────────────────────────
-    --matcha-table-empty-cell-text:          var(--matcha-color-text-muted,
-                                              rgba(var(--matcha-color-fg), 0.5));
-
-    // ── Variant accent (semantic row) ─────────────────────────────────────
-    --matcha-table-variant-accent-width:     var(--matcha-space-050, 4px);
-    --matcha-table-row-accent-child-opacity: 0.5;
-    --matcha-table-selected-accent-width:    var(--matcha-border-thin, 2px);
-    --matcha-table-selected-accent-color:    var(--matcha-color-accent);
-
-    // ── Column width hints (utility classes col-*) ────────────────────────
-    --matcha-table-col-checkbox-width:       var(--matcha-space-600, 48px);
-    --matcha-table-col-id-width:             var(--matcha-space-1000, 80px);
-    --matcha-table-col-narrow-width:         var(--matcha-space-1500, 120px);
-    --matcha-table-col-medium-width:         var(--matcha-space-2500, 200px);
-    // Pino da coluna de Ações (matcha-cell-action) — mesma escala de
-    // --matcha-table-col-id-width (80px), token próprio pra não acoplar
-    // semanticamente coisas diferentes que hoje só coincidem em valor.
-    --matcha-table-col-actions-width:        var(--matcha-space-1000, 80px);
-
-    // ── States / animations ───────────────────────────────────────────────
-    --matcha-table-disabled-opacity:         var(--matcha-state-disabled-opacity, 0.5);
-    --matcha-table-loading-pulse-duration:   var(--matcha-duration-slow, 1500ms);
-    --matcha-table-loading-pulse-opacity-min: 0.5;
-    --matcha-table-transition-duration:      var(--matcha-duration-instant, 80ms);
-    --matcha-table-focus-ring-width:         var(--matcha-state-focus-ring-width, 2px);
-    --matcha-table-focus-ring-color:         var(--matcha-color-accent);
-
-    // ── Empty state row (matcha-table-empty directive) ────────────────────
-    --matcha-table-empty-padding-y:          var(--matcha-space-500, 40px);
-    --matcha-table-empty-padding-x:          var(--matcha-space-300, 24px);
-
-    // ── Resize handle (matcha-table-resizable directive) ──────────────────
-    --matcha-table-resize-handle-width:      var(--matcha-space-100, 8px);
-    --matcha-table-resize-indicator-width:   var(--matcha-border-hairline, 1px);
-    --matcha-table-resize-indicator-height:  50%;
-    --matcha-table-resize-indicator-top:     25%;
-  }
-
-  // ── Base — display table nativo + typography via vars ─────────────────
-  .matcha-table {
-    display: table;
-    width: 100%;
-    // 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);
-    line-height: var(--matcha-table-font-line-height);
-    font-weight: var(--matcha-weight-regular, 400);
-    color: var(--matcha-color-text-secondary,
-      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
-
-    // ── Header cells (text/primary, border-bottom 2px, height 64) ────────
-    thead th {
-      box-sizing: border-box;
-      height: var(--matcha-table-cell-height-comfortable);
-      min-width: var(--matcha-table-cell-min-width);
-      padding: 0
-               var(--matcha-table-cell-padding-x-right)
-               0
-               var(--matcha-table-cell-padding-x-left);
-      background: var(--matcha-table-cell-bg);
-      color: var(--matcha-color-text-primary,
-        var(--matcha-color-fg));
-      // Header menor que body — hierarquia "metadado" vs "conteúdo".
-      font-size: var(--matcha-table-header-font-size);
-      line-height: var(--matcha-table-header-font-line-height);
-      font-weight: var(--matcha-weight-semibold, 600);
-      letter-spacing: var(--matcha-table-header-letter-spacing);
-      text-align: left;
-      vertical-align: middle;
-      border-bottom: var(--matcha-table-border-header) solid
-        var(--matcha-table-border-color);
-
-      // Alinhamento — data-align é o canon DSV3; data-alinhamento + utility
-      // classes seguem aceitos (deprecated, remoção em ciclo futuro)
-      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
-      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
-
-      // ── Sortable hint ([matcha-table-sortable] directive seta os attrs) ──
-      &[data-sortable] {
-        cursor: pointer;
-        user-select: none;
-        // SEMPRE reserva espaço pro chevron (mesmo inativo) — chevron entra/sai
-        // só via opacity. Sem padding condicional → texto NÃO desloca no hover.
-        padding-right: calc(var(--matcha-table-cell-padding-x-right) +
-                            var(--matcha-table-sort-icon-size));
-        position: relative;
-
-        // Hover NÃO muda bg do header — bg-change era o que fazia o user
-        // perceber "movimento" quando o chevron entrava ao mesmo tempo.
-        // Manter header estático no hover, só chevron aparece com opacity.
-        // Cursor pointer + chevron fade já comunicam interatividade.
-
-        // Sort indicators — SVG 1:1 com `matcha/icon/arrow` (figma-icons.ts).
-        // Estado inativo (none) = INVISÍVEL (opacity 0). Aparece no hover do header
-        // com opacity faded, full quando ativo (asc/desc). Pattern canon Stripe/Linear:
-        // sortable em todas as colunas, mas indicador só na que tá ordenando.
-        &::after {
-          content: '';
-          position: absolute;
-          right: var(--matcha-table-cell-padding-x-right);
-          top: 50%;
-          transform: translateY(-50%);
-          width: var(--matcha-table-sort-icon-size);
-          height: var(--matcha-table-sort-icon-size);
-          background: var(--matcha-table-sort-icon-color);
-          transition: background-color var(--matcha-table-transition-duration) linear;
-          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 7.82499L6.1 12.725C5.9 12.925 5.66667 13.0208 5.4 13.0125C5.13333 13.0042 4.9 12.9 4.7 12.7C4.51667 12.5 4.42083 12.2667 4.4125 12C4.40417 11.7333 4.5 11.5 4.7 11.3L11.3 4.69999C11.4 4.59999 11.5083 4.52915 11.625 4.48749C11.7417 4.44582 11.8667 4.42499 12 4.42499C12.1333 4.42499 12.2583 4.44582 12.375 4.48749C12.4917 4.52915 12.6 4.59999 12.7 4.69999L19.3 11.3C19.4833 11.4833 19.575 11.7125 19.575 11.9875C19.575 12.2625 19.4833 12.5 19.3 12.7C19.1 12.9 18.8625 13 18.5875 13C18.3125 13 18.075 12.9 17.875 12.7L13 7.82499V19C13 19.2833 12.9042 19.5208 12.7125 19.7125C12.5208 19.9042 12.2833 20 12 20C11.7167 20 11.4792 19.9042 11.2875 19.7125C11.0958 19.5208 11 19.2833 11 19V7.82499Z'/></svg>")
-                center/contain no-repeat;
-        }
-
-        // Hover no header — chevron escurece pra foreground full (já visível
-        // muted antes via alpha 0.45). Reforça que tá interativo.
-        &:hover::after {
-          background: var(--matcha-color-text-primary,
-            var(--matcha-color-fg));
-        }
-
-        // Padding-right SEMPRE reserva espaço pro chevron. Antes ajustava
-        // condicionalmente (sem padding extra no inativo) — causava text
-        // "dançar" 20px ao hover quando padding crescia pra acomodar arrow.
-        // Mantém estável: chevron entra via opacity, sem reflow do texto.
-
-        &[data-sort-direction="asc"]::after {
-          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 7.82499L6.1 12.725C5.9 12.925 5.66667 13.0208 5.4 13.0125C5.13333 13.0042 4.9 12.9 4.7 12.7C4.51667 12.5 4.42083 12.2667 4.4125 12C4.40417 11.7333 4.5 11.5 4.7 11.3L11.3 4.69999C11.4 4.59999 11.5083 4.52915 11.625 4.48749C11.7417 4.44582 11.8667 4.42499 12 4.42499C12.1333 4.42499 12.2583 4.44582 12.375 4.48749C12.4917 4.52915 12.6 4.59999 12.7 4.69999L19.3 11.3C19.4833 11.4833 19.575 11.7125 19.575 11.9875C19.575 12.2625 19.4833 12.5 19.3 12.7C19.1 12.9 18.8625 13 18.5875 13C18.3125 13 18.075 12.9 17.875 12.7L13 7.82499V19C13 19.2833 12.9042 19.5208 12.7125 19.7125C12.5208 19.9042 12.2833 20 12 20C11.7167 20 11.4792 19.9042 11.2875 19.7125C11.0958 19.5208 11 19.2833 11 19V7.82499Z'/></svg>")
-                center/contain no-repeat;
-          background: var(--matcha-table-sort-icon-color-active);
-        }
-
-        &[data-sort-direction="desc"]::after {
-          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 16.175V5C11 4.71667 11.0958 4.47917 11.2875 4.2875C11.4792 4.09583 11.7167 4 12 4C12.2833 4 12.5208 4.09583 12.7125 4.2875C12.9042 4.47917 13 4.71667 13 5V16.175L17.9 11.275C18.1 11.075 18.3333 10.9792 18.6 10.9875C18.8667 10.9958 19.1 11.1 19.3 11.3C19.4833 11.5 19.5792 11.7333 19.5875 12C19.5958 12.2667 19.5 12.5 19.3 12.7L12.7 19.3C12.6 19.4 12.4917 19.4708 12.375 19.5125C12.2583 19.5542 12.1333 19.575 12 19.575C11.8667 19.575 11.7417 19.5542 11.625 19.5125C11.5083 19.4708 11.4 19.4 11.3 19.3L4.7 12.7C4.51667 12.5167 4.425 12.2875 4.425 12.0125C4.425 11.7375 4.51667 11.5 4.7 11.3C4.9 11.1 5.1375 11 5.4125 11C5.6875 11 5.925 11.1 6.125 11.3L11 16.175Z'/></svg>")
-                center/contain no-repeat;
-          background: var(--matcha-table-sort-icon-color-active);
-        }
-
-        // Header right-aligned com sort — chevron vem ANTES do texto (canon).
-        &[data-align="right"], &[data-alinhamento="right"], &.text-right {
-          padding-right: var(--matcha-table-cell-padding-x-right);
-          padding-left: calc(var(--matcha-table-cell-padding-x-left) +
-                             var(--matcha-table-sort-icon-size));
-
-          &::after {
-            right: auto;
-            left: var(--matcha-table-cell-padding-x-left);
-          }
-        }
-
-        // Focus ring quando keyboard-navigated (tabindex via directive).
-        &:focus-visible {
-          outline: var(--matcha-table-focus-ring-width) solid
-            var(--matcha-table-focus-ring-color);
-          outline-offset: calc(-1 * var(--matcha-table-focus-ring-width));
-        }
-      }
-    }
-
-    // ── Body cells ────────────────────────────────────────────────────────
-    tbody td {
-      box-sizing: border-box;
-      height: var(--matcha-table-cell-height-comfortable);
-      min-width: var(--matcha-table-cell-min-width);
-      padding: 0
-               var(--matcha-table-cell-padding-x-right)
-               0
-               var(--matcha-table-cell-padding-x-left);
-      background: var(--matcha-table-cell-bg);
-      color: var(--matcha-color-text-secondary,
-        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
-      vertical-align: middle;
-      border-bottom: var(--matcha-table-border-row) solid
-        var(--matcha-table-border-color);
-      transition: background-color var(--matcha-table-transition-duration) linear;
-
-      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
-      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
-
-      // Helper: tabular-nums (alinha decimais)
-      &[data-numeric], &.numeric {
-        font-variant-numeric: tabular-nums;
-        font-feature-settings: 'tnum';
-      }
-
-      // Helper: ellipsis (texto longo)
-      &[data-truncate], &.truncate {
-        max-width: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      // Helper: cells vazias preenchidas com "—" muted (canon moderno).
-      &:empty::after {
-        content: '—';
-        color: var(--matcha-table-empty-cell-text);
-      }
-    }
-
-    // ── Column width hints (aplicar em <th> — <td> herda pela coluna) ─────
-    thead th,
-    tbody td {
-      // min-width igual ao width — sem isso, a regra base thead th/tbody td
-      // (min-width:120px) vence e a coluna nunca encolhe pro valor pretendido
-      // (mesmo bug achado e corrigido em .col-actions).
-      &.col-checkbox { width: var(--matcha-table-col-checkbox-width); min-width: var(--matcha-table-col-checkbox-width); text-align: center; }
-      &.col-id      { width: var(--matcha-table-col-id-width); }
-      &.col-narrow  { width: var(--matcha-table-col-narrow-width); }
-      &.col-medium  { width: var(--matcha-table-col-medium-width); }
-      // Actions / icon-buttons — pinada em --matcha-table-col-actions-width (80px).
-      // Children inline-flex, centralizados (título "Ações" no header também
-      // centraliza — text-align: center vale pro conteúdo das duas linhas).
-      //
-      // Importante: `.matcha-button` tem `display: flex` (block-level) que faria
-      // os icon-buttons empilharem verticalmente. Override via selector descendant
-      // com specificity maior pra forçar inline-flex no contexto de actions cell.
-      &.col-actions {
-        width: var(--matcha-table-col-actions-width);
-        // min-width base da tbody td/thead th é 120px (--matcha-table-cell-min-width)
-        // — maior que os 80px daqui, e min-width sempre vence sobre width no box
-        // model. Sem este override, a coluna ficava presa em 120px (achado real).
-        min-width: var(--matcha-table-col-actions-width);
-        white-space: nowrap;
-        text-align: center;
-
-        > .matcha-button,
-        > button[matcha-icon-button],
-        > * {
-          display: inline-flex;
-          vertical-align: middle;
-        }
-        > * + * {
-          margin-left: var(--matcha-space-050, 4px);
-        }
-      }
-      // Greedy = espaço residual (default, classe explícita pra documentação).
-      &.col-greedy { width: auto; }
-    }
-
-    // ── Paginator alinhado após table (convention) ────────────────────────
-    // Sem margin-top — paginator gruda no border-bottom da última row.
-    // Spacing visual vem dos paddings internos do próprio matcha-paginator.
-    .matcha-table-paginator,
-    & + matcha-paginator {
-      display: block;
-      margin-top: 0;
-    }
-
-    // ── Row clickable ([rowClick] directive — só o binding já ativa tudo) ─
-    tbody tr.matcha-row-clickable {
-      cursor: pointer;
-
-      &:hover td {
-        --matcha-table-cell-bg: var(--matcha-table-row-bg-hover);
-      }
-
-      &:focus-visible {
-        outline: var(--matcha-table-focus-ring-width) solid
-          var(--matcha-table-focus-ring-color);
-        outline-offset: calc(-1 * var(--matcha-table-focus-ring-width));
-      }
-    }
-
-    // ── 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.
-    &[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);
-    }
-
-    &[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.
-    &[striped] tbody tr:where(:nth-child(even)).matcha-row-clickable:hover td,
-    matcha-table[striped] & tbody tr:where(:nth-child(even)).matcha-row-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);
-    }
-
-    // Hover accent de linha clicável: a diretiva [rowClick] já sobrescreve
-    // --matcha-table-row-bg-hover(-striped) inline no próprio <tr> (ver
-    // table-clickable-row.directive.ts) — nenhuma regra de tema necessária
-    // aqui, o estilo inline já vence qualquer especificidade.
-
-    // ── Row navegável (`<a matcha-cell-link>` na célula) ───────────────────
-    // A linha que LEVA PRA OUTRA PÁGINA não é clicável inteira: quem navega é uma
-    // âncora de verdade na célula, pra que ctrl+clique, clique do meio e o menu do
-    // botão direito funcionem — e pra que o resto da linha continue selecionável
-    // com o mouse (com a linha toda clicável, não dava pra copiar texto da tabela).
-    //
-    // O feedback visual é o inverso do rowClick: ponteiro e tom accent aparecem só
-    // quando o mouse está sobre a âncora, e aí a linha INTEIRA pinta. Fora dela vale
-    // o hover neutro de sempre.
-    //
-    // Pinta via --matcha-table-cell-bg em TODOS os td da linha (mesmo caminho do
-    // hover normal), não com background-color no <tr>: em tabela striped o fundo
-    // mora no td, e um background no tr ficaria por baixo dele — o resultado seria
-    // uma célula colorida e o resto não.
-    //
-    // Depois das regras de striped de propósito: mesma especificidade, e ordem de
-    // origem decide. `:has()` já é usado em ~10 componentes do tema.
-    // O estilo BASE da âncora é global (base/_reset.scss) — ela também aparece em
-    // card de listagem, fora de qualquer tabela. Aqui fica só o que é da tabela: o
-    // realce da linha inteira.
-    a[matcha-cell-link]:focus-visible {
-      outline: var(--matcha-table-focus-ring-width) solid
-        var(--matcha-table-focus-ring-color);
-    }
-
-    tbody tr:has(a[matcha-cell-link]:hover) td,
-    tbody tr:has(a[matcha-cell-link]:focus-visible) td {
-      --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-accent);
-    }
-
-    // O ALVO é a CÉLULA inteira, não só o texto do nome.
-    //
-    // A âncora envolve o nome, e em título curto isso vira um alvo de poucos pixels —
-    // reclamação de quem usa, medida em séries. O `::after` esticado resolve sem trocar
-    // a âncora por handler de clique: o href continua existindo, então ctrl+clique,
-    // clique do meio e "abrir em nova aba" seguem funcionando, e o foco de teclado
-    // continua sendo o do link.
-    //
-    // De quebra conserta o hover: a regra acima só pinta a linha quando o mouse está
-    // sobre o TEXTO. Com a área esticada, pinta ao entrar na célula — que é o que faz
-    // a linha parecer clicável.
-    //
-    // Escopado em `.matcha-table td` de propósito: `a[matcha-cell-link]` também aparece
-    // em card de listagem, fora de tabela, e lá o link deve seguir do tamanho do texto.
-    //
-    // O custo é a seleção de texto DENTRO desta célula. No resto da linha continua
-    // funcionando, que é a diferença para a linha toda clicável.
-    td:has(a[matcha-cell-link]) {
-      position: relative;
-    }
-
-    td a[matcha-cell-link]::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-    }
-
-    tbody tr.is-selected td {
-      --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
-    }
-    // Selected row ganha border-left accent — affordance canon Linear/Notion.
-    // No <tr> → não some com stickyStart. Usa ::after pra coexistir com
-    // ::before do variant accent sem conflito.
-    tbody tr.is-selected {
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--matcha-table-selected-accent-width);
-        height: 100%;
-        background: var(--matcha-table-selected-accent-color);
-        pointer-events: none;
-        z-index: 2;  // acima do variant accent (z-index 1)
-      }
-    }
-
-    // Bordered — box-shadow inset em vez de border real (não clipa shadows
-    // externos das sticky cols, que projetam pra fora da <table>).
-    // 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). 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;
-    }
-
-    // Size variants (data-size cascateia altura)
-    &[data-size="compact"]  thead th,
-    &[data-size="compact"]  tbody td { height: var(--matcha-table-cell-height-compact); }
-    &[data-size="spacious"] thead th,
-    &[data-size="spacious"] tbody td { height: var(--matcha-table-cell-height-spacious); }
-
-    // ── Sticky columns (start/end) — canon scroll horizontal ──────────────
-    // 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}"]: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-color: var(--matcha-color-surface-card);
-        }
-        // Última cell do grupo sticky-start marca o scroll-edge com borda fina.
-        thead th:nth-child(#{$i}),
-        tbody tr td:nth-child(#{$i}) {
-          border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-        }
-      }
-
-      &[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);
-        }
-        thead th:nth-last-child(#{$i}),
-        tbody tr td:nth-last-child(#{$i}) {
-          border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-        }
-      }
-    }
-
-    &[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.
-    // Accent vive no <tr> → NÃO some com stickyStart.
-    // `position: relative` em <tr> suportado em Chrome 80+, FF 87+, Safari 14+.
-    tr.equal { --matcha-table-row-accent-color: var(--matcha-color-info); }
-    tr.plus  { --matcha-table-row-accent-color: var(--matcha-color-success); }
-    tr.minus { --matcha-table-row-accent-color: var(--matcha-color-danger); }
-
-    tbody tr[data-variant],
-    tbody tr.equal,
-    tbody tr.plus,
-    tbody tr.minus {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--matcha-table-variant-accent-width);
-        height: 100%;
-        background: var(--matcha-table-row-accent-color, transparent);
-        pointer-events: none;
-        z-index: 1;  // acima do bg da cell, abaixo do sticky shadow
-      }
-    }
-
-    // Child row (indent + accent esmaecido) — pattern tree/hierarquia.
-    tbody tr.child-item::before {
-      opacity: var(--matcha-table-row-accent-child-opacity);
-    }
-    tbody tr.child-item td:first-child {
-      padding-left: calc(var(--matcha-table-cell-padding-x-left) +
-                         var(--matcha-space-200, 16px));
-    }
-
-    // ── Loading state global — pulse + aria-busy ─────────────────────────
-    &[loading] tbody tr,
-    matcha-table[loading] & tbody tr {
-      animation: matcha-table-loading-pulse
-                 var(--matcha-table-loading-pulse-duration)
-                 ease-in-out infinite;
-      pointer-events: none;
-    }
-
-    // ── Disabled state — row/cell ─────────────────────────────────────────
-    // Pattern canon Material/Polaris. A11y: também aplicar aria-disabled.
-    tbody tr[disabled], tbody tr.is-disabled,
-    tbody td[disabled], tbody td.is-disabled {
-      opacity: var(--matcha-table-disabled-opacity);
-      pointer-events: none;
-      cursor: not-allowed;
-    }
-
-    // ── Per-row loading (matcha-table-loading directive) ─────────────────
-    // Pulse só naquela row — optimistic save/delete sem bloquear a tabela.
-    tbody tr.is-loading {
-      animation: matcha-table-loading-pulse
-                 var(--matcha-table-loading-pulse-duration)
-                 ease-in-out infinite;
-      pointer-events: none;
-    }
-
-    // ── Empty state row (matcha-table-empty directive) ────────────────────
-    // Container pra <matcha-empty-state>. Directive seta colspan automático.
-    tbody tr.is-empty td {
-      padding: var(--matcha-table-empty-padding-y) var(--matcha-table-empty-padding-x);
-      text-align: center;
-      background: var(--matcha-table-cell-bg);
-    }
-
-    // ── Resizable column (matcha-table-resizable directive) ───────────────
-    // Handle invisível na borda direita. Hover mostra cursor + barra discreta.
-    thead th.is-resizable {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: var(--matcha-table-resize-indicator-top);
-        right: 0;
-        width: var(--matcha-table-resize-indicator-width);
-        height: var(--matcha-table-resize-indicator-height);
-        background: var(--matcha-table-border-color);
-        opacity: 0;
-        transition: opacity var(--matcha-table-transition-duration) linear;
-      }
-      &:hover::before { opacity: 1; }
-    }
-    thead th.is-resizable::after {
-      // Override do ::after do sort-indicator: handle de resize ocupa a borda.
-      // Col sortable + resizable é raro — consumer escolhe uma.
-      content: '';
-      position: absolute;
-      top: 0;
-      right: calc(-1 * var(--matcha-table-resize-handle-width) / 2);
-      width: var(--matcha-table-resize-handle-width);
-      height: 100%;
-      cursor: col-resize;
-      z-index: 3;
-      background: transparent;
-      mask: none;
-    }
-  }
-
-  // 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); }
-  }
-
-  // ── Reduced motion ────────────────────────────────────────────────────
-  @media (prefers-reduced-motion: reduce) {
-    .matcha-table tbody td,
-    .matcha-table[loading] tbody tr,
-    matcha-table[loading] .matcha-table tbody tr {
-      transition: none;
-      animation: none;
-    }
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-table — `<table matcha-table>` directive (1:1 Figma DSV3 15641:275)
+//
+// API canon:
+//   <table matcha-table size="comfortable" striped hover bordered stickyHeader
+//                       [stickyStart]="N" [stickyEnd]="N" [loading]="isLoading">
+//     <thead><tr><th>...</th></tr></thead>
+//     <tbody><tr><td>...</td></tr></tbody>
+//   </table>
+//
+// Companion directives (a11y automática):
+//   [matcha-table-sortable] em <th>  — aria-sort + tabindex + keyboard
+//   [rowClick] em <tr>              — AÇÃO na linha (abrir modal, selecionar). Só o
+//                                     binding já ativa tudo (tabindex + Enter/Space
+//                                     + hover accent na linha inteira)
+//
+// Navegação (leva pra outra página) NÃO é [rowClick]:
+//   <a matcha-cell-link [routerLink]> dentro do <td> — âncora de verdade, então
+//   ctrl+clique/clique do meio/botão direito funcionam e o resto da linha segue
+//   selecionável. Ponteiro e tom accent aparecem só sobre a âncora, pintando a linha
+//   inteira. Os dois no mesmo <tr> é proibido pelo canon (dois hovers competindo).
+//
+// Helpers CSS-only:
+//   td.numeric  → tabular-nums
+//   td.truncate → ellipsis (text overflow)
+//   td[data-align] → alinhamento (data-alinhamento / td.text-{center,right} deprecated)
+//   tr.equal/.plus/.minus → variant semantic accent (cor via CSS var)
+//   tr.child-item → indent + accent esmaecido
+//   tr.is-selected → highlight
+// =============================================================================
+
+@mixin matcha-table-modern($theme) {
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // CSS vars do componente — única fonte de verdade. ZERO literal hardcoded
+  // fora deste bloco. Consumer override qualquer um no escopo do <table>.
+  // ═══════════════════════════════════════════════════════════════════════
+  .matcha-table {
+    // ── Dimensions ────────────────────────────────────────────────────────
+    // Calibrado pra density moderna (Stripe/Linear/Notion). Comfortable era 52
+    // antes — apertado em telas wide. 58px equilibra densidade × respiro.
+    --matcha-table-cell-height-compact:      var(--matcha-space-500, 40px);
+    --matcha-table-cell-height-comfortable:  58px;
+    --matcha-table-cell-height-spacious:     var(--matcha-space-800, 64px);
+    // Padding uniforme L/R — assimétrico cria sensação de "primeira coluna
+    // afastada do resto". 16px ambos lados é canon moderno.
+    --matcha-table-cell-padding-x-left:      var(--matcha-space-200, 16px);
+    --matcha-table-cell-padding-x-right:     var(--matcha-space-200, 16px);
+    --matcha-table-cell-min-width:           var(--matcha-space-1500, 120px);
+    --matcha-table-paginator-spacing:        var(--matcha-space-300, 24px);
+
+    // ── Typography (modern density Stripe/Linear) ─────────────────────────
+    --matcha-table-font-size:                13px;
+    --matcha-table-font-line-height:         18px;
+    --matcha-table-header-font-size:         var(--matcha-text-body-sm, 12px);
+    --matcha-table-header-font-line-height:  var(--matcha-leading-body-sm, 16px);
+    --matcha-table-header-letter-spacing:    0.04em;
+
+    // ── Borders / radius ──────────────────────────────────────────────────
+    --matcha-table-border-color:             var(--matcha-color-interaction-disabled-border);
+    --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);
+    --matcha-table-row-bg-selected:          var(--matcha-color-accent-alpha-12,
+                                              rgba(var(--matcha-color-accent), 0.12));
+    --matcha-table-row-bg-striped:           var(--matcha-color-surface-card-alt,
+                                              rgba(var(--matcha-color-fg), 0.02));
+    // Hover NÃO usa surface-table-row-hover token (tá próximo demais de surface-card
+    // em dark e fica imperceptível). Calibrado pra delta visível mesmo sobre stripe.
+    // CSS custom property values são TEXTO LITERAL pro Sass — fn calls Sass
+    // dentro NÃO são avaliadas. Precisa interpolação `#{}` pra forçar Sass a
+    // evaluar `var(--matcha-color-fg)` ANTES do output. Sem isso, o valor sai
+    // literal no bundle (ex: `rgba(var(--matcha-color-fg), 0.12)`) e o browser
+    // descarta como invalid CSS (= chevron invisível, hover sem cor, etc).
+    --matcha-table-row-bg-hover:             rgba(var(--matcha-color-fg), 0.12);
+    --matcha-table-row-bg-hover-striped:     rgba(var(--matcha-color-fg), 0.18);
+    --matcha-table-header-bg-hover:          rgba(var(--matcha-color-fg), 0.10);
+    // Hover da linha que NAVEGA: tom accent, disparado só quando o ponteiro está
+    // sobre a âncora da célula (ver "Row navegável" adiante). Fora dela a linha usa
+    // o hover neutro acima — é esse contraste que diz ao usuário onde clicar.
+    --matcha-table-row-bg-hover-accent:      var(--matcha-color-accent-surface-hover);
+
+    // ── Sort indicator colors ─────────────────────────────────────────────
+    // Inactive usa alpha 0.45 no foreground — claramente VISÍVEL como "ali tem
+    // sort", sem competir com texto do header. Hover/ativo passa pra accent full.
+    --matcha-table-sort-icon-color:          rgba(var(--matcha-color-fg), 0.45);
+    --matcha-table-sort-icon-color-active:   var(--matcha-color-accent);
+    --matcha-table-sort-icon-size:           var(--matcha-space-250, 20px);
+
+    // ── Empty cell placeholder ────────────────────────────────────────────
+    --matcha-table-empty-cell-text:          var(--matcha-color-text-muted,
+                                              rgba(var(--matcha-color-fg), 0.5));
+
+    // ── Variant accent (semantic row) ─────────────────────────────────────
+    --matcha-table-variant-accent-width:     var(--matcha-space-050, 4px);
+    --matcha-table-row-accent-child-opacity: 0.5;
+    --matcha-table-selected-accent-width:    var(--matcha-border-thin, 2px);
+    --matcha-table-selected-accent-color:    var(--matcha-color-accent);
+
+    // ── Column width hints (utility classes col-*) ────────────────────────
+    --matcha-table-col-checkbox-width:       var(--matcha-space-600, 48px);
+    --matcha-table-col-id-width:             var(--matcha-space-1000, 80px);
+    --matcha-table-col-narrow-width:         var(--matcha-space-1500, 120px);
+    --matcha-table-col-medium-width:         var(--matcha-space-2500, 200px);
+    // Pino da coluna de Ações (matcha-cell-action) — mesma escala de
+    // --matcha-table-col-id-width (80px), token próprio pra não acoplar
+    // semanticamente coisas diferentes que hoje só coincidem em valor.
+    --matcha-table-col-actions-width:        var(--matcha-space-1000, 80px);
+
+    // ── States / animations ───────────────────────────────────────────────
+    --matcha-table-disabled-opacity:         var(--matcha-state-disabled-opacity, 0.5);
+    --matcha-table-loading-pulse-duration:   var(--matcha-duration-slow, 1500ms);
+    --matcha-table-loading-pulse-opacity-min: 0.5;
+    --matcha-table-transition-duration:      var(--matcha-duration-instant, 80ms);
+    --matcha-table-focus-ring-width:         var(--matcha-state-focus-ring-width, 2px);
+    --matcha-table-focus-ring-color:         var(--matcha-color-accent);
+
+    // ── Empty state row (matcha-table-empty directive) ────────────────────
+    --matcha-table-empty-padding-y:          var(--matcha-space-500, 40px);
+    --matcha-table-empty-padding-x:          var(--matcha-space-300, 24px);
+
+    // ── Resize handle (matcha-table-resizable directive) ──────────────────
+    --matcha-table-resize-handle-width:      var(--matcha-space-100, 8px);
+    --matcha-table-resize-indicator-width:   var(--matcha-border-hairline, 1px);
+    --matcha-table-resize-indicator-height:  50%;
+    --matcha-table-resize-indicator-top:     25%;
+  }
+
+  // ── Base — display table nativo + typography via vars ─────────────────
+  .matcha-table {
+    display: table;
+    width: 100%;
+    // 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);
+    line-height: var(--matcha-table-font-line-height);
+    font-weight: var(--matcha-weight-regular, 400);
+    color: var(--matcha-color-text-secondary,
+      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
+
+    // ── Header cells (text/primary, border-bottom 2px, height 64) ────────
+    thead th {
+      box-sizing: border-box;
+      height: var(--matcha-table-cell-height-comfortable);
+      min-width: var(--matcha-table-cell-min-width);
+      padding: 0
+               var(--matcha-table-cell-padding-x-right)
+               0
+               var(--matcha-table-cell-padding-x-left);
+      background: var(--matcha-table-cell-bg);
+      color: var(--matcha-color-text-primary,
+        var(--matcha-color-fg));
+      // Header menor que body — hierarquia "metadado" vs "conteúdo".
+      font-size: var(--matcha-table-header-font-size);
+      line-height: var(--matcha-table-header-font-line-height);
+      font-weight: var(--matcha-weight-semibold, 600);
+      letter-spacing: var(--matcha-table-header-letter-spacing);
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: var(--matcha-table-border-header) solid
+        var(--matcha-table-border-color);
+
+      // Alinhamento — data-align é o canon DSV3; data-alinhamento + utility
+      // classes seguem aceitos (deprecated, remoção em ciclo futuro)
+      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
+      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
+
+      // ── Sortable hint ([matcha-table-sortable] directive seta os attrs) ──
+      &[data-sortable] {
+        cursor: pointer;
+        user-select: none;
+        // SEMPRE reserva espaço pro chevron (mesmo inativo) — chevron entra/sai
+        // só via opacity. Sem padding condicional → texto NÃO desloca no hover.
+        padding-right: calc(var(--matcha-table-cell-padding-x-right) +
+                            var(--matcha-table-sort-icon-size));
+        position: relative;
+
+        // Hover NÃO muda bg do header — bg-change era o que fazia o user
+        // perceber "movimento" quando o chevron entrava ao mesmo tempo.
+        // Manter header estático no hover, só chevron aparece com opacity.
+        // Cursor pointer + chevron fade já comunicam interatividade.
+
+        // Sort indicators — SVG 1:1 com `matcha/icon/arrow` (figma-icons.ts).
+        // Estado inativo (none) = INVISÍVEL (opacity 0). Aparece no hover do header
+        // com opacity faded, full quando ativo (asc/desc). Pattern canon Stripe/Linear:
+        // sortable em todas as colunas, mas indicador só na que tá ordenando.
+        &::after {
+          content: '';
+          position: absolute;
+          right: var(--matcha-table-cell-padding-x-right);
+          top: 50%;
+          transform: translateY(-50%);
+          width: var(--matcha-table-sort-icon-size);
+          height: var(--matcha-table-sort-icon-size);
+          background: var(--matcha-table-sort-icon-color);
+          transition: background-color var(--matcha-table-transition-duration) linear;
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 7.82499L6.1 12.725C5.9 12.925 5.66667 13.0208 5.4 13.0125C5.13333 13.0042 4.9 12.9 4.7 12.7C4.51667 12.5 4.42083 12.2667 4.4125 12C4.40417 11.7333 4.5 11.5 4.7 11.3L11.3 4.69999C11.4 4.59999 11.5083 4.52915 11.625 4.48749C11.7417 4.44582 11.8667 4.42499 12 4.42499C12.1333 4.42499 12.2583 4.44582 12.375 4.48749C12.4917 4.52915 12.6 4.59999 12.7 4.69999L19.3 11.3C19.4833 11.4833 19.575 11.7125 19.575 11.9875C19.575 12.2625 19.4833 12.5 19.3 12.7C19.1 12.9 18.8625 13 18.5875 13C18.3125 13 18.075 12.9 17.875 12.7L13 7.82499V19C13 19.2833 12.9042 19.5208 12.7125 19.7125C12.5208 19.9042 12.2833 20 12 20C11.7167 20 11.4792 19.9042 11.2875 19.7125C11.0958 19.5208 11 19.2833 11 19V7.82499Z'/></svg>")
+                center/contain no-repeat;
+        }
+
+        // Hover no header — chevron escurece pra foreground full (já visível
+        // muted antes via alpha 0.45). Reforça que tá interativo.
+        &:hover::after {
+          background: var(--matcha-color-text-primary,
+            var(--matcha-color-fg));
+        }
+
+        // Padding-right SEMPRE reserva espaço pro chevron. Antes ajustava
+        // condicionalmente (sem padding extra no inativo) — causava text
+        // "dançar" 20px ao hover quando padding crescia pra acomodar arrow.
+        // Mantém estável: chevron entra via opacity, sem reflow do texto.
+
+        &[data-sort-direction="asc"]::after {
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 7.82499L6.1 12.725C5.9 12.925 5.66667 13.0208 5.4 13.0125C5.13333 13.0042 4.9 12.9 4.7 12.7C4.51667 12.5 4.42083 12.2667 4.4125 12C4.40417 11.7333 4.5 11.5 4.7 11.3L11.3 4.69999C11.4 4.59999 11.5083 4.52915 11.625 4.48749C11.7417 4.44582 11.8667 4.42499 12 4.42499C12.1333 4.42499 12.2583 4.44582 12.375 4.48749C12.4917 4.52915 12.6 4.59999 12.7 4.69999L19.3 11.3C19.4833 11.4833 19.575 11.7125 19.575 11.9875C19.575 12.2625 19.4833 12.5 19.3 12.7C19.1 12.9 18.8625 13 18.5875 13C18.3125 13 18.075 12.9 17.875 12.7L13 7.82499V19C13 19.2833 12.9042 19.5208 12.7125 19.7125C12.5208 19.9042 12.2833 20 12 20C11.7167 20 11.4792 19.9042 11.2875 19.7125C11.0958 19.5208 11 19.2833 11 19V7.82499Z'/></svg>")
+                center/contain no-repeat;
+          background: var(--matcha-table-sort-icon-color-active);
+        }
+
+        &[data-sort-direction="desc"]::after {
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 16.175V5C11 4.71667 11.0958 4.47917 11.2875 4.2875C11.4792 4.09583 11.7167 4 12 4C12.2833 4 12.5208 4.09583 12.7125 4.2875C12.9042 4.47917 13 4.71667 13 5V16.175L17.9 11.275C18.1 11.075 18.3333 10.9792 18.6 10.9875C18.8667 10.9958 19.1 11.1 19.3 11.3C19.4833 11.5 19.5792 11.7333 19.5875 12C19.5958 12.2667 19.5 12.5 19.3 12.7L12.7 19.3C12.6 19.4 12.4917 19.4708 12.375 19.5125C12.2583 19.5542 12.1333 19.575 12 19.575C11.8667 19.575 11.7417 19.5542 11.625 19.5125C11.5083 19.4708 11.4 19.4 11.3 19.3L4.7 12.7C4.51667 12.5167 4.425 12.2875 4.425 12.0125C4.425 11.7375 4.51667 11.5 4.7 11.3C4.9 11.1 5.1375 11 5.4125 11C5.6875 11 5.925 11.1 6.125 11.3L11 16.175Z'/></svg>")
+                center/contain no-repeat;
+          background: var(--matcha-table-sort-icon-color-active);
+        }
+
+        // Header right-aligned com sort — chevron vem ANTES do texto (canon).
+        &[data-align="right"], &[data-alinhamento="right"], &.text-right {
+          padding-right: var(--matcha-table-cell-padding-x-right);
+          padding-left: calc(var(--matcha-table-cell-padding-x-left) +
+                             var(--matcha-table-sort-icon-size));
+
+          &::after {
+            right: auto;
+            left: var(--matcha-table-cell-padding-x-left);
+          }
+        }
+
+        // Focus ring quando keyboard-navigated (tabindex via directive).
+        &:focus-visible {
+          outline: var(--matcha-table-focus-ring-width) solid
+            var(--matcha-table-focus-ring-color);
+          outline-offset: calc(-1 * var(--matcha-table-focus-ring-width));
+        }
+      }
+    }
+
+    // ── Body cells ────────────────────────────────────────────────────────
+    tbody td {
+      box-sizing: border-box;
+      height: var(--matcha-table-cell-height-comfortable);
+      min-width: var(--matcha-table-cell-min-width);
+      padding: 0
+               var(--matcha-table-cell-padding-x-right)
+               0
+               var(--matcha-table-cell-padding-x-left);
+      background: var(--matcha-table-cell-bg);
+      color: var(--matcha-color-text-secondary,
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
+      vertical-align: middle;
+      border-bottom: var(--matcha-table-border-row) solid
+        var(--matcha-table-border-color);
+      transition: background-color var(--matcha-table-transition-duration) linear;
+
+      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
+      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
+
+      // Helper: tabular-nums (alinha decimais)
+      &[data-numeric], &.numeric {
+        font-variant-numeric: tabular-nums;
+        font-feature-settings: 'tnum';
+      }
+
+      // Helper: ellipsis (texto longo)
+      &[data-truncate], &.truncate {
+        max-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // Helper: cells vazias preenchidas com "—" muted (canon moderno).
+      &:empty::after {
+        content: '—';
+        color: var(--matcha-table-empty-cell-text);
+      }
+    }
+
+    // ── Column width hints (aplicar em <th> — <td> herda pela coluna) ─────
+    thead th,
+    tbody td {
+      // min-width igual ao width — sem isso, a regra base thead th/tbody td
+      // (min-width:120px) vence e a coluna nunca encolhe pro valor pretendido
+      // (mesmo bug achado e corrigido em .col-actions).
+      &.col-checkbox { width: var(--matcha-table-col-checkbox-width); min-width: var(--matcha-table-col-checkbox-width); text-align: center; }
+      &.col-id      { width: var(--matcha-table-col-id-width); }
+      &.col-narrow  { width: var(--matcha-table-col-narrow-width); }
+      &.col-medium  { width: var(--matcha-table-col-medium-width); }
+      // Actions / icon-buttons — pinada em --matcha-table-col-actions-width (80px).
+      // Children inline-flex, centralizados (título "Ações" no header também
+      // centraliza — text-align: center vale pro conteúdo das duas linhas).
+      //
+      // Importante: `.matcha-button` tem `display: flex` (block-level) que faria
+      // os icon-buttons empilharem verticalmente. Override via selector descendant
+      // com specificity maior pra forçar inline-flex no contexto de actions cell.
+      &.col-actions {
+        width: var(--matcha-table-col-actions-width);
+        // min-width base da tbody td/thead th é 120px (--matcha-table-cell-min-width)
+        // — maior que os 80px daqui, e min-width sempre vence sobre width no box
+        // model. Sem este override, a coluna ficava presa em 120px (achado real).
+        min-width: var(--matcha-table-col-actions-width);
+        white-space: nowrap;
+        text-align: center;
+
+        > .matcha-button,
+        > button[matcha-icon-button],
+        > * {
+          display: inline-flex;
+          vertical-align: middle;
+        }
+        > * + * {
+          margin-left: var(--matcha-space-050, 4px);
+        }
+      }
+      // Greedy = espaço residual (default, classe explícita pra documentação).
+      &.col-greedy { width: auto; }
+    }
+
+    // ── Paginator alinhado após table (convention) ────────────────────────
+    // Sem margin-top — paginator gruda no border-bottom da última row.
+    // Spacing visual vem dos paddings internos do próprio matcha-paginator.
+    .matcha-table-paginator,
+    & + matcha-paginator {
+      display: block;
+      margin-top: 0;
+    }
+
+    // ── Row clickable ([rowClick] directive — só o binding já ativa tudo) ─
+    tbody tr.matcha-row-clickable {
+      cursor: pointer;
+
+      &:hover td {
+        --matcha-table-cell-bg: var(--matcha-table-row-bg-hover);
+      }
+
+      &:focus-visible {
+        outline: var(--matcha-table-focus-ring-width) solid
+          var(--matcha-table-focus-ring-color);
+        outline-offset: calc(-1 * var(--matcha-table-focus-ring-width));
+      }
+    }
+
+    // ── 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.
+    &[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);
+    }
+
+    &[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.
+    &[striped] tbody tr:where(:nth-child(even)).matcha-row-clickable:hover td,
+    matcha-table[striped] & tbody tr:where(:nth-child(even)).matcha-row-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);
+    }
+
+    // Hover accent de linha clicável: a diretiva [rowClick] já sobrescreve
+    // --matcha-table-row-bg-hover(-striped) inline no próprio <tr> (ver
+    // table-clickable-row.directive.ts) — nenhuma regra de tema necessária
+    // aqui, o estilo inline já vence qualquer especificidade.
+
+    // ── Row navegável (`<a matcha-cell-link>` na célula) ───────────────────
+    // A linha que LEVA PRA OUTRA PÁGINA não é clicável inteira: quem navega é uma
+    // âncora de verdade na célula, pra que ctrl+clique, clique do meio e o menu do
+    // botão direito funcionem — e pra que o resto da linha continue selecionável
+    // com o mouse (com a linha toda clicável, não dava pra copiar texto da tabela).
+    //
+    // O feedback visual é o inverso do rowClick: ponteiro e tom accent aparecem só
+    // quando o mouse está sobre a âncora, e aí a linha INTEIRA pinta. Fora dela vale
+    // o hover neutro de sempre.
+    //
+    // Pinta via --matcha-table-cell-bg em TODOS os td da linha (mesmo caminho do
+    // hover normal), não com background-color no <tr>: em tabela striped o fundo
+    // mora no td, e um background no tr ficaria por baixo dele — o resultado seria
+    // uma célula colorida e o resto não.
+    //
+    // Depois das regras de striped de propósito: mesma especificidade, e ordem de
+    // origem decide. `:has()` já é usado em ~10 componentes do tema.
+    // O estilo BASE da âncora é global (base/_reset.scss) — ela também aparece em
+    // card de listagem, fora de qualquer tabela. Aqui fica só o que é da tabela: o
+    // realce da linha inteira.
+    a[matcha-cell-link]:focus-visible {
+      outline: var(--matcha-table-focus-ring-width) solid
+        var(--matcha-table-focus-ring-color);
+    }
+
+    tbody tr:has(a[matcha-cell-link]:hover) td,
+    tbody tr:has(a[matcha-cell-link]:focus-visible) td {
+      --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-accent);
+    }
+
+    // O ALVO é a CÉLULA inteira, não só o texto do nome.
+    //
+    // A âncora envolve o nome, e em título curto isso vira um alvo de poucos pixels —
+    // reclamação de quem usa, medida em séries. O `::after` esticado resolve sem trocar
+    // a âncora por handler de clique: o href continua existindo, então ctrl+clique,
+    // clique do meio e "abrir em nova aba" seguem funcionando, e o foco de teclado
+    // continua sendo o do link.
+    //
+    // De quebra conserta o hover: a regra acima só pinta a linha quando o mouse está
+    // sobre o TEXTO. Com a área esticada, pinta ao entrar na célula — que é o que faz
+    // a linha parecer clicável.
+    //
+    // Escopado em `.matcha-table td` de propósito: `a[matcha-cell-link]` também aparece
+    // em card de listagem, fora de tabela, e lá o link deve seguir do tamanho do texto.
+    //
+    // O custo é a seleção de texto DENTRO desta célula. No resto da linha continua
+    // funcionando, que é a diferença para a linha toda clicável.
+    td:has(a[matcha-cell-link]) {
+      position: relative;
+    }
+
+    td a[matcha-cell-link]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    tbody tr.is-selected td {
+      --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
+    }
+    // Selected row ganha border-left accent — affordance canon Linear/Notion.
+    // No <tr> → não some com stickyStart. Usa ::after pra coexistir com
+    // ::before do variant accent sem conflito.
+    tbody tr.is-selected {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--matcha-table-selected-accent-width);
+        height: 100%;
+        background: var(--matcha-table-selected-accent-color);
+        pointer-events: none;
+        z-index: 2;  // acima do variant accent (z-index 1)
+      }
+    }
+
+    // Bordered — box-shadow inset em vez de border real (não clipa shadows
+    // externos das sticky cols, que projetam pra fora da <table>).
+    // 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). 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;
+    }
+
+    // Size variants (data-size cascateia altura)
+    &[data-size="compact"]  thead th,
+    &[data-size="compact"]  tbody td { height: var(--matcha-table-cell-height-compact); }
+    &[data-size="spacious"] thead th,
+    &[data-size="spacious"] tbody td { height: var(--matcha-table-cell-height-spacious); }
+
+    // ── Sticky columns (start/end) — canon scroll horizontal ──────────────
+    // 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}"]: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-color: var(--matcha-color-surface-card);
+        }
+        // Última cell do grupo sticky-start marca o scroll-edge com borda fina.
+        thead th:nth-child(#{$i}),
+        tbody tr td:nth-child(#{$i}) {
+          border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        }
+      }
+
+      &[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);
+        }
+        thead th:nth-last-child(#{$i}),
+        tbody tr td:nth-last-child(#{$i}) {
+          border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        }
+      }
+    }
+
+    &[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.
+    // Accent vive no <tr> → NÃO some com stickyStart.
+    // `position: relative` em <tr> suportado em Chrome 80+, FF 87+, Safari 14+.
+    tr.equal { --matcha-table-row-accent-color: var(--matcha-color-info); }
+    tr.plus  { --matcha-table-row-accent-color: var(--matcha-color-success); }
+    tr.minus { --matcha-table-row-accent-color: var(--matcha-color-danger); }
+
+    tbody tr[data-variant],
+    tbody tr.equal,
+    tbody tr.plus,
+    tbody tr.minus {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--matcha-table-variant-accent-width);
+        height: 100%;
+        background: var(--matcha-table-row-accent-color, transparent);
+        pointer-events: none;
+        z-index: 1;  // acima do bg da cell, abaixo do sticky shadow
+      }
+    }
+
+    // Child row (indent + accent esmaecido) — pattern tree/hierarquia.
+    tbody tr.child-item::before {
+      opacity: var(--matcha-table-row-accent-child-opacity);
+    }
+    tbody tr.child-item td:first-child {
+      padding-left: calc(var(--matcha-table-cell-padding-x-left) +
+                         var(--matcha-space-200, 16px));
+    }
+
+    // ── Loading state global — pulse + aria-busy ─────────────────────────
+    &[loading] tbody tr,
+    matcha-table[loading] & tbody tr {
+      animation: matcha-table-loading-pulse
+                 var(--matcha-table-loading-pulse-duration)
+                 ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    // ── Disabled state — row/cell ─────────────────────────────────────────
+    // Pattern canon Material/Polaris. A11y: também aplicar aria-disabled.
+    tbody tr[disabled], tbody tr.is-disabled,
+    tbody td[disabled], tbody td.is-disabled {
+      opacity: var(--matcha-table-disabled-opacity);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    // ── Per-row loading (matcha-table-loading directive) ─────────────────
+    // Pulse só naquela row — optimistic save/delete sem bloquear a tabela.
+    tbody tr.is-loading {
+      animation: matcha-table-loading-pulse
+                 var(--matcha-table-loading-pulse-duration)
+                 ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    // ── Empty state row (matcha-table-empty directive) ────────────────────
+    // Container pra <matcha-empty-state>. Directive seta colspan automático.
+    tbody tr.is-empty td {
+      padding: var(--matcha-table-empty-padding-y) var(--matcha-table-empty-padding-x);
+      text-align: center;
+      background: var(--matcha-table-cell-bg);
+    }
+
+    // ── Resizable column (matcha-table-resizable directive) ───────────────
+    // Handle invisível na borda direita. Hover mostra cursor + barra discreta.
+    thead th.is-resizable {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: var(--matcha-table-resize-indicator-top);
+        right: 0;
+        width: var(--matcha-table-resize-indicator-width);
+        height: var(--matcha-table-resize-indicator-height);
+        background: var(--matcha-table-border-color);
+        opacity: 0;
+        transition: opacity var(--matcha-table-transition-duration) linear;
+      }
+      &:hover::before { opacity: 1; }
+    }
+    thead th.is-resizable::after {
+      // Override do ::after do sort-indicator: handle de resize ocupa a borda.
+      // Col sortable + resizable é raro — consumer escolhe uma.
+      content: '';
+      position: absolute;
+      top: 0;
+      right: calc(-1 * var(--matcha-table-resize-handle-width) / 2);
+      width: var(--matcha-table-resize-handle-width);
+      height: 100%;
+      cursor: col-resize;
+      z-index: 3;
+      background: transparent;
+      mask: none;
+    }
+  }
+
+  // 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); }
+  }
+
+  // ── Reduced motion ────────────────────────────────────────────────────
+  @media (prefers-reduced-motion: reduce) {
+    .matcha-table tbody td,
+    .matcha-table[loading] tbody tr,
+    matcha-table[loading] .matcha-table tbody tr {
+      transition: none;
+      animation: none;
+    }
+  }
+}