maverick-wave 4.27.0 → 5.0.0

package/src/scss/layout/_page-header.scss

@@ -1,48 +1,50 @@
 @use '../abstracts' as *;
 
-.mw-page-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: spacing('4');
-  margin-bottom: spacing('6');
-  padding-bottom: spacing('4');
-  border-bottom: 1px solid var(--mw-border);
-
-  h1,
-  h2,
-  h3 {
-    margin: spacing('0');
-    font-size: font-size('2xl');
-    line-height: 1.2;
+@layer mw.layout {
+  .mw-page-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: spacing('4');
+    margin-bottom: spacing('6');
+    padding-bottom: spacing('4');
+    border-bottom: 1px solid var(--mw-border);
 
-    @include media-down('sm') {
+    h1,
+    h2,
+    h3 {
+      margin: spacing('0');
       font-size: font-size('xl');
+      line-height: 1.2;
+
+      @include media-up('sm') {
+        font-size: font-size('2xl');
+      }
     }
-  }
 
-  p {
-    margin: spacing('1') spacing('0') spacing('0') spacing('0');
-    color: var(--mw-text-muted-color);
-    font-size: font-size('sm');
-  }
+    p {
+      margin: spacing('1') spacing('0') spacing('0') spacing('0');
+      color: var(--mw-text-muted-color);
+      font-size: font-size('sm');
+    }
 
-  &-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: spacing('3');
-    margin-left: auto;
+    &-actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: spacing('3');
+      margin-left: auto;
 
-    @include media-down('sm') {
-      width: 100%;
-      margin-left: spacing('0');
+      @include media-down('sm') {
+        width: 100%;
+        margin-left: spacing('0');
+      }
     }
-  }
 
-  &-plain {
-    padding-bottom: spacing('0');
-    border-bottom: none;
+    &-plain {
+      padding-bottom: spacing('0');
+      border-bottom: none;
+    }
   }
 }

package/src/scss/layout/_section.scss

@@ -1,150 +1,176 @@
 @use '../abstracts' as *;
 
-.mw-section-title {
-  font-size: font-size('3xl');
-  margin-bottom: var(--mw-section-title-gap);
-  text-align: center;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: spacing('-3');
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 5px;
-    background: var(--mw-primary-text-color);
+@layer mw.layout {
+  // The rule under a section heading. Shared, so the two levels cannot drift
+  // apart in width and weight - the subtitle carried the wider mark, which reads
+  // as the louder one under the smaller heading. Colour is where they do part.
+  @mixin _section-rule(
+    $width,
+    $height,
+    $offset,
+    $color: var(--mw-primary-text-color)
+  ) {
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: $offset;
+      left: 50%;
+      transform: translateX(-50%);
+      width: $width;
+      height: $height;
+      border-radius: radius('xs');
+      background: $color;
+    }
   }
 
-  @include media-down('sm') {
+  .mw-section-title {
     font-size: font-size('2xl');
-  }
-}
+    margin-bottom: var(--mw-section-title-gap);
+    text-align: center;
+    position: relative;
 
-// The lead line under a section title. Every landing page writes this
-// paragraph, and it always wants the same four things: centred, muted,
-// narrower than the container so it reads as a line rather than a block, and
-// pulled up toward the title it belongs to - the title's gap is sized for the
-// content below, not for its own subtitle.
-.mw-section-intro {
-  max-width: 46rem;
-  margin: spacing('-3') auto spacing('9');
-  font-size: font-size('md');
-  color: var(--mw-text-muted-color);
-  text-align: center;
-  text-wrap: balance;
-}
+    @include _section-rule(56px, 3px, spacing('-3'));
 
-.mw-section-subtitle {
-  font-size: font-size('2xl');
-  margin: spacing('8') spacing('0') spacing('6') spacing('0');
-  text-align: center;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: spacing('-2');
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100px;
-    height: 2px;
-    background: var(--mw-secondary-text-color);
+    @include media-up('sm') {
+      font-size: font-size('3xl');
+    }
   }
 
-  @include media-down('sm') {
-    font-size: font-size('xl');
+  // The lead line under a section title. Every landing page writes this
+  // paragraph, and it always wants the same four things: centred, muted,
+  // narrower than the container so it reads as a line rather than a block, and
+  // pulled up toward the title it belongs to - the title's gap is sized for the
+  // content below, not for its own subtitle.
+  .mw-section-intro {
+    max-width: 46rem;
+    margin: spacing('-3') auto spacing('9');
+    font-size: font-size('md');
+    color: var(--mw-text-muted-color);
+    text-align: center;
+    text-wrap: balance;
   }
-}
 
-.mw-section-nav {
-  max-width: 100%;
-  margin: spacing('0') auto spacing('0') auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: spacing('3');
-}
+  .mw-section-subtitle {
+    font-size: font-size('xl');
+    // 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');
+    text-align: center;
+    position: relative;
 
-.mw-section-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: spacing('3');
-  padding: spacing('3') spacing('4');
-  border: 1px solid var(--mw-primary-text-color);
-  border-radius: radius('sm');
-  font-weight: font-weight('medium');
-  font-size: inherit;
-  font-family: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  transition: var(--mw-transition);
-  box-sizing: border-box;
-  background: transparent;
-  color: var(--mw-primary-text-color);
-
-  &:hover:not(:disabled) {
-    background: var(--mw-primary-color);
-    color: var(--mw-primary-accent-text-color);
-  }
+    @include _section-rule(
+      32px,
+      2px,
+      spacing('-2'),
+      var(--mw-secondary-text-color)
+    );
 
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-    transition-duration: var(--mw-duration-instant);
+    @include media-up('sm') {
+      font-size: font-size('2xl');
+    }
   }
 
-  @include focus-ring;
-  @include tappable;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
-
-// Responsive adjustments
-@include media-down('sm') {
+  // Sticky, because the strip is the only way back: inside a long section the
+  // nav at the entrance can be twenty thousand pixels behind the reader
   .mw-section-nav {
-    flex-direction: column;
+    position: sticky;
+    top: var(--mw-header-height);
+    z-index: z-index('menu');
     width: 100%;
-    max-width: 300px;
-    margin-left: auto;
-    margin-right: auto;
+    padding-block: spacing('3');
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    // A long strip aligns to its start instead of centring both ends out of reach
+    justify-content: safe center;
+    gap: spacing('3');
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    // Opaque and unblurred - the strip repaints on every scroll frame, and the
+    // alternate sections build their pattern on this same colour anyway
+    background: var(--mw-page-background);
+
+    @include scrollbar;
+  }
+
+  // The strip parks under the header, so a jump to a component clears both
+  .mw-container > div:has(> .mw-section-subtitle) {
+    scroll-margin-top: calc(
+      var(--mw-header-height) + var(--mw-section-nav-height) + #{spacing('5')}
+    );
   }
 
   .mw-section-btn {
-    width: 100%;
-    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    // No shrinking in a row that scrolls rather than wraps
+    flex: 0 0 auto;
+    gap: spacing('3');
+    padding: spacing('3') spacing('4');
+    border: 1px solid var(--mw-primary-text-color);
+    border-radius: radius('sm');
+    font-weight: font-weight('medium');
+    font-size: inherit;
+    font-family: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    transition: var(--mw-transition);
+    box-sizing: border-box;
+    background: transparent;
+    color: var(--mw-primary-text-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+      transition-duration: var(--mw-duration-instant);
+    }
+
+    @include focus-ring;
+    @include tappable;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
   }
-}
 
-// Additional spacing for the whole section
-.mw-section {
-  padding: var(--mw-section-padding-block) spacing('0');
-  position: relative;
-
-  // ...except around a hero. The hero container is already 100dvh, so the
-  // padding pushes exactly that much of it past the bottom of the screen -
-  // and with it the scroll cue sitting on its lower edge. A hero is the full
-  // screen by definition and brings its own breathing room.
-  @supports (selector(:has(.mw-hero))) {
-    &:has(.mw-hero) {
-      padding-block: spacing('0');
+  @include media-down('sm') {
+    // The section boundary steps down to 56px on a phone, so the component
+    // boundary steps with it or the two stop being distinguishable
+    .mw-section-subtitle {
+      margin-top: spacing('7');
     }
   }
-}
 
-// Pattern variant for sections
-.mw-section-alternate {
-  position: relative;
-  --s: 5px; // size
-  --c1: var(--mw-page-background);
-  --c2: var(--mw-section-alternate-pattern);
-  --g: var(--c2) -5% 5%, var(--c1) 0 45%;
-  background:
-    linear-gradient(0deg, #0000 10%, var(--c1) 0 40%, #0000 0),
-    repeating-linear-gradient(-45deg, var(--g)) var(--c1);
-  background-size: var(--s) var(--s);
+  .mw-section {
+    padding: var(--mw-section-padding-block) spacing('0');
+    position: relative;
+
+    // ...except around a hero. The hero container is already 100dvh, so the
+    // padding pushes exactly that much of it past the bottom of the screen -
+    // and with it the scroll cue sitting on its lower edge. A hero is the full
+    // screen by definition and brings its own breathing room.
+    @supports (selector(:has(.mw-hero))) {
+      &:has(.mw-hero) {
+        padding-block: spacing('0');
+      }
+    }
+  }
+
+  .mw-section-alternate {
+    position: relative;
+    --s: 5px;
+    --c1: var(--mw-page-background);
+    --c2: var(--mw-section-alternate-pattern);
+    --g: var(--c2) -5% 5%, var(--c1) 0 45%;
+    background:
+      linear-gradient(0deg, #0000 10%, var(--c1) 0 40%, #0000 0),
+      repeating-linear-gradient(-45deg, var(--g)) var(--c1);
+    background-size: var(--s) var(--s);
+  }
 }

package/src/scss/main.scss

@@ -3,7 +3,7 @@
 @forward 'abstracts/variables';
 
 @use 'base';
+@use 'layout';
 @use 'components';
 @use 'form-elements';
-@use 'layout';
 @use 'utilities';

package/src/scss/utilities/_accessibility.scss

@@ -1,52 +1,53 @@
 @use '../abstracts' as *;
 
-// Visible to screen readers only
-.mw-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
+@layer mw.utilities {
+  .mw-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 
-// The first thing a keyboard user meets on the page: a link that jumps past the
-// header and the navigation straight to the content. Off-screen until focused,
-// which is why it can be the first element in the body without being seen.
-//
-//   <a class="mw-skip-link" href="#main">Skip to content</a>
-.mw-skip-link {
-  position: absolute;
-  left: spacing('3');
-  top: spacing('3');
-  z-index: z-index('alert');
-  padding: spacing('3') spacing('5');
-  border-radius: radius('sm');
-  background: var(--mw-primary-color);
-  color: var(--mw-primary-accent-text-color);
-  font-weight: font-weight('medium');
-  box-shadow: var(--mw-elevation-3);
-  transform: translateY(calc(-100% - #{spacing('5')}));
-  transition: transform var(--mw-duration-fast) var(--mw-ease-out);
+  // The first thing a keyboard user meets on the page: a link that jumps past the
+  // header and the navigation straight to the content. Off-screen until focused,
+  // which is why it can be the first element in the body without being seen.
+  //
+  //   <a class="mw-skip-link" href="#main">Skip to content</a>
+  .mw-skip-link {
+    position: absolute;
+    left: spacing('3');
+    top: spacing('3');
+    z-index: z-index('alert');
+    padding: spacing('3') spacing('5');
+    border-radius: radius('sm');
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-accent-text-color);
+    font-weight: font-weight('medium');
+    box-shadow: var(--mw-elevation-3);
+    transform: translateY(calc(-100% - #{spacing('5')}));
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
 
-  &:focus-visible {
-    transform: translateY(0);
+    &:focus-visible {
+      transform: translateY(0);
+    }
   }
-}
 
-// Content that is there for a screen reader but comes back on focus - the same
-// idea as sr-only, for something that has to be reachable by tab.
-.mw-sr-only-focusable:not(:focus):not(:focus-within) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
+  // Content that is there for a screen reader but comes back on focus - the same
+  // idea as sr-only, for something that has to be reachable by tab.
+  .mw-sr-only-focusable:not(:focus):not(:focus-within) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }

package/src/scss/utilities/_aspect.scss

@@ -1,27 +1,29 @@
 @use '../abstracts' as *;
 
-// Reserves the right box before the image inside it has loaded, which is the
-// whole point: without it the page reflows when the picture arrives and
-// everything below it jumps. The child fills the box and crops rather than
-// stretching.
-$_mw-aspects: (
-  'square': '1 / 1',
-  'video': '16 / 9',
-  'wide': '21 / 9',
-  'portrait': '3 / 4',
-  'photo': '4 / 3',
-);
+@layer mw.utilities {
+  // Reserves the right box before the image inside it has loaded, which is the
+  // whole point: without it the page reflows when the picture arrives and
+  // everything below it jumps. The child fills the box and crops rather than
+  // stretching.
+  $_mw-aspects: (
+    'square': '1 / 1',
+    'video': '16 / 9',
+    'wide': '21 / 9',
+    'portrait': '3 / 4',
+    'photo': '4 / 3',
+  );
 
-@each $name, $ratio in $_mw-aspects {
-  .mw-aspect-#{$name} {
-    aspect-ratio: #{$ratio};
+  @each $name, $ratio in $_mw-aspects {
+    .mw-aspect-#{$name} {
+      aspect-ratio: #{$ratio};
 
-    > img,
-    > video,
-    > iframe {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+      > img,
+      > video,
+      > iframe {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
 }

package/src/scss/utilities/_corner.scss

@@ -1,8 +1,26 @@
 @use '../abstracts' as *;
 
-// Opt-out from the corner accent - the arc on the two round corners that every
-// surface in the framework carries, see the surface() mixin. Everything else
-// stays: the radii, the border, the shadow, the hover.
-.mw-corner-plain::after {
-  content: none;
+@layer mw.utilities {
+  // Opt-out from the corner accent - the arc on the two round corners that every
+  // surface in the framework carries, see the surface() mixin. Everything else
+  // stays: the radii, the border, the shadow, the hover.
+  .mw-corner-plain::after {
+    content: none;
+  }
+
+  // The framework silhouette drawn with a superellipse instead of a circular
+  // arc - the same four radii, a fuller curve. Opt-in on purpose: `corner-shape`
+  // only lands in Chromium so far, and switching it on by default would make the
+  // same card read differently in two browsers side by side without anyone
+  // having asked for it.
+  //
+  // The corner accent follows, or the arc would sit on a curve it no longer
+  // matches.
+  .mw-squircle {
+    corner-shape: squircle;
+
+    &::after {
+      corner-shape: squircle;
+    }
+  }
 }