maverick-wave 5.7.0 → 5.10.0

package/src/scss/base/_base.scss

@@ -1,6 +1,17 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '../abstracts' as *;
 
 @layer mw.base {
+  // Registered because it is multiplied into all six duration tokens below: a
+  // value that does not parse takes every one of them with it, and a page with
+  // no transitions at all is a hard failure for a typo in one line.
+  @property --mw-motion-scale {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1;
+  }
+
   // Active theme set and its token prefix, derived from $mw-theme-mode
   $_active-theme: $dark-theme-colors;
   $_active-prefix: 'dark';
@@ -10,6 +21,14 @@
     $_active-prefix: 'light';
   }
 
+  // Everything light-dark() can resolve on its own - see $theme-non-colors
+  $_theme-colors: ();
+  @each $name, $value in $dark-theme-colors {
+    @if not list.index($theme-non-colors, $name) {
+      $_theme-colors: map.set($_theme-colors, $name, $value);
+    }
+  }
+
   // CSS Variables for theming and overriding
   :root {
     // Brand and neutral colors
@@ -37,13 +56,19 @@
       --mw-light-#{$name}: #{$value};
     }
 
-    // The scale lives in the variables file - these are the runtime knobs
-    --mw-duration-instant: #{$duration-instant};
-    --mw-duration-fast: #{$duration-fast};
-    --mw-duration-base: #{$duration-base};
-    --mw-duration-slow: #{$duration-slow};
-    --mw-duration-slower: #{$duration-slower};
-    --mw-duration-zoom: #{$duration-zoom};
+    // The scale lives in the variables file - these are the runtime knobs.
+    // Multiplied through --mw-motion-scale so one number retunes the page's
+    // tempo, the way --mw-radius-scale does for its corners: the six stand in a
+    // fixed ratio to each other and have to move together. The reduced-motion
+    // block below writes plain 1ms over the top, untouched by any of this.
+    --mw-duration-instant: calc(
+      #{$duration-instant} * var(--mw-motion-scale, 1)
+    );
+    --mw-duration-fast: calc(#{$duration-fast} * var(--mw-motion-scale, 1));
+    --mw-duration-base: calc(#{$duration-base} * var(--mw-motion-scale, 1));
+    --mw-duration-slow: calc(#{$duration-slow} * var(--mw-motion-scale, 1));
+    --mw-duration-slower: calc(#{$duration-slower} * var(--mw-motion-scale, 1));
+    --mw-duration-zoom: calc(#{$duration-zoom} * var(--mw-motion-scale, 1));
     --mw-ease-out: #{$ease-out};
     --mw-ease-in-out: #{$ease-in-out};
     --mw-ease-spring: #{$ease-spring};
@@ -54,6 +79,10 @@
     // Same list, for a state that should feel instant rather than animated
     --mw-transition-fast: #{transition-list('--mw-duration-fast')};
 
+    // The whole scale is rem, so this one percentage moves type, spacing and
+    // control heights together. Breakpoints are px and stay where they are.
+    --mw-root-font-size: 100%;
+
     // Custom properties, so an application can tighten its forms without recompiling
     --mw-control-height-sm: #{$control-height-sm};
     --mw-control-height: #{$control-height};
@@ -63,6 +92,12 @@
     --mw-control-font-lg: #{$control-font-lg};
     --mw-control-line-height: #{$control-line-height};
 
+    // One ramp for both themes - the theme reaches it through the two shadow
+    // tokens the levels are built from
+    @each $name, $value in $elevations {
+      --mw-#{$name}: #{$value};
+    }
+
     // Focus ring
     --mw-focus-ring-width: #{$focus-ring-width};
     --mw-focus-ring-offset: #{$focus-ring-offset};
@@ -71,7 +106,9 @@
     --mw-focus-halo-opacity: #{$focus-halo-opacity};
 
     // The only way the chrome the browser draws itself follows the theme:
-    // scrollbars, the select popup, the date picker panel, number spinners
+    // 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`.
     @if $mw-theme-mode == 'light' {
       color-scheme: light;
     } @else {
@@ -135,6 +172,62 @@
 
       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})
+          );
+        }
+      }
+
+      :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});
+          }
+        }
+      }
+
+      .mw-theme-light {
+        color-scheme: light;
+
+        @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;
+
+        @each $name in $theme-non-colors {
+          --mw-#{$name}: var(--mw-dark-#{$name});
+        }
+      }
+    }
   }
 
   // Form controls are deliberately light in both themes - see

package/src/scss/base/_reset.scss

@@ -10,6 +10,8 @@
   }
 
   html {
+    // Percent and not px, or a reader who raised their browser font loses it
+    font-size: var(--mw-root-font-size);
     scroll-behavior: smooth;
     min-width: 320px;
     scroll-padding-top: var(--mw-header-height);

package/src/scss/components/_badge.scss

@@ -84,7 +84,7 @@
       inset: 0;
       border-radius: inherit;
       background: inherit;
-      animation: mw-badge-pulse 1.8s var(--mw-ease-out) infinite;
+      animation: mw-badge-pulse motion(1.8s) var(--mw-ease-out) infinite;
     }
   }
 

package/src/scss/components/_buttons.scss

@@ -187,7 +187,7 @@
     }
 
     // The floor a thumb needs, over the visual size above
-    @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+    @media (pointer: coarse), (width <= #{breakpoint('md')}) {
       --mw-btn-icon-size: 2.75rem;
 
       &.mw-btn-sm {

package/src/scss/components/_cards.scss

@@ -58,14 +58,17 @@
       overflow: hidden;
     }
 
-    // Named, so the query cannot resolve to a container further up the tree. Only
-    // cards with a footer, and they claim their slot: inline-size containment
-    // computes the width as if the card were empty, so one that sizes to its
-    // content would collapse to its border.
-    &:has(.mw-card-footer) {
-      width: 100%;
-      container: mw-card / inline-size;
-    }
+    // Named, so the query cannot resolve to a container further up the tree.
+    // Every card, not only the ones with a footer: the title, the padding and
+    // the image height all used to step on a *viewport* breakpoint, so a card in
+    // a three-column grid on a wide desktop took the same 1.5rem title as the
+    // full-width one on a phone while being a third of its width.
+    //
+    // `width: 100%` is what makes it safe: inline-size containment computes the
+    // width as if the card were empty, so a card that sized to its content would
+    // otherwise collapse to its border.
+    width: 100%;
+    container: mw-card / inline-size;
 
     // The arc on the two round corners is the one mark that makes a card look
     // like this framework and not like a rounded box, so it is what the hover
@@ -168,6 +171,9 @@
     &-lg {
       --mw-card-img-height: 260px;
 
+      // On the window and not on the card: this declaration sits on the card,
+      // which is the container, and a container cannot query itself. The height
+      // of a picture is a question of room on screen anyway.
       @include media-up('sm') {
         --mw-card-img-height: 340px;
       }
@@ -176,6 +182,9 @@
     &-xl {
       --mw-card-img-height: 340px;
 
+      // On the window and not on the card: this declaration sits on the card,
+      // which is the container, and a container cannot query itself. The height
+      // of a picture is a question of room on screen anyway.
       @include media-up('sm') {
         --mw-card-img-height: 480px;
       }
@@ -187,7 +196,7 @@
       flex-grow: 1;
       padding: spacing('6') spacing('4') spacing('5');
 
-      @include media-up('sm') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         padding: spacing('7') spacing('5') spacing('6');
       }
 
@@ -204,7 +213,7 @@
     &-title {
       margin-bottom: spacing('3');
       font-size: font-size('lg');
-      @include media-up('md') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         font-size: font-size('xl');
       }
 
@@ -245,7 +254,7 @@
       line-height: 1.2;
       font-style: italic;
       color: var(--mw-text-muted-color);
-      @include media-up('md') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         margin-bottom: spacing('3');
       }
     }
@@ -253,7 +262,7 @@
     &-text {
       margin: spacing('2') spacing('0') spacing('4') spacing('0');
       color: var(--mw-text-color);
-      @include media-down('sm') {
+      @container mw-card (width <= #{$mw-card-narrow}) {
         margin-bottom: spacing('2');
       }
     }
@@ -285,7 +294,7 @@
       // Stacked once the card is narrow, not once the window is - a card in a
       // three-column grid on a wide desktop is as narrow as the same card on a
       // phone and used to keep its actions in a cramped row anyway.
-      @container mw-card (max-width: #{$mw-card-narrow}) {
+      @container mw-card (width <= #{$mw-card-narrow}) {
         flex-direction: column;
         align-items: stretch;
         gap: spacing('2');
@@ -353,7 +362,7 @@
         justify-content: center;
         margin: spacing('0');
 
-        @include media-down('sm') {
+        @container mw-card (width <= #{$mw-card-narrow}) {
           font-size: font-size('sm');
         }
       }

package/src/scss/components/_dropdown.scss

@@ -197,10 +197,67 @@
     overflow: visible;
   }
 
+  // The clipping caveat at the top of this file, lifted where the browser can do
+  // it. `fixed` takes the menu out of every ancestor's containing block and
+  // anchor positioning keeps it attached to the trigger, so an actions menu in a
+  // scrolling table or a clipping card is no longer cut in half - and the
+  // `:has()` list above becomes belt and braces rather than the only thing
+  // holding it together.
+  //
+  // `anchor-scope` is what makes this safe and why it is in the @supports test:
+  // an anchor name is global, so without it every menu on the page would resolve
+  // to whichever trigger came last in the DOM. Scoped to the dropdown, each menu
+  // sees its own.
+  @supports (anchor-scope: all) and (position-area: block-end) {
+    .mw-dropdown {
+      anchor-scope: --mw-dropdown-trigger;
+
+      > summary {
+        anchor-name: --mw-dropdown-trigger;
+      }
+    }
+
+    .mw-dropdown-menu {
+      position: fixed;
+      position-anchor: --mw-dropdown-trigger;
+      // Below the trigger, left edges aligned - the same place the absolute
+      // version sits. The inset properties it used are cleared, or they fight
+      // the position-area, which resolves them itself.
+      position-area: block-end span-inline-end;
+      // Flip up when the trigger sits low, in when it sits near the right edge.
+      // The menu has no arrow to contradict a flip, so unlike the tooltip it can
+      // take all of them.
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      // Never taller than the room the fallback landed in
+      position-try-order: most-block-size;
+      top: auto;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      margin-block: spacing('2');
+      // The viewport cap no longer applies - what matters is the slot the anchor
+      // left, and 60dvh was measured against the window anyway
+      max-height: min(60dvh, 420px);
+    }
+
+    // Both variants are what position-try-fallbacks now does on its own, so they
+    // only have to stop pushing the menu around with insets
+    .mw-dropdown-end .mw-dropdown-menu {
+      position-area: block-end span-inline-start;
+    }
+
+    .mw-dropdown-up .mw-dropdown-menu {
+      position-area: block-start span-inline-end;
+    }
+  }
+
   // A menu opened by a thumb needs rows a thumb can hit, and the room to show
   // them - so it takes the trigger's full width rather than a 200px column
   // floating beside it.
-  @media (pointer: coarse), (max-width: #{breakpoint('sm')}) {
+  @media (pointer: coarse), (width <= #{breakpoint('sm')}) {
     .mw-dropdown-menu {
       min-width: max(100%, 240px);
     }

package/src/scss/components/_kanban.scss

@@ -7,6 +7,8 @@
   // Room the ribbon needs in the top right corner of a ticket
   $_mw-kanban-ribbon-clearance: 66px;
   $_mw-kanban-ribbon-clearance-compact: 58px;
+  // Narrowest a lane may get before the board wraps it to the next row
+  $_mw-kanban-lane-min: 260px;
 
   @keyframes mw-kanban-card-in {
     from {
@@ -58,21 +60,20 @@
     --mw-kanban-column-min-height: 120px;
 
     display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(0, 1fr);
+    // As many lanes as fit at a readable width, the rest wrap. The board asks
+    // its own width, so one inside a panel wraps on a desktop too. `min()`
+    // against 100% keeps a lane out of a container narrower than the minimum.
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(#{$_mw-kanban-lane-min}, 100%), 1fr)
+    );
     gap: spacing('4');
     padding: spacing('4');
     background: var(--mw-kanban-background);
     border-radius: radius('md');
 
-    // Two lanes side by side stay readable, four do not
-    @include media-down('lg') {
-      grid-auto-flow: row;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
+    // Frame only - how tight the board sits on a phone is a viewport call
     @include media-down('sm') {
-      grid-template-columns: minmax(0, 1fr);
       gap: spacing('3');
       padding: spacing('3');
     }

package/src/scss/components/_lang-switch.scss

@@ -52,7 +52,7 @@
   .mw-lang-switch .mw-dropdown-menu {
     min-width: 170px;
 
-    @media (pointer: coarse), (max-width: #{breakpoint('sm')}) {
+    @media (pointer: coarse), (width <= #{breakpoint('sm')}) {
       min-width: max(100%, 240px);
     }
   }

package/src/scss/components/_localhost-indicator.scss

@@ -10,7 +10,7 @@
     height: 4px;
     background: var(--mw-warning-color);
     z-index: z-index('modal')-10;
-    animation: pulse-indicator 4s infinite;
+    animation: pulse-indicator motion(4s) infinite;
   }
 
   // Keyframes for the pulsing indicator

package/src/scss/components/_modals.scss

@@ -16,12 +16,24 @@
     justify-content: center;
     padding: spacing('7');
     opacity: 0;
-    transition: opacity var(--mw-duration-base) var(--mw-ease-out);
+    // `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;
+      }
     }
   }
 

package/src/scss/components/_pricing.scss

@@ -200,7 +200,7 @@
   // row survives the narrow-card stack and the action takes half of it. Here and
   // not in _cards.scss because the price is the guest - the footer's own rule is
   // right for everything that is not one.
-  @container mw-card (max-width: #{$mw-card-narrow}) {
+  @container mw-card (width <= #{$mw-card-narrow}) {
     .mw-card-footer:has(> .mw-price) {
       flex-direction: row;
       align-items: center;

package/src/scss/components/_progress.scss

@@ -1,6 +1,15 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // How far the bar is filled - written by the script, read by the keyframe at
+  // the bottom. Registered and not declared on the element: a `data-value` the
+  // script cannot parse lands on 0% instead of dropping `width` altogether.
+  @property --mw-progress-value {
+    syntax: '<length-percentage>';
+    inherits: true;
+    initial-value: 0%;
+  }
+
   .mw-progress {
     &-container {
       margin: spacing('1');
@@ -61,11 +70,6 @@
       // the variants at the bottom of the file
       --mw-progress-ink: var(--mw-secondary-accent-text-color);
 
-      // How far the bar is filled. Written by the script from data-value or from
-      // an inline width, and read by the keyframe below. Declared here so it has
-      // a definition rather than only a fallback - an unset bar is an empty one.
-      --mw-progress-value: 0;
-
       height: 100%;
       background: var(--mw-secondary-color);
       border-radius: radius('sm');

package/src/scss/components/_skeleton.scss

@@ -18,7 +18,7 @@
       var(--mw-card-background) 75%
     );
     background-size: 200% 100%;
-    animation: mw-skeleton-shimmer 1.5s infinite linear;
+    animation: mw-skeleton-shimmer motion(1.5s) infinite linear;
     border-radius: radius('sm');
     display: block;
   }

package/src/scss/components/_spinners.scss

@@ -16,20 +16,20 @@
       border: 0.5rem solid var(--mw-border);
       border-radius: radius('full');
       border-top-color: var(--mw-primary-text-color);
-      animation: mw-spin 1.2s linear infinite;
+      animation: mw-spin motion(1.2s) linear infinite;
 
       &.mw-spinner-sm {
         width: $_size-sm;
         height: $_size-sm;
         border-width: 0.3rem;
-        animation: mw-spin 1.4s linear infinite;
+        animation: mw-spin motion(1.4s) linear infinite;
       }
 
       &.mw-spinner-lg {
         width: $_size-lg;
         height: $_size-lg;
         border-width: 0.7rem;
-        animation: mw-spin 1s linear infinite;
+        animation: mw-spin motion(1s) linear infinite;
       }
 
       &.mw-spinner-primary {
@@ -54,7 +54,7 @@
         border-radius: radius('full');
         display: inline-block;
         margin: spacing('0') spacing('2');
-        animation: mw-bounce 1.4s infinite ease-in-out both;
+        animation: mw-bounce motion(1.4s) infinite ease-in-out both;
 
         &:nth-child(1) {
           animation-delay: -0.32s;
@@ -110,7 +110,7 @@
         border: 0.5rem solid var(--mw-primary-text-color);
         border-color: var(--mw-primary-text-color) transparent
           var(--mw-primary-text-color) transparent;
-        animation: mw-spin 1.5s linear infinite;
+        animation: mw-spin motion(1.5s) linear infinite;
       }
 
       &.mw-spinner-sm {

package/src/scss/components/_stepper.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: flex-start;
     width: 100%;
+    container: mw-stepper / inline-size;
 
     &-step {
       display: flex;
@@ -79,7 +80,9 @@
       }
     }
 
-    @include media-up('sm') {
+    // The step labels follow the strip's own width, not the window's - a
+    // stepper in a narrow card keeps the small label on a wide desktop.
+    @container mw-stepper (width >= #{breakpoint('sm')}) {
       &-label {
         font-size: font-size('xs');
       }

package/src/scss/components/_tabs.scss

@@ -1,6 +1,34 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // Registered, so a half-written value from the script cannot invalidate the
+  // whole `transform` and leave the marker somewhere other than at rest.
+  // `inherits: true` because the bar is the nav's ::after, and a pseudo element
+  // only ever sees these through inheritance.
+  @property --mw-tabs-marker-x {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --mw-tabs-marker-y {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --mw-tabs-marker-w {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --mw-tabs-marker-h {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
   .mw-tabs {
     display: flex;
     flex-direction: column;
@@ -71,14 +99,6 @@
     // A 1px bar scaled to width, not a bar whose width is set: scaleX runs on the
     // compositor, `width` relayouts the strip on every frame of the slide.
     &-nav[data-mw-tabs-marker] {
-      // Declared with a zero length so the four are real tokens with a resting
-      // value rather than four names the stylesheet only ever reads. The script
-      // sets them on the element, which outranks this either way.
-      --mw-tabs-marker-x: 0;
-      --mw-tabs-marker-w: 0;
-      --mw-tabs-marker-y: 0;
-      --mw-tabs-marker-h: 0;
-
       .mw-tabs-nav-item.mw-active,
       .mw-tabs-nav-item.active {
         border-bottom-color: transparent;