maverick-wave 5.17.0 → 5.20.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 +2 -2
- package/.claude/skills/mw-maverick-wave/references/layout.md +24 -0
- package/CHANGELOG.md +18 -0
- package/README.md +2 -2
- package/index.html +1 -1
- package/maverick-wave.min.css +3 -3
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +14 -24
- package/src/partials/header-container.html +6 -3
- package/src/partials/parallax-container.html +13 -2
- package/src/scss/abstracts/_mixins.scss +5 -1
- package/src/scss/components/_theme-toggle.scss +0 -5
- package/src/scss/layout/_header-reveal.scss +115 -4
- package/src/scss/layout/_header.scss +109 -56
|
@@ -272,8 +272,8 @@ feature frame) ·
|
|
|
272
272
|
`-highlight`, `-static`, color variants) · `mw-empty-state` ·
|
|
273
273
|
`mw-spinner-border` / `mw-spinner-dots` / `mw-spinner-dual-ring` · `mw-skeleton`
|
|
274
274
|
|
|
275
|
-
**Navigation** `mw-header` (+ `mw-header-reveal
|
|
276
|
-
`mw-breadcrumbs` · `mw-pagination` ·
|
|
275
|
+
**Navigation** `mw-header` (+ `mw-header-reveal`, `mw-header-keep`) +
|
|
276
|
+
`mw-navbar` · `mw-breadcrumbs` · `mw-pagination` ·
|
|
277
277
|
`mw-dropdown` (+ `-menu`, `-item`, `-item-danger`, `-divider`, `-label`,
|
|
278
278
|
`-caret`, `-end`, `-up`) · `mw-lang-switch` (+ `-code`, `-name`, `-check`,
|
|
279
279
|
`inverted`) · `mw-flag` (+ 23 country codes) ·
|
|
@@ -147,6 +147,30 @@ Under `prefers-reduced-motion` the bar is simply there, and so it is without
|
|
|
147
147
|
scroll timelines unless `maverick-wave.min.js` is on the page - in Firefox that
|
|
148
148
|
is what rides it in (`javascript.md`).
|
|
149
149
|
|
|
150
|
+
**Something that stays.** `mw-header-keep` on a control inside the bar - the
|
|
151
|
+
login button, the burger - holds it in place while the bar rides in behind it:
|
|
152
|
+
it travels the bar's own distance the other way, so it waits at the exact
|
|
153
|
+
position it will hold in the arrived bar and nothing jumps at the end. On a
|
|
154
|
+
narrow screen that is what puts the burger on the hero before the bar exists.
|
|
155
|
+
Opening the drawer brings the bar in with it, because the drawer hangs off the
|
|
156
|
+
header and would otherwise sit a header height too high. One consequence: the
|
|
157
|
+
bar loses its fade as soon as one of these is on it, since a group's opacity
|
|
158
|
+
cannot be taken back by a child.
|
|
159
|
+
|
|
160
|
+
```html
|
|
161
|
+
<button class="mw-login-btn mw-header-keep" type="button">
|
|
162
|
+
<i class="fas fa-lock"></i>
|
|
163
|
+
</button>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
- Focus on a keep control leaves the bar where it is. The rescue that pulls it
|
|
167
|
+
back (WCAG 2.4.11) is for what hides behind it - a control in front of it is
|
|
168
|
+
on screen already, and without the exception a click on the theme toggle would
|
|
169
|
+
haul in the whole header. Tabbing to anything else in the bar still brings it.
|
|
170
|
+
- While it floats it carries a ring and a soft shadow, so a dark control still
|
|
171
|
+
reads on a dark picture; both are gone once the bar is there. That occupies
|
|
172
|
+
`box-shadow`, so a keep element cannot bring a shadow of its own.
|
|
173
|
+
|
|
150
174
|
**Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
|
|
151
175
|
and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
|
|
152
176
|
192.168.\*. In a SPA, reimplement it: add a `<div class="mw-localhost-indicator-pulse">`
|
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,24 @@ 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.20.0] - 2026-09-18
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- new mobile navigation
|
|
14
|
+
|
|
15
|
+
## [5.19.0] - 2026-09-17
|
|
16
|
+
|
|
17
|
+
### Fixed
|
|
18
|
+
|
|
19
|
+
- technical issue
|
|
20
|
+
|
|
21
|
+
## [5.18.0] - 2026-09-17
|
|
22
|
+
|
|
23
|
+
### Added
|
|
24
|
+
|
|
25
|
+
- possibly keep buttons on a non-sticky header
|
|
26
|
+
|
|
9
27
|
## [5.17.0] - 2026-09-17
|
|
10
28
|
|
|
11
29
|
### Fixed
|
package/README.md
CHANGED
|
@@ -45,12 +45,12 @@ The result is a framework that balances utility with simplicity, offering develo
|
|
|
45
45
|
<title>My MaverickWave Project</title>
|
|
46
46
|
<link
|
|
47
47
|
rel="stylesheet"
|
|
48
|
-
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.
|
|
48
|
+
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.20.0/maverick-wave.min.css"
|
|
49
49
|
/>
|
|
50
50
|
</head>
|
|
51
51
|
<body>
|
|
52
52
|
<!-- Your content here -->
|
|
53
|
-
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.
|
|
53
|
+
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.20.0/maverick-wave.min.js"></script>
|
|
54
54
|
</body>
|
|
55
55
|
</html>
|
|
56
56
|
```
|
package/index.html
CHANGED
|
@@ -552,7 +552,7 @@
|
|
|
552
552
|
<a class="mw-skip-link" href="#main">Skip to content</a>
|
|
553
553
|
|
|
554
554
|
<!-- Header -->
|
|
555
|
-
<header class="mw-header mw-localhost-indicator-activated">
|
|
555
|
+
<header class="mw-header mw-localhost-indicator-activated mw-header-reveal">
|
|
556
556
|
<div class="mw-container">
|
|
557
557
|
@@include('./src/partials/header-container.html')
|
|
558
558
|
</div>
|