maverick-wave 6.6.0 → 6.8.0

package/package.json

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

package/src/scss/abstracts/_functions.scss

@@ -114,12 +114,21 @@
 // rather than off the end.
 $_radius-floor: map.get(v.$radius, 'xs');
 
+// The sharp half of the signature on a value of its own, so the scale can round
+// controls up without softening the one corner meant to read as sharp
+$_radius-sharp-base: 5px;
+
 // Emitted through --mw-radius-scale, so one number retunes every rounded box in
 // the framework at once - 0 squares them off, above 1 rounds them further, and
 // the corner arc follows. 'none' and 'full' pass through: an explicit 0 stays
-// 0, and a circle has to stay a circle.
+// 0, and a circle has to stay a circle. A length instead of a key takes the
+// same scale and floor, for the few values that sit off the scale.
 @function radius($key) {
-  $value: map.get(v.$radius, $key);
+  $value: $key;
+
+  @if meta.type-of($key) != 'number' {
+    $value: map.get(v.$radius, $key);
+  }
 
   @if $key == 'none' or $key == 'full' {
     @return $value;
@@ -137,7 +146,21 @@ $_radius-floor: map.get(v.$radius, 'xs');
 
   @return max(
     #{$_radius-floor},
-    calc(#{map.get(v.$radius, 'sm')} * #{$scale} * #{$scale})
+    calc(#{$_radius-sharp-base} * #{$scale} * #{$scale})
+  );
+}
+
+// Where a floating island sits: percentages on a fixed box are the viewport's,
+// so this puts the header's content box on the page container,
+// $header-island-reach wider on either side - and the bar at the foot on the
+// same edges. Logo and links stay put while the header docks around them.
+@function island-edge() {
+  @return max(
+    calc(var(--mw-header-inset) - #{v.$header-island-reach}),
+    calc(
+      (100% - var(--mw-container-width)) / 2 - var(--mw-header-pad) -
+        #{v.$header-island-reach}
+    )
   );
 }
 

package/src/scss/abstracts/_mixins.scss

@@ -276,6 +276,15 @@
   }
 }
 
+// The floating chrome, shared by the header island and the action bar island
+@mixin island-surface {
+  background: var(--mw-header-glass);
+  backdrop-filter: blur(20px) saturate(1.6);
+  border: 1px solid var(--mw-header-island-border);
+  border-radius: radius('xl');
+  box-shadow: var(--mw-elevation-4);
+}
+
 // The MaverickWave silhouette: sharp corners on one diagonal, round on the other,
 // with an accent arc on the round pair - the asymmetry alone reads as an accident.
 //
@@ -352,14 +361,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 63px: a 44px touch control + 2 × spacing('2') +
+// 2px border, with room to spare around the 42px logo.
+$header-height: 77px;
+// 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.
@@ -522,14 +537,20 @@ $breakpoints: (
 $radius: (
   'none': 0,
   'xs': 2px,
-  'sm': 5px,
-  'md': 10px,
+  'sm': 7px,
+  'md': 12px,
   'lg': 15px,
   'xl': 20px,
   '2xl': 30px,
   'full': 50%,
 );
 
+// Off the scale on purpose: a chip next to a tag stays tighter than the buttons
+// and fields it would otherwise be mistaken for. Outside the map, or every key
+// would turn into a mw-radius-* utility.
+$chip-radius: 10px;
+$chip-radius-sm: 5px;
+
 // Z-index
 $z-index: (
   'lift': 3,

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

package/src/scss/components/_action-bar.scss

@@ -1,5 +1,11 @@
 @use '../abstracts' as *;
 
+// Clear of the home indicator where there is one, the header's gap where not
+$_island-bottom: max(var(--mw-header-inset), env(safe-area-inset-bottom, 0px));
+// Lighter than the flat bar, and as low as it goes: the items keep their
+// 2.75rem touch floor, so the rest is only the padding around them
+$_island-height: calc(var(--mw-action-bar-height) - 4px);
+
 @layer mw.components {
   :root {
     --mw-action-bar-height: 3.75rem;
@@ -18,6 +24,10 @@
     }
   }
 
+  :root:has(.mw-action-bar-island:not(.mw-action-bar-embedded)) {
+    --mw-action-bar-reserve: calc(#{$_island-height} + #{$_island-bottom});
+  }
+
   // Chrome like the header, so it takes the header's colours in both themes
   .mw-action-bar {
     --mw-focus-ring-color: var(--mw-header-navbar-list-active-color);
@@ -44,6 +54,19 @@
       position: absolute;
     }
 
+    &-island {
+      inset-inline: island-edge();
+      bottom: $_island-bottom;
+      min-height: $_island-height;
+      padding: spacing('1');
+      @include island-surface;
+
+      // Its own frame has no page container to line up with
+      &.mw-action-bar-embedded {
+        inset-inline: calc(var(--mw-header-inset) - #{$header-island-reach});
+      }
+    }
+
     &-item {
       display: flex;
       flex-direction: column;
@@ -129,6 +152,12 @@
       justify-content: center;
       grid-auto-columns: minmax(0, 10rem);
     }
+
+    // A dock: a container-wide island would float the targets in empty glass
+    .mw-action-bar-island {
+      width: fit-content;
+      margin-inline: auto;
+    }
   }
 
   @media print {

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/_code.scss

@@ -95,7 +95,7 @@
     &-language {
       font-size: font-size('2xs');
       padding: spacing('1');
-      border-radius: radius('sm');
+      border-radius: radius($chip-radius-sm);
 
       @include media-up('sm') {
         font-size: font-size('xs');

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/components/_techstack-bucket.scss

@@ -13,7 +13,7 @@
       text-decoration: none;
       background: var(--mw-card-background);
       border: 1px solid var(--mw-border);
-      border-radius: radius('md');
+      border-radius: radius($chip-radius);
       padding: spacing('2');
       transition: var(--mw-transition-fast);
       color: var(--mw-text-color);
@@ -55,7 +55,7 @@
       padding: spacing('1') spacing('2');
       min-width: 32px;
       min-height: 32px;
-      border-radius: radius('sm');
+      border-radius: radius($chip-radius-sm);
 
       .mw-techstack-logo {
         width: 18px;
@@ -78,7 +78,7 @@
 
     &-logo {
       object-fit: contain;
-      border-radius: radius('sm');
+      border-radius: radius($chip-radius-sm);
       transition: transform var(--mw-duration-fast) var(--mw-ease-out);
       flex-shrink: 0;
     }

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

@@ -1,11 +1,57 @@
 @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 {
+  :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 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;
+        }
+      }
+    }
+  }
+
   // 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
@@ -77,7 +123,7 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
     .mw-announcement:focus-within
   ) {
     .mw-header-reveal {
-      top: 0 !important;
+      top: var(--mw-header-inset) !important;
       opacity: 1 !important;
     }
 
@@ -124,11 +170,13 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
   // 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));
+      top: calc(var(--mw-header-inset) - var(--mw-header-reveal-offset));
       opacity: 0;
 
+      // Visible through the slide, so its shadow would hang into the hero
       &:has(.mw-header-keep) {
         opacity: 1;
+        box-shadow: none;
       }
 
       .mw-header-keep {
@@ -177,25 +225,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;
     }
   }