maverick-wave 5.6.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/.claude/skills/mw-maverick-wave/SKILL.md +5 -5
  2. package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +2 -2
  3. package/.claude/skills/mw-maverick-wave/references/components.md +5 -2
  4. package/.claude/skills/mw-maverick-wave/references/forms.md +5 -5
  5. package/.claude/skills/mw-maverick-wave/references/theming.md +24 -18
  6. package/CHANGELOG.md +17 -0
  7. package/README.md +16 -11
  8. package/index.html +238 -46
  9. package/maverick-wave.min.css +4 -4
  10. package/package.json +2 -2
  11. package/scripts/verify.js +11 -1
  12. package/src/partials/header-container.html +7 -5
  13. package/src/partials/history-container.html +1 -1
  14. package/src/partials/palette-container.html +123 -26
  15. package/src/partials/typography-container.html +8 -9
  16. package/src/partials/utilities-container.html +26 -6
  17. package/src/scss/abstracts/_mixins.scss +6 -1
  18. package/src/scss/abstracts/_variables.scss +4 -4
  19. package/src/scss/base/_base.scss +4 -0
  20. package/src/scss/base/_reset.scss +2 -0
  21. package/src/scss/components/_avatars.scss +29 -0
  22. package/src/scss/components/_button-bar.scss +1 -1
  23. package/src/scss/components/_buttons.scss +1 -1
  24. package/src/scss/form-elements/_input.scss +1 -1
  25. package/src/scss/form-elements/_select.scss +1 -1
  26. package/src/scss/layout/_main.scss +31 -2
  27. package/src/scss/utilities/_reveal.scss +9 -2
  28. package/src/scss/utilities/_touch-targets.scss +1 -1
  29. package/src/scss/utilities/_variants.scss +89 -17
package/.claude/skills/mw-maverick-wave/SKILL.md CHANGED
@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
44
44
  ```html
45
45
  <link
46
46
  rel="stylesheet"
47
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.css"
47
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
48
48
  />
49
49
  <link
50
50
  rel="stylesheet"
51
51
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
52
52
  />
53
53
  ...
54
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.js"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
55
55
  ```
56
56
 
57
57
  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:
195
195
  for anything that should feel instant under the pointer. Both list their
196
196
  properties explicitly rather than saying `all`.
197
197
 
198
- **Control sizes** `--mw-control-height-sm|base|lg` = 2 / 2.25 / 2.5rem (an even
199
- 32 / 36 / 40px step) and
198
+ **Control sizes** `--mw-control-height-sm|base|lg` = 1.875 / 2.125 / 2.375rem (an
199
+ even 30 / 34 / 38px step) and
200
200
  `--mw-control-font-sm|base|lg` = 0.8 / 0.9 / 1rem, shared by `mw-input`,
201
201
  `mw-select`, `mw-textarea` and `mw-btn`. A field and the button beside it are
202
202
  the same height by construction. Buttons run one font step above the fields.
@@ -402,7 +402,7 @@ feature frame) ·
402
402
  28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
403
403
  4.13.0 there is a class for exactly that. `mw-btn` is `inline-flex` with
404
404
  `min-height: var(--mw-control-height)`, so a link written that way pulls its
405
- own line up to 2.25rem while every line around it keeps the paragraph's
405
+ own line up to 2.125rem while every line around it keeps the paragraph's
406
406
  height - in a footer disclaimer at `font-size: sm` that is nearly double,
407
407
  and it reads as a layout bug. `mw-p-0` is not the fix it looks like: the
408
408
  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 CHANGED
@@ -20,7 +20,7 @@ accordion FAQ.
20
20
 
21
21
  <link
22
22
  rel="stylesheet"
23
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.css"
23
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
24
24
  />
25
25
  <link
26
26
  rel="stylesheet"
@@ -487,7 +487,7 @@ accordion FAQ.
487
487
  <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
488
488
  </div>
489
489
 
490
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.js"></script>
490
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
491
491
  <script>
492
492
  // The only thing the shipped script does not cover: opening a modal.
493
493
  // Closing works through .mw-modal-close, the backdrop is wired above.
package/.claude/skills/mw-maverick-wave/references/components.md CHANGED
@@ -28,7 +28,7 @@ exhaustive: what is not named does not exist.
28
28
  is, so do not override it away
29
29
  - **A link inside a sentence is `mw-link`, not `mw-btn mw-btn-link`.** The base
30
30
  class carries a control height, so in running text it lifts that one line to
31
- 2.25rem while the lines around it stay where they are. `mw-p-0` does not help
31
+ 2.125rem while the lines around it stay where they are. `mw-p-0` does not help
32
32
  - the height does it, not the padding. Keep `mw-btn` only where the link
33
33
  really is a button in a row of buttons and has to line up with them
34
34
  - 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.
1445
1445
  <div class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</div>
1446
1446
  ```
1447
1447
 
1448
- - Sizes: `mw-avatar-xs` 32, `-sm` 64, default 96, `-lg` 144, `-xl` 250 px.
1448
+ - Sizes: `mw-avatar-xs` 32, `-sm` 64, default 96, `-lg` 144, `-xl` 210 px.
1449
1449
  - Shape: `mw-avatar-square`.
1450
1450
  - Colours `mw-avatar-primary`, `-secondary`, `-success`, `-warning`, `-danger`,
1451
1451
  `-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.
1454
1454
  the standard display for a signed-in user without a picture.
1455
1455
  - `mw-avatar-group` overlaps its avatars; `mw-avatar-group-sm` / `-lg` change
1456
1456
  the overlap.
1457
+ - Hover on an avatar **with an image** zooms the picture and sweeps a light
1458
+ across it. Nothing to switch on. It is skipped on `mw-avatar-initials`, on
1459
+ touch, under `prefers-reduced-motion` and under `mw-hover-static`.
1457
1460
 
1458
1461
  ## Item lists
1459
1462
 
package/.claude/skills/mw-maverick-wave/references/forms.md CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
  `mw-input`, `mw-select`, `mw-textarea` and `mw-btn` share one scale:
6
6
 
7
- | step | height | font |
8
- | ----- | ------- | ------ |
9
- | `-sm` | 2rem | 0.8rem |
10
- | base | 2.25rem | 0.9rem |
11
- | `-lg` | 2.5rem | 1rem |
7
+ | step | height | font |
8
+ | ----- | -------- | ------ |
9
+ | `-sm` | 1.875rem | 0.8rem |
10
+ | base | 2.125rem | 0.9rem |
11
+ | `-lg` | 2.375rem | 1rem |
12
12
 
13
13
  A field and the button beside it are therefore the same height by construction -
14
14
  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 CHANGED
@@ -83,6 +83,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
83
83
  | `--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)`) |
84
84
  | `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (3.3rem, stepping down to 2.5rem below `md` and 1.75rem below `sm`) |
85
85
  | `--mw-section-nav-height` | Height the sticky `mw-section-nav` reserves (3.7rem). Add it to `--mw-header-height` for the `scroll-margin-top` of anything the strip can cover |
86
+ | `--mw-root-font-size` | Percentage the whole rem scale is built on (`100%`). Type, spacing and control heights move with it; px breakpoints do not |
86
87
  | `--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 |
87
88
  | `--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` |
88
89
  | `--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 |
@@ -194,26 +195,31 @@ root.classList.remove('mw-theme-switching');
194
195
 
195
196
  ## Site-wide variants
196
197
 
197
- Eight classes on `<html>` and four custom properties retune the whole look
198
+ Twelve classes on `<html>` and five custom properties retune the whole look
198
199
  without a rebuild. They stack, and none of them need a class per element.
199
200
 
200
- | Class | Effect |
201
- | ------------------- | ------------------------------------------------------------------------------------------------------ |
202
- | `mw-corners-even` | Drops the surface signature - every card, panel and modal becomes an evenly rounded `radius('md')` box |
203
- | `mw-accent-single` | `--mw-secondary-color` follows the primary; `mw-btn-secondary` turns outline so the two stay apart |
204
- | `mw-shadows-flat` | Elevation 1-3 to `none`. The dropdown (4) and the modal (5) keep their shadow |
205
- | `mw-hover-static` | No hover travels - lifts, image zooms and slides go. Colour and border still respond |
206
- | `mw-sections-plain` | The diagonal hatch behind `mw-section-alternate` collapses into the page colour |
207
- | `mw-headings-caps` | `h1`-`h3` in capitals with 0.045em tracking |
208
- | `mw-btn-pill` | `mw-btn` fully rounded. Form fields keep their own radius |
209
- | `mw-media-mono` | Photos in `grayscale(1)` until their card, tile, gallery or slider is hovered |
210
-
211
- | Property | Effect |
212
- | ---------------------------- | -------------------------------------------------------------- |
213
- | `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
214
- | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
215
- | `--mw-container-width` | Where the content stops growing |
216
- | `--mw-section-padding-block` | Air above and below each section |
201
+ | Class | Effect |
202
+ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
203
+ | `mw-corners-even` | Drops the surface signature - every card, panel and modal becomes an evenly rounded `radius('md')` box |
204
+ | `mw-accent-single` | `--mw-secondary-color` follows the primary; `mw-btn-secondary` turns outline so the two stay apart |
205
+ | `mw-shadows-flat` | Elevation 1-3 to `none`. The dropdown (4) and the modal (5) keep their shadow |
206
+ | `mw-surfaces-flush` | Card, panel and footer background drop to the page colour and the border is redrawn from the ink, because the old one is a neighbouring shade of a surface that is now the page |
207
+ | `mw-hover-static` | No hover travels - lifts, image zooms and slides go. Colour and border still respond |
208
+ | `mw-scroll-static` | No scroll entrance - `mw-reveal` and `mw-reveal-stagger` blocks sit where they land |
209
+ | `mw-sections-plain` | The diagonal hatch behind `mw-section-alternate` collapses into the page colour |
210
+ | `mw-headings-caps` | `h1`-`h3` in capitals with 0.045em tracking |
211
+ | `mw-btn-pill` | `mw-btn` fully rounded. Form fields keep their own radius |
212
+ | `mw-btn-square` | `mw-btn` to `border-radius: 0`. The other end of the same axis, and unlike `--mw-radius-scale: 0` it leaves the rest of the page rounded |
213
+ | `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 |
214
+ | `mw-btn-tactile` | The four solid variants stand on a 3px edge mixed toward black and travel its full height on `:active`. Outline, ghost and link have no fill to darken and are untouched |
215
+
216
+ | Property | Effect |
217
+ | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
218
+ | `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
219
+ | `--mw-root-font-size` | Percentage on `html`. The scale is rem, so type, padding and control heights move together; breakpoints are px and stay put |
220
+ | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
221
+ | `--mw-container-width` | Where the content stops growing |
222
+ | `--mw-section-padding-block` | Air above and below each section |
217
223
 
218
224
  **Writing your own.** A variant that retunes a _theme-bound_ token - anything in
219
225
  the dark/light maps, elevation and shadow above all - cannot be written on
package/CHANGELOG.md CHANGED
@@ -6,6 +6,23 @@ Patch releases are only for test purposes - here I only document major and minor
6
6
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
7
7
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
8
8
 
9
+ ## [5.8.0] - 2026-09-12
10
+
11
+ ### Added
12
+
13
+ - some other showcase variants
14
+
15
+ ## [5.7.0] - 2026-09-12
16
+
17
+ ### Added
18
+
19
+ - avatar hover animation
20
+
21
+ ### Changed
22
+
23
+ - slimmer control heights
24
+ - showcase variants
25
+
9
26
  ## [5.6.0] - 2026-09-12
10
27
 
11
28
  ### Added
package/README.md CHANGED
@@ -42,12 +42,12 @@ The result is a framework that balances utility with simplicity, offering develo
42
42
  <title>My MaverickWave Project</title>
43
43
  <link
44
44
  rel="stylesheet"
45
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.css"
45
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.css"
46
46
  />
47
47
  </head>
48
48
  <body>
49
49
  <!-- Your content here -->
50
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.js"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.8.0/maverick-wave.min.js"></script>
51
51
  </body>
52
52
  </html>
53
53
  ```
@@ -153,9 +153,9 @@ assembled rather than designed.
153
153
 
154
154
  /* Control sizes - one height per step, shared by input, select, textarea
155
155
  and button, so a field and the button beside it line up */
156
- --mw-control-height-sm: 2rem;
157
- --mw-control-height: 2.25rem;
158
- --mw-control-height-lg: 2.5rem;
156
+ --mw-control-height-sm: 1.875rem;
157
+ --mw-control-height: 2.125rem;
158
+ --mw-control-height-lg: 2.375rem;
159
159
  --mw-control-font-sm: 0.8rem;
160
160
  --mw-control-font: 0.9rem;
161
161
  --mw-control-font-lg: 1rem;
@@ -347,7 +347,7 @@ layer of its own:
347
347
 
348
348
  ### Site-wide variants
349
349
 
350
- Eight classes on `<html>` retune the whole look without touching markup or
350
+ Twelve classes on `<html>` retune the whole look without touching markup or
351
351
  rebuilding. They stack.
352
352
 
353
353
  | Class | Effect |
@@ -355,15 +355,20 @@ rebuilding. They stack.
355
355
  | `mw-corners-even` | Drops the surface signature - every panel becomes an evenly rounded box |
356
356
  | `mw-accent-single` | One brand colour instead of two; `mw-btn-secondary` turns outline |
357
357
  | `mw-shadows-flat` | Elevation 1-3 to `none`; dropdown and modal keep theirs |
358
+ | `mw-surfaces-flush` | Cards, panels and footer on the page colour, held by their border |
358
359
  | `mw-hover-static` | No hover travels - lifts and image zooms go, colour still responds |
360
+ | `mw-scroll-static` | No scroll entrance - `mw-reveal` blocks sit where they land |
359
361
  | `mw-sections-plain` | The hatch behind `mw-section-alternate` collapses into the page colour |
360
362
  | `mw-headings-caps` | `h1`-`h3` in capitals |
361
363
  | `mw-btn-pill` | Fully rounded buttons; form fields keep their radius |
362
- | `mw-media-mono` | Photos grey until hovered |
363
-
364
- Four properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
365
- squares the framework off), `--mw-font-family-heading`, `--mw-container-width`
366
- and `--mw-section-padding-block`.
364
+ | `mw-btn-square` | Buttons cut to a hard corner while the page keeps its radius |
365
+ | `mw-btn-glass` | Filled buttons become a translucent wash with a lit top edge |
366
+ | `mw-btn-tactile` | Filled buttons stand on a darker edge and sink onto it when pressed |
367
+
368
+ Five properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
369
+ squares the framework off), `--mw-root-font-size` moves the whole rem scale,
370
+ plus `--mw-font-family-heading`, `--mw-container-width` and
371
+ `--mw-section-padding-block`.
367
372
 
368
373
  A variant of your own that retunes a theme-bound token has to target
369
374
  `:root.your-class` **and** `:root.your-class .mw-theme-light` - the light theme