@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-breadcrumb.scss

@@ -1,231 +1,231 @@
-@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;
-  }
-}
-
+@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;
+  }
+}
+