maverick-wave 6.5.0 → 6.7.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "6.5.0",
+  "version": "6.7.0",
   "config": {
-    "version_short": "6.5"
+    "version_short": "6.7"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/scss/abstracts/_mixins.scss

@@ -352,14 +352,20 @@ $_corner-opaque: 55%;
   );
 }
 
-// The arc alone, for a variant that redraws it without restating the shape
-@mixin corner-accent($border-width: 1px, $corners: 'both') {
+// The arc alone, for a variant that redraws it without restating the shape.
+// The radii are only for a box too small to carry the surface's 20px.
+@mixin corner-accent(
+  $border-width: 1px,
+  $corners: 'both',
+  $sharp-radius: radius-sharp(),
+  $round-radius: radius('xl')
+) {
   // max(), not a bare subtraction: --mw-radius-scale can take the radius to 0,
   // and while a negative border-radius is clamped for us, a negative circle in
   // the mask below would throw the whole gradient away and lose the arc.
   $width: _accent-width($border-width);
-  $sharp: max(0px, calc(#{radius-sharp()} - #{$width}));
-  $round: max(0px, calc(#{radius('xl')} - #{$width}));
+  $sharp: max(0px, calc(#{$sharp-radius} - #{$width}));
+  $round: max(0px, calc(#{$round-radius} - #{$width}));
   // Opaque to where the curve ends, fading from there, so the arc runs into the
   // straight edge instead of stopping at the tangent. 1.8 is bounded by the
   // shortest surface: past about 2 the two arcs meet on a 50px box and read as

package/src/scss/abstracts/_variables.scss

@@ -426,10 +426,25 @@ $header-colors: (
   'burgerbutton-color': token('primary-accent-text-color'),
   'burgerbutton-open-color': token('secondary-accent-text-color'),
   'border': fade('header-navbar-list-active-color', 40%),
+  // Translucent enough for the blur to show, dense enough that the light ink
+  // still reads over a white page
+  'glass': fade('header-background', 88%),
+  'island-border': fade('header-text-color', 13%),
+  'navbar-mark': fade('header-navbar-list-active-color', 16%),
 );
-// Drives bar height, anchor scroll offset and drawer padding. Intrinsic height is
-// 59px: 42px logo + 2 × spacing('3') + 1px border.
-$header-height: 62px;
+// The room the header takes from the top of the viewport - island plus the gap
+// above it - so every offset that reads it clears the island without knowing it
+// floats. The island itself is 60px: a 44px touch control + 2 × spacing('2') +
+// 2px border, with room to spare around the 42px logo.
+$header-height: 74px;
+// Between the island and the viewport edge
+$header-inset: 14px;
+// How far the island reaches past the page container on either side, and in
+// from the inset where that is closer: room for the links, at the price of the
+// logo standing that much left of the text below it
+$header-island-reach: 5px;
+// The flat bar under mw-header-bar, at the height it had before the island
+$header-bar-height: 62px;
 
 // Here and not next to the typography rules, because this is the file
 // `@use 'main' with (...)` configures. No font is bundled.

package/src/scss/base/_base.scss

@@ -131,6 +131,7 @@
 
     // header height
     --mw-header-height: #{$header-height};
+    --mw-header-inset: #{$header-inset};
 
     // Read by the anchor offset of anything the sticky section nav can cover.
     // The strip at its tallest: a 2.75rem button under a thumb plus its two
@@ -148,6 +149,9 @@
     --mw-announcement-offset: 0px;
     --mw-section-nav-offset: 0px;
 
+    // On :root, so an item, an accordion or the page can set it; `none` lifts the cap
+    --mw-accordion-max-height: 500px;
+
     // Fluid rather than stepped: ~24px at 375px up to 64px, where the 1200px cap
     // takes over. Stepping at a breakpoint makes the container jump *backwards*
     // there, because the gutter grows faster than the viewport does.

package/src/scss/components/_accordions.scss

@@ -136,7 +136,7 @@
 
       @include _open-content {
         grid-template-rows: 1fr;
-        max-height: 500px;
+        max-height: var(--mw-accordion-max-height);
         overflow-y: auto;
 
         > .mw-accordion-content-inner {

package/src/scss/components/_announcement.scss

@@ -54,6 +54,8 @@
   .mw-announcement-static {
     // Relative for the close button, without a z-index lifting it over nearby menus
     position: relative;
+    // The fixed ribbon's offsets would shift a relative one by the header height
+    inset: auto;
     z-index: auto;
   }
 

package/src/scss/components/_localhost-indicator.scss

@@ -11,6 +11,12 @@
     background: var(--mw-warning-color);
     z-index: z-index('modal')-10;
     animation: mw-pulse-indicator motion(4s) infinite;
+
+    // Clear of the island's rounded corners
+    .mw-header > & {
+      inset-inline: radius('xl');
+      width: auto;
+    }
   }
 
   // Keyframes for the pulsing indicator

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

@@ -1,172 +1,222 @@
 @use '../abstracts' as *;
 
+// Short enough that the bar is the island by the time the hero's headline is gone
+$dock-range: 160px;
+
 // Carried by the float and not by the class, or the ring would still be there in
 // the arrived bar. Fixed values and not the elevation ramp: this lands on a
 // picture, not on a theme surface, and the light theme cuts its shadows for paper.
 $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
 
 @layer mw.layout {
-  // The bar starts above the screen and rides in over the first stretch of scroll.
-  // Its own file, and not next to .mw-header: that one uses the `animation`
-  // shorthand, which a consumer bundler folds together with a timeline into a
-  // declaration no browser accepts.
-  @supports (animation-timeline: scroll()) {
-    .mw-header-reveal {
-      @include motion-safe {
-        animation-name: mw-header-reveal;
-        animation-timing-function: var(--mw-ease-out);
-        animation-fill-mode: both;
-        animation-timeline: scroll(root);
-        animation-range: 0 420px;
+  // None of it on the flat bar, which stands where it is from the first frame
+  :root:not(.mw-header-bar) {
+    // A header that stays put starts as the full bar and docks into the island over
+    // the first stretch of scroll. A revealing one is off screen up there anyway and
+    // arrives as the island directly. Without scroll timelines it is the island
+    // from the start. The card under the island docks with it, so a menu opened at
+    // the top hangs from the bar edge to edge like the bar itself.
+    @supports (animation-timeline: scroll()) {
+      .mw-header:not(.mw-header-reveal) {
+        @include motion-safe {
+          animation-name: mw-header-dock;
+          animation-timing-function: var(--mw-ease-out);
+          animation-fill-mode: both;
+          animation-timeline: scroll(root);
+          animation-range: 0 $dock-range;
+        }
+
+        // In the row the nav is static and has no radius, so the same keyframes
+        // pass over it without a trace
+        .mw-navbar {
+          @include motion-safe {
+            animation-name: mw-header-dock-sheet;
+            animation-timing-function: var(--mw-ease-out);
+            animation-fill-mode: both;
+            animation-timeline: scroll(root);
+            animation-range: 0 $dock-range;
+          }
+        }
       }
-    }
 
-    // The bar travels, a keep element travels the same distance back and stays
-    // put - for a burger that has to be reachable while the hero is untouched.
-    .mw-header-reveal .mw-header-keep {
-      @include motion-safe {
-        animation-name: mw-header-keep;
-        animation-timing-function: var(--mw-ease-out);
-        animation-fill-mode: both;
-        animation-timeline: scroll(root);
-        animation-range: 0 420px;
+      // The ribbon hangs from the island, so it docks with it
+      body:not(:has(.mw-header-reveal))
+        .mw-announcement:not(.mw-announcement-static) {
+        @include motion-safe {
+          animation-name: mw-announcement-dock;
+          animation-timing-function: var(--mw-ease-out);
+          animation-fill-mode: both;
+          animation-timeline: scroll(root);
+          animation-range: 0 $dock-range;
+        }
       }
     }
 
-    // A group's opacity cannot be taken back by a child, so the fade goes as
-    // soon as something is meant to stay visible through it.
-    .mw-header-reveal:has(.mw-header-keep) {
-      @include motion-safe {
-        animation-name: mw-header-slide;
+    // The bar starts above the screen and rides in over the first stretch of scroll.
+    // Its own file, and not next to .mw-header: that one uses the `animation`
+    // shorthand, which a consumer bundler folds together with a timeline into a
+    // declaration no browser accepts.
+    @supports (animation-timeline: scroll()) {
+      .mw-header-reveal {
+        @include motion-safe {
+          animation-name: mw-header-reveal;
+          animation-timing-function: var(--mw-ease-out);
+          animation-fill-mode: both;
+          animation-timeline: scroll(root);
+          animation-range: 0 420px;
+        }
       }
-    }
 
-    // Glued under the bar, so it leaves and arrives with it. No class of its
-    // own: a ribbon under a revealing header has no other sensible behaviour.
-    body:has(.mw-header-reveal) .mw-announcement:not(.mw-announcement-static) {
-      @include motion-safe {
-        animation-name: mw-announcement-reveal;
-        animation-timing-function: var(--mw-ease-out);
-        animation-fill-mode: both;
-        animation-timeline: scroll(root);
-        animation-range: 0 420px;
+      // The bar travels, a keep element travels the same distance back and stays
+      // put - for a burger that has to be reachable while the hero is untouched.
+      .mw-header-reveal .mw-header-keep {
+        @include motion-safe {
+          animation-name: mw-header-keep;
+          animation-timing-function: var(--mw-ease-out);
+          animation-fill-mode: both;
+          animation-timeline: scroll(root);
+          animation-range: 0 420px;
+        }
       }
-    }
-  }
 
-  // Both cover the height of the pair, or the shorter traveller arrives first and
-  // the two come in as two things instead of one block.
-  .mw-header-reveal {
-    --mw-header-reveal-offset: var(--mw-header-height);
-  }
+      // A group's opacity cannot be taken back by a child, so the fade goes as
+      // soon as something is meant to stay visible through it.
+      .mw-header-reveal:has(.mw-header-keep) {
+        @include motion-safe {
+          animation-name: mw-header-slide;
+        }
+      }
 
-  body:has(.mw-announcement:not(.mw-announcement-static)) .mw-header-reveal {
-    --mw-header-reveal-offset: calc(
-      var(--mw-header-height) + var(--mw-announcement-height)
-    );
-  }
+      // Glued under the bar, so it leaves and arrives with it. No class of its
+      // own: a ribbon under a revealing header has no other sensible behaviour.
+      body:has(.mw-header-reveal)
+        .mw-announcement:not(.mw-announcement-static) {
+        @include motion-safe {
+          animation-name: mw-announcement-reveal;
+          animation-timing-function: var(--mw-ease-out);
+          animation-fill-mode: both;
+          animation-timeline: scroll(root);
+          animation-range: 0 420px;
+        }
+      }
+    }
 
-  // A focus ring on something off screen is WCAG 2.4.11, so focus brings the bar
-  // back. `!important` is the one author declaration that outranks a running
-  // animation; `animation-name: none` would strand the element on its last value
-  // until the next scroll. Keeps are left out - they are on screen already, and a
-  // click on the theme toggle would otherwise haul in the whole bar. `:focus` on a
-  // descendant and not `:focus-within`: that matches every wrapper too.
-  body:has(
-    .mw-header-reveal :focus:not(.mw-header-keep, .mw-header-keep *),
-    .mw-announcement:focus-within
-  ) {
+    // Both cover the height of the pair, or the shorter traveller arrives first and
+    // the two come in as two things instead of one block.
     .mw-header-reveal {
-      top: 0 !important;
-      opacity: 1 !important;
+      --mw-header-reveal-offset: var(--mw-header-height);
     }
 
-    .mw-header-keep {
-      translate: none !important;
-      box-shadow: none !important;
+    body:has(.mw-announcement:not(.mw-announcement-static)) .mw-header-reveal {
+      --mw-header-reveal-offset: calc(
+        var(--mw-header-height) + var(--mw-announcement-height)
+      );
     }
 
-    .mw-announcement:not(.mw-announcement-static) {
-      transform: none !important;
-      opacity: 1 !important;
-    }
-  }
+    // A focus ring on something off screen is WCAG 2.4.11, so focus brings the bar
+    // back. `!important` is the one author declaration that outranks a running
+    // animation; `animation-name: none` would strand the element on its last value
+    // until the next scroll. Keeps are left out - they are on screen already, and a
+    // click on the theme toggle would otherwise haul in the whole bar. `:focus` on a
+    // descendant and not `:focus-within`: that matches every wrapper too.
+    body:has(
+      .mw-header-reveal :focus:not(.mw-header-keep, .mw-header-keep *),
+      .mw-announcement:focus-within
+    ) {
+      .mw-header-reveal {
+        top: var(--mw-header-inset) !important;
+        opacity: 1 !important;
+      }
 
-  // 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.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.
-  //
-  // Zeroing the distance rather than overriding each position that reads it: four
-  // mechanisms carry the pair - `top` and `translate`, each once as a class and
-  // once as a keyframe - and all four resolve this one property. Overriding the
-  // values instead pits `!important` against a running animation, which WebKit
-  // does not reliably hand to the author.
-  body.mw-nav-open {
-    .mw-header-reveal {
-      // The ribbon variant above raises the same property from a `:has()`, which
-      // counts its argument and outranks this rule - author against author, which
-      // every engine resolves the same way, not author against an animation.
-      --mw-header-reveal-offset: 0px !important;
-      opacity: 1 !important;
-    }
+      .mw-header-keep {
+        translate: none !important;
+        box-shadow: none !important;
+      }
 
-    // Not carried by the offset, and there is no picture behind an open panel.
-    .mw-header-keep {
-      box-shadow: none !important;
+      .mw-announcement:not(.mw-announcement-static) {
+        transform: none !important;
+        opacity: 1 !important;
+      }
     }
-  }
-
-  // No scroll timelines: the script toggles these classes instead (main.js).
-  // State and transition are separate because the script sets the state a frame
-  // earlier - together the bar would slide away in front of the reader.
-  .mw-header-reveal.mw-header-away {
-    @include motion-safe {
-      top: calc(-1 * var(--mw-header-reveal-offset));
-      opacity: 0;
 
-      &:has(.mw-header-keep) {
-        opacity: 1;
+    // 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.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.
+    //
+    // Zeroing the distance rather than overriding each position that reads it: four
+    // mechanisms carry the pair - `top` and `translate`, each once as a class and
+    // once as a keyframe - and all four resolve this one property. Overriding the
+    // values instead pits `!important` against a running animation, which WebKit
+    // does not reliably hand to the author.
+    body.mw-nav-open {
+      .mw-header-reveal {
+        // The ribbon variant above raises the same property from a `:has()`, which
+        // counts its argument and outranks this rule - author against author, which
+        // every engine resolves the same way, not author against an animation.
+        --mw-header-reveal-offset: 0px !important;
+        opacity: 1 !important;
       }
 
+      // Not carried by the offset, and there is no picture behind an open panel.
       .mw-header-keep {
-        translate: 0 var(--mw-header-reveal-offset);
-        box-shadow: $float-edge;
+        box-shadow: none !important;
       }
     }
-  }
 
-  .mw-header-driven {
-    @include motion-safe {
-      // The shared list plus `top`: writing only `top` drops the bar's own.
-      transition:
-        var(--mw-transition),
-        top var(--mw-duration-slow) var(--mw-ease-out);
+    // No scroll timelines: the script toggles these classes instead (main.js).
+    // State and transition are separate because the script sets the state a frame
+    // earlier - together the bar would slide away in front of the reader.
+    .mw-header-reveal.mw-header-away {
+      @include motion-safe {
+        top: calc(var(--mw-header-inset) - var(--mw-header-reveal-offset));
+        opacity: 0;
 
-      .mw-header-keep {
+        // Visible through the slide, so its shadow would hang into the hero
+        &:has(.mw-header-keep) {
+          opacity: 1;
+          box-shadow: none;
+        }
+
+        .mw-header-keep {
+          translate: 0 var(--mw-header-reveal-offset);
+          box-shadow: $float-edge;
+        }
+      }
+    }
+
+    .mw-header-driven {
+      @include motion-safe {
+        // The shared list plus `top`: writing only `top` drops the bar's own.
         transition:
-          translate var(--mw-duration-slow) var(--mw-ease-out),
-          box-shadow var(--mw-duration-slow) var(--mw-ease-out);
+          var(--mw-transition),
+          top var(--mw-duration-slow) var(--mw-ease-out);
+
+        .mw-header-keep {
+          transition:
+            translate var(--mw-duration-slow) var(--mw-ease-out),
+            box-shadow var(--mw-duration-slow) var(--mw-ease-out);
+        }
       }
     }
-  }
 
-  .mw-announcement.mw-announcement-away {
-    @include motion-safe {
-      transform: translateY(
-        calc(-1 * (var(--mw-header-height) + var(--mw-announcement-height)))
-      );
-      opacity: 0;
+    .mw-announcement.mw-announcement-away {
+      @include motion-safe {
+        transform: translateY(
+          calc(-1 * (var(--mw-header-height) + var(--mw-announcement-height)))
+        );
+        opacity: 0;
+      }
     }
-  }
 
-  .mw-announcement-driven {
-    @include motion-safe {
-      transition:
-        transform var(--mw-duration-slow) var(--mw-ease-out),
-        opacity var(--mw-duration-slow) var(--mw-ease-out);
+    .mw-announcement-driven {
+      @include motion-safe {
+        transition:
+          transform var(--mw-duration-slow) var(--mw-ease-out),
+          opacity var(--mw-duration-slow) var(--mw-ease-out);
+      }
     }
   }
 
@@ -177,25 +227,63 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
   @keyframes mw-header-reveal {
     0%,
     30% {
-      top: calc(-1 * var(--mw-header-reveal-offset));
+      top: calc(var(--mw-header-inset) - var(--mw-header-reveal-offset));
       opacity: 0;
     }
 
     100% {
-      top: 0;
+      top: var(--mw-header-inset);
       opacity: 1;
     }
   }
 
-  // The same ride without the fade, for a bar something stays visible through
+  // The same ride without the fade, for a bar something stays visible through -
+  // and without the shadow while it is up there, or it hangs into the hero
   @keyframes mw-header-slide {
     0%,
     30% {
-      top: calc(-1 * var(--mw-header-reveal-offset));
+      top: calc(var(--mw-header-inset) - var(--mw-header-reveal-offset));
+      box-shadow: none;
     }
 
     100% {
+      top: var(--mw-header-inset);
+    }
+  }
+
+  // Only the start: the end is the island the header already is
+  @keyframes mw-header-dock {
+    from {
       top: 0;
+      left: 0;
+      right: 0;
+      min-height: var(--mw-header-height);
+      // Percentages of the viewport here, so the content box is the page
+      // container in both states and the logo does not move sideways
+      padding-inline: calc(
+        (100% - var(--mw-container-width)) / 2 - #{$header-island-reach}
+      );
+      border-radius: 0;
+      border-color: transparent transparent var(--mw-header-border);
+      background-color: var(--mw-header-background);
+      box-shadow: none;
+    }
+  }
+
+  @keyframes mw-header-dock-sheet {
+    from {
+      top: 100%;
+      border-radius: 0;
+    }
+  }
+
+  @keyframes mw-announcement-dock {
+    from {
+      left: 0;
+      right: 0;
+      border-radius: 0;
+      border-color: transparent;
+      box-shadow: none;
     }
   }