maverick-wave 5.26.0 → 5.27.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.26.0",
+  "version": "5.27.0",
   "config": {
-    "version_short": "5.26"
+    "version_short": "5.27"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/scripts/verify.js

@@ -109,6 +109,10 @@ for (const t of [...tokensDefined].sort()) {
 
 const classesInCss = new Set(all(css, /\.(mw-[a-z0-9-]+)/g));
 
+// Keyframes carry the same prefix and get named in the docs, but they are not
+// classes - and one the docs name without the CSS having it still has to fail.
+const keyframesInCss = new Set(all(css, /@keyframes\s+(mw-[a-z0-9-]+)/g));
+
 // Classes the JS adds at runtime, or queries as a hook, count as legitimate
 // targets - including selector strings like '.mw-foo' and '[class~="mw-foo"]'
 const classesInJs = new Set(all(js, /\.?(mw-[a-z0-9-]+)/g));
@@ -130,7 +134,12 @@ for (const c of all(docs, /[`."'\s](mw-[a-z0-9-]+)/g)) {
 }
 
 for (const [c, where] of [...classesInMarkup].sort()) {
-  if (classesInCss.has(c) || classesInJs.has(c) || CLASS_ALLOWLIST.has(c)) {
+  if (
+    classesInCss.has(c) ||
+    classesInJs.has(c) ||
+    keyframesInCss.has(c) ||
+    CLASS_ALLOWLIST.has(c)
+  ) {
     continue;
   }
   errors.push(`class used in ${where} but not generated by the CSS: .${c}`);

package/src/partials/tiles-container.html

@@ -8,66 +8,66 @@
   <div>
     <h4 class="mw-mb-2">Basic Tiles in 3 Columns</h4>
     <div class="mw-tiles">
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">Project Management</h3>
         <div class="mw-tile-body">
           <p>Organize tasks and track project progress</p>
           <p>Collaborate with team members efficiently</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-15</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">Analytics Dashboard</h3>
         <div class="mw-tile-body">
           <p>Real-time data visualization and insights</p>
           <p>Track KPIs and performance metrics</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-02</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">Customer Support</h3>
         <div class="mw-tile-body">
           <p>24/7 help desk and ticket management</p>
           <p>Live chat and knowledge base access</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-11-23</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">Document Management</h3>
         <div class="mw-tile-body">
           <p>Secure file storage and version control</p>
           <p>Easy sharing and collaboration tools</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-30</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">Billing & Invoices</h3>
         <div class="mw-tile-body">
           <p>Automated invoicing and payment tracking</p>
           <p>Financial reporting and tax preparation</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-01</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <h3 class="mw-tile-header">User Management</h3>
         <div class="mw-tile-body">
           <p>Role-based access control and permissions</p>
           <p>User authentication and security settings</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-28</div>
-      </div>
+      </a>
     </div>
   </div>
 
   <div>
     <h4 class="mw-mb-2">Basic Tiles with Images in 2 Columns</h4>
     <div class="mw-tiles mw-tiles-2col">
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <div class="mw-tile-img">
           <img
             src="images/tile-ecommerce.svg"
@@ -81,9 +81,9 @@
           <p>Inventory tracking and order fulfillment</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-15</div>
-      </div>
+      </a>
 
-      <div class="mw-tile">
+      <a href="#" class="mw-tile">
         <div class="mw-tile-img">
           <img
             src="images/tile-marketing.svg"
@@ -97,91 +97,91 @@
           <p>Social media scheduling and analytics</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-02</div>
-      </div>
+      </a>
     </div>
   </div>
 
   <div>
     <h4 class="mw-mb-2">Small Tiles in 4 Columns</h4>
     <div class="mw-tiles mw-tiles-4col">
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">API Documentation</h3>
         <div class="mw-tile-body">
           <p>REST API reference guide</p>
           <p>Code examples and tutorials</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-01</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Security Center</h3>
         <div class="mw-tile-body">
           <p>Two-factor authentication</p>
           <p>Security audit logs</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-31</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Backup & Recovery</h3>
         <div class="mw-tile-body">
           <p>Automated daily backups</p>
           <p>One-click data restoration</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-29</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Performance Monitor</h3>
         <div class="mw-tile-body">
           <p>Server uptime: 99.9%</p>
           <p>Response time: 150ms</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-02</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Integration Hub</h3>
         <div class="mw-tile-body">
           <p>Connect third-party apps</p>
           <p>Webhook configurations</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-27</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Mobile App</h3>
         <div class="mw-tile-body">
           <p>iOS and Android apps</p>
           <p>Offline sync capabilities</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-25</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">Training Center</h3>
         <div class="mw-tile-body">
           <p>Video tutorials available</p>
           <p>Certification programs</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2025-01-01</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-sm">
+      <a href="#" class="mw-tile mw-tile-sm">
         <h3 class="mw-tile-header">System Status</h3>
         <div class="mw-tile-body">
           <p>All systems operational</p>
           <p>Last incident: None</p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-30</div>
-      </div>
+      </a>
     </div>
   </div>
 
   <div>
     <h4 class="mw-mb-2">Large Tiles</h4>
     <div class="mw-tiles">
-      <div class="mw-tile mw-tile-lg">
+      <a href="#" class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
           <img
             src="images/tile-cloud.svg"
@@ -200,9 +200,9 @@
           </p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-28</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-lg">
+      <a href="#" class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
           <img
             src="images/tile-analytics.svg"
@@ -222,9 +222,9 @@
           </p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-31</div>
-      </div>
+      </a>
 
-      <div class="mw-tile mw-tile-lg">
+      <a href="#" class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
           <img
             src="images/tile-enterprise.svg"
@@ -241,7 +241,7 @@
           </p>
         </div>
         <div class="mw-tile-footer">Last updated: 2024-12-23</div>
-      </div>
+      </a>
     </div>
   </div>
 </div>

package/src/scss/base/_base.scss

@@ -131,13 +131,22 @@
     // header height
     --mw-header-height: #{$header-height};
 
-    // Read by the anchor offset of anything the sticky section nav can cover
-    --mw-section-nav-height: 3.7rem;
+    // Read by the anchor offset of anything the sticky section nav can cover.
+    // The strip at its tallest: a 2.75rem button under a thumb plus its two
+    // 0.5rem paddings. Rounded up rather than down - a pointer gets 2px of
+    // slack, and the offset may overshoot but must not undershoot.
+    --mw-section-nav-height: 3.75rem;
 
     // The anchor scroll offset is calculated from it, so a taller ribbon raises
     // this token rather than fighting the offset
     --mw-announcement-height: 2.7rem;
 
+    // What each layer of sticky chrome below the header adds to the scroll
+    // offset in the reset. A length and not a bare 0 - calc() cannot add a
+    // unitless one.
+    --mw-announcement-offset: 0px;
+    --mw-section-nav-offset: 0px;
+
     // Fluid rather than stepped: ~24px at 375px up to 64px, where the 1200px cap
     // takes over. Stepping at a breakpoint makes the container jump *backwards*
     // there, because the gutter grows faster than the viewport does.
@@ -160,11 +169,12 @@
     --mw-section-padding-compact: #{spacing('8')};
     --mw-section-padding-airy: #{spacing('12')};
     // The third regime beside the stepped default and the two stepped presets:
-    // spacing that grows with the screen. It starts at the value a phone already
-    // gets below `sm` and reaches the airy preset at `xl`, so a desktop pushes
-    // less content past per wheel notch while the phone carries none of that air.
-    // Needs no steps of its own - the ramp is the steps.
-    --mw-section-padding-fluid: #{fluid(spacing('7'), spacing('12'), $to: 'xl')};
+    // spacing that grows with the screen. Both ends sit beside the spacing scale
+    // rather than on it: the nearest steps are a phone value the default already
+    // has and a desktop value the airy preset already is, and a ramp that ends
+    // where a preset ends is a preset. Needs no steps of its own - the ramp is
+    // the steps.
+    --mw-section-padding-fluid: #{fluid(35px, 65px, $to: 'xl')};
     // The section head: the gap it leaves to the content below, the space
     // between its rule and the title, and the mark sitting on that rule.
     //

package/src/scss/base/_reset.scss

@@ -14,7 +14,13 @@
     font-size: var(--mw-root-font-size);
     scroll-behavior: smooth;
     min-width: 320px;
-    scroll-padding-top: var(--mw-header-height);
+    // Each layer of sticky chrome contributes its own term, so a page carrying
+    // both a ribbon and a section nav reserves for both - two rules setting one
+    // offset would have the later layer silently win instead.
+    scroll-padding-top: calc(
+      var(--mw-header-height) + var(--mw-announcement-offset) +
+        var(--mw-section-nav-offset)
+    );
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
     @include scrollbar(var(--mw-border), transparent);

package/src/scss/components/_announcement.scss

@@ -60,9 +60,7 @@
   // page without a ribbon keeps the plain offset - and a static ribbon does not
   // count, it scrolls with the content.
   html:has(.mw-announcement:not(.mw-announcement-static)) {
-    scroll-padding-top: calc(
-      var(--mw-header-height) + var(--mw-announcement-height)
-    );
+    --mw-announcement-offset: var(--mw-announcement-height);
   }
 
   // On a phone the line wraps and the ribbon grows - the height token follows,

package/src/scss/components/_blog-post.scss

@@ -8,13 +8,14 @@
     // One-shot entrance, not a loop, so it belongs on the scale. It ran for
     // 1.6s before - long enough that the reader is into the second paragraph
     // while the page is still arriving.
-    animation: pageReveal var(--mw-duration-slower) var(--mw-ease-out) forwards;
+    animation: mw-page-reveal var(--mw-duration-slower) var(--mw-ease-out)
+      forwards;
     border-radius: radius('sm') radius('2xl') radius('sm') radius('2xl');
     box-shadow:
       var(--mw-border) 0 30px 60px -18px inset,
       var(--mw-border) 0 18px 36px -18px inset;
 
-    @keyframes pageReveal {
+    @keyframes mw-page-reveal {
       0% {
         opacity: 0;
         transform: translateY(-30px) rotateX(10deg);
@@ -81,10 +82,10 @@
         margin-bottom: spacing('4');
         font-size: font-size('xl');
         box-shadow: var(--mw-elevation-2);
-        animation: iconFlip var(--mw-duration-slower) var(--mw-ease-out)
+        animation: mw-icon-flip var(--mw-duration-slower) var(--mw-ease-out)
           forwards;
 
-        @keyframes iconFlip {
+        @keyframes mw-icon-flip {
           0% {
             transform: rotateY(90deg);
           }

package/src/scss/components/_cards.scss

@@ -280,13 +280,13 @@
       flex-shrink: 0;
       text-wrap: balance;
 
-      /* push the last element all the way right - a single one included */
+      // The last element goes right whether it has company or not, so a lone
+      // button sits where the confirming one sits in a pair
       > *:last-child {
         margin-left: auto;
         text-align: right;
       }
 
-      // Ensure buttons maintain their size
       .mw-btn {
         flex-shrink: 0;
       }

package/src/scss/components/_contact.scss

@@ -19,10 +19,12 @@
       gap: spacing('1') spacing('4');
     }
 
-    // Sized rather than auto, so the values line up under each other however
-    // long the words in front of them are
+    // A floor rather than a fixed size, so the values line up under each other
+    // however long the words in front of them are - and a label longer than the
+    // column still gets its room instead of running into the value beside it
     &-label {
-      flex: 0 0 5rem;
+      flex: 0 0 auto;
+      min-width: 5rem;
       color: var(--mw-text-muted-color);
     }
   }

package/src/scss/components/_localhost-indicator.scss

@@ -10,11 +10,11 @@
     height: 4px;
     background: var(--mw-warning-color);
     z-index: z-index('modal')-10;
-    animation: pulse-indicator motion(4s) infinite;
+    animation: mw-pulse-indicator motion(4s) infinite;
   }
 
   // Keyframes for the pulsing indicator
-  @keyframes pulse-indicator {
+  @keyframes mw-pulse-indicator {
     0% {
       opacity: 0.5;
       box-shadow: 0 0 3px var(--mw-warning-color);

package/src/scss/components/_panels.scss

@@ -1,6 +1,14 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
+  // -scrollable is the older spelling of -max-height-md
+  $_mw-panel-heights: (
+    'max-height-sm': 300px,
+    'max-height-md': 500px,
+    'max-height-lg': 700px,
+    'scrollable': 500px,
+  );
+
   .mw-panel {
     background: var(--mw-card-background);
     @include surface(2px);
@@ -8,13 +16,15 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    min-height: 100%;
-    margin: spacing('1');
 
     &-header {
       padding: spacing('4') spacing('5');
       border-bottom: 1px solid var(--mw-border-accent);
       display: flex;
+      // A title with an action beside it runs out of room on a phone long
+      // before the title runs out of words
+      flex-wrap: wrap;
+      gap: spacing('3');
       justify-content: space-between;
       align-items: center;
       margin: spacing('0');
@@ -48,7 +58,6 @@
       gap: spacing('3');
     }
 
-    // Panel variants
     &-primary {
       .mw-panel-header {
         background: var(--mw-primary-color);
@@ -72,56 +81,13 @@
       @include corner-accent(2px, 'bottom');
     }
 
-    // Scrollable variant for fixed height
-    &-scrollable {
-      max-height: 500px;
-
-      .mw-panel-body {
-        overflow-y: auto;
-        max-height: calc(500px - #{2 * spacing('4')} - 2px);
-      }
-    }
-
-    // Scrollable variants for max height
-    &-max-height {
-      &-sm {
-        max-height: 300px;
-        min-height: 0;
-        align-self: start;
-        .mw-panel-body {
-          max-height: calc(300px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-
-      &-md {
-        max-height: 500px;
-        min-height: 0;
-        align-self: start;
-        .mw-panel-body {
-          max-height: calc(500px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-
-      &-lg {
-        max-height: 700px;
-        min-height: 0;
+    // Only the cap - the body already scrolls and already takes what the header
+    // and footer leave it. `align-self` because a grid row stretches its items
+    // first, and a stretched panel reaches the cap from above whatever it says.
+    @each $name, $height in $_mw-panel-heights {
+      &-#{$name} {
+        max-height: $height;
         align-self: start;
-        .mw-panel-body {
-          max-height: calc(700px - #{2 * spacing('4')} - 2px);
-          overflow-y: auto;
-        }
-      }
-    }
-
-    @include media-down('sm') {
-      font-size: font-size('sm');
-
-      &-header {
-        h3 {
-          font-size: font-size('sm');
-        }
       }
     }
   }

package/src/scss/components/_tabs.scss

@@ -132,7 +132,7 @@
         display: block;
         // 1.1s to reveal a tab panel means a second of blank space after every
         // click. A panel switch is a state change, not an entrance.
-        animation: fadeIn var(--mw-duration-base) var(--mw-ease-out);
+        animation: mw-tabs-fade var(--mw-duration-base) var(--mw-ease-out);
       }
     }
 
@@ -281,7 +281,7 @@
     }
   }
 
-  @keyframes fadeIn {
+  @keyframes mw-tabs-fade {
     from {
       opacity: 0;
     }