maverick-wave 4.3.0 → 4.4.1

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 (71) hide show
  1. package/.claude/skills/maverick-wave/SKILL.md +5 -3
  2. package/.claude/skills/maverick-wave/examples/angular-form.md +4 -0
  3. package/.claude/skills/maverick-wave/examples/static-landing-page.md +1 -1
  4. package/.claude/skills/maverick-wave/references/forms.md +27 -0
  5. package/.claude/skills/maverick-wave/references/theming.md +91 -67
  6. package/CHANGELOG.md +16 -0
  7. package/CLAUDE.md +10 -10
  8. package/README.md +109 -31
  9. package/maverick-wave.min.css +2 -2
  10. package/package.json +2 -2
  11. package/scripts/verify.js +13 -7
  12. package/src/assets/header-logo.svg +4 -4
  13. package/src/js/main.js +3 -3
  14. package/src/partials/accordions-container.html +9 -9
  15. package/src/partials/blog-posts-container.html +1 -1
  16. package/src/partials/buttons-container.html +1 -1
  17. package/src/partials/colors-container.html +75 -3
  18. package/src/partials/footer-container.html +3 -3
  19. package/src/partials/form-elements-container.html +98 -0
  20. package/src/partials/form-field-container.html +20 -4
  21. package/src/partials/get-started-container.html +36 -33
  22. package/src/partials/header-utilities-container.html +1 -1
  23. package/src/partials/modals-container.html +1 -1
  24. package/src/partials/ratings-container.html +1 -1
  25. package/src/partials/segmented-container.html +2 -2
  26. package/src/partials/tables-container.html +4 -4
  27. package/src/partials/tabs-container.html +7 -6
  28. package/src/partials/tags-container.html +1 -1
  29. package/src/partials/timelines-container.html +5 -5
  30. package/src/partials/utilities-container.html +1 -1
  31. package/src/scss/abstracts/_variables.scss +158 -46
  32. package/src/scss/base/_base.scss +1 -1
  33. package/src/scss/base/_typography.scss +2 -2
  34. package/src/scss/components/_alerts.scss +2 -2
  35. package/src/scss/components/_avatars.scss +2 -2
  36. package/src/scss/components/_blog-post.scss +5 -5
  37. package/src/scss/components/_breadcrumbs.scss +3 -3
  38. package/src/scss/components/_button-bar.scss +4 -4
  39. package/src/scss/components/_buttons.scss +6 -6
  40. package/src/scss/components/_calendar.scss +10 -10
  41. package/src/scss/components/_cards.scss +2 -2
  42. package/src/scss/components/_divider.scss +3 -3
  43. package/src/scss/components/_empty-state.scss +4 -4
  44. package/src/scss/components/_gallery.scss +1 -1
  45. package/src/scss/components/_info.scss +3 -3
  46. package/src/scss/components/_kanban.scss +12 -12
  47. package/src/scss/components/_lists.scss +12 -12
  48. package/src/scss/components/_localhost-indicator.scss +2 -2
  49. package/src/scss/components/_meta-info.scss +1 -1
  50. package/src/scss/components/_ratings.scss +1 -1
  51. package/src/scss/components/_segmented.scss +3 -3
  52. package/src/scss/components/_spinners.scss +10 -10
  53. package/src/scss/components/_stepper.scss +4 -4
  54. package/src/scss/components/_tabs.scss +5 -5
  55. package/src/scss/components/_techstack-bucket.scss +2 -2
  56. package/src/scss/components/_timelines.scss +10 -10
  57. package/src/scss/form-elements/_checkbox.scss +1 -1
  58. package/src/scss/form-elements/_form.scss +4 -4
  59. package/src/scss/form-elements/_index.scss +1 -0
  60. package/src/scss/form-elements/_input-group.scss +1 -1
  61. package/src/scss/form-elements/_input.scss +3 -3
  62. package/src/scss/form-elements/_login.scss +2 -2
  63. package/src/scss/form-elements/_prefilled.scss +65 -0
  64. package/src/scss/form-elements/_select.scss +2 -2
  65. package/src/scss/form-elements/_slider.scss +1 -1
  66. package/src/scss/form-elements/_textarea.scss +2 -2
  67. package/src/scss/layout/_footer.scss +3 -3
  68. package/src/scss/layout/_header.scss +5 -5
  69. package/src/scss/layout/_section.scss +5 -5
  70. package/src/scss/utilities/_flex.scss +1 -1
  71. package/src/scss/utilities/_text.scss +6 -6
@@ -145,7 +145,7 @@ $_mw-slider-colors: (
145
145
  top: -15px;
146
146
  }
147
147
 
148
- // 110 numeric style
148
+ // 1-10 numeric style
149
149
  &.mw-slider-numeric::after {
150
150
  content: attr(data-value) '/10';
151
151
  }
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  &:read-only {
33
- background: var(--mw-gray-background);
33
+ background-color: var(--mw-gray-background);
34
34
  color: var(--mw-text-muted-color);
35
35
  cursor: default;
36
36
  box-shadow: none;
@@ -58,7 +58,7 @@
58
58
 
59
59
  // disabled state
60
60
  &:disabled {
61
- background: var(--mw-gray-background);
61
+ background-color: var(--mw-gray-background);
62
62
  color: var(--mw-text-muted-color);
63
63
  cursor: not-allowed;
64
64
  }
@@ -26,7 +26,7 @@
26
26
  h3 {
27
27
  font-size: font-size('lg');
28
28
  margin-bottom: spacing('4');
29
- color: var(--mw-primary-color);
29
+ color: var(--mw-primary-text-color);
30
30
  }
31
31
 
32
32
  p {
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  &:hover {
69
- color: var(--mw-primary-color);
69
+ color: var(--mw-primary-text-color);
70
70
 
71
71
  &::after {
72
72
  opacity: 1;
@@ -134,7 +134,7 @@
134
134
  padding-top: spacing('4');
135
135
  margin: spacing('7') auto spacing('1') auto;
136
136
  width: 85%;
137
- border-top: 1px solid var(--mw-secondary-color);
137
+ border-top: 1px solid var(--mw-secondary-text-color);
138
138
  }
139
139
 
140
140
  .mw-last-updated {
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  &:disabled {
82
- // Same treatment as every other disabled button a theme-bound text
82
+ // Same treatment as every other disabled button - a theme-bound text
83
83
  // color would go dark on this always-primary surface in light mode
84
84
  opacity: 0.6;
85
85
  cursor: not-allowed;
@@ -116,7 +116,7 @@
116
116
  }
117
117
 
118
118
  &:focus-visible {
119
- outline: 2px solid var(--mw-primary-color);
119
+ outline: 2px solid var(--mw-primary-text-color);
120
120
  outline-offset: 2px;
121
121
  }
122
122
 
@@ -247,7 +247,7 @@
247
247
  &.active {
248
248
  color: var(--mw-header-navbar-list-active-color);
249
249
  background: var(--mw-primary-background);
250
- box-shadow: inset 3px 0 0 var(--mw-primary-color);
250
+ box-shadow: inset 3px 0 0 var(--mw-header-navbar-list-active-color);
251
251
  font-weight: font-weight('medium');
252
252
  }
253
253
  }
@@ -485,11 +485,11 @@
485
485
 
486
486
  &:hover:not(:disabled) {
487
487
  background: var(--mw-primary-background-hover);
488
- border-color: var(--mw-primary-color);
488
+ border-color: var(--mw-primary-text-color);
489
489
  }
490
490
 
491
491
  &:focus-visible {
492
- outline: 2px solid var(--mw-primary-color);
492
+ outline: 2px solid var(--mw-primary-text-color);
493
493
  outline-offset: 2px;
494
494
  }
495
495
 
@@ -14,7 +14,7 @@
14
14
  transform: translateX(-50%);
15
15
  width: 80px;
16
16
  height: 5px;
17
- background: var(--mw-primary-color);
17
+ background: var(--mw-primary-text-color);
18
18
  }
19
19
 
20
20
  @include media-down('sm') {
@@ -36,7 +36,7 @@
36
36
  transform: translateX(-50%);
37
37
  width: 100px;
38
38
  height: 2px;
39
- background: var(--mw-secondary-color);
39
+ background: var(--mw-secondary-text-color);
40
40
  }
41
41
 
42
42
  @include media-down('sm') {
@@ -59,7 +59,7 @@
59
59
  justify-content: center;
60
60
  gap: spacing('3');
61
61
  padding: spacing('3') spacing('4');
62
- border: 1px solid var(--mw-primary-color);
62
+ border: 1px solid var(--mw-primary-text-color);
63
63
  border-radius: radius('sm');
64
64
  font-weight: font-weight('medium');
65
65
  font-size: inherit;
@@ -69,7 +69,7 @@
69
69
  transition: var(--mw-transition);
70
70
  box-sizing: border-box;
71
71
  background: transparent;
72
- color: var(--mw-primary-color);
72
+ color: var(--mw-primary-text-color);
73
73
 
74
74
  &:hover:not(:disabled) {
75
75
  background: var(--mw-primary-color);
@@ -77,7 +77,7 @@
77
77
  }
78
78
 
79
79
  &:focus-visible {
80
- outline: 2px solid var(--mw-primary-color);
80
+ outline: 2px solid var(--mw-primary-text-color);
81
81
  outline-offset: 2px;
82
82
  }
83
83
 
@@ -77,7 +77,7 @@
77
77
  }
78
78
  }
79
79
 
80
- // Align self the per-item counterpart to .mw-items-*
80
+ // Align self - the per-item counterpart to .mw-items-*
81
81
  .mw-self {
82
82
  &-start {
83
83
  align-self: flex-start;
@@ -39,27 +39,27 @@
39
39
  }
40
40
 
41
41
  &-primary {
42
- color: var(--mw-primary-color);
42
+ color: var(--mw-primary-text-color);
43
43
  }
44
44
 
45
45
  &-secondary {
46
- color: var(--mw-secondary-color);
46
+ color: var(--mw-secondary-text-color);
47
47
  }
48
48
 
49
49
  &-success {
50
- color: var(--mw-success-color);
50
+ color: var(--mw-success-text-color);
51
51
  }
52
52
 
53
53
  &-warning {
54
- color: var(--mw-warning-color);
54
+ color: var(--mw-warning-text-color);
55
55
  }
56
56
 
57
57
  &-danger {
58
- color: var(--mw-danger-color);
58
+ color: var(--mw-danger-text-color);
59
59
  }
60
60
 
61
61
  &-info {
62
- color: var(--mw-info-color);
62
+ color: var(--mw-info-text-color);
63
63
  }
64
64
 
65
65
  &-muted {