maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_progress.scss

@@ -1,114 +1,137 @@
 @use '../abstracts' as *;
 
-$_mw-progress-colors: (
-  primary: var(--mw-primary-color),
-  secondary: var(--mw-secondary-color),
-  info: var(--mw-info-color),
-  success: var(--mw-success-color),
-  warning: var(--mw-warning-color),
-  danger: var(--mw-danger-color),
-);
-
-.mw-progress {
-  &-container {
-    margin: spacing('1');
-  }
+@layer mw.components {
+  .mw-progress {
+    &-container {
+      margin: spacing('1');
+    }
 
-  &-barinfo {
-    display: flex;
-    justify-content: space-between;
-    margin: spacing('3') spacing('2') spacing('1');
-    font-size: font-size('sm');
+    &-barinfo {
+      display: flex;
+      justify-content: space-between;
+      margin: spacing('3') spacing('2') spacing('1');
+      font-size: font-size('sm');
 
-    // hide info, if this class is available
-    &.mw-progress-hide-info {
-      display: none;
+      &.mw-progress-hide-info {
+        display: none;
+      }
     }
-  }
 
-  &-label {
-    font-weight: font-weight('medium');
-  }
+    &-label {
+      font-weight: font-weight('medium');
+    }
 
-  &-value {
-    color: var(--mw-text-muted-color);
-    pointer-events: none;
-    align-content: end;
+    &-value {
+      color: var(--mw-text-muted-color);
+      pointer-events: none;
+      align-content: end;
 
-    @include media-down('sm') {
-      font-size: font-size('xs');
-    }
+      @include media-down('sm') {
+        font-size: font-size('xs');
+      }
 
-    // numeric values from 1-10
-    &.mw-progress-numeric {
-      &::after {
-        content: '/10';
+      &.mw-progress-numeric {
+        &::after {
+          content: '/10';
+        }
       }
-    }
 
-    // for percentage values
-    &.mw-progress-percent {
-      &::after {
-        content: '%';
+      &.mw-progress-percent {
+        &::after {
+          content: '%';
+        }
       }
     }
-  }
 
-  &-bar {
-    width: 100%;
-    height: 10px;
-    background: var(--mw-gray-background);
-    opacity: 0.9;
-    border-radius: radius('sm');
-    overflow: hidden;
-    position: relative;
-  }
+    &-bar {
+      width: 100%;
+      height: 10px;
+      background: var(--mw-gray-background);
+      opacity: 0.9;
+      border-radius: radius('sm');
+      overflow: hidden;
+      position: relative;
+    }
 
-  &-fill {
-    // The label sits *inside* the fill, so its ink follows whichever color
-    // variant is on the element - preset to the default fill, re-pointed by
-    // the variants at the bottom of the file
-    --mw-progress-ink: var(--mw-secondary-accent-text-color);
-
-    height: 100%;
-    background: var(--mw-secondary-color);
-    border-radius: radius('sm');
-    width: 0;
-    transition: width var(--mw-duration-slower) var(--mw-ease-in-out);
-  }
+    &-fill {
+      // The label sits *inside* the fill, so its ink follows whichever color
+      // variant is on the element - preset to the default fill, re-pointed by
+      // the variants at the bottom of the file
+      --mw-progress-ink: var(--mw-secondary-accent-text-color);
+
+      // How far the bar is filled. Written by the script from data-value or from
+      // an inline width, and read by the keyframe below. Declared here so it has
+      // a definition rather than only a fallback - an unset bar is an empty one.
+      --mw-progress-value: 0;
+
+      height: 100%;
+      background: var(--mw-secondary-color);
+      border-radius: radius('sm');
+      width: 0;
+      transition: width var(--mw-duration-slower) var(--mw-ease-in-out);
+
+      // The bar fills as it is scrolled into view, tied to the scroll position
+      // rather than to a one-shot transition: scroll back up and it empties
+      // again.
+      //
+      // Gated on a class the script adds, and only once it knows the target
+      // width - an animation outranks an inline style, so a bar written as
+      // `style="width: 70%"` would be animated to nothing by a keyframe that
+      // reads an unset --mw-progress-value. With the gate, a page whose script
+      // never runs keeps whatever width its markup set.
+      &.mw-progress-driven {
+        @supports (animation-timeline: view()) {
+          @media (prefers-reduced-motion: no-preference) {
+            animation: mw-progress-fill linear both;
+            animation-timeline: view();
+            // Starts once the bar is properly on screen and finishes well
+            // before it reaches the middle, so it is full when it is read.
+            animation-range: entry 60% cover 40%;
+          }
+        }
+      }
+    }
 
-  // Sizes
-  &-sm .mw-progress-bar {
-    height: 6px;
-    border-radius: radius('sm');
-  }
+    &-sm .mw-progress-bar {
+      height: 6px;
+      border-radius: radius('sm');
+    }
 
-  &-lg .mw-progress-bar {
-    height: 15px;
-    border-radius: radius('lg');
-  }
+    &-lg .mw-progress-bar {
+      height: 15px;
+      border-radius: radius('lg');
+    }
+
+    &-inline-label {
+      .mw-progress-bar {
+        height: 22px;
+        user-select: none;
+      }
 
-  // With inner label
-  &-inline-label {
-    .mw-progress-bar {
-      height: 22px;
-      user-select: none;
+      .mw-progress-fill {
+        display: flex;
+        align-items: center;
+        padding-left: spacing('6');
+        font-size: font-size('xs');
+        font-weight: font-weight('medium');
+        color: var(--mw-progress-ink);
+      }
     }
+  }
 
-    .mw-progress-fill {
-      display: flex;
-      align-items: center;
-      padding-left: spacing('6');
-      font-size: font-size('xs');
-      font-weight: font-weight('medium');
-      color: var(--mw-progress-ink);
+  @each $name, $col in $semantic-colors {
+    .mw-progress-#{$name} {
+      background: #{$col};
+      --mw-progress-ink: var(--mw-#{$name}-accent-text-color);
     }
   }
-}
 
-@each $name, $col in $_mw-progress-colors {
-  .mw-progress-#{$name} {
-    background: #{$col};
-    --mw-progress-ink: var(--mw-#{$name}-accent-text-color);
+  @keyframes mw-progress-fill {
+    from {
+      width: 0;
+    }
+    to {
+      width: var(--mw-progress-value);
+    }
   }
 }

package/src/scss/components/_prose.scss

@@ -1,42 +1,44 @@
 @use '../abstracts' as *;
 
-// Long-form running text - a legal page, terms, a plain article. One class on
-// the container instead of a utility chain on every heading: the markup inside
-// stays bare h2/h3/p/ul, which is exactly what a CMS or a JSON-driven page
-// produces anyway.
-//
-// Headings are deliberately small: in a document they structure the reading,
-// they do not compete with the page title.
-.mw-prose {
-  h2 {
-    font-size: font-size('lg');
-    color: var(--mw-primary-text-color);
-    margin: spacing('8') 0 spacing('3');
-  }
+@layer mw.components {
+  // Long-form running text - a legal page, terms, a plain article. One class on
+  // the container instead of a utility chain on every heading: the markup inside
+  // stays bare h2/h3/p/ul, which is exactly what a CMS or a JSON-driven page
+  // produces anyway.
+  //
+  // Headings are deliberately small: in a document they structure the reading,
+  // they do not compete with the page title.
+  .mw-prose {
+    h2 {
+      font-size: font-size('lg');
+      color: var(--mw-primary-text-color);
+      margin: spacing('8') 0 spacing('3');
+    }
 
-  h3 {
-    font-size: font-size('md');
-    color: var(--mw-primary-text-color);
-    margin: spacing('6') 0 spacing('2');
-  }
+    h3 {
+      font-size: font-size('md');
+      color: var(--mw-primary-text-color);
+      margin: spacing('6') 0 spacing('2');
+    }
 
-  ul,
-  ol {
-    margin: 0 0 spacing('3') spacing('7');
-  }
+    ul,
+    ol {
+      margin: 0 0 spacing('3') spacing('7');
+    }
 
-  li {
-    margin-bottom: spacing('1');
-  }
+    li {
+      margin-bottom: spacing('1');
+    }
 
-  // The first heading in a card already sits on the card's padding, the last
-  // paragraph on its bottom edge - without these the container carries double
-  // spacing at both ends.
-  > :first-child {
-    margin-top: 0;
-  }
+    // The first heading in a card already sits on the card's padding, the last
+    // paragraph on its bottom edge - without these the container carries double
+    // spacing at both ends.
+    > :first-child {
+      margin-top: 0;
+    }
 
-  > :last-child {
-    margin-bottom: 0;
+    > :last-child {
+      margin-bottom: 0;
+    }
   }
 }

package/src/scss/components/_ratings.scss

@@ -1,49 +1,51 @@
 @use '../abstracts' as *;
 
-.mw-rating {
-  display: inline-flex;
-  flex-wrap: wrap;
-  max-width: 100%;
-  gap: spacing('3');
-  font-size: font-size('2xl');
-  padding: spacing('2') spacing('4');
-
-  border: 1px solid var(--mw-border);
-  border-radius: radius('md');
-
-  &-container {
-    margin: spacing('1');
-  }
+@layer mw.components {
+  .mw-rating {
+    display: inline-flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    gap: spacing('3');
+    font-size: font-size('2xl');
+    padding: spacing('2') spacing('4');
+
+    border: 1px solid var(--mw-border);
+    border-radius: radius('md');
+
+    &-container {
+      margin: spacing('1');
+    }
 
-  &-info {
-    display: flex;
-    justify-content: space-between;
-    margin: spacing('1');
-    font-size: font-size('md');
-  }
+    &-info {
+      display: flex;
+      justify-content: space-between;
+      margin: spacing('1');
+      font-size: font-size('md');
+    }
 
-  &-sm {
-    font-size: font-size('lg');
-    padding: spacing('2') spacing('3');
-  }
+    &-sm {
+      font-size: font-size('lg');
+      padding: spacing('2') spacing('3');
+    }
 
-  &-lg {
-    font-size: font-size('4xl');
-    padding: spacing('3') spacing('5');
-  }
+    &-lg {
+      font-size: font-size('4xl');
+      padding: spacing('3') spacing('5');
+    }
 
-  &-icon {
-    color: var(--mw-gray-color);
-    transition: var(--mw-transition);
-    pointer-events: none;
+    &-icon {
+      color: var(--mw-gray-color);
+      transition: var(--mw-transition);
+      pointer-events: none;
+    }
   }
-}
 
-// fill first N icons based on data-rating
-@for $i from 1 through 5 {
-  .mw-rating[data-rating='#{$i}'] {
-    & .mw-rating-icon:nth-child(-n + #{$i}) {
-      color: var(--mw-primary-text-color);
+  // fill first N icons based on data-rating
+  @for $i from 1 through 5 {
+    .mw-rating[data-rating='#{$i}'] {
+      & .mw-rating-icon:nth-child(-n + #{$i}) {
+        color: var(--mw-primary-text-color);
+      }
     }
   }
 }

package/src/scss/components/_segmented.scss

@@ -1,102 +1,100 @@
 @use '../abstracts' as *;
 
-// Two or three positions of *one* switch - income/expense on a booking form,
-// offer/quote on a document form.
-//
-// Deliberately not a `.mw-button-bar`: that one stacks below 576px and gives
-// every button 96% width, which is right for a row of independent actions and
-// wrong here. Stacked, two positions of a switch look like two buttons you
-// could press both of. This one stays horizontal at every width.
-.mw-segmented {
-  display: inline-flex;
-  width: 100%;
-  gap: spacing('1');
-  padding: spacing('1');
-  background: var(--mw-surface-muted);
-  border: 1px solid var(--mw-border);
-  border-radius: radius('sm');
-}
+@layer mw.components {
+  // Two or three positions of *one* switch - income/expense on a booking form,
+  // offer/quote on a document form.
+  //
+  // Deliberately not a `.mw-button-bar`: that one stacks below 576px and gives
+  // every button 96% width, which is right for a row of independent actions and
+  // wrong here. Stacked, two positions of a switch look like two buttons you
+  // could press both of. This one stays horizontal at every width.
+  .mw-segmented {
+    display: inline-flex;
+    width: 100%;
+    gap: spacing('1');
+    padding: spacing('1');
+    background: var(--mw-surface-muted);
+    border: 1px solid var(--mw-border);
+    border-radius: radius('sm');
+  }
 
-// Equal shares, so the switch reads as one control and not as a row of labels
-.mw-segmented-item {
-  flex: 1 1 0;
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: spacing('2');
-  padding: spacing('2') spacing('3');
-  border: 1px solid transparent;
-  border-radius: radius('xs');
-  background: transparent;
-  color: var(--mw-text-muted-color);
-  font-family: inherit;
-  font-size: font-size('sm');
-  font-weight: font-weight('medium');
-  line-height: 1.2;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: var(--mw-transition);
+  // Equal shares, so the switch reads as one control and not as a row of labels
+  .mw-segmented-item {
+    flex: 1 1 0;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('2');
+    padding: spacing('2') spacing('3');
+    border: 1px solid transparent;
+    border-radius: radius('xs');
+    background: transparent;
+    color: var(--mw-text-muted-color);
+    font-family: inherit;
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    line-height: 1.2;
+    text-align: center;
+    @include truncate;
+    cursor: pointer;
+    transition: var(--mw-transition);
 
-  &:hover:not(:disabled):not(.mw-active):not(.active) {
-    color: var(--mw-text-color);
-  }
+    &:hover:not(:disabled):not(.mw-active):not(.active) {
+      color: var(--mw-text-color);
+    }
 
-  @include tappable;
+    @include tappable;
 
-  &:active {
-    transform: scale(0.97);
-    transition-duration: var(--mw-duration-instant);
-  }
+    &:active {
+      transform: scale(0.97);
+      transition-duration: var(--mw-duration-instant);
+    }
 
-  // Inset, because an outline outside the item would be clipped by the frame
-  @include focus-ring-inset;
+    // Inset, because an outline outside the item would be clipped by the frame
+    @include focus-ring-inset;
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
 
-  &.mw-active,
-  &.active {
-    background: var(--mw-primary-color);
-    border-color: var(--mw-primary-text-color);
-    color: var(--mw-primary-accent-text-color);
+    @include active() {
+      background: var(--mw-primary-color);
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-accent-text-color);
 
-    // A tag inside an item - the saving on a billing cycle, a count on a
-    // filter. Its colour variants mix their background from the *page*, so on
-    // the active item's fill they come out muddy: an orange pill on blue turns
-    // purple. On that one the tag borrows the item's own ink; on the others it
-    // keeps its colour, which is what makes a visitor click it in the first
-    // place.
-    .mw-tag {
-      background: transparent;
-      border-color: currentColor;
-      color: inherit;
+      // A tag inside an item - the saving on a billing cycle, a count on a
+      // filter. Its colour variants mix their background from the *page*, so on
+      // the active item's fill they come out muddy: an orange pill on blue turns
+      // purple. On that one the tag borrows the item's own ink; on the others it
+      // keeps its colour, which is what makes a visitor click it in the first
+      // place.
+      .mw-tag {
+        background: transparent;
+        border-color: currentColor;
+        color: inherit;
+      }
     }
   }
-}
 
-// Secondary tone for a switch that is not the primary decision on the form
-.mw-segmented-secondary .mw-segmented-item {
-  &.mw-active,
-  &.active {
-    background: var(--mw-secondary-color);
-    border-color: var(--mw-secondary-text-color);
-    color: var(--mw-secondary-accent-text-color);
+  // Secondary tone for a switch that is not the primary decision on the form
+  .mw-segmented-secondary .mw-segmented-item {
+    @include active() {
+      background: var(--mw-secondary-color);
+      border-color: var(--mw-secondary-text-color);
+      color: var(--mw-secondary-accent-text-color);
+    }
   }
-}
 
-// Sits inline next to a label instead of filling the row. Equal shares are the
-// point of the full-width control; here they would clip the longest label to
-// the width of the shortest, so the items follow their own content instead.
-.mw-segmented-auto {
-  width: auto;
+  // Sits inline next to a label instead of filling the row. Equal shares are the
+  // point of the full-width control; here they would clip the longest label to
+  // the width of the shortest, so the items follow their own content instead.
+  .mw-segmented-auto {
+    width: auto;
 
-  .mw-segmented-item {
-    flex: 0 1 auto;
+    .mw-segmented-item {
+      flex: 0 1 auto;
+    }
   }
 }