maverick-wave 3.11.0 → 4.0.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/maverick-wave/SKILL.md +59 -30
- package/.claude/skills/maverick-wave/examples/angular-form.md +1 -1
- package/.claude/skills/maverick-wave/examples/angular-services.md +15 -8
- package/.claude/skills/maverick-wave/examples/static-landing-page.md +4 -4
- package/.claude/skills/maverick-wave/references/components.md +269 -25
- package/.claude/skills/maverick-wave/references/forms.md +8 -4
- package/.claude/skills/maverick-wave/references/javascript.md +20 -8
- package/.claude/skills/maverick-wave/references/layout.md +48 -3
- package/.claude/skills/maverick-wave/references/theming.md +34 -25
- package/CHANGELOG.md +46 -0
- package/index.html +25 -0
- package/maverick-wave.min.css +2 -2
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +314 -20
- package/src/partials/accordions-container.html +2 -2
- package/src/partials/button-bar-container.html +4 -2
- package/src/partials/buttons-container.html +35 -0
- package/src/partials/calendar-container.html +205 -0
- package/src/partials/cards-container.html +43 -0
- package/src/partials/documentation-container.html +3 -0
- package/src/partials/form-container.html +1 -1
- package/src/partials/get-started-container.html +2 -2
- package/src/partials/kanban-container.html +680 -715
- package/src/partials/modals-container.html +5 -5
- package/src/partials/pagination-container.html +50 -13
- package/src/partials/segmented-container.html +66 -0
- package/src/partials/tables-container.html +96 -24
- package/src/partials/tabs-container.html +16 -6
- package/src/partials/tags-container.html +15 -0
- package/src/partials/timelines-container.html +2 -2
- package/src/partials/utilities-container.html +81 -0
- package/src/scss/abstracts/_mixins.scss +34 -0
- package/src/scss/abstracts/_variables.scss +4 -0
- package/src/scss/base/_base.scss +21 -0
- package/src/scss/components/_accordions.scss +2 -0
- package/src/scss/components/_button-bar.scss +6 -0
- package/src/scss/components/_buttons.scss +67 -0
- package/src/scss/components/_calendar.scss +290 -0
- package/src/scss/components/_content-slider.scss +1 -0
- package/src/scss/components/_index.scss +2 -0
- package/src/scss/components/_modals.scss +15 -4
- package/src/scss/components/_pagination.scss +68 -64
- package/src/scss/components/_segmented.scss +85 -0
- package/src/scss/components/_tables.scss +16 -0
- package/src/scss/components/_tabs.scss +15 -0
- package/src/scss/components/_tags.scss +16 -0
- package/src/scss/components/_theme-toggle.scss +2 -0
- package/src/scss/components/_timelines.scss +3 -0
- package/src/scss/form-elements/_form.scss +13 -7
- package/src/scss/layout/_header.scss +3 -0
- package/src/scss/layout/_main.scss +5 -1
- package/src/scss/layout/_section.scss +1 -1
- package/src/scss/utilities/_accessibility.scss +14 -0
- package/src/scss/utilities/_flex.scss +17 -0
- package/src/scss/utilities/_index.scss +2 -0
- package/src/scss/utilities/_text.scss +17 -5
- package/src/scss/utilities/_touch-targets.scss +54 -0
|
@@ -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-
|
|
54
|
-
| `--mw-
|
|
55
|
-
| `--mw-
|
|
56
|
-
| `--mw-
|
|
57
|
-
| `--mw-
|
|
58
|
-
| `--mw-
|
|
59
|
-
| `--mw-
|
|
60
|
-
| `--mw-
|
|
61
|
-
| `--mw-card-
|
|
62
|
-
| `--mw-
|
|
63
|
-
| `--mw-
|
|
64
|
-
| `--mw-
|
|
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
|
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
11
11
|
<<<<<<< HEAD
|
|
12
12
|
<<<<<<< HEAD
|
|
13
13
|
<<<<<<< HEAD
|
|
14
|
+
<<<<<<< HEAD
|
|
14
15
|
||||||| 4031dbb
|
|
15
16
|
=======
|
|
16
17
|
||||||| 0be20d9
|
|
@@ -19,6 +20,51 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
19
20
|
=======
|
|
20
21
|
||||||| 15e4c7d
|
|
21
22
|
=======
|
|
23
|
+
||||||| 19a1edb
|
|
24
|
+
=======
|
|
25
|
+
## [4.0.0] - 2026-08-19
|
|
26
|
+
|
|
27
|
+
### Added
|
|
28
|
+
|
|
29
|
+
- mw-sr-only
|
|
30
|
+
- mw-row-split (+ center)
|
|
31
|
+
- mw-btn-plain
|
|
32
|
+
- mw-tag-neutral / mw-tags-neutral
|
|
33
|
+
- mw-button-bar-center
|
|
34
|
+
- mw-segmented (+ secondary, auto)
|
|
35
|
+
- mw-text-currency
|
|
36
|
+
- mw-table-responsive-hint
|
|
37
|
+
- mw-actions-note
|
|
38
|
+
- scroll hint on the tab bar, no JavaScript needed
|
|
39
|
+
- touch targets grow on a coarse pointer or below 768px
|
|
40
|
+
- tokens: --mw-surface-muted, --mw-container-width, --mw-container-width-sm,
|
|
41
|
+
--mw-section-padding-block, --mw-calendar-dot, --mw-scroll-hint-cover
|
|
42
|
+
|
|
43
|
+
### Changed
|
|
44
|
+
|
|
45
|
+
- **Breaking:** mw-text-numeric is now digits only - use mw-text-currency for a
|
|
46
|
+
money column
|
|
47
|
+
- **Breaking:** mw-container drops to a 1rem gutter below 576px instead of 89%
|
|
48
|
+
- mw-active is the state class everywhere; bare active still works but is
|
|
49
|
+
deprecated
|
|
50
|
+
- calendar dot colour comes from --mw-calendar-dot, tone classes are presets
|
|
51
|
+
- mw-modal-backdrop works as a button without a reset
|
|
52
|
+
- modal widths evenly stepped: 370 / 520 / 720 / 960px
|
|
53
|
+
- mw-form-actions-hint is now mw-actions-note and works in modal, card and
|
|
54
|
+
panel footers too; the old name stays as an alias
|
|
55
|
+
|
|
56
|
+
## [3.12.0] - 2026-08-19
|
|
57
|
+
|
|
58
|
+
### Added
|
|
59
|
+
|
|
60
|
+
- calendar (month, week and compact month)
|
|
61
|
+
|
|
62
|
+
### Changed
|
|
63
|
+
|
|
64
|
+
- pagination frame now matches the calendar
|
|
65
|
+
- big update with the needs of another project
|
|
66
|
+
|
|
67
|
+
>>>>>>> main
|
|
22
68
|
## [3.11.0] - 2026-08-12
|
|
23
69
|
|
|
24
70
|
### Fixed
|
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')
|