maverick-wave 5.30.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 (141) hide show
  1. package/README.md +2 -2
  2. package/maverick-wave.min.css +1 -1
  3. package/package.json +8 -2
  4. package/src/scss/components/_modals.scss +23 -9
  5. package/.claude/settings.local.json +0 -43
  6. package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
  7. package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
  8. package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
  9. package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
  10. package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
  11. package/.claude/skills/mw-maverick-wave/references/components.md +0 -2170
  12. package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
  13. package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
  14. package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
  15. package/.claude/skills/mw-maverick-wave/references/theming.md +0 -530
  16. package/.github/workflows/ci.yml +0 -41
  17. package/.idea/codeStyles/Project.xml +0 -59
  18. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  19. package/.idea/maverick-wave.iml +0 -12
  20. package/.idea/modules.xml +0 -8
  21. package/.idea/prettier.xml +0 -6
  22. package/.idea/vcs.xml +0 -6
  23. package/.prettierignore +0 -8
  24. package/.prettierrc.json +0 -7
  25. package/CHANGELOG.md +0 -956
  26. package/CLAUDE.md +0 -60
  27. package/gulpfile.js +0 -167
  28. package/index.html +0 -1730
  29. package/release.sh +0 -31
  30. package/scripts/verify.js +0 -252
  31. package/src/assets/favicon/apple-touch-icon.png +0 -0
  32. package/src/assets/favicon/favicon-96x96.png +0 -0
  33. package/src/assets/favicon/favicon.svg +0 -1
  34. package/src/assets/favicon/site.webmanifest +0 -37
  35. package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
  36. package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
  37. package/src/assets/favicon.ico +0 -0
  38. package/src/assets/header-logo.svg +0 -24
  39. package/src/assets/images/gallery-city.svg +0 -49
  40. package/src/assets/images/gallery-desert.svg +0 -25
  41. package/src/assets/images/gallery-forest.svg +0 -46
  42. package/src/assets/images/gallery-lake.svg +0 -26
  43. package/src/assets/images/gallery-mountain.svg +0 -19
  44. package/src/assets/images/gallery-ocean.svg +0 -26
  45. package/src/assets/images/gallery-oldtown.svg +0 -41
  46. package/src/assets/images/gallery-snow.svg +0 -39
  47. package/src/assets/images/photo-balloon.svg +0 -35
  48. package/src/assets/images/photo-forest-path.svg +0 -31
  49. package/src/assets/images/photo-lighthouse.svg +0 -42
  50. package/src/assets/images/photo-palm.svg +0 -27
  51. package/src/assets/images/photo-peak.svg +0 -27
  52. package/src/assets/images/photo-tower.svg +0 -34
  53. package/src/assets/images/photo-waterfall.svg +0 -32
  54. package/src/assets/images/slider-field.svg +0 -124
  55. package/src/assets/images/slider-forest.svg +0 -33
  56. package/src/assets/images/slider-lake.svg +0 -35
  57. package/src/assets/images/slider-mountains.svg +0 -29
  58. package/src/assets/images/slider-trees.svg +0 -41
  59. package/src/assets/images/story-aurora.svg +0 -36
  60. package/src/assets/images/story-beach.svg +0 -34
  61. package/src/assets/images/story-stars.svg +0 -35
  62. package/src/assets/images/tile-analytics.svg +0 -22
  63. package/src/assets/images/tile-cloud.svg +0 -19
  64. package/src/assets/images/tile-ecommerce.svg +0 -14
  65. package/src/assets/images/tile-enterprise.svg +0 -22
  66. package/src/assets/images/tile-marketing.svg +0 -16
  67. package/src/assets/media/demo-chime.wav +0 -0
  68. package/src/assets/media/story-sunrise.jpg +0 -0
  69. package/src/assets/media/story-sunrise.mp4 +0 -0
  70. package/src/partials/accordions-container.html +0 -179
  71. package/src/partials/alerts-container.html +0 -151
  72. package/src/partials/announcement-container.html +0 -67
  73. package/src/partials/avatars-container.html +0 -229
  74. package/src/partials/badges-container.html +0 -114
  75. package/src/partials/blog-posts-container.html +0 -158
  76. package/src/partials/breadcrumbs-container.html +0 -126
  77. package/src/partials/button-bar-container.html +0 -175
  78. package/src/partials/buttons-container.html +0 -272
  79. package/src/partials/calendar-container.html +0 -203
  80. package/src/partials/cards-container.html +0 -727
  81. package/src/partials/code-container.html +0 -194
  82. package/src/partials/colors-container.html +0 -263
  83. package/src/partials/coming-soon-container.html +0 -10
  84. package/src/partials/contact-container.html +0 -85
  85. package/src/partials/content-slider-container.html +0 -36
  86. package/src/partials/divider-container.html +0 -70
  87. package/src/partials/documentation-container.html +0 -204
  88. package/src/partials/dropdown-container.html +0 -119
  89. package/src/partials/empty-state-container.html +0 -79
  90. package/src/partials/feed-container.html +0 -506
  91. package/src/partials/footer-container.html +0 -113
  92. package/src/partials/form-container.html +0 -262
  93. package/src/partials/form-elements-container.html +0 -616
  94. package/src/partials/form-field-container.html +0 -166
  95. package/src/partials/gallery-container.html +0 -62
  96. package/src/partials/get-started-container.html +0 -423
  97. package/src/partials/grid-container.html +0 -191
  98. package/src/partials/header-container.html +0 -69
  99. package/src/partials/header-utilities-container.html +0 -331
  100. package/src/partials/highlights-container.html +0 -71
  101. package/src/partials/history-container.html +0 -67
  102. package/src/partials/home-container.html +0 -31
  103. package/src/partials/html-lists-container.html +0 -63
  104. package/src/partials/info-container.html +0 -104
  105. package/src/partials/input-group-container.html +0 -299
  106. package/src/partials/item-lists-container.html +0 -368
  107. package/src/partials/kanban-container.html +0 -459
  108. package/src/partials/kbd-container.html +0 -63
  109. package/src/partials/leader-row-container.html +0 -139
  110. package/src/partials/login-container.html +0 -65
  111. package/src/partials/lunch-menu-container.html +0 -341
  112. package/src/partials/media-container.html +0 -27
  113. package/src/partials/meta-info-container.html +0 -21
  114. package/src/partials/modals-container.html +0 -199
  115. package/src/partials/mosaic-container.html +0 -173
  116. package/src/partials/page-header-container.html +0 -78
  117. package/src/partials/pagination-container.html +0 -64
  118. package/src/partials/palette-container.html +0 -480
  119. package/src/partials/panels-container.html +0 -126
  120. package/src/partials/parallax-container.html +0 -147
  121. package/src/partials/portrait-gallery-container.html +0 -175
  122. package/src/partials/preview-container.html +0 -136
  123. package/src/partials/pricing-container.html +0 -523
  124. package/src/partials/progress-container.html +0 -230
  125. package/src/partials/prose-container.html +0 -43
  126. package/src/partials/ratings-container.html +0 -104
  127. package/src/partials/section-head-container.html +0 -77
  128. package/src/partials/segmented-container.html +0 -66
  129. package/src/partials/skeleton-container.html +0 -87
  130. package/src/partials/spinners-container.html +0 -96
  131. package/src/partials/stepper-container.html +0 -111
  132. package/src/partials/stories-container.html +0 -182
  133. package/src/partials/tables-container.html +0 -309
  134. package/src/partials/tabs-container.html +0 -290
  135. package/src/partials/tags-container.html +0 -242
  136. package/src/partials/techstack-bucket-container.html +0 -187
  137. package/src/partials/testimonials-container.html +0 -88
  138. package/src/partials/tiles-container.html +0 -247
  139. package/src/partials/timelines-container.html +0 -196
  140. package/src/partials/typography-container.html +0 -74
  141. 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>