@inchurch/matcha-theme 22.40.1 → 22.40.2

package/components/matcha-toolbar.scss

@@ -1,366 +1,366 @@
-// =============================================================================
-// matcha-toolbar — flex row + slot único (1:1 Figma DSV3 15866:92)
-//
-// Canon Figma: 1 slot `content` (flex gap-100 items-center p-200 radius-xl).
-// Consumer compõe Title + Actions + CTA livremente no slot default.
-// Slots nomeados (title/actions/primary) preservados pra back-compat com
-// consumers anteriores ao realinhamento Figma.
-//
-// Modifiers via host data-attrs:
-//   data-layout       — horizontal | stack
-//   data-size         — compact | comfortable | spacious
-//   data-color        — accent | success | warn | danger | info (sem 'default')
-//   data-elevation    — 1 | 2 | 3 (sem 0)
-//   data-bordered     — outline 1px
-//   data-sticky       — position sticky top
-//   data-collapse-search — search vira icon-button em stack mode
-//
-// Zero hardcoded fora do bloco de vars no topo.
-// =============================================================================
-
-@mixin matcha-toolbar($theme) {
-
-  // ── CSS vars (single source of truth) ─────────────────────────────────
-  matcha-toolbar {
-    // Spacing — alinhado ao Figma DSV3 15866:92.
-    // Toolbar padding 16px simétrico, gap UNICO de 8px (space-100), height 68 = 16+36+16.
-    //
-    // O gap entre groups era 12px (space-150) contra 8px dentro do actions, e isso
-    // produzia tres distancias diferentes na mesma barra: busca->icon-button 12px,
-    // icon-button->icon-button 8px, ultimo icon-button->CTA 8px. Unificado em 8px, que e
-    // o que o proprio canon do slot declara no topo deste arquivo ("flex gap-100") --
-    // gap-100 E 8px. Os 12px vinham do "Figma Frame interno", outra medida, e nao do slot.
-    // Conferir 15866:92 quando alguem abrir o frame; se o slot for 12, e este comentario
-    // que esta errado, nao o valor.
-    // Consumer pode override per-side via --matcha-toolbar-padding-left/right.
-    --matcha-toolbar-padding-y:        var(--matcha-space-200, 16px);
-    --matcha-toolbar-padding-x:        var(--matcha-space-200, 16px);
-    --matcha-toolbar-padding-left:     var(--matcha-toolbar-padding-x);
-    --matcha-toolbar-padding-right:    var(--matcha-toolbar-padding-x);
-    --matcha-toolbar-gap:              var(--matcha-space-100, 8px);
-    --matcha-toolbar-actions-gap:      var(--matcha-space-100, 8px);
-    --matcha-toolbar-min-height:       68px;
-
-    // Item max-widths — UX guardrails canon DSV3.
-    // Title NÃO tem cap por default (flex: 1 1 auto cresce até preencher
-    // o espaço disponível). Consumer pode aplicar max-width localmente se
-    // precisar (raro — só pra casos com title gigante por i18n).
-    // Search: 320px = Figma 280 + buffer. Acima disso vira "barrão" desproporcional.
-    --matcha-toolbar-search-max-width: 320px;
-
-    // Breakpoint pra auto-stack (mobile). Default 768px = md Tailwind / matcha bp-md.
-    --matcha-toolbar-stack-breakpoint: 768px;
-
-    // Size variants — padding/min-height (consumer override no escopo).
-    --matcha-toolbar-padding-y-compact:    var(--matcha-space-150, 12px);
-    --matcha-toolbar-padding-x-compact:    var(--matcha-space-150, 12px);
-    --matcha-toolbar-min-height-compact:   var(--matcha-space-600, 48px);
-    --matcha-toolbar-padding-y-spacious:   var(--matcha-space-300, 24px);
-    --matcha-toolbar-padding-x-spacious:   var(--matcha-space-300, 24px);
-    --matcha-toolbar-min-height-spacious:  var(--matcha-space-900, 72px);
-
-    // Surface
-    --matcha-toolbar-bg:               var(--matcha-color-surface-card);
-    --matcha-toolbar-radius:           var(--matcha-radius-xl, 16px);
-    --matcha-toolbar-border-color:     var(--matcha-color-surface-border);
-    --matcha-toolbar-border-width:     var(--matcha-border-hairline, 1px);
-
-    // Elevation (3 níveis canon)
-    --matcha-toolbar-shadow-1:         var(--matcha-shadow-1);
-    --matcha-toolbar-shadow-2:         var(--matcha-shadow-2);
-    --matcha-toolbar-shadow-3:         var(--matcha-shadow-3);
-
-    // Sticky
-    --matcha-toolbar-sticky-z:         var(--matcha-z-sticky, 10);
-
-    // Transition
-    --matcha-toolbar-transition-duration: var(--matcha-duration-fast, 200ms);
-  }
-
-  // ── Container — flex row (1:1 Figma DSV3 15866:92) ────────────────────
-  matcha-toolbar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: var(--matcha-toolbar-gap);
-    padding:
-      var(--matcha-toolbar-padding-y)
-      var(--matcha-toolbar-padding-right)
-      var(--matcha-toolbar-padding-y)
-      var(--matcha-toolbar-padding-left);
-    background: var(--matcha-toolbar-bg);
-    border-radius: var(--matcha-toolbar-radius);
-    min-height: var(--matcha-toolbar-min-height);
-    box-sizing: border-box;
-    width: 100%;
-
-    transition:
-      padding var(--matcha-toolbar-transition-duration) ease,
-      gap     var(--matcha-toolbar-transition-duration) ease,
-      box-shadow var(--matcha-toolbar-transition-duration) ease;
-
-    // ── Layout pattern canon: título CRESCE, empurra resto pra direita ──
-    // Regra única e simples: matcha-title é o único flex-grow do toolbar.
-    // Ele se expande pra ocupar todo o leftover space, empurrando search/
-    // actions/CTA naturalmente pra direita. Sem ml-auto, sem spacer manual.
-    //
-    // Comportamento:
-    //   - Title curto ("Igrejas"): cresce até o limite, todo o resto à direita
-    //   - Title longo ("Configurações de Membros"): cresce até o cap natural,
-    //     trunca com ellipsis se passar (via matcha-title__text rules abaixo)
-    //
-    // Consumer NUNCA deve aplicar .ml-auto ou margin: auto em flex children
-    // do toolbar — quebra a regra e gera inconsistência visual entre telas.
-    > matcha-title {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    matcha-title[type="icon"] {
-      --matcha-title-fill: var(--matcha-color-text-secondary,
-        color-mix(in srgb, var(--matcha-color-fg) 55%, transparent));
-    }
-
-    matcha-title .matcha-title__text {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    // Search field tem cap pra não virar "barrão" em wide screens.
-    // Figma desktop = 280px. Cap 320px = buffer pra labels longos.
-    > matcha-field[type="search"],
-    [matcha-toolbar-actions] > matcha-field[type="search"] {
-      max-width: var(--matcha-toolbar-search-max-width);
-    }
-
-    // Icon-buttons NUNCA deformam — flex:0 0 auto preserva 1:1 quadrado
-    // independente do espaço disponível. Aplica em qualquer profundidade
-    // dentro do toolbar (direto ou em [matcha-toolbar-actions]).
-    button[matcha-icon-button],
-    [matcha-icon-button] {
-      flex: 0 0 auto;
-    }
-
-    // Defensiva contra "gap fantasma": custom elements popover (matcha-menu)
-    // e seu matcha-panel interno são display:inline default → flex items invisíveis.
-    // Dentro do toolbar consumem 12px de column-gap cada um, criando respiro
-    // não-intencional entre o último item visível e a borda direita.
-    //
-    // Solução ideal: consumer move `<matcha-menu>` pra FORA do `<matcha-toolbar>`
-    // (referência via template variable continua funcionando). Esta regra é
-    // defesa em profundidade pra legacy que ainda tem matcha-menu dentro.
-    //
-    // display:contents tira o host do layout sem afetar a popover (matcha-panel
-    // interno usa position:fixed/absolute via overlay).
-    > matcha-menu,
-    > matcha-menu > matcha-panel {
-      display: contents;
-    }
-
-    // Botão CTA principal também não shrinka (mantém label legível).
-    > button[matcha-button],
-    > [matcha-button] {
-      flex: 0 0 auto;
-    }
-
-    // ── Back-compat: atributos legacy [matcha-toolbar-*] ──────────────────
-    // Não são mais ng-content selectors — viram hints de layout via CSS:
-    //   [matcha-toolbar-actions]  → flex inline group com gap (mesmo padding visual)
-    //   [matcha-toolbar-primary]  → fica naturalmente à direita (último child)
-    //   [matcha-toolbar-title]    → idêntico a matcha-title:first-child
-    [matcha-toolbar-actions] {
-      display: flex;
-      align-items: center;
-      gap: var(--matcha-toolbar-actions-gap);
-    }
-
-    // ── Layout: stack — flex-wrap + order (1:1 Figma Mobile 15870:84) ────
-    // Estratégia: mantém flex-direction:row mas habilita flex-wrap. Search
-    // recebe order:99 + flex-basis:100% → wrappa pra row 2 com full-width.
-    // Title + actions + CTA continuam na row 1 com fluxo natural.
-    //
-    // Vantagem vs Grid: zero overlap. Funciona com qualquer combinação de
-    // children (search direto OU dentro de actions, CTA direto OU dentro de actions).
-    //
-    // Aplicado em 2 contextos: [data-layout="stack"] explícito ou auto-stack
-    // via media query <768px (a menos que [data-no-auto-stack] esteja setado).
-    &[data-layout="stack"] {
-      flex-wrap: wrap;
-      row-gap: var(--matcha-space-100, 8px);
-
-      > * {
-        margin-left: 0;
-        min-width: 0;  // permite shrink
-      }
-
-      // Search vai pra row 2 full-width (independente de estar direto ou em actions).
-      > matcha-field[type="search"],
-      [matcha-toolbar-actions] {
-        // Actions div como um todo wrappa pra row 2 se contém search inside
-        // (caso de members-list legacy onde search vive dentro do actions).
-        // Pra evitar quebra de outros casos, só wrappamos se o consumer
-        // declarou estrutura legacy. Default: actions stay row 1.
-      }
-
-      > matcha-field[type="search"] {
-        flex: 1 1 100%;
-        order: 99;
-        max-width: 100%;
-        width: 100%;
-      }
-
-      // Title cresce mas com cap pra não empurrar actions pra row 2 sozinho.
-      > matcha-title {
-        flex: 1 1 auto;
-        max-width: 100%;
-      }
-
-      // Actions div + CTA standalone ficam row 1 com fluxo natural.
-      > [matcha-toolbar-actions] {
-        flex: 0 0 auto;
-      }
-
-      > button[matcha-button],
-      > [matcha-button] {
-        flex: 0 0 auto;
-      }
-    }
-
-    // Auto-stack em mobile (viewport <768px) — sem precisar setar [layout="stack"]
-    // manualmente. Consumer pode opt-out via [data-no-auto-stack].
-    @media (max-width: 768px) {
-      &:not([data-no-auto-stack]) {
-        flex-wrap: wrap;
-        row-gap: var(--matcha-space-100, 8px);
-
-        > * {
-          margin-left: 0;
-          min-width: 0;
-        }
-
-        > matcha-field[type="search"] {
-          flex: 1 1 100%;
-          order: 99;
-          max-width: 100%;
-          width: 100%;
-        }
-
-        > matcha-title {
-          flex: 1 1 auto;
-          max-width: 100%;
-        }
-
-        > [matcha-toolbar-actions] {
-          flex: 0 0 auto;
-        }
-
-        > button[matcha-button],
-        > [matcha-button] {
-          flex: 0 0 auto;
-        }
-      }
-    }
-
-    // ── Viewport extra-narrow (<480px) — actions também wrappa ───────────
-    // Quando tela muito apertada (~iPhone SE 1ª gen, browsers com sidebar
-    // dev-tools aberta), até title + actions juntos não cabem. Permite que
-    // actions wrappe pra sua própria row 3, mantendo CTA legível.
-    @media (max-width: 479px) {
-      &:not([data-no-auto-stack]) {
-        > [matcha-toolbar-actions] {
-          flex: 1 1 100%;
-          order: 50;  // depois do title (0), antes do search (99)
-          justify-content: flex-end;
-        }
-
-        > button[matcha-button],
-        > [matcha-button] {
-          flex: 1 1 auto;
-          order: 60;
-        }
-      }
-    }
-
-    // ── Size: compact ────────────────────────────────────────────────────
-    &[data-size="compact"] {
-      padding: var(--matcha-toolbar-padding-y-compact) var(--matcha-toolbar-padding-x-compact);
-      min-height: var(--matcha-toolbar-min-height-compact);
-    }
-
-    // ── Size: spacious ───────────────────────────────────────────────────
-    &[data-size="spacious"] {
-      padding: var(--matcha-toolbar-padding-y-spacious) var(--matcha-toolbar-padding-x-spacious);
-      min-height: var(--matcha-toolbar-min-height-spacious);
-    }
-
-    // ── Color variants — accent border-left + bg tint ────────────────────
-    // Pattern Material/Polaris status bar. Border 4px na esquerda + bg alpha.
-    &[data-color] {
-      position: relative;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: var(--matcha-space-050, 4px);
-        background: var(--matcha-toolbar-accent-color, var(--matcha-color-accent));
-        pointer-events: none;
-      }
-    }
-    &[data-color="accent"]  { --matcha-toolbar-accent-color: var(--matcha-color-accent); }
-    &[data-color="success"] { --matcha-toolbar-accent-color: var(--matcha-color-success); }
-    &[data-color="warn"]    { --matcha-toolbar-accent-color: var(--matcha-color-warn); }
-    &[data-color="danger"]  { --matcha-toolbar-accent-color: var(--matcha-color-danger); }
-    &[data-color="info"]    { --matcha-toolbar-accent-color: var(--matcha-color-info); }
-
-    // ── Elevation 1-3 (Material-like progressive shadows) ────────────────
-    &[data-elevation="1"] { box-shadow: var(--matcha-toolbar-shadow-1); }
-    &[data-elevation="2"] { box-shadow: var(--matcha-toolbar-shadow-2); }
-    &[data-elevation="3"] { box-shadow: var(--matcha-toolbar-shadow-3); }
-
-    // ── Bordered — outline 1px sobre flat surface ────────────────────────
-    &[data-bordered] {
-      border: var(--matcha-toolbar-border-width) solid var(--matcha-toolbar-border-color);
-    }
-
-    // ── Sticky — gruda no topo do scroll container ──────────────────────
-    &[data-sticky] {
-      position: sticky;
-      top: 0;
-      z-index: var(--matcha-toolbar-sticky-z);
-    }
-
-    // ── Auto-collapse search em stack mode (CSS-only via :focus-within) ──
-    // matcha-field type=search vira icon-button (32x32) por default.
-    // Click/focus expande pro tamanho natural (flex:1).
-    &[data-collapse-search][data-layout="stack"] {
-      [matcha-toolbar-actions] matcha-field,
-      > matcha-field {
-        flex: 0 0 auto;
-        width: var(--matcha-space-800, 32px);
-        transition: width var(--matcha-toolbar-transition-duration) ease,
-                    flex  var(--matcha-toolbar-transition-duration) ease;
-
-        // Foco expande pra row inteira
-        &:focus-within {
-          flex: 1 1 0;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  // ── Reduced motion ────────────────────────────────────────────────────
-  @media (prefers-reduced-motion: reduce) {
-    matcha-toolbar {
-      transition: none;
-      [matcha-toolbar-actions] matcha-field { transition: none; }
-      > matcha-field { transition: none; }
-    }
-  }
-}
+// =============================================================================
+// matcha-toolbar — flex row + slot único (1:1 Figma DSV3 15866:92)
+//
+// Canon Figma: 1 slot `content` (flex gap-100 items-center p-200 radius-xl).
+// Consumer compõe Title + Actions + CTA livremente no slot default.
+// Slots nomeados (title/actions/primary) preservados pra back-compat com
+// consumers anteriores ao realinhamento Figma.
+//
+// Modifiers via host data-attrs:
+//   data-layout       — horizontal | stack
+//   data-size         — compact | comfortable | spacious
+//   data-color        — accent | success | warn | danger | info (sem 'default')
+//   data-elevation    — 1 | 2 | 3 (sem 0)
+//   data-bordered     — outline 1px
+//   data-sticky       — position sticky top
+//   data-collapse-search — search vira icon-button em stack mode
+//
+// Zero hardcoded fora do bloco de vars no topo.
+// =============================================================================
+
+@mixin matcha-toolbar($theme) {
+
+  // ── CSS vars (single source of truth) ─────────────────────────────────
+  matcha-toolbar {
+    // Spacing — alinhado ao Figma DSV3 15866:92.
+    // Toolbar padding 16px simétrico, gap UNICO de 8px (space-100), height 68 = 16+36+16.
+    //
+    // O gap entre groups era 12px (space-150) contra 8px dentro do actions, e isso
+    // produzia tres distancias diferentes na mesma barra: busca->icon-button 12px,
+    // icon-button->icon-button 8px, ultimo icon-button->CTA 8px. Unificado em 8px, que e
+    // o que o proprio canon do slot declara no topo deste arquivo ("flex gap-100") --
+    // gap-100 E 8px. Os 12px vinham do "Figma Frame interno", outra medida, e nao do slot.
+    // Conferir 15866:92 quando alguem abrir o frame; se o slot for 12, e este comentario
+    // que esta errado, nao o valor.
+    // Consumer pode override per-side via --matcha-toolbar-padding-left/right.
+    --matcha-toolbar-padding-y:        var(--matcha-space-200, 16px);
+    --matcha-toolbar-padding-x:        var(--matcha-space-200, 16px);
+    --matcha-toolbar-padding-left:     var(--matcha-toolbar-padding-x);
+    --matcha-toolbar-padding-right:    var(--matcha-toolbar-padding-x);
+    --matcha-toolbar-gap:              var(--matcha-space-100, 8px);
+    --matcha-toolbar-actions-gap:      var(--matcha-space-100, 8px);
+    --matcha-toolbar-min-height:       68px;
+
+    // Item max-widths — UX guardrails canon DSV3.
+    // Title NÃO tem cap por default (flex: 1 1 auto cresce até preencher
+    // o espaço disponível). Consumer pode aplicar max-width localmente se
+    // precisar (raro — só pra casos com title gigante por i18n).
+    // Search: 320px = Figma 280 + buffer. Acima disso vira "barrão" desproporcional.
+    --matcha-toolbar-search-max-width: 320px;
+
+    // Breakpoint pra auto-stack (mobile). Default 768px = md Tailwind / matcha bp-md.
+    --matcha-toolbar-stack-breakpoint: 768px;
+
+    // Size variants — padding/min-height (consumer override no escopo).
+    --matcha-toolbar-padding-y-compact:    var(--matcha-space-150, 12px);
+    --matcha-toolbar-padding-x-compact:    var(--matcha-space-150, 12px);
+    --matcha-toolbar-min-height-compact:   var(--matcha-space-600, 48px);
+    --matcha-toolbar-padding-y-spacious:   var(--matcha-space-300, 24px);
+    --matcha-toolbar-padding-x-spacious:   var(--matcha-space-300, 24px);
+    --matcha-toolbar-min-height-spacious:  var(--matcha-space-900, 72px);
+
+    // Surface
+    --matcha-toolbar-bg:               var(--matcha-color-surface-card);
+    --matcha-toolbar-radius:           var(--matcha-radius-xl, 16px);
+    --matcha-toolbar-border-color:     var(--matcha-color-surface-border);
+    --matcha-toolbar-border-width:     var(--matcha-border-hairline, 1px);
+
+    // Elevation (3 níveis canon)
+    --matcha-toolbar-shadow-1:         var(--matcha-shadow-1);
+    --matcha-toolbar-shadow-2:         var(--matcha-shadow-2);
+    --matcha-toolbar-shadow-3:         var(--matcha-shadow-3);
+
+    // Sticky
+    --matcha-toolbar-sticky-z:         var(--matcha-z-sticky, 10);
+
+    // Transition
+    --matcha-toolbar-transition-duration: var(--matcha-duration-fast, 200ms);
+  }
+
+  // ── Container — flex row (1:1 Figma DSV3 15866:92) ────────────────────
+  matcha-toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--matcha-toolbar-gap);
+    padding:
+      var(--matcha-toolbar-padding-y)
+      var(--matcha-toolbar-padding-right)
+      var(--matcha-toolbar-padding-y)
+      var(--matcha-toolbar-padding-left);
+    background: var(--matcha-toolbar-bg);
+    border-radius: var(--matcha-toolbar-radius);
+    min-height: var(--matcha-toolbar-min-height);
+    box-sizing: border-box;
+    width: 100%;
+
+    transition:
+      padding var(--matcha-toolbar-transition-duration) ease,
+      gap     var(--matcha-toolbar-transition-duration) ease,
+      box-shadow var(--matcha-toolbar-transition-duration) ease;
+
+    // ── Layout pattern canon: título CRESCE, empurra resto pra direita ──
+    // Regra única e simples: matcha-title é o único flex-grow do toolbar.
+    // Ele se expande pra ocupar todo o leftover space, empurrando search/
+    // actions/CTA naturalmente pra direita. Sem ml-auto, sem spacer manual.
+    //
+    // Comportamento:
+    //   - Title curto ("Igrejas"): cresce até o limite, todo o resto à direita
+    //   - Title longo ("Configurações de Membros"): cresce até o cap natural,
+    //     trunca com ellipsis se passar (via matcha-title__text rules abaixo)
+    //
+    // Consumer NUNCA deve aplicar .ml-auto ou margin: auto em flex children
+    // do toolbar — quebra a regra e gera inconsistência visual entre telas.
+    > matcha-title {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    matcha-title[type="icon"] {
+      --matcha-title-fill: var(--matcha-color-text-secondary,
+        color-mix(in srgb, var(--matcha-color-fg) 55%, transparent));
+    }
+
+    matcha-title .matcha-title__text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // Search field tem cap pra não virar "barrão" em wide screens.
+    // Figma desktop = 280px. Cap 320px = buffer pra labels longos.
+    > matcha-field[type="search"],
+    [matcha-toolbar-actions] > matcha-field[type="search"] {
+      max-width: var(--matcha-toolbar-search-max-width);
+    }
+
+    // Icon-buttons NUNCA deformam — flex:0 0 auto preserva 1:1 quadrado
+    // independente do espaço disponível. Aplica em qualquer profundidade
+    // dentro do toolbar (direto ou em [matcha-toolbar-actions]).
+    button[matcha-icon-button],
+    [matcha-icon-button] {
+      flex: 0 0 auto;
+    }
+
+    // Defensiva contra "gap fantasma": custom elements popover (matcha-menu)
+    // e seu matcha-panel interno são display:inline default → flex items invisíveis.
+    // Dentro do toolbar consumem 12px de column-gap cada um, criando respiro
+    // não-intencional entre o último item visível e a borda direita.
+    //
+    // Solução ideal: consumer move `<matcha-menu>` pra FORA do `<matcha-toolbar>`
+    // (referência via template variable continua funcionando). Esta regra é
+    // defesa em profundidade pra legacy que ainda tem matcha-menu dentro.
+    //
+    // display:contents tira o host do layout sem afetar a popover (matcha-panel
+    // interno usa position:fixed/absolute via overlay).
+    > matcha-menu,
+    > matcha-menu > matcha-panel {
+      display: contents;
+    }
+
+    // Botão CTA principal também não shrinka (mantém label legível).
+    > button[matcha-button],
+    > [matcha-button] {
+      flex: 0 0 auto;
+    }
+
+    // ── Back-compat: atributos legacy [matcha-toolbar-*] ──────────────────
+    // Não são mais ng-content selectors — viram hints de layout via CSS:
+    //   [matcha-toolbar-actions]  → flex inline group com gap (mesmo padding visual)
+    //   [matcha-toolbar-primary]  → fica naturalmente à direita (último child)
+    //   [matcha-toolbar-title]    → idêntico a matcha-title:first-child
+    [matcha-toolbar-actions] {
+      display: flex;
+      align-items: center;
+      gap: var(--matcha-toolbar-actions-gap);
+    }
+
+    // ── Layout: stack — flex-wrap + order (1:1 Figma Mobile 15870:84) ────
+    // Estratégia: mantém flex-direction:row mas habilita flex-wrap. Search
+    // recebe order:99 + flex-basis:100% → wrappa pra row 2 com full-width.
+    // Title + actions + CTA continuam na row 1 com fluxo natural.
+    //
+    // Vantagem vs Grid: zero overlap. Funciona com qualquer combinação de
+    // children (search direto OU dentro de actions, CTA direto OU dentro de actions).
+    //
+    // Aplicado em 2 contextos: [data-layout="stack"] explícito ou auto-stack
+    // via media query <768px (a menos que [data-no-auto-stack] esteja setado).
+    &[data-layout="stack"] {
+      flex-wrap: wrap;
+      row-gap: var(--matcha-space-100, 8px);
+
+      > * {
+        margin-left: 0;
+        min-width: 0;  // permite shrink
+      }
+
+      // Search vai pra row 2 full-width (independente de estar direto ou em actions).
+      > matcha-field[type="search"],
+      [matcha-toolbar-actions] {
+        // Actions div como um todo wrappa pra row 2 se contém search inside
+        // (caso de members-list legacy onde search vive dentro do actions).
+        // Pra evitar quebra de outros casos, só wrappamos se o consumer
+        // declarou estrutura legacy. Default: actions stay row 1.
+      }
+
+      > matcha-field[type="search"] {
+        flex: 1 1 100%;
+        order: 99;
+        max-width: 100%;
+        width: 100%;
+      }
+
+      // Title cresce mas com cap pra não empurrar actions pra row 2 sozinho.
+      > matcha-title {
+        flex: 1 1 auto;
+        max-width: 100%;
+      }
+
+      // Actions div + CTA standalone ficam row 1 com fluxo natural.
+      > [matcha-toolbar-actions] {
+        flex: 0 0 auto;
+      }
+
+      > button[matcha-button],
+      > [matcha-button] {
+        flex: 0 0 auto;
+      }
+    }
+
+    // Auto-stack em mobile (viewport <768px) — sem precisar setar [layout="stack"]
+    // manualmente. Consumer pode opt-out via [data-no-auto-stack].
+    @media (max-width: 768px) {
+      &:not([data-no-auto-stack]) {
+        flex-wrap: wrap;
+        row-gap: var(--matcha-space-100, 8px);
+
+        > * {
+          margin-left: 0;
+          min-width: 0;
+        }
+
+        > matcha-field[type="search"] {
+          flex: 1 1 100%;
+          order: 99;
+          max-width: 100%;
+          width: 100%;
+        }
+
+        > matcha-title {
+          flex: 1 1 auto;
+          max-width: 100%;
+        }
+
+        > [matcha-toolbar-actions] {
+          flex: 0 0 auto;
+        }
+
+        > button[matcha-button],
+        > [matcha-button] {
+          flex: 0 0 auto;
+        }
+      }
+    }
+
+    // ── Viewport extra-narrow (<480px) — actions também wrappa ───────────
+    // Quando tela muito apertada (~iPhone SE 1ª gen, browsers com sidebar
+    // dev-tools aberta), até title + actions juntos não cabem. Permite que
+    // actions wrappe pra sua própria row 3, mantendo CTA legível.
+    @media (max-width: 479px) {
+      &:not([data-no-auto-stack]) {
+        > [matcha-toolbar-actions] {
+          flex: 1 1 100%;
+          order: 50;  // depois do title (0), antes do search (99)
+          justify-content: flex-end;
+        }
+
+        > button[matcha-button],
+        > [matcha-button] {
+          flex: 1 1 auto;
+          order: 60;
+        }
+      }
+    }
+
+    // ── Size: compact ────────────────────────────────────────────────────
+    &[data-size="compact"] {
+      padding: var(--matcha-toolbar-padding-y-compact) var(--matcha-toolbar-padding-x-compact);
+      min-height: var(--matcha-toolbar-min-height-compact);
+    }
+
+    // ── Size: spacious ───────────────────────────────────────────────────
+    &[data-size="spacious"] {
+      padding: var(--matcha-toolbar-padding-y-spacious) var(--matcha-toolbar-padding-x-spacious);
+      min-height: var(--matcha-toolbar-min-height-spacious);
+    }
+
+    // ── Color variants — accent border-left + bg tint ────────────────────
+    // Pattern Material/Polaris status bar. Border 4px na esquerda + bg alpha.
+    &[data-color] {
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: var(--matcha-space-050, 4px);
+        background: var(--matcha-toolbar-accent-color, var(--matcha-color-accent));
+        pointer-events: none;
+      }
+    }
+    &[data-color="accent"]  { --matcha-toolbar-accent-color: var(--matcha-color-accent); }
+    &[data-color="success"] { --matcha-toolbar-accent-color: var(--matcha-color-success); }
+    &[data-color="warn"]    { --matcha-toolbar-accent-color: var(--matcha-color-warn); }
+    &[data-color="danger"]  { --matcha-toolbar-accent-color: var(--matcha-color-danger); }
+    &[data-color="info"]    { --matcha-toolbar-accent-color: var(--matcha-color-info); }
+
+    // ── Elevation 1-3 (Material-like progressive shadows) ────────────────
+    &[data-elevation="1"] { box-shadow: var(--matcha-toolbar-shadow-1); }
+    &[data-elevation="2"] { box-shadow: var(--matcha-toolbar-shadow-2); }
+    &[data-elevation="3"] { box-shadow: var(--matcha-toolbar-shadow-3); }
+
+    // ── Bordered — outline 1px sobre flat surface ────────────────────────
+    &[data-bordered] {
+      border: var(--matcha-toolbar-border-width) solid var(--matcha-toolbar-border-color);
+    }
+
+    // ── Sticky — gruda no topo do scroll container ──────────────────────
+    &[data-sticky] {
+      position: sticky;
+      top: 0;
+      z-index: var(--matcha-toolbar-sticky-z);
+    }
+
+    // ── Auto-collapse search em stack mode (CSS-only via :focus-within) ──
+    // matcha-field type=search vira icon-button (32x32) por default.
+    // Click/focus expande pro tamanho natural (flex:1).
+    &[data-collapse-search][data-layout="stack"] {
+      [matcha-toolbar-actions] matcha-field,
+      > matcha-field {
+        flex: 0 0 auto;
+        width: var(--matcha-space-800, 32px);
+        transition: width var(--matcha-toolbar-transition-duration) ease,
+                    flex  var(--matcha-toolbar-transition-duration) ease;
+
+        // Foco expande pra row inteira
+        &:focus-within {
+          flex: 1 1 0;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  // ── Reduced motion ────────────────────────────────────────────────────
+  @media (prefers-reduced-motion: reduce) {
+    matcha-toolbar {
+      transition: none;
+      [matcha-toolbar-actions] matcha-field { transition: none; }
+      > matcha-field { transition: none; }
+    }
+  }
+}