maverick-wave 5.38.0 → 6.0.0

package/src/scss/abstracts/_mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:selector';
 @use 'sass:math';
 @use 'variables' as v;
 @use 'functions' as *;
@@ -109,6 +110,19 @@
   }
 }
 
+// Out of sight, still read by a screen reader
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 // Without the `min-width: 0` that mw-text-truncate carries: that fixes the layout
 // around the text, and handing it to seven components would change how they size
 @mixin truncate {
@@ -127,6 +141,26 @@
   }
 }
 
+// Motion the OS and `mw-motion-off` both allow; unify() merges a leading :root
+@mixin motion-safe {
+  @media (prefers-reduced-motion: no-preference) {
+    @at-root #{selector.unify(&, ':root:not(.mw-motion-off) *')} {
+      @content;
+    }
+  }
+}
+
+// The other side of the same switch
+@mixin motion-reduced {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+
+  @at-root #{selector.unify(&, ':root.mw-motion-off *')} {
+    @content;
+  }
+}
+
 // A hover that *travels*. Separate from `hover`, because movement has two more
 // opt-outs than a colour change does: reduced motion, where a transform still
 // jumps to its end position in one frame however short the duration is, and the
@@ -138,7 +172,7 @@
 // and a label that lands where it belongs beats two pixels of travel.
 @mixin hover-move {
   @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
-    :root:not(.mw-hover-static) &:hover:not([data-tooltip]) {
+    :root:not(.mw-hover-static, .mw-motion-off) &:hover:not([data-tooltip]) {
       @content;
     }
   }
@@ -200,29 +234,6 @@
   scrollbar-width: thin;
   // Firefox needs both values - a single one is invalid and drops the declaration
   scrollbar-color: #{$thumb} #{$track};
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #{$track};
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #{$thumb};
-    border-radius: 4px;
-
-    &:hover {
-      background: var(--mw-primary-text-color);
-    }
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: #{$track};
-  }
 }
 
 // A hairline of light along the top edge and a shadow underneath, as if the light

package/src/scss/abstracts/_variables.scss

@@ -3,6 +3,9 @@
 
 $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
 
+// Opt-in, because a page only crossfades into one that carries the rule too
+$mw-page-transitions: false !default;
+
 $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
@@ -292,6 +295,13 @@ $base-colors: (
   'section-alternate-pattern': fade('gray-color', 30%),
   'form-elements-background': $form-elements-background,
   'form-elements-color': shade('light-text-color', 18%),
+  // Opaque and alike in both themes; readonly keeps full ink, disabled mutes it
+  'form-elements-readonly-background': string.unquote(
+      'color-mix(in oklab, var(--mw-form-elements-background) 70%, var(--mw-gray-color))'
+    ),
+  'form-elements-disabled-background': string.unquote(
+      'color-mix(in oklab, var(--mw-form-elements-background) 70%, var(--mw-gray-color))'
+    ),
 );
 
 // Status colors. Every status offers the same four tones.
@@ -525,6 +535,8 @@ $z-index: (
   'lift': 3,
   'card': 10,
   'menu': 30,
+  // Over the page and its menus, under the open navigation's scrim
+  'action-bar': 98,
   // The scrim sits under the bar, the panel hangs off it, the logo clears the
   // panel and the burger stays on top of all of them while it is the X.
   'header-scrim': 99,
@@ -540,6 +552,9 @@ $z-index: (
   'occasion': 1000,
 );
 
+// Native, ARIA, and Angular's classes for a validator that lives in TypeScript
+$invalid-states: ':user-invalid, [aria-invalid="true"], .ng-invalid.ng-touched';
+
 // Native select arrow, drawn as a background layer because `appearance: none`
 // removes the OS one. Shared, because any control that adds a second
 // background layer (see `.mw-prefilled`) has to restate the whole list.

package/src/scss/base/_base.scss

@@ -107,12 +107,13 @@
 
     // The only way the chrome the browser draws itself follows the theme:
     // scrollbars, the select popup, the date picker panel, number spinners.
-    // Under `switchable` this is also what light-dark() reads, so the pair below
-    // does double duty and the @supports block widens it to `light dark`.
+    // Under `switchable` it is also what every light-dark() token reads.
     @if $mw-theme-mode == 'light' {
       color-scheme: light;
-    } @else {
+    } @else if $mw-theme-mode == 'dark' {
       color-scheme: dark;
+    } @else {
+      color-scheme: light dark;
     }
     // Native controls the framework does not paint over take the brand, not OS blue
     accent-color: var(--mw-primary-color);
@@ -202,68 +203,44 @@
   }
 
   @if $mw-theme-mode == 'switchable' {
-    .mw-theme-light {
-      // Light theme variables for switching
-      @each $name, $value in $light-theme-colors {
-        --mw-#{$name}: var(--mw-light-#{$name});
+    // A custom property holding light-dark() is resolved where it is *used*,
+    // against that element's color-scheme - so one declaration on :root serves
+    // both themes, and a class further down switches every token by changing
+    // nothing but the scheme. The page also follows the OS before any script.
+    :root {
+      @each $name, $value in $_theme-colors {
+        --mw-#{$name}: light-dark(
+          var(--mw-light-#{$name}),
+          var(--mw-dark-#{$name})
+        );
       }
-
-      color-scheme: light;
     }
 
-    // The same two themes, declared once instead of twice. A custom property
-    // holding light-dark() is resolved where it is *used*, against that
-    // element's color-scheme - so one declaration on :root serves both, and a
-    // class further down switches every token by changing nothing but the
-    // scheme. The page then also follows the OS out of the box, which the
-    // class-only route could never do: before the script had run, a machine set
-    // to light still got the dark theme for a frame.
-    //
-    // The block above stays as the fallback for Chrome 119-122 and Safari
-    // 16.4-17.4, which are inside the declared browserslist but predate
-    // light-dark(). Drop it, and the two class rules with it, once the support
-    // floor moves past Chrome 123 / Safari 17.5.
-    @supports (color: light-dark(#000, #fff)) {
-      :root,
-      .mw-theme-light {
-        @each $name, $value in $_theme-colors {
-          --mw-#{$name}: light-dark(
-            var(--mw-light-#{$name}),
-            var(--mw-dark-#{$name})
-          );
-        }
-      }
-
+    // Not a color, so it cannot ride along above - it follows the OS here and
+    // is overridden by whichever class the toggle puts on <html>
+    @media (prefers-color-scheme: light) {
       :root {
-        color-scheme: light dark;
-      }
-
-      // Not a color, so it cannot ride along above - it follows the OS here and
-      // is overridden by whichever class the toggle puts on the body
-      @media (prefers-color-scheme: light) {
-        :root {
-          @each $name in $theme-non-colors {
-            --mw-#{$name}: var(--mw-light-#{$name});
-          }
+        @each $name in $theme-non-colors {
+          --mw-#{$name}: var(--mw-light-#{$name});
         }
       }
+    }
 
-      .mw-theme-light {
-        color-scheme: light;
+    .mw-theme-light {
+      color-scheme: light;
 
-        @each $name in $theme-non-colors {
-          --mw-#{$name}: var(--mw-light-#{$name});
-        }
+      @each $name in $theme-non-colors {
+        --mw-#{$name}: var(--mw-light-#{$name});
       }
+    }
 
-      // Only reachable once the OS says light: the explicit counterpart to the
-      // class above, so a reader who wants dark on a light machine gets it
-      .mw-theme-dark {
-        color-scheme: dark;
+    // Only reachable once the OS says light: the explicit counterpart to the
+    // class above, so a reader who wants dark on a light machine gets it
+    .mw-theme-dark {
+      color-scheme: dark;
 
-        @each $name in $theme-non-colors {
-          --mw-#{$name}: var(--mw-dark-#{$name});
-        }
+      @each $name in $theme-non-colors {
+        --mw-#{$name}: var(--mw-dark-#{$name});
       }
     }
   }
@@ -294,23 +271,31 @@
   // The duration tokens cover everything built on them, the blanket rule below
   // the few animations that name their own timing. 1ms and not 0: a zero-length
   // transition never fires transitionend, and a script waiting for it would hang.
+  @mixin _still-tokens {
+    --mw-duration-instant: 1ms;
+    --mw-duration-fast: 1ms;
+    --mw-duration-base: 1ms;
+    --mw-duration-slow: 1ms;
+    --mw-duration-slower: 1ms;
+  }
+
+  @mixin _still-everything {
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --mw-duration-instant: 1ms;
-      --mw-duration-fast: 1ms;
-      --mw-duration-base: 1ms;
-      --mw-duration-slow: 1ms;
-      --mw-duration-slower: 1ms;
+      @include _still-tokens;
     }
 
     *,
     *::before,
     *::after {
-      animation-duration: 1ms !important;
-      animation-delay: 0ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 1ms !important;
-      transition-delay: 0ms !important;
+      @include _still-everything;
     }
 
     html {
@@ -318,6 +303,18 @@
     }
   }
 
+  // The same switch, thrown by the page instead of the OS
+  :root.mw-motion-off {
+    @include _still-tokens;
+    scroll-behavior: auto;
+
+    *,
+    *::before,
+    *::after {
+      @include _still-everything;
+    }
+  }
+
   // Without this a theme flip starts ~5900 concurrent transitions at once
   .mw-theme-switching,
   .mw-theme-switching *,
@@ -326,3 +323,49 @@
     transition: none !important;
   }
 }
+
+@layer mw.base {
+  // The dark-*/light-* sources: the theme aliases read them, so both themes follow
+  @media (prefers-contrast: more) {
+    :root {
+      --mw-dark-border: #{fade('dark-text-color', 55%)};
+      --mw-light-border: #{fade('light-text-color', 55%)};
+      --mw-dark-border-accent: var(--mw-dark-primary-text-color);
+      --mw-light-border-accent: var(--mw-light-primary-text-color);
+      --mw-light-corner-accent: var(--mw-light-primary-text-color);
+      --mw-dark-text-muted-color: #{muted(0.82)};
+      --mw-light-text-muted-color: #{muted(0.4)};
+      --mw-focus-ring-width: 3px;
+
+      // 4.5:1 on a card instead of the 3:1 the default ink is tuned to
+      @each $name
+        in ('primary', 'secondary', 'success', 'warning', 'danger', 'info')
+      {
+        --mw-dark-#{$name}-text-color: #{ink-on-dark('#{$name}-color', 0.66)};
+        --mw-light-#{$name}-text-color: oklch(
+          from var(--mw-#{$name}-color) min(l, 0.45) c h
+        );
+      }
+    }
+  }
+
+  // Text on a see-through fill only - the hero's backdrop-filter is brightness
+  @media (prefers-reduced-transparency: reduce) {
+    .mw-announcement,
+    .mw-hero-badge,
+    .mw-container:has(.mw-hero) .mw-btn-outline:not(:hover) {
+      backdrop-filter: none !important;
+    }
+
+    .mw-announcement {
+      background: var(--mw-primary-color) !important;
+    }
+
+    .mw-hero-badge,
+    .mw-container:has(.mw-hero) .mw-btn-outline:not(:hover) {
+      background: oklch(
+        from var(--mw-hero-text-color) calc(1 - l) 0 h
+      ) !important;
+    }
+  }
+}

package/src/scss/base/_index.scss

@@ -1,3 +1,4 @@
 @forward 'reset';
 @forward 'base';
 @forward 'typography';
+@forward 'page-transitions';

package/src/scss/base/_page-transitions.scss

@@ -0,0 +1,29 @@
+@use '../abstracts' as *;
+
+@if $mw-page-transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    @view-transition {
+      navigation: auto;
+    }
+  }
+
+  @layer mw.base {
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+      animation-duration: var(--mw-duration-slow);
+      animation-timing-function: var(--mw-ease-in-out);
+    }
+
+    // mw-motion-off cannot reach the at-rule above, so the pages swap unfaded
+    :root.mw-motion-off::view-transition-group(*),
+    :root.mw-motion-off::view-transition-old(*),
+    :root.mw-motion-off::view-transition-new(*) {
+      animation-name: none;
+    }
+
+    // Its own group, so the bar stands still while the page under it fades
+    .mw-header {
+      view-transition-name: mw-header;
+    }
+  }
+}

package/src/scss/base/_reset.scss

@@ -31,14 +31,6 @@
     overflow-wrap: break-word;
     -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: 100dvh;
-    }
   }
 
   // The UA rule behind the `hidden` attribute is `[hidden] { display: none }`, and

package/src/scss/components/_accordions.scss

@@ -1,6 +1,27 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // aria-expanded on the header opens it too, for markup an application renders
+  @mixin _open-header {
+    @include active {
+      @content;
+    }
+
+    &[aria-expanded='true'] {
+      @content;
+    }
+  }
+
+  @mixin _open-content {
+    @include active {
+      @content;
+    }
+
+    @at-root .mw-accordion-header[aria-expanded='true'] + #{&} {
+      @content;
+    }
+  }
+
   .mw-accordion {
     border: 1px solid var(--mw-border);
     @include surface;
@@ -73,7 +94,7 @@
         transform: rotate(0deg);
       }
 
-      @include active() {
+      @include _open-header {
         background: var(--mw-primary-color);
         color: var(--mw-primary-accent-text-color);
 
@@ -113,7 +134,7 @@
         }
       }
 
-      @include active() {
+      @include _open-content {
         grid-template-rows: 1fr;
         max-height: 500px;
         overflow-y: auto;
@@ -123,24 +144,8 @@
           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;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: var(--mw-card-background);
-          border-radius: radius('sm');
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: var(--mw-primary-color-hover);
-          border-radius: radius('sm');
-        }
       }
     }
   }

package/src/scss/components/_action-bar.scss

@@ -0,0 +1,143 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  :root {
+    --mw-action-bar-height: 3.75rem;
+  }
+
+  // Reserved while the bar is up, so focus never lands under it (WCAG 2.4.11)
+  :root:has(.mw-action-bar:not(.mw-action-bar-embedded)) {
+    --mw-action-bar-reserve: calc(
+      var(--mw-action-bar-height) + env(safe-area-inset-bottom, 0px)
+    );
+
+    scroll-padding-bottom: var(--mw-action-bar-reserve);
+
+    > body {
+      padding-bottom: var(--mw-action-bar-reserve);
+    }
+  }
+
+  // Chrome like the header, so it takes the header's colours in both themes
+  .mw-action-bar {
+    --mw-focus-ring-color: var(--mw-header-navbar-list-active-color);
+
+    position: fixed;
+    inset: auto 0 0;
+    z-index: z-index('action-bar');
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: stretch;
+    gap: spacing('2');
+    min-height: calc(
+      var(--mw-action-bar-height) + env(safe-area-inset-bottom, 0px)
+    );
+    padding: spacing('2') max(#{spacing('3')}, env(safe-area-inset-right, 0px))
+      calc(#{spacing('2')} + env(safe-area-inset-bottom, 0px))
+      max(#{spacing('3')}, env(safe-area-inset-left, 0px));
+    background: var(--mw-header-background);
+    border-top: 1px solid var(--mw-header-border);
+    box-shadow: 0 -6px 18px var(--mw-shadow-far);
+
+    &-embedded {
+      position: absolute;
+    }
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: spacing('1');
+      min-width: 0;
+      min-height: 2.75rem;
+      padding: spacing('1') spacing('2');
+      border: 0;
+      border-radius: radius('md');
+      background: transparent;
+      color: var(--mw-header-navbar-list-color);
+      font: inherit;
+      font-size: font-size('xs');
+      font-weight: font-weight('medium');
+      line-height: 1.15;
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      transition: var(--mw-transition-fast);
+
+      @include tappable;
+      @include focus-ring;
+
+      > i {
+        font-size: font-size('lg');
+      }
+
+      > :is(svg, img) {
+        flex-shrink: 0;
+        width: 1.35rem;
+        height: 1.35rem;
+      }
+
+      > span {
+        max-width: 100%;
+        @include truncate;
+      }
+
+      &:hover {
+        color: var(--mw-header-text-color);
+        background: color-mix(
+          in srgb,
+          var(--mw-header-text-color) 10%,
+          transparent
+        );
+      }
+
+      @include motion-safe {
+        &:active {
+          transform: scale(0.96);
+          transition-duration: var(--mw-duration-instant);
+        }
+      }
+    }
+
+    &-primary {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
+      box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent);
+
+      &:hover {
+        background: var(--mw-primary-color-hover);
+        color: var(--mw-primary-accent-text-color);
+      }
+    }
+  }
+
+  @include media-up('md') {
+    :root:has(
+      .mw-action-bar:not(.mw-action-bar-embedded, .mw-action-bar-always)
+    ) {
+      --mw-action-bar-reserve: 0px;
+    }
+
+    .mw-action-bar:not(.mw-action-bar-always, .mw-action-bar-embedded) {
+      display: none;
+    }
+
+    // Stretched across a desktop the four targets would sit a screen apart
+    .mw-action-bar {
+      justify-content: center;
+      grid-auto-columns: minmax(0, 10rem);
+    }
+  }
+
+  @media print {
+    :root:has(.mw-action-bar:not(.mw-action-bar-embedded)) {
+      --mw-action-bar-reserve: 0px;
+    }
+
+    .mw-action-bar {
+      display: none;
+    }
+  }
+}

package/src/scss/components/_alerts.scss

@@ -38,7 +38,6 @@
       margin: 0;
       line-height: 1.5;
       font-size: font-size('sm');
-      opacity: 0.9;
 
       & + p {
         margin-top: spacing('2');
@@ -87,4 +86,17 @@
       }
     }
   }
+
+  // Undo, Retry, a link to the details - under the message, never beside it
+  .mw-alert-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('2');
+    margin-top: spacing('3');
+
+    // On a status tint the brand ink can fail; the alert's own text never does
+    :is(.mw-btn-link, .mw-btn-ghost) {
+      color: inherit;
+    }
+  }
 }

package/src/scss/components/_avatars.scss

@@ -272,4 +272,21 @@
       background: #{$col};
     }
   }
+
+  // The rest of a group as a count - "+4" after the faces that fit
+  .mw-avatar-more {
+    align-items: center;
+    justify-content: center;
+    background: var(--mw-surface-muted);
+    color: var(--mw-text-color);
+    font-weight: font-weight('bold');
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    user-select: none;
+
+    // No photo, so neither the corner arc nor the sweep has anything to mark
+    &::before {
+      content: none;
+    }
+  }
 }

package/src/scss/components/_badge.scss

@@ -153,4 +153,16 @@
   .mw-badge-status-muted .mw-badge-dot {
     background: var(--mw-gray-color);
   }
+
+  // Forced colours drop every fill: a border keeps the badge, the dot its ink
+  @media (forced-colors: active) {
+    .mw-badge {
+      border: 1px solid CanvasText;
+    }
+
+    .mw-badge-dot {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
 }