maverick-wave 3.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.
Files changed (141) hide show
  1. package/.claude/commands/mw.md +580 -0
  2. package/.claude/settings.local.json +11 -0
  3. package/.idea/codeStyles/Project.xml +59 -0
  4. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  5. package/.idea/maverick-wave.iml +12 -0
  6. package/.idea/modules.xml +8 -0
  7. package/.idea/prettier.xml +6 -0
  8. package/.idea/vcs.xml +6 -0
  9. package/.prettierignore +6 -0
  10. package/.prettierrc.json +7 -0
  11. package/CHANGELOG.md +420 -0
  12. package/CLAUDE.md +53 -0
  13. package/LICENSE +21 -0
  14. package/README.md +191 -0
  15. package/gulpfile.js +158 -0
  16. package/index.html +472 -0
  17. package/maverick-wave.min.css +1 -0
  18. package/maverick-wave.min.js +1 -0
  19. package/package.json +52 -0
  20. package/release.sh +17 -0
  21. package/src/assets/favicon/android-chrome-192x192.png +0 -0
  22. package/src/assets/favicon/android-chrome-512x512.png +0 -0
  23. package/src/assets/favicon/apple-touch-icon.png +0 -0
  24. package/src/assets/favicon/favicon-16x16.png +0 -0
  25. package/src/assets/favicon/favicon-32x32.png +0 -0
  26. package/src/assets/favicon/site.webmanifest +1 -0
  27. package/src/assets/favicon.ico +0 -0
  28. package/src/assets/header-logo.svg +24 -0
  29. package/src/js/main.js +587 -0
  30. package/src/partials/accordions-container.html +163 -0
  31. package/src/partials/alerts-container.html +120 -0
  32. package/src/partials/avatars-container.html +84 -0
  33. package/src/partials/blog-posts-container.html +157 -0
  34. package/src/partials/breadcrumbs-container.html +126 -0
  35. package/src/partials/button-bar-container.html +168 -0
  36. package/src/partials/buttons-container.html +133 -0
  37. package/src/partials/cards-container.html +508 -0
  38. package/src/partials/code-container.html +194 -0
  39. package/src/partials/colors-container.html +125 -0
  40. package/src/partials/coming-soon-container.html +6 -0
  41. package/src/partials/content-slider-container.html +47 -0
  42. package/src/partials/divider-container.html +52 -0
  43. package/src/partials/documentation-container.html +161 -0
  44. package/src/partials/empty-state-container.html +74 -0
  45. package/src/partials/footer-container.html +113 -0
  46. package/src/partials/form-container.html +257 -0
  47. package/src/partials/form-elements-container.html +595 -0
  48. package/src/partials/form-field-container.html +141 -0
  49. package/src/partials/gallery-container.html +49 -0
  50. package/src/partials/get-started-container.html +294 -0
  51. package/src/partials/grid-container.html +171 -0
  52. package/src/partials/header-container.html +49 -0
  53. package/src/partials/header-utilities-container.html +80 -0
  54. package/src/partials/home-container.html +48 -0
  55. package/src/partials/html-lists-container.html +58 -0
  56. package/src/partials/info-container.html +87 -0
  57. package/src/partials/input-group-container.html +285 -0
  58. package/src/partials/item-lists-container.html +413 -0
  59. package/src/partials/login-container.html +61 -0
  60. package/src/partials/meta-info-container.html +16 -0
  61. package/src/partials/modals-container.html +136 -0
  62. package/src/partials/pagination-container.html +27 -0
  63. package/src/partials/panels-container.html +196 -0
  64. package/src/partials/progress-container.html +226 -0
  65. package/src/partials/ratings-container.html +104 -0
  66. package/src/partials/skeleton-container.html +82 -0
  67. package/src/partials/spinners-container.html +92 -0
  68. package/src/partials/stepper-container.html +107 -0
  69. package/src/partials/tables-container.html +120 -0
  70. package/src/partials/tabs-container.html +263 -0
  71. package/src/partials/tags-container.html +168 -0
  72. package/src/partials/techstack-bucket-container.html +174 -0
  73. package/src/partials/tiles-container.html +245 -0
  74. package/src/partials/timelines-container.html +196 -0
  75. package/src/partials/typography-container.html +66 -0
  76. package/src/partials/utilities-container.html +85 -0
  77. package/src/scss/abstracts/_functions.scss +37 -0
  78. package/src/scss/abstracts/_index.scss +3 -0
  79. package/src/scss/abstracts/_mixins.scss +45 -0
  80. package/src/scss/abstracts/_variables.scss +222 -0
  81. package/src/scss/base/_base.scss +165 -0
  82. package/src/scss/base/_index.scss +3 -0
  83. package/src/scss/base/_reset.scss +75 -0
  84. package/src/scss/base/_typography.scss +230 -0
  85. package/src/scss/components/_accordions.scss +91 -0
  86. package/src/scss/components/_alerts.scss +105 -0
  87. package/src/scss/components/_avatars.scss +123 -0
  88. package/src/scss/components/_blog-post.scss +268 -0
  89. package/src/scss/components/_breadcrumbs.scss +108 -0
  90. package/src/scss/components/_button-bar.scss +139 -0
  91. package/src/scss/components/_buttons.scss +164 -0
  92. package/src/scss/components/_cards.scss +316 -0
  93. package/src/scss/components/_code.scss +252 -0
  94. package/src/scss/components/_coming-soon.scss +92 -0
  95. package/src/scss/components/_content-slider.scss +119 -0
  96. package/src/scss/components/_divider.scss +70 -0
  97. package/src/scss/components/_empty-state.scss +73 -0
  98. package/src/scss/components/_gallery.scss +158 -0
  99. package/src/scss/components/_index.scss +33 -0
  100. package/src/scss/components/_info.scss +143 -0
  101. package/src/scss/components/_lists.scss +653 -0
  102. package/src/scss/components/_localhost-indicator.scss +29 -0
  103. package/src/scss/components/_meta-info.scss +34 -0
  104. package/src/scss/components/_modals.scss +118 -0
  105. package/src/scss/components/_pagination.scss +99 -0
  106. package/src/scss/components/_panels.scss +112 -0
  107. package/src/scss/components/_progress.scss +107 -0
  108. package/src/scss/components/_ratings.scss +47 -0
  109. package/src/scss/components/_skeleton.scss +90 -0
  110. package/src/scss/components/_spinners.scss +208 -0
  111. package/src/scss/components/_stepper.scss +145 -0
  112. package/src/scss/components/_tables.scss +127 -0
  113. package/src/scss/components/_tabs.scss +146 -0
  114. package/src/scss/components/_tags.scss +93 -0
  115. package/src/scss/components/_techstack-bucket.scss +145 -0
  116. package/src/scss/components/_theme-toggle.scss +50 -0
  117. package/src/scss/components/_tiles.scss +217 -0
  118. package/src/scss/components/_timelines.scss +339 -0
  119. package/src/scss/form-elements/_checkbox.scss +174 -0
  120. package/src/scss/form-elements/_form.scss +122 -0
  121. package/src/scss/form-elements/_index.scss +10 -0
  122. package/src/scss/form-elements/_input-group.scss +103 -0
  123. package/src/scss/form-elements/_input.scss +72 -0
  124. package/src/scss/form-elements/_login.scss +62 -0
  125. package/src/scss/form-elements/_radio.scss +144 -0
  126. package/src/scss/form-elements/_select.scss +56 -0
  127. package/src/scss/form-elements/_slider.scss +174 -0
  128. package/src/scss/form-elements/_textarea.scss +74 -0
  129. package/src/scss/form-elements/_toggle.scss +174 -0
  130. package/src/scss/layout/_footer.scss +214 -0
  131. package/src/scss/layout/_grid.scss +287 -0
  132. package/src/scss/layout/_header.scss +441 -0
  133. package/src/scss/layout/_home.scss +40 -0
  134. package/src/scss/layout/_index.scss +6 -0
  135. package/src/scss/layout/_main.scss +116 -0
  136. package/src/scss/layout/_section.scss +89 -0
  137. package/src/scss/main.scss +5 -0
  138. package/src/scss/utilities/_display.scss +35 -0
  139. package/src/scss/utilities/_flex.scss +66 -0
  140. package/src/scss/utilities/_index.scss +3 -0
  141. package/src/scss/utilities/_spacing.scss +78 -0
@@ -0,0 +1,580 @@
1
+ # MaverickWave CSS Framework — Angular Integration Guide
2
+
3
+ This skill helps you use the **MaverickWave CSS framework** in an Angular project.
4
+ MaverickWave provides ready-made CSS classes. You apply them directly in Angular templates — no Angular-specific library is needed.
5
+
6
+ ---
7
+
8
+ ## Setup
9
+
10
+ ### 1. Build the framework
11
+
12
+ ```bash
13
+ cd path/to/maverick-wave
14
+ npm run build
15
+ # Outputs: dist/maverick-wave.min.css (and .css for dev)
16
+ ```
17
+
18
+ ### 2. Add to Angular project
19
+
20
+ **Option A — copy the CSS file** and reference it in `angular.json`:
21
+
22
+ ```json
23
+ "styles": [
24
+ "src/styles.scss",
25
+ "src/assets/maverick-wave.min.css"
26
+ ]
27
+ ```
28
+
29
+ **Option B — import in `styles.scss`** (if you publish to npm or use a local path):
30
+
31
+ ```scss
32
+ @import 'path/to/maverick-wave.min.css';
33
+ ```
34
+
35
+ ### 3. FontAwesome icons
36
+
37
+ MaverickWave uses FontAwesome icons. Add to `index.html`:
38
+
39
+ ```html
40
+ <link
41
+ rel="stylesheet"
42
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
43
+ />
44
+ ```
45
+
46
+ ### 4. Theme (dark/light)
47
+
48
+ The framework defaults to dark mode. To enable switching, add `.mw-theme-light` to `<body>`:
49
+
50
+ ```typescript
51
+ // In your AppComponent
52
+ toggleTheme() {
53
+ document.body.classList.toggle('mw-theme-light');
54
+ }
55
+ ```
56
+
57
+ ---
58
+
59
+ ## Angular Reactive Forms Integration
60
+
61
+ Use the `mw-field` wrapper to group label + control + hint/error:
62
+
63
+ ```html
64
+ <div
65
+ class="mw-field"
66
+ [class.mw-field-has-error]="email.invalid && email.touched"
67
+ >
68
+ <label class="mw-field-label mw-required" for="email">Email</label>
69
+ <input id="email" type="email" class="mw-input" formControlName="email" />
70
+ <span class="mw-field-hint">Used for account notifications.</span>
71
+ <span class="mw-field-error" *ngIf="email.invalid && email.touched">
72
+ <i class="fas fa-exclamation-circle"></i>
73
+ Please enter a valid email address.
74
+ </span>
75
+ </div>
76
+ ```
77
+
78
+ ---
79
+
80
+ ## Form Elements
81
+
82
+ ### Input
83
+
84
+ ```html
85
+ <input type="text" class="mw-input" />
86
+ <input type="text" class="mw-input mw-input-sm" />
87
+ <input type="text" class="mw-input mw-input-lg" />
88
+ <input type="text" class="mw-input mw-input-xl" />
89
+ ```
90
+
91
+ ### Input Group (prefix / suffix / button)
92
+
93
+ ```html
94
+ <!-- Icon prefix -->
95
+ <div class="mw-input-group">
96
+ <span class="mw-input-group-prefix"><i class="fas fa-search"></i></span>
97
+ <input type="text" class="mw-input" placeholder="Search..." />
98
+ </div>
99
+
100
+ <!-- Text prefix + suffix -->
101
+ <div class="mw-input-group">
102
+ <span class="mw-input-group-prefix">https://</span>
103
+ <input type="text" class="mw-input" placeholder="your-domain.com" />
104
+ <span class="mw-input-group-suffix">.com</span>
105
+ </div>
106
+
107
+ <!-- Input + button -->
108
+ <div class="mw-input-group">
109
+ <input type="text" class="mw-input" placeholder="Search..." />
110
+ <button type="button" class="mw-btn mw-btn-primary">
111
+ <i class="fas fa-search"></i>
112
+ </button>
113
+ </div>
114
+
115
+ <!-- Sizes: mw-input-group-sm / mw-input-group-lg -->
116
+ ```
117
+
118
+ ### Date, Time & DateTime
119
+
120
+ ```html
121
+ <!-- Date -->
122
+ <div class="mw-input-group">
123
+ <span class="mw-input-group-prefix"
124
+ ><i class="fas fa-calendar-days"></i
125
+ ></span>
126
+ <input type="date" class="mw-input" formControlName="appointmentDate" />
127
+ </div>
128
+
129
+ <!-- Time -->
130
+ <div class="mw-input-group">
131
+ <span class="mw-input-group-prefix"><i class="fas fa-clock"></i></span>
132
+ <input type="time" class="mw-input" formControlName="startTime" />
133
+ </div>
134
+
135
+ <!-- DateTime-local -->
136
+ <div class="mw-input-group">
137
+ <span class="mw-input-group-prefix"
138
+ ><i class="fas fa-calendar-days"></i
139
+ ></span>
140
+ <input type="datetime-local" class="mw-input" formControlName="mainSlot" />
141
+ </div>
142
+
143
+ <!-- With mw-field wrapper (recommended for forms) -->
144
+ <div class="mw-field">
145
+ <label class="mw-field-label mw-required" for="mainSlot">Main Slot</label>
146
+ <div class="mw-input-group">
147
+ <span class="mw-input-group-prefix"
148
+ ><i class="fas fa-calendar-days"></i
149
+ ></span>
150
+ <input
151
+ id="mainSlot"
152
+ type="datetime-local"
153
+ class="mw-input"
154
+ formControlName="mainSlot"
155
+ />
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Sizes: combine mw-input-group-sm/lg with mw-input-sm/lg -->
160
+ ```
161
+
162
+ ### Select
163
+
164
+ ```html
165
+ <select class="mw-select">
166
+ <option value="" disabled selected>Choose...</option>
167
+ <option value="a">Option A</option>
168
+ </select>
169
+ ```
170
+
171
+ ### Textarea
172
+
173
+ ```html
174
+ <textarea class="mw-textarea" rows="4" placeholder="..."></textarea>
175
+ <textarea class="mw-textarea mw-textarea-resizable-vertical"></textarea>
176
+ ```
177
+
178
+ ### Checkbox
179
+
180
+ ```html
181
+ <label class="mw-checkbox">
182
+ <input type="checkbox" formControlName="agreed" />
183
+ <span class="mw-checkbox-box"></span>
184
+ <span class="mw-checkbox-label">I agree to the terms</span>
185
+ </label>
186
+
187
+ <!-- Color variants: mw-checkbox-primary / secondary / success / warning / danger / info -->
188
+ <!-- Size variants: mw-checkbox-sm / mw-checkbox-lg / mw-checkbox-xl -->
189
+ ```
190
+
191
+ ### Radio
192
+
193
+ ```html
194
+ <label class="mw-radio">
195
+ <input type="radio" name="plan" value="free" formControlName="plan" />
196
+ <span class="mw-radio-button"></span>
197
+ <span class="mw-radio-label">Free</span>
198
+ </label>
199
+
200
+ <!-- Color variants: mw-radio-primary / secondary / success / warning / danger / info -->
201
+ <!-- Size variants: mw-radio-sm / mw-radio-lg / mw-radio-xl -->
202
+ ```
203
+
204
+ ### Toggle Switch
205
+
206
+ ```html
207
+ <label class="mw-toggle">
208
+ <input type="checkbox" formControlName="notifications" />
209
+ <span class="mw-toggle-track"></span>
210
+ <span class="mw-toggle-label">Enable notifications</span>
211
+ </label>
212
+
213
+ <!-- Sizes: mw-toggle-sm / mw-toggle-lg -->
214
+ <!-- Colors: mw-toggle-primary / secondary / success / warning / danger -->
215
+ <!-- Disabled: mw-toggle-disabled (add disabled attr to input too) -->
216
+ ```
217
+
218
+ ### Form Field Pattern
219
+
220
+ ```html
221
+ <div class="mw-field">
222
+ <label class="mw-field-label mw-required" for="name">Full Name</label>
223
+ <input id="name" type="text" class="mw-input" formControlName="name" />
224
+ <span class="mw-field-hint">As it appears on your ID.</span>
225
+ <span class="mw-field-error" *ngIf="name.invalid && name.touched">
226
+ <i class="fas fa-exclamation-circle"></i> Name is required.
227
+ </span>
228
+ </div>
229
+ ```
230
+
231
+ ### Form Layout
232
+
233
+ ```html
234
+ <form class="mw-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
235
+ <div class="mw-form-group">
236
+ <h4 class="mw-form-group-title">Personal Info</h4>
237
+ <div class="mw-grid-2 mw-gap-4">
238
+ <!-- fields go here -->
239
+ </div>
240
+ </div>
241
+ <div class="mw-form-actions">
242
+ <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
243
+ <button type="submit" class="mw-btn mw-btn-primary">Save</button>
244
+ </div>
245
+ </form>
246
+ ```
247
+
248
+ ---
249
+
250
+ ## Buttons
251
+
252
+ ```html
253
+ <button class="mw-btn mw-btn-primary">Primary</button>
254
+ <button class="mw-btn mw-btn-secondary">Secondary</button>
255
+ <button class="mw-btn mw-btn-outline">Outline</button>
256
+ <button class="mw-btn mw-btn-link">Link</button>
257
+ <button class="mw-btn mw-btn-link-muted">Muted Link</button>
258
+
259
+ <!-- Sizes: mw-btn-sm / mw-btn-lg -->
260
+ <!-- With icon: -->
261
+ <button class="mw-btn mw-btn-primary"><i class="fas fa-save"></i> Save</button>
262
+ ```
263
+
264
+ ---
265
+
266
+ ## Layout Utilities
267
+
268
+ ```html
269
+ <!-- Grid -->
270
+ <div class="mw-grid-2 mw-gap-4">...</div>
271
+ <!-- 2-col grid -->
272
+ <div class="mw-grid-3 mw-gap-6">...</div>
273
+ <!-- 3-col grid -->
274
+ <div class="mw-grid-4 mw-gap-4">...</div>
275
+ <!-- 4-col grid -->
276
+
277
+ <!-- Spacing: mw-mt-4, mw-mb-6, mw-mx-3, mw-my-2, mw-p-4, mw-px-6, mw-py-2 -->
278
+ <!-- Gap values: 1–9 -->
279
+ ```
280
+
281
+ ---
282
+
283
+ ## Cards & Panels
284
+
285
+ ```html
286
+ <!-- Simple card -->
287
+ <div class="mw-card mw-card-simple">
288
+ <h4 class="mw-card-title">Title</h4>
289
+ <p>Content</p>
290
+ </div>
291
+
292
+ <!-- Hoverable card -->
293
+ <div class="mw-card mw-card-hover">...</div>
294
+
295
+ <!-- Panel (titled section) -->
296
+ <div class="mw-panel">
297
+ <div class="mw-panel-header">
298
+ <h3 class="mw-panel-title">Panel Title</h3>
299
+ </div>
300
+ <div class="mw-panel-body">...</div>
301
+ </div>
302
+ ```
303
+
304
+ ---
305
+
306
+ ## Alerts
307
+
308
+ ```html
309
+ <div class="mw-alert mw-alert-primary">Info message.</div>
310
+ <div class="mw-alert mw-alert-success">Success message.</div>
311
+ <div class="mw-alert mw-alert-warning">Warning message.</div>
312
+ <div class="mw-alert mw-alert-danger">Error message.</div>
313
+
314
+ <!-- Closable (handle dismiss in component) -->
315
+ <div class="mw-alert mw-alert-primary" *ngIf="showAlert">
316
+ Message
317
+ <button class="mw-btn mw-btn-link" (click)="showAlert = false">
318
+ <i class="fas fa-times"></i>
319
+ </button>
320
+ </div>
321
+ ```
322
+
323
+ ---
324
+
325
+ ## Tables
326
+
327
+ ```html
328
+ <div class="mw-table-wrapper">
329
+ <table class="mw-table">
330
+ <thead>
331
+ <tr>
332
+ <th>Name</th>
333
+ <th>Status</th>
334
+ </tr>
335
+ </thead>
336
+ <tbody>
337
+ <tr *ngFor="let item of items">
338
+ <td>{{ item.name }}</td>
339
+ <td>
340
+ <span class="mw-tag mw-tag-success">Active</span>
341
+ </td>
342
+ </tr>
343
+ </tbody>
344
+ </table>
345
+ </div>
346
+ ```
347
+
348
+ ---
349
+
350
+ ## Tags / Badges
351
+
352
+ ```html
353
+ <span class="mw-tag mw-tag-primary">Primary</span>
354
+ <span class="mw-tag mw-tag-success">Active</span>
355
+ <span class="mw-tag mw-tag-warning">Pending</span>
356
+ <span class="mw-tag mw-tag-danger">Error</span>
357
+ <span class="mw-tag mw-tag-info">Info</span>
358
+ <span class="mw-tag mw-tag-secondary">Secondary</span>
359
+ ```
360
+
361
+ ---
362
+
363
+ ## Modal
364
+
365
+ ```html
366
+ <!-- Trigger: set isOpen = true in component -->
367
+ <div
368
+ class="mw-modal-overlay"
369
+ [class.mw-modal-open]="isOpen"
370
+ (click)="isOpen = false"
371
+ >
372
+ <div class="mw-modal" (click)="$event.stopPropagation()">
373
+ <div class="mw-modal-header">
374
+ <h3 class="mw-modal-title">Title</h3>
375
+ <button class="mw-btn mw-btn-link" (click)="isOpen = false">
376
+ <i class="fas fa-times"></i>
377
+ </button>
378
+ </div>
379
+ <div class="mw-modal-body">Content</div>
380
+ <div class="mw-modal-footer">
381
+ <button class="mw-btn mw-btn-outline" (click)="isOpen = false">
382
+ Cancel
383
+ </button>
384
+ <button class="mw-btn mw-btn-primary" (click)="confirm()">Confirm</button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ ```
389
+
390
+ ---
391
+
392
+ ## Spinner / Loading
393
+
394
+ ```html
395
+ <div class="mw-spinner mw-spinner-primary"></div>
396
+ <div class="mw-spinner mw-spinner-sm mw-spinner-secondary"></div>
397
+
398
+ <!-- With overlay (e.g., on async operations) -->
399
+ <div class="mw-spinner-overlay" *ngIf="isLoading">
400
+ <div class="mw-spinner mw-spinner-primary"></div>
401
+ </div>
402
+ ```
403
+
404
+ ---
405
+
406
+ ## Skeleton Loader
407
+
408
+ ```html
409
+ <!-- Show while data is loading -->
410
+ <div class="mw-skeleton-card" *ngIf="isLoading">
411
+ <span class="mw-skeleton mw-skeleton-title"></span>
412
+ <span class="mw-skeleton mw-skeleton-text"></span>
413
+ <span class="mw-skeleton mw-skeleton-text"></span>
414
+ </div>
415
+
416
+ <!-- Avatar + text placeholder -->
417
+ <div class="mw-skeleton-card" *ngIf="isLoading">
418
+ <div class="mw-skeleton-row">
419
+ <span class="mw-skeleton mw-skeleton-circle"></span>
420
+ <div class="mw-skeleton-body">
421
+ <span class="mw-skeleton mw-skeleton-text" style="width: 55%"></span>
422
+ <span class="mw-skeleton mw-skeleton-text"></span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ ```
427
+
428
+ ---
429
+
430
+ ## Stepper
431
+
432
+ ```html
433
+ <!-- Horizontal -->
434
+ <div class="mw-stepper">
435
+ <div class="mw-stepper-step">
436
+ <div class="mw-stepper-indicator mw-done"><i class="fas fa-check"></i></div>
437
+ <span class="mw-stepper-label mw-done">Account</span>
438
+ </div>
439
+ <div class="mw-stepper-connector mw-done"></div>
440
+ <div class="mw-stepper-step">
441
+ <div class="mw-stepper-indicator mw-active">2</div>
442
+ <span class="mw-stepper-label mw-active">Details</span>
443
+ </div>
444
+ <div class="mw-stepper-connector"></div>
445
+ <div class="mw-stepper-step">
446
+ <div class="mw-stepper-indicator">3</div>
447
+ <span class="mw-stepper-label">Review</span>
448
+ </div>
449
+ </div>
450
+ ```
451
+
452
+ ---
453
+
454
+ ## Empty State
455
+
456
+ ```html
457
+ <div class="mw-empty-state">
458
+ <div class="mw-empty-state-icon">
459
+ <i class="fas fa-inbox"></i>
460
+ </div>
461
+ <h3 class="mw-empty-state-title">No results found</h3>
462
+ <p class="mw-empty-state-desc">Try adjusting your search or filters.</p>
463
+ <button class="mw-btn mw-btn-primary">Clear filters</button>
464
+ </div>
465
+
466
+ <!-- Color variants: mw-empty-state-primary / success / warning / danger -->
467
+ <!-- Size variant: mw-empty-state-sm -->
468
+ ```
469
+
470
+ ---
471
+
472
+ ## Divider
473
+
474
+ ```html
475
+ <hr class="mw-divider" />
476
+ <hr class="mw-divider mw-divider-thick" />
477
+ <hr class="mw-divider mw-divider-dashed" />
478
+ <hr class="mw-divider mw-divider-primary" />
479
+
480
+ <!-- With text -->
481
+ <div class="mw-divider-text">or continue with</div>
482
+
483
+ <!-- Vertical (in flex containers) -->
484
+ <span class="mw-divider-vertical"></span>
485
+ ```
486
+
487
+ ---
488
+
489
+ ## Typography Helpers
490
+
491
+ ```html
492
+ <p class="mw-text-muted">Muted text</p>
493
+ <p class="mw-text-sm">Small text</p>
494
+ <p class="mw-text-medium">Medium weight</p>
495
+ <span class="mw-text-primary">Primary colored</span>
496
+ <span class="mw-text-success">Success colored</span>
497
+ <span class="mw-text-danger">Danger colored</span>
498
+ ```
499
+
500
+ ---
501
+
502
+ ## Common Angular Patterns
503
+
504
+ ### Reactive form with full validation
505
+
506
+ ```typescript
507
+ // component.ts
508
+ form = this.fb.group({
509
+ email: ['', [Validators.required, Validators.email]],
510
+ name: ['', Validators.required],
511
+ notifications: [true],
512
+ });
513
+
514
+ get email() { return this.form.get('email')!; }
515
+ ```
516
+
517
+ ```html
518
+ <!-- template -->
519
+ <form class="mw-form" [formGroup]="form" (ngSubmit)="onSubmit()">
520
+ <div
521
+ class="mw-field"
522
+ [class.mw-field-has-error]="email.invalid && email.touched"
523
+ >
524
+ <label class="mw-field-label mw-required" for="email">Email</label>
525
+ <div class="mw-input-group">
526
+ <span class="mw-input-group-prefix"><i class="fas fa-envelope"></i></span>
527
+ <input id="email" type="email" class="mw-input" formControlName="email" />
528
+ </div>
529
+ <span
530
+ class="mw-field-error"
531
+ *ngIf="email.errors?.['required'] && email.touched"
532
+ >
533
+ <i class="fas fa-exclamation-circle"></i> Email is required.
534
+ </span>
535
+ <span
536
+ class="mw-field-error"
537
+ *ngIf="email.errors?.['email'] && email.touched"
538
+ >
539
+ <i class="fas fa-exclamation-circle"></i> Please enter a valid email
540
+ address.
541
+ </span>
542
+ </div>
543
+
544
+ <div class="mw-field">
545
+ <label class="mw-toggle">
546
+ <input type="checkbox" formControlName="notifications" />
547
+ <span class="mw-toggle-track"></span>
548
+ <span class="mw-toggle-label">Enable email notifications</span>
549
+ </label>
550
+ </div>
551
+
552
+ <div class="mw-form-actions">
553
+ <button
554
+ type="submit"
555
+ class="mw-btn mw-btn-primary"
556
+ [disabled]="form.invalid"
557
+ >
558
+ <i class="fas fa-save"></i> Save
559
+ </button>
560
+ </div>
561
+ </form>
562
+ ```
563
+
564
+ ### Loading state pattern
565
+
566
+ ```html
567
+ <!-- Use skeleton while loading, then show real content -->
568
+ <ng-container *ngIf="!isLoading; else loadingTpl">
569
+ <div class="mw-card mw-card-simple">
570
+ <!-- real content -->
571
+ </div>
572
+ </ng-container>
573
+ <ng-template #loadingTpl>
574
+ <div class="mw-skeleton-card">
575
+ <span class="mw-skeleton mw-skeleton-title"></span>
576
+ <span class="mw-skeleton mw-skeleton-text"></span>
577
+ <span class="mw-skeleton mw-skeleton-text"></span>
578
+ </div>
579
+ </ng-template>
580
+ ```
@@ -0,0 +1,11 @@
1
+ {
2
+ "permissions": {
3
+ "allow": [
4
+ "Bash(grep -rn '$_mw\\\\|$_size\\\\|$_border' src/scss '--include=*.scss')",
5
+ "Bash(npm run:*)",
6
+ "Bash(node:*)",
7
+ "Bash(git ls-tree:*)",
8
+ "Bash(git ls-remote:*)"
9
+ ]
10
+ }
11
+ }
@@ -0,0 +1,59 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <code_scheme name="Project" version="173">
3
+ <HTMLCodeStyleSettings>
4
+ <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
5
+ </HTMLCodeStyleSettings>
6
+ <JSCodeStyleSettings version="0">
7
+ <option name="FORCE_SEMICOLON_STYLE" value="true" />
8
+ <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
9
+ <option name="USE_DOUBLE_QUOTES" value="false" />
10
+ <option name="FORCE_QUOTE_STYlE" value="true" />
11
+ <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
12
+ <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
13
+ <option name="SPACES_WITHIN_IMPORTS" value="true" />
14
+ </JSCodeStyleSettings>
15
+ <TypeScriptCodeStyleSettings version="0">
16
+ <option name="FORCE_SEMICOLON_STYLE" value="true" />
17
+ <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
18
+ <option name="USE_DOUBLE_QUOTES" value="false" />
19
+ <option name="FORCE_QUOTE_STYlE" value="true" />
20
+ <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
21
+ <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
22
+ <option name="SPACES_WITHIN_IMPORTS" value="true" />
23
+ </TypeScriptCodeStyleSettings>
24
+ <VueCodeStyleSettings>
25
+ <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
26
+ <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
27
+ </VueCodeStyleSettings>
28
+ <codeStyleSettings language="HTML">
29
+ <option name="SOFT_MARGINS" value="80" />
30
+ <indentOptions>
31
+ <option name="INDENT_SIZE" value="2" />
32
+ <option name="CONTINUATION_INDENT_SIZE" value="2" />
33
+ <option name="TAB_SIZE" value="2" />
34
+ </indentOptions>
35
+ </codeStyleSettings>
36
+ <codeStyleSettings language="JavaScript">
37
+ <option name="SOFT_MARGINS" value="80" />
38
+ <indentOptions>
39
+ <option name="INDENT_SIZE" value="2" />
40
+ <option name="CONTINUATION_INDENT_SIZE" value="2" />
41
+ <option name="TAB_SIZE" value="2" />
42
+ </indentOptions>
43
+ </codeStyleSettings>
44
+ <codeStyleSettings language="TypeScript">
45
+ <option name="SOFT_MARGINS" value="80" />
46
+ <indentOptions>
47
+ <option name="INDENT_SIZE" value="2" />
48
+ <option name="CONTINUATION_INDENT_SIZE" value="2" />
49
+ <option name="TAB_SIZE" value="2" />
50
+ </indentOptions>
51
+ </codeStyleSettings>
52
+ <codeStyleSettings language="Vue">
53
+ <option name="SOFT_MARGINS" value="80" />
54
+ <indentOptions>
55
+ <option name="CONTINUATION_INDENT_SIZE" value="2" />
56
+ </indentOptions>
57
+ </codeStyleSettings>
58
+ </code_scheme>
59
+ </component>
@@ -0,0 +1,5 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <state>
3
+ <option name="USE_PER_PROJECT_SETTINGS" value="true" />
4
+ </state>
5
+ </component>
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <module type="WEB_MODULE" version="4">
3
+ <component name="NewModuleRootManager">
4
+ <content url="file://$MODULE_DIR$">
5
+ <excludeFolder url="file://$MODULE_DIR$/.tmp" />
6
+ <excludeFolder url="file://$MODULE_DIR$/temp" />
7
+ <excludeFolder url="file://$MODULE_DIR$/tmp" />
8
+ </content>
9
+ <orderEntry type="inheritedJdk" />
10
+ <orderEntry type="sourceFolder" forTests="false" />
11
+ </component>
12
+ </module>
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="ProjectModuleManager">
4
+ <modules>
5
+ <module fileurl="file://$PROJECT_DIR$/.idea/maverick-wave.iml" filepath="$PROJECT_DIR$/.idea/maverick-wave.iml" />
6
+ </modules>
7
+ </component>
8
+ </project>
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="PrettierConfiguration">
4
+ <option name="myConfigurationMode" value="AUTOMATIC" />
5
+ </component>
6
+ </project>
package/.idea/vcs.xml ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="VcsDirectoryMappings">
4
+ <mapping directory="" vcs="Git" />
5
+ </component>
6
+ </project>