maverick-wave 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maverick-wave",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "config": {
     "version_short": "3.1"
   },

package/src/partials/divider-container.html

@@ -3,49 +3,63 @@
 <div class="mw-grid-2 mw-gap-6">
   <div>
     <h3 class="mw-card-title mw-mb-4">Horizontal</h3>
-    <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Default</h5>
-      <p class="mw-text-muted">Content above</p>
-      <hr class="mw-divider" />
-      <p class="mw-text-muted">Content below</p>
-
-      <h5 class="mw-text-medium mw-mb-2">Thick</h5>
-      <hr class="mw-divider mw-divider-thick" />
-
-      <h5 class="mw-text-medium mw-mb-2">Dashed</h5>
-      <hr class="mw-divider mw-divider-dashed" />
-
-      <h5 class="mw-text-medium mw-mb-2">Primary color</h5>
-      <hr class="mw-divider mw-divider-primary" />
-
-      <h5 class="mw-text-medium mw-mb-2">Secondary color</h5>
-      <hr class="mw-divider mw-divider-secondary" />
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <p class="mw-text-muted">Content above</p>
+        <hr class="mw-divider" />
+        <p class="mw-text-muted">Content below</p>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Thick</h5>
+        <hr class="mw-divider mw-divider-thick" />
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Dashed</h5>
+        <hr class="mw-divider mw-divider-dashed" />
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Primary color</h5>
+        <hr class="mw-divider mw-divider-primary" />
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Secondary color</h5>
+        <hr class="mw-divider mw-divider-secondary" />
+      </div>
     </div>
   </div>
 
   <div>
     <h3 class="mw-card-title mw-mb-4">With Text & Vertical</h3>
-    <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">With label</h5>
-      <div class="mw-divider-text">
-        <span>or</span>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">With label</h5>
+        <div class="mw-divider-text">
+          <span>or</span>
+        </div>
       </div>
-
-      <div class="mw-divider-text">
-        <span>Section Title</span>
+      <div>
+        <div class="mw-divider-text">
+          <span>Section Title</span>
+        </div>
       </div>
-
-      <div class="mw-divider-text mw-divider-primary">
-        <span><i class="fas fa-star"></i> Featured</span>
+      <div>
+        <div class="mw-divider-text mw-divider-primary">
+          <span><i class="fas fa-star"></i> Featured</span>
+        </div>
       </div>
 
-      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Vertical (inside flex row)</h5>
-      <div style="display: flex; align-items: center; gap: 1rem; height: 70px">
-        <span class="mw-text-muted">Left</span>
-        <div class="mw-divider-vertical"></div>
-        <span class="mw-text-muted">Middle</span>
-        <div class="mw-divider-vertical"></div>
-        <span class="mw-text-muted">Right</span>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h5>
+        <div
+          style="display: flex; align-items: center; gap: 1rem; height: 70px"
+        >
+          <span class="mw-text-muted">Left</span>
+          <div class="mw-divider-vertical"></div>
+          <span class="mw-text-muted">Middle</span>
+          <div class="mw-divider-vertical"></div>
+          <span class="mw-text-muted">Right</span>
+        </div>
       </div>
     </div>
   </div>

package/src/partials/form-elements-container.html

@@ -34,16 +34,6 @@
           placeholder="Large size"
         />
       </label>
-      <!-- X-Large -->
-      <label for="input-xl">
-        <span>Extra Large</span>
-        <input
-          id="input-xl"
-          type="text"
-          class="mw-input mw-input-xl mw-form-element"
-          placeholder="XL size"
-        />
-      </label>
       <!-- Disabled -->
       <label for="input-disabled">
         <span>Disabled</span>
@@ -100,16 +90,6 @@
           <option>Gamma</option>
         </select>
       </label>
-      <!-- X-Large -->
-      <label for="select-xl">
-        <span>Extra Large</span>
-        <select id="select-xl" class="mw-select mw-select-xl">
-          <option value="" disabled selected>XL select</option>
-          <option>Red</option>
-          <option>Green</option>
-          <option>Blue</option>
-        </select>
-      </label>
       <!-- Disabled -->
       <label for="select-default-2">
         <span>Disabled</span>
@@ -187,23 +167,6 @@
         </div>
       </div>
 
-      <!-- XL Disabled -->
-      <div>
-        <h5 class="mw-mb-2">XL Disabled</h5>
-        <div class="mw-checkbox-group mw-checkbox-group">
-          <label class="mw-checkbox mw-checkbox-xl mw-checkbox-disabled">
-            <input type="checkbox" name="cb4" disabled />
-            <div class="mw-checkbox-box"></div>
-            <div class="mw-checkbox-label">Unavailable</div>
-          </label>
-          <label class="mw-checkbox mw-checkbox-xl">
-            <input type="checkbox" name="cb4" />
-            <div class="mw-checkbox-box"></div>
-            <div class="mw-checkbox-label">Available</div>
-          </label>
-        </div>
-      </div>
-
       <!-- Error -->
       <div class="mw-mb-6">
         <h5 class="mw-mb-2">Error</h5>
@@ -283,23 +246,6 @@
         </div>
       </div>
 
-      <!-- XL & Disabled -->
-      <div>
-        <h5 class="mw-mb-2">XL Disabled</h5>
-        <div class="mw-radio-group mw-radio-group">
-          <label class="mw-radio mw-radio-xl mw-radio-disabled">
-            <input type="radio" name="opt4" />
-            <div class="mw-radio-button"></div>
-            <div class="mw-radio-label">Unavailable</div>
-          </label>
-          <label class="mw-radio mw-radio-xl">
-            <input type="radio" name="opt4" />
-            <div class="mw-radio-button"></div>
-            <div class="mw-radio-label">Available</div>
-          </label>
-        </div>
-      </div>
-
       <!-- Error -->
       <div class="mw-mb-6">
         <h5 class="mw-mb-2">Error</h5>
@@ -400,23 +346,6 @@
         </div>
       </label>
     </div>
-
-    <!-- Single: extra large danger -->
-    <div class="mw-my-6">
-      <label>
-        <span>Temperature Threshold</span>
-        <div class="mw-slider-container">
-          <div class="mw-slider-value mw-slider-percent" data-value="40"></div>
-          <input
-            type="range"
-            class="mw-slider mw-slider-danger mw-slider-xl"
-            min="0"
-            max="100"
-            value="40"
-          />
-        </div>
-      </label>
-    </div>
   </div>
 
   <div class="mw-card mw-card-simple">
@@ -455,17 +384,6 @@
         ></textarea>
       </label>
 
-      <!-- X-Large -->
-      <label for="textarea-xl">
-        <span>Extra Large</span>
-        <textarea
-          id="textarea-xl"
-          rows="5"
-          class="mw-textarea mw-textarea-xl"
-          placeholder="XL size... (5 rows)"
-        ></textarea>
-      </label>
-
       <!-- Error -->
       <label for="textarea-error">
         <span>Error</span>

package/src/partials/home-container.html

@@ -20,7 +20,7 @@
       <button
         type="button"
         onclick="location.href = '#documentation'"
-        class="mw-btn mw-btn-outline mw-btn-lg"
+        class="mw-btn mw-btn-secondary mw-btn-lg"
       >
         Documentation
       </button>

package/src/partials/item-lists-container.html

@@ -96,38 +96,38 @@
   <div>
     <h4 class="mw-mb-3">Basic Checkbox List</h4>
     <ul class="mw-item-list-checkbox">
-      <li onclick="toggleCheckbox(this)">
-        <div class="mw-checkbox">
-          <input type="checkbox" id="task-mgmt" />
-          <label for="task-mgmt" class="mw-checkbox-box"></label>
+      <li>
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
           <div class="mw-checkbox-content">
             <h4 class="mw-checkbox-header">📋 Task Management</h4>
             <p class="mw-checkbox-label">
               Organize and track your daily tasks and projects
             </p>
           </div>
-        </div>
+        </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
-        <div class="mw-checkbox">
-          <input type="checkbox" id="analytics" checked />
-          <label for="analytics" class="mw-checkbox-box"></label>
+      <li>
+        <label class="mw-checkbox">
+          <input type="checkbox" checked />
+          <span class="mw-checkbox-box"></span>
           <div class="mw-checkbox-content">
             <h4 class="mw-checkbox-header">📊 Analytics Dashboard</h4>
             <p class="mw-checkbox-label">
               View detailed reports and performance metrics
             </p>
           </div>
-        </div>
+        </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
-        <div class="mw-checkbox">
-          <input type="checkbox" id="simple-option" />
-          <label for="simple-option" class="mw-checkbox-box"></label>
+      <li>
+        <label class="mw-checkbox">
+          <input type="checkbox" />
+          <span class="mw-checkbox-box"></span>
           <div class="mw-checkbox-content">
             <p class="mw-checkbox-label">📧 Email Notifications</p>
           </div>
-        </div>
+        </label>
       </li>
     </ul>
   </div>
@@ -135,28 +135,28 @@
   <div>
     <h4 class="mw-mb-3">Large Checkbox List</h4>
     <ul class="mw-item-list-checkbox mw-item-list-checkbox-large mw-mb-6">
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-lg">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🎯 Project Alpha</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-lg">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🚀 Project Beta</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)" class="mw-selected">
+      <li class="mw-selected">
         <label class="mw-checkbox mw-checkbox-lg">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">⭐ Project Gamma</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-lg">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
@@ -169,28 +169,28 @@
   <div>
     <h4 class="mw-mb-3">Secondary Checkbox List</h4>
     <ul class="mw-item-list-checkbox mw-item-list-checkbox-secondary mw-mb-6">
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-secondary">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">Feature Request #1</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-secondary">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">Feature Request #2</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)" class="mw-selected">
+      <li class="mw-selected">
         <label class="mw-checkbox mw-checkbox-secondary">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">Feature Request #3</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox mw-checkbox-secondary">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
@@ -205,105 +205,105 @@
   <div>
     <h4 class="mw-mb-3">Scrollable Checkbox List</h4>
     <ul class="mw-item-list-checkbox-scroll mw-mb-4">
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🎨 Design System Components</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🛠️ Development Tools</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)" class="mw-selected">
+      <li class="mw-selected">
         <label class="mw-checkbox">
           <input type="checkbox" checked />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">📱 Mobile Responsive Design</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🔐 Authentication System</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">📊 Analytics Integration</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🌐 Multi-language Support</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">⚡ Performance Optimization</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🔄 Real-time Updates</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🎯 A/B Testing Framework</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🚀 Deployment Pipeline</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🔍 Advanced Search Features</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">💾 Data Export Tools</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🔔 Notification Center</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>
           <span class="mw-checkbox-label">🏗️ Modular Architecture</span>
         </label>
       </li>
-      <li onclick="toggleCheckbox(this)">
+      <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
           <span class="mw-checkbox-box"></span>