maverick-wave 5.4.0 → 5.5.0

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

@@ -63,6 +63,39 @@
     }
   }
 
+  // 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.

package/src/scss/layout/_parallax.scss

@@ -146,6 +146,26 @@
     }
   }
 
+  // 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.
+  //
+  // 0 puts the layer at +depth and 1 at -depth, the two ends of the keyframes
+  // below. Declared and not only used, so the frame before the script has
+  // written anything sits at rest instead of nowhere.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-parallax-driven {
+      --mw-parallax-progress: 0.5;
+
+      transform: translate3d(
+        0,
+        calc(var(--mw-parallax-depth) * (1 - 2 * var(--mw-parallax-progress))),
+        0
+      );
+    }
+  }
+
   @keyframes mw-parallax {
     from {
       transform: translate3d(0, var(--mw-parallax-depth), 0);

package/src/scss/utilities/_reveal.scss

@@ -36,6 +36,28 @@
     }
   }
 
+  // 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.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-reveal-hidden {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+
+    .mw-reveal-run {
+      // `backwards` for the reason above - a forwards fill would pin the
+      // transform and cost the card its hover lift. The delay comes inline,
+      // from the element's column.
+      animation-name: mw-reveal;
+      animation-duration: var(--mw-duration-slower);
+      animation-timing-function: var(--mw-ease-out);
+      animation-fill-mode: backwards;
+    }
+  }
+
   @keyframes mw-reveal {
     from {
       opacity: 0;

package/.impeccable/config.local.json

@@ -1,5 +0,0 @@
-{
-  "hook": {
-    "consent": "accepted"
-  }
-}

package/.impeccable/hook.cache.json

@@ -1,75 +0,0 @@
-{
-  "version": 1,
-  "sessions": {
-    "5682ec58-6688-479f-994f-990ff918c05d": {
-      "updatedAt": 1789084033412,
-      "files": {
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_header.scss": {
-          "editCount": 3,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_slider.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/js/main.js": {
-          "editCount": 7,
-          "findings": []
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/index.html": {
-          "editCount": 2,
-          "findings": [
-            "low-contrast:0:3.3:1 (need 4.5:1) — text #7d85a5 on #313746",
-            "pulsing-dot:0:.mw-spinner-dots>div — 16x16px dot with infinite \"mw-bounce\" animation",
-            "dark-glow:0:Colored box-shadow glow (#d1bb21) on dark page"
-          ]
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/partials/typography-container.html": {
-          "editCount": 2,
-          "findings": [],
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/base/_base.scss": {
-          "editCount": 2,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_section.scss": {
-          "editCount": 7,
-          "findings": [],
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_form.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/components/_alerts.scss": {
-          "editCount": 1,
-          "findings": ["side-tab:83"],
-          "stopBaseline": {
-            "version": 1,
-            "engine": "0.1.5",
-            "counts": {
-              "62d926b4b80efa38e6fbf0fe65f45cf171d9b8a80be0b2ee47ac4cbb6c9498d0": 1
-            }
-          },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_main.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        }
-      },
-      "footerShown": true
-    }
-  }
-}