maverick-wave 5.4.0 → 5.6.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.
- package/.claude/skills/mw-maverick-wave/SKILL.md +13 -10
- package/.claude/skills/mw-maverick-wave/examples/angular-services.md +91 -0
- package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +5 -4
- package/.claude/skills/mw-maverick-wave/references/components.md +3 -0
- package/.claude/skills/mw-maverick-wave/references/javascript.md +19 -2
- package/.claude/skills/mw-maverick-wave/references/layout.md +20 -14
- package/.claude/skills/mw-maverick-wave/references/theming.md +44 -0
- package/CHANGELOG.md +17 -0
- package/CLAUDE.md +1 -1
- package/README.md +27 -4
- package/index.html +448 -0
- package/maverick-wave.min.css +5 -5
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/scripts/verify.js +4 -7
- package/src/js/main.js +157 -2
- package/src/partials/documentation-container.html +4 -0
- package/src/partials/footer-container.html +3 -0
- package/src/partials/history-container.html +67 -0
- package/src/partials/palette-container.html +325 -0
- package/src/partials/utilities-container.html +41 -0
- package/src/scss/abstracts/_functions.scss +11 -2
- package/src/scss/abstracts/_mixins.scss +36 -8
- package/src/scss/abstracts/_variables.scss +4 -4
- package/src/scss/base/_base.scss +3 -0
- package/src/scss/base/_reset.scss +4 -1
- package/src/scss/components/_accordions.scss +31 -7
- package/src/scss/components/_avatars.scss +4 -1
- package/src/scss/components/_blog-post.scss +2 -2
- package/src/scss/components/_cards.scss +13 -22
- package/src/scss/components/_coming-soon.scss +1 -1
- package/src/scss/components/_info.scss +2 -2
- package/src/scss/components/_lists.scss +1 -1
- package/src/scss/components/_panels.scss +1 -1
- package/src/scss/components/_pricing.scss +1 -1
- package/src/scss/components/_techstack-bucket.scss +1 -1
- package/src/scss/components/_tiles.scss +1 -1
- package/src/scss/components/_toasts.scss +1 -1
- package/src/scss/form-elements/_slider.scss +5 -23
- package/src/scss/layout/_footer.scss +1 -1
- package/src/scss/layout/_header-reveal.scss +33 -0
- package/src/scss/layout/_header.scss +9 -1
- package/src/scss/layout/_parallax.scss +20 -0
- package/src/scss/utilities/_index.scss +1 -0
- package/src/scss/utilities/_reveal.scss +22 -0
- package/src/scss/utilities/_variants.scss +90 -0
- package/.impeccable/config.local.json +0 -5
- package/.impeccable/hook.cache.json +0 -75
|
@@ -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.
|
|
47
|
+
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.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.
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.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:
|
|
@@ -369,3 +369,94 @@ about the class name.
|
|
|
369
369
|
|
|
370
370
|
`mw-progress-percent` only appends the `%` sign - the number comes from you, and
|
|
371
371
|
so does the width.
|
|
372
|
+
|
|
373
|
+
## Scroll reveal
|
|
374
|
+
|
|
375
|
+
`mw-reveal` runs on the browser's scroll timeline and needs nothing from you -
|
|
376
|
+
except in Firefox, which ships none, where the block appears without motion.
|
|
377
|
+
This directive is the Firefox half: it adds to the class, never replaces it.
|
|
378
|
+
|
|
379
|
+
```ts
|
|
380
|
+
import {
|
|
381
|
+
DestroyRef,
|
|
382
|
+
Directive,
|
|
383
|
+
ElementRef,
|
|
384
|
+
afterNextRender,
|
|
385
|
+
inject,
|
|
386
|
+
signal,
|
|
387
|
+
} from '@angular/core';
|
|
388
|
+
|
|
389
|
+
@Directive({
|
|
390
|
+
selector: '[mwReveal]',
|
|
391
|
+
host: {
|
|
392
|
+
'[class.mw-reveal-hidden]': "state() === 'hidden'",
|
|
393
|
+
'[class.mw-reveal-run]': "state() === 'run'",
|
|
394
|
+
'[style.animation-delay.ms]': 'delay()',
|
|
395
|
+
},
|
|
396
|
+
})
|
|
397
|
+
export class MwRevealDirective {
|
|
398
|
+
private readonly host =
|
|
399
|
+
inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
|
|
400
|
+
|
|
401
|
+
protected readonly state = signal<'off' | 'hidden' | 'run'>('off');
|
|
402
|
+
protected readonly delay = signal(0);
|
|
403
|
+
|
|
404
|
+
constructor() {
|
|
405
|
+
const destroyRef = inject(DestroyRef);
|
|
406
|
+
|
|
407
|
+
afterNextRender(() => {
|
|
408
|
+
if (CSS.supports('animation-timeline', 'view()')) return;
|
|
409
|
+
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
410
|
+
// Already on screen: past its entry range in a timeline browser too
|
|
411
|
+
if (this.host.getBoundingClientRect().top < innerHeight) return;
|
|
412
|
+
|
|
413
|
+
this.state.set('hidden');
|
|
414
|
+
|
|
415
|
+
const observer = new IntersectionObserver(
|
|
416
|
+
([entry]) => {
|
|
417
|
+
if (!entry.isIntersecting) return;
|
|
418
|
+
observer.disconnect();
|
|
419
|
+
this.delay.set(this.columnDelay());
|
|
420
|
+
this.state.set('run');
|
|
421
|
+
},
|
|
422
|
+
{ threshold: 0.15 }
|
|
423
|
+
);
|
|
424
|
+
|
|
425
|
+
observer.observe(this.host);
|
|
426
|
+
destroyRef.onDestroy(() => observer.disconnect());
|
|
427
|
+
});
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
// The wave a grid draws in CSS, read back from the columns the browser
|
|
431
|
+
// rendered - one on a phone, so the stagger disappears with them.
|
|
432
|
+
private columnDelay(): number {
|
|
433
|
+
const grid = this.host.parentElement;
|
|
434
|
+
if (!grid?.classList.contains('mw-reveal-stagger')) return 0;
|
|
435
|
+
const columns =
|
|
436
|
+
getComputedStyle(grid).gridTemplateColumns.split(' ').length;
|
|
437
|
+
return ([...grid.children].indexOf(this.host) % columns) * 90;
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
A single block carries `mw-reveal`, a grid carries `mw-reveal-stagger` and its
|
|
443
|
+
children carry nothing but the directive:
|
|
444
|
+
|
|
445
|
+
```html
|
|
446
|
+
<article class="mw-card mw-reveal" mwReveal>...</article>
|
|
447
|
+
|
|
448
|
+
<div class="mw-grid-4 mw-reveal-stagger">
|
|
449
|
+
@for (item of items(); track item.id) {
|
|
450
|
+
<article class="mw-card" mwReveal>...</article>
|
|
451
|
+
}
|
|
452
|
+
</div>
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
Unlike the shipped script this also covers what a route renders later - the
|
|
456
|
+
directive runs per element, not once per page.
|
|
457
|
+
|
|
458
|
+
`mw-header-reveal` and `mw-parallax` need the same treatment and the same
|
|
459
|
+
`CSS.supports` guard. The header is a class toggled past a scroll threshold; the
|
|
460
|
+
parallax writes `--mw-parallax-progress` (0 to 1) on each `mw-parallax-media`
|
|
461
|
+
from a `requestAnimationFrame` loop, reading every layer's rect before writing
|
|
462
|
+
to any of them.
|
|
@@ -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.
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.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.
|
|
490
|
+
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.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.
|
|
@@ -523,8 +523,9 @@ accordion FAQ.
|
|
|
523
523
|
- `mw-reveal-stagger` goes on the grid (or `mw-columns-*`) and reveals every
|
|
524
524
|
child as it scrolls in, the second and third of each three a beat later.
|
|
525
525
|
`mw-reveal` on a single block reveals that block as one. Both are off under
|
|
526
|
-
`prefers-reduced-motion
|
|
527
|
-
|
|
526
|
+
`prefers-reduced-motion`. A page like this one loads the script, so Firefox -
|
|
527
|
+
which has no scroll timelines - runs the same entrance off an observer;
|
|
528
|
+
without the script the blocks stand in place, never invisible.
|
|
528
529
|
- `mw-offer` on a card pushes the price row to the bottom of the body, so the
|
|
529
530
|
prices in a row line up. The `mw-card-feature` frame around the middle plan
|
|
530
531
|
reaches 29px above its card - the `mw-mt-10` on the grid is that room.
|
|
@@ -536,6 +536,9 @@ still renders the same, for markup written before 4.12.
|
|
|
536
536
|
Open state = `mw-active` on header **and** content (bare `active` still works
|
|
537
537
|
but is deprecated). The icon rotates via the **header** state - putting the
|
|
538
538
|
class on the icon instead does nothing. Content taller than 500px scrolls.
|
|
539
|
+
The `mw-accordion-content-inner` wrapper is required and not decoration: the
|
|
540
|
+
panel opens by animating a grid row and that wrapper is the row, so content
|
|
541
|
+
placed straight into `mw-accordion-content` never collapses when closed.
|
|
539
542
|
Toggling is JS - see `references/javascript.md`; the shipped script keeps
|
|
540
543
|
`aria-expanded` in step when the header is a button.
|
|
541
544
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## What `maverick-wave.min.js` is
|
|
4
4
|
|
|
5
|
-
One vanilla IIFE, no dependencies, ~
|
|
5
|
+
One vanilla IIFE, no dependencies, ~23 kB. It queries the DOM **once** on
|
|
6
6
|
`DOMContentLoaded` and attaches listeners. There is no re-init API, no
|
|
7
7
|
`MutationObserver`, no exported module - it is built for a server-rendered or
|
|
8
8
|
static page.
|
|
@@ -44,9 +44,26 @@ classes are the entire contract.
|
|
|
44
44
|
| 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 |
|
|
45
45
|
| 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 |
|
|
46
46
|
| Header login button | Swaps the FontAwesome lock icon | Bind the icon class |
|
|
47
|
-
| Color swatches | Showcase-only (prints computed hex values)
|
|
47
|
+
| Color swatches | Showcase-only (prints computed hex values); exposes `window.mwRefreshColorSwatches` to read them again after a root colour changed | Not needed |
|
|
48
48
|
| 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 |
|
|
49
49
|
| 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 |
|
|
50
|
+
| 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` |
|
|
51
|
+
| 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 |
|
|
52
|
+
| 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 |
|
|
53
|
+
|
|
54
|
+
## Scroll-driven animations
|
|
55
|
+
|
|
56
|
+
Four things ride the browser's own scroll timeline: `mw-reveal`,
|
|
57
|
+
`mw-header-reveal`, `mw-parallax` and the `mw-progress-fill` scrub. In Chrome,
|
|
58
|
+
Edge and Safari they need no script at all. Firefox ships no scroll timelines,
|
|
59
|
+
so there - and only there - the shipped JS stands in for them. Each one checks
|
|
60
|
+
`CSS.supports('animation-timeline', ...)` first and does nothing where the
|
|
61
|
+
browser has it.
|
|
62
|
+
|
|
63
|
+
Without the script Firefox loses the motion and nothing else: cards stand in
|
|
64
|
+
place, the picture holds still. The exception is `mw-header-reveal`, where the
|
|
65
|
+
bar then sits over the hero from the first paint - a layout difference, not a
|
|
66
|
+
missing effect.
|
|
50
67
|
|
|
51
68
|
## Modals and progress bars
|
|
52
69
|
|
|
@@ -142,8 +142,9 @@ A fixed `mw-announcement` rides along without a class of its own - both cover
|
|
|
142
142
|
the height of the pair, so they arrive as one block rather than the ribbon
|
|
143
143
|
catching up. Focus inside either brings both back regardless of the scroll
|
|
144
144
|
position, so tabbing never lands on a link that is off screen (WCAG 2.4.11).
|
|
145
|
-
|
|
146
|
-
|
|
145
|
+
Under `prefers-reduced-motion` the bar is simply there, and so it is without
|
|
146
|
+
scroll timelines unless `maverick-wave.min.js` is on the page - in Firefox that
|
|
147
|
+
is what rides it in (`javascript.md`).
|
|
147
148
|
|
|
148
149
|
**Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
|
|
149
150
|
and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
|
|
@@ -322,8 +323,10 @@ is taken on a phone. The bobbing stops under `prefers-reduced-motion`.
|
|
|
322
323
|
**Parallax** - `mw-parallax` on the container plus a `mw-parallax-media` child
|
|
323
324
|
moves the picture into its own layer. The container drops its own background and
|
|
324
325
|
the layer reads `--mw-hero-background`, so the image stays configured in one
|
|
325
|
-
place. Both modes run on the browser's scroll timeline
|
|
326
|
-
`background-attachment: fixed`, which iOS ignores.
|
|
326
|
+
place. Both modes run on the browser's scroll timeline, and on no
|
|
327
|
+
`background-attachment: fixed`, which iOS ignores. Firefox has neither timeline;
|
|
328
|
+
there the shipped JS moves the layers instead, and without it the picture simply
|
|
329
|
+
sits still (`javascript.md`).
|
|
327
330
|
|
|
328
331
|
```html
|
|
329
332
|
<header class="mw-header mw-header-reveal">...</header>
|
|
@@ -467,19 +470,22 @@ with it; `mw-text-capitalize` is the plain transform.
|
|
|
467
470
|
uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
|
|
468
471
|
|
|
469
472
|
**Scroll entrance** - `mw-reveal` lets a block rise briefly as it scrolls into
|
|
470
|
-
view, driven by the browser's scroll timeline (`animation-timeline: view()`)
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
off, and a browser without scroll timelines
|
|
476
|
-
|
|
477
|
-
|
|
473
|
+
view, driven by the browser's scroll timeline (`animation-timeline: view()`).
|
|
474
|
+
The block stays hidden while it is still below the bottom edge and has arrived
|
|
475
|
+
three fifths of the way in - measured along its own entry, so it is never still
|
|
476
|
+
transparent once it stands in its place, whatever its height. A block taller
|
|
477
|
+
than the screen is capped at one viewport by the entry phase itself. Doubly guarded:
|
|
478
|
+
`prefers-reduced-motion` turns it off, and a browser without scroll timelines
|
|
479
|
+
renders the block in place instead of leaving it invisible. Firefox is that
|
|
480
|
+
browser - there the shipped JS runs the entrance off an `IntersectionObserver`,
|
|
481
|
+
so a page without the script keeps the block and loses only the motion
|
|
482
|
+
(`javascript.md`). Put it on section content, not on the section itself - a
|
|
483
|
+
screen-high band finishes its entrance before its content is halfway up.
|
|
478
484
|
|
|
479
485
|
A row of cards crosses the viewport edge together, so `mw-reveal` on each of
|
|
480
486
|
them rises as one slab. `mw-reveal-stagger` goes on the **grid** instead: every
|
|
481
|
-
child reveals, and each one in a row
|
|
482
|
-
a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
|
|
487
|
+
child reveals, and each one in a row a tenth of that entry after the one
|
|
488
|
+
before it - a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
|
|
483
489
|
their `-lg` variants the wave follows the actual columns at every breakpoint:
|
|
484
490
|
four steps in a four-column row, two once it has collapsed to two. Any other
|
|
485
491
|
container - `mw-columns-*`, a layout of your own - gets a fixed cycle of three.
|
|
@@ -9,6 +9,10 @@ borders, the theme's surface stack, the ink variant the dark theme needs. That i
|
|
|
9
9
|
the difference to pre-3.4.0, where derived values were baked in at compile time
|
|
10
10
|
and a palette switch meant setting 41 variables.
|
|
11
11
|
|
|
12
|
+
Writing those tokens on `<html>` at runtime is how a palette is swapped without
|
|
13
|
+
a reload. It repaints the same breadth the theme flip does and needs the same
|
|
14
|
+
guard against a page-wide interpolation - see **Light & dark** below.
|
|
15
|
+
|
|
12
16
|
Browser floor for that: `color-mix()` **and** `oklch(from ...)` - Chrome 119+,
|
|
13
17
|
Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
|
|
14
18
|
`package.json`, so Autoprefixer and cssnano target exactly it.
|
|
@@ -188,6 +192,46 @@ void root.offsetHeight; // commit the new colours with transitions off
|
|
|
188
192
|
root.classList.remove('mw-theme-switching');
|
|
189
193
|
```
|
|
190
194
|
|
|
195
|
+
## Site-wide variants
|
|
196
|
+
|
|
197
|
+
Eight 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-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 |
|
|
217
|
+
|
|
218
|
+
**Writing your own.** A variant that retunes a _theme-bound_ token - anything in
|
|
219
|
+
the dark/light maps, elevation and shadow above all - cannot be written on
|
|
220
|
+
`:root` alone: `mw-theme-light` re-declares those on `<body>`, which shadows the
|
|
221
|
+
root value for the entire subtree and the switch does nothing in light mode.
|
|
222
|
+
Target both:
|
|
223
|
+
|
|
224
|
+
```scss
|
|
225
|
+
:root.my-variant,
|
|
226
|
+
:root.my-variant .mw-theme-light {
|
|
227
|
+
--mw-elevation-2: none;
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
The same trap the other way round: never copy a theme alias _into_ a token on
|
|
232
|
+
`:root` (`--mw-x: var(--mw-page-background)`), because up there it still holds
|
|
233
|
+
the dark value. Write that rule on the element instead.
|
|
234
|
+
|
|
191
235
|
## SCSS configuration
|
|
192
236
|
|
|
193
237
|
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.6.0] - 2026-09-12
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- showcase variants of some components / typography
|
|
14
|
+
|
|
15
|
+
## [5.5.0] - 2026-09-12
|
|
16
|
+
|
|
17
|
+
### Added
|
|
18
|
+
|
|
19
|
+
- showcase themes
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
|
|
23
|
+
- some firefox fixes
|
|
24
|
+
- scrolling
|
|
25
|
+
|
|
9
26
|
## [5.4.0] - 2026-09-11
|
|
10
27
|
|
|
11
28
|
### Added
|
package/CLAUDE.md
CHANGED
|
@@ -38,7 +38,7 @@ There are no test or lint scripts.
|
|
|
38
38
|
|
|
39
39
|
**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.
|
|
40
40
|
|
|
41
|
-
**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in
|
|
41
|
+
**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`.
|
|
42
42
|
|
|
43
43
|
## Naming Conventions
|
|
44
44
|
|
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.
|
|
45
|
+
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.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.
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.6.0/maverick-wave.min.js"></script>
|
|
51
51
|
</body>
|
|
52
52
|
</html>
|
|
53
53
|
```
|
|
@@ -345,6 +345,30 @@ layer of its own:
|
|
|
345
345
|
<link rel="stylesheet" href="maverick-wave.min.css" />
|
|
346
346
|
```
|
|
347
347
|
|
|
348
|
+
### Site-wide variants
|
|
349
|
+
|
|
350
|
+
Eight 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-sections-plain` | The hatch behind `mw-section-alternate` collapses into the page colour |
|
|
360
|
+
| `mw-headings-caps` | `h1`-`h3` in capitals |
|
|
361
|
+
| `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`.
|
|
367
|
+
|
|
368
|
+
A variant of your own that retunes a theme-bound token has to target
|
|
369
|
+
`:root.your-class` **and** `:root.your-class .mw-theme-light` - the light theme
|
|
370
|
+
re-declares those on `<body>` and would shadow a root-only value.
|
|
371
|
+
|
|
348
372
|
### SCSS Source
|
|
349
373
|
|
|
350
374
|
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`:
|
|
@@ -515,9 +539,8 @@ maverick-wave/
|
|
|
515
539
|
│ ├── utilities/ # Spacing, flex, display helpers
|
|
516
540
|
│ └── main.scss # SCSS entry point
|
|
517
541
|
├── .claude/
|
|
518
|
-
│ ├── commands/mw.md # Claude Code slash command (Angular quick reference)
|
|
519
542
|
│ └── skills/
|
|
520
|
-
│ └── maverick-wave/ # Claude Code skill: full usage guide + examples
|
|
543
|
+
│ └── mw-maverick-wave/ # Claude Code skill: full usage guide + examples
|
|
521
544
|
├── scripts/verify.js # Class and token consistency check (npm run verify)
|
|
522
545
|
├── .prettierrc.json # Prettier configuration
|
|
523
546
|
├── gulpfile.js # Gulp tasks configuration
|