@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-tabs.scss

@@ -1,600 +1,600 @@
-@use "matcha-buttons" as *;
-@use "sass:map";
-
-@mixin _colorize-inactive-type-basic($theme, $color-functions) {
-    &[inactivetype="basic"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active-item="true"]) {
-                            background: var(--matcha-color-surface);
-                            color: var(--matcha-color-#{$colorName});
-                            box-shadow: 0 0 0 0px inset;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &[disabled],
-        &[disabled]:not([disabled="false"]),
-        &[disabled="true"] {
-            &:not([active-item="true"]) {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        @include disabled-basic-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-outline($theme, $color-functions) {
-    &[inactivetype="outline"] {
-
-        //disabled false
-        &:not([disabled="true"]) {
-            @each $colorName in $color-functions {
-                &[inactivecolor="#{'' + $colorName}"] {
-                    .button-group matcha-tab-item {
-
-                        button[matcha-button],
-                        a[matcha-button] {
-
-                            //botão não ativo
-                            &:not([active-item="true"]) {
-                                color: var(--matcha-color-#{$colorName});
-                                background: transparent;
-                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
-
-                                .ripple {
-                                    background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        //disabled true
-        &[disabled],
-        &[disabled]:not([disabled="false"]),
-        &[disabled="true"] {
-            >.button-group matcha-tab-item {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active-item="true"]) {
-                        @include disabled-outline-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-alpha($theme, $color-functions) {
-    &[inactivetype="alpha"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active-item="true"]) {
-                            color: var(--matcha-color-#{$colorName});
-                            background: var(--matcha-color-#{$colorName}-alpha);
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &[disabled],
-        &[disabled]:not([disabled="false"]),
-        &[disabled="true"] {
-            .button-group matcha-tab-item {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active-item="true"]) {
-                        @include disabled-alpha-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-link($theme, $color-functions) {
-
-    &[inactivetype="link"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active-item="true"]) {
-
-                            background: transparent;
-                            color: var(--matcha-color-#{$colorName});
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
-                            }
-
-                        }
-                    }
-                }
-            }
-        }
-
-        &[disabled],
-        &[disabled]:not([disabled="false"]),
-        &[disabled="true"] {
-            .button-group matcha-tab-item {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active-item="true"]) {
-                        @include disabled-link-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-
-
-@mixin matcha-tabs($theme) {
-    // Nomes de cor (semânticas + paleta). As cores vêm de var(--matcha-color-*)
-    // emitidas no tema — sem getRed/$theme compile-time. Value-preserving.
-    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
-        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
-        "primary", "accent", "success", "warn", "danger", "info", "disabled";
-
-matcha-tabs {
-    display: flex;
-    @include _colorize-inactive-type-basic($theme, $color-functions);
-    @include _colorize-inactive-type-outline($theme, $color-functions);
-    @include _colorize-inactive-type-alpha($theme, $color-functions);
-    @include _colorize-inactive-type-link($theme, $color-functions);
-
-    .button-group matcha-tab-item {
-        button[matcha-button],
-        a[matcha-button] {
-            &:focus-visible:not([disabled]):not([disabled="true"]) {
-                outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-                outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-            }
-        }
-    }
-
-    &[disabled],
-    &[disabled]:not([disabled="false"]),
-    &[disabled="true"] {
-        .button-group matcha-tab-item {
-
-            button[matcha-button],
-            a[matcha-button] {
-                &[active-item="true"] {
-
-                    &[outline],
-                    &[outline]:not([outline="false"]),
-                    &[outline="true"] {
-                        @include disabled-outline-button($theme);
-                    }
-
-                    &[basic],
-                    &[basic]:not([basic="false"]),
-                    &[basic="true"] {
-                        @include disabled-basic-button($theme);
-                    }
-
-                    &[alpha],
-                    &[alpha]:not([alpha="false"]),
-                    &[alpha="true"] {
-                        @include disabled-alpha-button($theme);
-                    }
-
-                    &[link],
-                    &[link]:not([link="false"]),
-                    &[link="true"] {
-                        @include disabled-link-button($theme);
-                    }
-                }
-            }
-        }
-
-    }
-}
-}
-
-.button-group {
-    &.gap-0 {
-        gap: 0 !important;
-
-        // Ajuste border-radius quando gap = 0
-        matcha-tab-item:first-child button[matcha-button] {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        matcha-tab-item:last-child button[matcha-button] {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        matcha-tab-item:not(:first-child):not(:last-child) button[matcha-button] {
-            border-radius: 0;
-        }
-    }
-}
-
-// =============================================================================
-// MODERNIZED TAB STYLES — 1:1 Figma DSV3 matcha/tabs/tab (15768:76)
-//   Tipo: Underline (só horizontal) · Card (horizontal + vertical)
-//   Estado: Default · Selecionado · Disabled
-//   Ícone: opcional
-// =============================================================================
-
-@mixin matcha-tabs-modern($theme) {
-
-  // ── Component-level tokens (overridable pelo consumer via CSS vars) ───
-  matcha-tabs {
-    --matcha-tab-min-width-underline: var(--matcha-space-1500, 120px);
-    --matcha-tab-min-width-card-horizontal: 107px;
-    --matcha-tab-min-width-card-vertical: var(--matcha-space-1100, 88px);
-    --matcha-tab-close-size: var(--matcha-icon-size-xs, 14px);
-    --matcha-tab-state-opacity-hover: var(--matcha-state-hover, 0.08);
-    --matcha-tab-state-opacity-active: var(--matcha-state-active, 0.12);
-    --matcha-tab-state-opacity-disabled: var(--matcha-state-opacity-disabled, 0.5);
-    --matcha-tab-focus-halo: 4px;
-    --matcha-tab-focus-halo-alpha: 0.16;
-
-    // Layout do host — canon WAI-ARIA tablist:
-    //   horizontal → nav em cima, content embaixo (column)
-    //   vertical   → nav à esquerda, content à direita (row, sidenav-like)
-    // Override do legacy `matcha-tabs { display: flex }` que assumia row sempre
-    // (legado button-group). Aria-orientation vem do host binding do component.
-    flex-direction: column;
-    // 24px (space-300) é o vertical rhythm canon entre blocos no painel —
-    // mesmo gap entre seções dentro do content. Evita "tab↔content maior que
-    // section↔section" que rompe a hierarquia visual.
-    gap: var(--matcha-space-300, 24px);
-
-    &[aria-orientation="vertical"] {
-      flex-direction: row;
-      gap: var(--matcha-space-300, 24px);
-    }
-  }
-
-  // ── Underline Tab (1:1 Figma DSV3 — border per item) ──────────────────
-  // Cada item tem bg surface-card + border-bottom 4px (surface-border default,
-  // accent selected). Container não tem border próprio (canon Figma).
-  // Sliding indicator absoluto desliza entre tabs (Material 3 style).
-  // Sempre horizontal (vertical não é canon).
-  .matcha-tab-underline {
-    display: flex;
-    align-items: stretch;
-    background: transparent;
-    position: relative;
-
-    // Mobile-friendly horizontal scroll
-    &.matcha-tab-scrollable {
-      overflow-x: auto;
-      scrollbar-width: thin;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    // ── Sliding indicator (Material 3 magic underline) ──
-    // Cantos retos + 2px de altura (canon Figma — sem rounded).
-    .matcha-tab-indicator {
-      position: absolute;
-      bottom: 0;
-      left: var(--matcha-tab-indicator-left, 0);
-      width: var(--matcha-tab-indicator-width, 0);
-      height: var(--matcha-border-thin, 2px);
-      background: var(--matcha-color-accent);
-      border-radius: 0;
-      transition:
-        left  var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
-        width var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-      pointer-events: none;
-      z-index: 1;
-    }
-
-    .matcha-tab-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--matcha-space-100, 8px);
-      padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
-      border: none;
-      // Border bottom 2px — per item (track surface-border, slider sobrepõe accent)
-      border-bottom: var(--matcha-border-thin, 2px) solid
-        var(--matcha-color-surface-border);
-      background: var(--matcha-color-surface-card);
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-      font-family: var(--matcha-font-family);
-      font-size: var(--matcha-text-body-lg, 16px);
-      font-weight: var(--matcha-weight-regular, 400);
-      line-height: var(--matcha-leading-body-lg, 24px);
-      color: var(--matcha-color-text-secondary,
-        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
-      white-space: nowrap;
-      flex-shrink: 0;
-      min-width: var(--matcha-tab-min-width-underline);
-      transition:
-        color               var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
-        border-bottom-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
-        font-weight         var(--matcha-duration-fast, 200ms) ease;
-
-      // State layer (hover + active visual feedback)
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: currentColor;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity var(--matcha-duration-instant, 80ms) linear;
-      }
-      &:hover:not(:disabled)::before  { opacity: var(--matcha-tab-state-opacity-hover); }
-      &:active:not(:disabled)::before { opacity: var(--matcha-tab-state-opacity-active); }
-
-      // ── Selecionado (border-bottom muda pra accent ALÉM do sliding indicator
-      // — cobre 100% mesmo com subpixel mismatch do indicator) ──
-      &.active,
-      &[aria-selected="true"] {
-        color: var(--matcha-color-accent);
-        font-weight: var(--matcha-weight-semibold, 600);
-        line-height: var(--matcha-leading-title-sm, 22px);
-        border-bottom-color: var(--matcha-color-accent);
-      }
-
-      // ── Disabled ──
-      &:disabled,
-      &[disabled] {
-        opacity: var(--matcha-tab-state-opacity-disabled);
-        pointer-events: none;
-        cursor: default;
-      }
-
-      // ── Focus ring polido (offset 4px + halo 16% alpha) ──
-      &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid
-          var(--matcha-color-accent);
-        outline-offset: var(--matcha-state-focus-ring-offset, 4px);
-        border-radius: var(--matcha-radius-sm, 4px);
-        box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
-          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
-      }
-    }
-  }
-
-  // ── Card Tab (canon Figma) ────────────────────────────────────────────
-  // Card 2px border accent quando selected · texto text-primary (NÃO accent).
-  // Suporta horizontal (default) e vertical (icon stacked).
-  .matcha-tab-card {
-    display: flex;
-    // Tamanho natural por item — stretch vertical antes esticava cards quando
-    // pai tinha altura expandida (bug reportado em pages com page-content flex-fill).
-    align-items: flex-start;
-    gap: var(--matcha-space-100, 8px);
-    flex-wrap: wrap;
-
-    // Equal-width layout — cada tab ocupa fatia igual da row (paginador-like).
-    // Habilitado via prop `equalWidth` no consumer. Icon stacked acima do label
-    // (look canon de paginator), independente de orientation do host.
-    &.matcha-tab-equal-width {
-      flex-wrap: nowrap;
-
-      .matcha-tab-item {
-        flex: 1 1 0;
-        min-width: 0;
-        flex-direction: column;
-        text-align: center;
-        padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-      }
-    }
-
-    // Vertical layout — empilha icon + label
-    &.matcha-tab-vertical .matcha-tab-item {
-      flex-direction: column;
-      min-width: var(--matcha-tab-min-width-card-vertical);
-      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-      text-align: center;
-    }
-
-    .matcha-tab-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--matcha-space-100, 8px);
-      padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-      border: var(--matcha-border-thin, 1px) solid transparent;
-      // radius-lg (8px) escala 1:2 com cards (xl=16px) — hierarquia visual
-      // canon: atom interativo / container. Antes era md (4px), o que dava
-      // disparidade 1:4 e quebrava a leitura conjunta tabs + cards.
-      border-radius: var(--matcha-radius-lg, 8px);
-      background: var(--matcha-color-surface-card);
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-      font-family: var(--matcha-font-family);
-      font-size: var(--matcha-text-body-md, 14px);
-      font-weight: var(--matcha-weight-regular, 400);
-      line-height: var(--matcha-leading-body-md, 20px);
-      color: var(--matcha-color-text-secondary,
-        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
-      flex-shrink: 0;
-      min-width: var(--matcha-tab-min-width-card-horizontal);
-      transition:
-        border-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
-        color        var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
-        transform    var(--matcha-duration-instant, 80ms) ease;
-
-      // State layer
-      &::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-tab-state-opacity-hover); }
-        transform: translateY(calc(-1 * var(--matcha-border-hairline, 1px)));
-      }
-      &:active:not(:disabled)::before { opacity: var(--matcha-tab-state-opacity-active); }
-
-      // ── Selecionado (Figma: border accent · texto text-primary NÃO accent) ──
-      &.active,
-      &[aria-selected="true"] {
-        border-color: var(--matcha-color-accent);
-        color: var(--matcha-color-fg);
-        font-weight: var(--matcha-weight-medium, 500);
-      }
-
-      // ── Disabled ──
-      &:disabled,
-      &[disabled] {
-        opacity: var(--matcha-tab-state-opacity-disabled);
-        pointer-events: none;
-        cursor: default;
-      }
-
-      // ── Focus ring polido ──
-      &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid
-          var(--matcha-color-accent);
-        outline-offset: var(--matcha-border-thin, 2px);
-        box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
-          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
-      }
-    }
-  }
-
-  // ── Icon inside tab items ──
-  .matcha-tab-underline,
-  .matcha-tab-card {
-    .matcha-tab-item matcha-icon { flex-shrink: 0; }
-  }
-
-  // ── Badge (notificações, contagens) ───────────────────────────────────
-  .matcha-tab-item__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: var(--matcha-space-250, 20px);
-    height: var(--matcha-space-250, 20px);
-    padding: 0 var(--matcha-space-075, 6px);
-    background: var(--matcha-color-accent);
-    color: var(--matcha-color-accent-text-on,
-      var(--matcha-color-accent-contrast));
-    border-radius: var(--matcha-radius-pill, 9999px);
-    font-size: var(--matcha-text-body-xs, 11px);
-    font-weight: var(--matcha-weight-semibold, 600);
-    line-height: 1;
-    flex-shrink: 0;
-  }
-
-  // ── Close button (closable tabs) ──────────────────────────────────────
-  .matcha-tab-item__close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--matcha-space-300, 24px);
-    height: var(--matcha-space-300, 24px);
-    border-radius: 50%;
-    color: var(--matcha-color-text-secondary,
-      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
-    transition:
-      background-color var(--matcha-duration-instant, 80ms) ease,
-      color            var(--matcha-duration-instant, 80ms) ease;
-    flex-shrink: 0;
-    cursor: pointer;
-    margin-left: var(--matcha-space-050, 4px);
-
-    &:hover {
-      background: var(--matcha-color-surface-hover,
-        color-mix(in srgb, var(--matcha-color-fg) 8%, transparent));
-      color: var(--matcha-color-fg);
-    }
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid
-        var(--matcha-color-accent);
-      outline-offset: var(--matcha-border-thin, 2px);
-    }
-
-    svg {
-      display: block;
-      width: var(--matcha-tab-close-size, 14px);
-      height: var(--matcha-tab-close-size, 14px);
-    }
-  }
-}
-
-// ── Mobile: reset min-width pra evitar overflow + auto-scroll ───────────
-@media (max-width: 639px) {
-  .matcha-tab-underline .matcha-tab-item,
-  .matcha-tab-card .matcha-tab-item {
-    min-width: auto;
-  }
-}
-
-// ── Mobile: Underline auto-scrollable em viewports estreitos ────────────
-@media (max-width: 639px) {
-  .matcha-tab-underline:not(.matcha-tab-scrollable) {
-    overflow-x: auto;
-    scrollbar-width: thin;
-  }
-}
-
-// ── Reduced motion (WCAG 2.2.2) ─────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  .matcha-tab-underline .matcha-tab-item,
-  .matcha-tab-underline .matcha-tab-item::before,
-  .matcha-tab-card .matcha-tab-item,
-  .matcha-tab-card .matcha-tab-item::before,
-  .matcha-tab-indicator,
-  .matcha-tab-item__close {
-    transition: none;
-  }
-  .matcha-tab-card .matcha-tab-item:hover {
-    transform: none;
-  }
-}
+@use "matcha-buttons" as *;
+@use "sass:map";
+
+@mixin _colorize-inactive-type-basic($theme, $color-functions) {
+    &[inactivetype="basic"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+                            background: var(--matcha-color-surface);
+                            color: var(--matcha-color-#{$colorName});
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            &:not([active-item="true"]) {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        @include disabled-basic-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-outline($theme, $color-functions) {
+    &[inactivetype="outline"] {
+
+        //disabled false
+        &:not([disabled="true"]) {
+            @each $colorName in $color-functions {
+                &[inactivecolor="#{'' + $colorName}"] {
+                    .button-group matcha-tab-item {
+
+                        button[matcha-button],
+                        a[matcha-button] {
+
+                            //botão não ativo
+                            &:not([active-item="true"]) {
+                                color: var(--matcha-color-#{$colorName});
+                                background: transparent;
+                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
+
+                                .ripple {
+                                    background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        //disabled true
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            >.button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include disabled-outline-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-alpha($theme, $color-functions) {
+    &[inactivetype="alpha"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+                            color: var(--matcha-color-#{$colorName});
+                            background: var(--matcha-color-#{$colorName}-alpha);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include disabled-alpha-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-link($theme, $color-functions) {
+
+    &[inactivetype="link"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+
+                            background: transparent;
+                            color: var(--matcha-color-#{$colorName});
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
+                            }
+
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+@mixin matcha-tabs($theme) {
+    // Nomes de cor (semânticas + paleta). As cores vêm de var(--matcha-color-*)
+    // emitidas no tema — sem getRed/$theme compile-time. Value-preserving.
+    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
+        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
+        "primary", "accent", "success", "warn", "danger", "info", "disabled";
+
+matcha-tabs {
+    display: flex;
+    @include _colorize-inactive-type-basic($theme, $color-functions);
+    @include _colorize-inactive-type-outline($theme, $color-functions);
+    @include _colorize-inactive-type-alpha($theme, $color-functions);
+    @include _colorize-inactive-type-link($theme, $color-functions);
+
+    .button-group matcha-tab-item {
+        button[matcha-button],
+        a[matcha-button] {
+            &:focus-visible:not([disabled]):not([disabled="true"]) {
+                outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+                outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+            }
+        }
+    }
+
+    &[disabled],
+    &[disabled]:not([disabled="false"]),
+    &[disabled="true"] {
+        .button-group matcha-tab-item {
+
+            button[matcha-button],
+            a[matcha-button] {
+                &[active-item="true"] {
+
+                    &[outline],
+                    &[outline]:not([outline="false"]),
+                    &[outline="true"] {
+                        @include disabled-outline-button($theme);
+                    }
+
+                    &[basic],
+                    &[basic]:not([basic="false"]),
+                    &[basic="true"] {
+                        @include disabled-basic-button($theme);
+                    }
+
+                    &[alpha],
+                    &[alpha]:not([alpha="false"]),
+                    &[alpha="true"] {
+                        @include disabled-alpha-button($theme);
+                    }
+
+                    &[link],
+                    &[link]:not([link="false"]),
+                    &[link="true"] {
+                        @include disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+
+    }
+}
+}
+
+.button-group {
+    &.gap-0 {
+        gap: 0 !important;
+
+        // Ajuste border-radius quando gap = 0
+        matcha-tab-item:first-child button[matcha-button] {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        matcha-tab-item:last-child button[matcha-button] {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        matcha-tab-item:not(:first-child):not(:last-child) button[matcha-button] {
+            border-radius: 0;
+        }
+    }
+}
+
+// =============================================================================
+// MODERNIZED TAB STYLES — 1:1 Figma DSV3 matcha/tabs/tab (15768:76)
+//   Tipo: Underline (só horizontal) · Card (horizontal + vertical)
+//   Estado: Default · Selecionado · Disabled
+//   Ícone: opcional
+// =============================================================================
+
+@mixin matcha-tabs-modern($theme) {
+
+  // ── Component-level tokens (overridable pelo consumer via CSS vars) ───
+  matcha-tabs {
+    --matcha-tab-min-width-underline: var(--matcha-space-1500, 120px);
+    --matcha-tab-min-width-card-horizontal: 107px;
+    --matcha-tab-min-width-card-vertical: var(--matcha-space-1100, 88px);
+    --matcha-tab-close-size: var(--matcha-icon-size-xs, 14px);
+    --matcha-tab-state-opacity-hover: var(--matcha-state-hover, 0.08);
+    --matcha-tab-state-opacity-active: var(--matcha-state-active, 0.12);
+    --matcha-tab-state-opacity-disabled: var(--matcha-state-opacity-disabled, 0.5);
+    --matcha-tab-focus-halo: 4px;
+    --matcha-tab-focus-halo-alpha: 0.16;
+
+    // Layout do host — canon WAI-ARIA tablist:
+    //   horizontal → nav em cima, content embaixo (column)
+    //   vertical   → nav à esquerda, content à direita (row, sidenav-like)
+    // Override do legacy `matcha-tabs { display: flex }` que assumia row sempre
+    // (legado button-group). Aria-orientation vem do host binding do component.
+    flex-direction: column;
+    // 24px (space-300) é o vertical rhythm canon entre blocos no painel —
+    // mesmo gap entre seções dentro do content. Evita "tab↔content maior que
+    // section↔section" que rompe a hierarquia visual.
+    gap: var(--matcha-space-300, 24px);
+
+    &[aria-orientation="vertical"] {
+      flex-direction: row;
+      gap: var(--matcha-space-300, 24px);
+    }
+  }
+
+  // ── Underline Tab (1:1 Figma DSV3 — border per item) ──────────────────
+  // Cada item tem bg surface-card + border-bottom 4px (surface-border default,
+  // accent selected). Container não tem border próprio (canon Figma).
+  // Sliding indicator absoluto desliza entre tabs (Material 3 style).
+  // Sempre horizontal (vertical não é canon).
+  .matcha-tab-underline {
+    display: flex;
+    align-items: stretch;
+    background: transparent;
+    position: relative;
+
+    // Mobile-friendly horizontal scroll
+    &.matcha-tab-scrollable {
+      overflow-x: auto;
+      scrollbar-width: thin;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    // ── Sliding indicator (Material 3 magic underline) ──
+    // Cantos retos + 2px de altura (canon Figma — sem rounded).
+    .matcha-tab-indicator {
+      position: absolute;
+      bottom: 0;
+      left: var(--matcha-tab-indicator-left, 0);
+      width: var(--matcha-tab-indicator-width, 0);
+      height: var(--matcha-border-thin, 2px);
+      background: var(--matcha-color-accent);
+      border-radius: 0;
+      transition:
+        left  var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+        width var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .matcha-tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--matcha-space-100, 8px);
+      padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
+      border: none;
+      // Border bottom 2px — per item (track surface-border, slider sobrepõe accent)
+      border-bottom: var(--matcha-border-thin, 2px) solid
+        var(--matcha-color-surface-border);
+      background: var(--matcha-color-surface-card);
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-lg, 16px);
+      font-weight: var(--matcha-weight-regular, 400);
+      line-height: var(--matcha-leading-body-lg, 24px);
+      color: var(--matcha-color-text-secondary,
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
+      white-space: nowrap;
+      flex-shrink: 0;
+      min-width: var(--matcha-tab-min-width-underline);
+      transition:
+        color               var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-bottom-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+        font-weight         var(--matcha-duration-fast, 200ms) ease;
+
+      // State layer (hover + active visual feedback)
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: currentColor;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+      }
+      &:hover:not(:disabled)::before  { opacity: var(--matcha-tab-state-opacity-hover); }
+      &:active:not(:disabled)::before { opacity: var(--matcha-tab-state-opacity-active); }
+
+      // ── Selecionado (border-bottom muda pra accent ALÉM do sliding indicator
+      // — cobre 100% mesmo com subpixel mismatch do indicator) ──
+      &.active,
+      &[aria-selected="true"] {
+        color: var(--matcha-color-accent);
+        font-weight: var(--matcha-weight-semibold, 600);
+        line-height: var(--matcha-leading-title-sm, 22px);
+        border-bottom-color: var(--matcha-color-accent);
+      }
+
+      // ── Disabled ──
+      &:disabled,
+      &[disabled] {
+        opacity: var(--matcha-tab-state-opacity-disabled);
+        pointer-events: none;
+        cursor: default;
+      }
+
+      // ── Focus ring polido (offset 4px + halo 16% alpha) ──
+      &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid
+          var(--matcha-color-accent);
+        outline-offset: var(--matcha-state-focus-ring-offset, 4px);
+        border-radius: var(--matcha-radius-sm, 4px);
+        box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
+          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
+      }
+    }
+  }
+
+  // ── Card Tab (canon Figma) ────────────────────────────────────────────
+  // Card 2px border accent quando selected · texto text-primary (NÃO accent).
+  // Suporta horizontal (default) e vertical (icon stacked).
+  .matcha-tab-card {
+    display: flex;
+    // Tamanho natural por item — stretch vertical antes esticava cards quando
+    // pai tinha altura expandida (bug reportado em pages com page-content flex-fill).
+    align-items: flex-start;
+    gap: var(--matcha-space-100, 8px);
+    flex-wrap: wrap;
+
+    // Equal-width layout — cada tab ocupa fatia igual da row (paginador-like).
+    // Habilitado via prop `equalWidth` no consumer. Icon stacked acima do label
+    // (look canon de paginator), independente de orientation do host.
+    &.matcha-tab-equal-width {
+      flex-wrap: nowrap;
+
+      .matcha-tab-item {
+        flex: 1 1 0;
+        min-width: 0;
+        flex-direction: column;
+        text-align: center;
+        padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+      }
+    }
+
+    // Vertical layout — empilha icon + label
+    &.matcha-tab-vertical .matcha-tab-item {
+      flex-direction: column;
+      min-width: var(--matcha-tab-min-width-card-vertical);
+      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+      text-align: center;
+    }
+
+    .matcha-tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--matcha-space-100, 8px);
+      padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+      border: var(--matcha-border-thin, 1px) solid transparent;
+      // radius-lg (8px) escala 1:2 com cards (xl=16px) — hierarquia visual
+      // canon: atom interativo / container. Antes era md (4px), o que dava
+      // disparidade 1:4 e quebrava a leitura conjunta tabs + cards.
+      border-radius: var(--matcha-radius-lg, 8px);
+      background: var(--matcha-color-surface-card);
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-md, 14px);
+      font-weight: var(--matcha-weight-regular, 400);
+      line-height: var(--matcha-leading-body-md, 20px);
+      color: var(--matcha-color-text-secondary,
+        color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
+      flex-shrink: 0;
+      min-width: var(--matcha-tab-min-width-card-horizontal);
+      transition:
+        border-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+        color        var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+        transform    var(--matcha-duration-instant, 80ms) ease;
+
+      // State layer
+      &::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-tab-state-opacity-hover); }
+        transform: translateY(calc(-1 * var(--matcha-border-hairline, 1px)));
+      }
+      &:active:not(:disabled)::before { opacity: var(--matcha-tab-state-opacity-active); }
+
+      // ── Selecionado (Figma: border accent · texto text-primary NÃO accent) ──
+      &.active,
+      &[aria-selected="true"] {
+        border-color: var(--matcha-color-accent);
+        color: var(--matcha-color-fg);
+        font-weight: var(--matcha-weight-medium, 500);
+      }
+
+      // ── Disabled ──
+      &:disabled,
+      &[disabled] {
+        opacity: var(--matcha-tab-state-opacity-disabled);
+        pointer-events: none;
+        cursor: default;
+      }
+
+      // ── Focus ring polido ──
+      &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid
+          var(--matcha-color-accent);
+        outline-offset: var(--matcha-border-thin, 2px);
+        box-shadow: 0 0 0 var(--matcha-tab-focus-halo)
+          color-mix(in srgb, var(--matcha-color-accent) calc(var(--matcha-tab-focus-halo-alpha) * 100%), transparent);
+      }
+    }
+  }
+
+  // ── Icon inside tab items ──
+  .matcha-tab-underline,
+  .matcha-tab-card {
+    .matcha-tab-item matcha-icon { flex-shrink: 0; }
+  }
+
+  // ── Badge (notificações, contagens) ───────────────────────────────────
+  .matcha-tab-item__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--matcha-space-250, 20px);
+    height: var(--matcha-space-250, 20px);
+    padding: 0 var(--matcha-space-075, 6px);
+    background: var(--matcha-color-accent);
+    color: var(--matcha-color-accent-text-on,
+      var(--matcha-color-accent-contrast));
+    border-radius: var(--matcha-radius-pill, 9999px);
+    font-size: var(--matcha-text-body-xs, 11px);
+    font-weight: var(--matcha-weight-semibold, 600);
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  // ── Close button (closable tabs) ──────────────────────────────────────
+  .matcha-tab-item__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--matcha-space-300, 24px);
+    height: var(--matcha-space-300, 24px);
+    border-radius: 50%;
+    color: var(--matcha-color-text-secondary,
+      color-mix(in srgb, var(--matcha-color-fg) 70%, transparent));
+    transition:
+      background-color var(--matcha-duration-instant, 80ms) ease,
+      color            var(--matcha-duration-instant, 80ms) ease;
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: var(--matcha-space-050, 4px);
+
+    &:hover {
+      background: var(--matcha-color-surface-hover,
+        color-mix(in srgb, var(--matcha-color-fg) 8%, transparent));
+      color: var(--matcha-color-fg);
+    }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid
+        var(--matcha-color-accent);
+      outline-offset: var(--matcha-border-thin, 2px);
+    }
+
+    svg {
+      display: block;
+      width: var(--matcha-tab-close-size, 14px);
+      height: var(--matcha-tab-close-size, 14px);
+    }
+  }
+}
+
+// ── Mobile: reset min-width pra evitar overflow + auto-scroll ───────────
+@media (max-width: 639px) {
+  .matcha-tab-underline .matcha-tab-item,
+  .matcha-tab-card .matcha-tab-item {
+    min-width: auto;
+  }
+}
+
+// ── Mobile: Underline auto-scrollable em viewports estreitos ────────────
+@media (max-width: 639px) {
+  .matcha-tab-underline:not(.matcha-tab-scrollable) {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+}
+
+// ── Reduced motion (WCAG 2.2.2) ─────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .matcha-tab-underline .matcha-tab-item,
+  .matcha-tab-underline .matcha-tab-item::before,
+  .matcha-tab-card .matcha-tab-item,
+  .matcha-tab-card .matcha-tab-item::before,
+  .matcha-tab-indicator,
+  .matcha-tab-item__close {
+    transition: none;
+  }
+  .matcha-tab-card .matcha-tab-item:hover {
+    transform: none;
+  }
+}