@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Header/Header.module.scss

@@ -1,25 +1,33 @@
-@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;
 
 // ============================================
 // Header Root
 // ============================================
 
 .header {
+  @include navigation.properties;
   // Container query context: children respond to header width, not viewport
   @include container(fui-header);
 
   display: flex;
   align-items: center;
+  // A header always spans its container. Without this it collapses to
+  // min-content when placed inside a flex/grid parent that centers its items.
+  width: 100%;
   height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
   min-height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  background-color: var(--fui-app-main-bg, var(--fui-main-bg, #{$fui-main-bg}));
   padding: 0 var(--fui-space-4, $fui-space-4);
   z-index: var(--fui-header-z-index, $fui-header-z-index);
 }
 
 .fixed {
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -31,7 +39,7 @@
 }
 
 .elevatedOnScroll {
-  border-bottom: var(--fui-space-px, $fui-space-px) solid transparent;
+  border-bottom: var(--fui-stroke-hairline, 1px) solid transparent;
   transition: border-color var(--fui-transition-fast, $fui-transition-fast);
 }
 
@@ -126,18 +134,15 @@
 .navItem {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
+  @include action.base;
+  @include action.size("md");
 
   display: flex;
   align-items: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
   white-space: nowrap;
-  // Horizontal header chrome (button-sized), not a vertical list-nav row —
-  // keeps the larger button-height target rather than --fui-sidebar-item-height.
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -150,19 +155,17 @@
 }
 
 .navItemActive {
-  // Match sidebar active state: secondary surface + primary text
+  // Persistent navigation selection shares the same neutral role as Sidebar
+  // and Tabs. Do not use --fui-bg-active here: that token is for the brief
+  // pointer-down state.
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
 
-  &:hover {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary) !important;
-    color: var(--fui-text-primary, $fui-text-primary) !important;
-  }
-
-  &:active {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary) !important;
-    color: var(--fui-text-primary, $fui-text-primary) !important;
+  &.navItem:hover,
+  &.navItem:active {
+    background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 }
 
@@ -194,10 +197,9 @@
 }
 
 .navMenuPopup {
-  @include surface-elevated;
+  @include popup.container;
 
-  min-width: 10rem;
-  padding: var(--fui-space-1, $fui-space-1);
+  min-width: layout.measure("field-minimum");
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   opacity: 0;
@@ -221,12 +223,11 @@
 
 .navMenuItem {
   @include button-reset;
-  @include text-base;
+  @include popup.row;
 
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -235,19 +236,18 @@
   outline: none;
 
   &[data-highlighted] {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
+    @include popup.highlight-state;
   }
 }
 
 .navMenuItemActive {
-  // Match active nav item treatment in both light and dark themes
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  // Match the persistent navigation treatment in both light and dark themes.
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &[data-highlighted] {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+    background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
@@ -274,6 +274,8 @@
 
 .search {
   display: none;
+  background-color: var(--fui-header-search-bg, var(--fui-bg-subtle, #{$fui-bg-subtle}));
+  border-radius: var(--fui-button-radius, var(--fui-radius-lg, #{$fui-radius-lg}));
 
   // Show search when header has enough space
   @include container-min($fui-breakpoint-md, fui-header) {
@@ -304,12 +306,12 @@
 .trigger {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("lg");
 
   display: flex;
   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;
@@ -319,8 +321,7 @@
   }
 
   svg {
-    width: var(--fui-icon-xl, $fui-icon-xl);
-    height: var(--fui-icon-xl, $fui-icon-xl);
+    @include action.glyph("lg");
   }
 }
 
@@ -341,7 +342,7 @@
   inset: 0;
   z-index: 98;
   background: var(--fui-backdrop, $fui-backdrop);
-  animation: mobileNavFadeIn var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: mobileNavFadeIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .mobileNavDrawer {
@@ -352,10 +353,10 @@
   z-index: 99;
   width: min(320px, 85vw);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  border-left: 1px solid var(--fui-border, $fui-border);
+  border-left: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   display: flex;
   flex-direction: column;
-  animation: mobileNavSlideIn var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: mobileNavSlideIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .mobileNavHeader {
@@ -363,18 +364,18 @@
   align-items: center;
   justify-content: flex-end;
   padding: var(--fui-space-3, $fui-space-3) 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);
 }
 
 .mobileNavClose {
   @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);
 
@@ -392,12 +393,11 @@
 
 .mobileNavLink {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -411,7 +411,7 @@
 
 .mobileNavLinkActive {
   color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
 }
 
 .mobileNavActions {
@@ -422,13 +422,21 @@
 }
 
 @keyframes mobileNavFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes mobileNavSlideIn {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -452,7 +460,7 @@
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   color: var(--fui-text-primary, $fui-text-primary);
-  border: 2px solid var(--fui-color-accent, $fui-color-accent);
+  border: var(--fui-stroke-default, 2px) solid var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   text-decoration: none;
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);