maverick-wave 5.3.0 → 5.5.0

package/src/partials/palette-container.html

@@ -0,0 +1,142 @@
+<button
+  type="button"
+  class="palette-fab"
+  id="palette-fab"
+  aria-expanded="false"
+  aria-controls="palette-panel"
+  aria-label="Try another palette"
+>
+  <i class="fas fa-palette"></i>
+</button>
+
+<div class="palette-panel" id="palette-panel" hidden>
+  <h3 class="palette-heading">Palette</h3>
+  <p class="palette-hint">
+    Two colors. Everything else - bar, ink, borders, tints - is derived from
+    them at runtime.
+  </p>
+
+  <div class="palette-grid">
+    <button
+      type="button"
+      class="palette-item mw-active"
+      data-primary="#1031bb"
+      data-secondary="#bb5710"
+      data-dark="#171f30"
+      data-light="#e7e7f0"
+    >
+      Maverick
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#0f6f8c"
+      data-secondary="#e8862a"
+      data-dark="#0f1f26"
+      data-light="#e2edf1"
+    >
+      Deep Sea
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#c2321f"
+      data-secondary="#256f83"
+      data-dark="#13161a"
+      data-light="#f4e9e6"
+    >
+      Ember
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#2f7a3f"
+      data-secondary="#7f4dbd"
+      data-dark="#141f16"
+      data-light="#e6eee7"
+    >
+      Moss
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#8e3bd4"
+      data-secondary="#2fa38a"
+      data-dark="#1d1530"
+      data-light="#ece8f5"
+    >
+      Orchid
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#46617f"
+      data-secondary="#c08a2e"
+      data-dark="#1a1f26"
+      data-light="#e8ebef"
+    >
+      Slate
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#00b3ff"
+      data-secondary="#ff2d95"
+      data-dark="#0d1117"
+      data-light="#e6f3fb"
+    >
+      Neon
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#9a5f23"
+      data-secondary="#3b6ea5"
+      data-dark="#241c15"
+      data-light="#f2eadd"
+    >
+      Sand
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#12a37a"
+      data-secondary="#e2699b"
+      data-dark="#101f1b"
+      data-light="#e2f1ec"
+    >
+      Mint
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#4b2fc4"
+      data-secondary="#d9a72e"
+      data-dark="#171331"
+      data-light="#eae8f7"
+    >
+      Royal
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#9b1b4a"
+      data-secondary="#23a08d"
+      data-dark="#1e1220"
+      data-light="#f3e7ec"
+    >
+      Wine
+    </button>
+  </div>
+
+  <div class="palette-custom">
+    <label class="palette-field">
+      <span>Primary</span>
+      <input type="color" id="palette-primary" value="#1031bb" />
+    </label>
+    <label class="palette-field">
+      <span>Secondary</span>
+      <input type="color" id="palette-secondary" value="#bb5710" />
+    </label>
+  </div>
+</div>

package/src/partials/parallax-container.html

@@ -0,0 +1,114 @@
+<h3 class="mw-section-subtitle">Parallax</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Two ways to play a picture against the scroll, both on the browser's scroll
+  timeline - no listener, and no
+  <code>background-attachment: fixed</code>, which iOS ignores. The image lives
+  in its own <code>mw-parallax-media</code> layer, as an
+  <code>&lt;img&gt;</code> or as a div with a background image. Where scroll
+  timelines are missing, or with <code>prefers-reduced-motion</code>, the
+  picture stands still and nothing else changes.
+</p>
+
+<h4 class="mw-text-medium mw-mb-2">
+  Drift - <code>mw-parallax</code>, the picture moves slower than the page
+</h4>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  How far it travels is <code>--mw-parallax-depth</code> (<code>10vh</code> by
+  default); the layer overhangs the block by exactly that much, so no edge is
+  ever uncovered. <code>mw-parallax-dimmed</code> turns the picture down and the
+  text light.
+</p>
+
+<div class="mw-grid-1 mw-gap-6 mw-mb-6">
+  <div class="mw-parallax mw-parallax-dimmed">
+    <img
+      class="mw-parallax-media"
+      src="images/slider-field.svg"
+      alt=""
+      loading="lazy"
+    />
+    <div class="mw-parallax-content mw-text-center">
+      <h3>Scroll past me</h3>
+      <p class="mw-mb-0">The field moves slower than the page does.</p>
+    </div>
+  </div>
+
+  <div class="mw-parallax" style="--mw-parallax-depth: 20vh">
+    <img
+      class="mw-parallax-media"
+      src="images/gallery-mountain.svg"
+      alt="Mountain range"
+      loading="lazy"
+    />
+  </div>
+</div>
+
+<h4 class="mw-text-medium mw-mb-2">
+  Reveal - <code>mw-parallax-sticky</code>, the picture stays and the page rides
+  over it
+</h4>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The home section of this page does it: the block pins itself to the top of the
+  screen and everything after it slides up over the picture. It goes on whatever
+  element the page content is a <strong>sibling</strong> of - the section around
+  a hero, not the hero itself - because that is what sticky and the sibling
+  selector need. Everything after it gets the page background and a layer above,
+  or the pinned picture shows through. Pair it with
+  <code>mw-header-reveal</code> on the header and the page opens on the picture
+  alone: the bar stays away for the first 130px of scroll and has ridden in by
+  420px.
+</p>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  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.
+</p>
+
+<h4 class="mw-text-medium mw-mb-2">
+  Pattern - <code>mw-parallax-pattern</code>, a second layer that makes the
+  movement visible
+</h4>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The travel is vertical, so only an edge across it - a rule, a grid, a hatch -
+  ever shows it. A gradient has none and slides without looking like it moves.
+  Add a second <code>mw-parallax-media</code> carrying
+  <code>mw-parallax-pattern</code>: it travels a third of the distance, and it
+  is the difference between the two layers that reads as depth. In a hero the
+  pattern comes from <code>$mw-hero-pattern</code>, the way the picture comes
+  from <code>$mw-hero-image</code>; anywhere else set
+  <code>--mw-parallax-pattern-image</code> on it.
+</p>
+
+<div class="mw-parallax mw-parallax-dimmed mw-mb-6">
+  <div class="mw-parallax-media parallax-demo-ground"></div>
+  <div class="mw-parallax-media mw-parallax-pattern parallax-demo-lines"></div>
+  <div class="mw-parallax-content mw-text-center">
+    <h3>The grid drifts, the gradient holds</h3>
+    <p class="mw-mb-0">
+      Both layers move. Only the one with edges tells you so.
+    </p>
+  </div>
+</div>
+
+<div class="mw-code-block">
+  <div class="mw-code-block-header">
+    <span class="mw-code-block-filename">index.html</span>
+    <span class="mw-code-block-language">HTML</span>
+  </div>
+  <div class="mw-code-container">
+    <pre><code>&lt;header class="mw-header mw-header-reveal"&gt;...&lt;/header&gt;
+
+&lt;main class="mw-main"&gt;
+  &lt;section class="mw-section mw-parallax-sticky mw-parallax-rise"&gt;
+    &lt;div class="mw-container mw-parallax"&gt;
+      &lt;div class="mw-parallax-media"&gt;&lt;/div&gt;
+      &lt;div class="mw-parallax-media mw-parallax-pattern"&gt;&lt;/div&gt;
+      &lt;div class="mw-hero"&gt;...&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/section&gt;
+
+  &lt;section class="mw-section"&gt;...&lt;/section&gt;
+&lt;/main&gt;</code></pre>
+  </div>
+</div>

package/src/scss/abstracts/_mixins.scss

@@ -253,11 +253,12 @@
   }
 }
 
-// The reveal zone as the range of the n-th column. Viewport lengths and not
-// percentages of the block, so a short band and a tall card rise through the same
-// region of the screen. Each further column starts 4dvh after the one before.
+// The reveal zone as the range of the n-th column, measured along the block's own
+// entry and not in viewport lengths: a zone in dvh is the same length whatever the
+// block measures, so a card shorter than the zone stands fully in place while it is
+// still transparent. Each further column starts a tenth of that entry later.
 @mixin reveal-range($column: 1) {
-  $shift: 4dvh * ($column - 1);
+  $shift: 10% * ($column - 1);
 
-  animation-range: entry #{8dvh + $shift} entry #{34dvh + $shift};
+  animation-range: entry #{$shift} entry #{60% + $shift};
 }

package/src/scss/abstracts/_variables.scss

@@ -4,6 +4,10 @@ $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
 
 $mw-hero-image: url('https://images.unsplash.com/photo-1591638462868-19cfad9c49d1?q=80&w=1300&auto=format&fit=crop') !default;
 
+// A second, flatter layer over the image - see mw-parallax-pattern. Fine lines
+// or a grid, because a gradient has no edge across the travel to show it moving.
+$mw-hero-pattern: none !default;
+
 // Fixed to the light end rather than theme-bound: the photo does not change with
 // the theme, so its ink must not either. Use --mw-light-text-color on a bright one.
 $mw-hero-text-color: var(--mw-dark-text-color) !default;

package/src/scss/base/_base.scss

@@ -85,6 +85,7 @@
 
     // hero background image and the ink that sits on it
     --mw-hero-background: #{$mw-hero-image};
+    --mw-hero-pattern: #{$mw-hero-pattern};
     --mw-hero-text-color: #{$mw-hero-text-color};
 
     // header height

package/src/scss/base/_reset.scss

@@ -24,9 +24,12 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
+    // `dvh` and not `vh`: on iOS `100vh` is the tall viewport behind the
+    // address bar, so the locked body stays taller than the screen and keeps a
+    // strip of rubber-band scroll under the modal.
     &:has(.mw-modal-open) {
       overflow: hidden;
-      height: 100vh;
+      height: 100dvh;
     }
   }
 

package/src/scss/components/_accordions.scss

@@ -83,27 +83,51 @@
       }
     }
 
+    // A grid row from `0fr` to `1fr`, and not `height: 0` to `auto`: `auto` is
+    // not an animatable value, and `interpolate-size`, which would make it one,
+    // is Chrome's alone - Firefox and Safari jumped the panel open instead of
+    // running the 900ms. A fraction interpolates in all three.
     &-content {
-      height: spacing('0');
+      display: grid;
+      grid-template-rows: 0fr;
       overflow: hidden;
-      transition: height var(--mw-duration-slower) var(--mw-ease-out);
+      transition: grid-template-rows var(--mw-duration-slower)
+        var(--mw-ease-out);
       background: var(--mw-card-background);
-      interpolate-size: allow-keywords;
 
       &-inner {
-        padding: spacing('4');
-        border-top: 1px solid var(--mw-border-accent);
+        // The row is never shorter than what the item contributes, and padding
+        // and a border do not collapse with it - so both travel along, or the
+        // shut panel keeps a 25px strip of itself on screen. No `overflow` here
+        // on purpose: the panel above already clips, and clipping twice would
+        // hide the overflow that makes a long panel scrollable.
+        min-height: 0;
+        padding: spacing('0') spacing('4');
+        border-top: 0 solid var(--mw-border-accent);
+        transition:
+          padding-block var(--mw-duration-slower) var(--mw-ease-out),
+          border-top-width var(--mw-duration-slower) var(--mw-ease-out);
+
         @include media-down('sm') {
           font-size: font-size('sm');
         }
       }
 
       @include active() {
-        height: auto;
+        grid-template-rows: 1fr;
         max-height: 500px;
         overflow-y: auto;
 
-        // Scrollbar styling
+        > .mw-accordion-content-inner {
+          padding-block: spacing('4');
+          border-top-width: 1px;
+        }
+
+        // Both spellings: the standard pair is what Firefox reads, the webkit
+        // pseudos are for Safari below 18.2.
+        scrollbar-width: thin;
+        scrollbar-color: var(--mw-primary-color-hover) var(--mw-card-background);
+
         &::-webkit-scrollbar {
           width: 6px;
         }

package/src/scss/components/_toasts.scss

@@ -9,7 +9,7 @@
     flex-direction: column;
     gap: spacing('3');
     width: min(380px, calc(100vw - #{2 * spacing('5')}));
-    max-height: calc(100vh - #{2 * spacing('5')});
+    max-height: calc(100dvh - #{2 * spacing('5')});
     overflow-y: auto;
     pointer-events: none;
 

package/src/scss/form-elements/_slider.scss

@@ -38,10 +38,14 @@
       transform: scale(1.1);
     }
 
+    // Same fill and ring as the webkit thumb above - Firefox paints its own
+    // grey thumb unless `background` is set, so leaving it out is not the same
+    // declaration set, it is a different slider.
     &::-moz-range-thumb {
       width: spacing('5');
       height: spacing('5');
-      border: 2px solid var(--fill);
+      background: var(--fill);
+      border: 2px solid var(--mw-border);
       border-radius: radius('full');
       transition:
         transform var(--mw-duration-fast) var(--mw-ease-out),
@@ -55,20 +59,6 @@
       background: transparent;
     }
 
-    // IE
-    &::-ms-fill-lower {
-      background: var(--fill);
-    }
-    &::-ms-fill-upper {
-      background: var(--track);
-    }
-    &::-ms-thumb {
-      width: spacing('5');
-      height: spacing('5');
-      border: 2px solid var(--fill);
-      border-radius: radius('full');
-    }
-
     &-sm {
       height: 6px;
       &::-webkit-slider-thumb {
@@ -79,10 +69,6 @@
         width: spacing('4');
         height: spacing('4');
       }
-      &::-ms-thumb {
-        width: spacing('4');
-        height: spacing('4');
-      }
     }
     &-lg {
       height: 16px;
@@ -95,10 +81,6 @@
         width: spacing('6');
         height: spacing('6');
       }
-      &::-ms-thumb {
-        width: spacing('6');
-        height: spacing('6');
-      }
     }
     &:disabled {
       opacity: 0.3;

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

@@ -0,0 +1,133 @@
+@layer mw.layout {
+  // For a page that opens on a full-bleed picture and wants nothing on top of
+  // it: the bar starts above the screen and rides in over the first stretch of
+  // scroll. Inside the @supports, so a browser without scroll timelines gets a
+  // normal header rather than none at all.
+  //
+  // 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()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .mw-header-reveal {
+        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 ribbon is glued under the bar, so it has to leave and arrive with
+      // it - left behind it would hang alone at the top of an otherwise clean
+      // hero. No class of its own: a ribbon on a page with a revealing header
+      // has no other sensible behaviour.
+      body:has(.mw-header-reveal)
+        .mw-announcement:not(.mw-announcement-static) {
+        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. Without a ribbon
+  // that height is just the bar's.
+  .mw-header-reveal {
+    --mw-header-reveal-offset: var(--mw-header-height);
+  }
+
+  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 keyboard reaches the chrome long before the first scroll does, and a focus
+  // ring on something that is off screen is WCAG 2.4.11 - so focus brings it
+  // back, either half of the pair pulling in the other. `!important` is the one
+  // author declaration that outranks a running animation; dropping
+  // `animation-name` instead leaves the element stuck on its last value, because
+  // a restarted scroll timeline only catches up on the next scroll.
+  body:has(.mw-header-reveal:focus-within, .mw-announcement:focus-within) {
+    .mw-header-reveal {
+      top: 0 !important;
+      opacity: 1 !important;
+    }
+
+    .mw-announcement:not(.mw-announcement-static) {
+      transform: none !important;
+      opacity: 1 !important;
+    }
+  }
+
+  // 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.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-header-reveal.mw-header-away {
+      top: calc(-1 * var(--mw-header-reveal-offset));
+      opacity: 0;
+    }
+
+    .mw-header-driven {
+      // The shared list plus `top`, which is not in it - writing only `top`
+      // here would drop the header's own colour and shadow transitions.
+      transition:
+        var(--mw-transition),
+        top var(--mw-duration-slow) var(--mw-ease-out);
+    }
+
+    .mw-announcement.mw-announcement-away {
+      transform: translateY(
+        calc(-1 * (var(--mw-header-height) + var(--mw-announcement-height)))
+      );
+      opacity: 0;
+    }
+
+    .mw-announcement-driven {
+      transition:
+        transform var(--mw-duration-slow) var(--mw-ease-out),
+        opacity var(--mw-duration-slow) var(--mw-ease-out);
+    }
+  }
+
+  // `top` and not a transform: the off-canvas drawer inside the bar is
+  // position: fixed, and a transform on the header would make it the drawer's
+  // containing block - at every value, the resting one included.
+  // The wait sits in the keyframes and not in the range, because a range that
+  // starts past 0 leaves the bar in its resting state below that point - so the
+  // header would be visible for exactly the stretch it should stay away for.
+  @keyframes mw-header-reveal {
+    0%,
+    30% {
+      top: calc(-1 * var(--mw-header-reveal-offset));
+      opacity: 0;
+    }
+
+    100% {
+      top: 0;
+      opacity: 1;
+    }
+  }
+
+  // The ribbon holds nothing fixed, so it can use the cheaper transform
+  @keyframes mw-announcement-reveal {
+    0%,
+    30% {
+      transform: translateY(
+        calc(-1 * (var(--mw-header-height) + var(--mw-announcement-height)))
+      );
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

package/src/scss/layout/_index.scss

@@ -1,7 +1,11 @@
 @forward 'footer';
 @forward 'grid';
 @forward 'header';
+@forward 'header-reveal';
 @forward 'home';
 @forward 'main';
 @forward 'page-header';
 @forward 'section';
+
+// Last on purpose: mw-parallax-sticky has to beat the `position: relative`
+@forward 'parallax';

package/src/scss/layout/_main.scss

@@ -41,12 +41,27 @@
           transition: var(--mw-transition);
         }
 
-        // ...so the content has to sit above it
-        > * {
+        // ...so the content has to sit above it - except the parallax layer,
+        // which is the one thing that belongs underneath
+        > *:not(.mw-parallax-media) {
           position: relative;
           z-index: z-index('card');
         }
 
+        // Add `mw-parallax` here and a `.mw-parallax-media` child and the picture
+        // becomes its own layer, free to drift or to stay pinned. It reads the
+        // same token, so the image is still configured in one place - and a
+        // second media element carrying `mw-parallax-pattern` takes the other.
+        &:has(> .mw-parallax-media) {
+          background-image: none;
+
+          --mw-parallax-pattern-image: var(--mw-hero-pattern);
+
+          > .mw-parallax-media:not(.mw-parallax-pattern) {
+            background-image: var(--mw-hero-background);
+          }
+        }
+
         // The same shadow the scroll cue already carries: the light theme lifts
         // the photo to brightness(1.1) and pale ink alone stops holding its edge
         h1,