maverick-wave 5.8.0 → 5.11.0

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;

package/src/scss/components/_tiles.scss

@@ -57,7 +57,22 @@
     }
   }
 
+  // The tile sizes its type off its own width, not the window's. In
+  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of 85% of the page -
+  // narrower than the same tile alone on a phone, where it used to be the one
+  // getting the small type.
+  //
+  // The cost: `container-type` makes the tile a containing block for its own
+  // fixed-position descendants, and unlike a card the tile clips - so a
+  // [data-tooltip] inside one is now cut off at its edge. Taken knowingly, there
+  // being nothing in a tile's anatomy that wants a tooltip. Drop the two lines
+  // below and the queries fall back to the window.
+  $_mw-tile-wide: 300px;
+  $_mw-tile-narrow: 220px;
+
   .mw-tile {
+    width: 100%;
+    container: mw-tile / inline-size;
     background: var(--mw-card-background);
     @include surface;
     padding: spacing('5');
@@ -116,11 +131,11 @@
       line-height: 1.2;
       text-align: center;
 
-      @include media-up('sm') {
+      @container mw-tile (width >= #{$_mw-tile-narrow}) {
         font-size: font-size('xl');
       }
 
-      @include media-up('md') {
+      @container mw-tile (width >= #{$_mw-tile-wide}) {
         font-size: font-size('2xl');
       }
     }
@@ -166,7 +181,7 @@
         font-size: font-size('md');
         margin-bottom: spacing('2');
 
-        @include media-up('md') {
+        @container mw-tile (width >= #{$_mw-tile-wide}) {
           font-size: font-size('lg');
         }
       }
@@ -194,11 +209,11 @@
         font-size: font-size('xl');
         margin-bottom: spacing('4');
 
-        @include media-up('sm') {
+        @container mw-tile (width >= #{$_mw-tile-narrow}) {
           font-size: font-size('2xl');
         }
 
-        @include media-up('md') {
+        @container mw-tile (width >= #{$_mw-tile-wide}) {
           font-size: font-size('3xl');
         }
       }
@@ -214,20 +229,30 @@
     }
   }
 
-  @include media-down('sm') {
-    .mw-tile {
-      padding: spacing('4');
+  // A cramped tile reads better ranged left whatever the window is doing - a
+  // centred line inside 200px is two words and a gap. Every selector here is a
+  // child: a container cannot answer a query about itself, and the tile *is* the
+  // container - which is also why the padding below stays on the window.
+  @container mw-tile (width < #{$_mw-tile-narrow}) {
+    .mw-tile-header,
+    .mw-tile-body {
       text-align: left;
+    }
 
-      &-img {
-        width: 60px;
-        height: 60px;
-        margin: spacing('0') auto spacing('2');
-      }
+    .mw-tile-body {
+      margin-bottom: spacing('2');
+    }
 
-      &-body {
-        margin-bottom: spacing('2');
-      }
+    .mw-tile-img {
+      width: 60px;
+      height: 60px;
+      margin: spacing('0') auto spacing('2');
+    }
+  }
+
+  @include media-down('sm') {
+    .mw-tile {
+      padding: spacing('4');
     }
   }
 }

package/src/scss/components/_timelines.scss

@@ -57,6 +57,7 @@
     margin: spacing('1') auto;
     padding: spacing('5') 0;
     width: min(100%, 900px);
+    container: mw-timeline / inline-size;
 
     // Center vertical line
     &::before {
@@ -185,7 +186,7 @@
       background: var(--mw-primary-color);
       border-color: var(--mw-primary-text-color);
       transform: scale(1.1);
-      animation: mw-pulse-ring-big 2s infinite;
+      animation: mw-pulse-ring-big motion(2s) infinite;
 
       .mw-timeline-big-date-main,
       .mw-timeline-big-date-sub {
@@ -193,9 +194,10 @@
       }
     }
 
-    @include media-down('sm') {
-      width: 100%;
-
+    // The two-sided layout collapses when the timeline itself runs out of room,
+    // not when the window does - the same timeline in a half-width column had
+    // its content overlapping the centre line on a wide desktop.
+    @container mw-timeline (width < #{breakpoint('sm')}) {
       // Line moves to the left
       &::before {
         left: 0;
@@ -258,6 +260,7 @@
     margin: spacing('1') auto;
     padding: spacing('3') 0;
     width: min(96%, 930px);
+    container: mw-timeline / inline-size;
 
     // Vertical line centered over the date column
     &::before {
@@ -319,12 +322,16 @@
       background: var(--mw-primary-color);
       color: var(--mw-primary-accent-text-color);
       transform: scale(1.1);
-      animation: mw-pulse-ring-simple 2s infinite;
+      animation: mw-pulse-ring-simple motion(2s) infinite;
     }
 
+    // The inset is a page-level call: on a phone the timeline takes the full
+    // width, however wide its column happens to be.
     @include media-down('sm') {
       width: 100%;
+    }
 
+    @container mw-timeline (width < #{breakpoint('sm')}) {
       &::before {
         left: 0;
         transform: none;
@@ -341,6 +348,7 @@
       }
 
       &-content {
+        align-self: stretch;
         padding-left: spacing('3');
       }
     }

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

@@ -63,11 +63,11 @@
     }
   }
 
-  // Firefox ships 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 the script sets the
-  // state a frame earlier: together they would send the bar sliding away in
-  // front of the reader instead of having it gone already.
+  // 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
+  // the script sets the state a frame earlier: together they would send the
+  // bar sliding away in front of the reader instead of having it gone already.
   @media (prefers-reduced-motion: no-preference) {
     .mw-header-reveal.mw-header-away {
       top: calc(-1 * var(--mw-header-reveal-offset));

package/src/scss/layout/_main.scss

@@ -208,7 +208,7 @@
     letter-spacing: 0.08em;
     text-transform: uppercase;
     text-decoration: none;
-    animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+    animation: mw-scroll-hint-float motion(2.2s) var(--mw-ease-in-out) infinite;
     text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
 
     // The arrow carries the meaning, so it gets the size and the label stays quiet

package/src/scss/layout/_parallax.scss

@@ -1,6 +1,15 @@
 @use '../abstracts' as *;
 
 @layer mw.layout {
+  // Registered so a bad value cannot invalidate the calc() and drop the layer
+  // somewhere else. 0.5 and not 0 is the resting point - see the transform
+  // at the bottom of this file.
+  @property --mw-parallax-progress {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
   // The image gets its own layer instead of `background-attachment: fixed`: that
   // one is ignored on iOS and sizes against the viewport rather than the block.
   // Here a transform runs on the browser's own scroll timeline - no listener, no
@@ -77,6 +86,35 @@
     --mw-parallax-pattern-depth: 4vh;
   }
 
+  // A third way to use the scroll, between the two above: the block keeps its
+  // place in the flow but travels slower than the page, so the section after it
+  // closes in from below while picture and text are still moving.
+  //
+  // `exit` and never `cover`: the block leaves a gap where it used to sit, and
+  // the exit phase is the one that starts once its top edge is already past the
+  // top of the screen - which is where that gap then stays.
+  //
+  // Travel over the block's own height is what sets the tempo: half the height
+  // is half speed, the full height stands still and is mw-parallax-sticky.
+  .mw-parallax-slow {
+    --mw-parallax-slow-travel: 45vh;
+
+    position: relative;
+    z-index: 0;
+  }
+
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .mw-parallax-slow {
+        animation-name: mw-parallax-band;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: view();
+        animation-range: exit 0% exit 100%;
+      }
+    }
+  }
+
   // A second layer on top of the first, added to the same media element. It
   // travels a third of the distance, and it is that difference between the two
   // that reads as depth - one layer alone only slides. What it carries is a
@@ -88,10 +126,15 @@
     background-image: var(--mw-parallax-pattern-image, none);
   }
 
-  // Everything after it has to cover it, or the pinned picture shows through the
-  // gaps. The z-index needs the weight of a class to beat the plain
-  // `position: relative` those sections carry.
-  .mw-parallax-sticky ~ * {
+  // Both variants above are overtaken rather than scrolled away, so everything
+  // after them has to cover them or the picture shows through the gaps. The
+  // z-index needs the weight of a class to beat the plain `position: relative`
+  // those sections carry.
+  //
+  // Except a pinned block: `position: relative` here and `sticky` above carry
+  // the same weight, and this rule is the later one - it would take the pinning
+  // away from every band after the first.
+  :is(.mw-parallax-sticky, .mw-parallax-slow) ~ *:not(.mw-parallax-sticky) {
     position: relative;
     z-index: 1;
   }
@@ -99,7 +142,9 @@
   // Zero specificity on purpose: it is a floor, not a rule. A section that
   // paints its own surface - mw-section-alternate, a project's own band - has
   // to win here, and this file is forwarded last.
-  :where(.mw-parallax-sticky ~ *) {
+  :where(
+    :is(.mw-parallax-sticky, .mw-parallax-slow) ~ *:not(.mw-parallax-sticky)
+  ) {
     background: var(--mw-page-background);
   }
 
@@ -146,18 +191,14 @@
     }
   }
 
-  // Firefox ships no scroll timelines, so there the script writes the progress
-  // and the travel is worked out here (main.js). Keeping the transform in CSS
-  // is what lets every depth variant above - and an inline
-  // `--mw-parallax-depth` - go on working untouched.
+  // Older Safari and Firefox ship no scroll timelines, so there the script
+  // writes the progress and the travel is worked out here (main.js). Keeping
+  // the transform in CSS is what lets every depth variant above - and an
+  // inline `--mw-parallax-depth` - go on working untouched.
   //
-  // 0 puts the layer at +depth and 1 at -depth, the two ends of the keyframes
-  // below. Declared and not only used, so the frame before the script has
-  // written anything sits at rest instead of nowhere.
+  // 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-progress: 0.5;
-
       transform: translate3d(
         0,
         calc(var(--mw-parallax-depth) * (1 - 2 * var(--mw-parallax-progress))),
@@ -166,6 +207,16 @@
     }
   }
 
+  @keyframes mw-parallax-band {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(var(--mw-parallax-slow-travel));
+    }
+  }
+
   @keyframes mw-parallax {
     from {
       transform: translate3d(0, var(--mw-parallax-depth), 0);

package/src/scss/utilities/_elevation.scss

@@ -15,4 +15,27 @@
       box-shadow: var(--mw-elevation-#{$level});
     }
   }
+
+  // Light instead of shadow. Elevation says how far a surface floats above the
+  // page; this says it is the thing giving off the light - for the one element on
+  // a screen that has to be looked at first, and for nothing else.
+  //
+  // Two layers like elevation, and for the same reason: the tight one reads as
+  // the edge of the source, the wide one as the air around it. Both are
+  // offsetless, which is what separates a glow from a shadow - light does not
+  // fall downwards. Bare `.mw-glow` rides along on primary, because the brand
+  // colour is what a glow means unless it says otherwise.
+  @each $name, $col in $semantic-colors {
+    $selector: '.mw-glow-#{$name}';
+
+    @if $name == 'primary' {
+      $selector: '.mw-glow, #{$selector}';
+    }
+
+    #{$selector} {
+      box-shadow:
+        0 0 6px color-mix(in srgb, #{$col} 45%, transparent),
+        0 0 26px color-mix(in srgb, #{$col} 28%, transparent);
+    }
+  }
 }