maverick-wave 5.5.0 → 5.7.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 (39) hide show
  1. package/.claude/skills/mw-maverick-wave/SKILL.md +16 -13
  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 +41 -0
  6. package/CHANGELOG.md +17 -0
  7. package/README.md +30 -5
  8. package/index.html +359 -4
  9. package/maverick-wave.min.css +5 -5
  10. package/package.json +2 -2
  11. package/src/partials/history-container.html +1 -1
  12. package/src/partials/palette-container.html +210 -0
  13. package/src/partials/typography-container.html +8 -9
  14. package/src/partials/utilities-container.html +48 -0
  15. package/src/scss/abstracts/_functions.scss +11 -2
  16. package/src/scss/abstracts/_mixins.scss +35 -3
  17. package/src/scss/abstracts/_variables.scss +8 -8
  18. package/src/scss/base/_base.scss +3 -0
  19. package/src/scss/components/_avatars.scss +33 -1
  20. package/src/scss/components/_blog-post.scss +2 -2
  21. package/src/scss/components/_button-bar.scss +1 -1
  22. package/src/scss/components/_buttons.scss +1 -1
  23. package/src/scss/components/_cards.scss +13 -22
  24. package/src/scss/components/_coming-soon.scss +1 -1
  25. package/src/scss/components/_info.scss +2 -2
  26. package/src/scss/components/_lists.scss +1 -1
  27. package/src/scss/components/_panels.scss +1 -1
  28. package/src/scss/components/_pricing.scss +1 -1
  29. package/src/scss/components/_techstack-bucket.scss +1 -1
  30. package/src/scss/components/_tiles.scss +1 -1
  31. package/src/scss/form-elements/_input.scss +1 -1
  32. package/src/scss/form-elements/_select.scss +1 -1
  33. package/src/scss/layout/_footer.scss +1 -1
  34. package/src/scss/layout/_header.scss +9 -1
  35. package/src/scss/layout/_main.scss +31 -2
  36. package/src/scss/utilities/_index.scss +1 -0
  37. package/src/scss/utilities/_reveal.scss +9 -2
  38. package/src/scss/utilities/_touch-targets.scss +1 -1
  39. package/src/scss/utilities/_variants.scss +120 -0
package/.claude/skills/mw-maverick-wave/SKILL.md CHANGED
@@ -20,13 +20,13 @@ or, in the framework repo, `npm run verify`.
20
20
 
21
21
  Load the one you need - do not read them all up front.
22
22
 
23
- | File | Content |
24
- | -------------------------- | ---------------------------------------------------------------------------------------------------------------- |
25
- | `references/layout.md` | Page skeleton, grid, container, section, page header, header/navbar, footer, spacing/flex/display/text utilities |
26
- | `references/components.md` | Every component: markup, variants, sizes, state classes |
27
- | `references/forms.md` | Inputs, select, textarea, checkbox, radio, toggle, slider, input group, `mw-field` pattern, validation |
28
- | `references/theming.md` | Token model, `color-mix` derivation, light/dark, SCSS configuration, cherry-picking single components |
29
- | `references/javascript.md` | What the shipped `main.js` does, why SPAs must not load it, what to implement instead |
23
+ | File | Content |
24
+ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
25
+ | `references/layout.md` | Page skeleton, grid, container, section, page header, header/navbar, footer, spacing/flex/display/text utilities |
26
+ | `references/components.md` | Every component: markup, variants, sizes, state classes |
27
+ | `references/forms.md` | Inputs, select, textarea, checkbox, radio, toggle, slider, input group, `mw-field` pattern, validation |
28
+ | `references/theming.md` | Token model, `color-mix` derivation, light/dark, site-wide variants, SCSS configuration, cherry-picking single components |
29
+ | `references/javascript.md` | What the shipped `main.js` does, why SPAs must not load it, what to implement instead |
30
30
 
31
31
  ## Examples
32
32
 
@@ -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.5.0/maverick-wave.min.css"
47
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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.5.0/maverick-wave.min.js"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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 -
@@ -168,6 +168,8 @@ its own:
168
168
  declared before it.
169
169
 
170
170
  **Radius** (`mw-radius-none|xs|sm|md|lg|xl|2xl|full`): 0, 2, 5, 10, 15, 20, 30 px, 50%.
171
+ Every one of them is multiplied by `--mw-radius-scale` (default 1), so one number
172
+ squares the framework off or rounds it further; `none` and `full` pass through.
171
173
 
172
174
  **The surface signature.** Every panel-like component - card, panel, modal,
173
175
  accordion, tile, calendar, pagination, login box - shares one silhouette: sharp
@@ -175,7 +177,8 @@ accordion, tile, calendar, pagination, login box - shares one silhouette: sharp
175
177
  plus a 2px **corner accent** in the primary tone (`--mw-corner-accent`) sitting
176
178
  on the two round corners. It is not a class and not opt-in; the components carry
177
179
  it. `mw-corner-plain` drops the accent on a box too small to hold it - see
178
- `references/layout.md`.
180
+ `references/layout.md` - and `mw-corners-even` on `<html>` drops the whole
181
+ signature site-wide.
179
182
 
180
183
  **Elevation** (`mw-elevation-0` … `-5`, and `var(--mw-elevation-N)` inside SCSS).
181
184
  Two shadows per level - a tight contact layer plus a wide ambient one:
@@ -192,8 +195,8 @@ back), `--mw-ease-spring` (a pop). Two ready-made transitions:
192
195
  for anything that should feel instant under the pointer. Both list their
193
196
  properties explicitly rather than saying `all`.
194
197
 
195
- **Control sizes** `--mw-control-height-sm|base|lg` = 2 / 2.25 / 2.5rem (an even
196
- 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
197
200
  `--mw-control-font-sm|base|lg` = 0.8 / 0.9 / 1rem, shared by `mw-input`,
198
201
  `mw-select`, `mw-textarea` and `mw-btn`. A field and the button beside it are
199
202
  the same height by construction. Buttons run one font step above the fields.
@@ -399,7 +402,7 @@ feature frame) ·
399
402
  28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
400
403
  4.13.0 there is a class for exactly that. `mw-btn` is `inline-flex` with
401
404
  `min-height: var(--mw-control-height)`, so a link written that way pulls its
402
- 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
403
406
  height - in a footer disclaimer at `font-size: sm` that is nearly double,
404
407
  and it reads as a layout bug. `mw-p-0` is not the fix it looks like: the
405
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.5.0/maverick-wave.min.css"
23
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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.5.0/maverick-wave.min.js"></script>
490
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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
@@ -192,6 +192,47 @@ void root.offsetHeight; // commit the new colours with transitions off
192
192
  root.classList.remove('mw-theme-switching');
193
193
  ```
194
194
 
195
+ ## Site-wide variants
196
+
197
+ Nine classes on `<html>` and four custom properties retune the whole look
198
+ without a rebuild. They stack, and none of them need a class per element.
199
+
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-scroll-static` | No scroll entrance - `mw-reveal` and `mw-reveal-stagger` blocks sit where they land |
207
+ | `mw-sections-plain` | The diagonal hatch behind `mw-section-alternate` collapses into the page colour |
208
+ | `mw-headings-caps` | `h1`-`h3` in capitals with 0.045em tracking |
209
+ | `mw-btn-pill` | `mw-btn` fully rounded. Form fields keep their own radius |
210
+ | `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 |
211
+
212
+ | Property | Effect |
213
+ | ---------------------------- | -------------------------------------------------------------- |
214
+ | `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
215
+ | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
216
+ | `--mw-container-width` | Where the content stops growing |
217
+ | `--mw-section-padding-block` | Air above and below each section |
218
+
219
+ **Writing your own.** A variant that retunes a _theme-bound_ token - anything in
220
+ the dark/light maps, elevation and shadow above all - cannot be written on
221
+ `:root` alone: `mw-theme-light` re-declares those on `<body>`, which shadows the
222
+ root value for the entire subtree and the switch does nothing in light mode.
223
+ Target both:
224
+
225
+ ```scss
226
+ :root.my-variant,
227
+ :root.my-variant .mw-theme-light {
228
+ --mw-elevation-2: none;
229
+ }
230
+ ```
231
+
232
+ The same trap the other way round: never copy a theme alias _into_ a token on
233
+ `:root` (`--mw-x: var(--mw-page-background)`), because up there it still holds
234
+ the dark value. Write that rule on the element instead.
235
+
195
236
  ## SCSS configuration
196
237
 
197
238
  Only `@use ... with (...)` works - a plain assignment before the `@use` has no
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.7.0] - 2026-09-12
10
+
11
+ ### Added
12
+
13
+ - avatar hover animation
14
+
15
+ ### Changed
16
+
17
+ - slimmer control heights
18
+ - showcase variants
19
+
20
+ ## [5.6.0] - 2026-09-12
21
+
22
+ ### Added
23
+
24
+ - showcase variants of some components / typography
25
+
9
26
  ## [5.5.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.5.0/maverick-wave.min.css"
45
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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.5.0/maverick-wave.min.js"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.7.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;
@@ -345,6 +345,31 @@ layer of its own:
345
345
  <link rel="stylesheet" href="maverick-wave.min.css" />
346
346
  ```
347
347
 
348
+ ### Site-wide variants
349
+
350
+ Nine classes on `<html>` retune the whole look without touching markup or
351
+ rebuilding. They stack.
352
+
353
+ | Class | Effect |
354
+ | ------------------- | ----------------------------------------------------------------------- |
355
+ | `mw-corners-even` | Drops the surface signature - every panel becomes an evenly rounded box |
356
+ | `mw-accent-single` | One brand colour instead of two; `mw-btn-secondary` turns outline |
357
+ | `mw-shadows-flat` | Elevation 1-3 to `none`; dropdown and modal keep theirs |
358
+ | `mw-hover-static` | No hover travels - lifts and image zooms go, colour still responds |
359
+ | `mw-scroll-static` | No scroll entrance - `mw-reveal` blocks sit where they land |
360
+ | `mw-sections-plain` | The hatch behind `mw-section-alternate` collapses into the page colour |
361
+ | `mw-headings-caps` | `h1`-`h3` in capitals |
362
+ | `mw-btn-pill` | Fully rounded buttons; form fields keep their radius |
363
+ | `mw-btn-glass` | Filled buttons become a translucent wash with a lit top edge |
364
+
365
+ Four properties do the rest: `--mw-radius-scale` multiplies every radius (`0`
366
+ squares the framework off), `--mw-font-family-heading`, `--mw-container-width`
367
+ and `--mw-section-padding-block`.
368
+
369
+ A variant of your own that retunes a theme-bound token has to target
370
+ `:root.your-class` **and** `:root.your-class .mw-theme-light` - the light theme
371
+ re-declares those on `<body>` and would shadow a root-only value.
372
+
348
373
  ### SCSS Source
349
374
 
350
375
  For full control, clone the repository and integrate `src/scss/main.scss` into your Sass build (Dart Sass required). MaverickWave uses modern `@use`/`@forward` syntax. Pass your overrides through `with`: