maverick-wave 5.25.0 → 5.26.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/references/layout.md +16 -10
- package/.claude/skills/mw-maverick-wave/references/theming.md +13 -9
- package/CHANGELOG.md +6 -0
- package/README.md +2 -2
- package/maverick-wave.min.css +5 -3
- package/package.json +2 -2
- package/src/partials/accordions-container.html +1 -1
- package/src/partials/alerts-container.html +1 -1
- package/src/partials/announcement-container.html +1 -1
- package/src/partials/avatars-container.html +1 -1
- package/src/partials/badges-container.html +1 -1
- package/src/partials/blog-posts-container.html +2 -2
- package/src/partials/breadcrumbs-container.html +1 -1
- package/src/partials/button-bar-container.html +1 -1
- package/src/partials/buttons-container.html +1 -1
- package/src/partials/calendar-container.html +1 -1
- package/src/partials/cards-container.html +1 -1
- package/src/partials/code-container.html +1 -1
- package/src/partials/colors-container.html +3 -3
- package/src/partials/coming-soon-container.html +1 -1
- package/src/partials/contact-container.html +1 -1
- package/src/partials/divider-container.html +1 -1
- package/src/partials/dropdown-container.html +1 -1
- package/src/partials/empty-state-container.html +1 -1
- package/src/partials/form-container.html +1 -1
- package/src/partials/form-elements-container.html +1 -1
- package/src/partials/form-field-container.html +1 -1
- package/src/partials/gallery-container.html +1 -1
- package/src/partials/grid-container.html +1 -1
- package/src/partials/header-utilities-container.html +2 -2
- package/src/partials/html-lists-container.html +1 -1
- package/src/partials/info-container.html +1 -1
- package/src/partials/input-group-container.html +1 -1
- package/src/partials/item-lists-container.html +1 -1
- package/src/partials/kanban-container.html +2 -2
- package/src/partials/kbd-container.html +1 -1
- package/src/partials/leader-row-container.html +2 -2
- package/src/partials/login-container.html +2 -2
- package/src/partials/lunch-menu-container.html +2 -2
- package/src/partials/media-container.html +1 -1
- package/src/partials/meta-info-container.html +1 -1
- package/src/partials/modals-container.html +1 -1
- package/src/partials/page-header-container.html +1 -1
- package/src/partials/pagination-container.html +2 -2
- package/src/partials/palette-container.html +2 -2
- package/src/partials/panels-container.html +2 -2
- package/src/partials/parallax-container.html +1 -1
- package/src/partials/pricing-container.html +2 -2
- package/src/partials/progress-container.html +1 -1
- package/src/partials/prose-container.html +1 -1
- package/src/partials/ratings-container.html +1 -1
- package/src/partials/section-head-container.html +6 -3
- package/src/partials/segmented-container.html +1 -1
- package/src/partials/skeleton-container.html +1 -1
- package/src/partials/spinners-container.html +1 -1
- package/src/partials/stepper-container.html +1 -1
- package/src/partials/tables-container.html +1 -1
- package/src/partials/tabs-container.html +1 -1
- package/src/partials/tags-container.html +1 -1
- package/src/partials/testimonials-container.html +1 -1
- package/src/partials/tiles-container.html +1 -1
- package/src/partials/typography-container.html +1 -1
- package/src/partials/utilities-container.html +1 -1
- package/src/scss/base/_base.scss +21 -5
- package/src/scss/layout/_section.scss +32 -9
- package/src/scss/utilities/_touch-targets.scss +4 -0
|
@@ -237,16 +237,16 @@ pointing at the trigger in every combination.
|
|
|
237
237
|
|
|
238
238
|
## Sections
|
|
239
239
|
|
|
240
|
-
| Class | Use
|
|
241
|
-
| ----------------------------------- |
|
|
242
|
-
| `mw-section` | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`)
|
|
243
|
-
| `mw-section-alternate` | Diagonal pattern background; combine with `mw-section`
|
|
244
|
-
| `mw-section-head` | The opening of a section: hairline rule, a mark on its left end, title and lead - all on one left edge. Variants `-secondary`, `-success`, `-warning`, `-danger`, `-info` recolour the mark
|
|
245
|
-
| `mw-section-head-title` | The heading inside it, `2xl` growing to `4xl` up to 992px, tight tracking
|
|
246
|
-
| `mw-section-head-intro` | The lead under it - muted, 65 characters, and from `md` up at most four fifths of the container
|
|
247
|
-
| `mw-section-head-numbered` | Adds the running number at the right end of the rule; the browser counts, restarting per `mw-main`
|
|
248
|
-
| `mw-section-subtitle` | Left-aligned heading with a thin secondary underline, `xl` growing to `2xl` up to 576px - the level inside a section
|
|
249
|
-
| `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows
|
|
240
|
+
| Class | Use |
|
|
241
|
+
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
242
|
+
| `mw-section` | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`). Point it at `--mw-section-padding-compact` or `--mw-section-padding-airy`, which step down the same way, or at `--mw-section-padding-fluid`, which ramps with the screen instead |
|
|
243
|
+
| `mw-section-alternate` | Diagonal pattern background; combine with `mw-section` |
|
|
244
|
+
| `mw-section-head` | The opening of a section: hairline rule, a mark on its left end, title and lead - all on one left edge. Variants `-secondary`, `-success`, `-warning`, `-danger`, `-info` recolour the mark |
|
|
245
|
+
| `mw-section-head-title` | The heading inside it, `2xl` growing to `4xl` up to 992px, tight tracking |
|
|
246
|
+
| `mw-section-head-intro` | The lead under it - muted, 65 characters, and from `md` up at most four fifths of the container |
|
|
247
|
+
| `mw-section-head-numbered` | Adds the running number at the right end of the rule; the browser counts, restarting per `mw-main` |
|
|
248
|
+
| `mw-section-subtitle` | Left-aligned heading with a thin secondary underline, `xl` growing to `2xl` up to 576px - the level inside a section. A paragraph right under it is treated as its lead and gets the gap to the content from the framework - no margin utility needed |
|
|
249
|
+
| `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows |
|
|
250
250
|
|
|
251
251
|
```html
|
|
252
252
|
<section class="mw-section mw-section-alternate">
|
|
@@ -282,6 +282,12 @@ Its tokens: `--mw-section-head-gap` (space to the content below),
|
|
|
282
282
|
`--mw-section-head-pad` (rule to title), `--mw-section-head-mark-width` (80px)
|
|
283
283
|
and `--mw-section-head-mark-color`.
|
|
284
284
|
|
|
285
|
+
The first two are multiples of `--mw-section-head-step`, which is derived from
|
|
286
|
+
`--mw-section-padding-block` - so a section spacing preset moves the heads with
|
|
287
|
+
it, and the fluid preset carries them along without a ramp of its own. A head
|
|
288
|
+
with no `mw-section-head-intro` takes a smaller gap: the gap sized to follow a
|
|
289
|
+
paragraph reads as a hole under a rule and one line of type.
|
|
290
|
+
|
|
285
291
|
The strip sticks at `--mw-header-height` and is `--mw-section-nav-height` tall
|
|
286
292
|
(3.7rem). Anything it can cover on a jump needs the sum as `scroll-margin-top`;
|
|
287
293
|
a block wrapping a `mw-section-subtitle` gets that from the framework already.
|
|
@@ -83,6 +83,8 @@ 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-padding-fluid` | The fluid alternative to the value above - 1.75rem on a phone up to 5.5rem at `xl`. Not applied by itself: set `--mw-section-padding-block: var(--mw-section-padding-fluid)` |
|
|
86
|
+
| `--mw-section-padding-compact`, `--mw-section-padding-airy` | The two presets, as tokens so the phone steps reach them - point `--mw-section-padding-block` at one |
|
|
87
|
+
| `--mw-section-head-step` | One step of the head rhythm, derived from `--mw-section-padding-block`. Every measure in a head and around a subtitle is a multiple of it, so a spacing preset moves them all |
|
|
86
88
|
| `--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 |
|
|
87
89
|
| `--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 |
|
|
88
90
|
| `--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 |
|
|
@@ -233,15 +235,17 @@ URL carries the choice - a link is how a look gets agreed on before it is built.
|
|
|
233
235
|
| `mw-density-compact` | Card and panel padding and the three control heights drop one step down the spacing scale. Type is untouched - `--mw-root-font-size` is the switch that scales everything together |
|
|
234
236
|
| `mw-density-roomy` | The same one step up |
|
|
235
237
|
|
|
236
|
-
| Property
|
|
237
|
-
|
|
|
238
|
-
| `--mw-radius-scale`
|
|
239
|
-
| `--mw-root-font-size`
|
|
240
|
-
| `--mw-font-family-heading`
|
|
241
|
-
| `--mw-container-width`
|
|
242
|
-
| `--mw-section-padding-block`
|
|
243
|
-
| `--mw-section-padding-fluid`
|
|
244
|
-
| `--mw-
|
|
238
|
+
| Property | Effect |
|
|
239
|
+
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
240
|
+
| `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
|
|
241
|
+
| `--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 |
|
|
242
|
+
| `--mw-font-family-heading` | Headline typeface; body copy is untouched |
|
|
243
|
+
| `--mw-container-width` | Where the content stops growing |
|
|
244
|
+
| `--mw-section-padding-block` | Air above and below each section |
|
|
245
|
+
| `--mw-section-padding-fluid` | The same, but growing with the screen - point the line above at it |
|
|
246
|
+
| `--mw-section-padding-compact`, `--mw-section-padding-airy` | A tighter and an airier fixed rhythm - point the line above at one |
|
|
247
|
+
| `--mw-section-head-step` | Scales every gap in a section head and around a subtitle at once |
|
|
248
|
+
| `--mw-motion-scale` | Multiplies all six duration tokens - `0.6` brisk, `1.6` relaxed. `prefers-reduced-motion` still overrides it |
|
|
245
249
|
|
|
246
250
|
**Writing your own.** A variant that retunes a _theme-bound_ token - anything in
|
|
247
251
|
the dark/light maps - cannot be written on `:root` alone: `mw-theme-light`
|
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,12 @@ 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.26.0] - 2026-09-20
|
|
10
|
+
|
|
11
|
+
### Changed
|
|
12
|
+
|
|
13
|
+
- Spacing
|
|
14
|
+
|
|
9
15
|
## [5.25.0] - 2026-09-20
|
|
10
16
|
|
|
11
17
|
### Added
|
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.26.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.26.0/maverick-wave.min.js"></script>
|
|
54
54
|
</body>
|
|
55
55
|
</html>
|
|
56
56
|
```
|