maverick-wave 5.26.0 → 5.28.0

package/src/scss/layout/_footer.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../abstracts' as *;
+@use 'grid';
 
 @layer mw.layout {
   .mw-footer {
@@ -7,31 +8,34 @@
     padding: spacing('7') spacing('0');
     border-top: 1px solid var(--mw-border-accent);
 
+    // The same ramp .mw-grid-4 rides, read from the one place it is written
     &-top {
       display: grid;
-      grid-template-columns: 1fr;
       gap: spacing('6');
       margin-bottom: spacing('6');
 
-      @include media-up('sm') {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      @include media-up('lg') {
-        grid-template-columns: repeat(4, 1fr);
-      }
+      @include grid.column-grid(map.get(grid.$column-steps, 4));
     }
 
     &-column {
       h3 {
-        font-size: font-size('lg');
-        margin-bottom: spacing('4');
+        font-size: font-size('md');
+        margin-bottom: spacing('3');
         color: var(--mw-primary-text-color);
+
+        @include media-up('sm') {
+          font-size: font-size('lg');
+          margin-bottom: spacing('4');
+        }
       }
 
       p {
         color: var(--mw-text-muted-color);
-        margin-bottom: spacing('3');
+        margin-bottom: spacing('2');
+
+        @include media-up('sm') {
+          margin-bottom: spacing('3');
+        }
       }
 
       ul {
@@ -48,7 +52,8 @@
             text-decoration: none;
             padding-bottom: 2px;
 
-            // subtle default underline via box‐shadow
+            // Always drawn, unlike the navbar's: a footer link sits in a list of
+            // them and needs to read as a link without being pointed at first
             &::after {
               content: '';
               position: absolute;
@@ -88,11 +93,6 @@
       row-gap: spacing('3');
       margin: spacing('6') auto;
 
-      &.mod-wrap {
-        width: 330px;
-        max-width: 100%;
-      }
-
       a {
         position: relative;
         display: flex;
@@ -124,98 +124,60 @@
           transition-duration: var(--mw-duration-instant);
         }
       }
+
+      @include media-up('md') {
+        column-gap: spacing('8');
+        row-gap: spacing('4');
+
+        a {
+          width: 48px;
+          height: 48px;
+          font-size: font-size('xl');
+        }
+      }
     }
 
     .mw-disclaimer {
       text-align: center;
       color: var(--mw-text-muted-color);
-      font-size: font-size('sm');
-      width: min(85%, 700px);
+      font-size: font-size('xs');
+      width: 100%;
       margin: spacing('0') auto spacing('3') auto;
       line-height: 1.4;
+
+      // A 15% inset inside a container that already keeps a gutter only narrows
+      // the line to no purpose - so it waits until there is a line to narrow
+      @include media-up('sm') {
+        width: min(85%, 700px);
+        font-size: font-size('sm');
+      }
     }
 
     .mw-copyright {
       text-align: center;
       color: var(--mw-text-muted-color);
-      font-size: font-size('sm');
+      font-size: font-size('xs');
       padding-top: spacing('4');
-      margin: spacing('7') auto spacing('1') auto;
+      margin: spacing('5') auto spacing('1') auto;
       width: 100%;
       border-top: 1px solid var(--mw-border-accent);
+
+      @include media-up('sm') {
+        font-size: font-size('sm');
+        margin-top: spacing('7');
+      }
     }
 
     .mw-last-updated {
       text-align: center;
       color: var(--mw-text-muted-color);
-      font-size: font-size('xs');
+      font-size: font-size('2xs');
       padding-top: spacing('0');
       margin: spacing('1') auto;
-    }
 
-    @include media-up('md') {
-      .mw-social-links {
-        column-gap: spacing('8');
-        row-gap: spacing('4');
-
-        &.mod-wrap {
-          width: 420px;
-        }
-
-        a {
-          width: 48px;
-          height: 48px;
-          font-size: font-size('xl');
-        }
-      }
-    }
-
-    @include media-up('lg') {
-      .mw-social-links {
-        &.mod-wrap {
-          width: 510px;
-        }
-      }
-    }
-
-    @include media-down('sm') {
-      &-column {
-        h3 {
-          font-size: font-size('md');
-          margin-bottom: spacing('3');
-        }
-
-        p {
-          margin-bottom: spacing('2');
-        }
-      }
-
-      .mw-social-links {
-        gap: spacing('3');
-
-        &.mod-wrap {
-          column-gap: spacing('6');
-          row-gap: spacing('3');
-          max-width: 100%;
-          padding: spacing('0') spacing('4');
-        }
-      }
-
-      // A second 15% inset inside a container that already keeps a gutter only
-      // narrows the line to no purpose
-      .mw-disclaimer {
-        width: 100%;
-        font-size: font-size('xs');
-      }
-
-      .mw-copyright {
-        margin-top: spacing('5');
+      @include media-up('sm') {
         font-size: font-size('xs');
       }
-
-      .mw-last-updated {
-        font-size: font-size('2xs');
-      }
     }
   }
 }

package/src/scss/layout/_grid.scss

@@ -10,7 +10,7 @@
 // Outside the layer blocks below, because both read it - the columns are emitted
 // in `mw.layout`, the reveal cycle in `mw.utilities`, and a Sass variable declared
 // inside an `@layer` block is local to it.
-$_column-steps: (
+$column-steps: (
   2: (
     ('sm', 2, null),
   ),
@@ -55,6 +55,37 @@ $_column-steps-lg: (
 // same reason as the steps above: both read it.
 $_grid-from: ('sm', 'md', 'lg', 'xl');
 
+@mixin columns($count) {
+  grid-template-columns: repeat($count, minmax(0, 1fr));
+}
+
+@mixin single-column {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+// Outside the layer block, because a Sass mixin declared inside one is local to
+// it - and the footer builds its own columns from the same ramp.
+//
+// $base-gap is for the -lg ramp, whose placeholder carries the desktop gap and
+// has to come back down to the default air on a phone
+@mixin column-grid($steps, $base-gap: null) {
+  @include single-column;
+  @if $base-gap {
+    gap: spacing($base-gap);
+  }
+
+  @each $breakpoint, $cols, $gap in $steps {
+    @include media-up($breakpoint) {
+      @if $cols {
+        @include columns($cols);
+      }
+      @if $gap {
+        gap: spacing($gap);
+      }
+    }
+  }
+}
+
 @layer mw.layout {
   %grid-base {
     display: grid;
@@ -66,34 +97,6 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
     gap: spacing('9');
   }
 
-  @mixin _columns($count) {
-    grid-template-columns: repeat($count, minmax(0, 1fr));
-  }
-
-  @mixin _single-column {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  // $base-gap is for the -lg ramp, whose placeholder carries the desktop gap and
-  // has to come back down to the default air on a phone
-  @mixin _column-grid($steps, $base-gap: null) {
-    @include _single-column;
-    @if $base-gap {
-      gap: spacing($base-gap);
-    }
-
-    @each $breakpoint, $cols, $gap in $steps {
-      @include media-up($breakpoint) {
-        @if $cols {
-          @include _columns($cols);
-        }
-        @if $gap {
-          gap: spacing($gap);
-        }
-      }
-    }
-  }
-
   // The child reset a full-width single column needs: a card that carries its own
   // max-width would otherwise sit narrow in a column built to hold it.
   @mixin _stretch-children {
@@ -111,24 +114,46 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
 
   .mw-grid-1 {
     @extend %grid-base;
-    @include _single-column;
+    @include single-column;
     @include _stretch-children;
   }
 
-  @each $count, $steps in $_column-steps {
+  @each $count, $steps in $column-steps {
     .mw-grid-#{$count} {
       @extend %grid-base;
-      @include _column-grid($steps);
+      @include column-grid($steps);
     }
   }
 
+  // The container half of the tile component. Here and not in `_tiles.scss`,
+  // because it is one of the ramps above and a component file cannot reach them.
+  //
+  // The guard is what makes a modifier replace the bare ramp rather than layer
+  // on it: both step at the same breakpoints, so which one holds a given width
+  // would otherwise come down to media query order.
+  .mw-tiles {
+    @extend %grid-base;
+  }
+
+  .mw-tiles:not(.mw-tiles-2col):not(.mw-tiles-4col) {
+    @include column-grid(map.get($column-steps, 3));
+  }
+
+  .mw-tiles-2col {
+    @include column-grid(map.get($column-steps, 2));
+  }
+
+  .mw-tiles-4col {
+    @include column-grid(map.get($column-steps, 4));
+  }
+
   .mw-grid-flex {
     @extend %grid-base;
 
-    @include _columns(12);
+    @include columns(12);
 
     @include media-down('md') {
-      @include _single-column;
+      @include single-column;
 
       > * {
         grid-column: 1 / -1 !important;
@@ -175,7 +200,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
 
   .mw-grid-1-lg {
     @extend %grid-base-lg;
-    @include _single-column;
+    @include single-column;
     @include _stretch-children;
   }
 
@@ -184,7 +209,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
       @extend %grid-base-lg;
       // A phone gets the same air between cards whichever ramp is used; the -lg
       // in the name is about the desktop end of it.
-      @include _column-grid($steps, '6');
+      @include column-grid($steps, '6');
     }
   }
 
@@ -195,10 +220,10 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
 
   .mw-grid-flex-lg {
     @extend %grid-base-lg;
-    @include _columns(12);
+    @include columns(12);
 
     @include media-down('md') {
-      @include _single-column;
+      @include single-column;
       gap: spacing('5');
       > * {
         grid-column: 1 / -1 !important;
@@ -263,7 +288,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
   );
 
   @mixin _stack($justify, $child-width) {
-    @include _single-column;
+    @include single-column;
     justify-items: $justify;
 
     > * {
@@ -302,7 +327,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
   @each $breakpoint in $_grid-from {
     .mw-grid-from-#{$breakpoint} {
       @include media-down($breakpoint) {
-        @include _single-column;
+        @include single-column;
       }
     }
   }
@@ -312,7 +337,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
   // grid has to hand it over: written next to the card it would sit in
   // `mw.components` and lose to every gap above, no matter how specific.
   [class*='mw-grid-']:has(> .mw-card-feature) {
-    row-gap: 48px;
+    row-gap: spacing('10');
   }
 }
 
@@ -356,7 +381,7 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
     }
   }
 
-  @each $count, $steps in $_column-steps {
+  @each $count, $steps in $column-steps {
     .mw-grid-#{$count} {
       @include _reveal-ramp($steps);
     }

package/src/scss/layout/_header-reveal.scss

@@ -88,7 +88,7 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
   // The panel hangs off the bar, so the bar has to be in place - and the burger,
   // which is the X while the panel is out, has to stay on its own position.
   //
-  // A class the script sets, not `:has(.mw-navbar.open)`: the burger is the
+  // A class the script sets, not `:has(.mw-navbar.mw-active)`: the burger is the
   // control that closes the panel and cannot wait for a selector re-match, which
   // is where WebKit's invalidation has been unreliable.
   //

package/src/scss/layout/_header.scss

@@ -1,5 +1,8 @@
 @use '../abstracts' as *;
 
+// Shared by the three controls in .mw-header-actions
+$_control-size: 40px;
+
 @layer mw.layout {
   .mw-header {
     position: fixed;
@@ -36,7 +39,7 @@
     .mw-logo {
       display: flex;
       align-items: center;
-      z-index: z-index('header') + 5;
+      z-index: z-index('header-logo');
       position: relative;
       flex-shrink: 1;
       min-width: 0;
@@ -49,6 +52,7 @@
       }
 
       img {
+        // The header height is derived from this - see $mw-header-height
         height: 42px;
         width: auto;
         max-width: 100%;
@@ -76,10 +80,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 40px;
-      width: 50px;
+      height: $_control-size;
+      width: $_control-size;
       flex-shrink: 0;
 
+      @include tappable;
+      @include touch-floor;
+
       &:hover:not(:disabled) {
         background: var(--mw-primary-color-hover);
       }
@@ -108,19 +115,20 @@
       outline: none;
       border-radius: radius('md');
       transition: var(--mw-transition);
-      height: 40px;
-      width: 50px;
+      height: $_control-size;
+      width: $_control-size;
       display: none;
       position: relative;
       flex-shrink: 0;
 
       // iOS
-      -webkit-tap-highlight-color: transparent;
       -webkit-touch-callout: none;
       user-select: none;
-      touch-action: manipulation;
 
-      &:hover {
+      @include tappable;
+      @include touch-floor;
+
+      &:hover:not(:disabled) {
         background: var(--mw-primary-color-hover);
       }
 
@@ -134,9 +142,11 @@
 
       @include focus-ring;
 
-      &.open {
+      // `.open` is what a consumer toggling the panel by hand was told to set,
+      // so it keeps working - drop it at the next major
+      &:is(.mw-active, .open) {
         background: var(--mw-secondary-color);
-        z-index: z-index('header') + 10;
+        z-index: z-index('header-burger');
 
         // The surface under the burger switches to secondary, so its ink has to
         // switch with it. Set on the button, so the bar and both pseudo-elements
@@ -145,7 +155,7 @@
           --mw-header-burgerbutton-open-color
         );
 
-        &:hover {
+        &:hover:not(:disabled) {
           background: var(--mw-secondary-color-hover);
         }
 
@@ -229,7 +239,7 @@
     box-shadow:
       0 6px 12px var(--mw-shadow-near),
       0 18px 40px var(--mw-shadow-far);
-    z-index: z-index('header') + 3;
+    z-index: z-index('header-panel');
 
     // Rolled out from under the bar rather than slid in. A slide needs a place
     // to start, and the only direction with room is straight up through the
@@ -342,7 +352,7 @@
       }
     }
 
-    &.open {
+    &:is(.mw-active, .open) {
       clip-path: inset(0 0 0 0);
       visibility: visible;
 
@@ -384,7 +394,7 @@
       inset: 0;
       background: var(--mw-overlay-background);
       backdrop-filter: blur(2px);
-      z-index: z-index('header') - 1;
+      z-index: z-index('header-scrim');
       animation: mw-navbar-scrim-in var(--mw-duration-base) var(--mw-ease-out);
     }
   }
@@ -402,6 +412,14 @@
     }
   }
 
+  // How long the row survives before it becomes a panel: three links fit where
+  // six do not, so the page states the count and the modifier carries the ramp.
+  $_navbar-sizes: (
+    '': 'md',
+    '.mw-navbar-medium': 'lg',
+    '.mw-navbar-large': 'xl',
+  );
+
   .mw-navbar {
     display: flex;
 
@@ -459,76 +477,27 @@
       &:hover::after,
       &.mw-active::after,
       &.active::after {
-        transform: scaleX(1) !important;
-        opacity: 1 !important;
-      }
-    }
-
-    // Auto-responsive behavior based on nav item count
-    // Default behavior (1-3 items): collapse at md
-    @include media-down('md') {
-      @include navbar-top-sheet;
-    }
-
-    // Medium (4-5 items): collapse at lg
-    &.mw-navbar-medium {
-      @include media-down('lg') {
-        @include navbar-top-sheet;
-      }
-    }
-
-    // Large (6+ items): collapse at xl
-    &.mw-navbar-large {
-      @include media-down('xl') {
-        @include navbar-top-sheet;
-      }
-    }
-  }
-
-  .mw-navbar {
-    // Default (1-3 items): show burger at md
-    @include media-down('md') {
-      ~ .mw-menu-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        transform: scaleX(1);
+        opacity: 1;
       }
     }
 
-    &.mw-navbar-medium {
-      // 4-5 items: show burger at lg
-      @include media-down('lg') {
-        ~ .mw-menu-btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
+    // Panel and burger arrive together, so they step at one breakpoint each
+    @each $modifier, $breakpoint in $_navbar-sizes {
+      &#{$modifier} {
+        @include media-down($breakpoint) {
+          @include navbar-top-sheet;
 
-    &.mw-navbar-large {
-      // 6+ items: show burger at xl
-      @include media-down('xl') {
-        ~ .mw-menu-btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
+          ~ .mw-menu-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
         }
       }
     }
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
   // Profile button - a round avatar until there is room for the signed-in name
   // beside it
   .mw-profile-btn {
@@ -536,8 +505,8 @@
     align-items: center;
     justify-content: center;
     gap: spacing('3');
-    height: 40px;
-    width: 40px;
+    height: $_control-size;
+    width: $_control-size;
     padding: spacing('0');
     background: transparent;
     border: 1px solid var(--mw-header-border);
@@ -548,6 +517,9 @@
     flex-shrink: 0;
     max-width: 220px;
 
+    @include tappable;
+    @include touch-floor;
+
     // The avatar brings spacing of its own that would break the pill shape
     .mw-avatar {
       margin: spacing('0');

package/src/scss/layout/_home.scss

@@ -13,14 +13,17 @@
     margin-inline: auto;
 
     &-content {
-      padding: spacing('9') spacing('0');
+      // The hero is 100dvh tall either way, so the phone - which has the least
+      // of it to give away - gets the smaller band, not the larger one
+      padding-block: spacing('6');
+
       @include media-up('sm') {
-        padding-block: spacing('6');
+        padding-block: spacing('9');
       }
 
       &-fade {
         @extend .mw-home-content;
-        animation: fadeIn var(--mw-duration-slower) var(--mw-ease-out);
+        animation: mw-home-fade var(--mw-duration-slower) var(--mw-ease-out);
       }
     }
 
@@ -47,7 +50,7 @@
     }
   }
 
-  @keyframes fadeIn {
+  @keyframes mw-home-fade {
     from {
       opacity: 0;
       transform: translateX(-8px) translateY(-23px);