maverick-wave 4.27.0 → 5.0.0

package/src/scss/components/_skeleton.scss

@@ -1,90 +1,84 @@
 @use '../abstracts' as *;
 
-@keyframes mw-skeleton-shimmer {
-  0% {
-    background-position: -200% 0;
+@layer mw.components {
+  @keyframes mw-skeleton-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
   }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-// Base skeleton element
-.mw-skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--mw-card-background) 25%,
-    var(--mw-gray-background) 50%,
-    var(--mw-card-background) 75%
-  );
-  background-size: 200% 100%;
-  animation: mw-skeleton-shimmer 1.5s infinite linear;
-  border-radius: radius('sm');
-  display: block;
-}
-
-// Text line
-.mw-skeleton-text {
-  height: 1rem;
-  width: 100%;
-  margin-bottom: spacing('2');
 
-  &:last-child {
-    width: 65%;
+  .mw-skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--mw-card-background) 25%,
+      var(--mw-gray-background) 50%,
+      var(--mw-card-background) 75%
+    );
+    background-size: 200% 100%;
+    animation: mw-skeleton-shimmer 1.5s infinite linear;
+    border-radius: radius('sm');
+    display: block;
   }
-}
 
-// Heading
-.mw-skeleton-title {
-  height: 1.4rem;
-  width: 45%;
-  margin-bottom: spacing('3');
-}
+  .mw-skeleton-text {
+    height: 1rem;
+    width: 100%;
+    margin-bottom: spacing('2');
 
-// Circle (avatar placeholder)
-.mw-skeleton-circle {
-  border-radius: radius('full');
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
+    &:last-child {
+      width: 65%;
+    }
+  }
 
-// Rectangle (image/banner placeholder)
-.mw-skeleton-rect {
-  width: 100%;
-  height: 180px;
-}
+  .mw-skeleton-title {
+    height: 1.4rem;
+    width: 45%;
+    margin-bottom: spacing('3');
+  }
 
-// Size variants for rect
-.mw-skeleton-rect-sm {
-  height: 100px;
-}
+  .mw-skeleton-circle {
+    border-radius: radius('full');
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
 
-.mw-skeleton-rect-lg {
-  height: 260px;
-}
+  .mw-skeleton-rect {
+    width: 100%;
+    height: 180px;
+  }
 
-// Card wrapper with built-in padding and border
-.mw-skeleton-card {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
-  padding: spacing('4');
-  background: var(--mw-card-background);
-  border: 1px solid var(--mw-border);
-  border-radius: radius('md');
-}
+  .mw-skeleton-rect-sm {
+    height: 100px;
+  }
 
-// Row layout helper (avatar + text lines side by side)
-.mw-skeleton-row {
-  display: flex;
-  align-items: flex-start;
-  gap: spacing('3');
+  .mw-skeleton-rect-lg {
+    height: 260px;
+  }
 
-  .mw-skeleton-body {
-    flex: 1;
+  .mw-skeleton-card {
     display: flex;
     flex-direction: column;
     gap: spacing('3');
+    padding: spacing('4');
+    background: var(--mw-card-background);
+    border: 1px solid var(--mw-border);
+    border-radius: radius('md');
+  }
+
+  .mw-skeleton-row {
+    display: flex;
+    align-items: flex-start;
+    gap: spacing('3');
+
+    .mw-skeleton-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: spacing('3');
+    }
   }
 }

package/src/scss/components/_spinners.scss

@@ -1,208 +1,204 @@
 @use '../abstracts' as *;
 
-$_size-default: 4.5rem;
-$_size-sm: 2.5rem;
-$_size-lg: 7.5rem;
-
-.mw-spinner {
-  display: inline-block;
-  position: relative;
-
-  // Default spinner (circle border)
-  &-border {
-    width: $_size-default;
-    height: $_size-default;
-    border: 0.5rem solid var(--mw-border);
-    border-radius: radius('full');
-    border-top-color: var(--mw-primary-text-color);
-    animation: mw-spin 1.2s linear infinite;
-
-    // Size variants
-    &.mw-spinner-sm {
-      width: $_size-sm;
-      height: $_size-sm;
-      border-width: 0.3rem;
-      animation: mw-spin 1.4s linear infinite;
-    }
+@layer mw.components {
+  $_size-default: 4.5rem;
+  $_size-sm: 2.5rem;
+  $_size-lg: 7.5rem;
 
-    &.mw-spinner-lg {
-      width: $_size-lg;
-      height: $_size-lg;
-      border-width: 0.7rem;
-      animation: mw-spin 1s linear infinite;
-    }
+  .mw-spinner {
+    display: inline-block;
+    position: relative;
 
-    // Color variants
-    &.mw-spinner-primary {
+    // Default spinner (circle border)
+    &-border {
+      width: $_size-default;
+      height: $_size-default;
+      border: 0.5rem solid var(--mw-border);
+      border-radius: radius('full');
       border-top-color: var(--mw-primary-text-color);
-    }
-
-    &.mw-spinner-secondary {
-      border-top-color: var(--mw-secondary-text-color);
-    }
-  }
+      animation: mw-spin 1.2s linear infinite;
 
-  // Dots spinner
-  &-dots {
-    width: $_size-default;
-    height: 1rem;
-    text-align: center;
+      &.mw-spinner-sm {
+        width: $_size-sm;
+        height: $_size-sm;
+        border-width: 0.3rem;
+        animation: mw-spin 1.4s linear infinite;
+      }
 
-    > div {
-      width: 1rem;
-      height: 1rem;
-      background: var(--mw-primary-color);
-      border-radius: radius('full');
-      display: inline-block;
-      margin: spacing('0') spacing('2');
-      animation: mw-bounce 1.4s infinite ease-in-out both;
+      &.mw-spinner-lg {
+        width: $_size-lg;
+        height: $_size-lg;
+        border-width: 0.7rem;
+        animation: mw-spin 1s linear infinite;
+      }
 
-      &:nth-child(1) {
-        animation-delay: -0.32s;
+      &.mw-spinner-primary {
+        border-top-color: var(--mw-primary-text-color);
       }
 
-      &:nth-child(2) {
-        animation-delay: -0.16s;
+      &.mw-spinner-secondary {
+        border-top-color: var(--mw-secondary-text-color);
       }
     }
 
-    // Size variants
-    &.mw-spinner-sm {
-      width: $_size-sm;
-      height: 0.75rem;
+    // Dots spinner
+    &-dots {
+      width: $_size-default;
+      height: 1rem;
+      text-align: center;
 
       > div {
-        width: 0.75rem;
-        height: 0.75rem;
-        margin: spacing('0') spacing('1');
+        width: 1rem;
+        height: 1rem;
+        background: var(--mw-primary-color);
+        border-radius: radius('full');
+        display: inline-block;
+        margin: spacing('0') spacing('2');
+        animation: mw-bounce 1.4s infinite ease-in-out both;
+
+        &:nth-child(1) {
+          animation-delay: -0.32s;
+        }
+
+        &:nth-child(2) {
+          animation-delay: -0.16s;
+        }
       }
-    }
 
-    &.mw-spinner-lg {
-      width: $_size-lg;
-      height: 1.5rem;
+      &.mw-spinner-sm {
+        width: $_size-sm;
+        height: 0.75rem;
+
+        > div {
+          width: 0.75rem;
+          height: 0.75rem;
+          margin: spacing('0') spacing('1');
+        }
+      }
 
-      > div {
-        width: 1.5rem;
+      &.mw-spinner-lg {
+        width: $_size-lg;
         height: 1.5rem;
-        margin: spacing('0') spacing('3');
+
+        > div {
+          width: 1.5rem;
+          height: 1.5rem;
+          margin: spacing('0') spacing('3');
+        }
       }
-    }
 
-    // Color variants
-    &.mw-spinner-primary > div {
-      background: var(--mw-primary-color);
-    }
+      &.mw-spinner-primary > div {
+        background: var(--mw-primary-color);
+      }
 
-    &.mw-spinner-secondary > div {
-      background: var(--mw-secondary-color);
+      &.mw-spinner-secondary > div {
+        background: var(--mw-secondary-color);
+      }
     }
-  }
-
-  // Dual ring spinner
-  &-dual-ring {
-    width: $_size-default;
-    height: $_size-default;
 
-    &:after {
-      content: ' ';
-      display: block;
+    // Dual ring spinner
+    &-dual-ring {
       width: $_size-default;
       height: $_size-default;
-      border-radius: radius('full');
-      border: 0.5rem solid var(--mw-primary-text-color);
-      border-color: var(--mw-primary-text-color) transparent
-        var(--mw-primary-text-color) transparent;
-      animation: mw-spin 1.5s linear infinite;
-    }
-
-    // Size variants
-    &.mw-spinner-sm {
-      width: $_size-sm;
-      height: $_size-sm;
 
       &:after {
+        content: ' ';
+        display: block;
+        width: $_size-default;
+        height: $_size-default;
+        border-radius: radius('full');
+        border: 0.5rem solid var(--mw-primary-text-color);
+        border-color: var(--mw-primary-text-color) transparent
+          var(--mw-primary-text-color) transparent;
+        animation: mw-spin 1.5s linear infinite;
+      }
+
+      &.mw-spinner-sm {
         width: $_size-sm;
         height: $_size-sm;
-        border-width: 0.3rem;
-      }
-    }
 
-    &.mw-spinner-lg {
-      width: $_size-lg;
-      height: $_size-lg;
+        &:after {
+          width: $_size-sm;
+          height: $_size-sm;
+          border-width: 0.3rem;
+        }
+      }
 
-      &:after {
+      &.mw-spinner-lg {
         width: $_size-lg;
         height: $_size-lg;
-        border-width: 0.7rem;
+
+        &:after {
+          width: $_size-lg;
+          height: $_size-lg;
+          border-width: 0.7rem;
+        }
       }
-    }
 
-    // Color variants
-    &.mw-spinner-primary:after {
-      border-color: var(--mw-primary-text-color) transparent
-        var(--mw-primary-text-color) transparent;
-    }
+      &.mw-spinner-primary:after {
+        border-color: var(--mw-primary-text-color) transparent
+          var(--mw-primary-text-color) transparent;
+      }
 
-    &.mw-spinner-secondary:after {
-      border-color: var(--mw-secondary-text-color) transparent
-        var(--mw-secondary-text-color) transparent;
+      &.mw-spinner-secondary:after {
+        border-color: var(--mw-secondary-text-color) transparent
+          var(--mw-secondary-text-color) transparent;
+      }
     }
   }
-}
 
-// Spinner container for centering
-.mw-spinner-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%; // a little further up than the center
-
-  &-overlay {
-    @extend .mw-spinner-container;
-    position: absolute;
-    top: spacing('0');
-    left: spacing('0');
-    right: spacing('0');
-    bottom: spacing('0');
-    background: var(--mw-overlay-background);
-    backdrop-filter: blur(2px);
+  // Spinner container for centering
+  .mw-spinner-container {
     display: flex;
-    height: 100%;
-    z-index: z-index('spinner');
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 80%; // a little further up than the center
+
+    &-overlay {
+      @extend .mw-spinner-container;
+      position: absolute;
+      top: spacing('0');
+      left: spacing('0');
+      right: spacing('0');
+      bottom: spacing('0');
+      background: var(--mw-overlay-background);
+      backdrop-filter: blur(2px);
+      display: flex;
+      height: 100%;
+      z-index: z-index('spinner');
+    }
   }
-}
 
-// Animations
-@keyframes mw-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
+  // Animations
+  @keyframes mw-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
-}
 
-@keyframes mw-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
+  @keyframes mw-bounce {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
   }
-}
 
-@keyframes mw-pulse {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
+  @keyframes mw-pulse {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
   }
 }