maverick-wave 5.38.0 → 6.0.0

package/src/scss/components/_modals.scss

@@ -1,42 +1,6 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
-  // Modal overlay - hidden by default
-  .mw-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--mw-overlay-background);
-    backdrop-filter: blur(3px);
-    z-index: z-index('modal')-10;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: spacing('7');
-    opacity: 0;
-    // `display` in the list and `allow-discrete` behind it, or the overlay is
-    // taken off the page the frame the class comes off and the fade out never
-    // renders - the modal inside it would slide down over nothing. The dialog
-    // version below has had this; the div version was landing hard.
-    transition:
-      opacity var(--mw-duration-base) var(--mw-ease-out),
-      display var(--mw-duration-base) allow-discrete;
-
-    // Show modal when class is added
-    &.mw-modal-open {
-      display: flex;
-      opacity: 1;
-
-      // A box that goes from `display: none` starts at its end state otherwise,
-      // so there is nothing to fade from
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
-
   // Modal container
   .mw-modal {
     background: var(--mw-card-background);
@@ -49,12 +13,6 @@
     display: flex;
     flex-direction: column;
     z-index: z-index('modal');
-    transform: scale(0.96) translateY(12px);
-    transition: transform var(--mw-duration-base) var(--mw-ease-out);
-
-    .mw-modal-open & {
-      transform: scale(1) translateY(0);
-    }
 
     // The four widths grow by a roughly even step (150 / 200 / 240px) so each
     // size is recognisably a size. Before, default and lg sat 130px apart - the
@@ -76,11 +34,6 @@
 
   // Phone: the dialog becomes a sheet
   @include media-down('sm') {
-    .mw-modal-overlay {
-      padding: spacing('0');
-      align-items: flex-end;
-    }
-
     .mw-modal,
     .mw-modal.mw-modal-sm,
     .mw-modal.mw-modal-lg,
@@ -89,13 +42,6 @@
       --mw-modal-max-height: 92dvh;
       border-radius: radius('xl') radius('xl') radius('none') radius('none');
       padding-bottom: env(safe-area-inset-bottom, 0px);
-      // Straight up from the bottom edge - a sheet does not scale in
-      transform: translateY(100%);
-      transition: transform var(--mw-duration-slow) var(--mw-ease-out);
-    }
-
-    .mw-modal-open .mw-modal {
-      transform: translateY(0);
     }
 
     // The grab handle. It does nothing - there is no drag-to-dismiss behind it -
@@ -136,11 +82,10 @@
     }
   }
 
-  // The same modal as a <dialog>, which brings the focus trap, Escape, the inert
-  // background and the scroll lock a div cannot have. Every rule above is
-  // class-based and applies unchanged; what follows is only what the top layer
-  // changes. `closedby="any"` dismisses on a backdrop click, and where that is
-  // not understood the framework script handles the click itself.
+  // A <dialog>, which brings the focus trap, Escape and the inert background.
+  // What follows is what the top layer changes on top of the rules above.
+  // `closedby="any"` dismisses on a backdrop click, and where that is not
+  // understood the framework script handles the click itself.
   dialog.mw-modal {
     // The UA draws its own box - a border, padding and a white background - and
     // `.mw-modal` above already has all three.
@@ -174,7 +119,7 @@
       display var(--mw-duration-base) allow-discrete;
 
     &[open] {
-      // A block, not the flex column of the div version and not a grid: iOS
+      // A block, not the flex column `.mw-modal` sets and not a grid: iOS
       // WebKit takes the intrinsic height of a scrolling flex or grid item in a
       // top-layer dialog as zero. A dialog shorter than its cap then shows its
       // header and footer and nothing between - a grid only hides it until the
@@ -223,17 +168,15 @@
       }
     }
 
-    // Phone: the same bottom sheet the div version turns into. The width, the
-    // height cap, the corners and the safe-area padding all come from the
-    // `.mw-modal` rule above, which is class-based and applies here too - only
-    // what a top-layer box needs on top of it is repeated.
+    // Phone: a bottom sheet. The width, the height cap, the corners and the
+    // safe-area padding come from the `.mw-modal` phone rule above.
     @include media-down('sm') {
       // The UA centres a dialog; a sheet sits on the bottom edge.
       margin: auto auto 0;
       width: 100%;
       // Straight up from the bottom edge - a sheet does not scale in, and it
       // travels the height of itself rather than twelve pixels, so it gets the
-      // slow duration the div sheet above uses for the same move.
+      // slow duration.
       transform: translateY(100%);
       transition:
         opacity var(--mw-duration-slow) var(--mw-ease-out),
@@ -251,9 +194,9 @@
     }
   }
 
-  // Neither shape locks the page scroll behind it - the <dialog> only makes the
-  // page inert, which still lets a finger or a wheel move it
-  :root:has(dialog.mw-modal[open], .mw-modal-overlay.mw-modal-open) {
+  // The <dialog> only makes the page inert, which still lets a finger or a
+  // wheel move it
+  :root:has(dialog.mw-modal[open]) {
     overflow: hidden;
     scrollbar-gutter: stable; // Or the page shifts by the hidden scrollbar
   }
@@ -339,21 +282,107 @@
     }
   }
 
-  // Backdrop for click-outside-to-close.
-  // The cursor says it is clickable, so it should also be reachable by keyboard -
-  // which means it wants to be a <button>. These four lines clear the browser
-  // defaults that come with one; on a <div> they change nothing.
-  .mw-modal-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
+  // Stays a side panel on a phone, where every other modal becomes a sheet
+  dialog.mw-modal.mw-modal-drawer {
+    inset-block: 0;
     right: 0;
-    bottom: 0;
-    z-index: z-index('modal')-5;
-    cursor: pointer;
-    appearance: none;
-    padding: 0;
-    background: none;
-    border: 0;
+    left: auto;
+    width: min(420px, 100vw - #{spacing('9')});
+    max-width: none;
+    height: 100dvh;
+    max-height: none;
+    margin: 0;
+    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
+    // Only the inner edge shows, and it keeps its half of the silhouette
+    border-radius: radius-sharp() radius('none') radius('none') radius('xl');
+    opacity: 1;
+    transform: translateX(100%);
+    transition:
+      transform var(--mw-duration-slow) var(--mw-ease-out),
+      overlay var(--mw-duration-slow) allow-discrete,
+      display var(--mw-duration-slow) allow-discrete;
+
+    &::after {
+      @include corner-accent(0, 'bottom');
+    }
+
+    &[open] {
+      // Flex is safe here: the height is fixed, so the body never sizes itself
+      display: flex;
+      flex-direction: column;
+      transform: none;
+
+      @starting-style {
+        transform: translateX(100%);
+      }
+    }
+
+    .mw-modal-body {
+      flex: 1 1 0;
+      min-height: 0;
+      max-height: none;
+    }
+
+    .mw-modal-header {
+      padding: spacing('3') spacing('5');
+
+      &::before {
+        content: none;
+      }
+    }
+
+    .mw-modal-footer {
+      padding: spacing('3') spacing('5');
+    }
+
+    // Opened with show() it is outside the top layer and needs its own z-index
+    &:not(:modal) {
+      z-index: z-index('modal');
+      box-shadow: var(--mw-elevation-4);
+    }
+  }
+
+  dialog.mw-modal.mw-modal-drawer-start {
+    right: auto;
+    left: 0;
+    border-radius: radius('none') radius('xl') radius-sharp() radius('none');
+    transform: translateX(-100%);
+
+    &::after {
+      @include corner-accent(0, 'top');
+    }
+
+    &[open] {
+      transform: none;
+
+      @starting-style {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  :root.mw-corners-even dialog.mw-modal.mw-modal-drawer {
+    border-radius: radius('md') radius('none') radius('none') radius('md');
+
+    // The single mark would sit on the screen edge - mirrored to the inner corner
+    &::after {
+      transform: scaleX(-1);
+    }
+  }
+
+  :root.mw-corners-even dialog.mw-modal.mw-modal-drawer-start {
+    border-radius: radius('none') radius('md') radius('md') radius('none');
+
+    &::after {
+      transform: none;
+    }
+  }
+
+  // A non-modal drawer leaves the page usable, so it keeps the page scroll
+  :root:has(dialog.mw-modal-drawer[open]:not(:modal)):not(
+      :has(dialog.mw-modal:modal)
+    ) {
+    overflow: visible;
+    scrollbar-gutter: auto;
   }
 }

package/src/scss/components/_occasions.scss

@@ -814,16 +814,18 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
   );
 
   @supports (animation-timeline: view()) {
-    @media (prefers-reduced-motion: no-preference) {
-      // Timed by the card's entry, which even the last card on a page completes;
-      // 60vh keeps a tall card from arriving only at the top of the screen
-      :root.mw-occasion-scroll :is(#{$_host}),
-      .mw-occasion-scroll:is(#{$_effect-classes}):is(#{$_carriers}) {
+    // Timed by the card's entry, which even the last card on a page completes;
+    // 60vh keeps a tall card from arriving only at the top of the screen
+    :root.mw-occasion-scroll :is(#{$_host}),
+    .mw-occasion-scroll:is(#{$_effect-classes}):is(#{$_carriers}) {
+      @include motion-safe {
         view-timeline: --mw-occasion-arrival;
       }
+    }
 
-      @each $effect, $arrival in $_arrivals {
-        #{_on($effect, '.mw-occasion-scroll')} {
+    @each $effect, $arrival in $_arrivals {
+      #{_on($effect, '.mw-occasion-scroll')} {
+        @include motion-safe {
           animation-name: mw-occasion-#{$arrival};
           animation-duration: auto;
           animation-timing-function: linear;
@@ -835,6 +837,24 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
     }
   }
 
+  // No view timelines (Firefox): main.js marks each host and swaps it on entry
+  @each $effect, $arrival in $_arrivals {
+    #{_on($effect, '.mw-occasion-scroll', '.mw-occasion-waiting::before')} {
+      @include motion-safe {
+        opacity: 0;
+      }
+    }
+
+    #{_on($effect, '.mw-occasion-scroll', '.mw-occasion-arriving::before')} {
+      @include motion-safe {
+        animation-name: mw-occasion-#{$arrival};
+        animation-duration: var(--mw-duration-slower);
+        animation-timing-function: var(--mw-ease-out);
+        animation-fill-mode: backwards;
+      }
+    }
+  }
+
   @keyframes mw-occasion-appear {
     from {
       opacity: 0;
@@ -960,11 +980,17 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
   // Below the header, so the bar stays clean, above cards and sections.
   .mw-occasion-drift {
     --mw-occasion-laps: 3;
+    --mw-occasion-progress: 0;
 
     z-index: z-index('header') - 20;
     opacity: 0;
   }
 
+  .mw-occasion-drift.mw-occasion-driven {
+    opacity: 1;
+    animation-name: none;
+  }
+
   // Visible only while the scroll drives it - on a page too short to scroll the
   // timeline is inactive, and every piece would stand in the top left corner
   @supports (animation-timeline: scroll()) {
@@ -984,14 +1010,14 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
   }
 
   @supports not (animation-timeline: scroll()) {
-    .mw-occasion-drift {
+    .mw-occasion-drift:not(.mw-occasion-driven) {
       display: none;
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .mw-occasion-intro,
-    .mw-occasion-drift {
+  .mw-occasion-intro,
+  .mw-occasion-drift {
+    @include motion-reduced {
       display: none;
     }
   }
@@ -1017,6 +1043,7 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
     --mw-occasion-angle: 0deg;
     --mw-occasion-tint: #fff;
     --mw-occasion-start: 0%;
+    --mw-occasion-from: 0;
     --mw-occasion-lap: 0;
 
     position: absolute;
@@ -1079,6 +1106,30 @@ $_host: '#{$_surface}, .mw-occasion-spot:not(#{$_effect-classes})';
     }
   }
 
+  // The same scrub fed by main.js: paused, parked at the laps travelled, 1s a lap
+  .mw-occasion-driven > .mw-occasion-particle {
+    $laps: calc(var(--mw-occasion-laps) + var(--mw-occasion-lap));
+    $travelled: calc(
+      max(0, var(--mw-occasion-progress) - var(--mw-occasion-from)) /
+        (1 - var(--mw-occasion-from)) * #{$laps} * -1s
+    );
+
+    animation-duration: 1s, 0.25s;
+    animation-delay: $travelled;
+    animation-iteration-count: $laps, calc(#{$laps} * 4);
+    animation-play-state: paused;
+    animation-timeline: auto;
+    animation-range: normal;
+
+    &::before {
+      animation-duration: 1s;
+      animation-delay: $travelled;
+      animation-iteration-count: $laps;
+      animation-play-state: paused;
+      animation-timeline: auto;
+    }
+  }
+
   // Thrown from a bottom corner: sideways with drag, up and back down on
   // separate properties so each keeps its own easing.
   .mw-occasion-bursting {

package/src/scss/components/_pagination.scss

@@ -96,4 +96,95 @@
       font-size: font-size('md');
     }
   }
+
+  // A phone gets "3 of 12" between the arrows instead of a row of numbers
+  .mw-pagination-pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('1');
+  }
+
+  .mw-pagination-page,
+  .mw-pagination-gap {
+    display: none;
+  }
+
+  .mw-pagination-status {
+    padding-inline: spacing('3');
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .mw-pagination-page {
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    padding-inline: spacing('2');
+    border: 1px solid transparent;
+    // The framework silhouette at button size
+    border-radius: radius-sharp() radius('md') radius-sharp() radius('md');
+    background: none;
+    color: var(--mw-text-color);
+    font: inherit;
+    font-size: font-size('sm');
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    cursor: pointer;
+    transition: var(--mw-transition-fast);
+    @include tappable;
+    @include focus-ring;
+    @include touch-floor {
+      min-width: 2.75rem;
+    }
+
+    &:hover {
+      background: var(--mw-gray-background);
+    }
+
+    &:is([aria-current='page'], .mw-active, .active) {
+      background: var(--mw-primary-color);
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-accent-text-color);
+      font-weight: font-weight('medium');
+      cursor: default;
+    }
+  }
+
+  .mw-pagination-gap {
+    min-width: 1.5rem;
+    color: var(--mw-text-muted-color);
+    text-align: center;
+  }
+
+  // First and last page: an arrow that leads nowhere says so
+  .mw-pagination-pages [aria-disabled='true'] {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  @include media-up('sm') {
+    .mw-pagination-page {
+      display: inline-flex;
+    }
+
+    .mw-pagination-gap {
+      display: inline-block;
+    }
+
+    .mw-pagination-status {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .mw-pagination-page:is([aria-current='page'], .mw-active, .active) {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/src/scss/components/_portrait-gallery.scss

@@ -33,7 +33,7 @@
       display: none;
     }
 
-    @media (prefers-reduced-motion: no-preference) {
+    @include motion-safe {
       scroll-behavior: smooth;
     }
   }

package/src/scss/components/_progress.scss

@@ -89,11 +89,11 @@
         @supports (animation-timeline: view()) {
           // Reduced motion skips the animation below, so the width has to be set
           // outright - the blanket rule in _base.scss keeps the transition instant.
-          @media (prefers-reduced-motion: reduce) {
+          @include motion-reduced {
             width: var(--mw-progress-value);
           }
 
-          @media (prefers-reduced-motion: no-preference) {
+          @include motion-safe {
             // Longhands and never the shorthand, which esbuild collapses into one
             // `animation:` that cannot carry a timeline.
             animation-name: mw-progress-fill;
@@ -150,4 +150,124 @@
       width: var(--mw-progress-value);
     }
   }
+
+  // Busy without a figure: a segment sweeps the track, a still hatch without motion
+  .mw-progress-indeterminate {
+    --mw-progress-indeterminate: var(--mw-secondary-color);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: repeating-linear-gradient(
+        -45deg,
+        var(--mw-progress-indeterminate) 0 6px,
+        transparent 6px 12px
+      );
+      opacity: 0.55;
+
+      @include motion-safe {
+        inset: 0 auto 0 0;
+        width: 35%;
+        background: var(--mw-progress-indeterminate);
+        opacity: 1;
+        animation-name: mw-progress-sweep;
+        animation-duration: motion(1.6s);
+        animation-timing-function: var(--mw-ease-in-out);
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+
+  @keyframes mw-progress-sweep {
+    from {
+      translate: -100% 0;
+    }
+
+    to {
+      translate: 300% 0;
+    }
+  }
+
+  // The same figure round; the value is a registered property, so a change animates
+  .mw-progress-ring {
+    --mw-progress-ring-color: var(--mw-secondary-color);
+    --mw-progress-ring-size: 4.5rem;
+    --mw-progress-ring-thickness: 0.5rem;
+
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    width: var(--mw-progress-ring-size);
+    aspect-ratio: 1;
+    color: var(--mw-text-color);
+    font-size: calc(var(--mw-progress-ring-size) * 0.24);
+    font-weight: font-weight('bold');
+    font-variant-numeric: tabular-nums lining-nums;
+    transition: --mw-progress-value var(--mw-duration-slower)
+      var(--mw-ease-in-out);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: radius('full');
+      background: conic-gradient(
+        var(--mw-progress-ring-color) var(--mw-progress-value),
+        var(--mw-gray-background) 0
+      );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - var(--mw-progress-ring-thickness)),
+        #000 calc(100% - var(--mw-progress-ring-thickness) + 1px)
+      );
+    }
+  }
+
+  .mw-progress-ring-sm {
+    --mw-progress-ring-size: 3rem;
+    --mw-progress-ring-thickness: 0.35rem;
+  }
+
+  .mw-progress-ring-lg {
+    --mw-progress-ring-size: 7rem;
+    --mw-progress-ring-thickness: 0.7rem;
+  }
+
+  @each $name, $col in $semantic-colors {
+    .mw-progress-ring-#{$name} {
+      --mw-progress-ring-color: #{$col};
+    }
+  }
+
+  // Fill, sweep and arc are all backgrounds, which forced colours would drop
+  @media (forced-colors: active) {
+    .mw-progress-bar {
+      outline: 1px solid CanvasText;
+    }
+
+    .mw-progress-fill,
+    .mw-progress-indeterminate::after,
+    .mw-progress-ring::before {
+      forced-color-adjust: none;
+    }
+
+    .mw-progress-fill {
+      --mw-progress-ink: HighlightText;
+
+      background: Highlight;
+    }
+
+    .mw-progress-indeterminate {
+      --mw-progress-indeterminate: Highlight;
+    }
+
+    .mw-progress-ring::before {
+      background: conic-gradient(
+        Highlight var(--mw-progress-value),
+        GrayText 0
+      );
+    }
+  }
 }