maverick-wave 5.38.0 → 6.0.0

package/src/scss/layout/_footer.scss

@@ -5,7 +5,8 @@
 @layer mw.layout {
   .mw-footer {
     background: var(--mw-footer-background);
-    padding: spacing('7') spacing('0');
+    padding: spacing('7') spacing('0')
+      calc(#{spacing('7')} + env(safe-area-inset-bottom, 0px));
     border-top: 1px solid var(--mw-border-accent);
 
     // The same ramp .mw-grid-4 rides, read from the one place it is written
@@ -15,10 +16,21 @@
       margin-bottom: spacing('6');
 
       @include grid.column-grid(map.get(grid.$column-steps, 4));
+
+      // Two or three columns fill the row instead of leaving a slot empty
+      @include media-up('lg') {
+        &:has(> :nth-child(2):last-child) {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        &:has(> :nth-child(3):last-child) {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+      }
     }
 
     &-column {
-      h3 {
+      :is(h2, h3, h4, .mw-footer-title) {
         font-size: font-size('md');
         margin-bottom: spacing('3');
         color: var(--mw-primary-text-color);
@@ -51,6 +63,7 @@
             color: var(--mw-text-muted-color);
             text-decoration: none;
             padding-bottom: 2px;
+            @include focus-ring;
 
             // Always drawn, unlike the navbar's: a footer link sits in a list of
             // them and needs to read as a link without being pointed at first
@@ -108,6 +121,7 @@
         border: 1px solid var(--mw-border-accent);
         box-shadow: var(--mw-elevation-3);
         text-decoration: none;
+        @include focus-ring;
 
         &:hover {
           background: var(--mw-primary-color);
@@ -168,6 +182,78 @@
       }
     }
 
+    // Imprint, privacy, cookie settings - the links a German site must carry
+    .mw-footer-links {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: spacing('1') spacing('5');
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      font-size: font-size('xs');
+
+      @include media-up('sm') {
+        font-size: font-size('sm');
+      }
+
+      a {
+        color: var(--mw-text-muted-color);
+        text-decoration: underline;
+        text-decoration-color: color-mix(
+          in srgb,
+          currentColor 40%,
+          transparent
+        );
+        text-underline-offset: 0.25em;
+        @include focus-ring;
+
+        &:hover {
+          color: var(--mw-primary-text-color);
+          text-decoration-color: currentColor;
+        }
+      }
+    }
+
+    // Copyright at one end, the links at the other; stacked and centred on a phone
+    .mw-footer-bottom {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: spacing('3');
+      margin-top: spacing('5');
+      padding-top: spacing('4');
+      border-top: 1px solid var(--mw-border-accent);
+      text-align: center;
+
+      // Also inside a wrapper that stacks the copyright over the date
+      :is(.mw-copyright, .mw-last-updated) {
+        width: auto;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        text-align: inherit;
+      }
+
+      .mw-copyright + .mw-last-updated {
+        margin-top: spacing('1');
+      }
+
+      // Nothing above it to set off
+      &:first-child {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+      }
+
+      @include media-up('md') {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        text-align: start;
+      }
+    }
+
     .mw-last-updated {
       text-align: center;
       color: var(--mw-text-muted-color);
@@ -180,4 +266,30 @@
       }
     }
   }
+
+  // An application's footer: the bottom bar alone, under the content
+  .mw-footer-compact {
+    padding-block: spacing('4')
+      calc(#{spacing('4')} + env(safe-area-inset-bottom, 0px));
+
+    .mw-footer-bottom {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: 0;
+    }
+  }
+
+  // The header bar's colours, so it bookends the page in either theme
+  .mw-footer-dark {
+    --mw-footer-background: var(--mw-header-background);
+    --mw-text-color: var(--mw-header-text-color);
+    --mw-text-muted-color: var(--mw-header-navbar-list-color);
+    --mw-primary-text-color: var(--mw-header-navbar-list-active-color);
+    --mw-card-background: var(--mw-dark-card-background);
+    --mw-border-accent: var(--mw-header-border);
+    --mw-focus-ring-color: var(--mw-header-navbar-list-active-color);
+
+    color: var(--mw-text-color);
+    color-scheme: dark;
+  }
 }

package/src/scss/layout/_grid.scss

@@ -350,9 +350,12 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
 @layer mw.utilities {
   // The `:nth-child(n)` reset carries the same specificity as the cycle rules,
   // so a narrower breakpoint can override the wider one's cycle for every child.
+  // Behind motion-safe too, or the cycle's :root guard outweighs these
   @mixin _reveal-stagger($cols) {
     &.mw-reveal-stagger > :nth-child(n) {
-      @include reveal-range(1);
+      @include motion-safe {
+        @include reveal-range(1);
+      }
     }
 
     // Guarded: Sass counts `from 2 through 1` downwards and would emit a rule
@@ -360,7 +363,9 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
     @if $cols > 1 {
       @for $i from 2 through $cols {
         &.mw-reveal-stagger > :nth-child(#{$cols}n + #{$i}) {
-          @include reveal-range($i);
+          @include motion-safe {
+            @include reveal-range($i);
+          }
         }
       }
     }

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

@@ -1,3 +1,5 @@
+@use '../abstracts' as *;
+
 // Carried by the float and not by the class, or the ring would still be there in
 // the arrived bar. Fixed values and not the elevation ramp: this lands on a
 // picture, not on a theme surface, and the light theme cuts its shadows for paper.
@@ -9,35 +11,40 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
   // 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 {
+    .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 {
+    // 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) {
+    // 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) {
+    // 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;
@@ -115,8 +122,8 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
   // 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.
-  @media (prefers-reduced-motion: no-preference) {
-    .mw-header-reveal.mw-header-away {
+  .mw-header-reveal.mw-header-away {
+    @include motion-safe {
       top: calc(-1 * var(--mw-header-reveal-offset));
       opacity: 0;
 
@@ -129,8 +136,10 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
         box-shadow: $float-edge;
       }
     }
+  }
 
-    .mw-header-driven {
+  .mw-header-driven {
+    @include motion-safe {
       // The shared list plus `top`: writing only `top` drops the bar's own.
       transition:
         var(--mw-transition),
@@ -142,15 +151,19 @@ $float-edge: (0 0 0 1px rgb(255 255 255 / 0.22), 0 4px 14px rgb(0 0 0 / 0.4));
           box-shadow var(--mw-duration-slow) var(--mw-ease-out);
       }
     }
+  }
 
-    .mw-announcement.mw-announcement-away {
+  .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 {
+  .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

@@ -10,6 +10,8 @@ $_control-size: 40px;
     left: spacing('0');
     width: 100%;
     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-background);
     backdrop-filter: blur(7px);
     border-bottom: 1px solid var(--mw-header-border);
@@ -338,7 +340,7 @@ $_control-size: 40px;
       }
 
       // Last, so the current page keeps its look while being hovered
-      @include active() {
+      &:is(.mw-active, .active, [aria-current='page']) {
         color: var(--mw-header-navbar-list-active-color);
         background: var(--mw-primary-background);
         // Marks the left edge of a stacked list. In a row the links are pills
@@ -369,7 +371,7 @@ $_control-size: 40px;
       }
     }
 
-    @media (prefers-reduced-motion: reduce) {
+    @include motion-reduced {
       transition-duration: 0.01ms;
 
       .mw-navbar-item {
@@ -470,13 +472,15 @@ $_control-size: 40px;
 
       &:hover,
       &.mw-active,
-      &.active {
+      &.active,
+      &[aria-current='page'] {
         color: var(--mw-header-navbar-list-active-color);
       }
 
       &:hover::after,
       &.mw-active::after,
-      &.active::after {
+      &.active::after,
+      &[aria-current='page']::after {
         transform: scaleX(1);
         opacity: 1;
       }
@@ -573,4 +577,17 @@ $_control-size: 40px;
       }
     }
   }
+
+  // Menus in the bar lie on the page's card, so their ring is the page's
+  .mw-header .mw-dropdown-menu {
+    --mw-focus-ring-color: var(--mw-primary-text-color);
+  }
+
+  // Forced colours paint the drawn line away; the current page gets a real one
+  @media (forced-colors: active) {
+    .mw-navbar-link:is(.mw-active, .active, [aria-current='page']) {
+      text-decoration: underline 2px;
+      text-underline-offset: 0.35em;
+    }
+  }
 }

package/src/scss/layout/_index.scss

@@ -1,3 +1,5 @@
+@forward 'app-shell';
+@forward 'bento';
 @forward 'footer';
 @forward 'grid';
 @forward 'header';

package/src/scss/layout/_parallax.scss

@@ -104,8 +104,8 @@
   }
 
   @supports (animation-timeline: view()) {
-    @media (prefers-reduced-motion: no-preference) {
-      .mw-parallax-slow {
+    .mw-parallax-slow {
+      @include motion-safe {
         animation-name: mw-parallax-band;
         animation-timing-function: linear;
         animation-fill-mode: both;
@@ -188,19 +188,21 @@
   // `animation:` that cannot carry a timeline. The default range is the whole
   // cover pass, so the band keeps moving as long as any part of it is on screen.
   @supports (animation-timeline: view()) {
-    @media (prefers-reduced-motion: no-preference) {
-      .mw-parallax-media {
+    .mw-parallax-media {
+      @include motion-safe {
         animation-name: mw-parallax;
         animation-timing-function: linear;
         animation-fill-mode: both;
         animation-timeline: view();
       }
+    }
 
-      // A pinned block does not travel through the viewport, so its view()
-      // timeline stands still with it. The document's own scroll is what the
-      // picture has left to play against - over the first screen, because after
-      // that the page has covered it anyway.
-      .mw-parallax-sticky .mw-parallax-media {
+    // A pinned block does not travel through the viewport, so its view()
+    // timeline stands still with it. The document's own scroll is what the
+    // picture has left to play against - over the first screen, because after
+    // that the page has covered it anyway.
+    .mw-parallax-sticky .mw-parallax-media {
+      @include motion-safe {
         animation-timeline: scroll(root);
         animation-range: 0 100dvh;
       }
@@ -213,8 +215,8 @@
   // 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) {
-    .mw-parallax-driven {
+  .mw-parallax-driven {
+    @include motion-safe {
       transform: translate3d(
         0,
         calc(var(--mw-parallax-depth) * (1 - 2 * var(--mw-parallax-progress))),

package/src/scss/utilities/_accessibility.scss

@@ -2,15 +2,7 @@
 
 @layer mw.utilities {
   .mw-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
+    @include visually-hidden;
   }
 
   // The first thing a keyboard user meets on the page: a link that jumps past the
@@ -28,11 +20,12 @@
     background: var(--mw-primary-color);
     color: var(--mw-primary-accent-text-color);
     font-weight: font-weight('medium');
-    box-shadow: var(--mw-elevation-3);
     transform: translateY(calc(-100% - #{spacing('5')}));
     transition: transform var(--mw-duration-fast) var(--mw-ease-out);
 
+    // Only on focus: parked above the edge, the shadow still reached into view
     &:focus-visible {
+      box-shadow: var(--mw-elevation-3);
       transform: translateY(0);
     }
   }
@@ -40,14 +33,6 @@
   // Content that is there for a screen reader but comes back on focus - the same
   // idea as sr-only, for something that has to be reachable by tab.
   .mw-sr-only-focusable:not(:focus):not(:focus-within) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
+    @include visually-hidden;
   }
 }

package/src/scss/utilities/_index.scss

@@ -7,6 +7,7 @@
 @forward 'flex';
 @forward 'print';
 @forward 'reveal';
+@forward 'shape';
 @forward 'spacing';
 @forward 'text';
 @forward 'touch-targets';

package/src/scss/utilities/_print.scss

@@ -12,10 +12,9 @@
 
   @media print {
     // Paper is white and ink is black, whatever the screen was told to be. The
-    // tokens are redeclared on .mw-theme-light too - that copy sits further
-    // down the tree and would otherwise shadow the one on :root.
+    // dark footer brings its own copy of these, which would shadow the root's.
     :root,
-    .mw-theme-light {
+    .mw-footer-dark {
       --mw-page-background: #fff;
       --mw-card-background: #fff;
       --mw-footer-background: #fff;
@@ -38,6 +37,11 @@
       color: #000;
     }
 
+    .mw-footer-dark {
+      --mw-primary-text-color: inherit;
+      color-scheme: light;
+    }
+
     // Chrome that is fixed on screen would print on the first page and cover
     // what is underneath, and navigation is useless on paper either way.
     .mw-header,

package/src/scss/utilities/_reveal.scss

@@ -10,26 +10,30 @@
   // context. Longhands and never the shorthand, which esbuild collapses into one
   // `animation:` that cannot carry a timeline.
   @supports (animation-timeline: view()) {
-    @media (prefers-reduced-motion: no-preference) {
-      :root:not(.mw-scroll-static) :is(.mw-reveal, .mw-reveal-stagger > *) {
+    :root:not(.mw-scroll-static) :is(.mw-reveal, .mw-reveal-stagger > *) {
+      @include motion-safe {
         animation-name: mw-reveal;
         animation-timing-function: var(--mw-ease-out);
         animation-fill-mode: backwards;
         animation-timeline: view();
         @include reveal-range(1);
       }
+    }
 
-      // A row crosses the viewport edge on one scroll step, so mw-reveal on each
-      // card rises as one slab. This shifts every second and third child instead -
-      // a wave. On the grid and not the cards, because the grid knows the columns.
-      //
-      // Cycles of three are the fallback for anything that is not one of the fixed
-      // grids; mw-grid-2 to -5 restate the cycle to their own count in _grid.scss.
-      .mw-reveal-stagger > :nth-child(3n + 2) {
+    // A row crosses the viewport edge on one scroll step, so mw-reveal on each
+    // card rises as one slab. This shifts every second and third child instead -
+    // a wave. On the grid and not the cards, because the grid knows the columns.
+    //
+    // Cycles of three are the fallback for anything that is not one of the fixed
+    // grids; mw-grid-2 to -5 restate the cycle to their own count in _grid.scss.
+    .mw-reveal-stagger > :nth-child(3n + 2) {
+      @include motion-safe {
         @include reveal-range(2);
       }
+    }
 
-      .mw-reveal-stagger > :nth-child(3n + 3) {
+    .mw-reveal-stagger > :nth-child(3n + 3) {
+      @include motion-safe {
         @include reveal-range(3);
       }
     }
@@ -40,21 +44,25 @@
   // 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 {
+  .mw-reveal-hidden {
+    @include motion-safe {
       opacity: 0;
       transform: translateY(40px);
     }
+  }
 
-    // The script has already hidden whatever was below the fold when the class
-    // arrives, and it only ever un-hides on intersection - without this the
-    // switch would leave those elements invisible instead of static.
-    :root.mw-scroll-static .mw-reveal-hidden {
+  // The script has already hidden whatever was below the fold when the class
+  // arrives, and it only ever un-hides on intersection - without this the
+  // switch would leave those elements invisible instead of static.
+  :root.mw-scroll-static .mw-reveal-hidden {
+    @include motion-safe {
       opacity: 1;
       transform: none;
     }
+  }
 
-    .mw-reveal-run {
+  .mw-reveal-run {
+    @include motion-safe {
       // `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.

package/src/scss/utilities/_shape.scss

@@ -0,0 +1,24 @@
+@use '../abstracts' as *;
+
+@layer mw.utilities {
+  // `clip`, not `hidden`: a wrapper clips without becoming a scroll container
+  .mw-shape-arch,
+  .mw-shape-signature,
+  .mw-shape-leaf {
+    overflow: clip;
+  }
+
+  // Oversized radii are scaled down together, which lands on a half circle
+  .mw-shape-arch {
+    border-radius: 999px 999px 0 0;
+  }
+
+  .mw-shape-signature {
+    border-radius: radius-sharp() radius('xl') radius-sharp() radius('xl');
+  }
+
+  // The silhouette taken to its end: the round pair opened up to the full side
+  .mw-shape-leaf {
+    border-radius: radius-sharp() 50% radius-sharp() 50%;
+  }
+}

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

@@ -62,6 +62,29 @@
       align-items: center;
     }
 
+    // Footer links grow to a target; the text's own underline replaces the drawn one
+    .mw-footer-column li a,
+    .mw-footer-links a {
+      display: inline-flex;
+      align-items: center;
+      min-height: 2.5rem;
+    }
+
+    .mw-footer-column li a {
+      text-decoration: underline;
+      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+      text-underline-offset: 0.25em;
+
+      &::after {
+        content: none;
+      }
+    }
+
+    .mw-footer .mw-social-links a {
+      min-width: 2.75rem;
+      min-height: 2.75rem;
+    }
+
     // A checkbox or radio is tapped by its label as much as by the box, so the
     // whole row has to be the target - which it only is if the row is tall enough
     .mw-checkbox,

package/src/scss/utilities/_variants.scss

@@ -44,12 +44,7 @@
   // page, told apart by their line alone. That line then has to carry them:
   // --mw-border is a neighbouring shade of the surface and reads as nothing once
   // the surface *is* the page, so it is redrawn from the ink instead.
-  //
-  // Theme-bound tokens, and those *are* re-declared on <body> when the toggle puts
-  // .mw-theme-light there - a value written on :root alone would be shadowed for
-  // the whole body subtree and the switch would do nothing in light mode.
-  :root.mw-surfaces-flush,
-  :root.mw-surfaces-flush .mw-theme-light {
+  :root.mw-surfaces-flush {
     --mw-card-background: var(--mw-page-background);
     --mw-footer-background: var(--mw-page-background);
     --mw-border: color-mix(in srgb, var(--mw-text-color) 20%, transparent);
@@ -227,3 +222,27 @@
     }
   }
 }
+
+@layer mw.utilities {
+  // Near-black from a root source: ink would be a light slab on a dark page
+  :root.mw-shadows-hard {
+    --mw-shadow-hard: oklch(from var(--mw-light-text-color) min(l, 0.12) c h);
+
+    @each $level, $offset in (1: 2px, 2: 4px, 3: 6px, 4: 8px, 5: 10px) {
+      --mw-elevation-#{$level}: #{$offset} #{$offset} 0 var(--mw-shadow-hard);
+    }
+  }
+}
+
+@layer mw.utilities {
+  // Black or white per fill by contrast-color(); without it the set tokens stay
+  @supports (color: contrast-color(red)) {
+    :root.mw-accent-text-auto {
+      @each $name in (primary, secondary, success, warning, danger, info) {
+        --mw-#{$name}-accent-text-color: contrast-color(
+          var(--mw-#{$name}-color)
+        );
+      }
+    }
+  }
+}