maverick-wave 5.25.0 → 5.27.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 (81) hide show
  1. package/.claude/skills/mw-maverick-wave/SKILL.md +9 -1
  2. package/.claude/skills/mw-maverick-wave/references/components.md +13 -6
  3. package/.claude/skills/mw-maverick-wave/references/layout.md +18 -12
  4. package/.claude/skills/mw-maverick-wave/references/theming.md +15 -10
  5. package/CHANGELOG.md +12 -0
  6. package/README.md +2 -2
  7. package/maverick-wave.min.css +8 -6
  8. package/package.json +2 -2
  9. package/scripts/verify.js +10 -1
  10. package/src/partials/accordions-container.html +1 -1
  11. package/src/partials/alerts-container.html +1 -1
  12. package/src/partials/announcement-container.html +1 -1
  13. package/src/partials/avatars-container.html +1 -1
  14. package/src/partials/badges-container.html +1 -1
  15. package/src/partials/blog-posts-container.html +2 -2
  16. package/src/partials/breadcrumbs-container.html +1 -1
  17. package/src/partials/button-bar-container.html +1 -1
  18. package/src/partials/buttons-container.html +1 -1
  19. package/src/partials/calendar-container.html +1 -1
  20. package/src/partials/cards-container.html +1 -1
  21. package/src/partials/code-container.html +1 -1
  22. package/src/partials/colors-container.html +3 -3
  23. package/src/partials/coming-soon-container.html +1 -1
  24. package/src/partials/contact-container.html +1 -1
  25. package/src/partials/divider-container.html +1 -1
  26. package/src/partials/dropdown-container.html +1 -1
  27. package/src/partials/empty-state-container.html +1 -1
  28. package/src/partials/form-container.html +1 -1
  29. package/src/partials/form-elements-container.html +1 -1
  30. package/src/partials/form-field-container.html +1 -1
  31. package/src/partials/gallery-container.html +1 -1
  32. package/src/partials/grid-container.html +1 -1
  33. package/src/partials/header-utilities-container.html +2 -2
  34. package/src/partials/html-lists-container.html +1 -1
  35. package/src/partials/info-container.html +1 -1
  36. package/src/partials/input-group-container.html +1 -1
  37. package/src/partials/item-lists-container.html +1 -1
  38. package/src/partials/kanban-container.html +2 -2
  39. package/src/partials/kbd-container.html +1 -1
  40. package/src/partials/leader-row-container.html +2 -2
  41. package/src/partials/login-container.html +2 -2
  42. package/src/partials/lunch-menu-container.html +2 -2
  43. package/src/partials/media-container.html +1 -1
  44. package/src/partials/meta-info-container.html +1 -1
  45. package/src/partials/modals-container.html +1 -1
  46. package/src/partials/page-header-container.html +1 -1
  47. package/src/partials/pagination-container.html +2 -2
  48. package/src/partials/palette-container.html +2 -2
  49. package/src/partials/panels-container.html +2 -2
  50. package/src/partials/parallax-container.html +1 -1
  51. package/src/partials/pricing-container.html +2 -2
  52. package/src/partials/progress-container.html +1 -1
  53. package/src/partials/prose-container.html +1 -1
  54. package/src/partials/ratings-container.html +1 -1
  55. package/src/partials/section-head-container.html +6 -3
  56. package/src/partials/segmented-container.html +1 -1
  57. package/src/partials/skeleton-container.html +1 -1
  58. package/src/partials/spinners-container.html +1 -1
  59. package/src/partials/stepper-container.html +1 -1
  60. package/src/partials/tables-container.html +1 -1
  61. package/src/partials/tabs-container.html +1 -1
  62. package/src/partials/tags-container.html +1 -1
  63. package/src/partials/testimonials-container.html +1 -1
  64. package/src/partials/tiles-container.html +39 -39
  65. package/src/partials/typography-container.html +1 -1
  66. package/src/partials/utilities-container.html +1 -1
  67. package/src/scss/base/_base.scss +37 -11
  68. package/src/scss/base/_reset.scss +7 -1
  69. package/src/scss/components/_announcement.scss +1 -3
  70. package/src/scss/components/_blog-post.scss +5 -4
  71. package/src/scss/components/_cards.scss +2 -2
  72. package/src/scss/components/_contact.scss +5 -3
  73. package/src/scss/components/_localhost-indicator.scss +2 -2
  74. package/src/scss/components/_panels.scss +18 -52
  75. package/src/scss/components/_tabs.scss +2 -2
  76. package/src/scss/components/_tiles.scss +43 -49
  77. package/src/scss/layout/_grid.scss +22 -0
  78. package/src/scss/layout/_header.scss +0 -11
  79. package/src/scss/layout/_home.scss +2 -2
  80. package/src/scss/layout/_section.scss +45 -13
  81. package/src/scss/utilities/_touch-targets.scss +4 -0
package/.claude/skills/mw-maverick-wave/SKILL.md CHANGED
@@ -116,6 +116,9 @@ system monospace stack behind it. Load a font yourself and either set the three
116
116
 
117
117
  - Classes: `mw-` prefix, kebab-case: `.mw-button-bar`, `.mw-item-list-compact`
118
118
  - Tokens: `--mw-` prefix: `--mw-primary-color`, `--mw-border-accent`
119
+ - Keyframes: `mw-` prefix too (`mw-toast-in`, `mw-home-fade`). `@keyframes` is
120
+ global, so an unprefixed name in your app and one in the framework are the
121
+ same animation - the loser disappears without an error
119
122
  - Variants are suffixes on the base class: `mw-btn` + `mw-btn-primary`,
120
123
  `mw-alert` + `mw-alert-danger`
121
124
  - Colour variant names are the same everywhere: `primary`, `secondary`,
@@ -379,7 +382,8 @@ feature frame) ·
379
382
  11. **Touch targets grow on their own.** On `pointer: coarse` or below 768px,
380
383
  `mw-btn` gets a 2.75rem minimum height, `mw-btn-sm`, `mw-input-sm`,
381
384
  `mw-select-sm` and `mw-textarea-sm` 2.5rem, a tab 2.75rem, a calendar day
382
- 44px, and list rows / menu items / pager pages / accordion headers 2.75rem.
385
+ 44px, `mw-section-btn` 2.75rem, and list rows / menu items / pager pages /
386
+ accordion headers 2.75rem.
383
387
  `mw-btn-mini` keeps its 18px circle - it sits in tag rows and table cells
384
388
  where a bigger one would shift the layout - and grows its _hit area_ to 28px
385
389
  via a pseudo-element, and `mw-kanban-action` does the same - its 32px box
@@ -475,6 +479,10 @@ feature frame) ·
475
479
  with it, so `<button type="button" class="mw-tabs-nav-item" data-tab="...">`
476
480
  is the whole markup. The burger is the worst of the five to get wrong:
477
481
  below the collapse breakpoint it is the only route to the navigation.
482
+ `mw-tile` is the same rule from the other side: the class paints a surface
483
+ on anything, but the hand cursor, the focus ring and the tap handling only
484
+ come with `<a class="mw-tile">` or `<button class="mw-tile">`. On a `<div>`
485
+ you get the look and nothing a keyboard can reach.
478
486
  If you build your own clickable thing: the element decides whether anyone
479
487
  without a mouse can use it, the class only decides how it looks.
480
488
  28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
package/.claude/skills/mw-maverick-wave/references/components.md CHANGED
@@ -492,29 +492,36 @@ A bordered box with a header rule - the "titled section" of an application.
492
492
  ```
493
493
 
494
494
  - Header colour: `mw-panel-primary`, `mw-panel-secondary`; without them the
495
- header is neutral.
495
+ header is neutral. Title and action sit at opposite ends and wrap to two rows
496
+ when the panel gets too narrow for both.
496
497
  - Height: `mw-panel-scrollable` (500px), `mw-panel-max-height-sm` (300px),
497
498
  `-md` (500px), `-lg` (700px) - the body scrolls, header and footer stay.
498
- - `mw-panel` has `min-height: 100%`, so panels in a grid row end up equally tall.
499
+ - Panels in a grid row end up equally tall on their own - a grid item stretches.
500
+ A height variant opts out with `align-self: start`.
499
501
 
500
502
  ## Tiles
501
503
 
502
- Compact, clickable info blocks in a fixed 3-column grid.
504
+ Compact info blocks. The look is on the class, the click is on the element: put
505
+ `mw-tile` on an `<a>` or a `<button>` and it gets the hand cursor, the focus ring
506
+ and the tap handling. On a `<div>` it stays a plain surface - no cursor, no ring,
507
+ because there would be nothing to reach by keyboard.
503
508
 
504
509
  ```html
505
510
  <div class="mw-tiles mw-tiles-2col">
506
- <div class="mw-tile">
511
+ <a href="/billing" class="mw-tile">
507
512
  <div class="mw-tile-img"><img src="icon.png" alt="" /></div>
508
513
  <h3 class="mw-tile-header">Billing</h3>
509
514
  <div class="mw-tile-body">
510
515
  <p>Invoices and payments</p>
511
516
  </div>
512
517
  <div class="mw-tile-footer">Updated 2026-01-02</div>
513
- </div>
518
+ </a>
514
519
  </div>
515
520
  ```
516
521
 
517
- Container: `mw-tiles` (3 columns), `mw-tiles-2col`, `mw-tiles-4col`.
522
+ Container: `mw-tiles` (1 / 2 at `sm` / 3 at `md`), `mw-tiles-2col` (1 / 2 at
523
+ `sm`), `mw-tiles-4col` (1 / 2 at `sm` / 4 at `lg`) - the same ramps `mw-grid-3`,
524
+ `-2` and `-4` use, and the full container width like any other grid.
518
525
  Tile sizes: `mw-tile-sm`, `mw-tile-lg`.
519
526
 
520
527
  ## Accordion
package/.claude/skills/mw-maverick-wave/references/layout.md CHANGED
@@ -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`); point it at `--mw-section-padding-fluid` for spacing that grows with the screen |
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,9 +282,15 @@ 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
- (3.7rem). Anything it can cover on a jump needs the sum as `scroll-margin-top`;
287
- a block wrapping a `mw-section-subtitle` gets that from the framework already.
292
+ (3.75rem). A page carrying one adds that height to `scroll-padding-top` on its
293
+ own, so anchors and tab stops both clear it - nothing to add per target.
288
294
 
289
295
  ## Page header
290
296
 
package/.claude/skills/mw-maverick-wave/references/theming.md CHANGED
@@ -83,7 +83,10 @@ 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-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-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 |
88
+ | `--mw-section-nav-height` | Height the sticky `mw-section-nav` reserves (3.75rem). A page carrying a strip adds it to `scroll-padding-top` itself, through the offset token below |
89
+ | `--mw-announcement-offset`, `--mw-section-nav-offset` | What each layer of sticky chrome below the header adds to `scroll-padding-top`. `0px` until the component switches it on, so a page with both a ribbon and a strip reserves for both. For a sticky bar of your own, override `scroll-padding-top` on `html` - the calc names these two |
87
90
  | `--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
91
  | `--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 |
89
92
  | `--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` |
@@ -233,15 +236,17 @@ URL carries the choice - a link is how a look gets agreed on before it is built.
233
236
  | `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
237
  | `mw-density-roomy` | The same one step up |
235
238
 
236
- | Property | Effect |
237
- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
238
- | `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
239
- | `--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 |
240
- | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
241
- | `--mw-container-width` | Where the content stops growing |
242
- | `--mw-section-padding-block` | Air above and below each section |
243
- | `--mw-section-padding-fluid` | The same, but growing with the screen - point the line above at it |
244
- | `--mw-motion-scale` | Multiplies all six duration tokens - `0.6` brisk, `1.6` relaxed. `prefers-reduced-motion` still overrides it |
239
+ | Property | Effect |
240
+ | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
241
+ | `--mw-radius-scale` | Multiplies the whole radius scale - `0` squares everything off |
242
+ | `--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 |
243
+ | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
244
+ | `--mw-container-width` | Where the content stops growing |
245
+ | `--mw-section-padding-block` | Air above and below each section |
246
+ | `--mw-section-padding-fluid` | The same, but growing with the screen - point the line above at it |
247
+ | `--mw-section-padding-compact`, `--mw-section-padding-airy` | A tighter and an airier fixed rhythm - point the line above at one |
248
+ | `--mw-section-head-step` | Scales every gap in a section head and around a subtitle at once |
249
+ | `--mw-motion-scale` | Multiplies all six duration tokens - `0.6` brisk, `1.6` relaxed. `prefers-reduced-motion` still overrides it |
245
250
 
246
251
  **Writing your own.** A variant that retunes a _theme-bound_ token - anything in
247
252
  the dark/light maps - cannot be written on `:root` alone: `mw-theme-light`
package/CHANGELOG.md CHANGED
@@ -6,6 +6,18 @@ 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.27.0] - 2026-09-21
10
+
11
+ ### Changed
12
+
13
+ - Spacing and small refactorings in css code
14
+
15
+ ## [5.26.0] - 2026-09-20
16
+
17
+ ### Changed
18
+
19
+ - Spacing
20
+
9
21
  ## [5.25.0] - 2026-09-20
10
22
 
11
23
  ### 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.25.0/maverick-wave.min.css"
48
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.27.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.25.0/maverick-wave.min.js"></script>
53
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.27.0/maverick-wave.min.js"></script>
54
54
  </body>
55
55
  </html>
56
56
  ```