@justin_evo/evo-ui 1.0.2 → 1.2.0

package/src/css/nav.module.scss

@@ -56,7 +56,7 @@
   color: $color-text-secondary;
   background: transparent;
   border: none;
-  border-radius: $radius-sm;
+  border-radius: $evo-border-radius;
   cursor: pointer;
   text-align: left;
   text-decoration: none;
@@ -70,6 +70,11 @@
   &:hover {
     background-color: $color-surface-hover;
     color: $color-text-primary;
+
+    .navIcon {
+      color: $color-text-primary;
+      transform: translateX(1px);
+    }
   }
 
   &:focus-visible {
@@ -80,16 +85,10 @@
   &.active {
     background-color: $evo-primary-soft;
     color: $evo-primary-color;
+    font-weight: 600;
 
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 25%;
-      bottom: 25%;
-      width: 2px;
-      border-radius: $radius-full;
-      background: $evo-primary-color;
+    .navIcon {
+      color: $evo-primary-color;
     }
   }
 
@@ -121,6 +120,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  clip-path: inset(0 0 0 0);
+  transition:
+    opacity 200ms ease,
+    transform 220ms ease,
+    clip-path 260ms ease;
+}
+
+// When the rail expands, labels reveal top-to-bottom (per-row delay) and
+// left-to-right (clip-path sweep). Only opacity/transform/clip-path transition,
+// so the delay is invisible in the steady expanded state.
+@for $i from 1 through 12 {
+  .navList .navLi:nth-child(#{$i}) .navLabel {
+    transition-delay: #{($i - 1) * 14}ms;
+  }
 }
 
 .navIcon {
@@ -132,6 +145,15 @@
   height: 1.125rem;
   font-size: 1rem;
   line-height: 1;
+  color: $color-text-muted;
+  transition:
+    color $transition-fast,
+    transform $transition-fast;
+
+  svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
 }
 
 .chevron {
@@ -161,18 +183,96 @@
 
 .navGroup {
   list-style: none;
-  margin: 0.5rem 0 0;
+  margin: 0.85rem 0 0;
   padding: 0;
+
+  &:first-child {
+    margin-top: 0.25rem;
+  }
 }
 
 .navGroupLabel {
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
   font-size: $text-xs;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: $color-text-muted;
-  padding: 0.5rem 0.75rem 0.25rem;
+  padding: 0.4rem 0.75rem 0.3rem;
+}
+
+.navGroupLabelText {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Collapsible group heading — same look as the static label, plus button chrome.
+.navGroupToggle {
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-text-secondary;
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+
+  .chevron {
+    margin-left: 0.4rem;
+    color: $color-text-muted;
+  }
+}
+
+.navGroupCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.35rem;
+  margin-left: 0.4rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: $color-text-secondary;
+  background: $color-surface-hover;
+  border-radius: $radius-full;
+}
+
+// Accordion panel — animates height via grid-template-rows (0fr <-> 1fr), no
+// JS measuring. The inner list must clip its overflow for the collapse to read.
+.navGroupPanel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &[data-open='false'] {
+    grid-template-rows: 0fr;
+  }
+
+  > .navList {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  // Rows inside the clipped panel draw their focus ring INSET, so the
+  // overflow:hidden needed for the height animation can't clip it.
+  .navRow:focus-visible {
+    outline-offset: -2px;
+  }
 }
 
 // ---------- Skeleton ----------
@@ -321,10 +421,65 @@
   to   { opacity: 1; }
 }
 
+// ---------- Collapsed (icon-only rail) ----------
+
+.navCollapsed {
+  .navRow,
+  .navQuickAction {
+    justify-content: center;
+    gap: 0;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .navLabel {
+    flex: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+    clip-path: inset(0 100% 0 0);
+  }
+
+  // Group heading text stays in the a11y tree (it names the heading) but is
+  // visually hidden; the decorative count chip is removed entirely.
+  .navGroupLabelText {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .navGroupCount {
+    display: none;
+  }
+
+  .navGroupLabel {
+    min-height: 0.5rem;
+    padding: 0.25rem 0;
+  }
+
+  // Accordion is meaningless in rail mode — force panels open.
+  .navGroupPanel {
+    grid-template-rows: 1fr;
+  }
+}
+
+// Collapsing fades labels out together — outrank the per-row expand stagger.
+.navCollapsed .navList .navLi .navLabel {
+  transition-delay: 0ms;
+}
+
 // ---------- Reduced motion ----------
 
 @media (prefers-reduced-motion: reduce) {
   .navRow,
+  .navRow .navIcon,
+  .navLabel,
+  .navGroupPanel,
+  .navGroupToggle,
   .navQuickAction,
   .chevron,
   .navTrigger,

package/src/css/topnav.module.scss

@@ -20,6 +20,16 @@
   to   { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes topNavRise {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes topNavFade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 // ---------------------------------------------------------------------------
 // Root
 // ---------------------------------------------------------------------------
@@ -159,6 +169,61 @@
   flex-shrink: 0;
 }
 
+// ---------------------------------------------------------------------------
+// Search trigger (EvoTopNav.Search) — presentational ⌘K affordance
+// ---------------------------------------------------------------------------
+
+.topNavSearch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2rem;
+  min-width: 12rem;
+  padding: 0 0.625rem;
+  font-family: inherit;
+  font-size: $text-sm;
+  color: $color-text-muted;
+  background-color: $color-surface-sunken;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition:
+    background-color $transition-fast,
+    border-color $transition-fast,
+    color $transition-fast;
+
+  &:hover {
+    background-color: $color-surface-hover;
+    color: $color-text-secondary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.topNavSearchIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.topNavSearchText {
+  flex: 1;
+  text-align: left;
+}
+
+.topNavSearchKbd {
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: $text-xs;
+  color: $color-text-muted;
+  background-color: $color-surface;
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  padding: 0.0625rem 0.3125rem;
+}
+
 // ---------------------------------------------------------------------------
 // Toggle (hamburger) — hidden above the collapse breakpoint
 // ---------------------------------------------------------------------------
@@ -360,6 +425,17 @@
     z-index: 55;
     animation: topNavOverlayFadeIn 180ms ease;
   }
+
+  .topNavSearch {
+    min-width: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    justify-content: center;
+    padding: 0;
+
+    .topNavSearchText,
+    .topNavSearchKbd { display: none; }
+  }
 }
 
 // Above the breakpoint, drawer-specific bits never render visually.
@@ -371,6 +447,85 @@
   }
 }
 
+// ---------------------------------------------------------------------------
+// Entrance animation (opt-in via `entrance` prop → data-entrance attribute)
+// ---------------------------------------------------------------------------
+
+.topNav[data-entrance='rise'] .topNavBrand,
+.topNav[data-entrance='rise'] .topNavMenu > li,
+.topNav[data-entrance='rise'] .topNavSearch,
+.topNav[data-entrance='rise'] .topNavActions {
+  animation: topNavRise 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.topNav[data-entrance='fade'] .topNavBrand,
+.topNav[data-entrance='fade'] .topNavMenu > li,
+.topNav[data-entrance='fade'] .topNavSearch,
+.topNav[data-entrance='fade'] .topNavActions {
+  animation: topNavFade 440ms ease both;
+}
+
+// Shared left-to-right stagger (applies to both variants).
+.topNav[data-entrance] .topNavBrand { animation-delay: 40ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(1) { animation-delay: 110ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(2) { animation-delay: 160ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(3) { animation-delay: 210ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(4) { animation-delay: 260ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(n + 5) { animation-delay: 300ms; }
+.topNav[data-entrance] .topNavSearch { animation-delay: 320ms; }
+.topNav[data-entrance] .topNavActions { animation-delay: 360ms; }
+
+// ---------------------------------------------------------------------------
+// Sticky + scroll-aware behavior (opt-in via `sticky` / `scrollBehavior`)
+// ---------------------------------------------------------------------------
+
+.topNavSticky {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+.topNav[data-scroll] {
+  transition:
+    background-color $transition-fast,
+    box-shadow $transition-fast,
+    transform 220ms ease;
+
+  .topNavInner { transition: min-height $transition-fast; }
+}
+
+.topNav[data-scrolled] {
+  background-color: $color-surface; // fallback for browsers without color-mix()
+  background-color: color-mix(in srgb, $color-surface 85%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: $shadow-md;
+}
+
+.topNav[data-scroll='shrink'][data-scrolled] .topNavInner {
+  min-height: 2.75rem;
+}
+
+.topNav[data-scroll='hide'] { will-change: transform; }
+.topNav[data-scroll='hide'][data-hidden] { transform: translateY(-100%); }
+
+// ---------------------------------------------------------------------------
+// Scroll-progress line (opt-in via `showProgress`)
+// ---------------------------------------------------------------------------
+
+.topNavProgress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: $evo-primary-color;
+  transform: scaleX(var(--evo-topnav-progress, 0));
+  transform-origin: left center;
+  pointer-events: none;
+  z-index: 31;
+}
+
 // ---------------------------------------------------------------------------
 // Reduced motion — kill animations
 // ---------------------------------------------------------------------------
@@ -385,6 +540,16 @@
   .topNavDropdownChevron {
     transition: none;
   }
+
+  .topNavBrand,
+  .topNavMenu > li,
+  .topNavSearch,
+  .topNavActions {
+    animation: none !important;
+  }
+
+  &[data-scroll='hide'][data-hidden] { transition: none; }
+  .topNavProgress { transition: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -393,4 +558,11 @@
   .topNavBackdrop {
     animation: none;
   }
+
+  .topNav[data-entrance] .topNavBrand,
+  .topNav[data-entrance] .topNavMenu > li,
+  .topNav[data-entrance] .topNavSearch,
+  .topNav[data-entrance] .topNavActions {
+    animation: none !important;
+  }
 }