maverick-wave 4.28.0 → 5.0.0

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>

package/src/partials/tags-container.html

@@ -11,7 +11,7 @@
     <h3 class="mw-card-title mw-mb-4">Status & Types</h3>
     <div class="mw-card mw-card-simple">
       <!-- Basic -->
-      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <h4 class="mw-text-medium mw-mb-2">Default</h4>
       <div class="mw-tags mw-mb-4">
         <span class="mw-tags-item">Frontend</span>
         <span class="mw-tags-item">Backend</span>
@@ -19,7 +19,7 @@
       </div>
 
       <!-- Primary (Main Tech) -->
-      <h5 class="mw-text-medium mw-mb-2">Primary</h5>
+      <h4 class="mw-text-medium mw-mb-2">Primary</h4>
       <div class="mw-tags mw-tags-primary mw-mb-4">
         <span class="mw-tags-item">Angular</span>
         <span class="mw-tags-item">Spring Boot</span>
@@ -27,7 +27,7 @@
       </div>
 
       <!-- Success (Status) -->
-      <h5 class="mw-text-medium mw-mb-2">Success</h5>
+      <h4 class="mw-text-medium mw-mb-2">Success</h4>
       <div class="mw-tags mw-tags-success mw-mb-4">
         <span class="mw-tags-item">
           <i class="fas fa-check mw-tags-icon"></i>Completed
@@ -37,7 +37,7 @@
       </div>
 
       <!-- Info (Metadata) -->
-      <h5 class="mw-text-medium mw-mb-2">Info</h5>
+      <h4 class="mw-text-medium mw-mb-2">Info</h4>
       <div class="mw-tags mw-tags-info mw-mb-4">
         <span class="mw-tags-item">v2.4.0</span>
         <span class="mw-tags-item">
@@ -47,7 +47,7 @@
       </div>
 
       <!-- Secondary (Tools) -->
-      <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
+      <h4 class="mw-text-medium mw-mb-2">Secondary</h4>
       <div class="mw-tags mw-tags-secondary mw-mb-4">
         <span class="mw-tags-item">Docker</span>
         <span class="mw-tags-item">Kubernetes</span>
@@ -55,7 +55,7 @@
       </div>
 
       <!-- Warning (Pending) -->
-      <h5 class="mw-text-medium mw-mb-2">Warning</h5>
+      <h4 class="mw-text-medium mw-mb-2">Warning</h4>
       <div class="mw-tags mw-tags-warning mw-mb-4">
         <span class="mw-tags-item">
           <i class="fas fa-clock mw-tags-icon"></i>Pending
@@ -64,7 +64,7 @@
       </div>
 
       <!-- Danger (Failed) -->
-      <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+      <h4 class="mw-text-medium mw-mb-2">Danger</h4>
       <div class="mw-tags mw-tags-danger mw-mb-4">
         <span class="mw-tags-item">
           <i class="fas fa-xmark mw-tags-icon"></i>Failed
@@ -73,7 +73,7 @@
       </div>
 
       <!-- Muted (Neutral) -->
-      <h5 class="mw-text-medium mw-mb-2">Muted</h5>
+      <h4 class="mw-text-medium mw-mb-2">Muted</h4>
       <div class="mw-tags mw-tags-muted">
         <span class="mw-tags-item">Draft</span>
         <span class="mw-tags-item">Archived</span>
@@ -86,7 +86,7 @@
     <h3 class="mw-card-title mw-mb-4">Sizes & Formatting</h3>
     <div class="mw-card mw-card-simple">
       <!-- Default -->
-      <h5 class="mw-text-medium mw-mb-2">Default Size</h5>
+      <h4 class="mw-text-medium mw-mb-2">Default Size</h4>
       <div class="mw-tags mw-mb-4">
         <span class="mw-tags-item">Typescript</span>
         <span class="mw-tags-item">
@@ -97,6 +97,7 @@
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove filter: active"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -105,14 +106,14 @@
       </div>
 
       <!-- Large (Categories) -->
-      <h5 class="mw-text-medium mw-mb-2">Large (Categories)</h5>
+      <h4 class="mw-text-medium mw-mb-2">Large (Categories)</h4>
       <div class="mw-tags mw-tags-lg mw-mb-4">
         <span class="mw-tags-item">Web Development</span>
         <span class="mw-tags-item">Design System</span>
       </div>
 
       <!-- With Details -->
-      <h5 class="mw-text-medium mw-mb-2">With Details</h5>
+      <h4 class="mw-text-medium mw-mb-2">With Details</h4>
       <div class="mw-tags">
         <span class="mw-tags-item">
           <i class="fab fa-npm mw-tags-icon"></i>
@@ -132,13 +133,14 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Interactive Tags</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Removable Input (Primary)</h5>
+      <h4 class="mw-text-medium mw-mb-2">Removable Input (Primary)</h4>
       <div class="mw-tags mw-tags-primary mw-mb-4">
         <span class="mw-tags-item mw-tags-removable">
           React
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove React"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -149,6 +151,7 @@
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove Vue.js"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -156,13 +159,14 @@
         </span>
       </div>
 
-      <h5 class="mw-text-medium mw-mb-2">Removable Status (Success)</h5>
+      <h4 class="mw-text-medium mw-mb-2">Removable Status (Success)</h4>
       <div class="mw-tags mw-tags-success mw-mb-4">
         <span class="mw-tags-item mw-tags-removable">
           <i class="fas fa-user-check mw-tags-icon"></i>Online
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove Online"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -173,6 +177,7 @@
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove Available"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -180,13 +185,14 @@
         </span>
       </div>
 
-      <h5 class="mw-text-medium mw-mb-2">Large Removable</h5>
+      <h4 class="mw-text-medium mw-mb-2">Large Removable</h4>
       <div class="mw-tags mw-tags-lg mw-tags-info">
         <span class="mw-tags-item mw-tags-removable">
           Filter: Architecture
           <button
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            aria-label="Remove Filter: Architecture"
             onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
@@ -206,7 +212,7 @@
         <strong>mw-tags</strong> container is needed.
       </p>
 
-      <h5 class="mw-text-medium mw-mb-2">Variants</h5>
+      <h4 class="mw-text-medium mw-mb-2">Variants</h4>
       <div class="mw-d-flex mw-flex-wrap mw-gap-2 mw-mb-4">
         <span class="mw-tag mw-tag-primary">Primary</span>
         <span class="mw-tag mw-tag-secondary">Secondary</span>
@@ -218,7 +224,7 @@
         <span class="mw-tag mw-tag-neutral">XRechnung</span>
       </div>
 
-      <h5 class="mw-text-medium mw-mb-2">Neutral vs. Muted</h5>
+      <h4 class="mw-text-medium mw-mb-2">Neutral vs. Muted</h4>
       <p class="mw-text-muted mw-text-sm mw-mb-3">
         <strong>mw-tag-neutral</strong> is a plain identifier - a customer
         number, a document type. <strong>mw-tag-muted</strong> means the label
@@ -232,7 +238,7 @@
         <span class="mw-tag mw-tag-muted">No e-invoice</span>
       </div>
 
-      <h5 class="mw-text-medium mw-mb-2">Large</h5>
+      <h4 class="mw-text-medium mw-mb-2">Large</h4>
       <div class="mw-d-flex mw-flex-wrap mw-gap-2">
         <span class="mw-tag mw-tag-success mw-tag-lg">Paid</span>
         <span class="mw-tag mw-tag-muted mw-tag-lg">Draft</span>

package/src/partials/techstack-bucket-container.html

@@ -14,6 +14,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/6/67/Angular_gradient_logo.png"
           alt="Angular"
           class="mw-techstack-logo"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">Angular</span>
@@ -25,6 +26,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/9/96/Sass_Logo_Color.svg"
           alt="Sass"
           class="mw-techstack-logo"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">SCSS</span>
@@ -40,6 +42,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg"
           alt="TypeScript"
           class="mw-techstack-logo"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">TypeScript</span>
@@ -61,6 +64,7 @@
           src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
           class="mw-techstack-logo"
           alt="Git"
+          loading="lazy"
         />
       </a>
       <a
@@ -72,6 +76,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg"
           class="mw-techstack-logo"
           alt="VS Code"
+          loading="lazy"
         />
       </a>
       <a
@@ -83,6 +88,7 @@
           src="https://www.vectorlogo.zone/logos/docker/docker-icon.svg"
           class="mw-techstack-logo"
           alt="Docker"
+          loading="lazy"
         />
       </a>
       <a
@@ -94,6 +100,7 @@
           src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg"
           class="mw-techstack-logo"
           alt="Figma"
+          loading="lazy"
         />
       </a>
       <a
@@ -105,6 +112,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/d/db/Npm-logo.svg"
           class="mw-techstack-logo"
           alt="NPM"
+          loading="lazy"
         />
       </a>
     </div>
@@ -118,6 +126,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
           class="mw-techstack-logo"
           alt="React"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">React</span>
@@ -128,6 +137,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg"
           class="mw-techstack-logo"
           alt="Vue"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">Vue.js</span>
@@ -138,6 +148,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind_CSS_Logo.svg"
           class="mw-techstack-logo"
           alt="Tailwind"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">Tailwind</span>
@@ -154,6 +165,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Rust_programming_language_black_logo.svg"
           class="mw-techstack-logo"
           alt="Rust"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">Rust</span>
@@ -164,6 +176,7 @@
           src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg"
           class="mw-techstack-logo"
           alt="Python"
+          loading="lazy"
         />
         <div class="mw-techstack-info">
           <span class="mw-techstack-name">Python</span>

package/src/partials/tiles-container.html

@@ -69,7 +69,11 @@
     <div class="mw-tiles mw-tiles-2col">
       <div class="mw-tile">
         <div class="mw-tile-img">
-          <img src="images/tile-ecommerce.svg" alt="E-commerce platform" />
+          <img
+            src="images/tile-ecommerce.svg"
+            alt="E-commerce platform"
+            loading="lazy"
+          />
         </div>
         <h3 class="mw-tile-header">E-commerce Platform</h3>
         <div class="mw-tile-body">
@@ -81,7 +85,11 @@
 
       <div class="mw-tile">
         <div class="mw-tile-img">
-          <img src="images/tile-marketing.svg" alt="Marketing automation" />
+          <img
+            src="images/tile-marketing.svg"
+            alt="Marketing automation"
+            loading="lazy"
+          />
         </div>
         <h3 class="mw-tile-header">Marketing Automation</h3>
         <div class="mw-tile-body">
@@ -175,7 +183,11 @@
     <div class="mw-tiles">
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img src="images/tile-cloud.svg" alt="Cloud infrastructure" />
+          <img
+            src="images/tile-cloud.svg"
+            alt="Cloud infrastructure"
+            loading="lazy"
+          />
         </div>
         <h2 class="mw-tile-header">Cloud Infrastructure</h2>
         <div class="mw-tile-body">
@@ -192,7 +204,11 @@
 
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img src="images/tile-analytics.svg" alt="Business intelligence" />
+          <img
+            src="images/tile-analytics.svg"
+            alt="Business intelligence"
+            loading="lazy"
+          />
         </div>
         <h2 class="mw-tile-header">Business Intelligence Suite</h2>
         <div class="mw-tile-body">
@@ -210,14 +226,15 @@
 
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img src="images/tile-enterprise.svg" alt="Enterprise solutions" />
+          <img
+            src="images/tile-enterprise.svg"
+            alt="Enterprise solutions"
+            loading="lazy"
+          />
         </div>
         <h2 class="mw-tile-header">Enterprise Solutions</h2>
         <div class="mw-tile-body">
-          <p>
-            Comprehensive business management platform with CRM, ERP, and
-            workflow automation
-          </p>
+          <p>One platform for CRM, ERP and workflow automation</p>
           <p>
             Custom integrations and dedicated support for enterprise-level
             requirements

package/src/partials/typography-container.html

@@ -7,13 +7,14 @@
 
 <div class="mw-grid-2-lg">
   <div>
+    <!-- A type specimen, not an outline - the scale stays, the heading semantics go -->
     <div>
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
+      <h1 role="presentation">Heading 1</h1>
+      <h2 role="presentation">Heading 2</h2>
+      <h3 role="presentation">Heading 3</h3>
+      <h4 role="presentation">Heading 4</h4>
+      <h5 role="presentation">Heading 5</h5>
+      <h6 role="presentation">Heading 6</h6>
     </div>
     <blockquote>
       In the complex world of code, simplicity is the ultimate sophistication.