maverick-wave 4.9.4 → 4.11.0

package/src/scss/layout/_header.scss

@@ -121,10 +121,7 @@
       transform: translateY(0);
     }
 
-    &:focus-visible {
-      outline: 2px solid var(--mw-primary-text-color);
-      outline-offset: 2px;
-    }
+    @include focus-ring;
 
     &.open {
       background: var(--mw-secondary-color);
@@ -162,7 +159,11 @@
     background: var(--mw-header-burgerbutton-color);
     border-radius: 1px;
     position: relative;
-    transition: all 0.3s ease;
+    // `all` on purpose, and the one place in the framework that keeps it: the
+    // burger morphs into an X by moving its two bars to the centre, so `top`
+    // and `bottom` have to animate - and those are exactly what the shared
+    // property list leaves out.
+    transition: all var(--mw-duration-base) var(--mw-ease-out);
 
     &::before,
     &::after {
@@ -173,7 +174,7 @@
       height: 2px;
       background: var(--mw-header-burgerbutton-color);
       border-radius: 1px;
-      transition: all 0.3s ease;
+      transition: all var(--mw-duration-base) var(--mw-ease-out);
     }
 
     &::before {
@@ -196,14 +197,16 @@
   height: 100dvh;
   background: var(--mw-header-background);
   border-left: 1px solid var(--mw-header-border);
-  box-shadow: -10px 0 30px var(--mw-shadow);
+  box-shadow:
+    -6px 0 12px var(--mw-shadow-near),
+    -18px 0 40px var(--mw-shadow-far);
   z-index: z-index('header') + 3;
 
   transform: translateX(100%);
   visibility: hidden;
   transition:
-    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
-    visibility 0.3s;
+    transform var(--mw-duration-base) var(--mw-ease-out),
+    visibility var(--mw-duration-base);
 
   .mw-navbar-list {
     display: flex;
@@ -269,7 +272,8 @@
 
     // Items follow the panel in, slightly staggered
     .mw-navbar-item {
-      animation: mw-navbar-item-in 0.3s ease forwards;
+      animation: mw-navbar-item-in var(--mw-duration-base) var(--mw-ease-out)
+        forwards;
 
       @for $i from 1 through 10 {
         &:nth-child(#{$i}) {
@@ -302,7 +306,7 @@
       background: var(--mw-overlay-background);
       backdrop-filter: blur(2px);
       z-index: z-index('header') - 1;
-      animation: mw-navbar-scrim-in 0.3s ease;
+      animation: mw-navbar-scrim-in var(--mw-duration-base) var(--mw-ease-out);
     }
   }
 }
@@ -364,8 +368,8 @@
       transform: scaleX(0);
       transform-origin: center;
       transition:
-        transform 0.2s,
-        opacity 0.2s;
+        transform var(--mw-duration-fast),
+        opacity var(--mw-duration-fast);
       opacity: 0;
     }
 
@@ -499,10 +503,7 @@
     border-color: var(--mw-primary-text-color);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
-  }
+  @include focus-ring;
 
   &:disabled {
     opacity: 0.6;

package/src/scss/layout/_home.scss

@@ -14,7 +14,7 @@
     // choose mw-home-content or mw-home-content-fade
     &-fade {
       @extend .mw-home-content;
-      animation: fadeIn 1.7s ease-in;
+      animation: fadeIn var(--mw-duration-slower) var(--mw-ease-out);
     }
   }
 

package/src/scss/layout/_main.scss

@@ -118,16 +118,16 @@ $_mw-tooltip-gap: 8px;
     width: max-content;
     padding: spacing('1') spacing('2');
     background: var(--mw-gray-color);
-    color: #efefef;
+    color: $fixed-surface-text;
     font-size: font-size('xs');
     border-radius: radius('xs');
-    box-shadow: 0 2px 5px var(--mw-shadow);
+    box-shadow: var(--mw-elevation-2);
     pointer-events: none;
     opacity: 0;
     display: none;
     transition:
-      opacity 0.2s ease,
-      display 0.2s allow-discrete;
+      opacity var(--mw-duration-fast) var(--mw-ease-out),
+      display var(--mw-duration-fast) allow-discrete;
     z-index: z-index('tooltip');
   }
 
@@ -144,8 +144,8 @@ $_mw-tooltip-gap: 8px;
     opacity: 0;
     display: none;
     transition:
-      opacity 0.2s ease,
-      display 0.2s allow-discrete;
+      opacity var(--mw-duration-fast) var(--mw-ease-out),
+      display var(--mw-duration-fast) allow-discrete;
     z-index: z-index('tooltip');
   }
 

package/src/scss/layout/_section.scss

@@ -45,7 +45,7 @@
 }
 
 .mw-section-nav {
-  max-width: 90%;
+  max-width: 100%;
   margin: spacing('0') auto spacing('0') auto;
   display: flex;
   flex-wrap: wrap;
@@ -76,11 +76,14 @@
     color: var(--mw-primary-accent-text-color);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--mw-primary-text-color);
-    outline-offset: 2px;
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+    transition-duration: var(--mw-duration-instant);
   }
 
+  @include focus-ring;
+  @include tappable;
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;

package/src/scss/utilities/_accessibility.scss

@@ -12,3 +12,41 @@
   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);
+
+  &: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;
+}

package/src/scss/utilities/_aspect.scss

@@ -0,0 +1,27 @@
+@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',
+);
+
+@each $name, $ratio in $_mw-aspects {
+  .mw-aspect-#{$name} {
+    aspect-ratio: #{$ratio};
+
+    > img,
+    > video,
+    > iframe {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/scss/utilities/_display.scss

@@ -43,3 +43,55 @@
     border-radius: $value;
   }
 }
+
+// Responsive display
+$_mw-responsive-displays: (none, block, flex, inline-flex, grid, inline-block);
+
+@each $bp in ('sm', 'md', 'lg', 'xl') {
+  @include media-up($bp) {
+    @each $value in $_mw-responsive-displays {
+      .mw-d-#{$bp}-#{$value} {
+        display: #{$value};
+      }
+    }
+  }
+}
+
+// The two everyone actually reaches for, spelled out. `md` is the divide: below
+// it a phone, at it and above a tablet with room for a second column.
+.mw-hide-mobile {
+  @include media-down('md') {
+    display: none !important;
+  }
+}
+
+.mw-hide-desktop {
+  @include media-up('md') {
+    display: none !important;
+  }
+}
+
+// Overflow, for the wrappers that hold something wider than the phone they are
+// being read on
+.mw-overflow-auto {
+  overflow: auto;
+}
+
+.mw-overflow-x-auto {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+.mw-overflow-hidden {
+  overflow: hidden;
+}
+
+// Snap a horizontal strip so it comes to rest on an item instead of halfway
+// between two - a row of cards swiped through on a phone
+.mw-snap-x {
+  scroll-snap-type: x mandatory;
+
+  > * {
+    scroll-snap-align: start;
+  }
+}

package/src/scss/utilities/_elevation.scss

@@ -0,0 +1,16 @@
+@use '../abstracts' as *;
+
+// The elevation ramp as classes, for a surface a project draws itself. Same
+// five steps every component uses - see the elevation() function.
+//
+// 0 is not "no shadow it forgot to set", it is "explicitly flat": for taking a
+// component off the page it normally floats above.
+.mw-elevation-0 {
+  box-shadow: none;
+}
+
+@for $level from 1 through 5 {
+  .mw-elevation-#{$level} {
+    box-shadow: var(--mw-elevation-#{$level});
+  }
+}

package/src/scss/utilities/_index.scss

@@ -1,5 +1,7 @@
 @forward 'accessibility';
+@forward 'aspect';
 @forward 'display';
+@forward 'elevation';
 @forward 'flex';
 @forward 'spacing';
 @forward 'text';

package/src/scss/utilities/_text.scss

@@ -115,3 +115,66 @@
     line-height: 1.8;
   }
 }
+
+// Overflow
+.mw-text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+@each $lines in (2, 3, 4, 5) {
+  .mw-text-clamp-#{$lines} {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.mw-text-nowrap {
+  white-space: nowrap;
+}
+
+// For anything that has no spaces to break at - a URL, a hash, an API key -
+// and would otherwise push the page sideways on a phone
+.mw-text-break {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+// Wrapping
+.mw-text-balance {
+  text-wrap: balance;
+}
+
+.mw-text-pretty {
+  text-wrap: pretty;
+}
+
+.mw-text-uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.mw-text-capitalize {
+  text-transform: capitalize;
+}
+
+// A kicker or an eyebrow over a heading - the small, spaced, upper-case line
+// that says what section this is
+.mw-text-eyebrow {
+  font-size: font-size('2xs');
+  font-weight: font-weight('bold');
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--mw-text-muted-color);
+}
+
+// Sets the measure a column of text is comfortable at. Anything past roughly 75
+// characters and the eye loses the start of the next line on the way back.
+.mw-text-measure {
+  max-width: 68ch;
+}

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

@@ -12,6 +12,14 @@
 // component defaults without needing extra specificity.
 // ---------------------------------------------------------------------------
 @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+  // The default button was the one that got missed. Its padding and line-height
+  // add up to about 35px, which is under the 44px every platform guideline asks
+  // for and the size a thumb actually is. Only the height grows - the padding
+  // is what sets the label's relationship to the edges and is right as it is.
+  .mw-btn {
+    min-height: 2.75rem;
+  }
+
   .mw-btn-sm {
     min-height: 2.5rem;
   }
@@ -22,6 +30,13 @@
     min-height: 2.5rem;
   }
 
+  // The base fields sit at 2.35rem from the control scale, which is right under
+  // a pointer and short of a thumb. Same floor as the button beside them.
+  .mw-input,
+  .mw-select {
+    min-height: 2.75rem;
+  }
+
   .mw-input,
   .mw-input-sm,
   .mw-input-lg,
@@ -45,6 +60,25 @@
     min-height: 2.5rem;
   }
 
+  // Rows of a list, items of a menu, links in a footer, pages of a pager - the
+  // controls that are a line of text on a desktop and a target on a phone
+  .mw-dropdown-item,
+  .mw-accordion-header,
+  .mw-modal-close,
+  .mw-breadcrumbs-item a {
+    min-height: 2.75rem;
+    display: flex;
+    align-items: center;
+  }
+
+  // A checkbox or radio is tapped by its label as much as by the box, so the
+  // whole row has to be the target - which it only is if the row is tall enough
+  .mw-checkbox,
+  .mw-radio,
+  .mw-toggle {
+    min-height: 2.5rem;
+  }
+
   .mw-calendar-day {
     min-height: 44px;
   }
@@ -64,3 +98,32 @@
     }
   }
 }
+
+// Sideways scroll
+.mw-table-responsive,
+.mw-tabs-nav {
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+// Phone layout
+@include media-down('md') {
+  :root {
+    --mw-section-padding-block: #{spacing('6')};
+  }
+}
+
+@include media-down('sm') {
+  // Cards sit edge to edge on a phone, so the padding inside them is all that
+  // separates the text from the screen edge - it cannot be the desktop value
+  .mw-card-simple {
+    padding: spacing('4');
+  }
+
+  // A row of actions on a phone stacks, and stacked buttons that are each as
+  // wide as their label look like a list of unrelated things
+  .mw-form-actions .mw-btn,
+  .mw-card-footer .mw-btn {
+    flex: 1 1 auto;
+  }
+}