@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-breadcrumb.scss

@@ -1,126 +1,231 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-breadcrumb.scss — Navigation breadcrumb trail
-// Aligned with Figma matcha/breadcrumb/item:
-//   Estado(3: Link, Atual, Disabled) × Ícone?(2: Yes, No)
-//   Separator: matcha/icon/chevron (Right) between items
-// =============================================================================
-
-@mixin matcha-breadcrumb-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  matcha-breadcrumb {
-    // ── Link items ──
-    .breadcrumb-item-link {
-      background: var(--matcha-color-surface-2, #{getSurfaceAlpha($theme)});
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-      &:hover:not([disabled]):not(.disabled) {
-        .breadcrumb-state {
-          opacity: var(--matcha-state-hover, 0.08);
-        }
-      }
-
-      &:active:not([disabled]):not(.disabled) {
-        .breadcrumb-state {
-          opacity: var(--matcha-state-active, 0.12);
-        }
-      }
-
-      &: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);
-      }
-    }
-
-    // ── Current page ──
-    .breadcrumb-item-current {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    // ── Separator ──
-    .breadcrumb-separator {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
-
-    // ── Disabled ──
-    .breadcrumb-item-link.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-
-  // ── Breadcrumb item (link) ──
-  .breadcrumb-item-link {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-150, 12px);
-    border: none;
-    border-radius: var(--matcha-radius-lg, 8px);
-    cursor: pointer;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-md, 14px);
-    font-weight: var(--matcha-weight-regular, 400);
-    line-height: var(--matcha-leading-body-md, 20px);
-    white-space: nowrap;
-    text-decoration: none;
-    position: relative;
-    overflow: hidden;
-
-    // State layer
-    .breadcrumb-state {
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-
-    matcha-icon {
-      flex-shrink: 0;
-    }
-  }
-
-  // ── Current page ──
-  .breadcrumb-item-current {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-150, 12px) 0;
-    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);
-    white-space: nowrap;
-
-    matcha-icon {
-      flex-shrink: 0;
-    }
-  }
-
-  // ── Separator ──
-  .breadcrumb-separator {
-    flex-shrink: 0;
-    width: var(--matcha-icon-size-sm, 16px);
-    height: var(--matcha-icon-size-sm, 16px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  matcha-breadcrumb .breadcrumb-state {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-breadcrumb.scss — Navigation breadcrumb trail (Figma DSV3 15831:35)
+//
+// Estado(3: Link, Atual, Disabled) × Ícone?(2: Yes, No) = 6 variantes
+//   Link/Disabled — bg surface-2, p 12, radius lg, text/secondary, Regular 14/20
+//   Atual — sem bg, py 12 (sem px), text/primary, Medium 14/20
+//   Separador — matcha/icon/chevron variant=right entre itens
+// =============================================================================
+
+@mixin matcha-breadcrumb-theme($theme) {
+
+  matcha-breadcrumb {
+    // ── Link items (clicáveis) ──
+    .breadcrumb-item-link {
+      // Figma DSV3: bg = matcha/color/elevation/surface-2 (canônico)
+      background: var(--matcha-color-elevation-surface-2);
+      color: var(--matcha-color-text-secondary);
+
+      &:hover:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-hover, 0.08);
+        }
+      }
+
+      &:active:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-active, 0.12);
+        }
+      }
+
+      &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      }
+    }
+
+    // ── Página atual ──
+    .breadcrumb-item-current {
+      color: var(--matcha-color-text-primary);
+    }
+
+    // ── Separator (chevron) ──
+    .breadcrumb-separator {
+      color: var(--matcha-color-icon-default);
+    }
+
+    // ── Disabled (real disabled — não confundir com ellipsis) ──
+    .breadcrumb-item-link--disabled {
+      opacity: var(--matcha-opacity-disabled, 0.5);
+      pointer-events: none;
+    }
+
+    // ── Ellipsis (…) — visibilidade NORMAL (não é disabled).
+    //    Quando clicável (maxItems ativo), tem hover/focus state-layer normal.
+    //    Quando estático (--static), só muda cursor pra default.
+    .breadcrumb-ellipsis {
+      // Mantém color/bg do Link. Sem opacity reduzida.
+      color: var(--matcha-color-text-secondary);
+
+      &--static {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+matcha-breadcrumb {
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  .breadcrumb-li {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  // ── Item link (Link/Disabled/Ellipsis) ──
+  // Figma: pad 12, radius lg, gap 8 (com ícone) ou 0 (sem). gap controlado por
+  // `> matcha-icon + span` (presença do ícone como sibling).
+  .breadcrumb-item-link {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: var(--matcha-space-150, 12px);
+    border: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    cursor: pointer;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-md, 20px);
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    // Gap 8 só quando o ícone está presente (Figma: gap=0 sem ícone)
+    > matcha-icon + .breadcrumb-text {
+      margin-left: var(--matcha-space-100, 8px);
+    }
+
+    // State layer (hover/active overlay)
+    .breadcrumb-state {
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Página atual ──
+  // Figma: SEM bg, py 12 (sem px), Medium 500, gap 8/0 igual ao link.
+  .breadcrumb-item-current {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: var(--matcha-space-150, 12px) 0;
+    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);
+    box-sizing: border-box;
+
+    > matcha-icon + .breadcrumb-text {
+      margin-left: var(--matcha-space-100, 8px);
+    }
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Texto do item — single-line + truncate quando max-width está setado ──
+  .breadcrumb-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  // ── Separator ──
+  .breadcrumb-separator {
+    flex-shrink: 0;
+    width: var(--matcha-icon-size-sm, 16px);
+    height: var(--matcha-icon-size-sm, 16px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-breadcrumb .breadcrumb-state {
+    transition: none;
+  }
+}
+
+// ── Mobile responsive ───────────────────────────────────────────────────────
+// Em viewports estreitas, items longos sem maxWidth podem estourar. flex-wrap
+// nowrap + overflow-x evita quebra de linha; consumer deve usar maxItems pra
+// auto-truncar trail. Default sem max-width = nowrap horizontal (scroll se
+// container permite, senão clip).
+@media (max-width: 639px) {
+  matcha-breadcrumb .breadcrumb-list {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;          // Firefox
+    -ms-overflow-style: none;       // IE/Edge legacy
+    &::-webkit-scrollbar { display: none; }
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+  matcha-breadcrumb {
+    .breadcrumb-item-link {
+      background: Canvas !important;
+      color: LinkText !important;
+      border: 1px solid CanvasText;
+
+      &:hover, &:focus { color: ActiveText !important; }
+    }
+
+    .breadcrumb-item-current {
+      color: CanvasText !important;
+      background: transparent !important;
+    }
+
+    .breadcrumb-separator {
+      color: GrayText !important;
+    }
+
+    .breadcrumb-item-link:focus-visible {
+      outline: 2px solid CanvasText !important;
+    }
+  }
+}
+
+// ── Print ──
+// Breadcrumb é navigation chrome — some em impressão (página impressa não
+// precisa de "como cheguei aqui").
+@media print {
+  matcha-breadcrumb {
+    display: none !important;
+  }
+}
+

package/components/matcha-button-toggle.scss

@@ -47,7 +47,7 @@
                     button[matcha-button],
                     a[matcha-button] {
                         &:not([active]) {
-                            background: var(--matcha-color-surface, #{getSurface($theme)});
+                            background: var(--matcha-color-surface);
                             color: call(#{$colorFn}, $theme);
                             box-shadow: 0 0 0 0px inset;
 
@@ -251,7 +251,7 @@ matcha-button-toggle {
         button[matcha-button],
         a[matcha-button] {
             &:focus-visible:not([disabled]):not([disabled="true"]) {
-                outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+                outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
                 outline-offset: var(--matcha-state-focus-ring-offset, 2px);
             }
         }
@@ -299,6 +299,50 @@ matcha-button-toggle {
 }
 }
 
+// =============================================================================
+// 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: 2px;
+            }
+        }
+    }
+}
+
+// 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)