maverick-wave 3.3.1 → 3.4.0

package/src/scss/layout/_header.scss

@@ -109,9 +109,6 @@
 
     &.open {
       background: var(--mw-secondary-color);
-      position: fixed;
-      top: 14px;
-      right: 6%;
       z-index: z-index('header') + 10;
 
       &:hover {
@@ -165,56 +162,144 @@
   }
 }
 
-@mixin navbar-open-state {
+// Header bar height: 42px logo + 2 × spacing('3') padding + 1px border.
+// Overridable via --mw-header-height for projects with a taller bar.
+$_header-height: 59px;
+
+// Off-canvas drawer for the collapsed navbar (mobile only)
+@mixin navbar-off-canvas {
+  position: fixed;
+  top: 0;
+  right: 0;
+  --mw-navbar-drawer-width: 250px;
+  width: var(--mw-navbar-drawer-width);
+  height: 100dvh;
+  background: var(--mw-header-background);
+  border-left: 1px solid var(--mw-header-border);
+  box-shadow: -10px 0 30px var(--mw-shadow);
+  z-index: z-index('header') + 3;
+
+  transform: translateX(100%);
+  visibility: hidden;
+  transition:
+    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
+    visibility 0.3s;
+
+  .mw-navbar-list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: spacing('1');
+    height: 100%;
+    overflow-y: auto;
+    // Keeps a rubber-band scroll inside the panel from moving the page
+    overscroll-behavior: contain;
+    padding: calc(
+        var(--mw-header-height, #{$_header-height}) + #{spacing('6')} +
+          env(safe-area-inset-top)
+      )
+      spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom));
+  }
+
+  .mw-navbar-item {
+    width: 100%;
+    margin: spacing('0');
+    opacity: 0;
+    transform: translateX(12px);
+  }
+
+  .mw-navbar-link {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+    padding: spacing('3') spacing('4');
+    border-radius: radius('md');
+    font-size: font-size('md');
+    text-align: left;
+    color: var(--mw-header-text-color);
+
+    // The sliding underline is a hover affordance and has no place on touch
+    &::after {
+      display: none;
+    }
+
+    // Restated here: the plain color above already outranks the base
+    &:hover {
+      color: var(--mw-header-navbar-list-active-color);
+      background: var(--mw-primary-background);
+    }
+
+    &:active {
+      background: var(--mw-primary-background-hover);
+    }
+
+    // Last, so the current page keeps its look while being hovered
+    &.active {
+      color: var(--mw-header-navbar-list-active-color);
+      background: var(--mw-primary-background);
+      box-shadow: inset 3px 0 0 var(--mw-primary-color);
+      font-weight: font-weight('medium');
+    }
+  }
+
   &.open {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 80%;
-    max-width: 280px;
-    height: 100dvh;
-    background: var(--mw-header-background);
     transform: translateX(0);
-    transition: transform 0.3s ease;
-    z-index: z-index('header') + 3;
-    border-left: 1px solid var(--mw-header-border);
+    visibility: visible;
 
-    .mw-navbar-list {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: spacing('0');
-      padding-top: 80px;
-      padding-left: spacing('3');
-      padding-right: spacing('3');
-      height: 100%;
-      overflow-y: auto;
+    // Items follow the panel in, slightly staggered
+    .mw-navbar-item {
+      animation: mw-navbar-item-in 0.3s ease forwards;
+
+      @for $i from 1 through 10 {
+        &:nth-child(#{$i}) {
+          animation-delay: 0.1s + $i * 0.035s;
+        }
+      }
     }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
 
     .mw-navbar-item {
-      width: 100%;
-      margin: spacing('0');
+      opacity: 1;
+      transform: none;
+      animation: none;
     }
+  }
+}
 
-    .mw-navbar-link {
-      display: block;
-      padding: spacing('3') spacing('0');
-      border-bottom: 1px solid var(--mw-header-border);
-      width: 100%;
-      text-align: left;
-
-      &::after {
-        display: none;
-      }
+// Page scrim behind the drawer
+@mixin navbar-scrim($navbar-selector) {
+  body:has(#{$navbar-selector}.open) {
+    overflow: hidden;
 
-      &.active {
-        color: var(--mw-header-navbar-list-active-color);
-        font-weight: font-weight('medium');
-      }
+    &::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: var(--mw-overlay-background);
+      backdrop-filter: blur(2px);
+      z-index: z-index('header') - 1;
+      animation: mw-navbar-scrim-in 0.3s ease;
     }
   }
 }
 
+@keyframes mw-navbar-item-in {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-navbar-scrim-in {
+  from {
+    opacity: 0;
+  }
+}
+
 // Navbar with built-in auto-detection
 .mw-navbar {
   display: flex;
@@ -279,36 +364,37 @@
   // Auto-responsive behavior based on nav item count
   // Default behavior (1-3 items): collapse at md
   @include media-down('md') {
-    .mw-navbar-list {
-      display: none;
-    }
-
-    @include navbar-open-state;
+    @include navbar-off-canvas;
   }
 
   // Medium (4-5 items): collapse at lg
   &.mw-navbar-medium {
     @include media-down('lg') {
-      .mw-navbar-list {
-        display: none;
-      }
-
-      @include navbar-open-state;
+      @include navbar-off-canvas;
     }
   }
 
   // Large (6+ items): collapse at xl
   &.mw-navbar-large {
     @include media-down('xl') {
-      .mw-navbar-list {
-        display: none;
-      }
-
-      @include navbar-open-state;
+      @include navbar-off-canvas;
     }
   }
 }
 
+// Every variant is collapsed at md, so the default selector covers them all
+@include media-down('md') {
+  @include navbar-scrim('.mw-navbar');
+}
+
+@include media-down('lg') {
+  @include navbar-scrim('.mw-navbar-medium');
+}
+
+@include media-down('xl') {
+  @include navbar-scrim('.mw-navbar-large');
+}
+
 // Show burger button based on navbar size
 .mw-navbar {
   // Default (1-3 items): show burger at md

package/src/scss/utilities/_flex.scss

@@ -76,3 +76,22 @@
     align-items: stretch;
   }
 }
+
+// Align self — the per-item counterpart to .mw-items-*
+.mw-self {
+  &-start {
+    align-self: flex-start;
+  }
+
+  &-end {
+    align-self: flex-end;
+  }
+
+  &-center {
+    align-self: center;
+  }
+
+  &-stretch {
+    align-self: stretch;
+  }
+}

package/src/scss/utilities/_spacing.scss

@@ -1,7 +1,15 @@
+@use 'sass:map';
 @use '../abstracts' as *;
 
+$_margin-values: map.merge(
+  $spacing,
+  (
+    'auto': auto,
+  )
+);
+
 // Margin utilities
-@each $key, $value in $spacing {
+@each $key, $value in $_margin-values {
   .mw-m-#{$key} {
     margin: $value;
   }
@@ -35,46 +43,44 @@
 
 // Padding utilities
 @each $key, $value in $spacing {
-  .mw-p-#{$key} {
-    padding: $value;
-  }
+  @if $value >= 0 {
+    .mw-p-#{$key} {
+      padding: $value;
+    }
 
-  .mw-pt-#{$key} {
-    padding-top: $value;
-  }
+    .mw-pt-#{$key} {
+      padding-top: $value;
+    }
 
-  .mw-pb-#{$key} {
-    padding-bottom: $value;
-  }
+    .mw-pb-#{$key} {
+      padding-bottom: $value;
+    }
 
-  .mw-pl-#{$key} {
-    padding-left: $value;
-  }
+    .mw-pl-#{$key} {
+      padding-left: $value;
+    }
 
-  .mw-pr-#{$key} {
-    padding-right: $value;
-  }
+    .mw-pr-#{$key} {
+      padding-right: $value;
+    }
 
-  .mw-px-#{$key} {
-    padding-left: $value;
-    padding-right: $value;
-  }
+    .mw-px-#{$key} {
+      padding-left: $value;
+      padding-right: $value;
+    }
 
-  .mw-py-#{$key} {
-    padding-top: $value;
-    padding-bottom: $value;
+    .mw-py-#{$key} {
+      padding-top: $value;
+      padding-bottom: $value;
+    }
   }
 }
 
-// Gap utilities (positive values only — negative gap is invalid CSS)
+// Gap utilities
 @each $key, $value in $spacing {
   @if $value >= 0 {
     .mw-gap-#{$key} {
       gap: $value;
-
-      @include media-down('sm') {
-        gap: calc($value * 0.75);
-      }
     }
   }
 }