maverick-wave 3.0.1 → 3.1.2

package/src/scss/layout/_footer.scss

@@ -3,8 +3,8 @@
 
 .mw-footer {
   background: var(--mw-footer-background);
-  padding: spacing('6') spacing('0') spacing('4') spacing('0');
-  margin-top: spacing('7');
+  padding: spacing('5') spacing('0');
+  margin-top: spacing('6');
   border-top: 1px solid var(--mw-primary-color-hover);
 
   &-top {
@@ -85,7 +85,7 @@
     align-items: center;
     column-gap: spacing('8');
     row-gap: spacing('4');
-    margin: spacing('2') auto spacing('6') auto;
+    margin: spacing('6') auto;
 
     // modifier for more elements
     &.mod-wrap {
@@ -132,7 +132,7 @@
     color: var(--mw-text-muted-color);
     font-size: font-size('sm');
     padding-top: spacing('4');
-    margin: spacing('5') auto spacing('1') auto;
+    margin: spacing('7') auto spacing('1') auto;
     width: 85%;
     border-top: 1px solid var(--mw-secondary-color);
   }
@@ -142,7 +142,7 @@
     color: var(--mw-text-muted-color);
     font-size: font-size('xs');
     padding-top: spacing('0');
-    margin: spacing('1') auto spacing('0') auto;
+    margin: spacing('1') auto;
   }
 
   @include media-down('lg') {
@@ -199,11 +199,12 @@
       }
     }
 
-    .mw-copyright {
+    .mw-disclaimer {
       font-size: font-size('xs');
     }
 
-    .mw-disclaimer {
+    .mw-copyright {
+      margin-top: spacing('5');
       font-size: font-size('xs');
     }
 

package/src/scss/layout/_grid.scss

@@ -126,7 +126,7 @@
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-.mw-grid-auto-lg {
+.mw-grid-auto-md {
   @extend %grid-base;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 }
@@ -266,7 +266,6 @@
 .mw-grid-stack-lg {
   @extend %grid-base-lg;
   grid-template-columns: 1fr;
-  gap: spacing('5');
   justify-items: start;
 
   > * {
@@ -278,7 +277,6 @@
 .mw-grid-stack-center-lg {
   @extend %grid-base-lg;
   grid-template-columns: 1fr;
-  gap: spacing('5');
   justify-items: center;
 
   > * {

package/src/scss/layout/_header.scss

@@ -163,6 +163,56 @@
   }
 }
 
+@mixin navbar-open-state {
+  &.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);
+
+    .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;
+    }
+
+    .mw-navbar-item {
+      width: 100%;
+      margin: spacing('0');
+    }
+
+    .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;
+      }
+
+      &.active {
+        color: var(--mw-header-navbar-list-active-color);
+        font-weight: font-weight('medium');
+      }
+    }
+  }
+}
+
 // Navbar with built-in auto-detection
 .mw-navbar {
   display: flex;
@@ -231,53 +281,7 @@
       display: none;
     }
 
-    &.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);
-
-      .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;
-      }
-
-      .mw-navbar-item {
-        width: 100%;
-        margin: spacing('0');
-      }
-
-      .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;
-        }
-
-        &.active {
-          color: var(--mw-header-navbar-list-active-color);
-          font-weight: font-weight('medium');
-        }
-      }
-    }
+    @include navbar-open-state;
   }
 
   // Medium (4-5 items): collapse at lg
@@ -287,53 +291,7 @@
         display: none;
       }
 
-      &.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);
-
-        .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;
-        }
-
-        .mw-navbar-item {
-          width: 100%;
-          margin: spacing('0');
-        }
-
-        .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;
-          }
-
-          &.active {
-            color: var(--mw-header-navbar-list-active-color);
-            font-weight: font-weight('medium');
-          }
-        }
-      }
+      @include navbar-open-state;
     }
   }
 
@@ -344,53 +302,7 @@
         display: none;
       }
 
-      &.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);
-
-        .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;
-        }
-
-        .mw-navbar-item {
-          width: 100%;
-          margin: spacing('0');
-        }
-
-        .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;
-          }
-
-          &.active {
-            color: var(--mw-header-navbar-list-active-color);
-            font-weight: font-weight('medium');
-          }
-        }
-      }
+      @include navbar-open-state;
     }
   }
 }

package/src/scss/layout/_home.scss

@@ -6,9 +6,9 @@
   text-align: center;
 
   &-content {
-    padding: spacing('6') spacing('4');
+    padding: spacing('6');
     @include media-down('sm') {
-      padding: spacing('9') spacing('3');
+      padding: spacing('9') spacing('4');
     }
 
     // choose mw-home-content or mw-home-content-fade

package/src/scss/layout/_section.scss

@@ -9,7 +9,7 @@
   &::after {
     content: '';
     position: absolute;
-    bottom: spacing('-2');
+    bottom: spacing('-3');
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
@@ -46,13 +46,47 @@
 
 .mw-section-nav {
   max-width: 90%;
-  margin: spacing('-3') auto spacing('-5') auto;
+  margin: spacing('0') auto spacing('0') auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: spacing('3');
 }
 
+.mw-section-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: spacing('3');
+  padding: spacing('3') spacing('4');
+  border: 1px solid var(--mw-primary-color);
+  border-radius: radius('sm');
+  font-weight: font-weight('medium');
+  font-size: inherit;
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--mw-transition);
+  box-sizing: border-box;
+  background: transparent;
+  color: var(--mw-primary-color);
+
+  &:hover:not(:disabled) {
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-text-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mw-primary-color);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
 // Responsive adjustments
 @include media-down('sm') {
   .mw-section-nav {

package/src/scss/utilities/_display.scss

@@ -6,6 +6,10 @@
     display: flex;
   }
 
+  &-inline-flex {
+    display: inline-flex;
+  }
+
   &-block {
     display: block;
   }

package/src/scss/utilities/_flex.scss

@@ -21,6 +21,10 @@
   &-1 {
     flex: 1;
   }
+
+  &-shrink-0 {
+    flex-shrink: 0;
+  }
 }
 
 // Justify content
@@ -44,6 +48,10 @@
   &-around {
     justify-content: space-around;
   }
+
+  &-evenly {
+    justify-content: space-evenly;
+  }
 }
 
 // Align items

package/src/scss/utilities/_spacing.scss

@@ -66,13 +66,15 @@
   }
 }
 
-// Gap utilities
+// Gap utilities (positive values only — negative gap is invalid CSS)
 @each $key, $value in $spacing {
-  .mw-gap-#{$key} {
-    gap: $value;
+  @if $value >= 0 {
+    .mw-gap-#{$key} {
+      gap: $value;
 
-    @include media-down('sm') {
-      gap: calc($value * 0.75);
+      @include media-down('sm') {
+        gap: calc($value * 0.75);
+      }
     }
   }
 }