maverick-wave 5.29.0 → 5.31.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 (144) hide show
  1. package/README.md +2 -2
  2. package/maverick-wave.min.css +2 -2
  3. package/package.json +8 -2
  4. package/src/scss/components/_avatars.scss +35 -3
  5. package/src/scss/components/_dropdown.scss +24 -1
  6. package/src/scss/components/_lang-switch.scss +4 -8
  7. package/src/scss/components/_modals.scss +33 -5
  8. package/.claude/settings.local.json +0 -43
  9. package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
  10. package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
  11. package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
  12. package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
  13. package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
  14. package/.claude/skills/mw-maverick-wave/references/components.md +0 -2169
  15. package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
  16. package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
  17. package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
  18. package/.claude/skills/mw-maverick-wave/references/theming.md +0 -528
  19. package/.github/workflows/ci.yml +0 -41
  20. package/.idea/codeStyles/Project.xml +0 -59
  21. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  22. package/.idea/maverick-wave.iml +0 -12
  23. package/.idea/modules.xml +0 -8
  24. package/.idea/prettier.xml +0 -6
  25. package/.idea/vcs.xml +0 -6
  26. package/.prettierignore +0 -8
  27. package/.prettierrc.json +0 -7
  28. package/CHANGELOG.md +0 -950
  29. package/CLAUDE.md +0 -60
  30. package/gulpfile.js +0 -167
  31. package/index.html +0 -1730
  32. package/release.sh +0 -31
  33. package/scripts/verify.js +0 -252
  34. package/src/assets/favicon/apple-touch-icon.png +0 -0
  35. package/src/assets/favicon/favicon-96x96.png +0 -0
  36. package/src/assets/favicon/favicon.svg +0 -1
  37. package/src/assets/favicon/site.webmanifest +0 -37
  38. package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
  39. package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
  40. package/src/assets/favicon.ico +0 -0
  41. package/src/assets/header-logo.svg +0 -24
  42. package/src/assets/images/gallery-city.svg +0 -49
  43. package/src/assets/images/gallery-desert.svg +0 -25
  44. package/src/assets/images/gallery-forest.svg +0 -46
  45. package/src/assets/images/gallery-lake.svg +0 -26
  46. package/src/assets/images/gallery-mountain.svg +0 -19
  47. package/src/assets/images/gallery-ocean.svg +0 -26
  48. package/src/assets/images/gallery-oldtown.svg +0 -41
  49. package/src/assets/images/gallery-snow.svg +0 -39
  50. package/src/assets/images/photo-balloon.svg +0 -35
  51. package/src/assets/images/photo-forest-path.svg +0 -31
  52. package/src/assets/images/photo-lighthouse.svg +0 -42
  53. package/src/assets/images/photo-palm.svg +0 -27
  54. package/src/assets/images/photo-peak.svg +0 -27
  55. package/src/assets/images/photo-tower.svg +0 -34
  56. package/src/assets/images/photo-waterfall.svg +0 -32
  57. package/src/assets/images/slider-field.svg +0 -124
  58. package/src/assets/images/slider-forest.svg +0 -33
  59. package/src/assets/images/slider-lake.svg +0 -35
  60. package/src/assets/images/slider-mountains.svg +0 -29
  61. package/src/assets/images/slider-trees.svg +0 -41
  62. package/src/assets/images/story-aurora.svg +0 -36
  63. package/src/assets/images/story-beach.svg +0 -34
  64. package/src/assets/images/story-stars.svg +0 -35
  65. package/src/assets/images/tile-analytics.svg +0 -22
  66. package/src/assets/images/tile-cloud.svg +0 -19
  67. package/src/assets/images/tile-ecommerce.svg +0 -14
  68. package/src/assets/images/tile-enterprise.svg +0 -22
  69. package/src/assets/images/tile-marketing.svg +0 -16
  70. package/src/assets/media/demo-chime.wav +0 -0
  71. package/src/assets/media/story-sunrise.jpg +0 -0
  72. package/src/assets/media/story-sunrise.mp4 +0 -0
  73. package/src/partials/accordions-container.html +0 -179
  74. package/src/partials/alerts-container.html +0 -151
  75. package/src/partials/announcement-container.html +0 -67
  76. package/src/partials/avatars-container.html +0 -229
  77. package/src/partials/badges-container.html +0 -114
  78. package/src/partials/blog-posts-container.html +0 -158
  79. package/src/partials/breadcrumbs-container.html +0 -126
  80. package/src/partials/button-bar-container.html +0 -175
  81. package/src/partials/buttons-container.html +0 -272
  82. package/src/partials/calendar-container.html +0 -203
  83. package/src/partials/cards-container.html +0 -727
  84. package/src/partials/code-container.html +0 -194
  85. package/src/partials/colors-container.html +0 -263
  86. package/src/partials/coming-soon-container.html +0 -10
  87. package/src/partials/contact-container.html +0 -85
  88. package/src/partials/content-slider-container.html +0 -36
  89. package/src/partials/divider-container.html +0 -70
  90. package/src/partials/documentation-container.html +0 -204
  91. package/src/partials/dropdown-container.html +0 -119
  92. package/src/partials/empty-state-container.html +0 -79
  93. package/src/partials/feed-container.html +0 -506
  94. package/src/partials/footer-container.html +0 -113
  95. package/src/partials/form-container.html +0 -262
  96. package/src/partials/form-elements-container.html +0 -616
  97. package/src/partials/form-field-container.html +0 -166
  98. package/src/partials/gallery-container.html +0 -62
  99. package/src/partials/get-started-container.html +0 -423
  100. package/src/partials/grid-container.html +0 -191
  101. package/src/partials/header-container.html +0 -69
  102. package/src/partials/header-utilities-container.html +0 -331
  103. package/src/partials/highlights-container.html +0 -71
  104. package/src/partials/history-container.html +0 -67
  105. package/src/partials/home-container.html +0 -31
  106. package/src/partials/html-lists-container.html +0 -63
  107. package/src/partials/info-container.html +0 -104
  108. package/src/partials/input-group-container.html +0 -299
  109. package/src/partials/item-lists-container.html +0 -368
  110. package/src/partials/kanban-container.html +0 -459
  111. package/src/partials/kbd-container.html +0 -63
  112. package/src/partials/leader-row-container.html +0 -139
  113. package/src/partials/login-container.html +0 -65
  114. package/src/partials/lunch-menu-container.html +0 -341
  115. package/src/partials/media-container.html +0 -27
  116. package/src/partials/meta-info-container.html +0 -21
  117. package/src/partials/modals-container.html +0 -199
  118. package/src/partials/mosaic-container.html +0 -173
  119. package/src/partials/page-header-container.html +0 -78
  120. package/src/partials/pagination-container.html +0 -64
  121. package/src/partials/palette-container.html +0 -480
  122. package/src/partials/panels-container.html +0 -126
  123. package/src/partials/parallax-container.html +0 -147
  124. package/src/partials/portrait-gallery-container.html +0 -175
  125. package/src/partials/preview-container.html +0 -136
  126. package/src/partials/pricing-container.html +0 -523
  127. package/src/partials/progress-container.html +0 -230
  128. package/src/partials/prose-container.html +0 -43
  129. package/src/partials/ratings-container.html +0 -104
  130. package/src/partials/section-head-container.html +0 -77
  131. package/src/partials/segmented-container.html +0 -66
  132. package/src/partials/skeleton-container.html +0 -87
  133. package/src/partials/spinners-container.html +0 -96
  134. package/src/partials/stepper-container.html +0 -111
  135. package/src/partials/stories-container.html +0 -182
  136. package/src/partials/tables-container.html +0 -309
  137. package/src/partials/tabs-container.html +0 -290
  138. package/src/partials/tags-container.html +0 -242
  139. package/src/partials/techstack-bucket-container.html +0 -187
  140. package/src/partials/testimonials-container.html +0 -88
  141. package/src/partials/tiles-container.html +0 -247
  142. package/src/partials/timelines-container.html +0 -196
  143. package/src/partials/typography-container.html +0 -74
  144. package/src/partials/utilities-container.html +0 -553
@@ -1,65 +0,0 @@
1
- <h3 class="mw-section-subtitle">Login</h3>
2
-
3
- <p class="mw-text-muted">
4
- Click "Login" to simulate a failure and see the red border. It will
5
- automatically clear after 4 seconds.
6
- </p>
7
-
8
- <div class="mw-mb-4">
9
- <div class="mw-login mw-mb-8">
10
- <div class="mw-login-logo">
11
- <img
12
- src="https://m1well.com/images/header_logo.svg"
13
- alt="Your Logo"
14
- loading="lazy"
15
- />
16
- </div>
17
- <div class="mw-login-message">
18
- This is an internal area that can only be accessed with a valid account.
19
- </div>
20
- <div class="mw-form" id="login-form">
21
- <div class="mw-grid-1">
22
- <div class="mw-field">
23
- <label class="mw-field-label mw-required" for="login-email"
24
- >Email</label
25
- >
26
- <div class="mw-input-group">
27
- <span class="mw-input-group-prefix"
28
- ><i class="fas fa-envelope"></i
29
- ></span>
30
- <input
31
- id="login-email"
32
- type="email"
33
- class="mw-input"
34
- placeholder="you@example.com"
35
- required
36
- />
37
- </div>
38
- </div>
39
- <div class="mw-field">
40
- <label class="mw-field-label mw-required" for="login-password"
41
- >Password</label
42
- >
43
- <div class="mw-input-group">
44
- <span class="mw-input-group-prefix"
45
- ><i class="fas fa-lock"></i
46
- ></span>
47
- <input
48
- id="login-password"
49
- type="password"
50
- class="mw-input"
51
- placeholder="••••••••"
52
- required
53
- />
54
- </div>
55
- </div>
56
- </div>
57
-
58
- <div class="mw-form-actions mw-form-actions-full-width">
59
- <button type="submit" class="mw-btn mw-btn-primary">
60
- <i class="fas fa-sign-in-alt"></i> Login
61
- </button>
62
- </div>
63
- </div>
64
- </div>
65
- </div>
@@ -1,341 +0,0 @@
1
- <h3 class="mw-section-subtitle">Lunch menu</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- Nothing below is a lunch-menu component. It is <code>mw-card</code>,
4
- <code>mw-price</code>, <code>mw-date-stamp</code> and two grid classes - a
5
- weekly menu is a composition, not a widget. One day per row: five columns
6
- would squeeze a dish name into a fifth of the page, and a wrapping grid would
7
- orphan the fifth card into a row of its own. <code>mw-grid-even</code> gives
8
- every row the height of the tallest, so a day with a second line of
9
- description does not make its card taller than the rest of the week.
10
- </p>
11
- <p class="mw-text-muted mw-text-measure">
12
- <code>mw-date-stamp</code> answers to the card, not the viewport. On a narrow
13
- card it is a muted line above the title; once the card is wide enough that a
14
- single column would leave its right half empty - as every card in a stacked
15
- list is - the same markup becomes the column on the left. Because the width it
16
- switches at is the card's, a stamp behaves the same whichever grid it is
17
- dropped into. <code>mw-date-stamp-today</code> fills that column instead of
18
- recolouring it: the price is already primary, and two blues compete where one
19
- would point.
20
- </p>
21
-
22
- <div class="mw-container-narrow">
23
- <div class="mw-grid-1 mw-grid-even">
24
- <article class="mw-card mw-offer">
25
- <div class="mw-card-body">
26
- <p class="mw-date-stamp">
27
- <span class="mw-date-stamp-day">Mon</span>
28
- <span class="mw-date-stamp-date">14.09.</span>
29
- </p>
30
- <div class="mw-date-stamp-body">
31
- <h4 class="mw-text-base mw-text-bold mw-mb-2">
32
- Lentils with spaetzle
33
- </h4>
34
- <p class="mw-text-sm mw-text-muted mw-mb-0">
35
- Two sausages, a splash of vinegar, and bread on the side.
36
- </p>
37
- </div>
38
- <p class="mw-price mw-price-xs">
39
- <span class="mw-price-amount">10.90</span>
40
- <span class="mw-price-currency">Euro</span>
41
- </p>
42
- </div>
43
- </article>
44
-
45
- <article class="mw-card mw-offer">
46
- <div class="mw-card-body">
47
- <p class="mw-date-stamp">
48
- <span class="mw-date-stamp-day">Tue</span>
49
- <span class="mw-date-stamp-date">15.09.</span>
50
- </p>
51
- <div class="mw-date-stamp-body">
52
- <h4 class="mw-text-base mw-text-bold mw-mb-2">Roast pork</h4>
53
- <p class="mw-text-sm mw-text-muted mw-mb-0">
54
- Bread dumpling, red cabbage and a dark gravy.
55
- </p>
56
- </div>
57
- <p class="mw-price mw-price-xs">
58
- <span class="mw-price-amount">11.90</span>
59
- <span class="mw-price-currency">Euro</span>
60
- </p>
61
- </div>
62
- </article>
63
-
64
- <article class="mw-card mw-offer">
65
- <div class="mw-card-body">
66
- <p class="mw-date-stamp">
67
- <span class="mw-date-stamp-day">Wed</span>
68
- <span class="mw-date-stamp-date">16.09.</span>
69
- </p>
70
- <div class="mw-date-stamp-body">
71
- <h4 class="mw-text-base mw-text-bold mw-mb-2">Cheese spaetzle</h4>
72
- <p class="mw-text-sm mw-text-muted mw-mb-0">
73
- Hand-scraped, mountain cheese, roasted onions, leaf salad.
74
- </p>
75
- <p class="mw-tags">
76
- <span class="mw-tag mw-tag-success">veggie</span>
77
- </p>
78
- </div>
79
- <p class="mw-price mw-price-xs">
80
- <span class="mw-price-amount">10.50</span>
81
- <span class="mw-price-currency">Euro</span>
82
- </p>
83
- </div>
84
- </article>
85
-
86
- <article class="mw-card mw-offer">
87
- <div class="mw-card-body">
88
- <p class="mw-date-stamp">
89
- <span class="mw-date-stamp-day">Thu</span>
90
- <span class="mw-date-stamp-date">17.09.</span>
91
- </p>
92
- <div class="mw-date-stamp-body">
93
- <h4 class="mw-text-base mw-text-bold mw-mb-2">
94
- Schnitzel in cream sauce
95
- </h4>
96
- <p class="mw-text-sm mw-text-muted mw-mb-0">
97
- Pork, with spaetzle and a small salad.
98
- </p>
99
- </div>
100
- <p class="mw-price mw-price-xs">
101
- <span class="mw-price-amount">12.90</span>
102
- <span class="mw-price-currency">Euro</span>
103
- </p>
104
- </div>
105
- </article>
106
-
107
- <article class="mw-card mw-offer">
108
- <div class="mw-card-body">
109
- <p class="mw-date-stamp mw-date-stamp-today">
110
- <span class="mw-sr-only">Today,</span>
111
- <span class="mw-date-stamp-day">Fri</span>
112
- <span class="mw-date-stamp-date">18.09.</span>
113
- </p>
114
- <div class="mw-date-stamp-body">
115
- <h4 class="mw-text-base mw-text-bold mw-mb-2">Baked fish fillet</h4>
116
- <p class="mw-text-sm mw-text-muted mw-mb-0">
117
- In beer batter, with warm potato salad and remoulade.
118
- </p>
119
- </div>
120
- <p class="mw-price mw-price-xs">
121
- <span class="mw-price-amount">11.90</span>
122
- <span class="mw-price-currency">Euro</span>
123
- </p>
124
- </div>
125
- </article>
126
- </div>
127
- </div>
128
-
129
- <h3 class="mw-card-title mw-mb-4 mw-mt-10">Two dishes a day</h3>
130
- <p class="mw-text-muted mw-text-measure mw-mb-6">
131
- The day is the card, so a second dish is another row inside it rather than a
132
- second card. With a price per dish there is nothing left for a price column to
133
- hold, so it goes instead where a printed menu puts it - on a
134
- <code>mw-leader-row</code>, at the end of the line it prices. The stamp does
135
- not change at all: it still centres against whatever the card holds beside it,
136
- two rows or ten.
137
- </p>
138
-
139
- <div class="mw-container-narrow">
140
- <div class="mw-grid-1 mw-grid-even">
141
- <article class="mw-card">
142
- <div class="mw-card-body">
143
- <p class="mw-date-stamp">
144
- <span class="mw-date-stamp-day">Mon</span>
145
- <span class="mw-date-stamp-date">14.09.</span>
146
- </p>
147
- <div class="mw-date-stamp-body">
148
- <div class="mw-item-list">
149
- <div>
150
- <p class="mw-leader-row mw-leader-row-top">
151
- <span class="mw-leader-row-label mw-text-bold">
152
- Lentils with spaetzle
153
- </span>
154
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
155
- 10.90 &euro;
156
- </span>
157
- </p>
158
- <p class="mw-text-sm mw-text-muted mw-mb-0">
159
- Two sausages and a splash of vinegar.
160
- </p>
161
- </div>
162
- <div>
163
- <p class="mw-leader-row mw-leader-row-top">
164
- <span class="mw-leader-row-label mw-text-bold">
165
- Potato soup with marjoram
166
- <span class="mw-tag mw-tag-success">veggie</span>
167
- </span>
168
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
169
- 6.50 &euro;
170
- </span>
171
- </p>
172
- <p class="mw-text-sm mw-text-muted mw-mb-0">
173
- With a slice of farmhouse bread.
174
- </p>
175
- </div>
176
- </div>
177
- </div>
178
- </div>
179
- </article>
180
- <article class="mw-card">
181
- <div class="mw-card-body">
182
- <p class="mw-date-stamp">
183
- <span class="mw-date-stamp-day">Tue</span>
184
- <span class="mw-date-stamp-date">15.09.</span>
185
- </p>
186
- <div class="mw-date-stamp-body">
187
- <div class="mw-item-list">
188
- <div>
189
- <p class="mw-leader-row mw-leader-row-top">
190
- <span class="mw-leader-row-label mw-text-bold">
191
- Roast pork
192
- </span>
193
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
194
- 11.90 &euro;
195
- </span>
196
- </p>
197
- <p class="mw-text-sm mw-text-muted mw-mb-0">
198
- Bread dumpling, red cabbage, dark gravy.
199
- </p>
200
- </div>
201
- <div>
202
- <p class="mw-leader-row mw-leader-row-top">
203
- <span class="mw-leader-row-label mw-text-bold">
204
- Cheese spaetzle
205
- <span class="mw-tag mw-tag-success">veggie</span>
206
- </span>
207
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
208
- 10.50 &euro;
209
- </span>
210
- </p>
211
- <p class="mw-text-sm mw-text-muted mw-mb-0">
212
- Mountain cheese, roasted onions, leaf salad.
213
- </p>
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- </article>
219
- <article class="mw-card">
220
- <div class="mw-card-body">
221
- <p class="mw-date-stamp">
222
- <span class="mw-date-stamp-day">Wed</span>
223
- <span class="mw-date-stamp-date">16.09.</span>
224
- </p>
225
- <div class="mw-date-stamp-body">
226
- <div class="mw-item-list">
227
- <div>
228
- <p class="mw-leader-row mw-leader-row-top">
229
- <span class="mw-leader-row-label mw-text-bold">
230
- Barley stew
231
- <span class="mw-tag mw-tag-success">veggie</span>
232
- </span>
233
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
234
- 9.50 &euro;
235
- </span>
236
- </p>
237
- <p class="mw-text-sm mw-text-muted mw-mb-0">
238
- Root vegetables, simmered since morning.
239
- </p>
240
- </div>
241
- <div>
242
- <p class="mw-leader-row mw-leader-row-top">
243
- <span class="mw-leader-row-label mw-text-bold">
244
- Beef roulade
245
- </span>
246
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
247
- 13.50 &euro;
248
- </span>
249
- </p>
250
- <p class="mw-text-sm mw-text-muted mw-mb-0">
251
- Mashed potato and green beans.
252
- </p>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
- </article>
258
- <article class="mw-card">
259
- <div class="mw-card-body">
260
- <p class="mw-date-stamp">
261
- <span class="mw-date-stamp-day">Thu</span>
262
- <span class="mw-date-stamp-date">17.09.</span>
263
- </p>
264
- <div class="mw-date-stamp-body">
265
- <div class="mw-item-list">
266
- <div>
267
- <p class="mw-leader-row mw-leader-row-top">
268
- <span class="mw-leader-row-label mw-text-bold">
269
- Schnitzel in cream sauce
270
- </span>
271
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
272
- 12.90 &euro;
273
- </span>
274
- </p>
275
- <p class="mw-text-sm mw-text-muted mw-mb-0">
276
- Pork, with spaetzle and a small salad.
277
- </p>
278
- </div>
279
- <div>
280
- <p class="mw-leader-row mw-leader-row-top">
281
- <span class="mw-leader-row-label mw-text-bold">
282
- Mushroom ragout
283
- <span class="mw-tag mw-tag-success">veggie</span>
284
- </span>
285
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
286
- 10.90 &euro;
287
- </span>
288
- </p>
289
- <p class="mw-text-sm mw-text-muted mw-mb-0">
290
- With a bread dumpling.
291
- </p>
292
- </div>
293
- </div>
294
- </div>
295
- </div>
296
- </article>
297
- <article class="mw-card">
298
- <div class="mw-card-body">
299
- <p class="mw-date-stamp mw-date-stamp-today">
300
- <span class="mw-sr-only">Today,</span>
301
- <span class="mw-date-stamp-day">Fri</span>
302
- <span class="mw-date-stamp-date">18.09.</span>
303
- </p>
304
- <div class="mw-date-stamp-body">
305
- <div class="mw-item-list">
306
- <div>
307
- <p class="mw-leader-row mw-leader-row-top">
308
- <span class="mw-leader-row-label mw-text-bold">
309
- Baked fish fillet
310
- </span>
311
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
312
- 11.90 &euro;
313
- </span>
314
- </p>
315
- <p class="mw-text-sm mw-text-muted mw-mb-0">
316
- Beer batter, warm potato salad, remoulade.
317
- </p>
318
- </div>
319
- <div>
320
- <p class="mw-leader-row mw-leader-row-top">
321
- <span class="mw-leader-row-label mw-text-bold">
322
- Pancake soup
323
- </span>
324
- <span class="mw-leader-row-value mw-text-bold mw-text-primary">
325
- 5.80 &euro;
326
- </span>
327
- </p>
328
- <p class="mw-text-sm mw-text-muted mw-mb-0">
329
- Beef broth with chives.
330
- </p>
331
- </div>
332
- </div>
333
- </div>
334
- </div>
335
- </article>
336
- </div>
337
- </div>
338
-
339
- <p class="mw-text-muted mw-text-sm mw-mt-6">
340
- The menu changes every week. No reservation, while the pot lasts.
341
- </p>
@@ -1,27 +0,0 @@
1
- <h3 class="mw-section-subtitle">Media</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- Self-hosted audio and video. The framework ships no player - the native
4
- controls are the player, and <code>accent-color</code> already brands them.
5
- The wrapper makes the element a full-width block; a <code>video</code> also
6
- gets the surface silhouette and a resting shadow, same markup with a
7
- <code>&lt;video&gt;</code> element inside.
8
- </p>
9
-
10
- <div class="mw-grid-2 mw-gap-6">
11
- <div>
12
- <h4 class="mw-text-medium mw-mb-2">Audio with caption</h4>
13
- <div class="mw-card mw-card-simple">
14
- <div class="mw-media">
15
- <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
16
- <p class="mw-media-caption">A short chime, served from this site.</p>
17
- </div>
18
- </div>
19
- </div>
20
-
21
- <div>
22
- <h4 class="mw-text-medium mw-mb-2">Bare, without a card</h4>
23
- <div class="mw-media">
24
- <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
25
- </div>
26
- </div>
27
- </div>
@@ -1,21 +0,0 @@
1
- <h3 class="mw-section-subtitle">Meta Info</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- The line of small facts that sits with a heading - author, date, reading time,
4
- status. One wrapping row, with the separators drawn by CSS rather than typed
5
- into the markup.
6
- </p>
7
-
8
- <div class="mw-meta-header">
9
- <div class="mw-meta-item">
10
- <i class="fas fa-list"></i>
11
- <span>Amount: 5</span>
12
- </div>
13
- <div class="mw-meta-item">
14
- <i class="fas fa-play"></i>
15
- <span>Started: 1</span>
16
- </div>
17
- <div class="mw-meta-item">
18
- <i class="fas fa-ban"></i>
19
- <span>Deactivated: 1</span>
20
- </div>
21
- </div>
@@ -1,199 +0,0 @@
1
- <h3 class="mw-section-subtitle">Simple Modals</h3>
2
- <p class="mw-text-muted">
3
- A <code>&lt;dialog&gt;</code> carrying the same <code>mw-modal</code> classes.
4
- Escape, the focus trap, the inert page behind it and the body scroll lock come
5
- from the element - only opening it needs a line of script. The older
6
- <code>mw-modal-overlay</code> div is still styled for markup that predates
7
- this.
8
- </p>
9
-
10
- <!-- Size Triggers -->
11
- <h4 class="mw-mb-3">Modal Sizes</h4>
12
- <div class="mw-grid-4 mw-mb-8">
13
- <button data-mw-modal="modal-sm" class="mw-btn mw-btn-outline">
14
- Small Modal
15
- </button>
16
- <button data-mw-modal="modal-default" class="mw-btn mw-btn-outline">
17
- Default Modal
18
- </button>
19
- <button data-mw-modal="modal-lg" class="mw-btn mw-btn-outline">
20
- Large Modal
21
- </button>
22
- <button data-mw-modal="modal-xl" class="mw-btn mw-btn-outline">
23
- XL Modal
24
- </button>
25
- </div>
26
-
27
- <!-- Example Triggers -->
28
- <h4 class="mw-mb-3">Examples</h4>
29
- <div class="mw-grid-2 mw-mb-8">
30
- <button data-mw-modal="modal-form" class="mw-btn mw-btn-primary">
31
- Open Form Modal
32
- </button>
33
- <button data-mw-modal="modal-confirm" class="mw-btn mw-btn-secondary">
34
- Open Delete Confirmation
35
- </button>
36
- </div>
37
-
38
- <!-- The close buttons carry no handler - the framework script closes the dialog
39
- they sit in - and closedby="any" dismisses it on a backdrop click, so there
40
- is no mw-modal-backdrop element either. `data-mw-modal` on a trigger opens
41
- the dialog with that id. -->
42
- <!-- Small Modal -->
43
- <dialog id="modal-sm" class="mw-modal mw-modal-sm" closedby="any">
44
- <div class="mw-modal-header">
45
- <h4 class="mw-modal-title">Small Modal</h4>
46
- <button class="mw-modal-close">&#120299;</button>
47
- </div>
48
- <div class="mw-modal-body">
49
- <p class="mw-text-muted">
50
- Max-width <strong>370px</strong>. Good for short confirmations or alerts.
51
- </p>
52
- </div>
53
- <div class="mw-modal-footer">
54
- <button class="mw-modal-close mw-btn mw-btn-outline">Close</button>
55
- </div>
56
- </dialog>
57
-
58
- <!-- Default Modal -->
59
- <dialog id="modal-default" class="mw-modal" closedby="any">
60
- <div class="mw-modal-header">
61
- <h4 class="mw-modal-title">Default Modal</h4>
62
- <button class="mw-modal-close">&#120299;</button>
63
- </div>
64
- <div class="mw-modal-body">
65
- <p class="mw-text-muted">
66
- Max-width <strong>520px</strong>. The default size - fits most use cases.
67
- </p>
68
- </div>
69
- <div class="mw-modal-footer">
70
- <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
71
- <button class="mw-modal-close mw-btn mw-btn-primary">Confirm</button>
72
- </div>
73
- </dialog>
74
-
75
- <!-- Large Modal -->
76
- <dialog id="modal-lg" class="mw-modal mw-modal-lg" closedby="any">
77
- <div class="mw-modal-header">
78
- <h4 class="mw-modal-title">Large Modal</h4>
79
- <button class="mw-modal-close">&#120299;</button>
80
- </div>
81
- <div class="mw-modal-body">
82
- <p class="mw-text-muted">
83
- Max-width <strong>720px</strong>. More room for richer content or forms.
84
- </p>
85
- </div>
86
- <div class="mw-modal-footer">
87
- <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
88
- <button class="mw-modal-close mw-btn mw-btn-primary">Confirm</button>
89
- </div>
90
- </dialog>
91
-
92
- <!-- XL Modal -->
93
- <dialog id="modal-xl" class="mw-modal mw-modal-xl" closedby="any">
94
- <div class="mw-modal-header">
95
- <h4 class="mw-modal-title">XL Modal</h4>
96
- <button class="mw-modal-close">&#120299;</button>
97
- </div>
98
- <div class="mw-modal-body">
99
- <p class="mw-text-muted">
100
- Max-width <strong>960px</strong>. Use for detail views, data tables, or
101
- complex layouts.
102
- </p>
103
- </div>
104
- <div class="mw-modal-footer">
105
- <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
106
- <button class="mw-modal-close mw-btn mw-btn-primary">Confirm</button>
107
- </div>
108
- </dialog>
109
-
110
- <!-- Form Modal -->
111
- <dialog id="modal-form" class="mw-modal mw-modal-lg" closedby="any">
112
- <div class="mw-modal-header">
113
- <h4 class="mw-modal-title">New Contact</h4>
114
- <button class="mw-modal-close">&#120299;</button>
115
- </div>
116
- <div class="mw-modal-body">
117
- <div class="mw-grid-2 mw-mb-3">
118
- <label for="modal-firstname">
119
- <span>First Name</span>
120
- <input
121
- id="modal-firstname"
122
- type="text"
123
- class="mw-input"
124
- placeholder="Jane"
125
- />
126
- </label>
127
- <label for="modal-lastname">
128
- <span>Last Name</span>
129
- <input
130
- id="modal-lastname"
131
- type="text"
132
- class="mw-input"
133
- placeholder="Doe"
134
- />
135
- </label>
136
- </div>
137
- <div class="mw-mb-3">
138
- <label for="modal-email">
139
- <span>Email</span>
140
- <input
141
- id="modal-email"
142
- type="email"
143
- class="mw-input"
144
- placeholder="jane@example.com"
145
- />
146
- </label>
147
- </div>
148
- <div class="mw-mb-3">
149
- <label for="modal-role">
150
- <span>Role</span>
151
- <select id="modal-role" class="mw-select">
152
- <option value="" disabled selected>Select a role</option>
153
- <option>Developer</option>
154
- <option>Designer</option>
155
- <option>Product Manager</option>
156
- <option>Other</option>
157
- </select>
158
- </label>
159
- </div>
160
- <div class="mw-mb-3">
161
- <label for="modal-notes">
162
- <span>Notes</span>
163
- <textarea
164
- id="modal-notes"
165
- rows="3"
166
- class="mw-textarea"
167
- placeholder="Optional notes..."
168
- ></textarea>
169
- </label>
170
- </div>
171
- <label class="mw-toggle">
172
- <input type="checkbox" />
173
- <div class="mw-toggle-track"></div>
174
- <span class="mw-toggle-label">Send welcome email</span>
175
- </label>
176
- </div>
177
- <div class="mw-modal-footer">
178
- <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
179
- <button class="mw-modal-close mw-btn mw-btn-primary">Save Contact</button>
180
- </div>
181
- </dialog>
182
-
183
- <!-- Confirmation Modal -->
184
- <dialog id="modal-confirm" class="mw-modal mw-modal-sm" closedby="any">
185
- <div class="mw-modal-header">
186
- <h4 class="mw-modal-title">Delete Item</h4>
187
- <button class="mw-modal-close" aria-label="Close">&#120299;</button>
188
- </div>
189
- <div class="mw-modal-body">
190
- <p class="mw-text-center">
191
- <strong>Are you sure you want to delete this item?</strong>
192
- </p>
193
- </div>
194
- <div class="mw-modal-footer">
195
- <p class="mw-actions-note">This action cannot be undone.</p>
196
- <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
197
- <button class="mw-modal-close mw-btn mw-btn-danger">Delete</button>
198
- </div>
199
- </dialog>