maverick-wave 3.0.1 → 3.1.2

package/src/partials/modals-container.html

@@ -4,133 +4,255 @@
   toggling.
 </p>
 
-<!-- Modal Triggers -->
-<div class="mw-grid-3 mw-mb-8">
-  <button onclick="openModal('modal-basic')" class="mw-btn mw-btn-primary">
-    Open Basic Modal
+<!-- Size Triggers -->
+<h4 class="mw-mb-3">Modal Sizes</h4>
+<div class="mw-grid-4 mw-mb-8">
+  <button onclick="openModal('modal-sm')" class="mw-btn mw-btn-outline">
+    Small Modal
   </button>
-  <button onclick="openModal('modal-confirm')" class="mw-btn mw-btn-secondary">
-    Open Confirmation
+  <button onclick="openModal('modal-default')" class="mw-btn mw-btn-outline">
+    Default Modal
+  </button>
+  <button onclick="openModal('modal-lg')" class="mw-btn mw-btn-outline">
+    Large Modal
+  </button>
+  <button onclick="openModal('modal-xl')" class="mw-btn mw-btn-outline">
+    XL Modal
   </button>
-  <button onclick="openModal('modal-form')" class="mw-btn mw-btn-outline">
+</div>
+
+<!-- Example Triggers -->
+<h4 class="mw-mb-3">Examples</h4>
+<div class="mw-grid-2 mw-mb-8">
+  <button onclick="openModal('modal-form')" class="mw-btn mw-btn-primary">
     Open Form Modal
   </button>
+  <button onclick="openModal('modal-confirm')" class="mw-btn mw-btn-secondary">
+    Open Confirmation
+  </button>
 </div>
 
-<!-- Basic Modal -->
-<div id="modal-basic" class="mw-modal-overlay">
-  <div class="mw-modal">
+<!-- Small Modal -->
+<div id="modal-sm" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-sm">
     <div class="mw-modal-header">
-      <h4 class="mw-modal-title">JavaScript Modal</h4>
-      <button onclick="closeModal('modal-basic')" class="mw-modal-close">
+      <h4 class="mw-modal-title">Small Modal</h4>
+      <button onclick="closeModal('modal-sm')" class="mw-modal-close">
         &#120299;
       </button>
     </div>
     <div class="mw-modal-body">
-      <p>This modal works with minimal JavaScript - perfect for Angular!</p>
-      <p>
-        Uses CSS classes for show/hide animations that you can easily control
-        from Angular components.
+      <p class="mw-text-muted">
+        Max-width <strong>370px</strong>. Good for short confirmations or
+        alerts.
       </p>
     </div>
     <div class="mw-modal-footer">
-      <button onclick="closeModal('modal-basic')" class="mw-btn mw-btn-outline">
-        Cancel
-      </button>
-      <button onclick="closeModal('modal-basic')" class="mw-btn mw-btn-primary">
-        Confirm
+      <button onclick="closeModal('modal-sm')" class="mw-btn mw-btn-outline">
+        Close
       </button>
     </div>
   </div>
-  <!-- Click outside to close -->
-  <div class="mw-modal-backdrop" onclick="closeModal('modal-basic')"></div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-sm')"></div>
 </div>
 
-<!-- Confirmation Modal -->
-<div id="modal-confirm" class="mw-modal-overlay">
-  <div class="mw-modal mw-modal-sm">
+<!-- Default Modal -->
+<div id="modal-default" class="mw-modal-overlay">
+  <div class="mw-modal">
     <div class="mw-modal-header">
-      <h3 class="mw-modal-title">Delete Confirmation</h3>
-      <button onclick="closeModal('modal-confirm')" class="mw-modal-close">
+      <h4 class="mw-modal-title">Default Modal</h4>
+      <button onclick="closeModal('modal-default')" class="mw-modal-close">
         &#120299;
       </button>
     </div>
     <div class="mw-modal-body">
-      <p class="mw-text-center">
-        <strong>Are you really sure you want to delete this item?</strong>
+      <p class="mw-text-muted">
+        Max-width <strong>550px</strong>. The default size — fits most use
+        cases.
       </p>
-      <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
     </div>
     <div class="mw-modal-footer">
       <button
-        onclick="closeModal('modal-confirm')"
+        onclick="closeModal('modal-default')"
         class="mw-btn mw-btn-outline"
       >
         Cancel
       </button>
       <button
-        onclick="closeModal('modal-confirm')"
-        class="mw-btn mw-btn-secondary"
+        onclick="closeModal('modal-default')"
+        class="mw-btn mw-btn-primary"
       >
-        Delete
+        Confirm
       </button>
     </div>
   </div>
-  <div class="mw-modal-backdrop" onclick="closeModal('modal-confirm')"></div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-default')"></div>
+</div>
+
+<!-- Large Modal -->
+<div id="modal-lg" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-lg">
+    <div class="mw-modal-header">
+      <h4 class="mw-modal-title">Large Modal</h4>
+      <button onclick="closeModal('modal-lg')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <p class="mw-text-muted">
+        Max-width <strong>680px</strong>. More room for richer content or forms.
+      </p>
+    </div>
+    <div class="mw-modal-footer">
+      <button onclick="closeModal('modal-lg')" class="mw-btn mw-btn-outline">
+        Cancel
+      </button>
+      <button onclick="closeModal('modal-lg')" class="mw-btn mw-btn-primary">
+        Confirm
+      </button>
+    </div>
+  </div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-lg')"></div>
+</div>
+
+<!-- XL Modal -->
+<div id="modal-xl" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-xl">
+    <div class="mw-modal-header">
+      <h4 class="mw-modal-title">XL Modal</h4>
+      <button onclick="closeModal('modal-xl')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <p class="mw-text-muted">
+        Max-width <strong>900px</strong>. Use for detail views, data tables, or
+        complex layouts.
+      </p>
+    </div>
+    <div class="mw-modal-footer">
+      <button onclick="closeModal('modal-xl')" class="mw-btn mw-btn-outline">
+        Cancel
+      </button>
+      <button onclick="closeModal('modal-xl')" class="mw-btn mw-btn-primary">
+        Confirm
+      </button>
+    </div>
+  </div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-xl')"></div>
 </div>
 
 <!-- Form Modal -->
 <div id="modal-form" class="mw-modal-overlay">
   <div class="mw-modal mw-modal-lg">
     <div class="mw-modal-header">
-      <h3 class="mw-modal-title">Contact Form</h3>
+      <h4 class="mw-modal-title">New Contact</h4>
       <button onclick="closeModal('modal-form')" class="mw-modal-close">
         &#120299;
       </button>
     </div>
     <div class="mw-modal-body">
-      <div class="mw-mb-4">
-        <label for="modal-name">
-          <span>Name</span>
+      <div class="mw-grid-2 mw-mb-3">
+        <label for="modal-firstname">
+          <span>First Name</span>
+          <input
+            id="modal-firstname"
+            type="text"
+            class="mw-input"
+            placeholder="Jane"
+          />
+        </label>
+        <label for="modal-lastname">
+          <span>Last Name</span>
           <input
-            id="modal-name"
+            id="modal-lastname"
             type="text"
-            class="mw-input-sm"
-            placeholder="Your Name"
+            class="mw-input"
+            placeholder="Doe"
           />
         </label>
       </div>
-      <div class="mw-mb-4">
+      <div class="mw-mb-3">
         <label for="modal-email">
           <span>Email</span>
           <input
             id="modal-email"
             type="email"
-            class="mw-input-sm"
-            placeholder="Your Email"
+            class="mw-input"
+            placeholder="jane@example.com"
           />
         </label>
       </div>
-      <div class="mw-mb-4">
-        <label for="modal-message">
-          <span>Message</span>
+      <div class="mw-mb-3">
+        <label for="modal-role">
+          <span>Role</span>
+          <select id="modal-role" class="mw-select">
+            <option value="" disabled selected>Select a role</option>
+            <option>Developer</option>
+            <option>Designer</option>
+            <option>Product Manager</option>
+            <option>Other</option>
+          </select>
+        </label>
+      </div>
+      <div class="mw-mb-3">
+        <label for="modal-notes">
+          <span>Notes</span>
           <textarea
-            id="modal-message"
-            rows="5"
-            class="mw-textarea mw-textarea-sm"
-            placeholder="Your message..."
+            id="modal-notes"
+            rows="3"
+            class="mw-textarea"
+            placeholder="Optional notes..."
           ></textarea>
         </label>
       </div>
+      <label class="mw-toggle">
+        <input type="checkbox" />
+        <div class="mw-toggle-track"></div>
+        <span class="mw-toggle-label">Send welcome email</span>
+      </label>
     </div>
     <div class="mw-modal-footer">
       <button onclick="closeModal('modal-form')" class="mw-btn mw-btn-outline">
         Cancel
       </button>
       <button onclick="closeModal('modal-form')" class="mw-btn mw-btn-primary">
-        Send Message
+        Save Contact
       </button>
     </div>
   </div>
   <div class="mw-modal-backdrop" onclick="closeModal('modal-form')"></div>
 </div>
+
+<!-- Confirmation Modal -->
+<div id="modal-confirm" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-sm">
+    <div class="mw-modal-header">
+      <h4 class="mw-modal-title">Delete Item</h4>
+      <button onclick="closeModal('modal-confirm')" class="mw-modal-close">
+        &#120299;
+      </button>
+    </div>
+    <div class="mw-modal-body">
+      <p class="mw-text-center">
+        <strong>Are you sure you want to delete this item?</strong>
+      </p>
+      <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
+    </div>
+    <div class="mw-modal-footer">
+      <button
+        onclick="closeModal('modal-confirm')"
+        class="mw-btn mw-btn-outline"
+      >
+        Cancel
+      </button>
+      <button
+        onclick="closeModal('modal-confirm')"
+        class="mw-btn mw-btn-secondary"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+  <div class="mw-modal-backdrop" onclick="closeModal('modal-confirm')"></div>
+</div>

package/src/partials/panels-container.html

@@ -16,7 +16,7 @@
   </div>
 </div>
 
-<div class="mw-grid-4-lg">
+<div class="mw-grid-3-lg">
   <div class="mw-panel mw-panel-primary">
     <h4 class="mw-panel-header">Primary Panel</h4>
     <div class="mw-panel-body">
@@ -26,12 +26,8 @@
       </p>
     </div>
     <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-        Cancel
-      </button>
-      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-        Save
-      </button>
+      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+      <button type="button" class="mw-btn mw-btn-primary">Save</button>
     </div>
   </div>
 
@@ -43,14 +39,6 @@
         type of content, including forms, tables, or other components.
       </p>
     </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-        Cancel
-      </button>
-      <button type="button" class="mw-btn mw-btn-secondary mw-btn-sm">
-        Submit
-      </button>
-    </div>
   </div>
 
   <div class="mw-panel mw-panel-scrollable">
@@ -99,15 +87,13 @@
       </p>
     </div>
     <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-        Cancel
-      </button>
-      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-        Save
-      </button>
+      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+      <button type="button" class="mw-btn mw-btn-primary">Save</button>
     </div>
   </div>
+</div>
 
+<div class="mw-grid-2 mw-my-6">
   <div class="mw-panel mw-panel-primary mw-panel-max-height-md">
     <h4 class="mw-panel-header">Medium Height Panel</h4>
     <div class="mw-panel-body">
@@ -145,17 +131,10 @@
       </p>
     </div>
     <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-        Cancel
-      </button>
-      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-        Save
-      </button>
+      <button type="button" class="mw-btn mw-btn-primary">OK</button>
     </div>
   </div>
-</div>
 
-<div class="mw-grid-1 mw-my-6">
   <div class="mw-panel mw-panel-secondary mw-panel-max-height-sm">
     <h4 class="mw-panel-header">Small Height Panel</h4>
     <div class="mw-panel-body">
@@ -185,12 +164,8 @@
       </p>
     </div>
     <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-        Cancel
-      </button>
-      <button type="button" class="mw-btn mw-btn-secondary mw-btn-sm">
-        Submit
-      </button>
+      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+      <button type="button" class="mw-btn mw-btn-secondary">Submit</button>
     </div>
   </div>
 </div>

package/src/scss/abstracts/_variables.scss

@@ -147,7 +147,7 @@ $font-sizes: (
   '3xl': 2.2rem,
   '4xl': 2.5rem,
   '5xl': 3rem,
-  '6xl': 4.4rem,
+  '6xl': 4.3rem,
 );
 $font-weights: (
   'bold': 700,
@@ -158,25 +158,27 @@ $font-weights: (
 
 // Spacing
 $spacing: (
-  '-6': -2.25rem,
-  '-5': -1.75rem,
-  '-4': -1.25rem,
-  '-3': -0.75rem,
-  '-2': -0.5rem,
+  '-6': -1.75rem,
+  '-5': -1.25rem,
+  '-4': -0.75rem,
+  '-3': -0.5rem,
+  '-2': -0.35rem,
   '-1': -0.2rem,
   '0': 0,
   '1': 0.2rem,
-  '2': 0.5rem,
-  '3': 0.75rem,
-  '4': 1rem,
-  '5': 1.5rem,
-  '6': 2rem,
-  '7': 2.6rem,
-  '8': 3.3rem,
-  '9': 4.5rem,
-  '10': 6rem,
-  '11': 8.5rem,
-  '12': 11rem,
+  '2': 0.35rem,
+  '3': 0.5rem,
+  '4': 0.75rem,
+  '5': 1rem,
+  '6': 1.35rem,
+  '7': 1.75rem,
+  '8': 2rem,
+  '9': 2.5rem,
+  '10': 3.2rem,
+  '11': 4rem,
+  '12': 5.4rem,
+  '13': 7rem,
+  '14': 9rem,
 );
 
 // Breakpoints

package/src/scss/components/_accordions.scss

@@ -4,7 +4,7 @@
   border: 1px solid var(--mw-border);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
   overflow: hidden;
-  margin: spacing('1');
+  margin: spacing('2');
 
   &-item {
     border-bottom: 1px solid var(--mw-primary-color-hover);

package/src/scss/components/_alerts.scss

@@ -3,11 +3,9 @@
 .mw-alert {
   position: relative;
   overflow: hidden;
-
   display: flex;
   align-items: flex-start;
-
-  padding: spacing('3') spacing('4');
+  padding: spacing('4') spacing('5');
   margin-bottom: spacing('4');
   border-radius: radius('md');
 
@@ -24,7 +22,7 @@
 
   &-icon {
     flex-shrink: 0;
-    margin-right: spacing('3');
+    margin-right: spacing('4');
     font-size: font-size('xl');
     line-height: 1.2;
     margin-top: spacing('1');

package/src/scss/components/_avatars.scss

@@ -66,7 +66,7 @@ $_mw-avatar-colors: (
     display: flex;
     flex-wrap: wrap; // Allow items to wrap to next line
     justify-content: flex-start;
-    margin: spacing('1');
+    margin: spacing('2');
 
     .mw-avatar {
       margin-right: -15px;

package/src/scss/components/_blog-post.scss

@@ -1,8 +1,8 @@
 @use '../abstracts' as *;
 
 .mw-blog-post {
-  margin: spacing('1');
-  padding: spacing('3') spacing('5');
+  margin: spacing('2');
+  padding: spacing('3') spacing('7');
   animation: pageReveal 1.6s ease-out forwards;
   border-radius: radius('sm') radius('2xl') radius('sm') radius('2xl');
   box-shadow:
@@ -209,10 +209,10 @@
       list-style: disc;
       ul {
         list-style: circle;
-        margin: spacing('1') spacing('1') spacing('2') spacing('3');
+        margin: spacing('2') spacing('2') spacing('3') spacing('4');
         ul {
           list-style: square;
-          margin: spacing('1') spacing('1') spacing('2') spacing('3');
+          margin: spacing('2') spacing('2') spacing('3') spacing('4');
         }
       }
     }
@@ -237,7 +237,7 @@
   // Footer section
   &-footer {
     margin-top: spacing('6');
-    padding-top: spacing('3');
+    padding-top: spacing('4');
     border-top: 1px solid var(--mw-secondary-color);
     display: flex;
     justify-content: space-between;

package/src/scss/components/_breadcrumbs.scss

@@ -40,8 +40,8 @@
       text-decoration: none;
       font-size: font-size('md');
       border: 2px solid var(--mw-border);
-      height: spacing('7');
-      padding: spacing('0') spacing('5');
+      height: spacing('8');
+      padding: spacing('2') spacing('5');
       border-radius: 0;
       transform: skew(-30deg);
       position: relative;

package/src/scss/components/_buttons.scss

@@ -5,8 +5,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: spacing('2');
-  padding: spacing('2') spacing('4');
+  gap: spacing('3');
+  padding: spacing('3') spacing('4');
   border: 1px solid transparent;
   border-radius: radius('sm');
   font-weight: font-weight('medium');

package/src/scss/components/_cards.scss

@@ -12,7 +12,7 @@ $_mw-card-addon-colors: (
 .mw-card {
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  padding: spacing('4') spacing('0') spacing('2') spacing('0');
+  padding: spacing('5') spacing('0') spacing('3') spacing('0');
   box-shadow: 0 5px 10px var(--mw-shadow);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
@@ -22,7 +22,7 @@ $_mw-card-addon-colors: (
   z-index: z-index('card');
 
   &-simple {
-    padding: spacing('4');
+    padding: spacing('5');
   }
 
   &:hover {
@@ -34,7 +34,7 @@ $_mw-card-addon-colors: (
   &-badge {
     position: absolute;
     top: spacing('2');
-    right: spacing('3');
+    right: spacing('4');
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
     color: var(--mw-primary-text-color);
@@ -56,14 +56,13 @@ $_mw-card-addon-colors: (
     font-size: font-size('xs');
     color: var(--mw-primary-text-color);
     background: var(--mw-primary-color);
-    border-radius: radius('xs');
     white-space: nowrap;
     width: 220px;
     z-index: z-index('card') + 5;
     pointer-events: none;
     transform: rotate(25deg);
     text-align: center;
-    opacity: 0.75;
+    opacity: 0.8;
     font-weight: font-weight('medium');
     @include media-down('sm') {
       font-size: font-size('2xs');
@@ -110,7 +109,7 @@ $_mw-card-addon-colors: (
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: spacing('4') spacing('5') spacing('4') spacing('4');
+    padding: spacing('5');
   }
 
   &-title {
@@ -218,14 +217,12 @@ $_mw-card-addon-colors: (
 
   @include media-down('sm') {
     &-body {
-      padding: spacing('3');
+      padding: spacing('4');
     }
 
     // Adjust the image margin to match the new padding
     .mw-card-img {
       margin-bottom: spacing('2');
-      // margin: -#{spacing('4')} -#{spacing('4')} spacing('4');
-
       img {
         width: 100%;
       }
@@ -233,13 +230,13 @@ $_mw-card-addon-colors: (
   }
 
   &-stack {
-    padding: spacing('3');
+    padding: spacing('4') spacing('5');
     transition: all 0.4s ease;
 
     // Icon transition setup
     &-icon {
-      width: 42px;
-      height: 42px;
+      width: 38px;
+      height: 38px;
       border-radius: radius('full');
       background: var(--mw-primary-color);
       color: var(--mw-primary-text-color);
@@ -255,20 +252,19 @@ $_mw-card-addon-colors: (
 
     // Add rotation on hover
     &:hover &-icon {
-      transform: rotate(33deg);
+      transform: rotate(25deg);
     }
 
     // Rest of your styles...
     &-header {
       display: flex;
       align-items: center;
-      margin-bottom: spacing('3');
       position: relative;
 
       &:after {
         content: '';
         position: absolute;
-        bottom: -#{spacing('4')};
+        bottom: spacing('-3');
         left: 48%;
         transform: translateX(-50%);
         width: 90%;
@@ -298,7 +294,7 @@ $_mw-card-addon-colors: (
     &-body {
       display: flex;
       flex-direction: column;
-      padding-top: spacing('3');
+      padding-top: spacing('5');
     }
 
     &-text {