maverick-wave 4.13.0 → 4.15.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 (29) hide show
  1. package/.claude/skills/maverick-wave/SKILL.md +13 -1
  2. package/.claude/skills/maverick-wave/references/components.md +158 -0
  3. package/.claude/skills/maverick-wave/references/layout.md +10 -0
  4. package/.claude/skills/maverick-wave/references/theming.md +44 -43
  5. package/CHANGELOG.md +12 -0
  6. package/README.md +1 -1
  7. package/index.html +68 -0
  8. package/maverick-wave.min.css +3 -3
  9. package/package.json +2 -2
  10. package/src/partials/grid-container.html +68 -48
  11. package/src/partials/pricing-container.html +521 -0
  12. package/src/partials/utilities-container.html +45 -26
  13. package/src/scss/abstracts/_mixins.scss +70 -0
  14. package/src/scss/abstracts/_variables.scss +7 -0
  15. package/src/scss/base/_reset.scss +9 -0
  16. package/src/scss/components/_accordions.scss +1 -1
  17. package/src/scss/components/_calendar.scss +1 -1
  18. package/src/scss/components/_cards.scss +1 -2
  19. package/src/scss/components/_index.scss +1 -0
  20. package/src/scss/components/_kanban.scss +1 -1
  21. package/src/scss/components/_modals.scss +1 -1
  22. package/src/scss/components/_pagination.scss +1 -1
  23. package/src/scss/components/_panels.scss +10 -1
  24. package/src/scss/components/_pricing.scss +222 -0
  25. package/src/scss/components/_segmented.scss +12 -0
  26. package/src/scss/components/_tiles.scss +1 -2
  27. package/src/scss/form-elements/_login.scss +1 -2
  28. package/src/scss/utilities/_corner.scss +8 -0
  29. package/src/scss/utilities/_index.scss +1 -0
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "maverick-wave",
3
- "version": "4.13.0",
3
+ "version": "4.15.0",
4
4
  "config": {
5
- "version_short": "4.13"
5
+ "version_short": "4.15"
6
6
  },
7
7
  "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
8
8
  "main": "src/js/main.js",
package/src/partials/grid-container.html CHANGED
@@ -10,37 +10,37 @@
10
10
 
11
11
  <h3 class="mw-mb-4">Grid with 1 Column</h3>
12
12
  <div class="mw-grid-1 mw-mb-6">
13
- <div class="mw-card mw-card-simple">Column 1</div>
13
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
14
14
  </div>
15
15
 
16
16
  <h3 class="mw-mb-4">Grid with 2 Columns</h3>
17
17
  <div class="mw-grid-2 mw-mb-6">
18
- <div class="mw-card mw-card-simple">Column 1</div>
19
- <div class="mw-card mw-card-simple">Column 2</div>
18
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
19
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
20
20
  </div>
21
21
 
22
22
  <h3 class="mw-mb-4">Grid with 3 Columns</h3>
23
23
  <div class="mw-grid-3 mw-mb-6">
24
- <div class="mw-card mw-card-simple">Column 1</div>
25
- <div class="mw-card mw-card-simple">Column 2</div>
26
- <div class="mw-card mw-card-simple">Column 3</div>
24
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
25
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
26
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
27
27
  </div>
28
28
 
29
29
  <h3 class="mw-mb-4">Grid with 4 Columns</h3>
30
30
  <div class="mw-grid-4 mw-mb-6">
31
- <div class="mw-card mw-card-simple">Column 1</div>
32
- <div class="mw-card mw-card-simple">Column 2</div>
33
- <div class="mw-card mw-card-simple">Column 3</div>
34
- <div class="mw-card mw-card-simple">Column 4</div>
31
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
32
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
33
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
34
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
35
35
  </div>
36
36
 
37
37
  <h3 class="mw-mb-4">Grid with 5 Columns</h3>
38
38
  <div class="mw-grid-5 mw-mb-6">
39
- <div class="mw-card mw-card-simple">Column 1</div>
40
- <div class="mw-card mw-card-simple">Column 2</div>
41
- <div class="mw-card mw-card-simple">Column 3</div>
42
- <div class="mw-card mw-card-simple">Column 4</div>
43
- <div class="mw-card mw-card-simple">Column 5</div>
39
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
40
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
41
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
42
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
43
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 5</div>
44
44
  </div>
45
45
 
46
46
  <h3 class="mw-mb-3">Flexible Grid with Column Spans</h3>
@@ -48,9 +48,13 @@
48
48
  12-column grid with custom spans: 2 columns + 4 columns + 1 column
49
49
  </p>
50
50
  <div class="mw-grid-flex mw-mb-6">
51
- <div class="mw-col-span-2 mw-card mw-card-simple">Span 2 Columns</div>
52
- <div class="mw-col-span-4 mw-card mw-card-simple">Span 4 Columns</div>
53
- <div class="mw-col-span-1 mw-card mw-card-simple">1 col</div>
51
+ <div class="mw-col-span-2 mw-card mw-card-simple mw-corner-plain">
52
+ Span 2 Columns
53
+ </div>
54
+ <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
55
+ Span 4 Columns
56
+ </div>
57
+ <div class="mw-col-span-1 mw-card mw-card-simple mw-corner-plain">1 col</div>
54
58
  </div>
55
59
 
56
60
  <h3 class="mw-mb-3">Mixed Column Spans</h3>
@@ -58,11 +62,15 @@
58
62
  Various column combinations: 3 + 6 + 3 columns
59
63
  </p>
60
64
  <div class="mw-grid-flex mw-mb-6">
61
- <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
62
- <div class="mw-col-span-6 mw-card mw-card-simple">
65
+ <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
66
+ Span 3 Columns
67
+ </div>
68
+ <div class="mw-col-span-6 mw-card mw-card-simple mw-corner-plain">
63
69
  Span 6 Columns (Main Content)
64
70
  </div>
65
- <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
71
+ <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
72
+ Span 3 Columns
73
+ </div>
66
74
  </div>
67
75
 
68
76
  <h3 class="mw-mb-3">Asymmetric Layout</h3>
@@ -70,8 +78,10 @@
70
78
  Sidebar + content layout: 4 + 8 columns
71
79
  </p>
72
80
  <div class="mw-grid-flex mw-mb-6">
73
- <div class="mw-col-span-4 mw-card mw-card-simple">Sidebar (4 cols)</div>
74
- <div class="mw-col-span-8 mw-card mw-card-simple">
81
+ <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
82
+ Sidebar (4 cols)
83
+ </div>
84
+ <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
75
85
  Main Content Area (8 cols)
76
86
  </div>
77
87
  </div>
@@ -83,46 +93,54 @@
83
93
  dynamic content.
84
94
  </p>
85
95
  <div class="mw-grid-auto-sm mw-mb-6">
86
- <div class="mw-card mw-card-simple">Product Card</div>
87
- <div class="mw-card mw-card-simple">Service Card</div>
88
- <div class="mw-card mw-card-simple">Team Member</div>
89
- <div class="mw-card mw-card-simple">Portfolio Item</div>
90
- <div class="mw-card mw-card-simple">Blog Post</div>
91
- <div class="mw-card mw-card-simple">Feature</div>
96
+ <div class="mw-card mw-card-simple mw-corner-plain">Product Card</div>
97
+ <div class="mw-card mw-card-simple mw-corner-plain">Service Card</div>
98
+ <div class="mw-card mw-card-simple mw-corner-plain">Team Member</div>
99
+ <div class="mw-card mw-card-simple mw-corner-plain">Portfolio Item</div>
100
+ <div class="mw-card mw-card-simple mw-corner-plain">Blog Post</div>
101
+ <div class="mw-card mw-card-simple mw-corner-plain">Feature</div>
92
102
  </div>
93
103
 
94
104
  <h3 class="mw-mb-4">Grid with 3 Columns - Default Spacing</h3>
95
105
  <div class="mw-grid-3 mw-mb-6">
96
- <div class="mw-card mw-card-simple">Column 1</div>
97
- <div class="mw-card mw-card-simple">Column 2</div>
98
- <div class="mw-card mw-card-simple">Column 3</div>
106
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
107
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
108
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
99
109
  </div>
100
110
 
101
111
  <h3 class="mw-mb-4">Grid with 3 Columns - Large Spacing</h3>
102
112
  <div class="mw-grid-3-lg mw-mb-6">
103
- <div class="mw-card mw-card-simple">Column 1</div>
104
- <div class="mw-card mw-card-simple">Column 2</div>
105
- <div class="mw-card mw-card-simple">Column 3</div>
113
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
114
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
115
+ <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
106
116
  </div>
107
117
 
108
118
  <h3 class="mw-mb-4">Flexible Grid - Default Spacing</h3>
109
119
  <div class="mw-grid-flex mw-mb-6">
110
- <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
111
- <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
120
+ <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
121
+ 4 Columns
122
+ </div>
123
+ <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
124
+ 8 Columns
125
+ </div>
112
126
  </div>
113
127
 
114
128
  <h3 class="mw-mb-4">Flexible Grid - Large Spacing</h3>
115
129
  <div class="mw-grid-flex-lg mw-mb-6">
116
- <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
117
- <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
130
+ <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
131
+ 4 Columns
132
+ </div>
133
+ <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
134
+ 8 Columns
135
+ </div>
118
136
  </div>
119
137
 
120
138
  <h3 class="mw-mb-4">Auto Grid - Large Spacing</h3>
121
139
  <div class="mw-grid-auto-lg mw-mb-6">
122
- <div class="mw-card mw-card-simple">Auto 1</div>
123
- <div class="mw-card mw-card-simple">Auto 2</div>
124
- <div class="mw-card mw-card-simple">Auto 3</div>
125
- <div class="mw-card mw-card-simple">Auto 4</div>
140
+ <div class="mw-card mw-card-simple mw-corner-plain">Auto 1</div>
141
+ <div class="mw-card mw-card-simple mw-corner-plain">Auto 2</div>
142
+ <div class="mw-card mw-card-simple mw-corner-plain">Auto 3</div>
143
+ <div class="mw-card mw-card-simple mw-corner-plain">Auto 4</div>
126
144
  </div>
127
145
 
128
146
  <h3 class="mw-mb-4">Grid Stack - Natural Width (Left Aligned)</h3>
@@ -130,7 +148,7 @@
130
148
  <button class="mw-btn mw-btn-primary">Small Button</button>
131
149
  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
132
150
  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
133
- <div class="mw-card mw-card-simple" style="width: 200px">
151
+ <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
134
152
  Fixed Width Card
135
153
  </div>
136
154
  </div>
@@ -140,7 +158,7 @@
140
158
  <button class="mw-btn mw-btn-primary">Small Button</button>
141
159
  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
142
160
  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
143
- <div class="mw-card mw-card-simple" style="width: 200px">
161
+ <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
144
162
  Fixed Width Card
145
163
  </div>
146
164
  </div>
@@ -150,7 +168,7 @@
150
168
  <button class="mw-btn mw-btn-primary">Small Button</button>
151
169
  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
152
170
  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
153
- <div class="mw-card mw-card-simple" style="width: 200px">
171
+ <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
154
172
  Fixed Width Card
155
173
  </div>
156
174
  </div>
@@ -160,12 +178,14 @@
160
178
  <button class="mw-btn mw-btn-primary">Small Button</button>
161
179
  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
162
180
  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
163
- <div class="mw-card mw-card-simple">Full Width Card</div>
181
+ <div class="mw-card mw-card-simple mw-corner-plain">Full Width Card</div>
164
182
  </div>
165
183
 
166
184
  <h3 class="mw-mb-4">Grid Stack - Large Spacing & Centered</h3>
167
185
  <div class="mw-grid-stack-center-lg mw-mb-6">
168
186
  <button class="mw-btn mw-btn-primary">Button 1</button>
169
187
  <button class="mw-btn mw-btn-secondary">Button 2</button>
170
- <div class="mw-card mw-card-simple" style="width: 300px">Centered Card</div>
188
+ <div class="mw-card mw-card-simple mw-corner-plain" style="width: 300px">
189
+ Centered Card
190
+ </div>
171
191
  </div>