maverick-wave 5.7.0 → 5.8.0

package/.claude/skills/mw-maverick-wave/SKILL.md

@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 />
 ...
-<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -

package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md

@@ -20,7 +20,7 @@ accordion FAQ.
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -487,7 +487,7 @@ accordion FAQ.
       <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
     <script>
       // The only thing the shipped script does not cover: opening a modal.
       // Closing works through .mw-modal-close, the backdrop is wired above.

package/.claude/skills/mw-maverick-wave/references/theming.md

@@ -83,6 +83,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-container-gutter`, `--mw-container-width`                                                                                                                              | Page gutter of `mw-container` (fluid `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never below the safe-area inset) and the width derived from it (`min(1200px, 100% - 2 * gutter)`)                                                                                                                                                             |
 | `--mw-section-padding-block`                                                                                                                                                 | Top/bottom rhythm of `mw-section` (3.3rem, stepping down to 2.5rem below `md` and 1.75rem below `sm`)                                                                                                                                                                                                                                   |
 | `--mw-section-nav-height`                                                                                                                                                    | Height the sticky `mw-section-nav` reserves (3.7rem). Add it to `--mw-header-height` for the `scroll-margin-top` of anything the strip can cover                                                                                                                                                                                        |
+| `--mw-root-font-size`                                                                                                                                                        | Percentage the whole rem scale is built on (`100%`). Type, spacing and control heights move with it; px breakpoints do not                                                                                                                                                                                                              |
 | `--mw-calendar-dot`                                                                                                                                                          | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it                                                                                                                                                                                                                        |
 | `--mw-scroll-hint-cover`                                                                                                                                                     | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar`                                                                                                                                                                |
 | `--mw-elevation-1` … `-5`                                                                                                                                                    | Every shadow in the framework. Two layers per level - contact plus ambient. Never write a `box-shadow` by hand: a hand-rolled one is the wrong colour in one of the two themes                                                                                                                                                          |
@@ -194,27 +195,31 @@ root.classList.remove('mw-theme-switching');
 
 ## Site-wide variants
 
-Nine classes on `<html>` and four custom properties retune the whole look
+Twelve classes on `<html>` and five custom properties retune the whole look
 without a rebuild. They stack, and none of them need a class per element.
 
-| Class               | Effect                                                                                                                                                                  |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mw-corners-even`   | Drops the surface signature - every card, panel and modal becomes an evenly rounded `radius('md')` box                                                                  |
-| `mw-accent-single`  | `--mw-secondary-color` follows the primary; `mw-btn-secondary` turns outline so the two stay apart                                                                      |
-| `mw-shadows-flat`   | Elevation 1-3 to `none`. The dropdown (4) and the modal (5) keep their shadow                                                                                           |
-| `mw-hover-static`   | No hover travels - lifts, image zooms and slides go. Colour and border still respond                                                                                    |
-| `mw-scroll-static`  | No scroll entrance - `mw-reveal` and `mw-reveal-stagger` blocks sit where they land                                                                                     |
-| `mw-sections-plain` | The diagonal hatch behind `mw-section-alternate` collapses into the page colour                                                                                         |
-| `mw-headings-caps`  | `h1`-`h3` in capitals with 0.045em tracking                                                                                                                             |
-| `mw-btn-pill`       | `mw-btn` fully rounded. Form fields keep their own radius                                                                                                               |
-| `mw-btn-glass`      | Filled buttons become tinted glass: translucent wash, vertical ramp, specular top edge. No `backdrop-filter` - it would trap a fixed-position tooltip inside the button |
-
-| Property                     | Effect                                                         |
-| ---------------------------- | -------------------------------------------------------------- |
-| `--mw-radius-scale`          | Multiplies the whole radius scale - `0` squares everything off |
-| `--mw-font-family-heading`   | Headline typeface; body copy is untouched                      |
-| `--mw-container-width`       | Where the content stops growing                                |
-| `--mw-section-padding-block` | Air above and below each section                               |
+| Class               | Effect                                                                                                                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mw-corners-even`   | Drops the surface signature - every card, panel and modal becomes an evenly rounded `radius('md')` box                                                                          |
+| `mw-accent-single`  | `--mw-secondary-color` follows the primary; `mw-btn-secondary` turns outline so the two stay apart                                                                              |
+| `mw-shadows-flat`   | Elevation 1-3 to `none`. The dropdown (4) and the modal (5) keep their shadow                                                                                                   |
+| `mw-surfaces-flush` | Card, panel and footer background drop to the page colour and the border is redrawn from the ink, because the old one is a neighbouring shade of a surface that is now the page |
+| `mw-hover-static`   | No hover travels - lifts, image zooms and slides go. Colour and border still respond                                                                                            |
+| `mw-scroll-static`  | No scroll entrance - `mw-reveal` and `mw-reveal-stagger` blocks sit where they land                                                                                             |
+| `mw-sections-plain` | The diagonal hatch behind `mw-section-alternate` collapses into the page colour                                                                                                 |
+| `mw-headings-caps`  | `h1`-`h3` in capitals with 0.045em tracking                                                                                                                                     |
+| `mw-btn-pill`       | `mw-btn` fully rounded. Form fields keep their own radius                                                                                                                       |
+| `mw-btn-square`     | `mw-btn` to `border-radius: 0`. The other end of the same axis, and unlike `--mw-radius-scale: 0` it leaves the rest of the page rounded                                        |
+| `mw-btn-glass`      | Filled buttons become tinted glass: translucent wash, vertical ramp, specular top edge. No `backdrop-filter` - it would trap a fixed-position tooltip inside the button         |
+| `mw-btn-tactile`    | The four solid variants stand on a 3px edge mixed toward black and travel its full height on `:active`. Outline, ghost and link have no fill to darken and are untouched        |
+
+| Property                     | Effect                                                                                                                      |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `--mw-radius-scale`          | Multiplies the whole radius scale - `0` squares everything off                                                              |
+| `--mw-root-font-size`        | Percentage on `html`. The scale is rem, so type, padding and control heights move together; breakpoints are px and stay put |
+| `--mw-font-family-heading`   | Headline typeface; body copy is untouched                                                                                   |
+| `--mw-container-width`       | Where the content stops growing                                                                                             |
+| `--mw-section-padding-block` | Air above and below each section                                                                                            |
 
 **Writing your own.** A variant that retunes a _theme-bound_ token - anything in
 the dark/light maps, elevation and shadow above all - cannot be written on

package/CHANGELOG.md

@@ -6,6 +6,12 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.8.0] - 2026-09-12
+
+### Added
+
+- some other showcase variants
+
 ## [5.7.0] - 2026-09-12
 
 ### Added

package/README.md

@@ -42,12 +42,12 @@ The result is a framework that balances utility with simplicity, offering develo
     <title>My MaverickWave Project</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```
@@ -347,7 +347,7 @@ layer of its own:
 
 ### Site-wide variants
 
-Nine classes on `<html>` retune the whole look without touching markup or
+Twelve classes on `<html>` retune the whole look without touching markup or
 rebuilding. They stack.
 
 | Class               | Effect                                                                  |
@@ -355,16 +355,20 @@ rebuilding. They stack.
 | `mw-corners-even`   | Drops the surface signature - every panel becomes an evenly rounded box |
 | `mw-accent-single`  | One brand colour instead of two; `mw-btn-secondary` turns outline       |
 | `mw-shadows-flat`   | Elevation 1-3 to `none`; dropdown and modal keep theirs                 |
+| `mw-surfaces-flush` | Cards, panels and footer on the page colour, held by their border       |
 | `mw-hover-static`   | No hover travels - lifts and image zooms go, colour still responds      |
 | `mw-scroll-static`  | No scroll entrance - `mw-reveal` blocks sit where they land             |
 | `mw-sections-plain` | The hatch behind `mw-section-alternate` collapses into the page colour  |
 | `mw-headings-caps`  | `h1`-`h3` in capitals                                                   |
 | `mw-btn-pill`       | Fully rounded buttons; form fields keep their radius                    |
+| `mw-btn-square`     | Buttons cut to a hard corner while the page keeps its radius            |
 | `mw-btn-glass`      | Filled buttons become a translucent wash with a lit top edge            |
+| `mw-btn-tactile`    | Filled buttons stand on a darker edge and sink onto it when pressed     |
 
-Four properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
-squares the framework off), `--mw-font-family-heading`, `--mw-container-width`
-and `--mw-section-padding-block`.
+Five properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
+squares the framework off), `--mw-root-font-size` moves the whole rem scale,
+plus `--mw-font-family-heading`, `--mw-container-width` and
+`--mw-section-padding-block`.
 
 A variant of your own that retunes a theme-bound token has to target
 `:root.your-class` **and** `:root.your-class .mw-theme-light` - the light theme

package/index.html

@@ -124,40 +124,50 @@
 
       /* Palette switcher, showcase only. The framework derives every tone from
          the root colors, so the panel writes nothing but those. */
-      .palette-fab {
-        position: fixed;
-        right: 18px;
-        bottom: 18px;
-        z-index: 400;
-        width: 52px;
-        height: 52px;
-        border-radius: 50%;
-        border: 1px solid var(--mw-border-accent);
+      .palette-toggle {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 40px;
+        flex-shrink: 0;
+        border: none;
+        border-radius: calc(10px * var(--mw-radius-scale, 1));
         background: var(--mw-primary-color);
         color: var(--mw-primary-accent-text-color);
-        box-shadow: var(--mw-elevation-4);
-        font-size: 1.25rem;
+        font-size: 1.1rem;
         cursor: pointer;
         transition: var(--mw-transition);
       }
 
-      .palette-fab:hover {
+      /* Below sm the panel would cover the very thing it is changing */
+      @media (min-width: 576px) {
+        .palette-toggle {
+          display: flex;
+        }
+      }
+
+      .palette-toggle:hover {
         background: var(--mw-primary-color-hover);
       }
 
-      .palette-fab:active {
-        transform: scale(0.92);
+      .palette-toggle:active {
+        transform: scale(0.94);
       }
 
       .palette-panel {
         position: fixed;
-        right: 18px;
-        bottom: 82px;
+        top: calc(var(--mw-header-height) + 8px);
+        /* Flush with the container edge, so it lines up with the button in the
+           header rather than sitting further out */
+        right: max(18px, calc((100% - var(--mw-container-width)) / 2));
         z-index: 400;
-        width: 360px;
+        /* Wide enough for three palettes in a row; the min() is for the narrow
+           end, where the panel would otherwise reach past the viewport */
+        width: min(440px, calc(100% - 24px));
         /* The variant list makes the panel taller than a laptop in landscape -
-           the top of it would be behind the browser chrome without this */
-        max-height: calc(100dvh - 120px);
+           it takes what is left under the header and scrolls the rest */
+        max-height: calc(100dvh - var(--mw-header-height) - 24px);
         overflow-y: auto;
         overscroll-behavior: contain;
         padding: 18px;
@@ -165,6 +175,26 @@
         border: 1px solid var(--mw-border);
         background: var(--mw-card-background);
         box-shadow: var(--mw-elevation-5);
+        transform: translateY(0);
+        opacity: 1;
+        /* display is in the list so allow-discrete keeps the panel mounted
+           through the fade out - `hidden` is the state the script writes */
+        transition-property: opacity, transform, display;
+        transition-duration: var(--mw-duration-base);
+        transition-timing-function: var(--mw-ease-out);
+        transition-behavior: allow-discrete;
+      }
+
+      @starting-style {
+        .palette-panel {
+          opacity: 0;
+          transform: translateY(-12px);
+        }
+      }
+
+      .palette-panel[hidden] {
+        opacity: 0;
+        transform: translateY(-12px);
       }
 
       .palette-heading {
@@ -181,7 +211,7 @@
 
       .palette-grid {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(3, 1fr);
         gap: 6px;
       }
 
@@ -291,7 +321,7 @@
 
       .variant-row select {
         flex-shrink: 0;
-        max-width: 110px;
+        max-width: 135px;
         padding: 3px 6px;
         font-size: 0.75rem;
         color: var(--mw-text-color);
@@ -362,22 +392,6 @@
         white-space: pre-wrap;
         word-break: break-word;
       }
-
-      @media (max-width: 480px) {
-        .palette-fab {
-          right: 12px;
-          bottom: 12px;
-          width: 46px;
-          height: 46px;
-        }
-
-        .palette-panel {
-          right: 12px;
-          left: 12px;
-          bottom: 68px;
-          width: auto;
-        }
-      }
     </style>
 
     <script src="maverick-wave.min.js?v={{VERSION}}"></script>
@@ -908,12 +922,12 @@
       // root element repaints the page - bar, ink, borders and tints included.
       // Nothing is persisted - a palette is for looking at, a reload is the way back.
       document.addEventListener('DOMContentLoaded', () => {
-        const fab = document.getElementById('palette-fab');
+        const toggleBtn = document.getElementById('palette-toggle');
         const panel = document.getElementById('palette-panel');
         const primaryInput = document.getElementById('palette-primary');
         const secondaryInput = document.getElementById('palette-secondary');
         const items = [...document.querySelectorAll('.palette-item')];
-        if (!fab || !panel) return;
+        if (!toggleBtn || !panel) return;
 
         const root = document.documentElement;
 
@@ -1001,10 +1015,10 @@
 
         const toggle = (open) => {
           panel.hidden = !open;
-          fab.setAttribute('aria-expanded', String(open));
+          toggleBtn.setAttribute('aria-expanded', String(open));
         };
 
-        fab.addEventListener('click', (event) => {
+        toggleBtn.addEventListener('click', (event) => {
           event.stopPropagation();
           toggle(panel.hidden);
         });
@@ -1132,7 +1146,12 @@
 
           controls.forEach((control) => {
             if (control.type !== 'checkbox') {
-              if (control.value) {
+              // A select whose options are class names picks one of a set the
+              // markup cannot hold at the same time - a shape is one or none
+              if (!control.value) return;
+              if (control.hasAttribute('data-variant-classes')) {
+                classes.push(control.value);
+              } else {
                 props.push(
                   `  ${control.dataset.variantProp}: ${control.value};`
                 );
@@ -1164,11 +1183,17 @@
             : 'Default setup - nothing to change.';
         };
 
+        const optionClasses = (control) =>
+          [...control.options].map((option) => option.value).filter(Boolean);
+
         const apply = (control) => {
           if (control.type === 'checkbox') {
             const target = control.dataset.variantTarget;
             const el = target ? document.querySelector(target) : root;
             el?.classList.toggle(control.dataset.variantClass, isOn(control));
+          } else if (control.hasAttribute('data-variant-classes')) {
+            root.classList.remove(...optionClasses(control));
+            if (control.value) root.classList.add(control.value);
           } else if (control.value) {
             root.style.setProperty(control.dataset.variantProp, control.value);
           } else {
@@ -1214,6 +1239,9 @@
               control.checked = control.hasAttribute('data-variant-invert')
                 ? !on
                 : on;
+            } else if (control.hasAttribute('data-variant-classes')) {
+              control.value =
+                optionClasses(control).find((name) => named.has(name)) ?? '';
             } else {
               control.value = props.get(control.dataset.variantProp) ?? '';
             }