maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_content-slider.scss

@@ -1,118 +1,119 @@
 @use '../abstracts' as *;
 
-.mw-image-slider {
-  position: relative;
-  width: 100%;
-  max-width: 600px;
-  margin: spacing('1') auto;
-  border-radius: radius('md');
-  overflow: hidden;
-
-  // Heights variables for consistency
-  $height-lg: 370px;
-  $height-md: 320px;
-  $height-sm: 250px;
-
-  &-base {
+@layer mw.components {
+  .mw-image-slider {
     position: relative;
     width: 100%;
-    height: $height-lg;
-
-    @include media-down('md') {
-      height: $height-md;
-    }
-
-    @include media-down('sm') {
+    max-width: 600px;
+    margin: spacing('1') auto;
+    border-radius: radius('md');
+    overflow: hidden;
+
+    // Heights variables for consistency
+    $height-lg: 370px;
+    $height-md: 320px;
+    $height-sm: 250px;
+
+    &-base {
+      position: relative;
+      width: 100%;
       height: $height-sm;
-    }
-  }
-
-  &-base-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
-  &-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: $height-lg;
-    pointer-events: none;
 
-    @include media-down('md') {
-      height: $height-md;
-    }
+      @include media-up('sm') {
+        height: $height-md;
+      }
 
-    @include media-down('sm') {
-      height: $height-sm;
+      @include media-up('md') {
+        height: $height-lg;
+      }
     }
-  }
-
-  &-overlay-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform: translateX(100%);
-    transition: transform var(--mw-duration-slower) var(--mw-ease-in-out);
-    z-index: z-index('card');
-    pointer-events: auto;
 
-    img {
+    &-base-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
     }
 
-    &.mw-active,
-    &.active {
-      transform: translateX(0);
-    }
-  }
+    &-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: $height-sm;
+      pointer-events: none;
 
-  // Fixed: Direct selectors for grid classes
-  &-controls-grid-3 {
-    position: relative;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: spacing('3');
-    padding: spacing('3');
-    background: var(--mw-card-background);
-    z-index: z-index('menu');
-    width: 100%;
+      @include media-up('sm') {
+        height: $height-md;
+      }
 
-    @include media-down('md') {
-      gap: spacing('2');
-      padding: spacing('2');
+      @include media-up('md') {
+        height: $height-lg;
+      }
     }
 
-    @include media-down('sm') {
-      grid-template-columns: repeat(2, 1fr);
+    &-overlay-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transform: translateX(100%);
+      transition: transform var(--mw-duration-slower) var(--mw-ease-in-out);
+      z-index: z-index('card');
+      pointer-events: auto;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      @include active() {
+        transform: translateX(0);
+      }
     }
-  }
-
-  &-controls-grid-2 {
-    position: relative;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: spacing('3');
-    padding: spacing('3');
-    background: var(--mw-card-background);
-    z-index: z-index('menu');
-    width: 100%;
 
-    @include media-down('md') {
+    // Fixed: Direct selectors for grid classes
+    &-controls-grid-3 {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
       gap: spacing('2');
       padding: spacing('2');
+      background: var(--mw-card-background);
+      z-index: z-index('menu');
+      width: 100%;
+
+      @include media-up('sm') {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @include media-up('md') {
+        gap: spacing('3');
+        padding: spacing('3');
+      }
     }
 
-    @include media-down('sm') {
+    &-controls-grid-2 {
+      position: relative;
+      display: grid;
       grid-template-columns: 1fr;
+      gap: spacing('2');
+      padding: spacing('2');
+      background: var(--mw-card-background);
+      z-index: z-index('menu');
+      width: 100%;
+
+      @include media-up('sm') {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @include media-up('md') {
+        gap: spacing('3');
+        padding: spacing('3');
+      }
     }
   }
 }

package/src/scss/components/_divider.scss

@@ -1,73 +1,75 @@
 @use '../abstracts' as *;
 
-// Base horizontal divider
-.mw-divider {
-  display: block;
-  width: 100%;
-  border: none;
-  border-top: 1px solid var(--mw-border);
-  margin: spacing('4') spacing('0');
+@layer mw.components {
+  // Base horizontal divider
+  .mw-divider {
+    display: block;
+    width: 100%;
+    border: none;
+    border-top: 1px solid var(--mw-border);
+    margin: spacing('4') spacing('0');
 
-  &-thick {
-    border-top-width: 4px;
-  }
+    &-thick {
+      border-top-width: 4px;
+    }
 
-  &-dashed {
-    border-top-style: dashed;
-  }
+    &-dashed {
+      border-top-style: dashed;
+    }
 
-  &-primary {
-    border-top-color: var(--mw-primary-text-color);
-  }
+    &-primary {
+      border-top-color: var(--mw-primary-text-color);
+    }
 
-  &-secondary {
-    border-top-color: var(--mw-secondary-text-color);
+    &-secondary {
+      border-top-color: var(--mw-secondary-text-color);
+    }
   }
-}
 
-// Vertical divider (use inside a flex row)
-.mw-divider-vertical {
-  display: inline-block;
-  width: 1px;
-  background: var(--mw-border);
-  margin: spacing('0') spacing('3');
-  align-self: stretch;
-  border: none;
-  flex-shrink: 0;
-}
-
-// Divider with centered label text
-.mw-divider-text {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: spacing('3');
-  margin: spacing('2') spacing('0');
-  border: none;
-
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
+  // Vertical divider (use inside a flex row)
+  .mw-divider-vertical {
+    display: inline-block;
+    width: 1px;
     background: var(--mw-border);
+    margin: spacing('0') spacing('3');
+    align-self: stretch;
+    border: none;
+    flex-shrink: 0;
   }
 
-  span {
-    color: var(--mw-text-muted-color);
-    font-size: font-size('sm');
-    white-space: nowrap;
-    user-select: none;
-  }
+  // Divider with centered label text
+  .mw-divider-text {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: spacing('3');
+    margin: spacing('2') spacing('0');
+    border: none;
 
-  &.mw-divider-primary {
     &::before,
     &::after {
-      background: var(--mw-primary-color);
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--mw-border);
     }
 
     span {
-      color: var(--mw-primary-text-color);
+      color: var(--mw-text-muted-color);
+      font-size: font-size('sm');
+      white-space: nowrap;
+      user-select: none;
+    }
+
+    &.mw-divider-primary {
+      &::before,
+      &::after {
+        background: var(--mw-primary-color);
+      }
+
+      span {
+        color: var(--mw-primary-text-color);
+      }
     }
   }
 }