maverick-wave 4.21.0 → 4.23.0

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

@@ -215,7 +215,8 @@ feature frame) ·
 `mw-rating` · `mw-meta-header` · `mw-stepper` · `mw-timeline-big` /
 `mw-timeline-simple`
 
-**Feedback** `mw-alert` · `mw-toast-stack` · `mw-empty-state` ·
+**Feedback** `mw-alert` · `mw-toast-stack` · `mw-announcement` (+ `-content`,
+`-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` ·
@@ -223,9 +224,10 @@ feature frame) ·
 `-caret`, `-end`, `-up`) · `mw-section-nav` (`references/layout.md`)
 
 **Media & content** `mw-avatar` (+ `initials`, `group`) · `mw-gallery` ·
-`mw-image-slider` · `mw-blog-post` · `mw-code-block` / `mw-terminal` ·
-`mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` · `mw-kbd` ·
-`mw-list` family
+`mw-image-slider` · `mw-blog-post` · `mw-testimonial` (+ `-source`, `-detail`,
+`-featured`) · `mw-prose` · `mw-media` (+ `-caption`) · `mw-code-block` /
+`mw-terminal` · `mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` ·
+`mw-kbd` · `mw-list` family
 
 **Forms** (`references/forms.md`) `mw-field` · `mw-input` · `mw-select` ·
 `mw-textarea` · `mw-checkbox` · `mw-radio` · `mw-toggle` · `mw-slider` ·
@@ -233,8 +235,8 @@ feature frame) ·
 `mw-form-actions` · `mw-login`
 
 **Layout** (`references/layout.md`) `mw-main` · `mw-container` · `mw-content` ·
-`mw-section` · `mw-page-header` · `mw-grid-*` · `mw-row-split` · `mw-hero` ·
-`mw-footer`
+`mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*` ·
+`mw-columns-2/3` · `mw-row-split` · `mw-hero` · `mw-footer`
 
 **Utilities** (`references/layout.md`) `mw-sr-only` / `mw-sr-only-focusable` /
 `mw-skip-link` · `mw-row-split` (+ `center`) · `mw-text-numeric` /
@@ -244,7 +246,7 @@ feature frame) ·
 `mw-corner-plain` ·
 `mw-aspect-square|video|wide|portrait|photo` · `mw-d-{sm,md,lg,xl}-*` /
 `mw-hide-mobile` / `mw-hide-desktop` · `mw-overflow-*` / `mw-snap-x` ·
-spacing, flex, display, text
+`mw-reveal` · spacing, flex, display, text
 
 ## Pitfalls
 

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

@@ -636,6 +636,32 @@ class), `-top-center`, `-bottom-right`. Width is capped at
 the entry animation respects `prefers-reduced-motion`. Auto-dismiss is the
 application's job.
 
+## Announcement
+
+The ribbon glued under the fixed header - a discount, a launch note, a
+maintenance window. One per page.
+
+```html
+<aside class="mw-announcement mw-announcement-secondary">
+  <a class="mw-announcement-content" href="#pricing">
+    <span class="mw-announcement-highlight">-20 %</span>
+    <span>Summer discount on all coachings until 06.09.</span>
+  </a>
+</aside>
+```
+
+Positioned fixed below the header and one z-index layer under it, and it stays
+there - the page scrolls beneath it. Variants: `mw-announcement-secondary`,
+`-success`, `-warning`, `-danger`, `-info` (primary is the default).
+`mw-announcement-highlight` is the pill in front of the text; the content
+element is usually an `<a>` but a plain `<div>` works.
+`mw-announcement-static` puts the ribbon into the document flow instead - it
+then scrolls with the content and shifts no anchor offset.
+
+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.
+
 ## Empty state
 
 ```html
@@ -1561,6 +1587,65 @@ current button carry `active`.
 `mw-blog-post-content-markdown` styles unclassed HTML - the target for rendered
 markdown. `mw-blog-post-content` is the same wrapper for hand-written markup.
 
+## Testimonial
+
+A quote card with its source - a voice about the product. A `figure`, because
+quote and attribution belong together:
+
+```html
+<figure class="mw-testimonial">
+  <blockquote>
+    The workshop picked me up after a long day of talking.
+  </blockquote>
+  <figcaption class="mw-testimonial-source">
+    Anna M. <span class="mw-testimonial-detail">&middot; voice workshop</span>
+  </figcaption>
+</figure>
+```
+
+The card carries the surface, so inside it the blockquote drops most of its
+tint and keeps only the edge and the quotation marks. `mw-testimonial-source`
+uses `margin-top: auto` - in a grid of equal-height cards every source line
+sits on its card's bottom edge. `mw-testimonial-featured` sets the quote a
+size larger, for the one voice lifted above the grid.
+
+For a wall of testimonials of unequal length, put them in `mw-columns-2` or
+`mw-columns-3` (`references/layout.md`) instead of a grid.
+
+## Prose
+
+Long-form running text - a legal page, terms, a plain article. One class on
+the container, bare `h2`/`h3`/`p`/`ul` inside:
+
+```html
+<div class="mw-card mw-card-simple mw-prose">
+  <h2>1. Scope</h2>
+  <p>...</p>
+  <h2>2. Contact</h2>
+  <p>...</p>
+</div>
+```
+
+Headings are deliberately small (`lg`/`md`, primary ink) - in a document they
+structure the reading rather than compete with the page title. First and last
+child lose their outer margins, so the container's own padding rules.
+
+## Media
+
+Self-hosted audio and video. The native controls are the player -
+`accent-color` already brands them - the wrapper only makes the element sit
+right:
+
+```html
+<div class="mw-media">
+  <video src="/media/intro.mp4" controls preload="metadata"></video>
+  <p class="mw-media-caption">Two minutes about how a session works.</p>
+</div>
+```
+
+`audio` and `video` become full-width blocks; a video also gets the surface
+silhouette and a resting shadow. Works with `<audio controls>` the same way.
+
 ## Code & terminal
 
 ```html

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

@@ -162,13 +162,14 @@ viewport, so keep long tooltips off the outermost elements.
 
 ## Sections
 
-| Class                               | Use                                                                        |
-| ----------------------------------- | -------------------------------------------------------------------------- |
-| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 1.75rem    |
-| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                     |
-| `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages |
-| `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                     |
-| `mw-section-nav` + `mw-section-btn` | Centered, wrapping row of outline-style jump links                         |
+| Class                               | Use                                                                                                            |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`) |
+| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                                                         |
+| `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages                                     |
+| `mw-section-intro`                  | The lead paragraph under a section title - centred, muted, 46rem measure                                       |
+| `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                                                         |
+| `mw-section-nav` + `mw-section-btn` | Centered, wrapping row of outline-style jump links                                                             |
 
 ```html
 <section class="mw-section mw-section-alternate">
@@ -303,6 +304,21 @@ Every one of them has a `-lg` twin with a wider gap (2.5rem instead of 1.35rem):
 | `mw-grid-stack-stretch`                       | full width (same result as `mw-grid-1`) |
 | `mw-grid-stack-lg`, `mw-grid-stack-center-lg` | wide-gap twins                          |
 
+**Masonry columns** - `mw-columns-2` and `mw-columns-3`, for cards of unequal
+height where a row grid tears a gap under every short one. CSS multi-column:
+the children flow into columns and close up, the count steps down with the
+viewport (3 → 2 below `lg`, → 1 below `sm`), and every child keeps
+`break-inside: avoid` so a break never lands mid-card. Reading order runs top
+to bottom, then across - right for testimonials and galleries, wrong for
+anything ranked or chronological.
+
+```html
+<div class="mw-columns-3">
+  <figure class="mw-testimonial">...</figure>
+  <figure class="mw-testimonial">...</figure>
+</div>
+```
+
 ## Utilities
 
 **Spacing** - margin `mw-m-*`, `mw-mt-*`, `mw-mb-*`, `mw-ml-*`, `mw-mr-*`,
@@ -340,6 +356,13 @@ with it; `mw-text-capitalize` is the plain transform.
 **Elevation** - `mw-elevation-0` through `-5`, the same ramp every component
 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. 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.
+
 **Corner accent** - `mw-corner-plain` drops the accent arc that sits on the
 two round corners of every card, panel, modal, tile, accordion, calendar,
 pagination and login box. Everything else stays: the radii, the border, the

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

@@ -77,7 +77,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-table-scroll-height`                                                                                                                                                   | Per-table height cap for `mw-table-responsive-scroll`                                                                                                                                                                                                                                                                                   |
 | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height`                                                                                         | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`)                                                                                                                                                                                                                                                      |
 | `--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` (1.75rem)                                                                                                                                                                                                                                                                                             |
+| `--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-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                                                                                                                                                          |

package/.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
         run: npm ci
 
       - name: Check formatting
-        run: npm run format:check
+        run: npm run format
 
       # Fails on any Sass error, so a broken @use or an unknown function
       # never reaches a release

package/.prettierignore

@@ -4,3 +4,5 @@ package-lock.json
 
 # built output
 dist
+maverick-wave.min.css
+maverick-wave.min.js

package/CHANGELOG.md

@@ -6,6 +6,23 @@ 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).
 
+## [4.23.0] - 2026-09-01
+
+### Changed
+
+- Technical updates
+
+## [4.22.0] - 2026-09-01
+
+### Added
+
+- `mw-announcement` - the ribbon under the fixed header (discount, launch note), with `-content`, `-highlight` pill, color variants, a `-static` in-flow variant and `--mw-announcement-height` driving the anchor scroll offset
+- `mw-testimonial` - quote card with `-source`, `-detail` and `-featured`, built for walls of voices
+- `mw-prose` - long-form running text container (legal pages, terms, articles): bare h2/h3/p/ul inside, no utility chains
+- `mw-section-intro` - the lead paragraph under a `mw-section-title`
+- `mw-reveal` - scroll entrance via `animation-timeline: view()`, guarded for reduced motion and older browsers
+- `mw-media` - self-hosted audio and video sit full width, video in the surface silhouette
+
 ## [4.21.0] - 2026-08-31
 
 ### Fixed

package/CLAUDE.md

@@ -12,9 +12,12 @@ MaverickWave is a lightweight, modern CSS framework providing a grid system, 25+
 npm start          # Build + watch for changes (development)
 npm run build      # Clean dist, then full build
 npm run showcase   # Serve built dist on http://localhost:8888
-npm run clean      # Remove dist/ and root maverick-wave.{css,js}
-npm run format     # Format all SCSS, JS, JSON, HTML, MD with Prettier
-npm run release    # Build non-minified maverick-wave.{css,js} in project root
+npm run clean      # Remove dist/ (never touches the root release files)
+npm run format     # Check formatting of SCSS, JS, JSON, HTML, MD (used by CI)
+npm run format:fix # Format all files with Prettier
+npm run verify     # Consistency checks between built CSS, markup and docs
+npm run prepack    # Build minified maverick-wave.min.{css,js} in project root
+                   # (runs automatically before npm pack / npm publish)
 ```
 
 There are no test or lint scripts.
@@ -46,7 +49,7 @@ There are no test or lint scripts.
 
 ## Code Formatting
 
-Prettier is the single formatter. Config (`.prettierrc.json`): single quotes, 80-char print width, 2-space tabs, semicolons, trailing commas (ES5). Run `npm run format` before committing.
+Prettier is the single formatter. Config (`.prettierrc.json`): single quotes, 80-char print width, 2-space tabs, semicolons, trailing commas (ES5). Run `npm run format:fix` before committing.
 
 ## Commit Convention
 

package/gulpfile.js

@@ -135,11 +135,11 @@ gulp.task('inject-build-info', function () {
     .pipe(gulp.dest(paths.dist));
 });
 
-// clean - remove dist and maverick-wave.css & maverick-wave.js
+// clean - remove dist only. The root maverick-wave.min.* files are committed
+// release artifacts - deleting them here once shipped a broken npm package
+// (4.22.0) because a plain build before publish wiped them.
 gulp.task('clean', async function () {
-  await deleteAsync(['dist', 'maverick-wave.min.css', 'maverick-wave.min.js'], {
-    force: true,
-  });
+  await deleteAsync(['dist'], { force: true });
 });
 
 // Watch for changes

package/index.html

@@ -150,6 +150,10 @@
       <section id="foundations" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Foundations</h2>
+          <p class="mw-section-intro">
+            The raw material - type, color, spacing and the small utilities
+            everything else is built from.
+          </p>
           <nav class="mw-section-nav">
             <a href="#typography" class="mw-section-btn">Typography</a>
             <a href="#colors" class="mw-section-btn">Main Colors</a>
@@ -197,6 +201,10 @@
       <section id="layout" class="mw-section mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Layout</h2>
+          <p class="mw-section-intro">
+            The bones of a page - grids, cards, panels and the containers that
+            hold content together.
+          </p>
           <nav class="mw-section-nav">
             <a href="#grid" class="mw-section-btn">Grid System</a>
             <a href="#cards" class="mw-section-btn">Cards</a>
@@ -264,6 +272,10 @@
       <section id="components" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Components</h2>
+          <p class="mw-section-intro">
+            The everyday parts - buttons, tags, alerts and their many friends,
+            ready to drop in.
+          </p>
           <nav class="mw-section-nav">
             <a href="#buttons" class="mw-section-btn">Buttons</a>
             <a href="#button-bar" class="mw-section-btn">Button Bar</a>
@@ -277,6 +289,7 @@
             <a href="#ratings" class="mw-section-btn">Ratings</a>
             <a href="#info" class="mw-section-btn">Info</a>
             <a href="#alerts" class="mw-section-btn">Alerts</a>
+            <a href="#announcement" class="mw-section-btn">Announcement</a>
             <a href="#code" class="mw-section-btn">Code</a>
             <a href="#skeleton" class="mw-section-btn">Skeleton</a>
             <a href="#empty-state" class="mw-section-btn">Empty State</a>
@@ -337,6 +350,11 @@
             @@include('./src/partials/alerts-container.html')
           </div>
 
+          <!-- Announcement container -->
+          <div id="announcement">
+            @@include('./src/partials/announcement-container.html')
+          </div>
+
           <!-- Code container -->
           <div id="code">@@include('./src/partials/code-container.html')</div>
 
@@ -361,6 +379,10 @@
       <section id="forms" class="mw-section mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Forms</h2>
+          <p class="mw-section-intro">
+            Inputs, selects, toggles and validation - fields and buttons share
+            one height scale by construction.
+          </p>
           <nav class="mw-section-nav">
             <a href="#form-elements" class="mw-section-btn">Form Elements</a>
             <a href="#input-group" class="mw-section-btn">Input Group</a>
@@ -402,6 +424,10 @@
       <section id="data-display" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Data & Display</h2>
+          <p class="mw-section-intro">
+            Tables, boards, timelines and long-form content - everything that
+            shows real data.
+          </p>
           <nav class="mw-section-nav">
             <a href="#page-header" class="mw-section-btn">Page Header</a>
             <a href="#meta-info" class="mw-section-btn">Meta Info</a>
@@ -415,6 +441,9 @@
               >Technology Stack Bucket</a
             >
             <a href="#content-slider" class="mw-section-btn">Content Slider</a>
+            <a href="#testimonials" class="mw-section-btn">Testimonials</a>
+            <a href="#prose" class="mw-section-btn">Prose</a>
+            <a href="#media" class="mw-section-btn">Media</a>
             <a href="#blog-posts" class="mw-section-btn">Blog Posts</a>
           </nav>
 
@@ -468,6 +497,17 @@
             @@include('./src/partials/content-slider-container.html')
           </div>
 
+          <!-- Testimonials container-->
+          <div id="testimonials">
+            @@include('./src/partials/testimonials-container.html')
+          </div>
+
+          <!-- Prose container-->
+          <div id="prose">@@include('./src/partials/prose-container.html')</div>
+
+          <!-- Media container-->
+          <div id="media">@@include('./src/partials/media-container.html')</div>
+
           <!-- Blogposts container-->
           <div id="blog-posts">
             @@include('./src/partials/blog-posts-container.html')