maverick-wave 4.28.0 → 5.0.0

package/src/partials/dropdown-container.html

@@ -14,7 +14,7 @@
     <h3 class="mw-card-title mw-mb-4">Actions menu</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <h4 class="mw-text-medium mw-mb-2">Default</h4>
         <details class="mw-dropdown">
           <summary class="mw-btn mw-btn-primary">
             Actions <i class="fas fa-chevron-down mw-dropdown-caret"></i>
@@ -39,7 +39,7 @@
       </div>
 
       <div>
-        <h5 class="mw-text-medium mw-mb-2">As a picker</h5>
+        <h4 class="mw-text-medium mw-mb-2">As a picker</h4>
         <details class="mw-dropdown">
           <summary class="mw-btn mw-btn-outline">
             Sort by: Newest

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

@@ -9,7 +9,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Basic & Color Variants</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <h4 class="mw-text-medium mw-mb-2">Default</h4>
       <div class="mw-empty-state">
         <div class="mw-empty-state-icon"><i class="fas fa-inbox"></i></div>
         <p class="mw-empty-state-title">Nothing here yet</p>
@@ -21,7 +21,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Warning</h5>
+      <h4 class="mw-text-medium mw-mb-2">Warning</h4>
       <div class="mw-empty-state mw-empty-state-warning mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-exclamation-triangle"></i>
@@ -38,7 +38,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">More Variants</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Success</h5>
+      <h4 class="mw-text-medium mw-mb-2">Success</h4>
       <div class="mw-empty-state mw-empty-state-success mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-check-circle"></i>
@@ -51,7 +51,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Primary (small)</h5>
+      <h4 class="mw-text-medium mw-mb-2">Primary (small)</h4>
       <div class="mw-empty-state mw-empty-state-primary mw-empty-state-sm">
         <div class="mw-empty-state-icon"><i class="fas fa-search"></i></div>
         <p class="mw-empty-state-title">No items match</p>
@@ -63,7 +63,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+      <h4 class="mw-text-medium mw-mb-2">Danger</h4>
       <div class="mw-empty-state mw-empty-state-danger mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-times-circle"></i>

package/src/partials/footer-container.html

@@ -2,10 +2,9 @@
   <div class="mw-footer-column">
     <h3>The framework</h3>
     <p>
-      A lightweight, modern CSS framework for building responsive websites with
-      elegance and speed. While AI tools helped kickstart the development of
-      some components and provided initial structure, approximately 80% of the
-      codebase required manual refinement and customization.
+      A CSS framework for responsive sites - grid, components, forms, dark mode.
+      AI tools drafted parts of it; most of what is in here was reworked by hand
+      afterwards.
     </p>
   </div>
 
@@ -51,8 +50,7 @@
 
   <div class="mw-footer-column">
     <h3>Contact Me</h3>
-    <p>Have questions or feedback? I'd love to hear from you!</p>
-    <p>Please use the social links below</p>
+    <p>Questions or feedback? Every link below reaches me.</p>
   </div>
 </div>
 
@@ -60,8 +58,8 @@
   <a
     href="https://github.com/m1well"
     target="_blank"
-    type="button"
     data-tooltip="GitHub"
+    aria-label="GitHub"
   >
     <i class="fab fa-github"></i>
   </a>
@@ -69,6 +67,7 @@
     href="https://www.linkedin.com/in/michael-wellner"
     target="_blank"
     data-tooltip="LinkedIn"
+    aria-label="LinkedIn"
   >
     <i class="fab fa-linkedin"></i>
   </a>
@@ -76,27 +75,31 @@
     href="https://www.xing.com/profile/Michael_Wellner5/"
     target="_blank"
     data-tooltip="Xing"
+    aria-label="Xing"
   >
     <i class="fab fa-xing"></i>
   </a>
-  <a href="https://dev.to/m1well" target="_blank" data-tooltip="dev.to">
+  <a
+    href="https://dev.to/m1well"
+    target="_blank"
+    data-tooltip="dev.to"
+    aria-label="dev.to"
+  >
     <i class="fab fa-dev"></i>
   </a>
-  <a href="mailto:info@m1well.com" target="_blank" data-tooltip="Mail">
+  <a
+    href="mailto:info@m1well.com"
+    target="_blank"
+    data-tooltip="Mail"
+    aria-label="Mail"
+  >
     <i class="fa fa-envelope"></i>
   </a>
 </div>
 
 <p class="mw-disclaimer">
-  MaverickWave is a lightweight, modern CSS framework for building responsive
-  websites with elegance and speed. It embodies the spirit of innovation and
-  fluidity, just like a maverick wave that charts its own course across the
-  ocean. The framework was named to reflect its bold approach to web design -
-  breaking free from conventional constraints while maintaining a natural flow
-  that adapts seamlessly to any environment. Like the powerful yet graceful
-  movement of waves, MaverickWave combines strength and flexibility, empowering
-  developers to create distinctive digital experiences that stand out in the
-  vast sea of the web.
+  Named after the one wave that breaks off the reef instead of with the set. MIT
+  licensed.
 </p>
 
 <p class="mw-copyright">

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

@@ -123,7 +123,7 @@
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default vertical -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-checkbox-group">
           <label class="mw-checkbox">
             <input type="checkbox" name="cb1" />
@@ -140,7 +140,7 @@
 
       <!-- Inline small -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-checkbox-group mw-checkbox-group-inline">
           <label class="mw-checkbox mw-checkbox-sm">
             <input type="checkbox" name="cb2" />
@@ -157,8 +157,8 @@
 
       <!-- Large & colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
-        <div class="mw-checkbox-group mw-checkbox-group">
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
+        <div class="mw-checkbox-group">
           <label class="mw-checkbox mw-checkbox-lg mw-checkbox-success">
             <input type="checkbox" name="cb3" />
             <div class="mw-checkbox-box"></div>
@@ -174,7 +174,7 @@
 
       <!-- Error -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Error</h5>
+        <h4 class="mw-mb-2">Error</h4>
         <div class="mw-checkbox-group mw-form-element-error">
           <label class="mw-checkbox">
             <input type="checkbox" name="cb1" />
@@ -197,7 +197,7 @@
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default (vertical) -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-radio-group">
           <label class="mw-radio">
             <input type="radio" name="opt1" />
@@ -219,7 +219,7 @@
 
       <!-- Small Inline -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-radio-group mw-radio-group-inline">
           <label class="mw-radio mw-radio-sm">
             <input type="radio" name="opt2" />
@@ -236,8 +236,8 @@
 
       <!-- Large & Colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
-        <div class="mw-radio-group mw-radio-group">
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
+        <div class="mw-radio-group">
           <label class="mw-radio mw-radio-lg mw-radio-success">
             <input type="radio" name="opt3" />
             <div class="mw-radio-button"></div>
@@ -253,7 +253,7 @@
 
       <!-- Error -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Error</h5>
+        <h4 class="mw-mb-2">Error</h4>
         <div class="mw-radio-group mw-form-element-error">
           <label class="mw-radio">
             <input type="radio" name="opt1" />
@@ -541,7 +541,7 @@ Imported from the previous application.</textarea
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle">
             <input type="checkbox" />
@@ -558,7 +558,7 @@ Imported from the previous application.</textarea
 
       <!-- Small & Inline -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-toggle-group mw-toggle-group-inline">
           <label class="mw-toggle mw-toggle-sm">
             <input type="checkbox" checked />
@@ -580,7 +580,7 @@ Imported from the previous application.</textarea
 
       <!-- Large & Colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle mw-toggle-lg mw-toggle-success">
             <input type="checkbox" checked />
@@ -597,7 +597,7 @@ Imported from the previous application.</textarea
 
       <!-- Disabled -->
       <div>
-        <h5 class="mw-mb-2">Disabled</h5>
+        <h4 class="mw-mb-2">Disabled</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle mw-toggle-disabled">
             <input type="checkbox" disabled />

package/src/partials/gallery-container.html

@@ -15,28 +15,36 @@
     <!-- Track -->
     <div class="mw-gallery-track">
       <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
-        <img src="images/gallery-mountain.svg" alt="Beautiful Mountain" />
+        <img
+          src="images/gallery-mountain.svg"
+          alt="Beautiful Mountain"
+          loading="lazy"
+        />
       </div>
       <div class="mw-gallery-slide" data-desc="Peaceful Lake">
-        <img src="images/gallery-lake.svg" alt="Peaceful Lake" />
+        <img src="images/gallery-lake.svg" alt="Peaceful Lake" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="City Vibes">
-        <img src="images/gallery-city.svg" alt="City Vibes" />
+        <img src="images/gallery-city.svg" alt="City Vibes" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Golden Forest">
-        <img src="images/gallery-forest.svg" alt="Golden Forest" />
+        <img
+          src="images/gallery-forest.svg"
+          alt="Golden Forest"
+          loading="lazy"
+        />
       </div>
       <div class="mw-gallery-slide" data-desc="Desert View">
-        <img src="images/gallery-desert.svg" alt="Desert View" />
+        <img src="images/gallery-desert.svg" alt="Desert View" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Ocean Breeze">
-        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" />
+        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Old Town">
-        <img src="images/gallery-oldtown.svg" alt="Old Town" />
+        <img src="images/gallery-oldtown.svg" alt="Old Town" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Snowy Hills">
-        <img src="images/gallery-snow.svg" alt="Snowy Hills" />
+        <img src="images/gallery-snow.svg" alt="Snowy Hills" loading="lazy" />
       </div>
     </div>
 

package/src/partials/get-started-container.html

@@ -323,7 +323,7 @@ import './assets/maverick-wave.min.css';</code></pre>
   <code>@font-face</code> and then override the CSS font variable.
 </p>
 <div class="mw-card mw-card-simple">
-  <h5 class="mw-mb-2">1. Load the Font</h5>
+  <h4 class="mw-mb-2">1. Load the Font</h4>
   <pre class="mw-code-block"><code>/* your-custom-styles.css */
 @font-face {
   font-family: 'Your Custom Font';
@@ -344,7 +344,7 @@ import './assets/maverick-wave.min.css';</code></pre>
 }
 </code></pre>
 
-  <h5 class="mw-mt-4 mw-mb-2">2. Apply the Font</h5>
+  <h4 class="mw-mt-4 mw-mb-2">2. Apply the Font</h4>
   <p>
     <strong>CSS Variable Method:</strong>
   </p>
@@ -358,13 +358,9 @@ import './assets/maverick-wave.min.css';</code></pre>
 </div>
 
 <div class="mw-d-flex mw-flex-wrap mw-gap-4 mw-justify-center mw-mt-6">
-  <button
-    type="button"
-    onclick="location.href = '#documentation'"
-    class="mw-btn mw-btn-primary"
-  >
+  <a href="#documentation" class="mw-btn mw-btn-primary">
     Explore Documentation
-  </button>
+  </a>
   <button
     type="button"
     onclick="

package/src/partials/header-container.html

@@ -1,11 +1,11 @@
 <div class="mw-logo">
-  <button type="button" onclick="location.href = '#home'">
+  <a href="#home">
     <img src="header-logo.svg" alt="MaverickWave Logo" />
-  </button>
+  </a>
 </div>
 
 <div class="mw-header-actions">
-  <nav class="mw-navbar mw-navbar-medium">
+  <nav class="mw-navbar mw-navbar-medium" id="mw-main-nav">
     <ul class="mw-navbar-list">
       <li class="mw-navbar-item">
         <a href="#get-started" class="mw-navbar-link">Get Started</a>
@@ -42,12 +42,23 @@
   </button>
 
   <!-- Login Button -->
-  <button class="mw-login-btn" id="login-button">
+  <button
+    type="button"
+    class="mw-login-btn"
+    id="login-button"
+    aria-label="Log in"
+  >
     <i class="fas fa-lock"></i>
   </button>
 
   <!-- Burger Menu Button -->
-  <div class="mw-menu-btn">
-    <div class="mw-menu-btn-burger"></div>
-  </div>
+  <button
+    type="button"
+    class="mw-menu-btn"
+    aria-label="Menu"
+    aria-expanded="false"
+    aria-controls="mw-main-nav"
+  >
+    <span class="mw-menu-btn-burger"></span>
+  </button>
 </div>

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