@inchurch/matcha-theme 22.38.2 → 22.38.4

package/components/matcha-button-toggle.scss

@@ -1,484 +1,484 @@
-@use "matcha-buttons" as *;
-@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
-
-    &:not([inactivetype]),
-    &[inactivetype="solid"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            background: var(--matcha-color-#{$colorName});
-                            color: var(--matcha-color-#{$colorName}-contrast);
-                            box-shadow: 0 0 0 0px inset;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &[disabled],
-        &[disabled]:not([disabled="false"]),
-        &[disabled="true"] {
-            .button-group {
-
-                button[matcha-button],
-                a[matcha-button] {
-                    &:not([active]) {
-                        @include disabled-solid-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
-    &[inactivetype="basic"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            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"] {
-            .button-group {
-
-                button[matcha-button],
-                a[matcha-button] {
-                    &:not([active]) {
-                        @include disabled-basic-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions) {
-    &[inactivetype="outline"] {
-
-        //disabled false
-        &:not([disabled="true"]) {
-
-            // Default do componente (inactiveColor='basic') — não é cor de paleta
-            // (--matcha-color-basic não existe): inativo neutro com tokens de
-            // superfície/texto. Sem este branch, o toggle "pelado" (sem
-            // inactiveColor) não casava com regra nenhuma e o inativo ficava
-            // filled da própria cor, indistinguível do ativo.
-            &[inactivecolor="basic"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            color: var(--matcha-color-text-secondary);
-                            background: transparent;
-                            box-shadow: 0 0 0 2px var(--matcha-color-surface-border) inset;
-
-                            .ripple {
-                                background: var(--matcha-color-fg-alpha); // ok: legacy ripple color token
-                            }
-                        }
-                    }
-                }
-            }
-
-            @each $colorName in $color-functions {
-                &[inactivecolor="#{'' + $colorName}"] {
-                    .button-group {
-
-                        button[matcha-button],
-                        a[matcha-button] {
-
-                            //botão não ativo
-                            &:not([active]) {
-                                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 {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active]) {
-                        @include disabled-outline-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
-    &[inactivetype="alpha"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            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 {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active]) {
-                        @include disabled-alpha-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
-
-    &[inactivetype="link"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-
-                            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 {
-
-                button[matcha-button],
-                a[matcha-button] {
-
-                    //botão não ativo
-                    &:not([active]) {
-                        @include disabled-link-button($theme);
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-
-
-@mixin matcha-button-toggle($theme) {
-    // Nomes de cor (semânticas + paleta). Cores vêm de var(--matcha-color-*) — sem getRed/$theme.
-    $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-button-toggle {
-    display: inline-flex;
-    @include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
-    @include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
-    @include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
-    @include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
-    @include _colorize-inactive-type-link-button-toggle-item($theme, $color-functions);
-
-    .button-group {
-        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);
-                // Inset (negativo): o .button-group é scroll container (overflow-x)
-                // e clipa qualquer outline desenhado FORA do botão — anel interno
-                // fica 100% visível mesmo com rolagem.
-                outline-offset: calc(-1 * (var(--matcha-state-focus-ring-width, 2px) + var(--matcha-state-focus-ring-offset, 2px)));
-            }
-        }
-    }
-
-    &[disabled],
-    &[disabled]:not([disabled="false"]),
-    &[disabled="true"] {
-        .button-group {
-
-            button[matcha-button],
-            a[matcha-button] {
-                &[active] {
-                    @include disabled-solid-button($theme);
-
-                    &[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);
-                    }
-                }
-            }
-        }
-
-    }
-}
-}
-
-// =============================================================================
-// A11y / modernity media queries
-// =============================================================================
-
-// Forced colors (Windows High Contrast) — borders/bg podem sumir,
-// SelectedItem/CanvasText são tokens system sempre visíveis.
-@media (forced-colors: active) {
-    matcha-button-toggle .button-group {
-        button[matcha-button],
-        a[matcha-button] {
-            border: 1px solid CanvasText;
-
-            &[active] {
-                background: SelectedItem !important;
-                color: SelectedItemText !important;
-                border-color: SelectedItem;
-            }
-
-            &:focus-visible {
-                outline: 2px solid CanvasText !important;
-                outline-offset: -4px; // inset — scroll container clipa outline externo
-            }
-        }
-    }
-}
-
-// Reduced motion — mata transitions de hover/active state.
-@media (prefers-reduced-motion: reduce) {
-    matcha-button-toggle .button-group {
-        button[matcha-button],
-        a[matcha-button] {
-            transition: none !important;
-            animation: none !important;
-        }
-    }
-}
-
-// Print — controles de UI somem em impressão.
-@media print {
-    matcha-button-toggle {
-        display: none !important;
-    }
-}
-
-// =============================================================================
-// Structural rules — aligned with Figma matcha/button-toggle:
-//   Gap=Segmented: buttons share borders (1px hairline between, 2px thin outside)
-//   Gap=Separated: buttons stand apart with gap=space/200 and full radius-lg each
-//   Width: hug content by default (Figma); [stretched] opta pelo fill 100%
-//          com botões dividindo a largura igualmente.
-// =============================================================================
-matcha-button-toggle {
-    display: inline-flex;
-    max-width: 100%;
-
-    // ── Label projetado (<matcha-label>) — empilha ACIMA do grupo (stacked,
-    // igual matcha-form-field). Gated por :has(> matcha-label): sem label, o
-    // host continua inline-flex row EXATAMENTE como antes (zero regressão).
-    &:has(> matcha-label) {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--matcha-space-075, 6px);   // mesmo gap label↔box do matcha-form-field
-    }
-
-    .button-group {
-        display: flex;
-        align-items: stretch;
-        max-width: 100%;
-
-        // ── Overflow: botão NUNCA é esmagado — no pior caso, rola ─────────
-        // flex-shrink default (1) comprimia o conteúdo dos botões quando o
-        // container aperta. Botões mantêm largura natural (flex: 0 0 auto +
-        // nowrap) e o grupo cria rolagem horizontal.
-        overflow-x: auto;
-        overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
-
-        // Scrollbar fino e temado (mesmo padrão do matcha-form-field) —
-        // só aparece quando há overflow real.
-        scrollbar-width: thin;                                          // Firefox
-        scrollbar-color: var(--matcha-color-text-placeholder) transparent;
-        &::-webkit-scrollbar              { height: 6px; }
-        &::-webkit-scrollbar-track        { background: transparent; }
-        &::-webkit-scrollbar-thumb {
-            background: var(--matcha-color-text-placeholder);
-            border-radius: 3px;
-        }
-        &::-webkit-scrollbar-thumb:hover  { background: var(--matcha-color-text-secondary); }
-
-        > button[matcha-button],
-        > a[matcha-button] {
-            flex: 0 0 auto;
-            white-space: nowrap;
-        }
-    }
-
-    // ── Stretched (opt-in via [stretched]) — fill 100% do container ───────
-    // Era o default até a 20.x; agora requer a propriedade.
-    &[stretched]:not([stretched="false"]) {
-        display: flex;
-        width: 100%;
-
-        .button-group {
-            width: 100%;
-
-            // Children flex-share — each button takes equal width across the row.
-            // O piso de encolhimento é o `min-width` do size do próprio botão
-            // (matcha-buttons.scss) — NÃO o min-content: o botão tem
-            // `overflow: hidden`, o que anula a automatic minimum size do
-            // flexbox. Quando nem esse piso cabe, o overflow-x do grupo rola.
-            > button[matcha-button],
-            > a[matcha-button] {
-                flex: 1 1 0;
-            }
-        }
-    }
-
-    .button-group {
-        // ── Separated (default: gap = space/200) ──────────────────────────
-        // Each button keeps its own full radius and border-thin (2px).
-        // gap already handled by flex gap via [gap] binding in TS.
-
-        // ── Segmented (gap = 0): box-shadows dos outline overlappam ───────
-        // matcha-button usa box-shadow inset (não border), então usamos
-        // margin-left negativo pra sobrepor a borda do vizinho.
-        &.gap-0 {
-            gap: 0 !important;
-
-            button[matcha-button],
-            a[matcha-button] {
-                position: relative;
-                border-radius: 0;
-
-                // First: radius só no lado esquerdo
-                &:first-child {
-                    border-top-left-radius: var(--matcha-radius-lg, 8px);
-                    border-bottom-left-radius: var(--matcha-radius-lg, 8px);
-                }
-
-                // Last: radius só no lado direito
-                &:last-child {
-                    border-top-right-radius: var(--matcha-radius-lg, 8px);
-                    border-bottom-right-radius: var(--matcha-radius-lg, 8px);
-                }
-
-                // Overlap de 2px com vizinho anterior pra fundir bordas
-                &:not(:first-child) {
-                    margin-left: calc(-1 * var(--matcha-border-thin, 2px));
-                }
-
-                // Active (filled) fica no topo pra borda não ser recortada
-                &[active]:not([active="false"]),
-                &:not([outline]):not([basic]):not([ghost])[color] {
-                    z-index: 1;
-                }
-            }
-        }
-    }
-}
-
-// =============================================================================
-// Readonly — seleção legível, clique inerte
-// =============================================================================
-// NENHUMA troca de cor aqui, e é isso que separa `readonly` de `disabled`: o bloco
-// `&[disabled]` acima aplica os mixins `disabled-*-button` nos botões inativos, apagando
-// justamente o contraste que diz qual opção está selecionada. Numa tela cujo propósito é LER
-// esse estado, apagá-lo é o oposto do que se quer.
-//
-// O que muda é só a promessa de interação: o ponteiro deixa de sugerir clique. A inércia em si
-// mora no `onSelect` do componente, não aqui — CSS não deve ser a trava.
-matcha-button-toggle[readonly] {
-
-    .button-group {
-
-        button[matcha-button],
-        a[matcha-button] {
-            cursor: default;
-        }
-    }
-}
+@use "matcha-buttons" as *;
+@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
+
+    &:not([inactivetype]),
+    &[inactivetype="solid"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            background: var(--matcha-color-#{$colorName});
+                            color: var(--matcha-color-#{$colorName}-contrast);
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group {
+
+                button[matcha-button],
+                a[matcha-button] {
+                    &:not([active]) {
+                        @include disabled-solid-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="basic"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            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"] {
+            .button-group {
+
+                button[matcha-button],
+                a[matcha-button] {
+                    &:not([active]) {
+                        @include disabled-basic-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="outline"] {
+
+        //disabled false
+        &:not([disabled="true"]) {
+
+            // Default do componente (inactiveColor='basic') — não é cor de paleta
+            // (--matcha-color-basic não existe): inativo neutro com tokens de
+            // superfície/texto. Sem este branch, o toggle "pelado" (sem
+            // inactiveColor) não casava com regra nenhuma e o inativo ficava
+            // filled da própria cor, indistinguível do ativo.
+            &[inactivecolor="basic"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            color: var(--matcha-color-text-secondary);
+                            background: transparent;
+                            box-shadow: 0 0 0 2px var(--matcha-color-surface-border) inset;
+
+                            .ripple {
+                                background: var(--matcha-color-fg-alpha); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+
+            @each $colorName in $color-functions {
+                &[inactivecolor="#{'' + $colorName}"] {
+                    .button-group {
+
+                        button[matcha-button],
+                        a[matcha-button] {
+
+                            //botão não ativo
+                            &:not([active]) {
+                                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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include disabled-outline-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="alpha"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include disabled-alpha-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
+
+    &[inactivetype="link"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+
+                            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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+@mixin matcha-button-toggle($theme) {
+    // Nomes de cor (semânticas + paleta). Cores vêm de var(--matcha-color-*) — sem getRed/$theme.
+    $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-button-toggle {
+    display: inline-flex;
+    @include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-link-button-toggle-item($theme, $color-functions);
+
+    .button-group {
+        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);
+                // Inset (negativo): o .button-group é scroll container (overflow-x)
+                // e clipa qualquer outline desenhado FORA do botão — anel interno
+                // fica 100% visível mesmo com rolagem.
+                outline-offset: calc(-1 * (var(--matcha-state-focus-ring-width, 2px) + var(--matcha-state-focus-ring-offset, 2px)));
+            }
+        }
+    }
+
+    &[disabled],
+    &[disabled]:not([disabled="false"]),
+    &[disabled="true"] {
+        .button-group {
+
+            button[matcha-button],
+            a[matcha-button] {
+                &[active] {
+                    @include disabled-solid-button($theme);
+
+                    &[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);
+                    }
+                }
+            }
+        }
+
+    }
+}
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
+
+// Forced colors (Windows High Contrast) — borders/bg podem sumir,
+// SelectedItem/CanvasText são tokens system sempre visíveis.
+@media (forced-colors: active) {
+    matcha-button-toggle .button-group {
+        button[matcha-button],
+        a[matcha-button] {
+            border: 1px solid CanvasText;
+
+            &[active] {
+                background: SelectedItem !important;
+                color: SelectedItemText !important;
+                border-color: SelectedItem;
+            }
+
+            &:focus-visible {
+                outline: 2px solid CanvasText !important;
+                outline-offset: -4px; // inset — scroll container clipa outline externo
+            }
+        }
+    }
+}
+
+// Reduced motion — mata transitions de hover/active state.
+@media (prefers-reduced-motion: reduce) {
+    matcha-button-toggle .button-group {
+        button[matcha-button],
+        a[matcha-button] {
+            transition: none !important;
+            animation: none !important;
+        }
+    }
+}
+
+// Print — controles de UI somem em impressão.
+@media print {
+    matcha-button-toggle {
+        display: none !important;
+    }
+}
+
+// =============================================================================
+// Structural rules — aligned with Figma matcha/button-toggle:
+//   Gap=Segmented: buttons share borders (1px hairline between, 2px thin outside)
+//   Gap=Separated: buttons stand apart with gap=space/200 and full radius-lg each
+//   Width: hug content by default (Figma); [stretched] opta pelo fill 100%
+//          com botões dividindo a largura igualmente.
+// =============================================================================
+matcha-button-toggle {
+    display: inline-flex;
+    max-width: 100%;
+
+    // ── Label projetado (<matcha-label>) — empilha ACIMA do grupo (stacked,
+    // igual matcha-form-field). Gated por :has(> matcha-label): sem label, o
+    // host continua inline-flex row EXATAMENTE como antes (zero regressão).
+    &:has(> matcha-label) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--matcha-space-075, 6px);   // mesmo gap label↔box do matcha-form-field
+    }
+
+    .button-group {
+        display: flex;
+        align-items: stretch;
+        max-width: 100%;
+
+        // ── Overflow: botão NUNCA é esmagado — no pior caso, rola ─────────
+        // flex-shrink default (1) comprimia o conteúdo dos botões quando o
+        // container aperta. Botões mantêm largura natural (flex: 0 0 auto +
+        // nowrap) e o grupo cria rolagem horizontal.
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+
+        // Scrollbar fino e temado (mesmo padrão do matcha-form-field) —
+        // só aparece quando há overflow real.
+        scrollbar-width: thin;                                          // Firefox
+        scrollbar-color: var(--matcha-color-text-placeholder) transparent;
+        &::-webkit-scrollbar              { height: 6px; }
+        &::-webkit-scrollbar-track        { background: transparent; }
+        &::-webkit-scrollbar-thumb {
+            background: var(--matcha-color-text-placeholder);
+            border-radius: 3px;
+        }
+        &::-webkit-scrollbar-thumb:hover  { background: var(--matcha-color-text-secondary); }
+
+        > button[matcha-button],
+        > a[matcha-button] {
+            flex: 0 0 auto;
+            white-space: nowrap;
+        }
+    }
+
+    // ── Stretched (opt-in via [stretched]) — fill 100% do container ───────
+    // Era o default até a 20.x; agora requer a propriedade.
+    &[stretched]:not([stretched="false"]) {
+        display: flex;
+        width: 100%;
+
+        .button-group {
+            width: 100%;
+
+            // Children flex-share — each button takes equal width across the row.
+            // O piso de encolhimento é o `min-width` do size do próprio botão
+            // (matcha-buttons.scss) — NÃO o min-content: o botão tem
+            // `overflow: hidden`, o que anula a automatic minimum size do
+            // flexbox. Quando nem esse piso cabe, o overflow-x do grupo rola.
+            > button[matcha-button],
+            > a[matcha-button] {
+                flex: 1 1 0;
+            }
+        }
+    }
+
+    .button-group {
+        // ── Separated (default: gap = space/200) ──────────────────────────
+        // Each button keeps its own full radius and border-thin (2px).
+        // gap already handled by flex gap via [gap] binding in TS.
+
+        // ── Segmented (gap = 0): box-shadows dos outline overlappam ───────
+        // matcha-button usa box-shadow inset (não border), então usamos
+        // margin-left negativo pra sobrepor a borda do vizinho.
+        &.gap-0 {
+            gap: 0 !important;
+
+            button[matcha-button],
+            a[matcha-button] {
+                position: relative;
+                border-radius: 0;
+
+                // First: radius só no lado esquerdo
+                &:first-child {
+                    border-top-left-radius: var(--matcha-radius-lg, 8px);
+                    border-bottom-left-radius: var(--matcha-radius-lg, 8px);
+                }
+
+                // Last: radius só no lado direito
+                &:last-child {
+                    border-top-right-radius: var(--matcha-radius-lg, 8px);
+                    border-bottom-right-radius: var(--matcha-radius-lg, 8px);
+                }
+
+                // Overlap de 2px com vizinho anterior pra fundir bordas
+                &:not(:first-child) {
+                    margin-left: calc(-1 * var(--matcha-border-thin, 2px));
+                }
+
+                // Active (filled) fica no topo pra borda não ser recortada
+                &[active]:not([active="false"]),
+                &:not([outline]):not([basic]):not([ghost])[color] {
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}
+
+// =============================================================================
+// Readonly — seleção legível, clique inerte
+// =============================================================================
+// NENHUMA troca de cor aqui, e é isso que separa `readonly` de `disabled`: o bloco
+// `&[disabled]` acima aplica os mixins `disabled-*-button` nos botões inativos, apagando
+// justamente o contraste que diz qual opção está selecionada. Numa tela cujo propósito é LER
+// esse estado, apagá-lo é o oposto do que se quer.
+//
+// O que muda é só a promessa de interação: o ponteiro deixa de sugerir clique. A inércia em si
+// mora no `onSelect` do componente, não aqui — CSS não deve ser a trava.
+matcha-button-toggle[readonly] {
+
+    .button-group {
+
+        button[matcha-button],
+        a[matcha-button] {
+            cursor: default;
+        }
+    }
+}