maverick-wave 3.11.0 → 4.1.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 (58) hide show
  1. package/.claude/skills/maverick-wave/SKILL.md +59 -30
  2. package/.claude/skills/maverick-wave/examples/angular-form.md +1 -1
  3. package/.claude/skills/maverick-wave/examples/angular-services.md +15 -8
  4. package/.claude/skills/maverick-wave/examples/static-landing-page.md +4 -4
  5. package/.claude/skills/maverick-wave/references/components.md +269 -25
  6. package/.claude/skills/maverick-wave/references/forms.md +8 -4
  7. package/.claude/skills/maverick-wave/references/javascript.md +20 -8
  8. package/.claude/skills/maverick-wave/references/layout.md +48 -3
  9. package/.claude/skills/maverick-wave/references/theming.md +34 -25
  10. package/CHANGELOG.md +17 -26
  11. package/index.html +25 -0
  12. package/maverick-wave.min.css +2 -2
  13. package/maverick-wave.min.js +1 -1
  14. package/package.json +2 -2
  15. package/src/js/main.js +314 -20
  16. package/src/partials/accordions-container.html +2 -2
  17. package/src/partials/button-bar-container.html +4 -2
  18. package/src/partials/buttons-container.html +35 -0
  19. package/src/partials/calendar-container.html +205 -0
  20. package/src/partials/cards-container.html +43 -0
  21. package/src/partials/documentation-container.html +3 -0
  22. package/src/partials/form-container.html +1 -1
  23. package/src/partials/get-started-container.html +2 -2
  24. package/src/partials/kanban-container.html +680 -715
  25. package/src/partials/modals-container.html +5 -5
  26. package/src/partials/pagination-container.html +50 -13
  27. package/src/partials/segmented-container.html +66 -0
  28. package/src/partials/tables-container.html +96 -24
  29. package/src/partials/tabs-container.html +16 -6
  30. package/src/partials/tags-container.html +15 -0
  31. package/src/partials/timelines-container.html +2 -2
  32. package/src/partials/utilities-container.html +81 -0
  33. package/src/scss/abstracts/_mixins.scss +34 -0
  34. package/src/scss/abstracts/_variables.scss +4 -0
  35. package/src/scss/base/_base.scss +21 -0
  36. package/src/scss/components/_accordions.scss +2 -0
  37. package/src/scss/components/_button-bar.scss +6 -0
  38. package/src/scss/components/_buttons.scss +67 -0
  39. package/src/scss/components/_calendar.scss +290 -0
  40. package/src/scss/components/_content-slider.scss +1 -0
  41. package/src/scss/components/_index.scss +2 -0
  42. package/src/scss/components/_modals.scss +15 -4
  43. package/src/scss/components/_pagination.scss +68 -64
  44. package/src/scss/components/_segmented.scss +85 -0
  45. package/src/scss/components/_tables.scss +16 -0
  46. package/src/scss/components/_tabs.scss +15 -0
  47. package/src/scss/components/_tags.scss +16 -0
  48. package/src/scss/components/_theme-toggle.scss +2 -0
  49. package/src/scss/components/_timelines.scss +3 -0
  50. package/src/scss/form-elements/_form.scss +13 -7
  51. package/src/scss/layout/_header.scss +3 -0
  52. package/src/scss/layout/_main.scss +5 -1
  53. package/src/scss/layout/_section.scss +1 -1
  54. package/src/scss/utilities/_accessibility.scss +14 -0
  55. package/src/scss/utilities/_flex.scss +17 -0
  56. package/src/scss/utilities/_index.scss +2 -0
  57. package/src/scss/utilities/_text.scss +17 -5
  58. package/src/scss/utilities/_touch-targets.scss +54 -0
package/.claude/skills/maverick-wave/references/theming.md CHANGED
@@ -37,31 +37,40 @@ a palette switch meant setting 41 variables.
37
37
 
38
38
  ## Which token for what
39
39
 
40
- | Token | Role |
41
- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
42
- | `--mw-primary-color` | Brand colour: primary buttons, table headers, focus rings, active states |
43
- | `--mw-primary-color-hover` | Solid hover surface (derived: base + 18% black) |
44
- | `--mw-primary-background` | 20% tint - focus halo, scrollbar tracks |
45
- | `--mw-primary-background-hover` | 50% tint - row and list hover |
46
- | `--mw-primary-info-background` | 70% tint - alert and info surfaces |
47
- | `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines |
48
- | `--mw-secondary-*` | Same set for the second brand colour |
49
- | `--mw-success/warning/danger/info-color` | Status colours, each with `-color-hover`, `-info-background`, `-info-background-hover` |
50
- | `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots) |
51
- | `--mw-gray-color` | Neutral foreground: muted icons, tooltips |
52
- | `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons |
53
- | `--mw-overlay-background` | Heavy scrim (60%) behind modals and blocking spinners |
54
- | `--mw-page-background`, `--mw-card-background`, `--mw-footer-background`, `--mw-border`, `--mw-shadow`, `--mw-text-color`, `--mw-text-muted-color`, `--mw-hero-overlay-background` | The **active theme** - aliases pointing at the `--mw-dark-*` or `--mw-light-*` set |
55
- | `--mw-header-*` | Header chrome: `background`, `text-color`, `navbar-list-color`, `navbar-list-active-color`, `burgerbutton-color`, `border` - dark in both themes |
56
- | `--mw-form-elements-background`, `--mw-form-elements-color` | Form controls stay light in both themes and therefore have their own pair |
57
- | `--mw-font-family-base`, `-heading`, `-mono` | Font stacks (default: system stacks - no font is bundled) |
58
- | `--mw-hero-background` | Hero image (`url(...)`) |
59
- | `--mw-transition` | Global transition (`all 0.3s ease`) |
60
- | `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px) |
61
- | `--mw-card-addon-color` | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour |
62
- | `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
63
- | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height` | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`) |
64
- | `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
40
+ | Token | Role |
41
+ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
42
+ | `--mw-primary-color` | Brand colour: primary buttons, table headers, focus rings, active states |
43
+ | `--mw-primary-color-hover` | Solid hover surface (derived: base + 18% black) |
44
+ | `--mw-primary-background` | 20% tint - focus halo, scrollbar tracks |
45
+ | `--mw-primary-background-hover` | 50% tint - row and list hover |
46
+ | `--mw-primary-info-background` | 70% tint - alert and info surfaces |
47
+ | `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines |
48
+ | `--mw-secondary-*` | Same set for the second brand colour |
49
+ | `--mw-success/warning/danger/info-color` | Status colours, each with `-color-hover`, `-info-background`, `-info-background-hover` |
50
+ | `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots) |
51
+ | `--mw-gray-color` | Neutral foreground: muted icons, tooltips |
52
+ | `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons |
53
+ | `--mw-surface-muted` | Alias of `--mw-gray-background` under the name you reach for: a slightly set-off area _inside_ a card - hint block, framed paragraph, form summary |
54
+ | `--mw-overlay-background` | Heavy scrim (60%) behind modals and blocking spinners |
55
+ | `--mw-page-background`, `--mw-card-background`, `--mw-footer-background`, `--mw-border`, `--mw-shadow`, `--mw-text-color`, `--mw-text-muted-color`, `--mw-hero-overlay-background` | The **active theme** - aliases pointing at the `--mw-dark-*` or `--mw-light-*` set |
56
+ | `--mw-header-*` | Header chrome: `background`, `text-color`, `navbar-list-color`, `navbar-list-active-color`, `burgerbutton-color`, `border` - dark in both themes |
57
+ | `--mw-form-elements-background`, `--mw-form-elements-color` | Form controls stay light in both themes and therefore have their own pair |
58
+ | `--mw-font-family-base`, `-heading`, `-mono` | Font stacks (default: system stacks - no font is bundled) |
59
+ | `--mw-hero-background` | Hero image (`url(...)`) |
60
+ | `--mw-transition` | Global transition (`all 0.3s ease`) |
61
+ | `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px) |
62
+ | `--mw-card-addon-color` | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour |
63
+ | `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
64
+ | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height` | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`) |
65
+ | `--mw-container-width`, `--mw-container-width-sm` | Content width of `mw-container` (`min(1200px, 89%)`, below 576px a 1rem gutter) |
66
+ | `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (1.75rem) |
67
+ | `--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 |
68
+ | `--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` |
69
+ | `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
70
+
71
+ The four above are the knobs a good default cannot settle, because the right
72
+ answer differs per project: what reads as generous on a landing page costs
73
+ visible content in an application with a sticky header.
65
74
 
66
75
  Two rules that prevent most colour bugs:
67
76
 
package/CHANGELOG.md CHANGED
@@ -6,55 +6,46 @@ 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
- <<<<<<< HEAD
10
- <<<<<<< HEAD
11
- <<<<<<< HEAD
12
- <<<<<<< HEAD
13
- <<<<<<< HEAD
14
- ||||||| 4031dbb
15
- =======
16
- ||||||| 0be20d9
17
- =======
18
- ||||||| da0294d
19
- =======
20
- ||||||| 15e4c7d
21
- =======
9
+ ## [4.1.0] - 2026-08-19
10
+
11
+ ### Fixed
12
+
13
+ - changelog
14
+
15
+ ## [4.0.0] - 2026-08-19
16
+
17
+ ### Added
18
+
19
+ - calendar (month, week and compact month)
20
+
21
+ ### Changed
22
+
23
+ - pagination frame now matches the calendar
24
+ - big update with the needs of another project
25
+
22
26
  ## [3.11.0] - 2026-08-12
23
27
 
24
28
  ### Fixed
25
29
 
26
30
  - footer color
27
31
 
28
- >>>>>>> main
29
32
  ## [3.10.0] - 2026-08-10
30
33
 
31
34
  ### Added
32
35
 
33
36
  - kanban board
34
37
 
35
- >>>>>>> main
36
38
  ## [3.9.0] - 2026-08-07
37
39
 
38
40
  ### Fixed
39
41
 
40
- - technical issues
41
- >>>>>>> main
42
-
43
- ## [3.8.0] - 2026-08-07
44
-
45
- ### Fixed
46
-
47
42
  - technical issues
48
43
 
49
- > > > > > > > main
50
- ||||||| 4031dbb
51
- =======
52
44
  ## [3.8.0] - 2026-08-07
53
45
 
54
46
  ### Fixed
55
47
 
56
48
  - technical issues
57
- >>>>>>> main
58
49
 
59
50
  ## [3.7.0] - 2026-08-07
60
51
 
package/index.html CHANGED
@@ -93,12 +93,25 @@
93
93
  border: 1px solid var(--mw-border);
94
94
  }
95
95
 
96
+ /* A calendar fills its container; across the full page that stretches the
97
+ cells to 150px, so the demos get a realistic column instead */
98
+ .calendar-demo {
99
+ max-width: 520px;
100
+ margin-inline: auto;
101
+ }
102
+
96
103
  /* Medium screens */
97
104
  @media (max-width: 992px) {
98
105
  .version-corner {
99
106
  right: 7%;
100
107
  font-size: 1rem;
101
108
  }
109
+
110
+ /* Two calendars side by side squeeze their cells below md, so they
111
+ stack one breakpoint earlier than mw-grid-2 would on its own */
112
+ .calendar-demos {
113
+ grid-template-columns: minmax(0, 1fr);
114
+ }
102
115
  }
103
116
 
104
117
  /* Small screens */
@@ -346,6 +359,7 @@
346
359
  <nav class="mw-section-nav">
347
360
  <a href="#form-elements" class="mw-section-btn">Form Elements</a>
348
361
  <a href="#input-group" class="mw-section-btn">Input Group</a>
362
+ <a href="#segmented" class="mw-section-btn">Segmented Control</a>
349
363
  <a href="#form-field" class="mw-section-btn">Field Pattern</a>
350
364
  <a href="#form" class="mw-section-btn">Form</a>
351
365
  <a href="#login" class="mw-section-btn">Login</a>
@@ -361,6 +375,11 @@
361
375
  @@include('./src/partials/input-group-container.html')
362
376
  </div>
363
377
 
378
+ <!-- Segmented control container -->
379
+ <div id="segmented">
380
+ @@include('./src/partials/segmented-container.html')
381
+ </div>
382
+
364
383
  <!-- Form Field pattern container -->
365
384
  <div id="form-field">
366
385
  @@include('./src/partials/form-field-container.html')
@@ -383,6 +402,7 @@
383
402
  <a href="#meta-info" class="mw-section-btn">Meta Info</a>
384
403
  <a href="#tables" class="mw-section-btn">Tables</a>
385
404
  <a href="#kanban" class="mw-section-btn">Kanban</a>
405
+ <a href="#calendar" class="mw-section-btn">Calendar</a>
386
406
  <a href="#pagination" class="mw-section-btn">Pagination</a>
387
407
  <a href="#timelines" class="mw-section-btn">Timelines</a>
388
408
  <a href="#gallery" class="mw-section-btn">Image Gallery</a>
@@ -413,6 +433,11 @@
413
433
  @@include('./src/partials/kanban-container.html')
414
434
  </div>
415
435
 
436
+ <!-- Calendar container -->
437
+ <div id="calendar">
438
+ @@include('./src/partials/calendar-container.html')
439
+ </div>
440
+
416
441
  <!-- Pagination container -->
417
442
  <div id="pagination">
418
443
  @@include('./src/partials/pagination-container.html')