maverick-wave 5.3.0 → 5.5.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.2.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.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.2.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.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/angular-services.md

@@ -369,3 +369,94 @@ about the class name.
 
 `mw-progress-percent` only appends the `%` sign - the number comes from you, and
 so does the width.
+
+## Scroll reveal
+
+`mw-reveal` runs on the browser's scroll timeline and needs nothing from you -
+except in Firefox, which ships none, where the block appears without motion.
+This directive is the Firefox half: it adds to the class, never replaces it.
+
+```ts
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  afterNextRender,
+  inject,
+  signal,
+} from '@angular/core';
+
+@Directive({
+  selector: '[mwReveal]',
+  host: {
+    '[class.mw-reveal-hidden]': "state() === 'hidden'",
+    '[class.mw-reveal-run]': "state() === 'run'",
+    '[style.animation-delay.ms]': 'delay()',
+  },
+})
+export class MwRevealDirective {
+  private readonly host =
+    inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  protected readonly state = signal<'off' | 'hidden' | 'run'>('off');
+  protected readonly delay = signal(0);
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    afterNextRender(() => {
+      if (CSS.supports('animation-timeline', 'view()')) return;
+      if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      // Already on screen: past its entry range in a timeline browser too
+      if (this.host.getBoundingClientRect().top < innerHeight) return;
+
+      this.state.set('hidden');
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry.isIntersecting) return;
+          observer.disconnect();
+          this.delay.set(this.columnDelay());
+          this.state.set('run');
+        },
+        { threshold: 0.15 }
+      );
+
+      observer.observe(this.host);
+      destroyRef.onDestroy(() => observer.disconnect());
+    });
+  }
+
+  // The wave a grid draws in CSS, read back from the columns the browser
+  // rendered - one on a phone, so the stagger disappears with them.
+  private columnDelay(): number {
+    const grid = this.host.parentElement;
+    if (!grid?.classList.contains('mw-reveal-stagger')) return 0;
+    const columns =
+      getComputedStyle(grid).gridTemplateColumns.split(' ').length;
+    return ([...grid.children].indexOf(this.host) % columns) * 90;
+  }
+}
+```
+
+A single block carries `mw-reveal`, a grid carries `mw-reveal-stagger` and its
+children carry nothing but the directive:
+
+```html
+<article class="mw-card mw-reveal" mwReveal>...</article>
+
+<div class="mw-grid-4 mw-reveal-stagger">
+  @for (item of items(); track item.id) {
+  <article class="mw-card" mwReveal>...</article>
+  }
+</div>
+```
+
+Unlike the shipped script this also covers what a route renders later - the
+directive runs per element, not once per page.
+
+`mw-header-reveal` and `mw-parallax` need the same treatment and the same
+`CSS.supports` guard. The header is a class toggled past a scroll threshold; the
+parallax writes `--mw-parallax-progress` (0 to 1) on each `mw-parallax-media`
+from a `requestAnimationFrame` loop, reading every layer's rect before writing
+to any of them.

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.2.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.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.2.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.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.
@@ -523,8 +523,9 @@ accordion FAQ.
 - `mw-reveal-stagger` goes on the grid (or `mw-columns-*`) and reveals every
   child as it scrolls in, the second and third of each three a beat later.
   `mw-reveal` on a single block reveals that block as one. Both are off under
-  `prefers-reduced-motion`, and a browser without scroll timelines renders the
-  blocks in place - never invisible.
+  `prefers-reduced-motion`. A page like this one loads the script, so Firefox -
+  which has no scroll timelines - runs the same entrance off an observer;
+  without the script the blocks stand in place, never invisible.
 - `mw-offer` on a card pushes the price row to the bottom of the body, so the
   prices in a row line up. The `mw-card-feature` frame around the middle plan
   reaches 29px above its card - the `mw-mt-10` on the grid is that room.

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

@@ -536,6 +536,9 @@ still renders the same, for markup written before 4.12.
 Open state = `mw-active` on header **and** content (bare `active` still works
 but is deprecated). The icon rotates via the **header** state - putting the
 class on the icon instead does nothing. Content taller than 500px scrolls.
+The `mw-accordion-content-inner` wrapper is required and not decoration: the
+panel opens by animating a grid row and that wrapper is the row, so content
+placed straight into `mw-accordion-content` never collapses when closed.
 Toggling is JS - see `references/javascript.md`; the shipped script keeps
 `aria-expanded` in step when the header is a button.
 
@@ -699,6 +702,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

@@ -2,7 +2,7 @@
 
 ## What `maverick-wave.min.js` is
 
-One vanilla IIFE, no dependencies, ~8 kB. It queries the DOM **once** on
+One vanilla IIFE, no dependencies, ~23 kB. It queries the DOM **once** on
 `DOMContentLoaded` and attaches listeners. There is no re-init API, no
 `MutationObserver`, no exported module - it is built for a server-rendered or
 static page.
@@ -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]`                                                                                                                                                                             |
@@ -43,9 +44,26 @@ classes are the entire contract.
 | Calendar            | Renders the month or week grid from `data-calendar="month                                                                                                                                                                                                                       | week"`, pages with `data-calendar-nav`, draws the status dots from `data-calendar-markers`, toggles `mw-selected`and emits`mw-calendar-select`                                                                               | Render the cells from a signal and bind `mw-calendar-adjacent`, `mw-calendar-weekend`, `mw-calendar-today` and `mw-selected` yourself; none of the `data-calendar-*` attributes are needed |
 | Localhost indicator | On a local hostname, prepends `mw-localhost-indicator-pulse` to the header when it carries `mw-localhost-indicator-activated`                                                                                                                                                   | Render the element conditionally                                                                                                                                                                                             |
 | Header login button | Swaps the FontAwesome lock icon                                                                                                                                                                                                                                                 | Bind the icon class                                                                                                                                                                                                          |
-| Color swatches      | Showcase-only (prints computed hex values)                                                                                                                                                                                                                                      | Not needed                                                                                                                                                                                                                   |
+| Color swatches      | Showcase-only (prints computed hex values); exposes `window.mwRefreshColorSwatches` to read them again after a root colour changed                                                                                                                                              | Not needed                                                                                                                                                                                                                   |
 | Dropdown            | Delegated to the document: closes the open `mw-dropdown` on Escape, on a click elsewhere and on a click on a `mw-dropdown-item`, and returns focus to the `summary`                                                                                                             | The `<details>` does the opening, the keyboard and the state on its own. Rebuild only the two behaviours markup cannot express - or bind `[attr.open]` and keep them in the component                                        |
 | Language switcher   | Keeps the trigger's flag and code in step with the chosen item, moves `mw-active` and `aria-current`, and fires `mw-language-change` (`detail: { lang, name }`) on the switcher                                                                                                 | Bind the trigger from your locale signal and switch the language in your own i18n service; the menu itself is a `<details>` and needs nothing                                                                                |
+| Scroll reveal       | Firefox only: an `IntersectionObserver` adds `mw-reveal-hidden` to what is still below the fold and swaps it for `mw-reveal-run` on entry, with an `animation-delay` per grid column                                                                                            | A directive per element - see `examples/angular-services.md`                                                                                                                                                                 |
+| Header reveal       | Firefox only: toggles `mw-header-away` and `mw-announcement-away` past 270px of scroll, and adds the transition class one frame later so the bar does not slide away on load                                                                                                    | The same two classes bound to a scroll signal, behind the same guard                                                                                                                                                         |
+| Parallax            | Firefox only: writes `--mw-parallax-progress` (0 to 1) on every `mw-parallax-media` from a `requestAnimationFrame` loop                                                                                                                                                         | The same, reading every layer's rect before writing to any of them                                                                                                                                                           |
+
+## Scroll-driven animations
+
+Four things ride the browser's own scroll timeline: `mw-reveal`,
+`mw-header-reveal`, `mw-parallax` and the `mw-progress-fill` scrub. In Chrome,
+Edge and Safari they need no script at all. Firefox ships no scroll timelines,
+so there - and only there - the shipped JS stands in for them. Each one checks
+`CSS.supports('animation-timeline', ...)` first and does nothing where the
+browser has it.
+
+Without the script Firefox loses the motion and nothing else: cards stand in
+place, the picture holds still. The exception is `mw-header-reveal`, where the
+bar then sits over the hero from the first paint - a layout difference, not a
+missing effect.
 
 ## Modals and progress bars
 

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

@@ -133,6 +133,19 @@ 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).
+Under `prefers-reduced-motion` the bar is simply there, and so it is without
+scroll timelines unless `maverick-wave.min.js` is on the page - in Firefox that
+is what rides it in (`javascript.md`).
+
 **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 +320,61 @@ 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, and on no
+`background-attachment: fixed`, which iOS ignores. Firefox has neither timeline;
+there the shipped JS moves the layers instead, and without it the picture simply
+sits still (`javascript.md`).
+
+```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
@@ -402,19 +470,22 @@ with it; `mw-text-capitalize` is the plain transform.
 uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
 
 **Scroll entrance** - `mw-reveal` lets a block rise briefly as it scrolls into
-view, driven by the browser's scroll timeline (`animation-timeline: view()`) -
-no JavaScript, no observer. The block stays hidden until it is 8dvh above the
-bottom edge and has arrived by 34dvh, the same zone for every block whatever
-its height, so the motion happens where the eye is and is over before the
-block is read. Doubly guarded: `prefers-reduced-motion` turns it
-off, and a browser without scroll timelines renders the block in place instead
-of leaving it invisible. Put it on section content, not on the section itself -
-a screen-high band finishes its entrance before its content is halfway up.
+view, driven by the browser's scroll timeline (`animation-timeline: view()`).
+The block stays hidden while it is still below the bottom edge and has arrived
+three fifths of the way in - measured along its own entry, so it is never still
+transparent once it stands in its place, whatever its height. A block taller
+than the screen is capped at one viewport by the entry phase itself. Doubly guarded:
+`prefers-reduced-motion` turns it off, and a browser without scroll timelines
+renders the block in place instead of leaving it invisible. Firefox is that
+browser - there the shipped JS runs the entrance off an `IntersectionObserver`,
+so a page without the script keeps the block and loses only the motion
+(`javascript.md`). Put it on section content, not on the section itself - a
+screen-high band finishes its entrance before its content is halfway up.
 
 A row of cards crosses the viewport edge together, so `mw-reveal` on each of
 them rises as one slab. `mw-reveal-stagger` goes on the **grid** instead: every
-child reveals, and each one in a row 4dvh of scroll after the one before it -
-a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
+child reveals, and each one in a row a tenth of that entry after the one
+before it - a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
 their `-lg` variants the wave follows the actual columns at every breakpoint:
 four steps in a four-column row, two once it has collapsed to two. Any other
 container - `mw-columns-*`, a layout of your own - gets a fixed cycle of three.

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

@@ -9,6 +9,10 @@ borders, the theme's surface stack, the ink variant the dark theme needs. That i
 the difference to pre-3.4.0, where derived values were baked in at compile time
 and a palette switch meant setting 41 variables.
 
+Writing those tokens on `<html>` at runtime is how a palette is swapped without
+a reload. It repaints the same breadth the theme flip does and needs the same
+guard against a page-wide interpolation - see **Light & dark** below.
+
 Browser floor for that: `color-mix()` **and** `oklch(from ...)` - Chrome 119+,
 Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 `package.json`, so Autoprefixer and cssnano target exactly it.
@@ -226,6 +230,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,24 @@ 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.5.0] - 2026-09-12
+
+### Added
+
+- showcase themes
+
+### Fixed
+
+- some firefox fixes
+- scrolling
+
+## [5.4.0] - 2026-09-11
+
+### Added
+
+- parallax layout
+- parallax hero with flexible header navbar
+
 ## [5.3.0] - 2026-09-11
 
 ### Fixed

package/CLAUDE.md

@@ -38,7 +38,7 @@ There are no test or lint scripts.
 
 **JavaScript** (`src/js/main.js`) - Single file. All components auto-initialize on `DOMContentLoaded`. Includes: gallery and image sliders, theme toggle (persisted to localStorage, transitions suppressed during the flip), accordion, mobile nav, progress bar (IntersectionObserver), scroll spy, tabs (which also get their ARIA and arrow-key handling here), alerts/toasts, modals, range inputs, dropdowns, language switcher, checkbox lists, kanban board, calendar.
 
-**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in 60 partials from `src/partials/`. These compile into `dist/index.html`.
+**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in 63 partials from `src/partials/`. These compile into `dist/index.html`.
 
 ## Naming Conventions
 

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.2.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.2.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```
@@ -515,9 +515,8 @@ maverick-wave/
 │       ├── utilities/      # Spacing, flex, display helpers
 │       └── main.scss       # SCSS entry point
 ├── .claude/
-│   ├── commands/mw.md      # Claude Code slash command (Angular quick reference)
 │   └── skills/
-│       └── maverick-wave/  # Claude Code skill: full usage guide + examples
+│       └── mw-maverick-wave/  # Claude Code skill: full usage guide + examples
 ├── scripts/verify.js       # Class and token consistency check (npm run verify)
 ├── .prettierrc.json        # Prettier configuration
 ├── gulpfile.js             # Gulp tasks configuration