maverick-wave 5.8.0 → 5.10.0

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;

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
@@ -151,13 +160,9 @@
   // 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))),

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);
+    }
+  }
 }

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

@@ -5,7 +5,7 @@
   // sizes are right under a pointer and too small under a thumb. Coarse *or*
   // narrow, because a tablet in landscape is wide and still finger-operated.
   // Loaded last, so these win without extra specificity.
-  @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+  @media (pointer: coarse), (width <= #{breakpoint('md')}) {
     // Padding and line-height add up to ~35px, under the 44px a thumb needs. Only
     // the height grows: the padding sets the label's relationship to the edges.
     .mw-btn {

package/src/scss/utilities/_variants.scss

@@ -31,12 +31,10 @@
   // the modal, which genuinely float above content and keep their shadow - in a
   // flat page they are the only two things that should cast one.
   //
-  // The second selector is not optional: elevation is a theme alias, and the
-  // light theme re-declares it on <body>. A value written on :root alone is
-  // shadowed for the whole body subtree, so the switch would do nothing at all
-  // in light mode. Any variant that retunes a theme-bound token needs both.
-  :root.mw-shadows-flat,
-  :root.mw-shadows-flat .mw-theme-light {
+  // One selector, unlike mw-surfaces-flush below: the ramp is no longer declared
+  // per theme, so there is no copy further down the tree to shadow this one. The
+  // theme reaches it through --mw-shadow-near/-far instead - see elevation().
+  :root.mw-shadows-flat {
     --mw-elevation-1: none;
     --mw-elevation-2: none;
     --mw-elevation-3: none;
@@ -47,7 +45,9 @@
   // --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, so both selectors - see the note above.
+  // 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 {
     --mw-card-background: var(--mw-page-background);
@@ -159,4 +159,71 @@
       letter-spacing: 0.045em;
     }
   }
+
+  // The other axis to --mw-root-font-size, which zooms the whole page: there
+  // the layout is the same layout, larger. This moves the padding inside a
+  // surface and leaves the type alone, so a dense screen reads as well as a
+  // roomy one and only fits more on.
+  //
+  // --mw-section-padding-block is deliberately untouched: section spacing is
+  // its own switch, and both writing it would have the panel print a setup that
+  // contradicts itself. Steps along the spacing scale rather than free values,
+  // because that scale is what every other measure is built from - two of them
+  // down for compact, where the point is to fit more on screen, one up for
+  // roomy, where a second step would only look loose.
+  :root.mw-density-compact {
+    --mw-control-height-sm: 1.5rem;
+    --mw-control-height: 1.75rem;
+    --mw-control-height-lg: 2rem;
+
+    .mw-card-body {
+      padding: spacing('4') spacing('2') spacing('3');
+
+      @container mw-card (width >= #{$mw-card-wide}) {
+        padding: spacing('5') spacing('3') spacing('4');
+      }
+    }
+
+    .mw-panel-header,
+    .mw-panel-body {
+      padding: spacing('2') spacing('3');
+    }
+  }
+
+  :root.mw-density-roomy {
+    --mw-control-height-sm: 2.25rem;
+    --mw-control-height: 2.5rem;
+    --mw-control-height-lg: 2.75rem;
+
+    .mw-card-body {
+      padding: spacing('7') spacing('5') spacing('6');
+
+      @container mw-card (width >= #{$mw-card-wide}) {
+        padding: spacing('8') spacing('6') spacing('7');
+      }
+    }
+
+    .mw-panel-header,
+    .mw-panel-body {
+      padding: spacing('5') spacing('6');
+    }
+  }
+
+  :root.mw-links-underline {
+    .mw-link,
+    .mw-link-muted,
+    .mw-btn-link {
+      // The longhand, because the `text-decoration` shorthand resets
+      // text-decoration-thickness along with it and would drop the 1.5px
+      // link-look() draws the line at.
+      text-decoration-line: underline;
+
+      // The underline was the hover signal and is now the resting state, so the
+      // weight takes over: .mw-link carries no colour change of its own and
+      // would otherwise go completely dead under the pointer.
+      &:hover:not(:disabled) {
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
 }