maverick-wave 5.11.0 → 5.13.0

package/src/scss/components/_content-slider.scss

@@ -9,21 +9,29 @@
     border-radius: radius('md');
     overflow: hidden;
 
+    // The slider caps at 600px, so past a tablet the viewport no longer says how
+    // much room it has. Named, so a query cannot resolve to a container above.
+    container: mw-slider / inline-size;
+
     // Heights variables for consistency
     $height-lg: 370px;
     $height-md: 320px;
     $height-sm: 250px;
 
+    // The slider widths the old viewport steps landed on, not the breakpoints
+    $wide: 560px;
+    $mid: 420px;
+
     &-base {
       position: relative;
       width: 100%;
       height: $height-sm;
 
-      @include media-up('sm') {
+      @container mw-slider (width >= #{$mid}) {
         height: $height-md;
       }
 
-      @include media-up('md') {
+      @container mw-slider (width >= #{$wide}) {
         height: $height-lg;
       }
     }
@@ -43,11 +51,11 @@
       height: $height-sm;
       pointer-events: none;
 
-      @include media-up('sm') {
+      @container mw-slider (width >= #{$mid}) {
         height: $height-md;
       }
 
-      @include media-up('md') {
+      @container mw-slider (width >= #{$wide}) {
         height: $height-lg;
       }
     }
@@ -86,11 +94,11 @@
       z-index: z-index('menu');
       width: 100%;
 
-      @include media-up('sm') {
+      @container mw-slider (width >= #{$mid}) {
         grid-template-columns: repeat(3, 1fr);
       }
 
-      @include media-up('md') {
+      @container mw-slider (width >= #{$wide}) {
         gap: spacing('3');
         padding: spacing('3');
       }
@@ -106,11 +114,11 @@
       z-index: z-index('menu');
       width: 100%;
 
-      @include media-up('sm') {
+      @container mw-slider (width >= #{$mid}) {
         grid-template-columns: repeat(2, 1fr);
       }
 
-      @include media-up('md') {
+      @container mw-slider (width >= #{$wide}) {
         gap: spacing('3');
         padding: spacing('3');
       }

package/src/scss/components/_dropdown.scss

@@ -257,7 +257,7 @@
   // 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), (width <= #{breakpoint('sm')}) {
+  @include touch-context('sm') {
     .mw-dropdown-menu {
       min-width: max(100%, 240px);
     }

package/src/scss/components/_gallery.scss

@@ -1,9 +1,20 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // Thresholds are the wrapper widths the old viewport steps landed on once the
+  // container gutter is taken off, not the breakpoints themselves.
+  $wide: 688px;
+  $narrow: 512px;
+
   .mw-gallery-container {
     max-width: 1100px;
+    // Inline-size containment computes the width as if the element were empty,
+    // so one dropped into a flex or grid slot would shrink to nothing without it
+    width: 100%;
     margin: spacing('1') auto;
+    // The wrapper and not .mw-gallery: the description and the dots are its
+    // siblings, and a container query only reaches descendants
+    container: mw-gallery / inline-size;
   }
 
   .mw-gallery {
@@ -119,7 +130,7 @@
     }
   }
 
-  @include media-down('md') {
+  @container mw-gallery (width < #{$wide}) {
     .mw-gallery {
       &-desc {
         font-size: font-size('sm');
@@ -134,7 +145,7 @@
     }
   }
 
-  @include media-down('sm') {
+  @container mw-gallery (width < #{$narrow}) {
     .mw-gallery {
       &-slide {
         aspect-ratio: 4 / 3;

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

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

package/src/scss/components/_segmented.scss

@@ -92,6 +92,10 @@
   // the width of the shortest, so the items follow their own content instead.
   .mw-segmented-auto {
     width: auto;
+    // Shrink-to-fit sizes this off the labels, which on a 320px screen is wider
+    // than the screen. The items already carry `min-width: 0` and truncate, so
+    // the cap only ever bites where the row genuinely has no room.
+    max-width: 100%;
 
     .mw-segmented-item {
       flex: 0 1 auto;

package/src/scss/layout/_header.scss

@@ -231,9 +231,10 @@
       // Keeps a rubber-band scroll inside the panel from moving the page
       overscroll-behavior: contain;
       padding: calc(
-          var(--mw-header-height) + #{spacing('6')} + env(safe-area-inset-top)
+          var(--mw-header-height) + #{spacing('6')} +
+            env(safe-area-inset-top, 0px)
         )
-        spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom));
+        spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom, 0px));
     }
 
     .mw-navbar-item {

package/src/scss/layout/_parallax.scss

@@ -24,7 +24,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    min-height: 42vh;
+    min-height: 60vh;
     // `clip` and never `hidden`: hidden makes this a scroll container, and the
     // view() timeline below would then resolve against this box instead of the
     // viewport - the layer keeps its overhang and never moves
@@ -148,11 +148,27 @@
     background: var(--mw-page-background);
   }
 
+  // `+` and not `~` like the two rules above: only the section that does the
+  // overtaking carries the edge, on every one after it the shadow would read as
+  // a seam across the page. Fixed values and not elevation(): this shadow lands
+  // on the picture rather than on a theme surface, and the light theme's 21%
+  // near layer disappears there - same reason mw-parallax-dimmed below
+  // hardcodes its brightness and its text-shadow.
+  :where(
+    :is(.mw-parallax-sticky, .mw-parallax-slow) + *:not(.mw-parallax-sticky)
+  ) {
+    box-shadow:
+      0 -6px 12px rgb(0 0 0 / 45%),
+      0 -20px 44px rgb(0 0 0 / 26%);
+  }
+
   // Ink on a photograph, the same pair the hero uses: the picture goes down, the
   // text goes light. A band without content on it needs neither.
   .mw-parallax-dimmed {
     > .mw-parallax-media {
-      filter: brightness(0.5);
+      // $hero-filter-dark's value, not the token: that one flips to 1.1 in the
+      // light theme, and this band's ink stays light in both
+      filter: brightness(0.7);
     }
 
     > .mw-parallax-content {

package/src/scss/layout/_section.scss

@@ -24,16 +24,12 @@
   }
 
   .mw-section-title {
-    font-size: font-size('2xl');
+    font-size: fluid('2xl', '3xl', $to: 'sm');
     margin-bottom: var(--mw-section-title-gap);
     text-align: center;
     position: relative;
 
     @include _section-rule(56px, 3px, spacing('-3'));
-
-    @include media-up('sm') {
-      font-size: font-size('3xl');
-    }
   }
 
   // The lead line under a section title. Every landing page writes this
@@ -51,7 +47,7 @@
   }
 
   .mw-section-subtitle {
-    font-size: font-size('xl');
+    font-size: fluid('xl', '2xl', $to: 'sm');
     // The step above a demo gap of spacing('6') - at spacing('8') the boundary
     // between two components read like the one between two demos
     margin: spacing('10') spacing('0') spacing('6') spacing('0');
@@ -64,10 +60,6 @@
       spacing('-2'),
       var(--mw-secondary-text-color)
     );
-
-    @include media-up('sm') {
-      font-size: font-size('2xl');
-    }
   }
 
   // Sticky, because the strip is the only way back: inside a long section the

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

@@ -2,10 +2,9 @@
 
 @layer mw.utilities {
   // WCAG 2.5.8 puts the floor at 24x24px, and a floor is not a goal - the compact
-  // 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.
+  // sizes are right under a pointer and too small under a thumb.
   // Loaded last, so these win without extra specificity.
-  @media (pointer: coarse), (width <= #{breakpoint('md')}) {
+  @include touch-context {
     // 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 {
@@ -85,13 +84,7 @@
     }
 
     .mw-gallery-dot {
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        inset: -7.5px;
-      }
+      @include hit-area(7.5px);
     }
 
     // A range input is as tall as its track, so the whole hit area is 8px and you
@@ -109,14 +102,27 @@
     // area grows, to 28px - clear of the 24px floor. The extra margin keeps two
     // neighbouring hit areas from overlapping.
     .mw-btn-mini {
-      position: relative;
       margin-left: spacing('4');
+      @include hit-area(5px);
+    }
+
+    // Edit and delete on a ticket. The 32px box stays - a 44px one would push
+    // the assignee off the card footer - and the row carries the gap the two
+    // grown hit areas need, or they overlap and a tap meant for edit deletes.
+    .mw-kanban-card-actions {
+      gap: spacing('4');
+    }
 
-      &::after {
-        content: '';
-        position: absolute;
-        inset: -5px;
-      }
+    .mw-kanban-action {
+      @include hit-area(6px);
+    }
+
+    // The box itself and not a hit area over it: half of these carry a
+    // `data-tooltip`, which owns both pseudo-elements, so the trick above lands
+    // on some of the logos and silently skips the rest.
+    .mw-techstack-item-sm {
+      min-width: 2.5rem;
+      min-height: 2.5rem;
     }
   }