@usefragments/ui 1.5.4 → 1.7.0

package/src/components/NavigationMenu/NavigationMenu.contract.json

@@ -1,18 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "NavigationMenu",
-  "description": "Rich navigation menu for site headers with dropdown content panels, animated viewport transitions, and automatic mobile drawer. Supports structured links with titles, descriptions, and icons.",
+  "description": "Site navigation whose dropdowns become a drawer on small screens.",
   "category": "navigation",
-  "tags": [
-    "navigation",
-    "menu",
-    "header",
-    "dropdown",
-    "navbar",
-    "mobile",
-    "responsive",
-    "drawer"
-  ],
+  "tags": ["navigation", "menu", "header", "dropdown", "navbar", "mobile", "responsive", "drawer"],
   "status": "stable",
   "sourcePath": "src/components/NavigationMenu/index.tsx",
   "exportName": "NavigationMenu",
@@ -24,7 +15,8 @@
     "orientation: horizontal|vertical (default: horizontal)",
     "delayDuration: number (default: 200)",
     "skipDelayDuration: number (default: 300)",
-    "icons: object"
+    "icons: object",
+    "mobileBreakpoint: md|lg (default: md)"
   ],
   "props": {
     "children": {
@@ -53,10 +45,7 @@
       "description": "'horizontal' | 'vertical'",
       "default": "horizontal",
       "required": false,
-      "values": [
-        "horizontal",
-        "vertical"
-      ]
+      "values": ["horizontal", "vertical"]
     },
     "delayDuration": {
       "type": "number",
@@ -74,30 +63,37 @@
       "type": "object",
       "description": "Optional icon overrides for triggerChevron, mobileMenu, mobileClose, and drawerClose controls",
       "required": false
+    },
+    "mobileBreakpoint": {
+      "type": "enum",
+      "description": "Viewport breakpoint below which the mobile drawer replaces desktop navigation",
+      "default": "md",
+      "required": false,
+      "values": ["md", "lg"]
     }
   },
   "usage": {
     "when": [
-      "Site-level header navigation with rich dropdown content",
-      "Navigation with titles, descriptions, and icons in dropdowns",
-      "Responsive navigation that converts to a mobile drawer automatically",
-      "Multi-section navigation requiring animated viewport transitions"
+      "Header navigation with more than links",
+      "Dropdowns carrying titles, descriptions, or icons",
+      "Navigation that must survive a phone screen",
+      "Several sections that animate between each other"
     ],
     "whenNot": [
-      "Simple flat navigation without dropdowns (use Header.Nav)",
-      "Application menus with actions like cut/paste (use Menu)",
-      "Sidebar navigation (use Sidebar)",
-      "Breadcrumb trail navigation (use Breadcrumbs)"
+      "Flat links with no dropdowns (use Header.Nav)",
+      "Application actions like cut and paste (use Menu)",
+      "Persistent side navigation (use Sidebar)",
+      "Showing where the user already is (use Breadcrumbs)"
     ],
     "guidelines": [
-      "Place inside Header component for site-level navigation",
-      "Use NavigationMenu.Viewport for animated content panel transitions",
-      "Use NavigationMenu.MobileContent to add extra sections to the mobile drawer",
-      "Use structured links (title + description) for rich dropdown content",
-      "Use simple NavigationMenu.Link for items without dropdown content",
-      "NavigationMenu.Link asChild composes click handlers and respects event.preventDefault()",
-      "Triggers open on hover (desktop) with configurable delay",
-      "Use the icons prop to replace trigger chevrons and mobile drawer controls with icons from any package"
+      "Place it inside Header for site-level navigation",
+      "Add Viewport to animate between panels",
+      "Use MobileContent for sections that only make sense in the drawer",
+      "Title plus description for rich panels, plain Link for the rest",
+      "asChild on Link composes your handler and honours preventDefault()",
+      "Desktop triggers open on hover after a configurable delay",
+      "Point icons at your own icon package to replace the chevrons",
+      "Set mobileBreakpoint=\"lg\" when the shell drops its sidebar below 1024px"
     ],
     "accessibility": [
       "Uses disclosure pattern (not menu role) per W3C guidance",
@@ -110,27 +106,27 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Two trigger items with dropdown content and one direct link",
+      "description": "Two dropdowns beside one plain link.",
       "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"products\">\n      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics and KPIs.\" />\n        <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate your workflows.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item value=\"resources\">\n      <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"Comprehensive API reference.\" />\n        <NavigationMenu.Link href=\"/blog\" title=\"Blog\" description=\"Latest news and updates.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
     },
     {
       "name": "With Rich Content",
-      "description": "Grid layout with icons, titles, and descriptions",
+      "description": "A grid of icons, titles, and descriptions.",
       "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"platform\">\n      <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>\n          <NavigationMenu.Link\n            href=\"/dashboard\"\n            title=\"Dashboard\"\n            description=\"Overview of your project metrics.\"\n          />\n          <NavigationMenu.Link\n            href=\"/analytics\"\n            title=\"Analytics\"\n            description=\"Deep dive into your data.\"\n          />\n          <NavigationMenu.Link\n            href=\"/reports\"\n            title=\"Reports\"\n            description=\"Generate custom reports.\"\n          />\n          <NavigationMenu.Link\n            href=\"/settings\"\n            title=\"Settings\"\n            description=\"Configure your workspace.\"\n          />\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
     },
     {
       "name": "With Simple Links",
-      "description": "Mix of triggers with simple link lists and plain links",
+      "description": "Link lists where descriptions would be noise.",
       "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"company\">\n      <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '160px' }}>\n          <NavigationMenu.Link href=\"/about\">About</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/careers\">Careers</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/contact\">Contact</NavigationMenu.Link>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/blog\">Blog</NavigationMenu.Link>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/docs\">Docs</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
     },
     {
       "name": "With Featured Card",
-      "description": "Highlighted featured item alongside regular links",
+      "description": "One promoted item leads the panel.",
       "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"learn\">\n      <NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', padding: '8px', minWidth: '420px' }}>\n          <NavigationMenu.Link\n            href=\"/quickstart\"\n            title=\"Quick Start\"\n            description=\"Get up and running in 5 minutes with our getting started guide.\"\n            featured\n          />\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n            <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"API reference and guides.\" />\n            <NavigationMenu.Link href=\"/examples\" title=\"Examples\" description=\"Browse example projects.\" />\n          </div>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
     },
     {
       "name": "Vertical",
-      "description": "Vertical orientation with content panels to the right",
+      "description": "Panels open to the side instead of below.",
       "code": "<div style={{ display: 'flex' }}>\n  <NavigationMenu orientation=\"vertical\">\n    <NavigationMenu.List>\n      <NavigationMenu.Item value=\"overview\">\n        <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/intro\" title=\"Introduction\" description=\"Learn the basics.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item value=\"guides\">\n        <NavigationMenu.Trigger>Guides</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/install\" title=\"Installation\" description=\"Get started quickly.\" />\n            <NavigationMenu.Link href=\"/config\" title=\"Configuration\" description=\"Customize your setup.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n    </NavigationMenu.List>\n    <NavigationMenu.Viewport />\n  </NavigationMenu>\n</div>"
     }
   ],
@@ -163,15 +159,12 @@
       "orientation: horizontal | vertical — layout direction",
       "delayDuration: number — hover open delay (default: 200ms)",
       "icons: { triggerChevron?, mobileMenu?, mobileClose?, drawerClose? } — custom internal control icons",
+      "mobileBreakpoint: md | lg — mobile drawer breakpoint (default: md)",
       "NavigationMenu.Link: title + description + icon for structured links, or children for simple links",
       "NavigationMenu.Link asChild: composes child and menu click handlers (preventDefault keeps menu open)",
       "NavigationMenu.MobileContent: slot for extra mobile-only sections"
     ],
-    "a11yRules": [
-      "A11Y_DISCLOSURE_PATTERN",
-      "A11Y_KEYBOARD_NAV",
-      "A11Y_FOCUS_TRAP"
-    ]
+    "a11yRules": ["A11Y_DISCLOSURE_PATTERN", "A11Y_KEYBOARD_NAV", "A11Y_FOCUS_TRAP"]
   },
   "ai": {
     "compositionPattern": "compound",
@@ -187,9 +180,7 @@
       "MobileContent",
       "MobileSection"
     ],
-    "requiredChildren": [
-      "List"
-    ],
+    "requiredChildren": ["List"],
     "commonPatterns": [
       "<NavigationMenu><NavigationMenu.List><NavigationMenu.Item value=\"docs\"><NavigationMenu.Trigger>Docs</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href=\"/guides\" title=\"Guides\" description=\"Learn the basics\" /></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu>"
     ]

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

@@ -1,17 +1,40 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@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;
 
 // ============================================
 // Root
 // ============================================
 
 .root {
-  // Container query context: children respond to nav menu width, not viewport
-  @include container(fui-navmenu);
+  @include navigation.properties;
 
+  // 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 {
@@ -51,16 +74,14 @@
 .trigger {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
+  @include action.base;
+  @include action.size("md");
 
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
   cursor: pointer;
 
   &:hover {
@@ -72,7 +93,7 @@
     background-color: var(--fui-bg-active, $fui-bg-active);
   }
 
-  &[data-state='open'] {
+  &[data-state="open"] {
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
@@ -81,7 +102,7 @@
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
   flex-shrink: 0;
 
-  [data-state='open'] > & {
+  [data-state="open"] > & {
     transform: rotate(180deg);
   }
 }
@@ -93,32 +114,32 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--fui-stroke-hairline, 1px);
   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;
+  &[data-motion="from-start"] {
+    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;
+  &[data-motion="from-end"] {
+    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;
+  &[data-motion="to-start"] {
+    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;
+  &[data-motion="to-end"] {
+    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;
@@ -129,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;
@@ -144,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})));
   }
 }
 
@@ -155,7 +176,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX($fui-anim-offset-md);
+    transform: translateX(var(--fui-anim-offset-md, #{$fui-anim-offset-md}));
   }
 }
 
@@ -164,13 +185,13 @@
 // ============================================
 
 .link {
-  @include popup-item;
+  @include popup.row;
 
   text-decoration: none;
   white-space: nowrap;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   // Links are real tab stops, so keep the focus ring on top of the highlight.
@@ -197,7 +218,7 @@
   min-height: auto;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 }
 
@@ -220,24 +241,23 @@
 }
 
 .linkTitle {
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  @include typography.role("ui-standard");
+
   color: var(--fui-text-primary, $fui-text-primary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
 .linkDescription {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include typography.role("caption");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
 .linkFeatured {
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
     border-color: var(--fui-border-strong, $fui-border-strong);
   }
 }
@@ -249,7 +269,7 @@
 .indicator {
   position: absolute;
   bottom: 0;
-  height: 2px;
+  height: var(--fui-stroke-default, 2px);
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   transition:
@@ -263,24 +283,22 @@
 // ============================================
 
 .viewport {
-  @include surface-elevated;
+  @include popup.container;
 
   position: absolute;
   top: calc(100% + var(--fui-space-1, #{$fui-space-1}));
   left: var(--fui-navmenu-viewport-left, 0);
   overflow: hidden;
-  padding: var(--fui-space-1, $fui-space-1);
   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);
 
   width: var(--fui-navmenu-viewport-width);
   height: var(--fui-navmenu-viewport-height);
-  transition:
-    opacity var(--fui-transition-fast, $fui-transition-fast);
+  transition: opacity var(--fui-transition-fast, $fui-transition-fast);
 
   // Hidden when no item is open
-  &[data-state='closed'] {
+  &[data-state="closed"] {
     opacity: 0;
     pointer-events: none;
     // Collapse to avoid layout space
@@ -289,7 +307,7 @@
     overflow: hidden;
   }
 
-  &[data-state='open'] {
+  &[data-state="open"] {
     opacity: 1;
   }
 
@@ -306,23 +324,24 @@
 .hamburger {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("lg");
 
   display: none;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-lg, $fui-touch-lg);
-  height: var(--fui-touch-lg, $fui-touch-lg);
   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);
   }
 
   svg {
-    width: var(--fui-icon-xl, $fui-icon-xl);
-    height: var(--fui-icon-xl, $fui-icon-xl);
+    @include action.glyph("lg");
   }
 
   // Keep viewport visibility in sync with JS mobile mode.
@@ -340,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 {
@@ -354,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);
@@ -365,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 {
@@ -373,21 +393,23 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--fui-space-4, $fui-space-4);
-  border-bottom: 1px solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }
 
 .drawerClose {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
   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);
@@ -396,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 {
@@ -408,41 +435,54 @@
 
 .drawerLink {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   display: flex;
   align-items: center;
+  min-block-size: var(--fui-navigation-mobile-row-track, var(--fui-navigation-row-track));
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
-  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
+  }
+}
+
+.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 section-label-text;
+  @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 {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   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%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
@@ -455,7 +495,7 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
   flex-shrink: 0;
 
-  &[data-open='true'] {
+  &[data-open="true"] {
     transform: rotate(90deg);
   }
 }
@@ -469,18 +509,30 @@
 // ============================================
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 // ============================================