@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-form-section.scss

@@ -1,100 +1,100 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-form-section.scss — Form section divider for CRUD pages
-// Aligned with Figma matcha/form-section:
-//   Tipo(3: Section, Sub-section, Section + Descrição)
-// Usage: Inline divider inside form flows to group related fields
-// NOT a card — just a heading row with accent indicator
-// =============================================================================
-
-@mixin matcha-form-section-theme($theme) {
-
-  // ── Section (accent bar + title) ──
-  .matcha-form-section {
-    .matcha-form-section__bar {
-      background: var(--matcha-color-accent);
-    }
-
-    .matcha-form-section__title {
-      color: var(--matcha-color-fg);
-    }
-
-    .matcha-form-section__description {
-      color: var(--matcha-color-text-secondary);
-    }
-  }
-
-  // ── Sub-section (bullet + title) ──
-  .matcha-form-subsection {
-    .matcha-form-subsection__bullet {
-      background: var(--matcha-color-fg);
-    }
-
-    .matcha-form-subsection__title {
-      color: var(--matcha-color-fg);
-    }
-  }
-}
-
-// ── Section Layout ─────────────────────────────────────────────────────────
-
-.matcha-form-section {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--matcha-space-150, 12px);
-  width: 100%;
-}
-
-.matcha-form-section__bar {
-  width: var(--matcha-border-medium, 4px);
-  align-self: stretch;
-  border-radius: var(--matcha-radius-sm, 2px);
-  flex-shrink: 0;
-  min-height: var(--matcha-space-250, 20px);
-}
-
-.matcha-form-section__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
-  min-width: 0;
-}
-
-.matcha-form-section__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-title-sm, 22px);
-}
-
-.matcha-form-section__description {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-sm, 16px);
-}
-
-// ── Sub-section Layout ─────────────────────────────────────────────────────
-
-.matcha-form-subsection {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  width: 100%;
-}
-
-.matcha-form-subsection__bullet {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--matcha-radius-pill, 9999px);
-  flex-shrink: 0;
-}
-
-.matcha-form-subsection__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-body-md, 20px);
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-form-section.scss — Form section divider for CRUD pages
+// Aligned with Figma matcha/form-section:
+//   Tipo(3: Section, Sub-section, Section + Descrição)
+// Usage: Inline divider inside form flows to group related fields
+// NOT a card — just a heading row with accent indicator
+// =============================================================================
+
+@mixin matcha-form-section-theme($theme) {
+
+  // ── Section (accent bar + title) ──
+  .matcha-form-section {
+    .matcha-form-section__bar {
+      background: var(--matcha-color-accent);
+    }
+
+    .matcha-form-section__title {
+      color: var(--matcha-color-fg);
+    }
+
+    .matcha-form-section__description {
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+
+  // ── Sub-section (bullet + title) ──
+  .matcha-form-subsection {
+    .matcha-form-subsection__bullet {
+      background: var(--matcha-color-fg);
+    }
+
+    .matcha-form-subsection__title {
+      color: var(--matcha-color-fg);
+    }
+  }
+}
+
+// ── Section Layout ─────────────────────────────────────────────────────────
+
+.matcha-form-section {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--matcha-space-150, 12px);
+  width: 100%;
+}
+
+.matcha-form-section__bar {
+  width: var(--matcha-border-medium, 4px);
+  align-self: stretch;
+  border-radius: var(--matcha-radius-sm, 2px);
+  flex-shrink: 0;
+  min-height: var(--matcha-space-250, 20px);
+}
+
+.matcha-form-section__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.matcha-form-section__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-title-sm, 22px);
+}
+
+.matcha-form-section__description {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// ── Sub-section Layout ─────────────────────────────────────────────────────
+
+.matcha-form-subsection {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  width: 100%;
+}
+
+.matcha-form-subsection__bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  flex-shrink: 0;
+}
+
+.matcha-form-subsection__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-body-md, 20px);
+}

package/components/matcha-header.scss

@@ -1,135 +1,135 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-header.scss
-//
-// Lib component canônico — 1:1 Figma DSV3 `matcha/header` (nodeId 15892:157).
-// Element selector `matcha-header { ... }`, 2 slots (left/right).
-//
-// Para o page-header legacy (`.matcha-header__*` usado pela app design-system),
-// ver `app-page-header.scss`.
-// =============================================================================
-
-@mixin matcha-header-theme($theme) {
-
-    matcha-header {
-        background: var(--matcha-color-surface-card);
-        // Border uses interaction/disabled-border (1:1 Figma matcha/header 15892:157):
-        // dark = rgba(232,234,237,0.38); light = #c8d2ca. Semanticamente atípico —
-        // o token canônico de "divisor de chrome" seria surface/border, mas Figma
-        // bind explicitamente este. Trocar de volta se for revertido lá.
-        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-interaction-disabled-border);
-        color: var(--matcha-color-text-primary);
-    }
-}
-
-// ── Layout — matcha-header lib component ────────────────────────────────────
-
-matcha-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-    // Figma DSV3: h 56, padding 8/24/8/16 (asimétrico: l 16 / r 24).
-    // Logical props pra RTL: inline-start = left (16), inline-end = right (24).
-    block-size: var(--matcha-header-height, 56px);
-    padding-block: var(--matcha-space-100, 8px);
-    padding-inline-start: var(--matcha-space-200, 16px);
-    padding-inline-end: var(--matcha-space-300, 24px);
-    gap: var(--matcha-space-200, 16px);
-    // Bottom corners arredondados (header sentado no topo, oposto do footer).
-    border-end-start-radius: var(--matcha-radius-lg, 8px);
-    border-end-end-radius:   var(--matcha-radius-lg, 8px);
-    // Figma DSV3 description: "Elevation: level-1" — eleva o header sobre o body.
-    box-shadow: var(--matcha-shadow-1);
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-label-sm, 13px);
-    line-height: var(--matcha-leading-label-sm, 19px);
-
-    // ── Slots ──
-    .matcha-header__slot {
-        display: flex;
-        align-items: center;
-        gap: var(--matcha-space-200, 16px);
-        // min-width:0 permite que filhos com overflow:hidden+ellipsis encolham.
-        // Não usamos overflow:hidden no slot pra não clipar tooltips/menus
-        // posicionados inline a partir de filhos.
-        min-width: 0;
-
-        // Hide vazio — slot só renderiza com conteúdo.
-        &:not(:has(*)) {
-            display: none;
-        }
-    }
-
-    .matcha-header__slot--left  {
-        flex: 1 1 auto;
-        justify-content: flex-start;
-    }
-
-    .matcha-header__slot--right {
-        flex: 0 0 auto;
-        justify-content: flex-end;
-    }
-
-    // Hamburguer — não encolhe, participa do gap do slot--left (space-200).
-    .matcha-header__menu-trigger {
-        flex-shrink: 0;
-    }
-}
-
-// ── Forced colors (Windows High Contrast) ──────────────────────────────────
-// Border hairline (12% opacidade) pode sumir em high-contrast.
-// CanvasText é o token system semantic — sempre visível.
-@media (forced-colors: active) {
-    matcha-header {
-        border-bottom: 1px solid CanvasText;
-    }
-}
-
-// ── Reduced motion (defensivo) ──────────────────────────────────────────────
-// Hoje header não tem transitions, mas cobre futuro (sticky shadow, hide-on-scroll).
-@media (prefers-reduced-motion: reduce) {
-    matcha-header {
-        transition: none !important;
-        animation: none !important;
-    }
-}
-
-// ── Print ──────────────────────────────────────────────────────────────────
-// Convenção DS: chrome (header/footer) some em impressão.
-@media print {
-    matcha-header {
-        display: none;
-    }
-}
-
-// ── Menu trigger — visível apenas em tablet/mobile (< 1024px) ───────────────
-// Em desktop o nav-rail/panel fica sempre visível; hamburguer não é necessário.
-// Consumer pode sobreescrever com [showMenuTrigger]="false" se quiser esconder
-// em breakpoints diferentes.
-@media (min-width: 1024px) {
-    matcha-header .matcha-header__menu-trigger {
-        display: none !important;
-    }
-}
-
-// ── Responsive — matcha-header (Mobile, xs) ──
-@include media-breakpoint('xs') {
-    matcha-header {
-        // Figma DSV3 Mobile (node 15892:124 — matcha/header Estilo=Mobile):
-        // h 48 (token --matcha-grid-header-height-mobile, NÃO 56 — versão
-        // compactada pra reduzir chrome em viewport pequeno),
-        // padding 8/16/8/16 (simétrico), gap 16.
-        block-size: var(--matcha-grid-header-height-mobile, 48px);
-        padding-inline-start: var(--matcha-space-200, 16px);
-        padding-inline-end:   var(--matcha-space-200, 16px);
-        // Mobile remove radius — header full-width edge-to-edge.
-        border-end-start-radius: 0;
-        border-end-end-radius:   0;
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-header.scss
+//
+// Lib component canônico — 1:1 Figma DSV3 `matcha/header` (nodeId 15892:157).
+// Element selector `matcha-header { ... }`, 2 slots (left/right).
+//
+// Para o page-header legacy (`.matcha-header__*` usado pela app design-system),
+// ver `app-page-header.scss`.
+// =============================================================================
+
+@mixin matcha-header-theme($theme) {
+
+    matcha-header {
+        background: var(--matcha-color-surface-card);
+        // Border uses interaction/disabled-border (1:1 Figma matcha/header 15892:157):
+        // dark = rgba(232,234,237,0.38); light = #c8d2ca. Semanticamente atípico —
+        // o token canônico de "divisor de chrome" seria surface/border, mas Figma
+        // bind explicitamente este. Trocar de volta se for revertido lá.
+        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-interaction-disabled-border);
+        color: var(--matcha-color-text-primary);
+    }
+}
+
+// ── Layout — matcha-header lib component ────────────────────────────────────
+
+matcha-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    // Figma DSV3: h 56, padding 8/24/8/16 (asimétrico: l 16 / r 24).
+    // Logical props pra RTL: inline-start = left (16), inline-end = right (24).
+    block-size: var(--matcha-header-height, 56px);
+    padding-block: var(--matcha-space-100, 8px);
+    padding-inline-start: var(--matcha-space-200, 16px);
+    padding-inline-end: var(--matcha-space-300, 24px);
+    gap: var(--matcha-space-200, 16px);
+    // Bottom corners arredondados (header sentado no topo, oposto do footer).
+    border-end-start-radius: var(--matcha-radius-lg, 8px);
+    border-end-end-radius:   var(--matcha-radius-lg, 8px);
+    // Figma DSV3 description: "Elevation: level-1" — eleva o header sobre o body.
+    box-shadow: var(--matcha-shadow-1);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-label-sm, 13px);
+    line-height: var(--matcha-leading-label-sm, 19px);
+
+    // ── Slots ──
+    .matcha-header__slot {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+        // min-width:0 permite que filhos com overflow:hidden+ellipsis encolham.
+        // Não usamos overflow:hidden no slot pra não clipar tooltips/menus
+        // posicionados inline a partir de filhos.
+        min-width: 0;
+
+        // Hide vazio — slot só renderiza com conteúdo.
+        &:not(:has(*)) {
+            display: none;
+        }
+    }
+
+    .matcha-header__slot--left  {
+        flex: 1 1 auto;
+        justify-content: flex-start;
+    }
+
+    .matcha-header__slot--right {
+        flex: 0 0 auto;
+        justify-content: flex-end;
+    }
+
+    // Hamburguer — não encolhe, participa do gap do slot--left (space-200).
+    .matcha-header__menu-trigger {
+        flex-shrink: 0;
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──────────────────────────────────
+// Border hairline (12% opacidade) pode sumir em high-contrast.
+// CanvasText é o token system semantic — sempre visível.
+@media (forced-colors: active) {
+    matcha-header {
+        border-bottom: 1px solid CanvasText;
+    }
+}
+
+// ── Reduced motion (defensivo) ──────────────────────────────────────────────
+// Hoje header não tem transitions, mas cobre futuro (sticky shadow, hide-on-scroll).
+@media (prefers-reduced-motion: reduce) {
+    matcha-header {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+// ── Print ──────────────────────────────────────────────────────────────────
+// Convenção DS: chrome (header/footer) some em impressão.
+@media print {
+    matcha-header {
+        display: none;
+    }
+}
+
+// ── Menu trigger — visível apenas em tablet/mobile (< 1024px) ───────────────
+// Em desktop o nav-rail/panel fica sempre visível; hamburguer não é necessário.
+// Consumer pode sobreescrever com [showMenuTrigger]="false" se quiser esconder
+// em breakpoints diferentes.
+@media (min-width: 1024px) {
+    matcha-header .matcha-header__menu-trigger {
+        display: none !important;
+    }
+}
+
+// ── Responsive — matcha-header (Mobile, xs) ──
+@include media-breakpoint('xs') {
+    matcha-header {
+        // Figma DSV3 Mobile (node 15892:124 — matcha/header Estilo=Mobile):
+        // h 48 (token --matcha-grid-header-height-mobile, NÃO 56 — versão
+        // compactada pra reduzir chrome em viewport pequeno),
+        // padding 8/16/8/16 (simétrico), gap 16.
+        block-size: var(--matcha-grid-header-height-mobile, 48px);
+        padding-inline-start: var(--matcha-space-200, 16px);
+        padding-inline-end:   var(--matcha-space-200, 16px);
+        // Mobile remove radius — header full-width edge-to-edge.
+        border-end-start-radius: 0;
+        border-end-end-radius:   0;
+    }
+}