maverick-wave 4.27.0 → 5.0.0

package/src/partials/home-container.html

@@ -1,34 +1,24 @@
 <div class="mw-hero">
   <div class="mw-home mw-home-content-fade">
     <div class="mw-home-text">
-      <span class="version-corner">v{{VERSION}}</span>
+      <span class="mw-hero-badge version-corner">
+        <span class="mw-hero-badge-dot"></span>
+        v{{VERSION}}
+      </span>
       <h1>Maverick<span class="mw-text-primary">Wave</span></h1>
       <p>
-        Build stunning, responsive websites effortlessly with a modern,
-        lightweight CSS framework crafted for speed, style, and flexibility.
-      </p>
-      <p>
-        Effortless dark mode, mobile-first layouts and accessibility at its
-        core. The same foundation carries a portfolio, a corporate site and a
-        full e-commerce platform.
+        A CSS framework in two files. Grid, 48 components, dark mode - no build
+        step, no dependencies.
       </p>
     </div>
 
     <div class="mw-d-flex mw-gap-8 mw-justify-center">
-      <button
-        type="button"
-        onclick="location.href = '#get-started'"
-        class="mw-btn mw-btn-primary mw-btn-lg"
-      >
+      <a href="#get-started" class="mw-btn mw-btn-primary mw-btn-lg">
         Get Started
-      </button>
-      <button
-        type="button"
-        onclick="location.href = '#documentation'"
-        class="mw-btn mw-btn-secondary mw-btn-lg"
-      >
+      </a>
+      <a href="#documentation" class="mw-btn mw-btn-outline mw-btn-lg">
         Documentation
-      </button>
+      </a>
     </div>
   </div>
 </div>

package/src/partials/input-group-container.html

@@ -107,7 +107,11 @@
             class="mw-input"
             placeholder="Keyword..."
           />
-          <button type="button" class="mw-btn mw-btn-primary">
+          <button
+            type="button"
+            class="mw-btn mw-btn-primary"
+            aria-label="Search"
+          >
             <i class="fas fa-search"></i>
           </button>
         </div>
@@ -130,6 +134,7 @@
             onclick="
               navigator.clipboard?.writeText('https://maverick-wave.m1well.com')
             "
+            aria-label="Copy link"
           >
             <i class="fas fa-copy"></i>
           </button>
@@ -177,7 +182,11 @@
             class="mw-input"
             placeholder="Type a message..."
           />
-          <button type="button" class="mw-btn mw-btn-primary">
+          <button
+            type="button"
+            class="mw-btn mw-btn-primary"
+            aria-label="Send message"
+          >
             <i class="fas fa-paper-plane"></i>
           </button>
         </div>

package/src/partials/kbd-container.html

@@ -26,7 +26,7 @@
         >.
       </p>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Held down</h5>
+        <h4 class="mw-text-medium mw-mb-2">Held down</h4>
         <p class="mw-mb-0">
           <kbd class="mw-kbd-pressed">Space</kbd> shown mid-press - the raised
           edge drops and the key sits 1px lower, for a hint that demonstrates

package/src/partials/login-container.html

@@ -8,7 +8,11 @@
 <div class="mw-mb-4">
   <div class="mw-login mw-my-8">
     <div class="mw-login-logo">
-      <img src="https://m1well.com/images/header_logo.svg" alt="Your Logo" />
+      <img
+        src="https://m1well.com/images/header_logo.svg"
+        alt="Your Logo"
+        loading="lazy"
+      />
     </div>
     <div class="mw-login-message">
       This is an internal area that can only be accessed with a valid account.

package/src/partials/media-container.html

@@ -9,7 +9,7 @@
 
 <div class="mw-grid-2 mw-gap-6">
   <div>
-    <h5 class="mw-text-medium mw-mb-2">Audio with caption</h5>
+    <h4 class="mw-text-medium mw-mb-2">Audio with caption</h4>
     <div class="mw-card mw-card-simple">
       <div class="mw-media">
         <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
@@ -19,7 +19,7 @@
   </div>
 
   <div>
-    <h5 class="mw-text-medium mw-mb-2">Bare, without a card</h5>
+    <h4 class="mw-text-medium mw-mb-2">Bare, without a card</h4>
     <div class="mw-media">
       <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
     </div>

package/src/partials/modals-container.html

@@ -27,8 +27,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 data-mw-modal="modal-confirm" class="mw-btn mw-btn-secondary">
+    Open Confirmation (&lt;dialog&gt;)
   </button>
 </div>
 
@@ -225,34 +225,24 @@
 </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>
-    </div>
-    <div class="mw-modal-footer">
-      <p class="mw-actions-note">This action cannot be undone.</p>
-      <button
-        onclick="closeModal('modal-confirm')"
-        class="mw-btn mw-btn-outline"
-      >
-        Cancel
-      </button>
-      <button
-        onclick="closeModal('modal-confirm')"
-        class="mw-btn mw-btn-danger"
-      >
-        Delete
-      </button>
-    </div>
+<!-- Same classes, a <dialog> instead of a div: Escape, the focus trap, the
+     inert page behind it and the scroll lock all come from the element. The
+     close buttons need no onclick - the framework script closes the dialog
+     they sit in - and closedby="any" is what dismisses it on a backdrop
+     click, so there is no mw-modal-backdrop either. -->
+<dialog id="modal-confirm" class="mw-modal mw-modal-sm" closedby="any">
+  <div class="mw-modal-header">
+    <h4 class="mw-modal-title">Delete Item</h4>
+    <button class="mw-modal-close" aria-label="Close">&#120299;</button>
   </div>
-  <div class="mw-modal-backdrop" onclick="closeModal('modal-confirm')"></div>
-</div>
+  <div class="mw-modal-body">
+    <p class="mw-text-center">
+      <strong>Are you sure you want to delete this item?</strong>
+    </p>
+  </div>
+  <div class="mw-modal-footer">
+    <p class="mw-actions-note">This action cannot be undone.</p>
+    <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
+    <button class="mw-modal-close mw-btn mw-btn-danger">Delete</button>
+  </div>
+</dialog>

package/src/partials/pricing-container.html

@@ -20,7 +20,7 @@
 <div class="mw-grid-2-lg">
   <div>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Plain price</h5>
+      <h4 class="mw-text-medium mw-mb-2">Plain price</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-amount</code> plus <code>mw-price-currency</code>. The
         unit is a word next to the figure, not part of it - it stays at reading
@@ -33,7 +33,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">With a discount tag</h5>
+      <h4 class="mw-text-medium mw-mb-2">With a discount tag</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         Any <code>mw-tag</code> or <code>mw-badge</code> placed directly in the
         row is centred against the digits instead of hung off their baseline.
@@ -46,7 +46,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Old price struck through</h5>
+      <h4 class="mw-text-medium mw-mb-2">Old price struck through</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-original</code> is muted <em>and</em> struck. Muted alone
         reads as a footnote; the line is what says this is no longer the price.
@@ -65,7 +65,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Both prices on one line</h5>
+      <h4 class="mw-text-medium mw-mb-2">Both prices on one line</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-inline</code> puts the old price in front of the new one
         instead of above it. For a wide card or a table row that has the width
@@ -83,7 +83,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Not a figure</h5>
+      <h4 class="mw-text-medium mw-mb-2">Not a figure</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-word</code> for "on request" or "free" - still bold, so
         it holds the same slot in a row of cards, but set well below the size a
@@ -101,7 +101,7 @@
 
   <div>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Decimals</h5>
+      <h4 class="mw-text-medium mw-mb-2">Decimals</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-fraction</code> sits inside the amount, one step down and
         on the baseline. Cents raised to the cap height are a discounter's idiom
@@ -121,7 +121,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Period and note</h5>
+      <h4 class="mw-text-medium mw-mb-2">Period and note</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-period</code> for what the price is per,
         <code>mw-price-note</code> for the line under it. The note is a sibling
@@ -136,7 +136,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Sizes</h5>
+      <h4 class="mw-text-medium mw-mb-2">Sizes</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-sm</code>, default and <code>mw-price-lg</code>. Only
         <code>--mw-price-size</code> changes - the struck price, the cents and
@@ -166,7 +166,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Centred and plain</h5>
+      <h4 class="mw-text-medium mw-mb-2">Centred and plain</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-5">
         <code>mw-price-center</code> for a centred card,
         <code>mw-price-plain</code> for body colour instead of the brand - a

package/src/partials/skeleton-container.html

@@ -10,7 +10,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Text Lines</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-3">Article Placeholder</h5>
+      <h4 class="mw-text-medium mw-mb-3">Article Placeholder</h4>
       <div class="mw-skeleton-card">
         <span class="mw-skeleton mw-skeleton-title"></span>
         <span class="mw-skeleton mw-skeleton-text"></span>
@@ -18,7 +18,7 @@
         <span class="mw-skeleton mw-skeleton-text"></span>
       </div>
 
-      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Short Paragraph</h5>
+      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Short Paragraph</h4>
       <div class="mw-skeleton-card">
         <span class="mw-skeleton mw-skeleton-text"></span>
         <span class="mw-skeleton mw-skeleton-text"></span>
@@ -30,7 +30,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Avatar & Content</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-3">User Card</h5>
+      <h4 class="mw-text-medium mw-mb-3">User Card</h4>
       <div class="mw-skeleton-card">
         <div class="mw-skeleton-row">
           <span class="mw-skeleton mw-skeleton-circle"></span>
@@ -49,7 +49,7 @@
         <span class="mw-skeleton mw-skeleton-text"></span>
       </div>
 
-      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Comment Row</h5>
+      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Comment Row</h4>
       <div class="mw-skeleton-card">
         <div class="mw-skeleton-row">
           <span class="mw-skeleton mw-skeleton-circle"></span>
@@ -69,7 +69,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Image & Shapes</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-3">Image Card</h5>
+      <h4 class="mw-text-medium mw-mb-3">Image Card</h4>
       <div class="mw-skeleton-card">
         <span class="mw-skeleton mw-skeleton-rect"></span>
         <span class="mw-skeleton mw-skeleton-title"></span>
@@ -77,7 +77,7 @@
         <span class="mw-skeleton mw-skeleton-text"></span>
       </div>
 
-      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Small Banner</h5>
+      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Small Banner</h4>
       <div class="mw-skeleton-card">
         <span class="mw-skeleton mw-skeleton-rect mw-skeleton-rect-sm"></span>
         <span class="mw-skeleton mw-skeleton-text" style="width: 50%"></span>

package/src/partials/stepper-container.html

@@ -9,7 +9,7 @@
   <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-4">In Progress (step 2 active)</h5>
+      <h4 class="mw-text-medium mw-mb-4">In Progress (step 2 active)</h4>
       <div class="mw-stepper mw-mb-5">
         <div class="mw-stepper-step">
           <div class="mw-stepper-indicator mw-done">
@@ -34,7 +34,7 @@
         </div>
       </div>
 
-      <h5 class="mw-text-medium mw-mb-4">Completed</h5>
+      <h4 class="mw-text-medium mw-mb-4">Completed</h4>
       <div class="mw-stepper">
         <div class="mw-stepper-step">
           <div class="mw-stepper-indicator mw-done">

package/src/partials/tables-container.html

@@ -30,21 +30,21 @@
         <tbody>
           <tr>
             <td>1</td>
-            <td>John Doe</td>
+            <td>Mara Kessler</td>
             <td>Developer</td>
             <td>New York</td>
             <td class="mw-text-currency">1,204.50</td>
           </tr>
           <tr>
             <td>2</td>
-            <td>Jane Smith</td>
+            <td>Tom Aldridge</td>
             <td>Designer</td>
             <td>London</td>
             <td class="mw-text-currency">87.00</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Bob Johnson</td>
+            <td>Jonas Reuter</td>
             <td>Manager</td>
             <td>Berlin</td>
             <td class="mw-text-currency">15,930.25</td>
@@ -82,19 +82,19 @@
       <tbody>
         <tr>
           <td>1</td>
-          <td>John Doe</td>
+          <td>Mara Kessler</td>
           <td>Developer</td>
           <td>New York</td>
         </tr>
         <tr>
           <td>2</td>
-          <td>Jane Smith</td>
+          <td>Tom Aldridge</td>
           <td>Designer</td>
           <td>London</td>
         </tr>
         <tr>
           <td>3</td>
-          <td>Bob Johnson</td>
+          <td>Jonas Reuter</td>
           <td>Manager</td>
           <td>Berlin</td>
         </tr>
@@ -129,19 +129,19 @@
         <tbody>
           <tr>
             <td>1</td>
-            <td>John Doe</td>
+            <td>Mara Kessler</td>
             <td>Developer</td>
             <td class="mw-text-currency">12,400</td>
           </tr>
           <tr>
             <td>2</td>
-            <td>Jane Smith</td>
+            <td>Tom Aldridge</td>
             <td>Designer</td>
             <td class="mw-text-currency">9,800</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Bob Johnson</td>
+            <td>Jonas Reuter</td>
             <td>Manager</td>
             <td class="mw-text-currency">21,050</td>
           </tr>
@@ -305,19 +305,19 @@
         <tbody>
           <tr>
             <td data-label="#">1</td>
-            <td data-label="Name">John Doe</td>
+            <td data-label="Name">Mara Kessler</td>
             <td data-label="Position">Developer</td>
             <td data-label="Location">New York</td>
           </tr>
           <tr>
             <td data-label="#">2</td>
-            <td data-label="Name">Jane Smith</td>
+            <td data-label="Name">Tom Aldridge</td>
             <td data-label="Position">Designer</td>
             <td data-label="Location">London</td>
           </tr>
           <tr>
             <td data-label="#">3</td>
-            <td data-label="Name">Bob Johnson</td>
+            <td data-label="Name">Jonas Reuter</td>
             <td data-label="Position">Manager</td>
             <td data-label="Location">Berlin</td>
           </tr>

package/src/partials/tabs-container.html

@@ -28,16 +28,13 @@
     <div class="mw-tabs-panel mw-active" id="tab1">
       <div class="mw-card mw-card-simple">
         <h4>Key Features</h4>
-        <p>
-          MaverickWave CSS framework provides a comprehensive set of features to
-          make your web development faster and more efficient:
-        </p>
+        <p>What you get once the two files are on the page:</p>
         <ul>
-          <li>Responsive grid system with flexible layouts</li>
-          <li>Customizable components with consistent design language</li>
-          <li>Dark and light theme support with smooth transitions</li>
-          <li>Utility classes for rapid development and prototyping</li>
-          <li>Modern design aesthetic with attention to detail</li>
+          <li>A grid that collapses to one column on a phone</li>
+          <li>48 components, all on the same tokens</li>
+          <li>Dark and light theme, switched by one class on the body</li>
+          <li>Utility classes for spacing, flex and display</li>
+          <li>Form controls that share one height scale</li>
         </ul>
       </div>
     </div>
@@ -64,18 +61,15 @@
         <div class="mw-mb-4">
           <h5>Alex T. - Frontend Developer</h5>
           <p>
-            "MaverickWave CSS framework has simplified my workflow tremendously.
-            The components are well-designed and the utility classes save me
-            hours of custom CSS writing. The documentation is clear and
-            comprehensive."
+            "Dropped it into a side project on a Sunday. The grid and the form
+            controls were the parts I did not have to touch afterwards."
           </p>
         </div>
         <div class="mw-mb-4">
           <h5>Jamie L. - UX Designer</h5>
           <p>
-            "I love how easy it is to customize the framework to match my brand.
-            The dark/light theme toggle was a breeze to implement and my clients
-            are impressed with the polished look!"
+            "One variable for the brand colour and the whole palette followed.
+            The dark theme needed no work from my side at all."
           </p>
         </div>
       </div>
@@ -83,11 +77,11 @@
     <div class="mw-tabs-panel" id="tab4">
       <div class="mw-card mw-card-simple">
         <h4>Support Options</h4>
-        <p>I offer multiple support channels for MaverickWave:</p>
+        <p>Where to look when something does not work:</p>
         <ul>
-          <li>Comprehensive documentation</li>
-          <li>Regular updates with new features and improvements</li>
-          <li>Dedicated support for power users</li>
+          <li>This page, which is the documentation</li>
+          <li>Issues and discussions on GitHub</li>
+          <li>A changelog for every release</li>
         </ul>
       </div>
     </div>
@@ -216,13 +210,9 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
           falls back to a system stack.
         </p>
         <p class="mw-mt-4">
-          <button
-            type="button"
-            onclick="location.href = '#get-started'"
-            class="mw-link"
-          >
+          <a href="#get-started" class="mw-link">
             Refer to the "Get Started" section
-          </button>
+          </a>
           for more detailed examples.
         </p>
       </div>
@@ -233,7 +223,7 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
         <p>When working with MaverickWave:</p>
         <ul>
           <li>Use semantic HTML elements for better accessibility</li>
-          <li>Leverage utility classes for quick adjustments</li>
+          <li>Reach for the utility classes before writing custom CSS</li>
           <li>Customize variables to match your brand identity</li>
           <li>Test thoroughly across different browsers and devices</li>
           <li>Consider performance by only including components you need</li>