@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-tabs.scss

@@ -1,469 +1,622 @@
-@use "sass:map";
-
-@mixin _colorize-inactive-type-basic($theme, $color-functions) {
-    &[inactivetype="basic"] {
-        @each $colorName, $colorFn 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, #{getSurface($theme)});
-                            color: call(#{$colorFn}, $theme);
-                            box-shadow: 0 0 0 0px inset;
-
-                            .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // 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, $colorFn 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: call(#{$colorFn}, $theme);
-                                background: transparent;
-                                box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
-
-                                .ripple {
-                                    background: call(#{$colorFn}Alpha, $theme); // 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, $colorFn in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active-item="true"]) {
-                            color: call(#{$colorFn}, $theme);
-                            background: call(#{$colorFn}Alpha, $theme);
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: call(#{$colorFn}ContrastAlpha, $theme); // 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, $colorFn in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group matcha-tab-item {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active-item="true"]) {
-
-                            background: transparent;
-                            color: call(#{$colorFn}, $theme);
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // 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) {
-    $color-functions: (
-        red: getRed,
-        pink: getPink,
-        purple: getPurple,
-        deep-purple: getDeepPurple,
-        indigo: getIndigo,
-        blue: getBlue,
-        light-blue: getLightBlue,
-        cyan: getCyan,
-        teal: getTeal,
-        green: getGreen,
-        light-green: getLightGreen,
-        lime: getLime,
-        yellow: getYellow,
-        amber: getAmber,
-        orange: getOrange,
-        deep-orange: getDeepOrange,
-        brown: getBrown,
-        grey: getGrey,
-        blue-grey: getBlueGrey,
-        primary: getPrimary,
-        accent: getAccent,
-        success: getSuccess,
-        warn: getWarn,
-        danger: getDanger,
-        info: getInfo,
-        disabled: getDisabled,
-    );
-
-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, #{getAccent($theme)});
-                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 — Aligned with Figma matcha/tab/item
-// Tipo: Underline (classic nav) | Card (icon card)
-// Estado: Default | Selecionado | Disabled
-// =============================================================================
-
-@mixin matcha-tabs-modern($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  // ── Underline Tab ──────────────────────────────────────────────────────
-  // Figma: bottom-border 4px, surface/card bg, accent when selected
-
-  .matcha-tab-underline {
-    display: flex;
-    align-items: stretch;
-    background: transparent; // herda fundo da página (funciona light + dark)
-    border-radius: var(--matcha-radius-md, 4px);
-    overflow: hidden;
-
-    // Subtle bottom divider on the container
-    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getDisabled($theme)});
-
-    .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;
-      background: none;
-      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-label, #{getBlueGrey($theme)});
-      white-space: nowrap;
-
-      // Bottom indicator (inactive: transparent, active: accent)
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: transparent;
-        transition: background var(--matcha-duration-instant, 80ms) linear;
-      }
-
-      // State layer
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: currentColor;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity var(--matcha-duration-instant, 80ms) linear;
-      }
-      &:hover:not(:disabled):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-      &:active:not(:disabled):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-      // ── Selected ──
-      &.active,
-      &[aria-selected="true"] {
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        font-weight: var(--matcha-weight-semibold, 600);
-        line-height: var(--matcha-leading-title-sm, 22px);
-
-        &::after {
-          background: var(--matcha-color-accent, #{getAccent($theme)});
-        }
-      }
-
-      // ── Disabled ──
-      &:disabled,
-      &[disabled] {
-        opacity: 0.5;
-        pointer-events: none; cursor: default;
-        pointer-events: none;
-      }
-
-      // ── Focus ──
-      &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      }
-    }
-
-    // Equal-width tabs (mobile/responsive)
-    &.matcha-tab-equal .matcha-tab-item {
-      flex: 1 0 0;
-    }
-  }
-
-  // ── Card Tab ───────────────────────────────────────────────────────────
-  // Figma: card with radius-md, 2px accent border when selected
-
-  .matcha-tab-card {
-    display: flex;
-    align-items: stretch;
-    gap: var(--matcha-space-100, 8px);
-    flex-wrap: wrap;
-
-    .matcha-tab-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--matcha-space-100, 8px);
-      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-      border: 2px solid transparent;
-      border-radius: var(--matcha-radius-md, 4px);
-      background: var(--matcha-color-surface, #{getSurface($theme)});
-      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-label, #{getBlueGrey($theme)});
-
-      // 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):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-      &:active:not(:disabled):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-      // ── Selected ──
-      &.active,
-      &[aria-selected="true"] {
-        border-color: var(--matcha-color-accent, #{getAccent($theme)});
-        color: var(--matcha-color-accent, #{getAccent($theme)});
-        font-weight: var(--matcha-weight-medium, 500);
-      }
-
-      // ── Disabled ──
-      &:disabled,
-      &[disabled] {
-        opacity: 0.5;
-        pointer-events: none; cursor: default;
-        pointer-events: none;
-      }
-
-      // ── Focus ──
-      &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      }
-
-      // ── Vertical layout ──
-      &.matcha-tab-vertical {
-        flex-direction: column;
-        text-align: center;
-      }
-    }
-  }
-
-  // ── Icon inside tab items ──
-  .matcha-tab-underline,
-  .matcha-tab-card {
-    .matcha-tab-item {
-      matcha-icon {
-        flex-shrink: 0;
-      }
-    }
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  .matcha-tab-underline .matcha-tab-item::before,
-  .matcha-tab-underline .matcha-tab-item::after,
-  .matcha-tab-card .matcha-tab-item::before {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+@mixin _colorize-inactive-type-basic($theme, $color-functions) {
+    &[inactivetype="basic"] {
+        @each $colorName, $colorFn 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: call(#{$colorFn}, $theme);
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: call(#{$colorFn}Alpha, $theme); // 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, $colorFn 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: call(#{$colorFn}, $theme);
+                                background: transparent;
+                                box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
+
+                                .ripple {
+                                    background: call(#{$colorFn}Alpha, $theme); // 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, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+                            color: call(#{$colorFn}, $theme);
+                            background: call(#{$colorFn}Alpha, $theme);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: call(#{$colorFn}ContrastAlpha, $theme); // 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, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+
+                            background: transparent;
+                            color: call(#{$colorFn}, $theme);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: call(#{$colorFn}Alpha, $theme); // 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) {
+    $color-functions: (
+        red: getRed,
+        pink: getPink,
+        purple: getPurple,
+        deep-purple: getDeepPurple,
+        indigo: getIndigo,
+        blue: getBlue,
+        light-blue: getLightBlue,
+        cyan: getCyan,
+        teal: getTeal,
+        green: getGreen,
+        light-green: getLightGreen,
+        lime: getLime,
+        yellow: getYellow,
+        amber: getAmber,
+        orange: getOrange,
+        deep-orange: getDeepOrange,
+        brown: getBrown,
+        grey: getGrey,
+        blue-grey: getBlueGrey,
+        primary: getPrimary,
+        accent: getAccent,
+        success: getSuccess,
+        warn: getWarn,
+        danger: getDanger,
+        info: getInfo,
+        disabled: getDisabled,
+    );
+
+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;
+  }
+}