maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_toasts.scss

@@ -1,92 +1,86 @@
 @use '../abstracts' as *;
 
-// Fixed, stacked container for `mw-alert`
-.mw-toast-stack {
-  position: fixed;
-  z-index: z-index('alert');
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
-  width: min(380px, calc(100vw - #{2 * spacing('5')}));
-  max-height: calc(100vh - #{2 * spacing('5')});
-  overflow-y: auto;
-  pointer-events: none;
+@layer mw.components {
+  // Fixed, stacked container for `mw-alert`
+  .mw-toast-stack {
+    position: fixed;
+    z-index: z-index('alert');
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
+    width: min(380px, calc(100vw - #{2 * spacing('5')}));
+    max-height: calc(100vh - #{2 * spacing('5')});
+    overflow-y: auto;
+    pointer-events: none;
 
-  > * {
-    pointer-events: auto;
-    margin-bottom: spacing('0');
-    animation: mw-toast-in var(--mw-duration-base) var(--mw-ease-spring);
-  }
-
-  // Default position
-  top: spacing('5');
-  right: spacing('5');
-
-  // Positions
-  &-top-right {
-    top: spacing('5');
-    right: spacing('5');
-    bottom: auto;
-    left: auto;
-  }
+    > * {
+      pointer-events: auto;
+      margin-bottom: spacing('0');
+      animation: mw-toast-in var(--mw-duration-base) var(--mw-ease-spring);
+    }
 
-  &-top-center {
     top: spacing('5');
-    left: 50%;
-    right: auto;
-    bottom: auto;
-    transform: translateX(-50%);
-  }
-
-  &-bottom-right {
-    bottom: spacing('5');
     right: spacing('5');
-    top: auto;
-    left: auto;
-    flex-direction: column-reverse;
 
-    > * {
-      animation-name: mw-toast-in-up;
+    &-top-right {
+      top: spacing('5');
+      right: spacing('5');
+      bottom: auto;
+      left: auto;
     }
-  }
 
-  // On phones the stack spans the full width at the top
-  @include media-down('sm') {
-    left: spacing('5');
-    right: spacing('5');
-    width: auto;
-    transform: none;
+    &-top-center {
+      top: spacing('5');
+      left: 50%;
+      right: auto;
+      bottom: auto;
+      transform: translateX(-50%);
+    }
 
     &-bottom-right {
+      bottom: spacing('5');
+      right: spacing('5');
       top: auto;
+      left: auto;
+      flex-direction: column-reverse;
+
+      > * {
+        animation-name: mw-toast-in-up;
+      }
     }
-  }
-}
 
-@keyframes mw-toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+    // On phones the stack spans the full width at the top
+    @include media-down('sm') {
+      left: spacing('5');
+      right: spacing('5');
+      width: auto;
+      transform: none;
 
-@keyframes mw-toast-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
+      &-bottom-right {
+        top: auto;
+      }
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  @keyframes mw-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .mw-toast-stack > * {
-    animation: none;
+  @keyframes mw-toast-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }

package/src/scss/form-elements/_checkbox.scss

@@ -1,160 +1,145 @@
-// _checkbox.scss
 @use '../abstracts' as *;
 
-$_size-sm: spacing('5');
-$_size-default: spacing('6');
-$_size-lg: spacing('7');
-
-// Checkmark dimensions (not from spacing map - these are shape-drawing values)
-$_check-sm-w: 9px;
-$_check-sm-h: 6px;
-$_check-default-w: 14px;
-$_check-default-h: 8px;
-$_check-lg-w: 19px;
-$_check-lg-h: 10px;
-
-// 1) color map for checked state border & checkmark
-$_mw-checkbox-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-checkbox-group {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
-
-  &-inline {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: spacing('2') spacing('6');
-    @include media-down('sm') {
+@layer mw.forms {
+  $_size-sm: spacing('5');
+  $_size-default: spacing('6');
+  $_size-lg: spacing('7');
+
+  // Checkmark dimensions (not from spacing map - these are shape-drawing values)
+  $_check-sm-w: 9px;
+  $_check-sm-h: 6px;
+  $_check-default-w: 14px;
+  $_check-default-h: 8px;
+  $_check-lg-w: 19px;
+  $_check-lg-h: 10px;
+
+  .mw-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
+
+    &-inline {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
       gap: spacing('2') spacing('4');
+      @include media-up('sm') {
+        gap: spacing('2') spacing('6');
+      }
     }
   }
-}
 
-.mw-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: spacing('2');
-  min-height: 1.5rem;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-
-  // hide native checkbox
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    margin: spacing('0');
-  }
-
-  .mw-checkbox-box {
+  .mw-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: spacing('2');
+    min-height: 1.5rem;
+    cursor: pointer;
+    user-select: none;
     position: relative;
-    flex-shrink: 0;
-    width: $_size-default;
-    height: $_size-default;
-    border: 2px solid var(--mw-border);
-    border-radius: radius('sm');
-    background: var(--mw-form-elements-background);
-    transition: var(--mw-transition);
 
-    &::after {
-      content: '';
+    input[type='checkbox'] {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $_check-default-w;
-      height: $_check-default-h;
-      border-left: 2px solid var(--mw-primary-color);
-      border-bottom: 2px solid var(--mw-primary-color);
-      transform: translate(-50%, -60%) rotate(-45deg) scale(0);
-      transform-origin: center;
-      transition: var(--mw-transition);
+      opacity: 0;
+      width: 0;
+      height: 0;
+      margin: spacing('0');
     }
-  }
-
-  // focus-visible state
-  input[type='checkbox']:focus-visible + .mw-checkbox-box {
-    @include focus-halo;
-    border-color: var(--mw-primary-color);
-  }
-
-  // checked state
-  input[type='checkbox']:checked + .mw-checkbox-box {
-    border-color: var(--mw-primary-color);
-  }
-  input[type='checkbox']:checked + .mw-checkbox-box::after {
-    transform: translate(-50%, -60%) rotate(-45deg) scale(1);
-  }
 
-  .mw-checkbox-label {
-    font-size: font-size('base');
-    color: var(--mw-text-color);
-  }
-
-  // size variants
-  &-sm {
     .mw-checkbox-box {
-      width: $_size-sm;
-      height: $_size-sm;
-    }
-    .mw-checkbox-box::after {
-      width: $_check-sm-w;
-      height: $_check-sm-h;
-      border-width: 1.5px;
+      position: relative;
+      flex-shrink: 0;
+      width: $_size-default;
+      height: $_size-default;
+      border: 2px solid var(--mw-border);
+      border-radius: radius('sm');
+      background: var(--mw-form-elements-background);
+      transition: var(--mw-transition);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: $_check-default-w;
+        height: $_check-default-h;
+        border-left: 2px solid var(--mw-primary-color);
+        border-bottom: 2px solid var(--mw-primary-color);
+        transform: translate(-50%, -60%) rotate(-45deg) scale(0);
+        transform-origin: center;
+        transition: var(--mw-transition);
+      }
     }
-    .mw-checkbox-label {
-      font-size: font-size('xs');
+
+    input[type='checkbox']:focus-visible + .mw-checkbox-box {
+      @include focus-halo;
+      border-color: var(--mw-primary-color);
     }
-  }
-  &-lg {
-    .mw-checkbox-box {
-      width: $_size-lg;
-      height: $_size-lg;
+
+    input[type='checkbox']:checked + .mw-checkbox-box {
+      border-color: var(--mw-primary-color);
     }
-    .mw-checkbox-box::after {
-      width: $_check-lg-w;
-      height: $_check-lg-h;
-      border-width: 2px;
+    input[type='checkbox']:checked + .mw-checkbox-box::after {
+      transform: translate(-50%, -60%) rotate(-45deg) scale(1);
     }
+
     .mw-checkbox-label {
-      font-size: font-size('md');
+      font-size: font-size('base');
+      color: var(--mw-text-color);
     }
-  }
 
-  // color variants
-  @each $name, $col in $_mw-checkbox-colors {
-    &-#{$name} {
-      input[type='checkbox']:checked + .mw-checkbox-box {
-        border-color: #{$col};
+    &-sm {
+      .mw-checkbox-box {
+        width: $_size-sm;
+        height: $_size-sm;
+      }
+      .mw-checkbox-box::after {
+        width: $_check-sm-w;
+        height: $_check-sm-h;
+        border-width: 1.5px;
       }
-      input[type='checkbox']:checked + .mw-checkbox-box::after {
-        border-color: #{$col};
+      .mw-checkbox-label {
+        font-size: font-size('xs');
+      }
+    }
+    &-lg {
+      .mw-checkbox-box {
+        width: $_size-lg;
+        height: $_size-lg;
+      }
+      .mw-checkbox-box::after {
+        width: $_check-lg-w;
+        height: $_check-lg-h;
+        border-width: 2px;
+      }
+      .mw-checkbox-label {
+        font-size: font-size('md');
       }
     }
-  }
 
-  // disabled state
-  &-disabled {
-    cursor: not-allowed;
+    @each $name, $col in $semantic-colors {
+      &-#{$name} {
+        input[type='checkbox']:checked + .mw-checkbox-box {
+          border-color: #{$col};
+        }
+        input[type='checkbox']:checked + .mw-checkbox-box::after {
+          border-color: #{$col};
+        }
+      }
+    }
 
-    input[type='checkbox'] {
+    &-disabled {
       cursor: not-allowed;
-    }
-    .mw-checkbox-box {
-      background: var(--mw-gray-background);
-    }
-    .mw-checkbox-label {
-      color: var(--mw-text-muted-color);
+
+      input[type='checkbox'] {
+        cursor: not-allowed;
+      }
+      .mw-checkbox-box {
+        background: var(--mw-gray-background);
+      }
+      .mw-checkbox-label {
+        color: var(--mw-text-muted-color);
+      }
     }
   }
 }