@usefragments/ui 1.6.0 → 2.0.0

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -1,7 +1,10 @@
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
 @use "../../recipes/navigation" as navigation;
+@use "../../recipes/overlay" as overlay;
 @use "../../recipes/popup" as popup;
 @use "../../recipes/typography" as typography;
 
@@ -11,12 +14,29 @@
 
 .root {
   @include navigation.properties;
-  // Container query context: children respond to nav menu width, not viewport
-  @include container(fui-navmenu);
 
+  // Do not set container-type here. Size containment makes width:auto resolve as
+  // if the element were empty, so when the desktop list is display:none the nav
+  // collapses to 0px in a header flex row and the hamburger overflows onto the
+  // next slot (search). Mobile/desktop visibility uses viewport breakpoints.
   position: relative;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+}
+
+.root[data-mobile] {
+  // JS owns the breakpoint so hosts can retire a persistent rail at `lg`
+  // without forking the canonical drawer. These selectors keep the rendered
+  // desktop and mobile controls in lockstep with that resolved mode.
+  .list,
+  .viewport {
+    display: none;
+  }
+
+  .hamburger {
+    display: flex;
+  }
 }
 
 .rootVertical {
@@ -33,8 +53,8 @@
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 
   // Use viewport breakpoint (matches useIsMobile in NavigationMenu.tsx).
   // Self container queries on a shrink-to-content nav root can incorrectly hide
@@ -96,32 +116,32 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-stroke-hairline, 1px);
+  gap: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
-  min-width: 180px;
+  min-width: layout.measure("menu-min");
 
   // Motion direction for directional slide
   &[data-motion="from-start"] {
-    animation: slideFromStart var(--fui-transition-normal, $fui-transition-normal) ease forwards;
+    animation: slideFromStart var(--fui-transition-normal, $fui-transition-normal) forwards;
   }
   &[data-motion="from-end"] {
-    animation: slideFromEnd var(--fui-transition-normal, $fui-transition-normal) ease forwards;
+    animation: slideFromEnd var(--fui-transition-normal, $fui-transition-normal) forwards;
   }
   &[data-motion="to-start"] {
-    animation: slideToStart var(--fui-transition-normal, $fui-transition-normal) ease forwards;
+    animation: slideToStart var(--fui-transition-normal, $fui-transition-normal) forwards;
   }
   &[data-motion="to-end"] {
-    animation: slideToEnd var(--fui-transition-normal, $fui-transition-normal) ease forwards;
+    animation: slideToEnd var(--fui-transition-normal, $fui-transition-normal) forwards;
   }
 }
 
 @keyframes slideFromStart {
   from {
     opacity: 0;
-    transform: translateX(calc(-1 * #{$fui-anim-offset-md}));
+    transform: translateX(calc(-1 * var(--fui-anim-offset-md, #{$fui-anim-offset-md})));
   }
   to {
     opacity: 1;
@@ -132,7 +152,7 @@
 @keyframes slideFromEnd {
   from {
     opacity: 0;
-    transform: translateX($fui-anim-offset-md);
+    transform: translateX(var(--fui-anim-offset-md, #{$fui-anim-offset-md}));
   }
   to {
     opacity: 1;
@@ -147,7 +167,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX(calc(-1 * #{$fui-anim-offset-md}));
+    transform: translateX(calc(-1 * var(--fui-anim-offset-md, #{$fui-anim-offset-md})));
   }
 }
 
@@ -158,7 +178,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX($fui-anim-offset-md);
+    transform: translateX(var(--fui-anim-offset-md, #{$fui-anim-offset-md}));
   }
 }
 
@@ -236,7 +256,7 @@
 
 .linkFeatured {
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 
   &:hover {
     @include popup.highlight-state;
@@ -251,7 +271,7 @@
 .indicator {
   position: absolute;
   bottom: 0;
-  height: var(--fui-stroke-default, 2px);
+  height: var(--fui-stroke-default, #{$fui-stroke-default});
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   transition:
@@ -273,10 +293,10 @@
   overflow: hidden;
   border-color: var(--fui-border-strong, $fui-border-strong);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 1);
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
 
-  width: var(--fui-navmenu-viewport-width);
-  height: var(--fui-navmenu-viewport-height);
+  width: var(--fui-navmenu-viewport-width, #{measurements.raw-space(0)});
+  height: var(--fui-navmenu-viewport-height, #{measurements.raw-space(0)});
   transition: opacity var(--fui-transition-fast, $fui-transition-fast);
 
   // Hidden when no item is open
@@ -335,36 +355,17 @@
 // ============================================
 
 .drawerBackdrop {
-  position: fixed;
-  inset: 0;
-  background: var(--fui-backdrop, $fui-backdrop);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 10);
-  animation: fadeIn var(--fui-transition-normal, $fui-transition-normal) ease;
+  @include overlay.backdrop;
+
+  animation: fadeIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
+// The mobile menu is the Drawer surface: same frame, width, layer and chrome.
+// The header stays pinned; ScrollArea in .drawerBody owns vertical scroll.
 .drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: min(320px, 85vw);
-  max-width: 380px;
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 11);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  animation: slideInLeft var(--fui-transition-normal, $fui-transition-normal) ease;
-
-  @media (min-width: 480px) {
-    width: min(380px, 85vw);
-  }
-}
+  @include overlay.side-panel("start");
 
-.drawerRight {
-  left: auto;
-  right: 0;
-  animation: slideInRight var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: slideInLeft var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .drawerHeader {
@@ -372,7 +373,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--fui-space-4, $fui-space-4);
-  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }
 
@@ -395,9 +397,14 @@
 }
 
 .drawerBody {
+  @include navigation.properties;
+
   flex: 1;
-  overflow-y: auto;
-  padding: var(--fui-space-2, $fui-space-2) 0;
+  // Flex item default min-height:auto prevents shrinking below content, which
+  // blocks ScrollArea from receiving a bounded height and scrolling.
+  min-height: 0;
+  // Match Sidebar.nav: outer gutter + row inset so links aren't flush to the edge.
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-navigation-gutter, #{navigation.gutter()});
 }
 
 .drawerNav {
@@ -408,24 +415,26 @@
 .drawerLink {
   @include button-reset;
   @include navigation.row;
+  @include navigation.link-states;
 
   display: flex;
   align-items: center;
   width: 100%;
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  text-decoration: none;
-  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+}
 
-  &:hover {
-    @include popup.highlight-state;
-  }
+.drawerLinkActive {
+  @include navigation.link-active;
 }
 
 .drawerSectionLabel {
   @include navigation.section-row;
 
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4)
-    var(--fui-space-1, $fui-space-1);
+  // Keep inline inset from navigation.section-row so labels align with .drawerLink.
+  // The previous shorthand padding used space-4 and made labels look more indented
+  // than their items (MobileContent links previously used popup-row geometry).
+  padding-block: var(--fui-space-3, $fui-space-3) var(--fui-space-1, $fui-space-1);
+  margin-block-start: var(--fui-space-2, $fui-space-2);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
 .drawerCollapsibleTrigger {
@@ -474,16 +483,7 @@
 
 @keyframes slideInLeft {
   from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
+    transform: translateX(overlay.side-panel-offscreen("start"));
   }
   to {
     transform: translateX(0);