@usefragments/ui 1.6.0 → 1.7.0

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

@@ -1,6 +1,7 @@
 @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/popup" as popup;
 @use "../../recipes/typography" as typography;
@@ -11,12 +12,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 {
@@ -101,27 +119,27 @@
   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 +150,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 +165,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 +176,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX($fui-anim-offset-md);
+    transform: translateX(var(--fui-anim-offset-md, #{$fui-anim-offset-md}));
   }
 }
 
@@ -315,6 +333,8 @@
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
   flex-shrink: 0;
+  width: var(--fui-navigation-mobile-target, var(--_fui-action-track));
+  height: var(--fui-navigation-mobile-target, var(--_fui-action-track));
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -339,7 +359,7 @@
   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;
+  animation: fadeIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .drawer {
@@ -353,8 +373,9 @@
   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;
+  // Keep the header pinned; ScrollArea in .drawerBody owns vertical scroll.
+  overflow: hidden;
+  animation: slideInLeft var(--fui-transition-normal, $fui-transition-normal);
 
   @media (min-width: 480px) {
     width: min(380px, 85vw);
@@ -364,7 +385,7 @@
 .drawerRight {
   left: auto;
   right: 0;
-  animation: slideInRight var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: slideInRight var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .drawerHeader {
@@ -387,6 +408,8 @@
   justify-content: center;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
+  width: var(--fui-navigation-mobile-target, var(--_fui-action-track));
+  height: var(--fui-navigation-mobile-target, var(--_fui-action-track));
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -395,9 +418,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);
 }
 
 .drawerNav {
@@ -411,6 +439,7 @@
 
   display: flex;
   align-items: center;
+  min-block-size: var(--fui-navigation-mobile-row-track, var(--fui-navigation-row-track));
   width: 100%;
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -421,11 +450,26 @@
   }
 }
 
+.drawerLinkActive {
+  color: var(--fui-text-primary, $fui-text-primary);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  background-color: var(--fui-control-selected-bg, $fui-bg-active);
+
+  &:hover {
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+}
+
 .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 {
@@ -434,6 +478,7 @@
 
   display: flex;
   align-items: center;
+  min-block-size: var(--fui-navigation-mobile-row-track, var(--fui-navigation-row-track));
   justify-content: space-between;
   width: 100%;
   color: var(--fui-text-primary, $fui-text-primary);