maverick-wave 3.6.3 → 3.9.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "3.6.3",
+  "version": "3.9.0",
   "config": {
-    "version_short": "3.6"
+    "version_short": "3.9"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/empty-state-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Empty State</h3>
 
-<div class="mw-grid-2 mw-gap-6">
+<div class="mw-grid-2-lg">
   <div>
     <h3 class="mw-card-title mw-mb-4">Basic & Color Variants</h3>
     <div class="mw-card mw-card-simple">

package/src/partials/ratings-container.html

@@ -4,7 +4,7 @@
   light up. You can also determine the icon flexibly.
 </p>
 
-<div class="mw-grid-2">
+<div class="mw-grid-2-lg">
   <div>
     <h3 class="mw-mb-4">Ratings in different sizes</h3>
     <div class="mw-card mw-card-simple">

package/src/partials/tables-container.html

@@ -15,7 +15,6 @@
           <th>Name</th>
           <th>Position</th>
           <th>Location</th>
-          <th>Status</th>
           <th class="mw-text-numeric">Budget</th>
         </tr>
       </thead>
@@ -25,7 +24,6 @@
           <td>John Doe</td>
           <td>Developer</td>
           <td>New York</td>
-          <td><span class="mw-tag mw-tag-success">Active</span></td>
           <td class="mw-text-numeric">1,204.50</td>
         </tr>
         <tr>
@@ -33,7 +31,6 @@
           <td>Jane Smith</td>
           <td>Designer</td>
           <td>London</td>
-          <td><span class="mw-tag mw-tag-warning">Pending</span></td>
           <td class="mw-text-numeric">87.00</td>
         </tr>
         <tr>
@@ -41,7 +38,6 @@
           <td>Bob Johnson</td>
           <td>Manager</td>
           <td>Berlin</td>
-          <td><span class="mw-tag mw-tag-muted">Draft</span></td>
           <td class="mw-text-numeric">15,930.25</td>
         </tr>
       </tbody>

package/src/partials/tags-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Tags</h3>
 
-<div class="mw-grid-3 mw-gap-6">
+<div class="mw-grid-2-lg mw-gap-6">
   <!-- COLUMN 1: Basic & Status -->
   <div>
     <h3 class="mw-card-title mw-mb-4">Status & Types</h3>

package/src/scss/abstracts/_variables.scss

@@ -21,7 +21,7 @@ $danger-color: #db182f !default;
 $info-color: #17a2b8 !default;
 $gray-color: #565656 !default;
 $dark-background: #0b111a !default;
-$dark-text-color: #dd2222 !default;
+$dark-text-color: #d6dbdf !default;
 $light-background: #d2d1e1 !default;
 $light-text-color: #1a1a1d !default;
 // Form controls stay light in both themes, so they get their own root value

package/src/scss/base/_reset.scss

@@ -10,7 +10,7 @@
 
 html {
   scroll-behavior: smooth;
-  min-width: 360px;
+  min-width: 375px;
   // Keeps anchor targets clear of the fixed header, plus a bit of breathing room
   scroll-padding-top: calc(var(--mw-header-height) + #{spacing('4')});
   -webkit-text-size-adjust: 100%;

package/src/scss/components/_ratings.scss

@@ -2,6 +2,8 @@
 
 .mw-rating {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 100%;
   gap: spacing('3');
   font-size: font-size('2xl');
   padding: spacing('2') spacing('4');
@@ -32,7 +34,7 @@
 
   &-icon {
     color: var(--mw-gray-color);
-    transition: color var(--mw-transition);
+    transition: var(--mw-transition);
     pointer-events: none;
   }
 }

package/src/scss/components/_tags.scss

@@ -98,10 +98,15 @@ $_mw-tag-colors: (
 }
 
 // Size variants
+// a little more air between the items instead of inside them
+.mw-tags-lg {
+  gap: spacing('3');
+}
+
 .mw-tags-lg .mw-tags-item,
 .mw-tag-lg {
   font-size: font-size('sm');
-  padding: spacing('1') spacing('3');
+  padding: spacing('2') spacing('3');
 
   .mw-tags-remove {
     width: 22px;

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

@@ -20,10 +20,11 @@ $_size-lg: spacing('7');
 
   &-inline {
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
-    gap: spacing('6');
+    gap: spacing('2') spacing('6');
     @include media-down('sm') {
-      gap: spacing('4');
+      gap: spacing('2') spacing('4');
     }
   }
 }

package/src/scss/layout/_grid.scss

@@ -17,7 +17,7 @@
 
 .mw-grid-1 {
   @extend %grid-base;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
 
   justify-items: stretch;
   > * {
@@ -28,57 +28,57 @@
 
 .mw-grid-2 {
   @extend %grid-base;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
 .mw-grid-3 {
   @extend %grid-base;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 
   @include media-down('md') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
 .mw-grid-4 {
   @extend %grid-base;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
   @include media-down('lg') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
 .mw-grid-5 {
   @extend %grid-base;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 
   @include media-down('lg') {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   @include media-down('md') {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   @include media-down('sm') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @include media-down('xs') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
@@ -87,11 +87,11 @@
   @extend %grid-base;
 
   // Default: 12-column grid (you can adjust this base)
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
 
   // At MD breakpoint and below, force single column
   @include media-down('md') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
 
     // Reset all spans to full width
     > * {
@@ -110,7 +110,7 @@
 // Responsive auto grid
 .mw-grid-auto {
   @extend %grid-base;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
 
   // Ensure children don't override the grid behavior
   > * {
@@ -123,12 +123,12 @@
 // Alternative with different minimum widths
 .mw-grid-auto-sm {
   @extend %grid-base;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
 }
 
 .mw-grid-auto-md {
   @extend %grid-base;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
 }
 
 .mw-grid-lg {
@@ -137,7 +137,7 @@
 
 .mw-grid-1-lg {
   @extend %grid-base-lg;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: stretch;
   > * {
     width: 100% !important;
@@ -147,72 +147,72 @@
 
 .mw-grid-2-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: spacing('6');
   }
 }
 
 .mw-grid-3-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   @include media-down('lg') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: spacing('7');
   }
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: spacing('6');
   }
 }
 
 .mw-grid-4-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   @include media-down('xl') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   @include media-down('md') {
     gap: spacing('7');
   }
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: spacing('6');
   }
 }
 
 .mw-grid-5-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   @include media-down('xl') {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   @include media-down('lg') {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   @include media-down('md') {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: spacing('7');
   }
   @include media-down('sm') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: spacing('6');
   }
 }
 
 .mw-grid-auto-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
 }
 
 // Flexible grids with large spacing
 .mw-grid-flex-lg {
   @extend %grid-base-lg;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
 
   @include media-down('md') {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: spacing('5');
     > * {
       grid-column: 1 / -1 !important;
@@ -223,7 +223,7 @@
 // Base stack - items keep their natural width
 .mw-grid-stack {
   @extend %grid-base;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: start; // Items keep natural width, aligned left
 
   // Remove the forced width from grid-1
@@ -236,7 +236,7 @@
 // Stack variants with different alignments
 .mw-grid-stack-center {
   @extend %grid-base;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: center;
 
   > * {
@@ -246,7 +246,7 @@
 
 .mw-grid-stack-end {
   @extend %grid-base;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: end;
 
   > * {
@@ -257,7 +257,7 @@
 
 .mw-grid-stack-stretch {
   @extend %grid-base;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: stretch;
 
   > * {
@@ -269,7 +269,7 @@
 // Large spacing variants
 .mw-grid-stack-lg {
   @extend %grid-base-lg;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: start;
 
   > * {
@@ -280,7 +280,7 @@
 
 .mw-grid-stack-center-lg {
   @extend %grid-base-lg;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   justify-items: center;
 
   > * {