maverick-wave 5.10.0 → 5.12.0

package/package.json

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

package/src/js/main.js

@@ -555,8 +555,9 @@
   // ===== Scroll Reveal =====
 
   // The cards ride the browser's own view timeline where there is one
-  // (_reveal.scss). Firefox has none, so there an observer stands in: hide what
-  // is still below the fold, run the same keyframes when it arrives.
+  // (_reveal.scss). Older Safari and Firefox have none, so there an observer
+  // stands in: hide what is still below the fold, run the same keyframes when
+  // it arrives.
   function initReveals() {
     if (CSS.supports('animation-timeline', 'view()')) return;
     if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

package/src/partials/palette-container.html

@@ -207,7 +207,10 @@
           rounded.</small
         >
       </span>
-      <select data-variant-prop="--mw-radius-scale">
+      <select
+        class="mw-select mw-select-sm"
+        data-variant-prop="--mw-radius-scale"
+      >
         <option value="0">Square</option>
         <option value="" selected>Default</option>
         <option value="1.7">Round</option>
@@ -222,7 +225,7 @@
           shape.</small
         >
       </span>
-      <select data-variant-classes>
+      <select class="mw-select mw-select-sm" data-variant-classes>
         <option value="mw-btn-square">Square</option>
         <option value="" selected>Default</option>
         <option value="mw-btn-pill">Pill</option>
@@ -237,7 +240,7 @@
           their own treatment.</small
         >
       </span>
-      <select data-variant-classes>
+      <select class="mw-select mw-select-sm" data-variant-classes>
         <option value="" selected>Default</option>
         <option value="mw-btn-glass">Glass</option>
         <option value="mw-btn-tactile">Tactile</option>
@@ -304,7 +307,7 @@
           the size it is - use Text size to scale everything together.</small
         >
       </span>
-      <select data-variant-classes>
+      <select class="mw-select mw-select-sm" data-variant-classes>
         <option value="mw-density-compact">Compact</option>
         <option value="" selected>Default</option>
         <option value="mw-density-roomy">Roomy</option>
@@ -319,7 +322,10 @@
           heights move together.</small
         >
       </span>
-      <select data-variant-prop="--mw-root-font-size">
+      <select
+        class="mw-select mw-select-sm"
+        data-variant-prop="--mw-root-font-size"
+      >
         <option value="93.75%">Compact</option>
         <option value="" selected>Default</option>
         <option value="106.25%">Large</option>
@@ -334,7 +340,10 @@
           screen.</small
         >
       </span>
-      <select data-variant-prop="--mw-container-width">
+      <select
+        class="mw-select mw-select-sm"
+        data-variant-prop="--mw-container-width"
+      >
         <option value="min(800px, calc(100% - 2 * var(--mw-container-gutter)))">
           800
         </option>
@@ -372,7 +381,10 @@
           still win over this.</small
         >
       </span>
-      <select data-variant-prop="--mw-motion-scale">
+      <select
+        class="mw-select mw-select-sm"
+        data-variant-prop="--mw-motion-scale"
+      >
         <option value="0.6">Brisk</option>
         <option value="" selected>Default</option>
         <option value="1.6">Relaxed</option>
@@ -434,7 +446,10 @@
           >How much air sits above and below each section of the page.</small
         >
       </span>
-      <select data-variant-prop="--mw-section-padding-block">
+      <select
+        class="mw-select mw-select-sm"
+        data-variant-prop="--mw-section-padding-block"
+      >
         <option value="2rem">Compact</option>
         <option value="" selected>Default</option>
         <option value="5.5rem">Airy</option>

package/src/partials/parallax-container.html

@@ -62,7 +62,26 @@
   Add <code>mw-parallax-rise</code> next to it and the picture lifts by
   <code>12vh</code> while the text stays where it is - a pinned block does not
   travel through the viewport, so that layer runs on the document's own scroll
-  instead. <code>--mw-parallax-depth</code> is the dial, here as everywhere.
+  instead, over the first screen of it. That makes it a hero move: further down
+  the page those pixels are long gone and the picture holds still.
+  <code>--mw-parallax-depth</code> is the dial, here as everywhere. Several
+  pinned blocks on one page are fine, each takes over from the one before.
+</p>
+
+<h4 class="mw-text-medium mw-mb-2">
+  Slow - <code>mw-parallax-slow</code>, the block travels behind the page
+</h4>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The band before the components section on this page: it keeps its place in the
+  flow and moves at a quarter of your scrolling, so picture and text are still
+  going while the next section closes in from below. Pinning is the same move
+  with the tempo at zero.
+  <code>--mw-parallax-slow-travel</code> (<code>45vh</code>) is the dial and
+  reads against the block's own height - half the height is half speed, the full
+  height stands still. Going past it sends the block backwards. The dial belongs
+  on the element carrying the class, the height on the
+  <code>mw-parallax</code> block inside it: set on the inner block it never
+  reaches the animation and the tempo stays at the default.
 </p>
 
 <h4 class="mw-text-medium mw-mb-2">

package/src/scss/components/_timelines.scss

@@ -348,6 +348,7 @@
       }
 
       &-content {
+        align-self: stretch;
         padding-left: spacing('3');
       }
     }

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

@@ -63,11 +63,11 @@
     }
   }
 
-  // Firefox ships no scroll timelines, so there the script toggles these
-  // classes instead (main.js) - the same two positions, triggered instead of
-  // scrubbed. State and transition are separate because the script sets the
-  // state a frame earlier: together they would send the bar sliding away in
-  // front of the reader instead of having it gone already.
+  // Older Safari and Firefox ship no scroll timelines, so there the script
+  // toggles these classes instead (main.js) - the same two positions,
+  // triggered instead of scrubbed. State and transition are separate because
+  // the script sets the state a frame earlier: together they would send the
+  // bar sliding away in front of the reader instead of having it gone already.
   @media (prefers-reduced-motion: no-preference) {
     .mw-header-reveal.mw-header-away {
       top: calc(-1 * var(--mw-header-reveal-offset));

package/src/scss/layout/_parallax.scss

@@ -86,6 +86,35 @@
     --mw-parallax-pattern-depth: 4vh;
   }
 
+  // A third way to use the scroll, between the two above: the block keeps its
+  // place in the flow but travels slower than the page, so the section after it
+  // closes in from below while picture and text are still moving.
+  //
+  // `exit` and never `cover`: the block leaves a gap where it used to sit, and
+  // the exit phase is the one that starts once its top edge is already past the
+  // top of the screen - which is where that gap then stays.
+  //
+  // Travel over the block's own height is what sets the tempo: half the height
+  // is half speed, the full height stands still and is mw-parallax-sticky.
+  .mw-parallax-slow {
+    --mw-parallax-slow-travel: 45vh;
+
+    position: relative;
+    z-index: 0;
+  }
+
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .mw-parallax-slow {
+        animation-name: mw-parallax-band;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: view();
+        animation-range: exit 0% exit 100%;
+      }
+    }
+  }
+
   // A second layer on top of the first, added to the same media element. It
   // travels a third of the distance, and it is that difference between the two
   // that reads as depth - one layer alone only slides. What it carries is a
@@ -97,10 +126,15 @@
     background-image: var(--mw-parallax-pattern-image, none);
   }
 
-  // Everything after it has to cover it, or the pinned picture shows through the
-  // gaps. The z-index needs the weight of a class to beat the plain
-  // `position: relative` those sections carry.
-  .mw-parallax-sticky ~ * {
+  // Both variants above are overtaken rather than scrolled away, so everything
+  // after them has to cover them or the picture shows through the gaps. The
+  // z-index needs the weight of a class to beat the plain `position: relative`
+  // those sections carry.
+  //
+  // Except a pinned block: `position: relative` here and `sticky` above carry
+  // the same weight, and this rule is the later one - it would take the pinning
+  // away from every band after the first.
+  :is(.mw-parallax-sticky, .mw-parallax-slow) ~ *:not(.mw-parallax-sticky) {
     position: relative;
     z-index: 1;
   }
@@ -108,7 +142,9 @@
   // Zero specificity on purpose: it is a floor, not a rule. A section that
   // paints its own surface - mw-section-alternate, a project's own band - has
   // to win here, and this file is forwarded last.
-  :where(.mw-parallax-sticky ~ *) {
+  :where(
+    :is(.mw-parallax-sticky, .mw-parallax-slow) ~ *:not(.mw-parallax-sticky)
+  ) {
     background: var(--mw-page-background);
   }
 
@@ -116,7 +152,9 @@
   // text goes light. A band without content on it needs neither.
   .mw-parallax-dimmed {
     > .mw-parallax-media {
-      filter: brightness(0.5);
+      // $hero-filter-dark's value, not the token: that one flips to 1.1 in the
+      // light theme, and this band's ink stays light in both
+      filter: brightness(0.7);
     }
 
     > .mw-parallax-content {
@@ -155,10 +193,10 @@
     }
   }
 
-  // Firefox ships no scroll timelines, so there the script writes the progress
-  // and the travel is worked out here (main.js). Keeping the transform in CSS
-  // is what lets every depth variant above - and an inline
-  // `--mw-parallax-depth` - go on working untouched.
+  // Older Safari and Firefox ship no scroll timelines, so there the script
+  // writes the progress and the travel is worked out here (main.js). Keeping
+  // the transform in CSS is what lets every depth variant above - and an
+  // inline `--mw-parallax-depth` - go on working untouched.
   //
   // 0 puts the layer at +depth and 1 at -depth, the two ends of the keyframes.
   @media (prefers-reduced-motion: no-preference) {
@@ -171,6 +209,16 @@
     }
   }
 
+  @keyframes mw-parallax-band {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(var(--mw-parallax-slow-travel));
+    }
+  }
+
   @keyframes mw-parallax {
     from {
       transform: translate3d(0, var(--mw-parallax-depth), 0);

package/src/scss/utilities/_reveal.scss

@@ -35,11 +35,11 @@
     }
   }
 
-  // Firefox ships no scroll timelines at all, so there the script drives the
-  // same movement (main.js): `mw-reveal-hidden` while the element waits below
-  // the fold, `mw-reveal-run` once it enters. Both classes are added by the
-  // script and never by the markup - a page without JS keeps everything
-  // visible, which is what the guard above is for.
+  // Older Safari and Firefox ship no scroll timelines, so there the script
+  // drives the same movement (main.js): `mw-reveal-hidden` while the element
+  // waits below the fold, `mw-reveal-run` once it enters. Both classes are
+  // added by the script and never by the markup - a page without JS keeps
+  // everything visible, which is what the guard above is for.
   @media (prefers-reduced-motion: no-preference) {
     .mw-reveal-hidden {
       opacity: 0;