@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-table.scss

@@ -1,785 +1,569 @@
-@use "sass:map";
-
-@mixin _matcha-table-theme-container-shadow-property($theme) {
-    box-shadow:
-        0px -16px 0px 0px inset getSurface($theme),
-        20px 0 16px -24px inset rgba(#212121, 0.15), // ok: structural
-        -20px 0 16px -24px inset rgba(#212121, 0.15), // ok: structural
-        0px 2px 2px 0px rgba(#212121, 0.035), // ok: structural
-        0px 2px 2px 0px rgba(#212121, 0.035), // ok: structural
-        0px 2px 2px 0px rgba(#212121, 0.035); // ok: structural
-}
-
-@mixin _matcha-table-theme-shadow-property($theme) {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    background: linear-gradient(
-        90deg,
-        getSurface($theme) 0px,
-        getSurface($theme) 10px,
-        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
-        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
-        getSurface($theme) calc(100% - 10px)
-    );
-    background: -moz-linear-gradient(
-        90deg,
-        getSurface($theme) 0px,
-        getSurface($theme) 10px,
-        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
-        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
-        getSurface($theme) calc(100% - 10px)
-    );
-    background: -webkit-linear-gradient(
-        0deg,
-        getSurface($theme) 0px,
-        getSurface($theme) 10px,
-        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
-        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
-        getSurface($theme) calc(100% - 10px)
-    );
-}
-
-@mixin matcha-table-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
-
-    // Vai direto na tag body
-    body.is-mobile {
-        .table-container {
-            .table-container-shadow {
-                overflow: auto;
-                @include _matcha-table-theme-container-shadow-property($theme);
-
-                .mat-table,
-                .mat-sort {
-                    tbody {
-                        @include _matcha-table-theme-shadow-property($theme);
-                    }
-                }
-            }
-        }
-    }
-
-    .table-container {
-        width: 100%;
-
-        .mat-table,
-        .mat-sort {
-            .published {
-                color: getGreen($theme);
-            }
-
-            .notPublished {
-                color: getAmber($theme);
-            }
-        }
-
-        .table-container-shadow {
-            overflow: auto;
-            background: var(--matcha-color-surface, #{getSurface($theme)});
-            border-radius: var(--matcha-radius-lg, 8px);
-            @include _matcha-table-theme-container-shadow-property($theme);
-
-            .mat-table,
-            .mat-sort {
-                tbody {
-                    @include _matcha-table-theme-shadow-property($theme);
-                }
-            }
-
-            &.ps--active-x {
-                @include _matcha-table-theme-container-shadow-property($theme);
-
-                .mat-table,
-                .mat-sort {
-                    @include _matcha-table-theme-shadow-property($theme);
-                }
-            }
-        }
-
-        .mat-table,
-        .mat-sort,
-        .mat-expansion-panel {
-            thead {
-                background: var(--matcha-color-surface, #{getSurface($theme)});
-
-                th {
-                    height: var(--matcha-space-800, 64px);
-                }
-            }
-
-            tr {
-                &.mat-row {
-                    // &:nth-child(even){background: map-get($background, card);}
-                    &:nth-child(odd) {
-                        background: getBackgroundAlpha($theme);
-                    }
-                }
-
-                td,
-                th {
-                    touch-action: unset !important;
-                    font-size: var(--matcha-text-body-md, 14px);
-
-                    &:first-child {
-                        padding-left: var(--matcha-space-300, 24px);
-                    }
-
-                    .clickable {
-                        cursor: pointer;
-                    }
-                }
-            }
-
-            .td-duble-line {
-                height: var(--matcha-space-600, 48px);
-            }
-
-            .td-with-image,
-            .td-with-checkbox,
-            .td-with-icon,
-            .td-duble-line {
-                display: flex;
-                align-items: center;
-
-                .td-text-aside {
-                    display: inline-block;
-                    width: calc(100% - var(--matcha-space-600, 48px));
-                }
-
-                .avatar {
-                    width: var(--matcha-space-600, 48px);
-                    min-width: var(--matcha-space-600, 48px);
-                    height: var(--matcha-space-600, 48px);
-                    line-height: var(--matcha-space-600, 48px);
-                    border-width: 0;
-                    margin-right: var(--matcha-space-300, 24px);
-                }
-
-                .thumbnail {
-                    width: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px)); // 72
-                    min-width: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px));
-                    height: var(--matcha-space-600, 48px);
-                    border-radius: var(--matcha-radius-lg, 8px);
-                    margin: 0 var(--matcha-space-100, 8px) 0 0;
-
-                    &-portrait {
-                        width: var(--matcha-avatar-lg, 56px);
-                        min-width: var(--matcha-avatar-lg, 56px);
-                        height: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px)); // 72
-                        border-radius: var(--matcha-radius-lg, 8px);
-                        margin: 0 var(--matcha-space-100, 8px) 0 0;
-                    }
-                }
-            }
-
-            .mat-header-cell {
-                color: var(--matcha-color-fg, #{getForeground($theme)});
-                font-family: var(--matcha-font-family);
-                font-weight: 500;
-                font-size: var(--matcha-text-body-md, 14px);
-                padding-left: var(--matcha-space-100, 8px);
-                padding-right: var(--matcha-space-100, 8px);
-                border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-            }
-
-            .mat-cell {
-                color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-                font-size: var(--matcha-text-body-md, 14px);
-                padding-left: var(--matcha-space-100, 8px);
-                padding-right: var(--matcha-space-100, 8px);
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                text-align: start;
-                border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-
-                &.cdk-column-menu {
-                    text-align: left;
-                }
-            }
-
-            .last {
-                display: flex;
-                justify-content: space-between;
-                width: 100%;
-                align-items: center;
-
-                span {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-
-                mat-menu {
-                    display: none;
-                }
-            }
-        }
-
-        table {
-            width: 100%;
-        }
-
-        .badge {
-            border-radius: var(--matcha-radius-lg, 8px);
-            padding: var(--matcha-space-100, 8px);
-            color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
-
-            &.live-badge {
-                background-color: getCyan($theme);
-                font-size: var(--matcha-text-body-md, 14px);
-            }
-
-            &.cell-badge {
-                background-color: getPurple($theme);
-                font-size: var(--matcha-text-body-md, 14px);
-            }
-
-            &.cult-badge {
-                background-color: getBlue($theme);
-                font-size: var(--matcha-text-body-md, 14px);
-            }
-
-            &.new-visitor-badge {
-                background-color: var(--matcha-color-primary, #{getPrimary($theme)});
-                color: var(--matcha-color-accent-contrast, #{getPrimaryContrast($theme)});
-                font-size: var(--matcha-text-body-md, 14px);
-                line-height: var(--matcha-leading-caption, 14px);
-                display: inline-block;
-                width: auto;
-            }
-        }
-    }
-
-    // X-Large devices (big desktops, 1440px and up < 1920)
-    @include media-breakpoint('gt-md') {
-        .table-container {
-            .mat-table,
-            .mat-sort {
-                .mat-cell {
-                    font-size: var(--matcha-text-title-sm, 16px);
-                }
-            }
-        }
-    }
-
-    //---------------------------------------------------------------------------
-    // ESTILOS PARA O COMPONENTE MATCHA-TABLE
-    //---------------------------------------------------------------------------
-    // Estilos para tabelas nativas com a classe matcha-table
-
-    .matcha-table {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: var(--matcha-space-200, 16px);
-        border-collapse: collapse;
-        border-spacing: 0;
-    }
-
-    // Vai direto na tag body
-    body.is-mobile {
-        .matcha-table {
-            .matcha-table-container-shadow {
-                overflow: auto;
-                @include _matcha-table-theme-container-shadow-property($theme);
-                table.matcha-table-content {
-                    tbody {
-                        @include _matcha-table-theme-shadow-property($theme);
-                    }
-                }
-            }
-        }
-    }
-
-// Estrutura
-// matcha-table
-//     matcha-table-container
-//         matcha-table-container-shadow
-//             table.matcha-table-content
-//                 thead
-//                 tbody
-
-    .matcha-table {
-        --table-row-height: 64px; // comfortable = default (alinhado com Figma)
-        --table-shadow-alpha: rgba(#{getForeground($theme)}, 0.05);
-        .matcha-table-container-shadow {
-            overflow: auto;
-            background: var(--matcha-color-surface, #{getSurface($theme)});
-            border-radius: var(--matcha-radius-lg, 8px);
-            @include _matcha-table-theme-container-shadow-property($theme);
-
-            table.matcha-table-content {
-                width: 100%;
-                border-collapse: collapse;
-                border-spacing: 0;
-                @include _matcha-table-theme-shadow-property($theme);
-                thead {
-                    th {
-                        height: var(--table-row-height);
-                        background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-                        color: var(--matcha-color-fg, #{getForeground($theme)});
-                        font-family: var(--matcha-font-family);
-                        font-weight: 600; // SemiBold (Figma Header)
-                        font-size: var(--matcha-text-body-md, 14px);
-                        text-align: left;
-                        padding-left: var(--matcha-space-300, 24px);
-                        padding-right: var(--matcha-space-200, 16px);
-                        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-                    }
-                }
-
-                tbody {
-                    tr {
-                        height: var(--table-row-height);
-                        // &:nth-child(even){background: map-get($background, card);}
-                        // &:nth-child(odd) {
-                        //     background: getBackgroundAlpha($theme);
-                        // }
-
-
-
-                        td{
-                            color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-                            font-family: var(--matcha-font-family);
-                            font-size: var(--matcha-text-body-md, 14px); // body-md (Figma)
-                            padding-left: var(--matcha-space-100, 8px);
-                            padding-right: var(--matcha-space-100, 8px);
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            text-align: start;
-                            border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-                            touch-action: unset !important;
-                            min-width: 120px;
-
-                            &:first-child {
-                                padding-left: var(--matcha-space-300, 24px);
-                            }
-
-                        }
-                    }
-
-                    // esse é um caso especifico para as tabelas que tem aninhamento de itens
-                    tr {
-                        &.equal {
-
-                            td,
-                            th {
-                                &:first-child {
-                                    box-shadow: 4px 0 0 0 inset getBlue($theme), 10px 0 10px -10px getDisabled($theme);
-                                }
-                            }
-
-                            &.child-item {
-
-                                td,
-                                th {
-                                    &:first-child {
-                                        box-shadow: 4px 0 0 0 inset getBlueAlpha($theme), 10px 0 10px -10px getDisabled($theme);
-                                    }
-                                }
-                            }
-                        }
-
-                        &.plus {
-
-                            td,
-                            th {
-                                &:first-child {
-                                    box-shadow: 4px 0 0 0 inset getGreen($theme), 10px 0 10px -10px getDisabled($theme);
-                                }
-                            }
-
-                            &.child-item {
-                                td,
-                                th {
-                                    &:first-child {
-                                        box-shadow: 4px 0 0 0 inset getGreenAlpha($theme), 10px 0 10px -10px getDisabled($theme);
-                                    }
-                                }
-                            }
-                        }
-
-                        &.minus {
-
-                            td,
-                            th {
-                                &:first-child {
-                                    box-shadow: 4px 0 0 0 inset getRed($theme), 10px 0 10px -10px getDisabled($theme);
-                                }
-                            }
-
-                            &.child-item {
-
-                                td,
-                                th {
-                                    &:first-child {
-                                        box-shadow: 4px 0 0 0 inset getRedAlpha($theme), 10px 0 10px -10px getDisabled($theme);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // X-Large devices (big desktops, 1440px and up < 1920)
-    @include media-breakpoint('gt-md') {
-        .matcha-table {
-            .matcha-table-container-shadow {
-                table.matcha-table-content {
-                    .td {
-                        font-size: var(--matcha-text-title-sm, 16px);
-                    }
-                }
-            }
-        }
-    }
-
-    // Variações de tamanho/densidade
-    .matcha-table-compact {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                --table-row-height: 48px;
-
-                thead th {
-                    height: var(--table-row-height);
-                    padding-top: var(--matcha-space-100, 8px);
-                    padding-bottom: var(--matcha-space-100, 8px);
-                    font-size: var(--matcha-text-body-md, 14px);
-                }
-
-                tbody tr {
-                    height: var(--table-row-height);
-
-                    td {
-                        padding-top: var(--matcha-space-100, 8px);
-                        padding-bottom: var(--matcha-space-100, 8px);
-                        font-size: var(--matcha-text-body-md, 14px);
-                    }
-                }
-            }
-        }
-    }
-
-    .matcha-table-comfortable {
-        // Estilo padrão de densidade (já aplicado na estrutura base)
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                --table-row-height: 64px;
-
-                thead th {
-                    height: var(--table-row-height);
-                    padding-top: var(--matcha-space-150, 12px);
-                    padding-bottom: var(--matcha-space-150, 12px);
-                }
-
-                tbody tr {
-                    height: var(--table-row-height);
-
-                    td {
-                        padding-top: var(--matcha-space-150, 12px);
-                        padding-bottom: var(--matcha-space-150, 12px);
-                    }
-                }
-            }
-        }
-    }
-
-    .matcha-table-spacious {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                --table-row-height: 80px;
-
-                thead th {
-                    height: var(--table-row-height);
-                    padding-top: var(--matcha-space-200, 16px);
-                    padding-bottom: var(--matcha-space-200, 16px);
-                    font-size: var(--matcha-text-title-md, 18px);
-                }
-
-                tbody tr {
-                    height: var(--table-row-height);
-
-                    td {
-                        padding-top: var(--matcha-space-200, 16px);
-                        padding-bottom: var(--matcha-space-200, 16px);
-                        font-size: var(--matcha-text-title-md, 18px);
-                    }
-                }
-            }
-        }
-    }
-
-    // Linhas zebras
-    .matcha-table-striped {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                tbody tr {
-                    &:nth-child(odd) {
-                        background: var(--table-shadow-alpha);
-                    }
-
-                    &:nth-child(even) {
-                        background: transparent;
-                    }
-                }
-            }
-        }
-    }
-
-    // Hover nas linhas — Template A: tr é a área interativa
-    .matcha-table-hover {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                tbody tr {
-                    position: relative;
-                    overflow: hidden;
-                    cursor: pointer;
-
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        inset: 0;
-                        background: currentColor;
-                        opacity: 0;
-                        border-radius: inherit;
-                        pointer-events: none;
-                        transition: opacity var(--matcha-duration-instant, 80ms) linear;
-                    }
-
-                    &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-                    &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-                    &[disabled] { pointer-events: none; cursor: default; }
-
-                    @media (prefers-reduced-motion: reduce) {
-                        &::before { transition: none; }
-                    }
-
-                    &:focus-visible:not([disabled]) {
-                        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-                        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-                    }
-                }
-            }
-        }
-    }
-
-    // Bordas visíveis
-    .matcha-table-bordered {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-
-                thead th {
-                    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-                    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-
-                    &:last-child {
-                        border-right: none;
-                    }
-                }
-
-                tbody tr {
-                    td {
-                        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-                        border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
-
-                        &:last-child {
-                            border-right: none;
-                        }
-                    }
-
-                    &:last-child td {
-                        border-bottom: none;
-                    }
-                }
-            }
-        }
-    }
-
-    // Cabeçalho fixo (sticky)
-    .matcha-table-sticky-header {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                thead {
-                    position: sticky;
-                    top: 0;
-                    z-index: 10;
-                    display: table-header-group;
-                }
-
-                thead th {
-                    position: sticky;
-                    top: 0;
-                    z-index: 11;
-                    box-shadow: 0 2px 4px var(--table-shadow-alpha);
-                }
-            }
-        }
-    }
-
-    // Colunas fixas (sticky columns) - primeira coluna fixa por padrão quando há scroll
-    .matcha-table-sticky-start {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                thead th:first-child,
-                tbody tr td:first-child {
-                    position: sticky;
-                    left: 0;
-                    z-index: 5;
-                    background: var(--matcha-color-surface, #{getSurface($theme)});
-                }
-
-                thead th:first-child {
-                    z-index: 15;
-                    box-shadow: 10px 0 10px -10px getDisabled($theme);
-
-                }
-
-                tbody tr td:first-child {
-                    box-shadow: 10px 0 10px -10px getDisabled($theme);
-
-                }
-            }
-        }
-
-        // Para múltiplas colunas fixas no início
-        &.matcha-table-sticky-start-2 {
-            .matcha-table-container-shadow {
-                table.matcha-table-content {
-                    thead th:nth-child(1),
-                    thead th:nth-child(2),
-                    tbody tr td:nth-child(1),
-                    tbody tr td:nth-child(2) {
-                        position: sticky;
-                        z-index: 5;
-                        background: var(--matcha-color-surface, #{getSurface($theme)});
-                    }
-
-                    thead th:nth-child(1),
-                    tbody tr td:nth-child(1) {
-                        left: 0;
-                        z-index: 15;
-                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
-                    }
-
-                    thead th:nth-child(2),
-                    tbody tr td:nth-child(2) {
-                        left: 200px; // Ajustar conforme largura da primeira coluna
-                        z-index: 14;
-                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
-                    }
-                }
-            }
-        }
-
-        &.matcha-table-sticky-start-3 {
-            .matcha-table-container-shadow {
-                table.matcha-table-content {
-                    thead th:nth-child(1),
-                    thead th:nth-child(2),
-                    thead th:nth-child(3),
-                    tbody tr td:nth-child(1),
-                    tbody tr td:nth-child(2),
-                    tbody tr td:nth-child(3) {
-                        position: sticky;
-                        z-index: 5;
-                        background: var(--matcha-color-surface, #{getSurface($theme)});
-                    }
-
-                    thead th:nth-child(1),
-                    tbody tr td:nth-child(1) {
-                        left: 0;
-                        z-index: 17;
-                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
-                    }
-
-                    thead th:nth-child(2),
-                    tbody tr td:nth-child(2) {
-                        left: 200px;
-                        z-index: 16;
-                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
-                    }
-
-                    thead th:nth-child(3),
-                    tbody tr td:nth-child(3) {
-                        left: 400px;
-                        z-index: 15;
-                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
-                    }
-                }
-            }
-        }
-    }
-
-    .matcha-table-sticky-end {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                thead th:last-child,
-                tbody tr td:last-child {
-                    position: sticky;
-                    right: 0;
-                    z-index: 5;
-                    background: var(--matcha-color-surface, #{getSurface($theme)});
-                }
-
-                thead th:last-child {
-                    z-index: 15;
-                    box-shadow: -2px 0 4px var(--table-shadow-alpha);
-                }
-
-                tbody tr td:last-child {
-                    box-shadow: -2px 0 2px var(--table-shadow-alpha);
-                }
-            }
-        }
-
-        // Para múltiplas colunas fixas no final
-        &.matcha-table-sticky-end-2 {
-            .matcha-table-container-shadow {
-                table.matcha-table-content {
-                    thead th:nth-last-child(1),
-                    thead th:nth-last-child(2),
-                    tbody tr td:nth-last-child(1),
-                    tbody tr td:nth-last-child(2) {
-                        position: sticky;
-                        z-index: 5;
-                        background: var(--matcha-color-surface, #{getSurface($theme)});
-                    }
-
-                    thead th:nth-last-child(1),
-                    tbody tr td:nth-last-child(1) {
-                        right: 0;
-                        z-index: 15;
-                        box-shadow: -2px 0 4px var(--table-shadow-alpha);
-                    }
-
-                    thead th:nth-last-child(2),
-                    tbody tr td:nth-last-child(2) {
-                        right: 200px; // Ajustar conforme largura da última coluna
-                        z-index: 14;
-                        box-shadow: -2px 0 4px var(--table-shadow-alpha);
-                    }
-                }
-            }
-        }
-    }
-
-    // ── Alinhamento de colunas (espelhado com Figma Alinhamento variant) ──
-    .matcha-table {
-        .matcha-table-container-shadow {
-            table.matcha-table-content {
-                th.text-center,
-                td.text-center {
-                    text-align: center;
-                }
-
-                th.text-right,
-                td.text-right {
-                    text-align: right;
-                }
-            }
-        }
-    }
-}
+@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
+//   [matcha-table-clickable] em <tr> — tabindex + Enter/Space + (rowClick)
+//
+// Helpers CSS-only:
+//   td.numeric  → tabular-nums
+//   td.truncate → ellipsis (text overflow)
+//   td[data-alinhamento] / td.text-{center,right} → alinhamento
+//   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) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // 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 {
+    // ── 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);
+
+    // ── Surface colors ────────────────────────────────────────────────────
+    --matcha-table-cell-bg:                  var(--matcha-color-surface-card);
+    --matcha-table-row-bg-selected:          var(--matcha-color-accent-alpha-12,
+                                              rgba(#{getAccent($theme)}, 0.12));
+    --matcha-table-row-bg-striped:           var(--matcha-color-surface-card-alt,
+                                              rgba(#{getForeground($theme)}, 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 `getForeground($theme)` ANTES do output. Sem isso, o valor sai
+    // literal no bundle (ex: `rgba(getForeground($theme), 0.12)`) e o browser
+    // descarta como invalid CSS (= chevron invisível, hover sem cor, etc).
+    --matcha-table-row-bg-hover:             rgba(#{getForeground($theme)}, 0.12);
+    --matcha-table-row-bg-hover-striped:     rgba(#{getForeground($theme)}, 0.18);
+    --matcha-table-header-bg-hover:          rgba(#{getForeground($theme)}, 0.10);
+
+    // ── 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(#{getForeground($theme)}, 0.45);
+    --matcha-table-sort-icon-color-active:   var(--matcha-color-accent, #{getAccent($theme)});
+    --matcha-table-sort-icon-size:           var(--matcha-space-250, 20px);
+
+    // ── Empty cell placeholder ────────────────────────────────────────────
+    --matcha-table-empty-cell-text:          var(--matcha-color-text-muted,
+                                              rgba(#{getForeground($theme)}, 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, #{getAccent($theme)});
+
+    // ── 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);
+
+    // ── 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, #{getAccent($theme)});
+
+    // ── 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%;
+
+    // ── 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 {
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+    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,
+      rgba(getForeground($theme), 0.7));
+
+    // ── 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, #{getForeground($theme)}));
+      // 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 — aceita data-attr canon DSV3 + utility classes legacy
+      &[data-alinhamento="center"], &.text-center { text-align: center; }
+      &[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, #{getForeground($theme)}));
+        }
+
+        // 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-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,
+        rgba(getForeground($theme), 0.7));
+      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-alinhamento="center"], &.text-center { text-align: center; }
+      &[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 {
+      &.col-checkbox { 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 — shrink-to-content (1% truque de table layout).
+      // Children inline horizontal right-aligned (canon Figma: edit/delete lado a
+      // lado, não stackados).
+      //
+      // 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.
+      //
+      // Padding-right ZERO no body — icon-button já tem click target padding
+      // interno; somar padding ao td empurraria os botões pra ESQUERDA do edge
+      // do header "Ações". Alinhamento perfeito: button box-right = cell-right.
+      // Actions / icon-buttons — shrink-to-content (1% truque de table layout).
+      // Children inline horizontal LEFT-aligned (header text "Ações" alinha
+      // naturalmente acima do primeiro ícone). Padding uniforme L/R com resto
+      // da table.
+      &.col-actions {
+        width: 1%;
+        white-space: nowrap;
+        text-align: left;
+
+        > .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 ([matcha-table-clickable] directive seta tabindex) ─
+    tbody tr.is-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 host classes (Angular bind quando striped/hover/etc) ─
+    // Striped usa :where() pra dropar specificity do :nth-child — hover vence.
+    &.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 {
+      --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 {
+      --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-striped);
+    }
+
+    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>).
+    &.matcha-table-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 {
+      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 ──────────────
+    // Shadow scroll-edge via color-mix() pra tokenizar — funciona em light
+    // E dark. Offsets/blur/cor todos via var.
+    @for $i from 1 through 4 {
+      &[data-sticky-start="#{$i}"] {
+        thead th:nth-child(-n+#{$i}),
+        tbody tr td:nth-child(-n+#{$i}) {
+          position: sticky;
+          z-index: 2;
+          background: var(--matcha-table-cell-bg);
+        }
+        // Última cell do grupo sticky-start projeta shadow scroll-edge.
+        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);
+        }
+      }
+
+      &[data-sticky-end="#{$i}"] {
+        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);
+        }
+        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);
+        }
+      }
+    }
+
+    &[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; }
+
+    // ── 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 ─────────────────────────
+    &.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;
+    }
+  }
+
+  @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) {
+    table.matcha-table tbody td,
+    table.matcha-table.matcha-table-loading tbody tr {
+      transition: none;
+      animation: none;
+    }
+  }
+}