maverick-wave 5.2.0 → 5.4.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.0.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.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.0.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -
@@ -233,7 +233,8 @@ feature frame) ·
 `-highlight`, `-static`, color variants) · `mw-empty-state` ·
 `mw-spinner-border` / `mw-spinner-dots` / `mw-spinner-dual-ring` · `mw-skeleton`
 
-**Navigation** `mw-header` + `mw-navbar` · `mw-breadcrumbs` · `mw-pagination` ·
+**Navigation** `mw-header` (+ `mw-header-reveal`) + `mw-navbar` ·
+`mw-breadcrumbs` · `mw-pagination` ·
 `mw-dropdown` (+ `-menu`, `-item`, `-item-danger`, `-divider`, `-label`,
 `-caret`, `-end`, `-up`) · `mw-lang-switch` (+ `-code`, `-name`, `-check`,
 `inverted`) · `mw-flag` (+ 23 country codes) ·
@@ -252,7 +253,9 @@ feature frame) ·
 
 **Layout** (`references/layout.md`) `mw-main` · `mw-container` · `mw-content` ·
 `mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*` ·
-`mw-columns-2/3` · `mw-row-split` · `mw-hero` (+ `mw-scroll-hint`, `-end`) · `mw-footer`
+`mw-columns-2/3` · `mw-row-split` · `mw-hero` (+ `mw-scroll-hint`, `-end`) ·
+`mw-parallax` (+ `-media`, `-content`, `-dimmed`, `-sticky`, `-rise`,
+`-pattern`) · `mw-footer`
 
 **Utilities** (`references/layout.md`) `mw-sr-only` / `mw-sr-only-focusable` /
 `mw-skip-link` · `mw-row-split` (+ `center`) · `mw-text-numeric` /
@@ -403,3 +406,9 @@ feature frame) ·
     control height and works on an `<a>` and a `<button>` alike.
     `mw-btn mw-btn-link` stays right where the link really is one of several
     buttons and has to line up with them - a card's actions, a button bar.
+29. **`mw-parallax-sticky` goes on the section, not on the hero.** Sticky pins
+    inside its parent, and the rule that lifts the page above the pinned picture
+    reaches that content as a _sibling_. Put the class on the hero itself and
+    nothing pins and nothing covers - no error, no effect, and the picture shows
+    through every transparent section below. `mw-parallax` and the
+    `mw-parallax-media` child stay where the image is: on the container.

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

@@ -699,6 +699,10 @@ The height lives in `--mw-announcement-height` and drives the anchor scroll
 offset (`scroll-padding-top`) automatically - a taller ribbon raises the token
 instead of fighting the offset.
 
+On a page whose header carries `mw-header-reveal` the ribbon leaves and arrives
+with it, without a class of its own - both cover the height of the pair, so they
+come in as one block. See `references/layout.md`.
+
 ## Empty state
 
 ```html

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

@@ -32,6 +32,7 @@ classes are the entire contract.
 | Modal               | Click on `mw-modal-close` removes `mw-modal-open` from the overlay                                                                                                                                                                                                              | `[class.mw-modal-open]="isOpen()"`; backdrop click closes. Opening is not in the script at all (the showcase has its own `openModal`)                                                                                        |
 | Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar`, writes `aria-expanded` when the button is a `<button>`, closes on anchor click and on Escape (focus returns to the button)                                                                                                     | One signal, bound to both; reset it on navigation end                                                                                                                                                                        |
 | Scroll spy          | Sets `mw-active` on `mw-navbar-link` from the scroll position                                                                                                                                                                                                                   | Router-based: `routerLinkActive="mw-active"`                                                                                                                                                                                 |
+| Anchor scrolling    | Intercepts `a[href^="#"]` and runs its own eased scroll - duration scales with distance, capped at 1.4s, cancelled by wheel or touch. Lands on `scroll-padding-top`, moves focus to the target, writes the hash with `replaceState`, and measures a sticky target unpinned      | The router; for in-page anchors `scrollIntoView({ behavior: 'smooth' })` or your own animation                                                                                                                               |
 | Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `mw-active` on the toggle, wrapped in `mw-theme-switching` on `<html>` so the flip starts no transitions                                                                                                   | A theme service - see `examples/angular-services.md`                                                                                                                                                                         |
 | Progress bar        | `IntersectionObserver` sets `width` from `data-value`                                                                                                                                                                                                                           | Bind `[style.width.%]="value()"` on `mw-progress-fill`                                                                                                                                                                       |
 | Slider              | On `input`, sets `--value` (track fill) and `data-value` (badge text)                                                                                                                                                                                                           | Bind `[style.--value.%]` and `[attr.data-value]`                                                                                                                                                                             |

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

@@ -133,6 +133,18 @@ same height as the login and burger buttons.
   to configure dark-theme values to change it. The bar itself is the primary
   darkened toward black, `$header-surface` (14%) - see `theming.md`.
 
+**Reveal on scroll.** `mw-header-reveal` keeps the bar above the screen and
+rides it in over the first 420px of scroll - for a page that opens on a
+full-bleed hero and wants nothing on top of it. It animates `top` and not a
+transform, because a transform on the header would make it the containing block
+of the off-canvas drawer inside it, at every value including the resting one.
+A fixed `mw-announcement` rides along without a class of its own - both cover
+the height of the pair, so they arrive as one block rather than the ribbon
+catching up. Focus inside either brings both back regardless of the scroll
+position, so tabbing never lands on a link that is off screen (WCAG 2.4.11).
+Without scroll timelines, or under `prefers-reduced-motion`, the bar is simply
+there.
+
 **Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
 and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
 192.168.\*. In a SPA, reimplement it: add a `<div class="mw-localhost-indicator-pulse">`
@@ -307,6 +319,59 @@ whose text is not centred either - and gives the hero its full height back.
 Below `md` both variants sit in the corner, because the middle under the text
 is taken on a phone. The bobbing stops under `prefers-reduced-motion`.
 
+**Parallax** - `mw-parallax` on the container plus a `mw-parallax-media` child
+moves the picture into its own layer. The container drops its own background and
+the layer reads `--mw-hero-background`, so the image stays configured in one
+place. Both modes run on the browser's scroll timeline - no listener, and no
+`background-attachment: fixed`, which iOS ignores.
+
+```html
+<header class="mw-header mw-header-reveal">...</header>
+
+<main class="mw-main">
+  <section class="mw-section mw-parallax-sticky mw-parallax-rise">
+    <div class="mw-container mw-parallax">
+      <div class="mw-parallax-media"></div>
+      <div class="mw-parallax-media mw-parallax-pattern"></div>
+      <div class="mw-hero">...</div>
+    </div>
+  </section>
+  <section class="mw-section">...</section>
+</main>
+```
+
+On its own, `mw-parallax` drifts the picture against the scroll by
+`--mw-parallax-depth` (`10vh`) - the layer overhangs the block by that much top
+and bottom, so no edge is ever uncovered.
+
+`mw-parallax-sticky` pins the block to the top of the screen and lets the page
+ride up over it. It goes on the element the page content is a **sibling** of -
+the section, not the hero - because everything after it is given
+`--mw-page-background` and a layer above, or the pinned picture shows through
+the transparent ones. Depth drops to `0` there: a pinned block does not travel
+through the viewport, so its `view()` timeline stands still with it.
+`mw-parallax-rise` puts it at `12vh` and runs the layer on the document's own
+scroll instead - the picture lifts, the text stays put. That works out to the
+same travel per scrolled pixel as a drifting band at `20vh`, which is measured
+over a much longer range.
+
+A second `mw-parallax-media` carrying `mw-parallax-pattern` puts a pattern over
+the picture. It travels a third of the distance the layer below it does, and
+that difference between the two is what reads as depth - one layer alone only
+slides. It matters most over a gradient: the travel is vertical, so only an edge
+across it - a rule, a grid, a hatch - ever shows the movement, and a gradient
+has none. In a hero the layer reads `$mw-hero-pattern`, the way the picture
+reads `$mw-hero-image`; anywhere else set `--mw-parallax-pattern-image` on it.
+`--mw-parallax-pattern-depth` is the dial, `4vh` next to a risen hero.
+
+Outside a hero the same classes build a standalone band: `mw-parallax`
+(`min-height: 42vh`), `mw-parallax-media` as an `<img>` or a div with a
+background image, `mw-parallax-content` for what sits on top, and
+`mw-parallax-dimmed` to turn the picture down and the text light.
+
+Without scroll timelines, or under `prefers-reduced-motion`, the picture stands
+still and nothing else changes.
+
 ## Grid
 
 All grid classes are `display: grid` with a preset gap (`mw-gap-*` overrides

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

@@ -226,6 +226,12 @@ effect, because the root colours are declared with `!default`.
   // stronger, more saturated blue, higher is paler with more contrast
   $header-active-tint: 25%,
   $mw-hero-image: url('/assets/hero.jpg'),
+  // a pattern layer over it, for a hero that parallaxes - see mw-parallax-pattern
+  $mw-hero-pattern: repeating-linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 5%) 0 1px,
+      transparent 1px 38px
+    ),
   // ink on that image - fixed, because the image is
   $mw-hero-text-color: var(--mw-dark-text-color),
   // per-theme treatment of that image - a filter, not an overlay, so the two

package/CHANGELOG.md

@@ -6,6 +6,19 @@ 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.4.0] - 2026-09-11
+
+### Added
+
+- parallax layout
+- parallax hero with flexible header navbar
+
+## [5.3.0] - 2026-09-11
+
+### Fixed
+
+- progress animation
+
 ## [5.2.0] - 2026-09-11
 
 ### Fixed

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.0.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.0.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```

package/index.html

@@ -69,6 +69,31 @@
         border: 1px solid var(--mw-border);
       }
 
+      /* The parallax pattern demo: a gradient has no edge across the travel,
+         the second layer brings one */
+      .parallax-demo-ground {
+        background-image: linear-gradient(
+          158deg,
+          #3c4f78 0%,
+          #2a3550 45%,
+          #1b2334 100%
+        );
+      }
+
+      .parallax-demo-lines {
+        --mw-parallax-pattern-image:
+          repeating-linear-gradient(
+            to bottom,
+            rgb(255 255 255 / 24%) 0 1px,
+            transparent 1px 34px
+          ),
+          repeating-linear-gradient(
+            to right,
+            rgb(255 255 255 / 14%) 0 1px,
+            transparent 1px 34px
+          );
+      }
+
       /* A calendar fills its container; across the full page that stretches the
          cells to 150px, so the demos get a realistic column instead */
       .calendar-demo {
@@ -102,7 +127,7 @@
     <a class="mw-skip-link" href="#main">Skip to content</a>
 
     <!-- Header -->
-    <header class="mw-header mw-localhost-indicator-activated">
+    <header class="mw-header mw-header-reveal mw-localhost-indicator-activated">
       <div class="mw-container">
         @@include('./src/partials/header-container.html')
       </div>
@@ -110,8 +135,8 @@
 
     <main class="mw-main" id="main">
       <!-- Home section -->
-      <section id="home" class="mw-section">
-        <div class="mw-container">
+      <section id="home" class="mw-section mw-parallax-sticky mw-parallax-rise">
+        <div class="mw-container mw-parallax">
           @@include('./src/partials/home-container.html')
         </div>
       </section>
@@ -210,6 +235,7 @@
             <a href="#html-lists" class="mw-section-btn">HTML Lists</a>
             <a href="#item-lists" class="mw-section-btn">Item Lists</a>
             <a href="#stepper" class="mw-section-btn">Stepper</a>
+            <a href="#parallax" class="mw-section-btn">Parallax</a>
           </nav>
 
           <!-- Grid container -->
@@ -258,6 +284,11 @@
           <div id="stepper">
             @@include('./src/partials/stepper-container.html')
           </div>
+
+          <!-- Parallax container -->
+          <div id="parallax">
+            @@include('./src/partials/parallax-container.html')
+          </div>
         </div>
       </section>