maverick-wave 5.12.0 → 5.14.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/_main.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../abstracts' as *;
 
 @layer mw.layout {
@@ -268,10 +269,40 @@
   // scroll on a phone. Hence `allow-discrete` and the starting style.
   $_mw-tooltip-arrow: 6px;
   $_mw-tooltip-gap: 8px;
+  // A square turned 45deg rather than a border triangle: it reads the same from
+  // above and from below, so the second placement costs no second arrow and a
+  // flip never has to repaint anything. The diagonal carries the visible width,
+  // so the side is the visible height doubled over root two.
+  $_mw-tooltip-arrow-side: math.div($_mw-tooltip-arrow * 2, math.sqrt(2));
+  // Half a side short of where the triangle's edge sat, so the turned square is
+  // centred on the bubble's edge and only its outer half shows. The inner half
+  // lands on the bubble in the same colour, which is what makes it read as one
+  // shape rather than a diamond stuck to a box.
+  $_mw-tooltip-arrow-inset: $_mw-tooltip-gap +
+    $_mw-tooltip-arrow - math.div($_mw-tooltip-arrow-side, 2);
 
   [data-tooltip] {
     position: relative;
 
+    // The placement API: the text is the attribute, the side is a class. Both
+    // axes are custom properties rather than rules, so `below` and `end` compose
+    // without a rule per pairing - and the arrow reads only the block axis,
+    // because it points at the trigger whichever way the bubble is aligned.
+    --_mw-tooltip-block: block-start;
+    --_mw-tooltip-inline: center;
+
+    &.mw-tooltip-below {
+      --_mw-tooltip-block: block-end;
+    }
+
+    &.mw-tooltip-end {
+      --_mw-tooltip-inline: span-inline-start;
+    }
+
+    &.mw-tooltip-start {
+      --_mw-tooltip-inline: span-inline-end;
+    }
+
     &::before {
       content: attr(data-tooltip);
       position: absolute;
@@ -301,11 +332,11 @@
       position: absolute;
       bottom: 100%;
       left: 50%;
-      transform: translateX(-50%);
-      margin-bottom: $_mw-tooltip-gap;
-      border: $_mw-tooltip-arrow solid transparent;
-      border-bottom-width: 0;
-      border-top-color: var(--mw-gray-color);
+      transform: translateX(-50%) rotate(45deg);
+      margin-bottom: $_mw-tooltip-arrow-inset;
+      width: $_mw-tooltip-arrow-side;
+      height: $_mw-tooltip-arrow-side;
+      background: var(--mw-gray-color);
       opacity: 0;
       display: none;
       transition:
@@ -314,6 +345,42 @@
       z-index: z-index('tooltip');
     }
 
+    // What the modifiers mean without anchor positioning. Kept in its own
+    // `@supports not` rather than reset inside the anchored path: a modifier
+    // carries a class more weight than such a reset, so the two would fight
+    // instead of replace - which is exactly how the absolute placement used to
+    // survive into the anchored path and land the bubble on its own trigger.
+    @supports not (position-area: block-start) {
+      &.mw-tooltip-below {
+        &::before {
+          top: 100%;
+          bottom: auto;
+          margin-top: $_mw-tooltip-gap + $_mw-tooltip-arrow;
+          margin-bottom: 0;
+        }
+
+        &::after {
+          top: 100%;
+          bottom: auto;
+          margin-top: $_mw-tooltip-arrow-inset;
+          margin-bottom: 0;
+        }
+      }
+
+      // Only the bubble moves - the arrow stays on the trigger it points at.
+      &.mw-tooltip-end::before {
+        left: auto;
+        right: 0;
+        transform: none;
+      }
+
+      &.mw-tooltip-start::before {
+        left: 0;
+        right: auto;
+        transform: none;
+      }
+    }
+
     &:hover::before,
     &:hover::after,
     &:focus-visible::before,
@@ -345,19 +412,31 @@
     // it attached. No `anchor-name` needed - a pseudo element is implicitly
     // anchored to the element it comes from.
     //
-    // No `position-try-fallbacks: flip-block` on purpose: the arrow is a border
-    // triangle and would still point up, into a bubble that flipped below.
+    // Still no `position-try-fallbacks: flip-block`, and no longer because of the
+    // arrow - the turned square survives a flip. Bubble and arrow are two
+    // separately anchored boxes, so each would decide on its own whether it fits,
+    // and the tiny one nearly always does: the label flips, the arrow stays.
     @supports (position-area: block-start) {
       &::before,
       &::after {
         position: fixed;
-        position-area: block-start;
         // The absolute placement these replace - left as-is they fight the
         // position-area, which resolves the inset properties itself.
         bottom: auto;
         left: auto;
+        top: auto;
+      }
+
+      &::before {
+        position-area: var(--_mw-tooltip-block) var(--_mw-tooltip-inline);
         transform: none;
       }
+
+      // The turn stays - it is the arrow's shape, not its placement.
+      &::after {
+        position-area: var(--_mw-tooltip-block) center;
+        transform: rotate(45deg);
+      }
     }
   }
 }

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,6 +148,20 @@
     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 {

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