maverick-wave 4.27.0 → 5.0.0

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.

package/src/partials/utilities-container.html

@@ -267,39 +267,39 @@
 </p>
 <div class="mw-grid-2 mw-gap-6">
   <div class="mw-card mw-card-simple">
-    <h5 class="mw-text-medium mw-mb-2"><code>mw-text-truncate</code></h5>
+    <h4 class="mw-text-medium mw-mb-2"><code>mw-text-truncate</code></h4>
     <p class="mw-text-truncate">
       One line only: this sentence is far longer than the box it has been given
       and ends in an ellipsis rather than wrapping.
     </p>
-    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
       <code>mw-text-clamp-2</code>
-    </h5>
+    </h4>
     <p class="mw-text-clamp-2">
       Two lines and then an ellipsis. This paragraph runs on for long enough
       that the third line is cut off, which is what a card preview or a list
       subtitle wants when the copy is not yours to control.
     </p>
-    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
       <code>mw-text-break</code>
-    </h5>
+    </h4>
     <p class="mw-text-break">
       https://example.com/a/very/long/url/that/has/no/spaces/in/it/at/all/and/would/otherwise/push/the/page/sideways
     </p>
   </div>
   <div class="mw-card mw-card-simple">
-    <h5 class="mw-text-medium mw-mb-2">
+    <h4 class="mw-text-medium mw-mb-2">
       <code>mw-text-balance</code> and <code>mw-text-pretty</code>
-    </h5>
+    </h4>
     <p class="mw-text-muted mw-text-sm">
       Headings get <code>balance</code> by default - it evens the lines out so
       no headline leaves one word alone on the last one. Paragraphs get
       <code>pretty</code>, which only prevents the orphan. Both are on already;
       the classes are for anything the framework does not style itself.
     </p>
-    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
       <code>mw-text-eyebrow</code>
-    </h5>
+    </h4>
     <p class="mw-text-eyebrow mw-mb-1">Release notes</p>
     <h4 class="mw-mb-0">The kicker above a heading</h4>
     <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
@@ -323,29 +323,29 @@
 </p>
 <div class="mw-grid-3 mw-gap-6">
   <div class="mw-card mw-card-simple mw-elevation-1">
-    <h5 class="mw-text-medium mw-mb-1">1 &middot; resting</h5>
+    <h4 class="mw-text-medium mw-mb-1">1 &middot; resting</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">
       Inputs, tags, small controls.
     </p>
   </div>
   <div class="mw-card mw-card-simple mw-elevation-2">
-    <h5 class="mw-text-medium mw-mb-1">2 &middot; raised</h5>
+    <h4 class="mw-text-medium mw-mb-1">2 &middot; raised</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">Cards and panels at rest.</p>
   </div>
   <div class="mw-card mw-card-simple mw-elevation-3">
-    <h5 class="mw-text-medium mw-mb-1">3 &middot; floating</h5>
+    <h4 class="mw-text-medium mw-mb-1">3 &middot; floating</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">A card under the pointer.</p>
   </div>
   <div class="mw-card mw-card-simple mw-elevation-4">
-    <h5 class="mw-text-medium mw-mb-1">4 &middot; overlay</h5>
+    <h4 class="mw-text-medium mw-mb-1">4 &middot; overlay</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">Dropdowns, popovers, drawer.</p>
   </div>
   <div class="mw-card mw-card-simple mw-elevation-5">
-    <h5 class="mw-text-medium mw-mb-1">5 &middot; modal</h5>
+    <h4 class="mw-text-medium mw-mb-1">5 &middot; modal</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">The dialog over everything.</p>
   </div>
   <div class="mw-card mw-card-simple mw-elevation-0">
-    <h5 class="mw-text-medium mw-mb-1">0 &middot; flat</h5>
+    <h4 class="mw-text-medium mw-mb-1">0 &middot; flat</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-0">Explicitly on the page.</p>
   </div>
 </div>
@@ -403,3 +403,23 @@
     <code>photo</code>
   </div>
 </div>
+
+<h3 class="mw-mb-4 mw-mt-6">Squircle Corners</h3>
+<p class="mw-text-muted mw-text-measure">
+  <code>mw-squircle</code> draws the framework silhouette with a superellipse
+  instead of a circular arc - same four radii, fuller curve. Opt-in, because
+  <code>corner-shape</code> only lands in Chromium so far; everywhere else the
+  card below is simply the normal one.
+</p>
+<div class="mw-grid-2 mw-gap-6">
+  <div class="mw-card mw-card-simple">
+    <strong>Default</strong>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Circular corner radii.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-squircle">
+    <strong>mw-squircle</strong>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">
+      Superellipse, corner accent follows.
+    </p>
+  </div>
+</div>

package/src/scss/_layers.scss

@@ -0,0 +1,10 @@
+// Declared here and before any rule: a layer's position is fixed by where its
+// name first appears. What it buys a consumer is that any rule outside a layer
+// beats every rule inside one, however specific.
+//
+// The order reads inside out - the smaller thing first, then whatever places it.
+// Two steps are worth stating: forms before components, because a list restyles
+// the checkbox inside it; components before layout, because the two meet on one
+// element (`class="mw-card mw-grid-2"`) and there the layout class has to win, or
+// `.mw-card` hands `display: block` back to a grid.
+@layer mw.reset, mw.base, mw.forms, mw.components, mw.layout, mw.utilities;

package/src/scss/abstracts/_index.scss

@@ -1,3 +1,9 @@
+// Here and not only in main.scss: every partial loads `abstracts`, so this is the
+// one point every entry reaches. Importing components one by one otherwise
+// leaves the layer order to the import order, which puts `layout` ahead of
+// `components` and hands `display: block` back to a card that is also a grid.
+@use '../layers';
+
 // 'variables' first: it is the only configurable module, and both 'functions'
 // and 'mixins' load it themselves. Forwarding it later would mean it is
 // already loaded by the time a `with (...)` configuration reaches it.