maverick-wave 6.7.0 → 6.8.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "config": {
-    "version_short": "6.7"
+    "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.
 //

package/src/scss/abstracts/_variables.scss

@@ -434,9 +434,9 @@ $header-colors: (
 );
 // 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') +
+// 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: 74px;
+$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
@@ -537,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/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/_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/_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

@@ -9,7 +9,6 @@ $dock-range: 160px;
 $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
 
 @layer mw.layout {
-  // 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
@@ -51,172 +50,171 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
         }
       }
     }
+  }
 
-    // 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;
-        }
+  // 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;
       }
+    }
 
-      // 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 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;
       }
+    }
 
-      // 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;
-        }
+    // 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;
       }
+    }
 
-      // 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;
-        }
+    // 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;
       }
     }
+  }
+
+  // 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);
+  }
 
-    // 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.
+  body:has(.mw-announcement:not(.mw-announcement-static)) .mw-header-reveal {
+    --mw-header-reveal-offset: calc(
+      var(--mw-header-height) + var(--mw-announcement-height)
+    );
+  }
+
+  // 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 {
-      --mw-header-reveal-offset: var(--mw-header-height);
+      top: var(--mw-header-inset) !important;
+      opacity: 1 !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-header-keep {
+      translate: none !important;
+      box-shadow: none !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;
-      }
+    .mw-announcement:not(.mw-announcement-static) {
+      transform: none !important;
+      opacity: 1 !important;
+    }
+  }
 
-      .mw-header-keep {
-        translate: none !important;
-        box-shadow: none !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-announcement:not(.mw-announcement-static) {
-        transform: none !important;
-        opacity: 1 !important;
-      }
+    // Not carried by the offset, and there is no picture behind an open panel.
+    .mw-header-keep {
+      box-shadow: none !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;
+  // 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;
+
+      // Visible through the slide, so its shadow would hang into the hero
+      &:has(.mw-header-keep) {
+        opacity: 1;
+        box-shadow: none;
       }
 
-      // Not carried by the offset, and there is no picture behind an open panel.
       .mw-header-keep {
-        box-shadow: none !important;
+        translate: 0 var(--mw-header-reveal-offset);
+        box-shadow: $float-edge;
       }
     }
+  }
 
-    // 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;
-
-        // 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:
+        var(--mw-transition),
+        top var(--mw-duration-slow) var(--mw-ease-out);
 
-    .mw-header-driven {
-      @include motion-safe {
-        // The shared list plus `top`: writing only `top` drops the bar's own.
+      .mw-header-keep {
         transition:
-          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);
-        }
+          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);
     }
   }
 

package/src/scss/layout/_header.scss

@@ -7,17 +7,6 @@ $_control-size: 40px;
 // frame on a box this short
 $_mark-round: radius('lg');
 
-// Where the island sits: percentages on a fixed box are the viewport's, so this
-// puts its content box on the page container, $header-island-reach wider on
-// either side. Logo and links stay put while the bar docks around them.
-$_island-edge: max(
-  calc(var(--mw-header-inset) - #{$header-island-reach}),
-  calc(
-    (100% - var(--mw-container-width)) / 2 - var(--mw-header-pad) -
-      #{$header-island-reach}
-  )
-);
-
 @mixin navbar-mark-shape {
   border-radius: radius-sharp() $_mark-round radius-sharp() $_mark-round;
 
@@ -51,16 +40,12 @@ $_island-edge: max(
   .mw-header {
     position: fixed;
     top: var(--mw-header-inset);
-    left: $_island-edge;
-    right: $_island-edge;
+    left: island-edge();
+    right: island-edge();
     z-index: z-index('header');
     // Dark in both themes, fixed light included, where no light-dark() flips
     --mw-focus-ring-color: var(--mw-header-navbar-list-active-color);
-    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);
+    @include island-surface;
     // The height comes from min-height; the padding only has to let a control
     // grown to its 2.75rem touch floor fit inside it
     padding: spacing('2') var(--mw-header-pad);
@@ -79,7 +64,7 @@ $_island-edge: max(
       min-width: 0;
     }
 
-    // The island already sits on the page container, see $_island-edge
+    // The island already sits on the page container, see island-edge()
     .mw-container {
       width: 100%;
       display: flex;
@@ -600,8 +585,8 @@ $_island-edge: max(
   // rounding seam opens between them.
   .mw-announcement:not(.mw-announcement-static) {
     top: calc(var(--mw-header-height) - 1px);
-    left: $_island-edge;
-    right: $_island-edge;
+    left: island-edge();
+    right: island-edge();
     border: 1px solid var(--mw-header-island-border);
     border-top: none;
     border-radius: 0 0 radius('xl') radius('xl');
@@ -630,14 +615,16 @@ $_island-edge: max(
     visibility: hidden;
   }
 
-  // The flat bar, for a site that wants the header to just stand there: full
-  // width, fixed at the top, no island and no reveal (_header-reveal.scss is off
-  // under the same class). On <html> like the other site-wide variants.
+  // The flat bar: full width, fixed at the top, no island and no docking (the
+  // dock in _header-reveal.scss is off under the same class). mw-header-reveal
+  // still rides it in. On <html> like the other site-wide variants.
   :root.mw-header-bar {
     --mw-header-height: #{$header-bar-height};
+    // Not `top: 0` on the header: that would outrank the reveal's resting and
+    // away positions, which are both counted from the inset
+    --mw-header-inset: 0px;
 
     .mw-header {
-      top: 0;
       left: 0;
       right: 0;
       min-height: var(--mw-header-height);