maverick-wave 4.27.0 → 5.0.0

package/src/scss/utilities/_display.scss

@@ -1,97 +1,103 @@
 @use '../abstracts' as *;
 
-// Display utilities
-.mw-d {
-  &-flex {
-    display: flex;
-  }
+@layer mw.utilities {
+  .mw-d {
+    &-flex {
+      display: flex;
+    }
 
-  &-inline-flex {
-    display: inline-flex;
-  }
+    &-inline-flex {
+      display: inline-flex;
+    }
 
-  &-block {
-    display: block;
-  }
+    &-block {
+      display: block;
+    }
 
-  &-inline {
-    display: inline;
-  }
+    &-inline {
+      display: inline;
+    }
 
-  &-inline-block {
-    display: inline-block;
-  }
+    &-inline-block {
+      display: inline-block;
+    }
 
-  &-grid {
-    display: grid;
-  }
+    &-grid {
+      display: grid;
+    }
 
-  &-none {
-    display: none;
-  }
+    &-none {
+      display: none;
+    }
 
-  // For a wrapper that must not become a flex/grid item itself - the element
-  // generates no box, so its children take over the item role
-  &-contents {
-    display: contents;
+    // For a wrapper that must not become a flex/grid item itself - the element
+    // generates no box, so its children take over the item role
+    &-contents {
+      display: contents;
+    }
   }
-}
 
-// Border radius
-@each $key, $value in $radius {
-  .mw-radius-#{$key} {
-    border-radius: $value;
+  @each $key, $value in $radius {
+    .mw-radius-#{$key} {
+      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};
+  $_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;
+  // 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;
+    }
   }
-}
 
-.mw-hide-desktop {
-  @include media-up('md') {
-    display: none !important;
+  .mw-hide-desktop {
+    @include media-up('md') {
+      display: none;
+    }
   }
-}
 
-// Overflow, for the wrappers that hold something wider than the phone they are
-// being read on
-.mw-overflow-auto {
-  overflow: auto;
-}
+  // 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-x-auto {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
 
-.mw-overflow-hidden {
-  overflow: hidden;
-}
+  .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;
+  // 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;
+    > * {
+      scroll-snap-align: start;
+    }
   }
 }

package/src/scss/utilities/_elevation.scss

@@ -1,16 +1,18 @@
 @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;
-}
+@layer mw.utilities {
+  // 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});
+  @for $level from 1 through 5 {
+    .mw-elevation-#{$level} {
+      box-shadow: var(--mw-elevation-#{$level});
+    }
   }
 }

package/src/scss/utilities/_flex.scss

@@ -1,114 +1,112 @@
 @use '../abstracts' as *;
 
-// Flex utilities
-.mw-flex {
-  &-row {
-    flex-direction: row;
-  }
+@layer mw.utilities {
+  .mw-flex {
+    &-row {
+      flex-direction: row;
+    }
 
-  &-column {
-    flex-direction: column;
-  }
+    &-column {
+      flex-direction: column;
+    }
 
-  &-wrap {
-    flex-wrap: wrap;
-  }
+    &-wrap {
+      flex-wrap: wrap;
+    }
 
-  &-nowrap {
-    flex-wrap: nowrap;
-  }
+    &-nowrap {
+      flex-wrap: nowrap;
+    }
 
-  &-1 {
-    flex: 1;
-  }
+    &-1 {
+      flex: 1;
+    }
 
-  &-grow-1 {
-    flex-grow: 1;
-  }
+    &-grow-1 {
+      flex-grow: 1;
+    }
 
-  &-shrink-0 {
-    flex-shrink: 0;
+    &-shrink-0 {
+      flex-shrink: 0;
+    }
   }
-}
 
-// Justify content
-.mw-justify {
-  &-start {
-    justify-content: flex-start;
-  }
+  .mw-justify {
+    &-start {
+      justify-content: flex-start;
+    }
 
-  &-end {
-    justify-content: flex-end;
-  }
+    &-end {
+      justify-content: flex-end;
+    }
 
-  &-center {
-    justify-content: center;
-  }
+    &-center {
+      justify-content: center;
+    }
 
-  &-between {
-    justify-content: space-between;
-  }
+    &-between {
+      justify-content: space-between;
+    }
 
-  &-around {
-    justify-content: space-around;
-  }
+    &-around {
+      justify-content: space-around;
+    }
 
-  &-evenly {
-    justify-content: space-evenly;
+    &-evenly {
+      justify-content: space-evenly;
+    }
   }
-}
 
-// Align items
-.mw-items {
-  &-start {
-    align-items: flex-start;
-  }
+  .mw-items {
+    &-start {
+      align-items: flex-start;
+    }
 
-  &-end {
-    align-items: flex-end;
-  }
+    &-end {
+      align-items: flex-end;
+    }
 
-  &-center {
-    align-items: center;
-  }
+    &-center {
+      align-items: center;
+    }
 
-  &-stretch {
-    align-items: stretch;
+    &-stretch {
+      align-items: stretch;
+    }
   }
-}
 
-// Align self - the per-item counterpart to .mw-items-*
-.mw-self {
-  &-start {
-    align-self: flex-start;
-  }
+  .mw-self {
+    &-start {
+      align-self: flex-start;
+    }
 
-  &-end {
-    align-self: flex-end;
-  }
+    &-end {
+      align-self: flex-end;
+    }
 
-  &-center {
-    align-self: center;
-  }
+    &-center {
+      align-self: center;
+    }
 
-  &-stretch {
-    align-self: stretch;
+    &-stretch {
+      align-self: stretch;
+    }
   }
-}
 
-// The most common row in any app: what it is on the left, the value or the
-// action on the right, and on a narrow screen the right half drops below.
-// The `flex-wrap` is the part everyone forgets.
-.mw-row-split {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: spacing('2') spacing('5');
-}
+  // The most common row in any app: what it is on the left, the value or the
+  // action on the right, and on a narrow screen the right half drops below.
+  // The `flex-wrap` is the part everyone forgets.
+  .mw-row-split {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: spacing('2') spacing('5');
+  }
 
-// Same row for content of unequal height - an icon beside text, a button
-// beside a heading. Baseline alignment would hang those off the text.
-.mw-row-split-center {
-  align-items: center;
+  // Same row for content of unequal height - an icon beside text, a button
+  // beside a heading. Baseline alignment would hang those off the text.
+  .mw-row-split-center {
+    align-items: center;
+  }
 }

package/src/scss/utilities/_reveal.scss

@@ -1,73 +1,50 @@
 @use '../abstracts' as *;
 
-// Scroll entrance: a block rises briefly as it scrolls into view. Driven by
-// the browser's scroll timeline - no JavaScript, no IntersectionObserver
-// recalculating on every scroll step.
-//
-// Both guards matter. `prefers-reduced-motion` is the obvious one. The
-// @supports guard is the safety net: a browser without scroll timelines would
-// otherwise apply the backwards fill on an animation that never runs and
-// leave the block invisible forever - guarded, it simply renders in place.
-//
-// The zone it plays in is the `reveal-range` mixin in abstracts/_mixins.scss:
-// from 8dvh above the bottom edge to 34dvh, measured in viewport lengths so
-// every block rises through the same region of the screen. Eased out rather
-// than linear against the scroll: the block covers most of its way at once
-// and settles, which reads as arriving instead of being dragged.
-//
-// `backwards`, not `both`: the fill only has to hide the block before its
-// entrance - the last frame is the block's own resting state anyway. A
-// forwards fill would keep that frame applied for good, and an animated
-// `transform` beats every author rule: a card would lose its hover lift, and
-// as a transformed box it stays a stacking context, so a dropdown opened
-// inside it paints under the next card in the row. Without the forwards fill
-// the animation lets go once the entrance is done.
-//
-// Longhands on purpose, never the animation shorthand: esbuild's CSS minifier
-// (Vite's default, so every SCSS consumer) collapses a shorthand plus
-// animation-timeline into one `animation:` declaration - which cannot carry a
-// timeline, so browsers drop the whole thing and the reveal silently dies.
-// Three longhands next to the timeline give it nothing to merge.
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    .mw-reveal,
-    .mw-reveal-stagger > * {
-      animation-name: mw-reveal;
-      animation-timing-function: var(--mw-ease-out);
-      animation-fill-mode: backwards;
-      animation-timeline: view();
-      @include reveal-range(1);
-    }
+@layer mw.utilities {
+  // Scroll entrance on the browser's own timeline - no observer. The zone is the
+  // `reveal-range` mixin. Without scroll timelines the backwards fill would hide
+  // the block forever, which is what the @supports guard is for.
+  //
+  // `backwards`, not `both`: a forwards fill keeps the transform applied, and that
+  // beats every author rule - the card loses its hover lift and stays a stacking
+  // context. Longhands and never the shorthand, which esbuild collapses into one
+  // `animation:` that cannot carry a timeline.
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .mw-reveal,
+      .mw-reveal-stagger > * {
+        animation-name: mw-reveal;
+        animation-timing-function: var(--mw-ease-out);
+        animation-fill-mode: backwards;
+        animation-timeline: view();
+        @include reveal-range(1);
+      }
 
-    // A row of cards crosses the viewport edge on the same scroll step, so
-    // mw-reveal on each of them rises as one slab. The stagger container
-    // shifts the range of the second and third child of every three - a wave
-    // across the row instead of a lift. One class on the grid, because the
-    // grid decides the columns per breakpoint and the markup cannot.
-    //
-    // Cycles of three are only the fallback for a container that is not one of
-    // the fixed grids - mw-columns-*, a project's own layout. mw-grid-2 to -5
-    // and their -lg variants restate the cycle to their own column count at
-    // every breakpoint (layout/_grid.scss), so the fourth card of a four-column
-    // row is a beat behind the third, not level with the first.
-    .mw-reveal-stagger > :nth-child(3n + 2) {
-      @include reveal-range(2);
-    }
+      // A row crosses the viewport edge on one scroll step, so mw-reveal on each
+      // card rises as one slab. This shifts every second and third child instead -
+      // a wave. On the grid and not the cards, because the grid knows the columns.
+      //
+      // Cycles of three are the fallback for anything that is not one of the fixed
+      // grids; mw-grid-2 to -5 restate the cycle to their own count in _grid.scss.
+      .mw-reveal-stagger > :nth-child(3n + 2) {
+        @include reveal-range(2);
+      }
 
-    .mw-reveal-stagger > :nth-child(3n + 3) {
-      @include reveal-range(3);
+      .mw-reveal-stagger > :nth-child(3n + 3) {
+        @include reveal-range(3);
+      }
     }
   }
-}
 
-@keyframes mw-reveal {
-  from {
-    opacity: 0;
-    transform: translateY(40px);
-  }
+  @keyframes mw-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }

package/src/scss/utilities/_spacing.scss

@@ -1,86 +1,85 @@
 @use 'sass:map';
 @use '../abstracts' as *;
 
-$_margin-values: map.merge(
-  $spacing,
-  (
-    'auto': auto,
-  )
-);
-
-// Margin utilities
-@each $key, $value in $_margin-values {
-  .mw-m-#{$key} {
-    margin: $value;
-  }
-
-  .mw-mt-#{$key} {
-    margin-top: $value;
-  }
-
-  .mw-mb-#{$key} {
-    margin-bottom: $value;
-  }
-
-  .mw-ml-#{$key} {
-    margin-left: $value;
-  }
-
-  .mw-mr-#{$key} {
-    margin-right: $value;
-  }
-
-  .mw-mx-#{$key} {
-    margin-left: $value;
-    margin-right: $value;
-  }
-
-  .mw-my-#{$key} {
-    margin-top: $value;
-    margin-bottom: $value;
-  }
-}
+@layer mw.utilities {
+  $_margin-values: map.merge(
+    $spacing,
+    (
+      'auto': auto,
+    )
+  );
+
+  @each $key, $value in $_margin-values {
+    .mw-m-#{$key} {
+      margin: $value;
+    }
 
-// Padding utilities
-@each $key, $value in $spacing {
-  @if $value >= 0 {
-    .mw-p-#{$key} {
-      padding: $value;
+    .mw-mt-#{$key} {
+      margin-top: $value;
     }
 
-    .mw-pt-#{$key} {
-      padding-top: $value;
+    .mw-mb-#{$key} {
+      margin-bottom: $value;
     }
 
-    .mw-pb-#{$key} {
-      padding-bottom: $value;
+    .mw-ml-#{$key} {
+      margin-left: $value;
     }
 
-    .mw-pl-#{$key} {
-      padding-left: $value;
+    .mw-mr-#{$key} {
+      margin-right: $value;
     }
 
-    .mw-pr-#{$key} {
-      padding-right: $value;
+    .mw-mx-#{$key} {
+      margin-left: $value;
+      margin-right: $value;
     }
 
-    .mw-px-#{$key} {
-      padding-left: $value;
-      padding-right: $value;
+    .mw-my-#{$key} {
+      margin-top: $value;
+      margin-bottom: $value;
     }
+  }
 
-    .mw-py-#{$key} {
-      padding-top: $value;
-      padding-bottom: $value;
+  @each $key, $value in $spacing {
+    @if $value >= 0 {
+      .mw-p-#{$key} {
+        padding: $value;
+      }
+
+      .mw-pt-#{$key} {
+        padding-top: $value;
+      }
+
+      .mw-pb-#{$key} {
+        padding-bottom: $value;
+      }
+
+      .mw-pl-#{$key} {
+        padding-left: $value;
+      }
+
+      .mw-pr-#{$key} {
+        padding-right: $value;
+      }
+
+      .mw-px-#{$key} {
+        padding-left: $value;
+        padding-right: $value;
+      }
+
+      .mw-py-#{$key} {
+        padding-top: $value;
+        padding-bottom: $value;
+      }
     }
   }
-}
 
-// Gap utilities
-@each $key, $value in $spacing {
-  @if $value >= 0 {
-    .mw-gap-#{$key} {
-      gap: $value;
+  @each $key, $value in $spacing {
+    @if $value >= 0 {
+      .mw-gap-#{$key} {
+        gap: $value;
+      }
     }
   }
 }