@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-toolbar.scss

@@ -1,206 +1,359 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-toolbar.scss — Page toolbar + Settings toolbar item
-// Aligned with Figma matcha/toolbar (3 tipos) + matcha/toolbar/item (3 tipos)
-// Angular: matcha-toolbar, matcha-toolbar-button, matcha-toolbar-main-button,
-//          matcha-toolbar-content, matcha-toolbar-custom-button
-// =============================================================================
-
-@mixin matcha-toolbar-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  // ── Page Toolbar Container ──
-  matcha-toolbar {
-    .matcha-toolbar-container {
-      background: var(--matcha-color-surface, #{getSurface($theme)});
-      border-radius: var(--matcha-radius-lg, 8px);
-    }
-  }
-
-  // ── Toolbar Button (icon, outline, grey) ──
-  matcha-toolbar-button {
-    button {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-      &:hover:not(:disabled) {
-        background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-      }
-
-      &: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);
-      }
-    }
-  }
-
-  // ── Main Button (accent) ──
-  matcha-toolbar-main-button {
-    button {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
-
-      &:hover:not(:disabled) {
-        opacity: 0.9;
-      }
-
-      &: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);
-      }
-    }
-  }
-
-  // ── Settings Toolbar Item ──
-  .matcha-toolbar-item {
-    .toolbar-item-title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .toolbar-item-description {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
-
-    .toolbar-item-hint {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-toolbar {
-  display: block;
-  width: 100%;
-
-  .matcha-toolbar-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    // Figma matcha/toolbar: h 64, pad 16, gap 8, radius 8
-    padding: var(--matcha-space-200, 16px);
-    gap: var(--matcha-space-100, 8px);
-    min-height: 64px;
-    border-radius: var(--matcha-radius-lg, 8px);
-  }
-
-  .matcha-toolbar-title {
-    display: flex;
-    align-items: center;
-    min-height: 32px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .matcha-toolbar-actions {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    flex-wrap: wrap;
-  }
-}
-
-// ── Toolbar Button ──
-matcha-toolbar-button {
-  display: inline-flex;
-}
-
-// ── Main Button ──
-matcha-toolbar-main-button {
-  display: inline-flex;
-
-  button {
-    border: none;
-    border-radius: var(--matcha-radius-lg, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-label-md, 14px);
-    font-weight: var(--matcha-weight-medium, 500);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    min-height: 40px;
-  }
-}
-
-// ── Toolbar Content ──
-matcha-toolbar-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--matcha-space-100, 8px);
-}
-
-// ── Settings Toolbar Item ──
-.matcha-toolbar-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-200, 16px);
-  width: 100%;
-
-  .toolbar-item-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--matcha-space-200, 16px);
-  }
-
-  .toolbar-item-dropdowns {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    flex-wrap: wrap;
-  }
-
-  .toolbar-item-description {
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-  }
-
-  .toolbar-item-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--matcha-space-100, 8px);
-  }
-
-  .toolbar-item-hint {
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    line-height: var(--matcha-leading-body-md, 20px);
-  }
-}
-
-// ── Responsive ──
-@include media-breakpoint('lt-md') {
-  matcha-toolbar {
-    .matcha-toolbar-container {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .matcha-toolbar-title {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    .matcha-toolbar-actions {
-      width: 100%;
-    }
-  }
-
-  .matcha-toolbar-item {
-    .toolbar-item-header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-}
-
-// ── Reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-  matcha-toolbar-main-button button {
-    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-lg).
+// 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 entre groups 12px (Figma Frame interno),
+    // gap interno de actions group 8px. Height 68 = 16+36+16.
+    // 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-150, 12px);
+    --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-lg, 8px);
+    --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,
+        rgba(getForeground($theme), 0.55));
+    }
+
+    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; }
+    }
+  }
+}