maverick-wave 4.9.4 → 4.11.0

package/src/scss/base/_base.scss

@@ -36,8 +36,58 @@ $_active-prefix: 'dark';
     --mw-light-#{$name}: #{$value};
   }
 
-  // Transitions
-  --mw-transition: #{$transition-default};
+  // Motion. The scale itself lives in the variables file - these are the knobs
+  // a project retunes without recompiling.
+  --mw-duration-instant: #{$duration-instant};
+  --mw-duration-fast: #{$duration-fast};
+  --mw-duration-base: #{$duration-base};
+  --mw-duration-slow: #{$duration-slow};
+  --mw-duration-slower: #{$duration-slower};
+  --mw-duration-zoom: #{$duration-zoom};
+  --mw-ease-out: #{$ease-out};
+  --mw-ease-in-out: #{$ease-in-out};
+  --mw-ease-spring: #{$ease-spring};
+
+  // The workhorse: every hover, focus and active state in the framework. An
+  // explicit property list rather than `all` - see $transition-properties.
+  --mw-transition: #{$transition-properties} var(--mw-duration-base)
+    var(--mw-ease-out);
+  // Same list, for a state change that should feel instant under the pointer
+  // rather than animated - a button label, a tag, a table row.
+  --mw-transition-fast: #{$transition-properties} var(--mw-duration-fast)
+    var(--mw-ease-out);
+
+  // Control sizes - see the note in the variables file. Custom properties
+  // rather than compile-time only, so an application can tighten its forms
+  // without recompiling the framework.
+  --mw-control-height-sm: #{$control-height-sm};
+  --mw-control-height: #{$control-height};
+  --mw-control-height-lg: #{$control-height-lg};
+  --mw-control-font-sm: #{$control-font-sm};
+  --mw-control-font: #{$control-font};
+  --mw-control-font-lg: #{$control-font-lg};
+  --mw-control-line-height: #{$control-line-height};
+
+  // Focus ring
+  --mw-focus-ring-width: #{$focus-ring-width};
+  --mw-focus-ring-offset: #{$focus-ring-offset};
+  --mw-focus-ring-color: var(--mw-primary-text-color);
+  --mw-focus-halo-size: #{$focus-halo-size};
+  --mw-focus-halo-opacity: #{$focus-halo-opacity};
+
+  // Tells the browser which way round the page is, which is the only way the
+  // chrome it draws itself follows along: scrollbars, the popup a <select>
+  // opens, the panel behind a date picker, the spinner on a number field.
+  // Without it a dark page keeps light scrollbars and a white select popup.
+  @if $mw-theme-mode == 'light' {
+    color-scheme: light;
+  } @else {
+    color-scheme: dark;
+  }
+  // Native controls the framework does not paint over - <progress>, a file
+  // input's button, a text selection handle - take the brand colour instead of
+  // the OS blue.
+  accent-color: var(--mw-primary-color);
 
   // theme for theme-toggle
   --mw-internal-theme-mode: #{$mw-theme-mode};
@@ -87,9 +137,25 @@ $_active-prefix: 'dark';
     @each $name, $value in $light-theme-colors {
       --mw-#{$name}: var(--mw-light-#{$name});
     }
+
+    color-scheme: light;
   }
 }
 
+// Form controls are deliberately light in both themes - see
+// $form-elements-background - so they opt back out of the page's colour scheme.
+// Without this the browser draws their built-in parts for a dark surface and a
+// date field ends up with a white calendar icon on a near-white background.
+input,
+select,
+textarea,
+.mw-input,
+.mw-select,
+.mw-textarea,
+.mw-input-group {
+  color-scheme: light;
+}
+
 // Anything that draws its own surface re-points the cover colour of a scroll
 // hint, so a tab bar or a wide table inside a card fades into the card and not
 // into the page behind it. Inherited, so nesting keeps working.
@@ -100,3 +166,38 @@ $_active-prefix: 'dark';
 .mw-calendar:not(.mw-calendar-plain) {
   --mw-scroll-hint-cover: var(--mw-card-background);
 }
+
+// ---------------------------------------------------------------------------
+// Reduced motion
+//
+// One switch for the whole framework. Turning the duration tokens down covers
+// everything built on them; the blanket rule underneath covers the handful of
+// animations that name their own timing, plus anything a project wrote itself.
+//
+// 1ms and not 0: a zero-length transition never fires transitionend, and any
+// script waiting for it to clean up - a modal removing a class, a toast
+// removing itself - would wait forever.
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --mw-duration-instant: 1ms;
+    --mw-duration-fast: 1ms;
+    --mw-duration-base: 1ms;
+    --mw-duration-slow: 1ms;
+    --mw-duration-slower: 1ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+  }
+
+  html {
+    scroll-behavior: auto;
+  }
+}

package/src/scss/base/_reset.scss

@@ -15,10 +15,14 @@ html {
   scroll-padding-top: calc(var(--mw-header-height) + #{spacing('4')});
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  @include scrollbar(var(--mw-border), transparent);
 }
 
 body {
   background: var(--mw-page-background);
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   &:has(.mw-modal-open) {
     overflow: hidden;
@@ -26,10 +30,20 @@ body {
   }
 }
 
+// A selection in the browser default blue on a deep blue page is the one bit of
+// chrome that gives away that nobody looked. Brand tint, kept translucent so it
+// works over a card, a code block and an image caption alike.
+::selection {
+  background: color-mix(in srgb, var(--mw-primary-color) 55%, transparent);
+  color: var(--mw-text-color);
+}
+
 a {
   text-decoration: none;
   color: var(--mw-text-muted-color);
   transition: var(--mw-transition);
+  @include tappable;
+  @include focus-ring(2px);
 }
 
 ul {
@@ -39,6 +53,9 @@ ul {
 hr {
   margin: spacing('3') 0;
   color: var(--mw-text-muted-color);
+  border: 0;
+  border-top: 1px solid currentcolor;
+  opacity: 0.35;
 }
 
 img {
@@ -52,13 +69,38 @@ button {
   border: none;
   cursor: pointer;
   font-family: inherit;
+  color: inherit;
+  @include tappable;
 }
 
 input,
-textarea {
+textarea,
+select {
   font-family: inherit;
 }
 
+// A control the framework has no component for - a bare <summary>, a
+// contenteditable, an element carrying tabindex - still gets a ring.
+:focus-visible {
+  outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+  outline-offset: var(--mw-focus-ring-offset);
+}
+
+// Media that has to fit its box without distorting. `height: auto` alone keeps
+// the aspect ratio only while nothing else sets a height.
+img,
+svg,
+video,
+canvas {
+  max-width: 100%;
+}
+
+// Anchored headings clear the fixed bar the same way html's scroll-padding does,
+// for the case where a script scrolls an element into view itself.
+:target {
+  scroll-margin-top: calc(var(--mw-header-height) + #{spacing('4')});
+}
+
 table {
   border-collapse: collapse;
   width: 100%;

package/src/scss/base/_typography.scss

@@ -25,6 +25,22 @@ h6 {
   line-height: 1.2;
   margin-bottom: spacing('4');
   font-weight: font-weight('bold');
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+
+// Tracking
+h1 {
+  letter-spacing: -0.025em;
+}
+
+h2 {
+  letter-spacing: -0.02em;
+}
+
+h3,
+h4 {
+  letter-spacing: -0.01em;
 }
 
 // Two steps, not one. With the single jump at 576px, everything between there
@@ -79,6 +95,37 @@ h6 {
 // Paragraphs
 p {
   margin-bottom: spacing('3');
+  text-wrap: pretty;
+}
+
+// Inline text the framework was leaving to the browser. `small` in particular
+// showed up in footers and captions at whatever the UA felt like.
+small {
+  font-size: font-size('sm');
+  color: var(--mw-text-muted-color);
+}
+
+strong,
+b {
+  font-weight: font-weight('bold');
+}
+
+// The browser's own is a solid block of background with the text left dark on
+// it - unreadable on a dark page. Tinted with the brand instead, and it keeps
+// the theme's ink.
+mark {
+  background: color-mix(in srgb, var(--mw-warning-color) 35%, transparent);
+  color: inherit;
+  padding: 0.1em 0.25em;
+  border-radius: radius('xs');
+}
+
+// Underlined in the same shape the link buttons use, so an inline link and a
+// `mw-btn-link` do not read as two different things
+abbr[title] {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2em;
+  cursor: help;
 }
 
 // Code elements

package/src/scss/components/_accordions.scss

@@ -18,6 +18,16 @@
     padding: spacing('4');
     background: var(--mw-card-background);
     cursor: pointer;
+    @include tappable;
+    @include focus-ring(-2px);
+
+    // A press has to be felt. On touch it is the only feedback there is - a
+    // finger never hovers - and every clickable surface in the framework owes it.
+    &:active {
+      background: var(--mw-primary-background);
+      transition-duration: var(--mw-duration-instant);
+    }
+
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -56,7 +66,7 @@
   &-content {
     height: spacing('0');
     overflow: hidden;
-    transition: height 0.9s ease;
+    transition: height var(--mw-duration-slower) var(--mw-ease-out);
     background: var(--mw-card-background);
     interpolate-size: allow-keywords;
 

package/src/scss/components/_alerts.scss

@@ -10,7 +10,7 @@
 
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
-  box-shadow: 0 2px 5px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
 
   &-icon {
     flex-shrink: 0;
@@ -49,9 +49,9 @@
   }
 
   @include media-down('sm') {
-    padding: spacing('2');
+    padding: spacing('4');
     &-icon {
-      margin-right: spacing('2');
+      margin-right: spacing('3');
     }
   }
 }

package/src/scss/components/_avatars.scss

@@ -12,10 +12,10 @@ $_mw-avatar-colors: (
 .mw-avatar {
   display: inline-flex;
   position: relative;
-  border-radius: 50%;
+  border-radius: radius('full');
   overflow: hidden;
   border: 3px solid var(--mw-border);
-  box-shadow: 0 6px 15px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-3);
   margin: spacing('1');
 
   // Standard (md)
@@ -89,14 +89,14 @@ $_mw-avatar-colors: (
     flex-wrap: wrap; // Allow items to wrap to next line
     justify-content: flex-start;
     margin: spacing('2');
+    row-gap: spacing('3');
 
     .mw-avatar {
-      margin-right: -15px;
-      margin-bottom: -15px;
+      margin: spacing('0') -15px spacing('0') spacing('0');
       border: 2px solid var(--mw-secondary-text-color);
-      transition: transform 0.3s ease;
+      transition: transform var(--mw-duration-base) var(--mw-ease-out);
 
-      &:hover {
+      @include hover {
         transform: translateY(-3px);
         z-index: z-index('lift');
       }
@@ -115,11 +115,32 @@ $_mw-avatar-colors: (
       margin-right: -20px;
     }
 
+    .mw-avatar-xs {
+      margin-right: -5px;
+    }
+    .mw-avatar-sm {
+      margin-right: -10px;
+    }
+    .mw-avatar-lg {
+      margin-right: -23px;
+    }
+    .mw-avatar-xl {
+      margin-right: -40px;
+    }
+
+    .mw-avatar:last-child {
+      margin-right: spacing('0');
+    }
+
     @include media-down('sm') {
       // For small screens, create a more compact layout
       .mw-avatar {
         margin-right: -10px; // Reduce overlap on small screens
       }
+
+      .mw-avatar:last-child {
+        margin-right: spacing('0');
+      }
     }
   }
 

package/src/scss/components/_badge.scss

@@ -0,0 +1,157 @@
+@use '../abstracts' as *;
+
+// Badge
+//
+// Not a tag. A tag is a label with a soft surface that names something - a
+// topic, a state, a category - and sits in a row of its own kind. A badge is a
+// solid mark that carries a *count* or a *status*, and it usually sits on
+// something else: the number on a bell, the dot on an avatar, the "3" on a tab.
+
+$_mw-badge-colors: (primary, secondary, success, warning, danger, info);
+
+.mw-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 spacing('2');
+  border-radius: radius('xl');
+  background: var(--mw-primary-color);
+  color: var(--mw-primary-accent-text-color);
+  font-size: font-size('2xs');
+  font-weight: font-weight('bold');
+  line-height: 1;
+  font-variant-numeric: tabular-nums lining-nums;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+@each $name in $_mw-badge-colors {
+  .mw-badge-#{$name} {
+    background: var(--mw-#{$name}-color);
+    color: var(--mw-#{$name}-accent-text-color);
+  }
+}
+
+.mw-badge-muted {
+  background: var(--mw-gray-color);
+  color: var(--mw-accent-text-color);
+}
+
+.mw-badge-outline {
+  background: transparent;
+  border: 1px solid currentcolor;
+  color: var(--mw-primary-text-color);
+}
+
+.mw-badge-sm {
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 spacing('1');
+  font-size: font-size('3xs');
+}
+
+.mw-badge-lg {
+  min-width: 1.6rem;
+  height: 1.6rem;
+  padding: 0 spacing('3');
+  font-size: font-size('xs');
+}
+
+// Dot
+.mw-badge-dot {
+  display: inline-block;
+  width: 0.55rem;
+  height: 0.55rem;
+  min-width: 0;
+  padding: 0;
+  border-radius: radius('full');
+  background: var(--mw-primary-color);
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+// A dot that is actually live - a running job, an open connection. The ring
+// pulses outward and fades; the dot underneath never moves, so a row of them
+// stays legible.
+.mw-badge-pulse {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    animation: mw-badge-pulse 1.8s var(--mw-ease-out) infinite;
+  }
+}
+
+@keyframes mw-badge-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+
+// Anchoring a badge to something
+.mw-badge-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.mw-badge-float {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(40%, -40%);
+  box-shadow: 0 0 0 2px var(--mw-page-background);
+  pointer-events: none;
+  z-index: z-index('lift');
+}
+
+// Inside anything that paints its own surface the ring has to match that
+// surface, not the page
+.mw-card,
+.mw-panel,
+.mw-modal,
+.mw-tile,
+.mw-header {
+  .mw-badge-float {
+    box-shadow: 0 0 0 2px var(--mw-card-background);
+  }
+}
+
+.mw-header .mw-badge-float {
+  box-shadow: 0 0 0 2px var(--mw-header-background);
+}
+
+// Status line
+.mw-badge-status {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('2');
+  font-size: font-size('sm');
+  color: var(--mw-text-color);
+  white-space: nowrap;
+}
+
+@each $name in $_mw-badge-colors {
+  .mw-badge-dot-#{$name} {
+    background: var(--mw-#{$name}-color);
+  }
+
+  .mw-badge-status-#{$name} .mw-badge-dot {
+    background: var(--mw-#{$name}-color);
+  }
+}
+
+.mw-badge-dot-muted,
+.mw-badge-status-muted .mw-badge-dot {
+  background: var(--mw-gray-color);
+}

package/src/scss/components/_blog-post.scss

@@ -4,7 +4,10 @@
   position: relative;
   margin: spacing('2');
   padding: spacing('4') spacing('7');
-  animation: pageReveal 1.6s ease-out forwards;
+  // One-shot entrance, not a loop, so it belongs on the scale. It ran for
+  // 1.6s before - long enough that the reader is into the second paragraph
+  // while the page is still arriving.
+  animation: pageReveal var(--mw-duration-slower) var(--mw-ease-out) forwards;
   border-radius: radius('sm') radius('2xl') radius('sm') radius('2xl');
   box-shadow:
     var(--mw-border) 0 30px 60px -18px inset,
@@ -34,8 +37,8 @@
     position: absolute;
     left: 1px;
     top: 1px;
+    bottom: 1px;
     width: 7px;
-    height: 99%;
     background: linear-gradient(
       to bottom,
       var(--mw-primary-color),
@@ -76,8 +79,8 @@
       justify-content: center;
       margin-bottom: spacing('4');
       font-size: font-size('xl');
-      box-shadow: 0 5px 9px var(--mw-shadow);
-      animation: iconFlip 2s ease-out forwards;
+      box-shadow: var(--mw-elevation-2);
+      animation: iconFlip var(--mw-duration-slower) var(--mw-ease-out) forwards;
 
       @keyframes iconFlip {
         0% {
@@ -131,7 +134,7 @@
     object-fit: contain;
     border-radius: radius('sm');
     margin-bottom: spacing('5');
-    box-shadow: 0 5px 12px var(--mw-shadow);
+    box-shadow: var(--mw-elevation-3);
   }
 
   // Content section
@@ -198,8 +201,8 @@
         transform: scaleX(1);
         transform-origin: left;
         transition:
-          transform 0.2s ease,
-          opacity 0.2s ease;
+          transform var(--mw-duration-fast) var(--mw-ease-out),
+          opacity var(--mw-duration-fast) var(--mw-ease-out);
       }
 
       &:hover {

package/src/scss/components/_breadcrumbs.scss

@@ -47,15 +47,24 @@
       position: relative;
       transition: var(--mw-transition);
 
+      @include tappable;
+
       &:hover,
-      &:focus,
       &.mw-breadcrumbs-active {
-        outline: 0;
         color: var(--mw-primary-text-color);
         border-color: var(--mw-primary-text-color);
         z-index: z-index('lift');
       }
 
+      &:active {
+        color: var(--mw-primary-text-color);
+        transition-duration: var(--mw-duration-instant);
+      }
+
+      @include focus-ring-inset(-4px) {
+        z-index: z-index('lift');
+      }
+
       // Counter-skew the content
       & > * {
         transform: skew(30deg);

package/src/scss/components/_button-bar.scss

@@ -20,8 +20,8 @@
     gap: spacing('2');
 
     .mw-btn {
-      width: 96%;
-      min-width: 200px;
+      width: 100%;
+      min-width: 0;
     }
   }
 }
@@ -57,6 +57,8 @@
     background: var(--mw-primary-color);
     color: var(--mw-primary-accent-text-color);
 
+    @include btn-solid;
+
     &:hover:not(:disabled) {
       background: var(--mw-primary-color-hover);
     }
@@ -71,6 +73,8 @@
     background: var(--mw-secondary-color);
     color: var(--mw-secondary-accent-text-color);
 
+    @include btn-solid;
+
     &:hover:not(:disabled) {
       background: var(--mw-secondary-color-hover);
     }
@@ -115,6 +119,8 @@
     background: var(--mw-primary-color);
     color: var(--mw-primary-accent-text-color);
 
+    @include btn-solid;
+
     &:hover:not(:disabled) {
       background: var(--mw-primary-color-hover);
     }
@@ -137,6 +143,7 @@
   .mw-btn {
     padding: spacing('3') spacing('5');
     font-size: font-size('md');
+    min-height: var(--mw-control-height-lg);
   }
 
   @include media-down('sm') {