maverick-wave 4.6.0 → 4.8.0

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

@@ -163,7 +163,8 @@ Everything below is documented in `references/components.md` unless marked other
 `link`, `link-muted`, `plain`, `sm`, `lg`) · `mw-btn-mini` · `mw-button-bar`
 (+ `left`, `right`, `center`, `between`) · `mw-segmented` · `mw-actions-note`
 
-**Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon) ·
+**Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon,
+feature frame) ·
 `mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal` ·
 `mw-item-list` family
 

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

@@ -149,13 +149,20 @@ picker.
 - `mw-card-simple` is the flat variant with even padding for arbitrary content.
   Use it when you only need a padded surface - it stays a block container, so
   inline children keep flowing side by side.
-- Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px. Set
-  `--mw-card-img-height` on the card for any other height.
+- Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px (260px/340px below
+  `sm`). Set `--mw-card-img-height` on the card for any other height.
   `mw-card-img-contain` shows the whole image instead of cropping it.
 - `mw-card-footer` pushes its last child to the right - with a single child that
   means it sits right, not left. Everything is vertically centered, so plain text
-  lines up with a button next to it. Below `lg` the footer stacks and children go
-  full width.
+  lines up with a button next to it. Actions that no longer fit next to each
+  other wrap.
+- The footer stacks to full-width children once the **card** is narrower than
+  360px, not once the window is - a card in a three-column grid is just as narrow
+  on a 1200px desktop as it is on a phone, and now looks the same in both. This
+  is a container query: a card that has a footer declares
+  `container: mw-card / inline-size` and takes `width: 100%`, so it fills its
+  slot instead of sizing to its content. Give such a card an explicit width if
+  you need it to hug its content.
 - `mw-card-badge` (top right corner) and `mw-card-ribbon` (diagonal banner) are
   absolutely positioned overlays; colour them with `mw-card-addon-primary`,
   `-secondary`, `-success`, `-warning`, `-danger`, `-info`.
@@ -172,6 +179,42 @@ picker.
 </div>
 ```
 
+**Feature frame** - wraps a card to lift one option out of a grid of equals,
+for the "most booked" plan in a pricing row:
+
+```html
+<div class="mw-card-feature mw-card-feature-secondary">
+  <p class="mw-card-feature-label">Most booked</p>
+  <div class="mw-card">
+    <div class="mw-card-body">...</div>
+  </div>
+</div>
+```
+
+- Unlike badge and ribbon this is a **wrapper around** the card, not an overlay
+  inside it. The card itself stays untouched - same width, same height, same
+  hover as its neighbours - and the frame plus its label bar grow outwards into
+  the grid gap.
+- Colours are `mw-card-feature-secondary` and `mw-card-feature-info`; primary is
+  the default and needs no class. This is a separate set from the
+  `mw-card-addon-*` classes that colour badge and ribbon - the frame only comes
+  in those three.
+- The label is a single line. It is set in uppercase at `2xs` and truncates with
+  an ellipsis rather than wrapping, because the 22px bar height is baked into
+  the frame's negative margins.
+- The frame reaches 29px above the card and 7px below it, so it sticks out of
+  its grid cell. Any `mw-grid-*` that directly contains one therefore gets
+  `row-gap: 56px` automatically, which leaves 20px between two stacked frames.
+  CSS has no per-row gap, so this applies to every row of that grid - expect
+  wrapped rows without a frame to sit further apart than usual. That is also why
+  the bar is kept low: each extra pixel is charged to every row.
+- The space **above the first row** is not covered - the frame reaches into
+  whatever sits there. Give the container the room (`mw-mt-10` on the grid, or
+  `mw-mb-10` on the heading above it).
+- In a layout that is not a `mw-grid-*` - your own flex column, an Angular host
+  with its own grid - nothing raises the gap for you. Leave at least 36px
+  between stacked items yourself.
+
 **Stack card** - icon + title header with a gradient rule, for feature or
 tech-stack grids:
 

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

@@ -25,12 +25,15 @@
 
 - `mw-main` is a full-height flex column - the footer stays at the bottom on
   short pages.
-- `mw-container` is `min(1200px, 89%)`, horizontally centered. Nest it inside
-  every full-bleed band (header, section, footer), never around them. Below
-  576px it switches to a fixed 1rem gutter instead of the percentage - 89% of a
-  375px screen leaves 41px of nothing on a card that has to fit an amount, a
-  status and two labels into one row. Both widths are tokens,
-  `--mw-container-width` and `--mw-container-width-sm`.
+- `mw-container` is `min(1200px, 100% - 2 * gutter)`, horizontally centered.
+  Nest it inside every full-bleed band (header, section, footer), never around
+  them. The gutter is fluid - `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never smaller
+  than the safe-area inset - so it lands on ~24px at 375px, ~32px at 576px,
+  ~40px on a tablet and tops out at 64px, where the 1200px cap takes over. A
+  percentage alone keeps too little on a phone and throws away too much on a
+  desktop; stepping the gutter at a breakpoint instead would make the container
+  jump backwards at the step. Both values are tokens,
+  `--mw-container-gutter` and `--mw-container-width`.
 - `mw-content` (`flex: 1` + top padding) is the alternative to `mw-section` when
   a page has one single content area. `mw-content-centered` centers it
   vertically over the full viewport - login pages, error pages.

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

@@ -68,22 +68,23 @@ Safari 16.4+, Firefox 128+.
 | `--mw-font-family-base`, `-heading`, `-mono`                                                                                                                                       | Font stacks - system stacks by default (`-mono` leads with Fira Code); no font is bundled. Configurable in SCSS, see below                                                                                                                                                                       |
 | `--mw-hero-background`                                                                                                                                                             | Hero image (`url(...)`)                                                                                                                                                                                                                                                                          |
 | `--mw-transition`                                                                                                                                                                  | Global transition (`all 0.3s ease`)                                                                                                                                                                                                                                                              |
-| `--mw-card-img-height`                                                                                                                                                             | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px)                                                                                                                                                                                                                |
+| `--mw-card-img-height`                                                                                                                                                             | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px, 260px/340px below `sm`)                                                                                                                                                                                        |
 | `--mw-card-addon-color`                                                                                                                                                            | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour                                                                                                                                                                          |
 | `--mw-card-addon-text-color`                                                                                                                                                       | Label on that badge/ribbon; the `mw-card-addon-*` classes point it at the matching `--mw-*-accent-text-color`                                                                                                                                                                                    |
 | `--mw-progress-ink`                                                                                                                                                                | Label inside `mw-progress-inline-label`; the `mw-progress-*` colour classes point it at the matching `--mw-*-accent-text-color`                                                                                                                                                                  |
 | `--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-width`, `--mw-container-width-sm`                                                                                                                                  | Content width of `mw-container` (`min(1200px, 89%)`, below 576px a 1rem gutter)                                                                                                                                                                                                                  |
+| `--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-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-internal-theme-mode`                                                                                                                                                         | Read-only: what `$mw-theme-mode` was compiled to                                                                                                                                                                                                                                                 |
 
-`--mw-container-width`, `--mw-container-width-sm` and
-`--mw-section-padding-block` are the knobs a good default cannot settle, because
-the right answer differs per project: what reads as generous on a landing page
-costs visible content in an application with a sticky header.
+`--mw-container-gutter`, `--mw-container-width` and `--mw-section-padding-block`
+are the knobs a good default cannot settle, because the right answer differs per
+project: what reads as generous on a landing page costs visible content in an
+application with a sticky header. Override the gutter, not the width - the width
+is derived from it and keeps the 1200px cap.
 
 Two rules that prevent most colour bugs:
 

package/CHANGELOG.md

@@ -6,6 +6,18 @@ 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.8.0] - 2026-08-22
+
+### Added
+
+- `mw-card-feature` - frame with a label bar around a highlighted card, in primary, secondary and info
+
+## [4.7.0] - 2026-08-22
+
+### Changed
+
+- mobile breakpoints view adjustments
+
 ## [4.6.0] - 2026-08-22
 
 ### Changed

package/gulpfile.js

@@ -3,7 +3,18 @@ const fileinclude = require('gulp-file-include');
 const sass = require('gulp-sass')(require('sass'));
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
-const cleanCSS = require('gulp-clean-css');
+// clean-css 4 is the last release gulp-clean-css pins, and it predates
+// @container, @layer and @starting-style: it drops those blocks or eats their
+// selectors without an error. cssnano runs in the postcss pass that is already
+// here and understands them.
+const cssnano = require('cssnano');
+// postcss-calc cannot lex relative color syntax - `calc(l * 0.85)` inside
+// `oklch(from ...)` makes it log a parse error per declaration. It leaves the
+// value alone, so the output was always correct, but the noise buried real
+// build errors. Switching it off leaves ten calc() terms unfolded
+// (`calc(500px - 1.5rem - 2px)` stays as written), worth about 100 bytes across
+// the whole file - cheaper than a build log nobody reads.
+const cssnanoPreset = ['default', { calc: false }];
 const terser = require('gulp-terser');
 const fs = require('fs');
 const path = require('path');
@@ -47,8 +58,7 @@ gulp.task('scss-build', function () {
   return gulp
     .src(paths.scss)
     .pipe(sass().on('error', sass.logError))
-    .pipe(postcss([autoprefixer()]))
-    .pipe(cleanCSS())
+    .pipe(postcss([autoprefixer(), cssnano({ preset: cssnanoPreset })]))
     .pipe(rename('maverick-wave.min.css'))
     .pipe(gulp.dest(path.join(paths.dist)));
 });
@@ -56,8 +66,7 @@ gulp.task('scss-release', function () {
   return gulp
     .src(paths.scss)
     .pipe(sass().on('error', sass.logError))
-    .pipe(postcss([autoprefixer()]))
-    .pipe(cleanCSS())
+    .pipe(postcss([autoprefixer(), cssnano({ preset: cssnanoPreset })]))
     .pipe(rename('maverick-wave.min.css'))
     .pipe(gulp.dest(path.join(paths.root)));
 });

package/index.html

@@ -94,8 +94,13 @@
 
       /* Small screens */
       @media (max-width: 576px) {
+        /* The h1 drops to 2.2rem down here, so the sticker has to move up with
+           it or it lands on the word instead of next to it */
         .version-corner {
+          top: -32px;
           right: 4%;
+          font-size: 0.9rem;
+          padding: 0.25rem 0.55rem;
         }
 
         .color-swatch {