maverick-wave 3.1.0 → 3.1.2

package/src/scss/components/_coming-soon.scss

@@ -10,11 +10,10 @@
   overflow: hidden;
   position: relative;
   transition: var(--mw-transition);
-  padding: spacing('10') spacing('0');
-  margin: spacing('1');
+  padding: spacing('12') spacing('0');
 
   &-icon {
-    margin-right: spacing('5');
+    margin-right: spacing('7');
     font-size: font-size('3xl');
     transition: var(--mw-transition);
     position: relative;
@@ -57,7 +56,7 @@
 
     .mw-coming-soon-icon {
       color: var(--mw-primary-text-color);
-      transform: rotate(23deg);
+      transform: rotate(27deg);
     }
 
     .mw-coming-soon-text {
@@ -85,6 +84,7 @@
 
     &-text,
     &-icon {
+      margin-right: spacing('5');
       letter-spacing: spacing('2');
       font-size: font-size('lg');
     }

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

@@ -80,7 +80,7 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: spacing('3');
-    padding: spacing('2') spacing('3');
+    padding: spacing('3');
     background: var(--mw-card-background);
     z-index: z-index('menu');
     width: 100%;
@@ -91,7 +91,6 @@
     }
 
     @include media-down('sm') {
-      padding: spacing('2');
       grid-template-columns: repeat(2, 1fr);
     }
   }
@@ -101,7 +100,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: spacing('3');
-    padding: spacing('2') spacing('3');
+    padding: spacing('3');
     background: var(--mw-card-background);
     z-index: z-index('menu');
     width: 100%;
@@ -112,7 +111,6 @@
     }
 
     @include media-down('sm') {
-      padding: spacing('2');
       grid-template-columns: 1fr;
     }
   }

package/src/scss/components/_divider.scss

@@ -2,12 +2,14 @@
 
 // Base horizontal divider
 .mw-divider {
+  display: block;
+  width: 100%;
   border: none;
   border-top: 1px solid var(--mw-border);
   margin: spacing('5') spacing('0');
 
   &-thick {
-    border-top-width: 3px;
+    border-top-width: 4px;
   }
 
   &-dashed {
@@ -37,6 +39,7 @@
 // Divider with centered label text
 .mw-divider-text {
   display: flex;
+  width: 100%;
   align-items: center;
   gap: spacing('3');
   margin: spacing('5') spacing('0');

package/src/scss/components/_empty-state.scss

@@ -6,13 +6,13 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: spacing('9') spacing('5');
+  padding: spacing('8') spacing('4');
 
   &-icon {
-    font-size: font-size('6xl');
+    font-size: font-size('5xl');
     color: var(--mw-text-muted-color);
-    opacity: 0.45;
-    margin-bottom: spacing('4');
+    opacity: 0.6;
+    margin-bottom: spacing('5');
     line-height: 1;
   }
 
@@ -20,7 +20,7 @@
     font-size: font-size('xl');
     font-weight: font-weight('medium');
     color: var(--mw-text-color);
-    margin-bottom: spacing('2');
+    margin-bottom: spacing('1');
   }
 
   &-desc {
@@ -53,21 +53,21 @@
   // Color variants (change icon color)
   &-primary .mw-empty-state-icon {
     color: var(--mw-primary-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-success .mw-empty-state-icon {
     color: var(--mw-success-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-warning .mw-empty-state-icon {
     color: var(--mw-warning-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-danger .mw-empty-state-icon {
     color: var(--mw-danger-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 }

package/src/scss/components/_gallery.scss

@@ -2,7 +2,6 @@
 
 .mw-gallery-container {
   max-width: 1100px;
-  border-radius: radius('md');
   margin: spacing('1') auto;
 }
 
@@ -11,7 +10,6 @@
   overflow: hidden;
   width: 100%;
   border-radius: radius('md');
-  margin: spacing('1');
 
   &-track {
     display: flex;
@@ -39,7 +37,6 @@
     color: rgba(23, 23, 23, 0.8); // fixed color
     background: rgba(240, 240, 240, 0.2); // fixed color
     border: none;
-    padding: spacing('5') spacing('2');
     font-size: font-size('5xl');
     cursor: pointer;
     z-index: z-index('menu');
@@ -69,7 +66,7 @@
   &-desc {
     text-align: left;
     padding: spacing('2') spacing('3');
-    margin-top: spacing('1');
+    margin-top: spacing('2');
     background: var(--mw-card-background);
     border-radius: radius('md');
     border: 1px solid var(--mw-primary-color-hover);
@@ -77,17 +74,17 @@
 
   &-dots {
     text-align: center;
-    margin-top: spacing('4');
+    margin-top: spacing('5');
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: spacing('3');
+    gap: spacing('4');
   }
 
   &-dot {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 11px;
+    height: 11px;
     border-radius: 50%;
     background: var(--mw-gray-background);
     cursor: pointer;
@@ -106,7 +103,6 @@
       height: 470px;
     }
     &-navi {
-      padding: spacing('4') spacing('2');
       font-size: font-size('3xl');
       height: calc(470px * 0.9);
     }
@@ -124,6 +120,13 @@
     &-desc {
       font-size: font-size('sm');
     }
+    &-dot {
+      width: 10px;
+      height: 10px;
+      &.mw-active {
+        transform: scale(1.4);
+      }
+    }
   }
 }
 
@@ -133,23 +136,21 @@
       height: 270px;
     }
     &-navi {
-      padding: spacing('3') spacing('1');
       font-size: font-size('2xl');
       height: calc(270px * 0.9);
       border-radius: radius('sm');
-      width: 12%;
+      width: 11%;
     }
     &-desc {
       font-size: font-size('xs');
     }
     &-dots {
       gap: spacing('2');
-      margin-top: spacing('3');
+      margin-top: spacing('4');
     }
     &-dot {
       width: 9px;
       height: 9px;
-
       &.mw-active {
         transform: scale(1.3);
       }

package/src/scss/components/_info.scss

@@ -14,7 +14,7 @@ $_mw-info-colors: (
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: spacing('2') spacing('4');
+  padding: spacing('3') spacing('5');
   margin: spacing('1');
   font-size: font-size('base');
   font-weight: font-weight('medium');
@@ -39,18 +39,19 @@ $_mw-info-colors: (
     font-weight: font-weight('normal');
   }
   &-lg {
-    padding: spacing('3') spacing('5');
+    padding: spacing('4') spacing('6');
     font-size: font-size('lg');
     font-weight: font-weight('medium');
   }
   &-xl {
-    padding: spacing('4') spacing('6');
+    padding: spacing('5') spacing('8');
     font-size: font-size('xl');
     font-weight: font-weight('medium');
   }
 
   // counter variant: big number + small label
   &-counter {
+    min-width: spacing('12');
     .mw-info-value {
       font-size: font-size('4xl');
       font-weight: font-weight('bold');
@@ -59,8 +60,7 @@ $_mw-info-colors: (
     .mw-info-label {
       font-size: font-size('sm');
       font-weight: font-weight('medium');
-      opacity: 0.8;
-      min-width: 5rem;
+      opacity: 0.6;
       text-align: center;
     }
   }
@@ -99,7 +99,7 @@ $_mw-info-colors: (
     svg,
     [class*='fa-'],
     [class*='fas-'] {
-      font-size: 0.6rem;
+      font-size: 0.55rem;
     }
   }
 

package/src/scss/components/_lists.scss

@@ -2,9 +2,8 @@
 
 // Base list styles
 .mw-list {
-  margin: spacing('3') spacing('0') spacing('5') spacing('0');
-  padding-left: spacing('2');
-  padding-right: spacing('2');
+  margin: spacing('4') spacing('0');
+  padding: spacing('0') spacing('2');
 
   li {
     margin-bottom: spacing('1');
@@ -23,13 +22,13 @@
 // Unstyled list - removes bullets and padding
 .mw-list-unstyled {
   list-style: none;
-  padding-left: spacing('0');
+  padding-left: spacing('1');
 }
 
 // Inline list - horizontal layout
 .mw-list-inline {
   list-style: none;
-  padding-left: spacing('0');
+  padding-left: spacing('1');
 
   li {
     display: inline-block;
@@ -83,11 +82,11 @@
 
 // Dot lists
 .mw-list-dot {
-  padding-left: spacing('4');
+  padding-left: spacing('3');
   list-style: disc inside;
 
   li {
-    padding-left: spacing('0');
+    padding-left: spacing('1');
     margin-bottom: spacing('1');
 
     &::marker {
@@ -103,7 +102,7 @@
   padding-left: spacing('3');
 
   li {
-    padding-left: spacing('0');
+    padding-left: spacing('1');
     margin-bottom: spacing('1');
   }
 
@@ -160,7 +159,7 @@
   > * {
     position: relative;
     border-radius: radius('sm');
-    padding: spacing('3') spacing('4');
+    padding: spacing('3');
     background: var(--mw-card-background);
     border: 1px solid transparent;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -178,7 +177,7 @@
     }
 
     &:hover {
-      padding-left: spacing('5');
+      padding-left: spacing('4');
       background: var(--mw-primary-background-hover);
       border-color: var(--mw-primary-color);
       transform: translateX(4px);
@@ -246,7 +245,7 @@
 
       &:hover {
         color: var(--mw-text-color);
-        padding-left: spacing('3');
+        padding-left: spacing('4');
 
         &::before {
           display: none;
@@ -258,18 +257,17 @@
   // Nested compact lists styling
   .mw-item-list-compact {
     margin-top: spacing('2');
-    margin-left: spacing('3');
+    margin-left: spacing('2');
     border-left: 2px solid var(--mw-border);
     border-radius: 0;
 
     > * {
-      padding: spacing('2') spacing('3');
+      padding: spacing('2');
       font-size: font-size('sm');
 
       &:hover {
         background: var(--mw-primary-color-hover);
-        margin-left: spacing('-2');
-        padding-left: spacing('5');
+        padding-left: spacing('4');
         border-left: 3px solid var(--mw-primary-color);
       }
     }
@@ -287,7 +285,7 @@
   box-shadow: 0 2px 8px var(--mw-shadow);
 
   > * {
-    padding: spacing('3') spacing('4');
+    padding: spacing('4');
     border-bottom: 1px solid var(--mw-border);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
@@ -387,7 +385,7 @@
 // Checkbox list component
 .mw-item-list-checkbox {
   @extend .mw-item-list;
-  gap: spacing('1');
+  gap: 0;
   border: 1px solid var(--mw-border);
   border-radius: radius('md');
   background: var(--mw-card-background);
@@ -395,9 +393,10 @@
 
   > * {
     display: flex;
-    align-items: flex-start;
-    padding: spacing('2') spacing('3');
+    align-items: center;
+    padding: spacing('2');
     border-bottom: 1px solid var(--mw-border);
+    border-left: 3px solid transparent;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
@@ -417,8 +416,8 @@
 
     .mw-checkbox {
       display: flex;
-      align-items: flex-start;
-      gap: spacing('2');
+      align-items: center;
+      gap: spacing('3');
       flex: 1;
 
       // Hide native checkbox
@@ -434,13 +433,13 @@
       .mw-checkbox-box {
         position: relative;
         flex-shrink: 0;
-        width: spacing('4');
-        height: spacing('4');
+        width: 14px;
+        height: 14px;
         border: 2px solid var(--mw-border);
         border-radius: radius('sm');
         background: var(--mw-form-elements-background);
         transition: var(--mw-transition);
-        margin-top: spacing('0.5');
+        margin-top: 3px;
         cursor: pointer;
         display: block;
 
@@ -490,6 +489,11 @@
         }
       }
 
+      // When header + description exists, top-align box with text
+      &:has(.mw-checkbox-header) {
+        align-items: flex-start;
+      }
+
       // When only label exists (no header)
       &:not(:has(.mw-checkbox-header)) {
         align-items: center;
@@ -512,8 +516,7 @@
     // When item is selected, add visual feedback
     &.mw-selected {
       background: var(--mw-primary-background-hover);
-      border-left: 3px solid var(--mw-primary-color);
-      padding-left: spacing('2');
+      border-left-color: var(--mw-primary-color);
     }
   }
 

package/src/scss/components/_meta-info.scss

@@ -2,7 +2,7 @@
 
 .mw-meta {
   &-header {
-    padding: spacing('3') spacing('2');
+    padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
     margin-bottom: spacing('5');
     display: flex;

package/src/scss/components/_modals.scss

@@ -29,13 +29,11 @@
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
   box-shadow: 0 25px 50px var(--mw-shadow);
-  max-width: 450px;
+  max-width: 550px;
   width: 100%;
   max-height: 75vh;
   display: flex;
   flex-direction: column;
-  transform: scale(0.9) translateY(spacing('4'));
-  transition: transform 0.5s ease;
   z-index: z-index('modal');
 
   .mw-modal-open & {
@@ -43,15 +41,15 @@
   }
 
   &.mw-modal-sm {
-    max-width: 350px;
+    max-width: 370px;
     max-height: 70vh;
   }
   &.mw-modal-lg {
-    max-width: 600px;
+    max-width: 680px;
     max-height: 80vh;
   }
   &.mw-modal-xl {
-    max-width: 790px;
+    max-width: 900px;
     max-height: 85vh;
   }
 }

package/src/scss/components/_pagination.scss

@@ -19,7 +19,8 @@
     background: none;
     color: var(--mw-primary-text-color);
     cursor: pointer;
-    padding: spacing('2') spacing('3');
+    padding: spacing('2') spacing('4');
+    margin: spacing('0') spacing('5');
     border-radius: radius('sm');
     border: 1px solid var(--mw-primary-text-color);
     display: flex;
@@ -67,7 +68,7 @@
   }
 }
 
-// Optional: Add slide animation
+// Optional slide animation
 .mw-pagination-slide-left {
   animation: slideLeft 0.3s ease;
 }

package/src/scss/components/_panels.scss

@@ -11,7 +11,7 @@
   margin: spacing('1');
 
   &-header {
-    padding: spacing('3') spacing('5');
+    padding: spacing('4') spacing('5');
     border-bottom: 1px solid var(--mw-primary-color-hover);
     display: flex;
     justify-content: space-between;
@@ -20,7 +20,7 @@
   }
 
   &-body {
-    padding: spacing('3') spacing('5');
+    padding: spacing('4') spacing('5');
     flex: 1;
     overflow-y: auto;
 
@@ -41,7 +41,7 @@
   }
 
   &-footer {
-    padding: spacing('3') spacing('5');
+    padding: spacing('4') spacing('5');
     border-top: 1px solid var(--mw-primary-color-hover);
     display: flex;
     justify-content: flex-end;
@@ -69,7 +69,7 @@
 
     .mw-panel-body {
       overflow-y: auto;
-      max-height: calc(500px - 2 * spacing('4') - 2px);
+      max-height: calc(500px - #{2 * spacing('4')} - 2px);
     }
   }
 
@@ -77,24 +77,30 @@
   &-max-height {
     &-sm {
       max-height: 300px;
+      min-height: 0;
+      align-self: start;
       .mw-panel-body {
-        max-height: calc(300px - 2 * spacing('4') - 2px);
+        max-height: calc(300px - #{2 * spacing('4')} - 2px);
         overflow-y: auto;
       }
     }
 
     &-md {
       max-height: 500px;
+      min-height: 0;
+      align-self: start;
       .mw-panel-body {
-        max-height: calc(500px - 2 * spacing('4') - 2px);
+        max-height: calc(500px - #{2 * spacing('4')} - 2px);
         overflow-y: auto;
       }
     }
 
     &-lg {
       max-height: 700px;
+      min-height: 0;
+      align-self: start;
       .mw-panel-body {
-        max-height: calc(700px - 2 * spacing('4') - 2px);
+        max-height: calc(700px - #{2 * spacing('4')} - 2px);
         overflow-y: auto;
       }
     }

package/src/scss/components/_progress.scss

@@ -17,7 +17,7 @@ $_mw-progress-colors: (
   &-barinfo {
     display: flex;
     justify-content: space-between;
-    margin: spacing('3') spacing('2') spacing('1') spacing('1');
+    margin: spacing('3') spacing('2') spacing('1');
     font-size: font-size('sm');
 
     // hide info, if this class is available
@@ -79,20 +79,21 @@ $_mw-progress-colors: (
   }
 
   &-lg .mw-progress-bar {
-    height: 16px;
+    height: 15px;
     border-radius: radius('lg');
   }
 
   // With inner label
   &-inline-label {
     .mw-progress-bar {
-      height: 24px;
+      height: 22px;
+      user-select: none;
     }
 
     .mw-progress-fill {
       display: flex;
       align-items: center;
-      padding-left: spacing('5');
+      padding-left: spacing('6');
       font-size: font-size('xs');
       font-weight: font-weight('medium');
       color: var(--mw-primary-text-color);

package/src/scss/components/_ratings.scss

@@ -2,7 +2,7 @@
 
 .mw-rating {
   display: inline-flex;
-  gap: spacing('2');
+  gap: spacing('3');
   font-size: font-size('2xl');
   padding: spacing('2') spacing('4');
 
@@ -16,7 +16,7 @@
   &-info {
     display: flex;
     justify-content: space-between;
-    margin: spacing('2') spacing('1') spacing('1') spacing('1');
+    margin: spacing('1');
     font-size: font-size('md');
   }
 

package/src/scss/components/_skeleton.scss

@@ -25,7 +25,7 @@
 
 // Text line
 .mw-skeleton-text {
-  height: 1em;
+  height: 1rem;
   width: 100%;
   margin-bottom: spacing('2');
 
@@ -36,7 +36,7 @@
 
 // Heading
 .mw-skeleton-title {
-  height: 1.4em;
+  height: 1.4rem;
   width: 45%;
   margin-bottom: spacing('3');
 }
@@ -44,8 +44,8 @@
 // Circle (avatar placeholder)
 .mw-skeleton-circle {
   border-radius: radius('full');
-  width: spacing('8');
-  height: spacing('8');
+  width: 24px;
+  height: 24px;
   flex-shrink: 0;
 }
 
@@ -68,7 +68,7 @@
 .mw-skeleton-card {
   display: flex;
   flex-direction: column;
-  gap: spacing('2');
+  gap: spacing('3');
   padding: spacing('4');
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
@@ -85,6 +85,6 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: spacing('2');
+    gap: spacing('3');
   }
 }