maverick-wave 5.16.0 → 5.19.0

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

@@ -1,3 +1,12 @@
+// Floating free over a picture, a control has to carry its own edge - the burger
+// and the login button bring a primary surface, the theme toggle is a dark pill
+// that a dark photo swallows. It travels with the float and not with the class,
+// or the ring would still be there in the arrived bar, on one control and not
+// its neighbour. Fixed values and not the elevation ramp, the same call the
+// parallax shadow makes: this lands on the 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 {
   // 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
@@ -17,6 +26,28 @@
         animation-range: 0 420px;
       }
 
+      // Anything carrying mw-header-keep sits the ride out: the bar travels,
+      // the element travels the same distance back and stays where it is. The
+      // distance is the bar's own, so it waits at the position it will hold in
+      // the arrived bar - nothing jumps at the end, the bar just closes in
+      // behind it. For a login or burger button that has to be reachable while
+      // the hero is still untouched.
+      .mw-header-reveal .mw-header-keep {
+        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 has to
+      // go as soon as something is meant to stay visible through it. No loss:
+      // the bar is off screen for that stretch anyway, the fade only softened
+      // the last few pixels of the arrival.
+      .mw-header-reveal:has(.mw-header-keep) {
+        animation-name: mw-header-slide;
+      }
+
       // 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
@@ -51,18 +82,48 @@
   // 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) {
+  //
+  // A keep element is on screen already and needs no rescue, so it is left out -
+  // otherwise a click on the theme toggle, which focuses it, would haul in the
+  // whole bar. It takes `:focus` on a descendant and not `:focus-within` on the
+  // header: within also matches every wrapper around the focused control, and no
+  // `:not()` on those can tell which one holds the keep.
+  body:has(
+    .mw-header-reveal :focus:not(.mw-header-keep, .mw-header-keep *),
+    .mw-announcement:focus-within
+  ) {
     .mw-header-reveal {
       top: 0 !important;
       opacity: 1 !important;
     }
 
+    .mw-header-keep {
+      translate: none !important;
+      box-shadow: none !important;
+    }
+
     .mw-announcement:not(.mw-announcement-static) {
       transform: none !important;
       opacity: 1 !important;
     }
   }
 
+  // Same treatment while the drawer is open, which mw-header-keep makes
+  // reachable long before the bar arrives. The drawer is fixed but hangs off
+  // the header - backdrop-filter makes that one its containing block, the way a
+  // transform would - so with the bar still away it would sit a header height
+  // too high.
+  body:has(.mw-header-reveal):has(.mw-navbar.open) {
+    .mw-header-reveal {
+      top: 0 !important;
+    }
+
+    .mw-header-keep {
+      translate: none !important;
+      box-shadow: none !important;
+    }
+  }
+
   // 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
@@ -72,6 +133,15 @@
     .mw-header-reveal.mw-header-away {
       top: calc(-1 * var(--mw-header-reveal-offset));
       opacity: 0;
+
+      &:has(.mw-header-keep) {
+        opacity: 1;
+      }
+
+      .mw-header-keep {
+        translate: 0 var(--mw-header-reveal-offset);
+        box-shadow: $float-edge;
+      }
     }
 
     .mw-header-driven {
@@ -80,6 +150,12 @@
       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);
+      }
     }
 
     .mw-announcement.mw-announcement-away {
@@ -115,6 +191,35 @@
     }
   }
 
+  // The same ride without the fade, for a bar something stays visible through
+  @keyframes mw-header-slide {
+    0%,
+    30% {
+      top: calc(-1 * var(--mw-header-reveal-offset));
+    }
+
+    100% {
+      top: 0;
+    }
+  }
+
+  // `translate` and not `transform`: the burger puts its hover lift and its
+  // press on transform, and a running animation outranks an author declaration
+  // - it would hold the button flat for the rest of the page. The standalone
+  // property stacks with the shorthand instead of replacing it.
+  @keyframes mw-header-keep {
+    0%,
+    30% {
+      translate: 0 var(--mw-header-reveal-offset);
+      box-shadow: $float-edge;
+    }
+
+    100% {
+      translate: none;
+      box-shadow: none;
+    }
+  }
+
   // The ribbon holds nothing fixed, so it can use the cheaper transform
   @keyframes mw-announcement-reveal {
     0%,

package/src/scss/layout/_main.scss

@@ -338,11 +338,29 @@
     // bottom edge, the bubble does not fit, and it gets pushed back over the
     // trigger it belongs to. What this gives up is the clipping immunity the
     // anchored path buys - a modifier inside a scroll container is cut off.
+    //
+    // Opting out has to restore the placement, not just the positioning scheme:
+    // the anchored path below is the later rule and clears `bottom`, `top`,
+    // `left` and the centring transform so `position-area` can resolve them
+    // itself. Leave that cleared and the box falls to its static position, which
+    // for a pseudo element is inside the trigger it is supposed to sit above.
+    // The three rules under this one then move the one edge each of them owns.
     &:is(.mw-tooltip-below, .mw-tooltip-end, .mw-tooltip-start) {
       &::before,
       &::after {
         position: absolute;
         position-area: none;
+        bottom: 100%;
+        top: auto;
+        left: 50%;
+      }
+
+      &::before {
+        transform: translateX(-50%);
+      }
+
+      &::after {
+        transform: translateX(-50%) rotate(45deg);
       }
     }
 

package/src/scss/utilities/_touch-targets.scss

@@ -100,7 +100,8 @@
     // The 18px silhouette stays: mini buttons sit in tag rows and table cells,
     // where growing the circle would shift the layout around them. Only the hit
     // area grows, to 28px - clear of the 24px floor. The extra margin keeps two
-    // neighbouring hit areas from overlapping.
+    // neighbouring hit areas from overlapping. One with a `data-tooltip` is the
+    // exception the mixin makes and goes to a 24px circle instead.
     .mw-btn-mini {
       margin-left: spacing('4');
       @include hit-area(5px);
@@ -117,9 +118,9 @@
       @include hit-area(6px);
     }
 
-    // The box itself and not a hit area over it: half of these carry a
-    // `data-tooltip`, which owns both pseudo-elements, so the trick above lands
-    // on some of the logos and silently skips the rest.
+    // One size for the whole row rather than hit-area(): half of these carry a
+    // `data-tooltip`, and the mixin treats those differently by design - a row
+    // of logos where some grew and some did not reads as a rendering fault.
     .mw-techstack-item-sm {
       min-width: 2.5rem;
       min-height: 2.5rem;