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,67 +0,0 @@
1
- <div class="mw-timeline-simple mw-my-6">
2
- <div class="mw-timeline-simple-step mw-active">
3
- <div class="mw-timeline-simple-date">2026-09-11</div>
4
- <div class="mw-timeline-simple-content">
5
- <div class="mw-card mw-card-simple">
6
- <h3 class="mw-card-title">v5.0.0</h3>
7
- <p>
8
- Everything the framework ships moved into a cascade layer, so vendor
9
- CSS loaded next to it stops winning selector fights by accident. The
10
- source got a full pass while it was open anyway.
11
- </p>
12
- </div>
13
- </div>
14
- </div>
15
-
16
- <div class="mw-timeline-simple-step">
17
- <div class="mw-timeline-simple-date">2026-08-19</div>
18
- <div class="mw-timeline-simple-content">
19
- <div class="mw-card mw-card-simple">
20
- <h3 class="mw-card-title">v4.0.0</h3>
21
- <p>
22
- The calendar arrived in three shapes - month, week and compact - and
23
- pagination was reframed to sit next to it without looking borrowed.
24
- </p>
25
- </div>
26
- </div>
27
- </div>
28
-
29
- <div class="mw-timeline-simple-step">
30
- <div class="mw-timeline-simple-date">2026-04-04</div>
31
- <div class="mw-timeline-simple-content">
32
- <div class="mw-card mw-card-simple">
33
- <h3 class="mw-card-title">v3.0.0</h3>
34
- <p>
35
- Claude Code joined the workflow: more components, more form elements,
36
- and a pile of small fixes it spotted along the way.
37
- </p>
38
- </div>
39
- </div>
40
- </div>
41
-
42
- <div class="mw-timeline-simple-step">
43
- <div class="mw-timeline-simple-date">2025-06-09</div>
44
- <div class="mw-timeline-simple-content">
45
- <div class="mw-card mw-card-simple">
46
- <h3 class="mw-card-title">v2.0.0</h3>
47
- <p>
48
- The grid was rebuilt from scratch, with modals, pagination, item lists
49
- and the first real form layer put on top of it.
50
- </p>
51
- </div>
52
- </div>
53
- </div>
54
-
55
- <div class="mw-timeline-simple-step">
56
- <div class="mw-timeline-simple-date">2025-04-30</div>
57
- <div class="mw-timeline-simple-content">
58
- <div class="mw-card mw-card-simple">
59
- <h3 class="mw-card-title">v1.0.0</h3>
60
- <p>
61
- Let's say initial release - grid, header and a first handful of
62
- components, published as they were.
63
- </p>
64
- </div>
65
- </div>
66
- </div>
67
- </div>
@@ -1,31 +0,0 @@
1
- <div class="mw-parallax-media"></div>
2
-
3
- <div class="mw-hero">
4
- <div class="mw-home mw-home-content-fade">
5
- <div class="mw-home-text">
6
- <span class="mw-hero-badge version-corner">
7
- <span class="mw-hero-badge-dot"></span>
8
- v{{VERSION}}
9
- </span>
10
- <h1>Maverick<span class="mw-text-primary">Wave</span></h1>
11
- <p>
12
- A CSS framework in two files. Grid, 48 components, dark mode - no build
13
- step, no dependencies.
14
- </p>
15
- </div>
16
-
17
- <div class="mw-d-flex mw-gap-8 mw-justify-center">
18
- <a href="#get-started" class="mw-btn mw-btn-primary mw-btn-lg">
19
- Get Started
20
- </a>
21
- <a href="#documentation" class="mw-btn mw-btn-outline mw-btn-lg">
22
- Documentation
23
- </a>
24
- </div>
25
- </div>
26
- </div>
27
-
28
- <a class="mw-scroll-hint" href="#highlights">
29
- More
30
- <i class="fas fa-chevron-down"></i>
31
- </a>
@@ -1,63 +0,0 @@
1
- <h3 class="mw-section-subtitle">HTML Lists</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- The plain <code>ul</code> and <code>ol</code> the framework styles, for prose.
4
- Anything meant to be used rather than read - selectable rows, menus - belongs
5
- in the item lists instead.
6
- </p>
7
-
8
- <div class="mw-grid-2-lg">
9
- <div class="mw-card mw-card-simple">
10
- <h4 class="mw-mb-2">Basic List</h4>
11
- <ul class="mw-list">
12
- <li>First item</li>
13
- <li>Second item</li>
14
- <li>
15
- Third item
16
- <ul class="mw-list">
17
- <li>Nested item 1</li>
18
- <li>Nested item 2</li>
19
- </ul>
20
- </li>
21
- <li>Fourth item</li>
22
- </ul>
23
-
24
- <h4 class="mw-mb-2">Unstyled List</h4>
25
- <ul class="mw-list mw-list-unstyled">
26
- <li>First item</li>
27
- <li>Second item</li>
28
- <li>Third item</li>
29
- <li>Fourth item</li>
30
- </ul>
31
-
32
- <h4 class="mw-mb-2">Inline List</h4>
33
- <ul class="mw-list mw-list-inline">
34
- <li>First item</li>
35
- <li>Second item</li>
36
- <li>Third item</li>
37
- <li>Fourth item</li>
38
- </ul>
39
- </div>
40
-
41
- <div class="mw-card mw-card-simple">
42
- <h4 class="mw-mb-2">Dot List</h4>
43
- <ul class="mw-list mw-list-dot">
44
- <li>First item with dot</li>
45
- <li>Second item with dot</li>
46
- <li>Third item with dot</li>
47
- </ul>
48
-
49
- <h4 class="mw-mb-2">Check List</h4>
50
- <ul class="mw-list mw-list-check">
51
- <li>First completed item</li>
52
- <li>Second completed item</li>
53
- <li>Third completed item</li>
54
- </ul>
55
-
56
- <h4 class="mw-mb-2">Links List</h4>
57
- <ul class="mw-list mw-list-link">
58
- <li><a>First link</a></li>
59
- <li><a>Second link</a></li>
60
- <li><a>Third link</a></li>
61
- </ul>
62
- </div>
63
- </div>
@@ -1,104 +0,0 @@
1
- <h3 class="mw-section-subtitle">Info Badges & Counters</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- A small solid marker for a status, a label or a count, down to a mini form
4
- that fits inside a table cell. A tag names something; this one flags it.
5
- </p>
6
-
7
- <h4 class="mw-mb-2">Pill Badges</h4>
8
- <div class="mw-card mw-card-simple">
9
- <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
10
- <span class="mw-info">Default</span>
11
- <span class="mw-info mw-info-sm">Small</span>
12
- <span class="mw-info mw-info-lg">Large</span>
13
- <span class="mw-info mw-info-xl">XL</span>
14
- </div>
15
- </div>
16
-
17
- <h4 class="mw-mb-2 mw-mt-5">Color Badges (with Border)</h4>
18
- <div class="mw-card mw-card-simple">
19
- <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
20
- <span class="mw-info mw-info-primary">Primary</span>
21
- <span class="mw-info mw-info-secondary">Secondary</span>
22
- <span class="mw-info mw-info-info">Info</span>
23
- <span class="mw-info mw-info-success">Success</span>
24
- <span class="mw-info mw-info-warning">Warning</span>
25
- <span class="mw-info mw-info-danger">Danger</span>
26
- </div>
27
- </div>
28
-
29
- <h4 class="mw-mb-2 mw-mt-5">Block</h4>
30
- <div class="mw-card mw-card-simple">
31
- <div class="mw-info mw-info-primary mw-info-block">
32
- <strong>The same frame, carrying a paragraph</strong>
33
- <span
34
- >The base is built for a short figure and centres it in a narrow column.
35
- The block variant ranges its text left up to a measure, sets it in body
36
- weight and leading, and stays put under the pointer - for a note, a
37
- disclaimer, or a short explanation beside the thing it explains.</span
38
- >
39
- </div>
40
- </div>
41
-
42
- <h4 class="mw-mb-2 mw-mt-5">Counters</h4>
43
- <div class="mw-card mw-card-simple">
44
- <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
45
- <div class="mw-info mw-info-counter">
46
- <div class="mw-info-value">5</div>
47
- <div class="mw-info-label">Projects Completed</div>
48
- </div>
49
- <div class="mw-info mw-info-counter mw-info-primary">
50
- <div class="mw-info-value">24/7</div>
51
- <div class="mw-info-label">Support</div>
52
- </div>
53
- <div class="mw-info mw-info-counter mw-info-success mw-info-lg">
54
- <div class="mw-info-value">150</div>
55
- <div class="mw-info-label">Users</div>
56
- </div>
57
- <div class="mw-info mw-info-counter mw-info-danger mw-info-sm">
58
- <div class="mw-info-value">3</div>
59
- <div class="mw-info-label">Alerts</div>
60
- </div>
61
- </div>
62
- </div>
63
-
64
- <h4 class="mw-mb-2 mw-mt-5">Mini Info Badges (Sizes)</h4>
65
- <div class="mw-card mw-card-simple">
66
- <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
67
- <span class="mw-info-mini mw-info-mini-sm mw-info-mini-primary">
68
- <i class="fas fa-check"></i>
69
- </span>
70
-
71
- <span class="mw-info-mini mw-info-mini-primary">
72
- <i class="fas fa-check"></i>
73
- </span>
74
-
75
- <span class="mw-info-mini mw-info-mini-lg mw-info-mini-primary">
76
- <i class="fas fa-check"></i>
77
- </span>
78
-
79
- <span class="mw-info-mini mw-info-mini-xl mw-info-mini-primary">
80
- <i class="fas fa-check"></i>
81
- </span>
82
- </div>
83
- </div>
84
-
85
- <h4 class="mw-mb-2 mw-mt-5">Mini Info Badges (Colors)</h4>
86
- <div class="mw-card mw-card-simple">
87
- <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
88
- <span class="mw-info-mini mw-info-mini-primary">
89
- <i class="fas fa-info"></i>
90
- </span>
91
- <span class="mw-info-mini mw-info-mini-secondary"></span>
92
- <span class="mw-info-mini mw-info-mini-info">
93
- <i class="fas fa-question"></i>
94
- </span>
95
- <span class="mw-info-mini mw-info-mini-success">
96
- <i class="fas fa-check"></i>
97
- </span>
98
- <span class="mw-info-mini mw-info-mini-warning"></span>
99
- <span class="mw-info-mini mw-info-mini-danger">
100
- <i class="fas fa-times"></i>
101
- </span>
102
- <span class="mw-info-mini"></span>
103
- </div>
104
- </div>
@@ -1,299 +0,0 @@
1
- <h3 class="mw-section-subtitle">Input Group</h3>
2
- <p class="mw-text-muted mw-text-measure">
3
- A field with something welded to its edge - a unit, an icon, a button. Put the
4
- size modifier on the group and it reaches the field inside, and the whole
5
- group takes one focus ring rather than three.
6
- </p>
7
-
8
- <div class="mw-grid-2 mw-gap-6">
9
- <!-- LEFT: Prefix & Suffix examples -->
10
- <div>
11
- <h3 class="mw-card-title mw-mb-4">Prefix & Suffix</h3>
12
- <div class="mw-card mw-card-simple">
13
- <!-- Icon prefix (search) -->
14
- <div class="mw-field mw-mb-4">
15
- <label class="mw-field-label" for="ig-search">Search</label>
16
- <div class="mw-input-group">
17
- <span class="mw-input-group-prefix"
18
- ><i class="fas fa-search"></i
19
- ></span>
20
- <input
21
- id="ig-search"
22
- type="text"
23
- class="mw-input"
24
- placeholder="Search projects..."
25
- />
26
- </div>
27
- </div>
28
-
29
- <!-- Text prefix (URL) -->
30
- <div class="mw-field mw-mb-4">
31
- <label class="mw-field-label" for="ig-website">Website</label>
32
- <div class="mw-input-group">
33
- <span class="mw-input-group-prefix">https://</span>
34
- <input
35
- id="ig-website"
36
- type="text"
37
- class="mw-input"
38
- placeholder="your-domain.com"
39
- />
40
- </div>
41
- </div>
42
-
43
- <!-- Currency prefix + suffix -->
44
- <div class="mw-field mw-mb-4">
45
- <label class="mw-field-label" for="ig-price">Price</label>
46
- <div class="mw-input-group">
47
- <span class="mw-input-group-prefix"
48
- ><i class="fas fa-euro-sign"></i
49
- ></span>
50
- <input
51
- id="ig-price"
52
- type="text"
53
- inputmode="decimal"
54
- class="mw-input mw-input-numeric"
55
- placeholder="0,00"
56
- value="1.204,50"
57
- />
58
- <span class="mw-input-group-suffix">EUR</span>
59
- </div>
60
- </div>
61
-
62
- <!-- Suffix icon -->
63
- <div class="mw-field mw-mb-4">
64
- <label class="mw-field-label" for="ig-email">Email</label>
65
- <div class="mw-input-group">
66
- <input
67
- id="ig-email"
68
- type="email"
69
- class="mw-input"
70
- placeholder="user@example.com"
71
- />
72
- <span class="mw-input-group-suffix"
73
- ><i class="fas fa-envelope"></i
74
- ></span>
75
- </div>
76
- </div>
77
-
78
- <!-- @ prefix -->
79
- <div class="mw-field">
80
- <label class="mw-field-label" for="ig-username">Username</label>
81
- <div class="mw-input-group">
82
- <span class="mw-input-group-prefix">@</span>
83
- <input
84
- id="ig-username"
85
- type="text"
86
- class="mw-input"
87
- placeholder="your_handle"
88
- />
89
- </div>
90
- </div>
91
- </div>
92
- </div>
93
-
94
- <!-- RIGHT: With buttons & sizes -->
95
- <div>
96
- <h3 class="mw-card-title mw-mb-4">With Buttons & Sizes</h3>
97
- <div class="mw-card mw-card-simple">
98
- <!-- Input + search button -->
99
- <div class="mw-field mw-mb-4">
100
- <label class="mw-field-label" for="ig-search-btn"
101
- >Search with action</label
102
- >
103
- <div class="mw-input-group">
104
- <input
105
- id="ig-search-btn"
106
- type="text"
107
- class="mw-input"
108
- placeholder="Keyword..."
109
- />
110
- <button
111
- type="button"
112
- class="mw-btn mw-btn-primary"
113
- aria-label="Search"
114
- >
115
- <i class="fas fa-search"></i>
116
- </button>
117
- </div>
118
- </div>
119
-
120
- <!-- Copy URL -->
121
- <div class="mw-field mw-mb-4">
122
- <label class="mw-field-label" for="ig-share">Share link</label>
123
- <div class="mw-input-group">
124
- <input
125
- id="ig-share"
126
- type="text"
127
- class="mw-input"
128
- value="https://maverick-wave.m1well.com"
129
- readonly
130
- />
131
- <button
132
- type="button"
133
- class="mw-btn mw-btn-outline"
134
- data-mw-copy=""
135
- aria-label="Copy link"
136
- >
137
- <i class="fas fa-copy"></i>
138
- </button>
139
- </div>
140
- </div>
141
-
142
- <!-- Small size -->
143
- <div class="mw-field mw-mb-4">
144
- <label class="mw-field-label" for="ig-tag">Small</label>
145
- <div class="mw-input-group mw-input-group-sm">
146
- <span class="mw-input-group-prefix"><i class="fas fa-tag"></i></span>
147
- <input
148
- id="ig-tag"
149
- type="text"
150
- class="mw-input mw-input-sm"
151
- placeholder="Tag name"
152
- />
153
- </div>
154
- </div>
155
-
156
- <!-- Large size -->
157
- <div class="mw-field mw-mb-4">
158
- <label class="mw-field-label" for="ig-password">Large</label>
159
- <div class="mw-input-group mw-input-group-lg">
160
- <span class="mw-input-group-prefix"><i class="fas fa-lock"></i></span>
161
- <input
162
- id="ig-password"
163
- type="password"
164
- class="mw-input mw-input-lg"
165
- placeholder="Password"
166
- />
167
- </div>
168
- </div>
169
-
170
- <!-- Prefix + Suffix button -->
171
- <div class="mw-field">
172
- <label class="mw-field-label" for="ig-message">Message</label>
173
- <div class="mw-input-group">
174
- <span class="mw-input-group-prefix"
175
- ><i class="fas fa-comment"></i
176
- ></span>
177
- <input
178
- id="ig-message"
179
- type="text"
180
- class="mw-input"
181
- placeholder="Type a message..."
182
- />
183
- <button
184
- type="button"
185
- class="mw-btn mw-btn-primary"
186
- aria-label="Send message"
187
- >
188
- <i class="fas fa-paper-plane"></i>
189
- </button>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
- </div>
195
-
196
- <div class="mw-grid-2 mw-gap-6 mw-mt-6">
197
- <!-- LEFT: Date & DateTime -->
198
- <div>
199
- <h3 class="mw-card-title mw-mb-4">Date & DateTime</h3>
200
- <div class="mw-card mw-card-simple">
201
- <!-- Date -->
202
- <div class="mw-field mw-mb-4">
203
- <label class="mw-field-label" for="ig-date">Date</label>
204
- <div class="mw-input-group">
205
- <span class="mw-input-group-prefix"
206
- ><i class="fas fa-calendar-days"></i
207
- ></span>
208
- <input id="ig-date" type="date" class="mw-input" />
209
- </div>
210
- </div>
211
-
212
- <!-- DateTime-local -->
213
- <div class="mw-field mw-mb-4">
214
- <label class="mw-field-label" for="ig-datetime">Date & Time</label>
215
- <div class="mw-input-group">
216
- <span class="mw-input-group-prefix"
217
- ><i class="fas fa-calendar-days"></i
218
- ></span>
219
- <input id="ig-datetime" type="datetime-local" class="mw-input" />
220
- </div>
221
- </div>
222
-
223
- <!-- Date small -->
224
- <div class="mw-field mw-mb-4">
225
- <label class="mw-field-label" for="ig-date-sm">Date (small)</label>
226
- <div class="mw-input-group mw-input-group-sm">
227
- <span class="mw-input-group-prefix"
228
- ><i class="fas fa-calendar-days"></i
229
- ></span>
230
- <input id="ig-date-sm" type="date" class="mw-input mw-input-sm" />
231
- </div>
232
- </div>
233
-
234
- <!-- Date large -->
235
- <div class="mw-field">
236
- <label class="mw-field-label" for="ig-date-lg">Date (large)</label>
237
- <div class="mw-input-group mw-input-group-lg">
238
- <span class="mw-input-group-prefix"
239
- ><i class="fas fa-calendar-days"></i
240
- ></span>
241
- <input id="ig-date-lg" type="date" class="mw-input mw-input-lg" />
242
- </div>
243
- </div>
244
- </div>
245
- </div>
246
-
247
- <!-- RIGHT: Time -->
248
- <div>
249
- <h3 class="mw-card-title mw-mb-4">Time</h3>
250
- <div class="mw-card mw-card-simple">
251
- <!-- Time default -->
252
- <div class="mw-field mw-mb-4">
253
- <label class="mw-field-label" for="ig-time">Time</label>
254
- <div class="mw-input-group">
255
- <span class="mw-input-group-prefix"
256
- ><i class="fas fa-clock"></i
257
- ></span>
258
- <input id="ig-time" type="time" class="mw-input" />
259
- </div>
260
- </div>
261
-
262
- <!-- Time with hint -->
263
- <div class="mw-field mw-mb-4">
264
- <label class="mw-field-label mw-required" for="ig-time-hint"
265
- >Start time</label
266
- >
267
- <div class="mw-input-group">
268
- <span class="mw-input-group-prefix"
269
- ><i class="fas fa-clock"></i
270
- ></span>
271
- <input id="ig-time-hint" type="time" class="mw-input" />
272
- </div>
273
- <span class="mw-field-hint">Select the meeting start time.</span>
274
- </div>
275
-
276
- <!-- Time small -->
277
- <div class="mw-field mw-mb-4">
278
- <label class="mw-field-label" for="ig-time-sm">Time (small)</label>
279
- <div class="mw-input-group mw-input-group-sm">
280
- <span class="mw-input-group-prefix"
281
- ><i class="fas fa-clock"></i
282
- ></span>
283
- <input id="ig-time-sm" type="time" class="mw-input mw-input-sm" />
284
- </div>
285
- </div>
286
-
287
- <!-- Time large -->
288
- <div class="mw-field">
289
- <label class="mw-field-label" for="ig-time-lg">Time (large)</label>
290
- <div class="mw-input-group mw-input-group-lg">
291
- <span class="mw-input-group-prefix"
292
- ><i class="fas fa-clock"></i
293
- ></span>
294
- <input id="ig-time-lg" type="time" class="mw-input mw-input-lg" />
295
- </div>
296
- </div>
297
- </div>
298
- </div>
299
- </div>