maverick-wave 5.6.0 → 5.7.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.6.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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.6.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -
@@ -195,8 +195,8 @@ back), `--mw-ease-spring` (a pop). Two ready-made transitions:
 for anything that should feel instant under the pointer. Both list their
 properties explicitly rather than saying `all`.
 
-**Control sizes** `--mw-control-height-sm|base|lg` = 2 / 2.25 / 2.5rem (an even
-32 / 36 / 40px step) and
+**Control sizes** `--mw-control-height-sm|base|lg` = 1.875 / 2.125 / 2.375rem (an
+even 30 / 34 / 38px step) and
 `--mw-control-font-sm|base|lg` = 0.8 / 0.9 / 1rem, shared by `mw-input`,
 `mw-select`, `mw-textarea` and `mw-btn`. A field and the button beside it are
 the same height by construction. Buttons run one font step above the fields.
@@ -402,7 +402,7 @@ feature frame) ·
 28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
     4.13.0 there is a class for exactly that. `mw-btn` is `inline-flex` with
     `min-height: var(--mw-control-height)`, so a link written that way pulls its
-    own line up to 2.25rem while every line around it keeps the paragraph's
+    own line up to 2.125rem while every line around it keeps the paragraph's
     height - in a footer disclaimer at `font-size: sm` that is nearly double,
     and it reads as a layout bug. `mw-p-0` is not the fix it looks like: the
     height does it, not the padding. `mw-link` is the same look without the

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.6.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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.6.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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/components.md

@@ -28,7 +28,7 @@ exhaustive: what is not named does not exist.
   is, so do not override it away
 - **A link inside a sentence is `mw-link`, not `mw-btn mw-btn-link`.** The base
   class carries a control height, so in running text it lifts that one line to
-  2.25rem while the lines around it stay where they are. `mw-p-0` does not help
+  2.125rem while the lines around it stay where they are. `mw-p-0` does not help
   - the height does it, not the padding. Keep `mw-btn` only where the link
     really is a button in a row of buttons and has to line up with them
 - On a coarse pointer or below 768px `mw-btn` grows to a 2.75rem minimum height
@@ -1445,7 +1445,7 @@ deprecated). Any card fits into the content wrapper.
 <div class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</div>
 ```
 
-- Sizes: `mw-avatar-xs` 32, `-sm` 64, default 96, `-lg` 144, `-xl` 250 px.
+- Sizes: `mw-avatar-xs` 32, `-sm` 64, default 96, `-lg` 144, `-xl` 210 px.
 - Shape: `mw-avatar-square`.
 - Colours `mw-avatar-primary`, `-secondary`, `-success`, `-warning`, `-danger`,
   `-info` tint the **border**. On `mw-avatar-initials` the same class also tints
@@ -1454,6 +1454,9 @@ deprecated). Any card fits into the content wrapper.
   the standard display for a signed-in user without a picture.
 - `mw-avatar-group` overlaps its avatars; `mw-avatar-group-sm` / `-lg` change
   the overlap.
+- Hover on an avatar **with an image** zooms the picture and sweeps a light
+  across it. Nothing to switch on. It is skipped on `mw-avatar-initials`, on
+  touch, under `prefers-reduced-motion` and under `mw-hover-static`.
 
 ## Item lists
 

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

@@ -4,11 +4,11 @@
 
 `mw-input`, `mw-select`, `mw-textarea` and `mw-btn` share one scale:
 
-| step  | height  | font   |
-| ----- | ------- | ------ |
-| `-sm` | 2rem    | 0.8rem |
-| base  | 2.25rem | 0.9rem |
-| `-lg` | 2.5rem  | 1rem   |
+| step  | height   | font   |
+| ----- | -------- | ------ |
+| `-sm` | 1.875rem | 0.8rem |
+| base  | 2.125rem | 0.9rem |
+| `-lg` | 2.375rem | 1rem   |
 
 A field and the button beside it are therefore the same height by construction -
 before 4.11.0 each control worked its own height out and an input, a select and

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

@@ -194,19 +194,20 @@ root.classList.remove('mw-theme-switching');
 
 ## Site-wide variants
 
-Eight classes on `<html>` and four custom properties retune the whole look
+Nine classes on `<html>` and four 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-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-media-mono`     | Photos in `grayscale(1)` until their card, tile, gallery or slider is hovered                          |
+| 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                                                         |
 | ---------------------------- | -------------------------------------------------------------- |

package/CHANGELOG.md

@@ -6,6 +6,17 @@ 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.7.0] - 2026-09-12
+
+### Added
+
+- avatar hover animation
+
+### Changed
+
+- slimmer control heights
+- showcase variants
+
 ## [5.6.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.6.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```
@@ -153,9 +153,9 @@ assembled rather than designed.
 
   /* Control sizes - one height per step, shared by input, select, textarea
      and button, so a field and the button beside it line up */
-  --mw-control-height-sm: 2rem;
-  --mw-control-height: 2.25rem;
-  --mw-control-height-lg: 2.5rem;
+  --mw-control-height-sm: 1.875rem;
+  --mw-control-height: 2.125rem;
+  --mw-control-height-lg: 2.375rem;
   --mw-control-font-sm: 0.8rem;
   --mw-control-font: 0.9rem;
   --mw-control-font-lg: 1rem;
@@ -347,7 +347,7 @@ layer of its own:
 
 ### Site-wide variants
 
-Eight classes on `<html>` retune the whole look without touching markup or
+Nine classes on `<html>` retune the whole look without touching markup or
 rebuilding. They stack.
 
 | Class               | Effect                                                                  |
@@ -356,10 +356,11 @@ rebuilding. They stack.
 | `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-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-media-mono`     | Photos grey until hovered                                               |
+| `mw-btn-glass`      | Filled buttons become a translucent wash with a lit top edge            |
 
 Four properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
 squares the framework off), `--mw-font-family-heading`, `--mw-container-width`

package/index.html

@@ -21,7 +21,10 @@
       @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css')
       layer(vendor);
     </style>
-    <link rel="stylesheet" href="maverick-wave.min.css" />
+    <!-- ?v= so a release actually reaches a browser that has the last one
+         cached: the filename never changes, and without it a stale stylesheet
+         survives a normal reload -->
+    <link rel="stylesheet" href="maverick-wave.min.css?v={{VERSION}}" />
     <!-- Favicons -->
     <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
     <link
@@ -336,8 +339,18 @@
         background: var(--mw-primary-accent-text-color);
       }
 
-      .variant-setup {
+      .variant-setup-label {
+        display: block;
         margin-top: 14px;
+        margin-bottom: 5px;
+        font-size: 0.7rem;
+        color: var(--mw-text-muted-color);
+      }
+
+      .variant-setup {
+        display: block;
+        width: 100%;
+        resize: vertical;
         padding: 10px;
         border-radius: 8px;
         border: 1px solid var(--mw-border);
@@ -367,7 +380,7 @@
       }
     </style>
 
-    <script src="maverick-wave.min.js"></script>
+    <script src="maverick-wave.min.js?v={{VERSION}}"></script>
   </head>
 
   <body>
@@ -904,6 +917,13 @@
 
         const root = document.documentElement;
 
+        // The values the markup ships with, so the setup box below can tell a
+        // chosen colour from the built-in one and print only the difference
+        const BUILT_IN = {
+          primary: primaryInput.value,
+          secondary: secondaryInput.value,
+        };
+
         const DARK_INK = '#131925';
         const LIGHT_INK = '#f2f6fc';
 
@@ -939,6 +959,7 @@
           void root.offsetHeight;
           root.classList.remove('mw-theme-switching');
           window.mwRefreshColorSwatches?.();
+          window.mwRefreshSetup?.();
         };
 
         const paint = (name, color) => {
@@ -993,6 +1014,79 @@
         document.addEventListener('keydown', (event) => {
           if (event.key === 'Escape') toggle(false);
         });
+
+        // The seam to the variants panel below, which prints and reads the whole
+        // setup - the palette is half of it. Only inline values count as chosen:
+        // anything still coming from the stylesheet is the built-in one.
+        const PAGE_GROUNDS = {
+          dark: '--mw-dark-page-background',
+          light: '--mw-light-page-background',
+        };
+
+        window.mwPalette = {
+          read: () => ({
+            primary: root.style.getPropertyValue('--mw-primary-color') || null,
+            secondary:
+              root.style.getPropertyValue('--mw-secondary-color') || null,
+            // The label colour ink() measured for each fill. It has to travel
+            // with the setup: a project that only copies the two brand colours
+            // keeps the stock accent text, and on a light brand tone that is an
+            // unreadable button. write() recomputes it, so pasting it back is
+            // harmless.
+            primaryInk:
+              root.style.getPropertyValue('--mw-primary-accent-text-color') ||
+              null,
+            secondaryInk:
+              root.style.getPropertyValue('--mw-secondary-accent-text-color') ||
+              null,
+            dark: root.style.getPropertyValue(PAGE_GROUNDS.dark) || null,
+            light: root.style.getPropertyValue(PAGE_GROUNDS.light) || null,
+          }),
+
+          write: ({ primary, secondary, dark, light }) => {
+            const current = window.mwPalette.read();
+            const same =
+              current.primary === primary &&
+              current.secondary === secondary &&
+              current.dark === dark &&
+              current.light === light;
+            // Typing into the setup box fires per keystroke, and settle() forces
+            // a reflow - so a run that changes nothing has to cost nothing
+            if (same) return;
+
+            [
+              ['primary', primary, primaryInput],
+              ['secondary', secondary, secondaryInput],
+            ].forEach(([name, value, input]) => {
+              if (value) {
+                paint(name, value);
+                input.value = value;
+              } else {
+                root.style.removeProperty(`--mw-${name}-color`);
+                root.style.removeProperty(`--mw-${name}-accent-text-color`);
+                input.value = BUILT_IN[name];
+              }
+            });
+
+            Object.entries(PAGE_GROUNDS).forEach(([key, prop]) => {
+              const value = key === 'dark' ? dark : light;
+              if (value) root.style.setProperty(prop, value);
+              else root.style.removeProperty(prop);
+            });
+
+            const shownPrimary = primary || BUILT_IN.primary;
+            const shownSecondary = secondary || BUILT_IN.secondary;
+            items.forEach((item) =>
+              item.classList.toggle(
+                'mw-active',
+                item.dataset.primary === shownPrimary &&
+                  item.dataset.secondary === shownSecondary
+              )
+            );
+
+            settle();
+          },
+        };
       });
 
       // just for the showcase: the variant switches. Each one is a class on <html>
@@ -1014,10 +1108,28 @@
             : input.checked;
 
         const render = () => {
+          // Never while it is being typed in - the box is an input as well as a
+          // readout, and rewriting it under the cursor would eat the paste
+          if (document.activeElement === setup) return;
+
           const classes = [];
           const notes = [];
           const props = [];
 
+          // The palette is part of the setup, and it is printed first because a
+          // project sets its brand colours before it retunes anything else
+          const palette = window.mwPalette?.read() ?? {};
+          [
+            ['--mw-primary-color', palette.primary],
+            ['--mw-primary-accent-text-color', palette.primaryInk],
+            ['--mw-secondary-color', palette.secondary],
+            ['--mw-secondary-accent-text-color', palette.secondaryInk],
+            ['--mw-dark-page-background', palette.dark],
+            ['--mw-light-page-background', palette.light],
+          ].forEach(([prop, value]) => {
+            if (value) props.push(`  ${prop}: ${value};`);
+          });
+
           controls.forEach((control) => {
             if (control.type !== 'checkbox') {
               if (control.value) {
@@ -1047,7 +1159,7 @@
           lines.push(...notes);
           if (props.length) lines.push(':root {', ...props, '}');
 
-          setup.textContent = lines.length
+          setup.value = lines.length
             ? lines.join('\n')
             : 'Default setup - nothing to change.';
         };
@@ -1064,6 +1176,58 @@
           }
         };
 
+        // The box read backwards: someone else's setup pasted in drives the
+        // switches, which drive the page. Anything the text does not mention
+        // falls back to the default, so an empty box is a reset.
+        const load = (text) => {
+          const named = new Set(
+            (text.match(/class\s*=\s*"([^"]*)"/)?.[1] || '')
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+          );
+          // `.mw-header: no mw-header-reveal` - a class the markup ships and the
+          // setup takes away, which is the deviation worth reading
+          const dropped = new Set(
+            [...text.matchAll(/:\s*no\s+([\w-]+)/g)].map((m) => m[1])
+          );
+          const props = new Map(
+            [...text.matchAll(/(--[\w-]+)\s*:\s*([^;\n}]+)/g)].map((m) => [
+              m[1],
+              m[2].trim(),
+            ])
+          );
+
+          window.mwPalette?.write({
+            primary: props.get('--mw-primary-color') ?? null,
+            secondary: props.get('--mw-secondary-color') ?? null,
+            dark: props.get('--mw-dark-page-background') ?? null,
+            light: props.get('--mw-light-page-background') ?? null,
+          });
+
+          controls.forEach((control) => {
+            if (control.type === 'checkbox') {
+              const name = control.dataset.variantClass;
+              const on = control.dataset.variantTarget
+                ? !dropped.has(name)
+                : named.has(name);
+              control.checked = control.hasAttribute('data-variant-invert')
+                ? !on
+                : on;
+            } else {
+              control.value = props.get(control.dataset.variantProp) ?? '';
+            }
+            apply(control);
+          });
+        };
+
+        // Picking a palette repaints the page, and the box has to say so
+        window.mwRefreshSetup = render;
+
+        setup.addEventListener('input', () => load(setup.value));
+        // Normalises what was pasted back into the shape render() writes
+        setup.addEventListener('blur', render);
+
         controls.forEach((control) =>
           control.addEventListener('change', () => {
             apply(control);