maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_alerts.scss

@@ -1,89 +1,90 @@
 @use '../abstracts' as *;
 
-.mw-alert {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  padding: spacing('4') spacing('5');
-  margin-bottom: spacing('4');
-  border-radius: radius('md');
+@layer mw.components {
+  .mw-alert {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding: spacing('4');
+    margin-bottom: spacing('4');
+    border-radius: radius('md');
 
-  background: var(--mw-card-background);
-  border: 1px solid var(--mw-border);
-  box-shadow: var(--mw-elevation-2);
+    background: var(--mw-card-background);
+    border: 1px solid var(--mw-border);
+    box-shadow: var(--mw-elevation-2);
 
-  &-icon {
-    flex-shrink: 0;
-    margin-right: spacing('4');
-    font-size: font-size('xl');
-    line-height: 1.2;
-    margin-top: spacing('1');
-  }
+    &-icon {
+      flex-shrink: 0;
+      margin-right: spacing('3');
+      font-size: font-size('xl');
+      line-height: 1.2;
+      margin-top: spacing('1');
+    }
 
-  &-content {
-    flex: 1;
-    color: var(--mw-text-color);
-  }
+    &-content {
+      flex: 1;
+      color: var(--mw-text-color);
+    }
 
-  &-title {
-    display: block;
-    font-weight: font-weight('bold');
-    margin-bottom: spacing('1');
-    line-height: 1.3;
-  }
+    &-title {
+      display: block;
+      font-weight: font-weight('bold');
+      margin-bottom: spacing('1');
+      line-height: 1.3;
+    }
 
-  // Text in body
-  p {
-    margin: 0;
-    line-height: 1.5;
-    font-size: font-size('sm');
-    opacity: 0.9;
+    // Text in body
+    p {
+      margin: 0;
+      line-height: 1.5;
+      font-size: font-size('sm');
+      opacity: 0.9;
 
-    & + p {
-      margin-top: spacing('2');
+      & + p {
+        margin-top: spacing('2');
+      }
     }
-  }
 
-  &-closed {
-    display: none !important;
-  }
+    // initAlerts() sets this, waits, then adds -closed. Without a rule here that
+    // wait is 300ms in which nothing happens and the alert then blinks out.
+    &-closing {
+      opacity: 0;
+      transform: translateY(-6px);
+      transition:
+        opacity var(--mw-duration-base) var(--mw-ease-out),
+        transform var(--mw-duration-base) var(--mw-ease-out);
+    }
 
-  @include media-down('sm') {
-    padding: spacing('4');
-    &-icon {
-      margin-right: spacing('3');
+    &-closed {
+      display: none;
     }
-  }
-}
 
-// Close button
-.mw-alert-close {
-  flex-shrink: 0;
-  margin-left: spacing('3');
-}
+    @include media-up('sm') {
+      padding: spacing('4') spacing('5');
+      &-icon {
+        margin-right: spacing('4');
+      }
+    }
+  }
 
-// Color mapping
-$_mw-alert-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),
-);
+  // Close button
+  .mw-alert-close {
+    flex-shrink: 0;
+    margin-left: spacing('3');
+  }
 
-// Color variants
-@each $name, $col in $_mw-alert-colors {
-  .mw-alert-#{$name} {
-    background-image: linear-gradient(
-      var(--mw-#{$name}-info-background),
-      var(--mw-#{$name}-info-background)
-    );
-    border: 1px solid color-mix(in srgb, #{$col} 20%, transparent);
-    border-left: 4px solid var(--mw-#{$name}-text-color);
+  @each $name, $col in $semantic-colors {
+    .mw-alert-#{$name} {
+      background-image: linear-gradient(
+        var(--mw-#{$name}-info-background),
+        var(--mw-#{$name}-info-background)
+      );
+      border: 1px solid color-mix(in srgb, #{$col} 20%, transparent);
+      border-left: 4px solid var(--mw-#{$name}-text-color);
 
-    .mw-alert-icon {
-      color: var(--mw-#{$name}-text-color);
+      .mw-alert-icon {
+        color: var(--mw-#{$name}-text-color);
+      }
     }
   }
 }

package/src/scss/components/_announcement.scss

@@ -1,84 +1,85 @@
 @use '../abstracts' as *;
 
-// The ribbon under the fixed header - a discount, a launch note, a maintenance
-// window. One per page, and always a single line of content with an optional
-// highlight pill in front of it.
-.mw-announcement {
-  position: fixed;
-  top: var(--mw-header-height);
-  right: 0;
-  left: 0;
-  z-index: z-index('header') - 10;
-  background: color-mix(in srgb, var(--mw-primary-color) 75%, transparent);
-  backdrop-filter: blur(7px);
-  color: var(--mw-primary-accent-text-color);
-  box-shadow: var(--mw-elevation-2);
-}
+@layer mw.components {
+  // The ribbon under the fixed header - a discount, a launch note, a maintenance
+  // window. One per page, and always a single line of content with an optional
+  // highlight pill in front of it.
+  .mw-announcement {
+    position: fixed;
+    top: var(--mw-header-height);
+    right: 0;
+    left: 0;
+    z-index: z-index('header') - 10;
+    background: color-mix(in srgb, var(--mw-primary-color) 75%, transparent);
+    backdrop-filter: blur(7px);
+    color: var(--mw-primary-accent-text-color);
+    box-shadow: var(--mw-elevation-2);
+  }
 
-// The one row inside - usually a link to the thing announced.
-.mw-announcement-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: spacing('4');
-  min-height: var(--mw-announcement-height);
-  padding: spacing('1') spacing('4');
-  font-size: font-size('sm');
-  text-align: center;
-  color: inherit;
-  text-decoration: none;
+  // The one row inside - usually a link to the thing announced.
+  .mw-announcement-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('4');
+    min-height: var(--mw-announcement-height);
+    padding: spacing('1') spacing('4');
+    font-size: font-size('sm');
+    text-align: center;
+    color: inherit;
+    text-decoration: none;
 
-  &:hover,
-  &:focus-visible {
-    background: color-mix(in srgb, #000 10%, transparent);
-  }
+    &:hover,
+    &:focus-visible {
+      background: color-mix(in srgb, #000 10%, transparent);
+    }
 
-  @include focus-ring-inset;
-  @include tappable;
-}
+    @include focus-ring-inset;
+    @include tappable;
+  }
 
-// The highlight pill - the "-20 %", the "NEW". Darkened glass rather than a
-// color of its own, so it works on every variant without a token per pair.
-.mw-announcement-highlight {
-  flex-shrink: 0;
-  padding: spacing('1') spacing('3');
-  border-radius: 999px;
-  background: color-mix(in srgb, #000 18%, transparent);
-  font-weight: font-weight('bold');
-}
+  // The highlight pill - the "-20 %", the "NEW". Darkened glass rather than a
+  // color of its own, so it works on every variant without a token per pair.
+  .mw-announcement-highlight {
+    flex-shrink: 0;
+    padding: spacing('1') spacing('3');
+    border-radius: 999px;
+    background: color-mix(in srgb, #000 18%, transparent);
+    font-weight: font-weight('bold');
+  }
 
-// The ribbon in the document flow instead of glued under the header - for a
-// notice inside a page, or a demo of the component itself. Static, it scrolls
-// with the content and shifts no anchor offset below.
-.mw-announcement-static {
-  position: static;
-}
+  // The ribbon in the document flow instead of glued under the header - for a
+  // notice inside a page, or a demo of the component itself. Static, it scrolls
+  // with the content and shifts no anchor offset below.
+  .mw-announcement-static {
+    position: static;
+  }
 
-// Anchors scrolled to under the fixed chrome would land under the ribbon too -
-// the same reason the reset reserves the header height. Scoped with :has, so a
-// page without a ribbon keeps the plain offset - and a static ribbon does not
-// count, it scrolls with the content.
-html:has(.mw-announcement:not(.mw-announcement-static)) {
-  scroll-padding-top: calc(
-    var(--mw-header-height) + var(--mw-announcement-height)
-  );
-}
+  // Anchors scrolled to under the fixed chrome would land under the ribbon too -
+  // the same reason the reset reserves the header height. Scoped with :has, so a
+  // page without a ribbon keeps the plain offset - and a static ribbon does not
+  // count, it scrolls with the content.
+  html:has(.mw-announcement:not(.mw-announcement-static)) {
+    scroll-padding-top: calc(
+      var(--mw-header-height) + var(--mw-announcement-height)
+    );
+  }
 
-// On a phone the line wraps and the ribbon grows - the height token follows,
-// so the scroll offset above stays honest. Here and not in base, so cherry-
-// picking the component brings the whole behaviour along.
-@include media-down('sm') {
-  :root {
-    --mw-announcement-height: 3.4rem;
+  // On a phone the line wraps and the ribbon grows - the height token follows,
+  // so the scroll offset above stays honest. Here and not in base, so cherry-
+  // picking the component brings the whole behaviour along.
+  @include media-down('sm') {
+    :root {
+      --mw-announcement-height: 3.4rem;
+    }
   }
-}
 
-// Color variants
-$_mw-announcement-colors: (secondary, success, warning, danger, info);
+  $_mw-announcement-colors: (secondary, success, warning, danger, info);
 
-@each $name in $_mw-announcement-colors {
-  .mw-announcement-#{$name} {
-    background: color-mix(in srgb, var(--mw-#{$name}-color) 75%, transparent);
-    color: var(--mw-#{$name}-accent-text-color);
+  @each $name in $_mw-announcement-colors {
+    .mw-announcement-#{$name} {
+      background: color-mix(in srgb, var(--mw-#{$name}-color) 75%, transparent);
+      color: var(--mw-#{$name}-accent-text-color);
+    }
   }
 }

package/src/scss/components/_avatars.scss

@@ -1,171 +1,159 @@
 @use '../abstracts' as *;
 
-$_mw-avatar-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-avatar {
-  display: inline-flex;
-  position: relative;
-  border-radius: radius('full');
-  overflow: hidden;
-  border: 3px solid var(--mw-border);
-  box-shadow: var(--mw-elevation-3);
-  margin: spacing('1');
-
-  // Standard (md)
-  width: 96px;
-  height: 96px;
-  flex-shrink: 0; // Prevents the avatar from shrinking
-  flex-grow: 0; // Prevents the avatar from growing
-  // Scales with the avatar size; only takes effect on the initials variant
-  font-size: font-size('3xl');
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
-  // Sizes
-  &-xs {
-    width: 32px;
-    height: 32px;
-    border-width: 2px;
-    // Small enough that wide pairs like "MW" still clear the circle
-    font-size: font-size('2xs');
-  }
-
-  &-sm {
-    width: 64px;
-    height: 64px;
-    border-width: 2px;
-    font-size: font-size('xl');
-  }
-
-  &-lg {
-    width: 144px;
-    height: 144px;
-    border-width: 5px;
-    font-size: font-size('5xl');
-  }
-
-  &-xl {
-    width: 210px;
-    height: 210px;
-    border-width: 6px;
-    font-size: font-size('6xl');
-  }
-
-  // Square
-  &-square {
-    border-radius: radius('sm');
-  }
-
-  // Initials - for users without a picture. Centers its text content and puts
-  // the color on the background, so it stays combinable with the color
-  // variants below, which keep working on the border.
-  &-initials {
-    align-items: center;
-    justify-content: center;
-    background: var(--mw-primary-color);
-    color: var(--mw-primary-accent-text-color);
-    font-weight: font-weight('bold');
-    line-height: 1;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-    user-select: none;
-  }
-
-  // Groups
-  &-group {
-    display: flex;
-    flex-wrap: wrap; // Allow items to wrap to next line
-    justify-content: flex-start;
-    margin: spacing('2');
-    row-gap: spacing('3');
-
-    .mw-avatar {
-      margin: spacing('0') -15px spacing('0') spacing('0');
-      border: 2px solid var(--mw-secondary-text-color);
-      transition: transform var(--mw-duration-base) var(--mw-ease-out);
-
-      @include hover {
-        transform: translateY(-3px);
-        z-index: z-index('lift');
-      }
-
-      &:last-child {
-        margin-right: spacing('0');
-      }
+@layer mw.components {
+  .mw-avatar {
+    display: inline-flex;
+    position: relative;
+    border-radius: radius('full');
+    overflow: hidden;
+    border: 3px solid var(--mw-border);
+    box-shadow: var(--mw-elevation-3);
+    margin: spacing('1');
+
+    width: 96px;
+    height: 96px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    // Scales with the avatar size; only takes effect on the initials variant
+    font-size: font-size('3xl');
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
     }
 
-    // Group sizes
-    &-sm .mw-avatar {
-      margin-right: -10px;
+    &-xs {
+      width: 32px;
+      height: 32px;
+      border-width: 2px;
+      // Small enough that wide pairs like "MW" still clear the circle
+      font-size: font-size('2xs');
     }
 
-    &-lg .mw-avatar {
-      margin-right: -20px;
+    &-sm {
+      width: 64px;
+      height: 64px;
+      border-width: 2px;
+      font-size: font-size('xl');
     }
 
-    .mw-avatar-xs {
-      margin-right: -5px;
-    }
-    .mw-avatar-sm {
-      margin-right: -10px;
+    &-lg {
+      width: 120px;
+      height: 120px;
+      border-width: 4px;
+      font-size: font-size('5xl');
     }
-    .mw-avatar-lg {
-      margin-right: -23px;
+
+    &-xl {
+      width: 150px;
+      height: 150px;
+      border-width: 5px;
+      font-size: font-size('6xl');
     }
-    .mw-avatar-xl {
-      margin-right: -32px;
+
+    &-square {
+      border-radius: radius('sm');
     }
 
-    .mw-avatar:last-child {
-      margin-right: spacing('0');
+    // Initials - for users without a picture. Centers its text content and puts
+    // the color on the background, so it stays combinable with the color
+    // variants below, which keep working on the border.
+    &-initials {
+      align-items: center;
+      justify-content: center;
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
+      font-weight: font-weight('bold');
+      line-height: 1;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+      user-select: none;
     }
 
-    @include media-down('sm') {
-      // For small screens, create a more compact layout
+    &-group {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      margin: spacing('2');
+      row-gap: spacing('3');
+
       .mw-avatar {
-        margin-right: -10px; // Reduce overlap on small screens
+        margin: spacing('0') -15px spacing('0') spacing('0');
+        border: 2px solid var(--mw-secondary-text-color);
+        transition: transform var(--mw-duration-base) var(--mw-ease-out);
+
+        @include hover {
+          transform: translateY(-3px);
+          z-index: z-index('lift');
+        }
+
+        &:last-child {
+          margin-right: spacing('0');
+        }
+      }
+
+      &-sm .mw-avatar {
+        margin-right: -10px;
+      }
+
+      &-lg .mw-avatar {
+        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: -32px;
       }
 
       .mw-avatar:last-child {
         margin-right: spacing('0');
       }
-    }
-  }
 
-  @include media-down('sm') {
-    &-lg {
-      width: 120px;
-      height: 120px;
-      border-width: 4px;
+      @include media-down('sm') {
+        // For small screens, create a more compact layout
+        .mw-avatar {
+          margin-right: -10px;
+        }
+
+        .mw-avatar:last-child {
+          margin-right: spacing('0');
+        }
+      }
     }
 
-    &-xl {
-      width: 150px;
-      height: 150px;
-      border-width: 5px;
+    @include media-up('sm') {
+      &-lg {
+        width: 144px;
+        height: 144px;
+        border-width: 5px;
+      }
+
+      &-xl {
+        width: 210px;
+        height: 210px;
+        border-width: 6px;
+      }
     }
   }
-}
 
-@each $name, $col in $_mw-avatar-colors {
-  .mw-avatar-#{$name} {
-    border-color: #{$col};
-  }
+  @each $name, $col in $semantic-colors {
+    .mw-avatar-#{$name} {
+      border-color: #{$col};
+    }
 
-  // On an initials avatar the same variant also tints the surface
-  .mw-avatar-initials.mw-avatar-#{$name} {
-    background: #{$col};
+    // On an initials avatar the same variant also tints the surface
+    .mw-avatar-initials.mw-avatar-#{$name} {
+      background: #{$col};
+    }
   }
 }