material-inspired-component-library 8.1.1 → 9.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 (283) hide show
  1. package/README.md +106 -18
  2. package/components/README.md +1 -1
  3. package/components/accordion/README.md +6 -6
  4. package/components/alert/README.md +10 -10
  5. package/components/alert/index.scss +27 -52
  6. package/components/appbar/README.md +19 -6
  7. package/components/appbar/index.scss +40 -44
  8. package/components/badge/README.md +12 -10
  9. package/components/badge/index.scss +21 -25
  10. package/components/bottomsheet/README.md +26 -1
  11. package/components/bottomsheet/index.scss +58 -44
  12. package/components/button/README.md +7 -5
  13. package/components/button/_shared.scss +210 -0
  14. package/components/button/index.scss +49 -283
  15. package/components/card/README.md +97 -85
  16. package/components/card/index.scss +46 -65
  17. package/components/checkbox/README.md +25 -14
  18. package/{tools/shapes/check.mjs → components/checkbox/_label.scss} +37 -42
  19. package/components/checkbox/index.scss +66 -66
  20. package/components/chip/README.md +186 -0
  21. package/components/chip/index.scss +285 -0
  22. package/components/datepicker/README.md +79 -0
  23. package/components/datepicker/index.scss +346 -315
  24. package/components/dialog/README.md +20 -10
  25. package/components/dialog/index.scss +55 -66
  26. package/components/divider/README.md +16 -15
  27. package/components/divider/index.scss +9 -25
  28. package/components/iconbutton/README.md +8 -3
  29. package/components/iconbutton/index.scss +83 -186
  30. package/components/list/README.md +89 -156
  31. package/components/list/index.scss +34 -36
  32. package/components/menu/README.md +81 -155
  33. package/components/menu/index.scss +52 -58
  34. package/components/navigationbar/README.md +108 -0
  35. package/components/navigationbar/index.scss +185 -0
  36. package/components/navigationrail/README.md +60 -36
  37. package/components/navigationrail/_navitem.scss +96 -0
  38. package/components/navigationrail/index.scss +76 -130
  39. package/components/progressindicator/README.md +83 -47
  40. package/components/progressindicator/index.scss +622 -172
  41. package/components/radio/README.md +11 -9
  42. package/components/radio/index.scss +36 -33
  43. package/components/select/README.md +12 -7
  44. package/components/select/index.scss +26 -34
  45. package/components/shapes/README.md +3 -3
  46. package/components/shapes/index.scss +0 -1
  47. package/components/sidesheet/README.md +21 -9
  48. package/components/sidesheet/index.scss +38 -46
  49. package/components/slider/README.md +21 -0
  50. package/components/slider/index.scss +108 -139
  51. package/components/snackbar/README.md +32 -35
  52. package/components/snackbar/index.scss +10 -22
  53. package/components/stepper/README.md +14 -7
  54. package/components/stepper/index.scss +58 -39
  55. package/components/switch/README.md +22 -15
  56. package/components/switch/index.scss +68 -60
  57. package/components/textfield/README.md +48 -5
  58. package/components/textfield/index.scss +192 -248
  59. package/components/timepicker/README.md +53 -23
  60. package/components/timepicker/index.scss +110 -128
  61. package/dist/alert.css +1 -1
  62. package/dist/alert.js +1 -1
  63. package/dist/appbar.css +1 -1
  64. package/dist/appbar.js +1 -1
  65. package/dist/badge.css +1 -1
  66. package/dist/badge.js +1 -1
  67. package/dist/base.css +1 -0
  68. package/dist/base.js +1 -0
  69. package/dist/bottomsheet.css +1 -1
  70. package/dist/bottomsheet.js +1 -1
  71. package/dist/button.css +1 -1
  72. package/dist/button.js +1 -1
  73. package/dist/card.css +1 -1
  74. package/dist/card.js +1 -1
  75. package/dist/checkbox.css +1 -1
  76. package/dist/checkbox.js +1 -1
  77. package/dist/chip.css +1 -0
  78. package/dist/chip.js +1 -0
  79. package/dist/components/iconbutton/index.d.ts +2 -7
  80. package/dist/components/slider/index.d.ts +1 -1
  81. package/dist/components/textfield/index.d.ts +2 -2
  82. package/dist/datepicker.css +1 -1
  83. package/dist/datepicker.js +1 -1
  84. package/dist/dialog.css +1 -1
  85. package/dist/dialog.js +1 -1
  86. package/dist/divider.css +1 -1
  87. package/dist/divider.js +1 -1
  88. package/dist/field.css +1 -0
  89. package/dist/field.js +1 -0
  90. package/dist/foundations/form/index.js +1 -1
  91. package/dist/foundations/runtime.d.ts +15 -0
  92. package/dist/foundations/runtime.js +1 -0
  93. package/dist/iconbutton.css +1 -1
  94. package/dist/iconbutton.js +1 -1
  95. package/dist/layout.css +1 -1
  96. package/dist/layout.js +1 -1
  97. package/dist/list.css +1 -1
  98. package/dist/list.js +1 -1
  99. package/dist/menu.css +1 -1
  100. package/dist/menu.js +1 -1
  101. package/dist/micl.css +1 -1
  102. package/dist/micl.d.ts +14 -5
  103. package/dist/micl.js +1 -1
  104. package/dist/navigationbar.css +1 -0
  105. package/dist/navigationbar.js +1 -0
  106. package/dist/navigationrail.css +1 -1
  107. package/dist/navigationrail.js +1 -1
  108. package/dist/progressindicator.css +1 -1
  109. package/dist/progressindicator.js +1 -1
  110. package/dist/radio.css +1 -1
  111. package/dist/radio.js +1 -1
  112. package/dist/scrollbar.js +1 -1
  113. package/dist/select.css +1 -1
  114. package/dist/select.js +1 -1
  115. package/dist/shapes.css +1 -1
  116. package/dist/shapes.js +1 -1
  117. package/dist/sidesheet.css +1 -1
  118. package/dist/sidesheet.js +1 -1
  119. package/dist/slider.css +1 -1
  120. package/dist/slider.js +1 -1
  121. package/dist/snackbar.css +1 -1
  122. package/dist/snackbar.js +1 -1
  123. package/dist/stepper.css +1 -1
  124. package/dist/stepper.js +1 -1
  125. package/dist/switch.css +1 -1
  126. package/dist/switch.js +1 -1
  127. package/dist/textfield.css +1 -1
  128. package/dist/textfield.js +1 -1
  129. package/dist/timepicker.css +1 -1
  130. package/dist/timepicker.js +1 -1
  131. package/foundations/_index.scss +35 -0
  132. package/foundations/{index.scss → base/index.scss} +21 -56
  133. package/foundations/field/index.scss +37 -0
  134. package/foundations/layout/index.scss +64 -65
  135. package/package.json +23 -9
  136. package/styles/statelayer.scss +20 -5
  137. package/styles.scss +5 -2
  138. package/.claude/settings.local.json +0 -17
  139. package/.editorconfig +0 -12
  140. package/.gitattributes +0 -9
  141. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
  142. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  143. package/CLAUDE.md +0 -53
  144. package/CODE_OF_CONDUCT.md +0 -128
  145. package/components/bottomsheet/index.ts +0 -153
  146. package/components/button/index.ts +0 -79
  147. package/components/checkbox/index.ts +0 -148
  148. package/components/datepicker/index.ts +0 -693
  149. package/components/iconbutton/index.ts +0 -77
  150. package/components/list/index.ts +0 -138
  151. package/components/menu/index.ts +0 -145
  152. package/components/navigationrail/index.ts +0 -87
  153. package/components/progressindicator/index.ts +0 -77
  154. package/components/slider/index.ts +0 -149
  155. package/components/snackbar/index.ts +0 -118
  156. package/components/stepper/index.ts +0 -248
  157. package/components/textfield/index.ts +0 -188
  158. package/components/timepicker/index.ts +0 -413
  159. package/dist/components/progressindicator/index.d.ts +0 -6
  160. package/dist/foundations.css +0 -1
  161. package/dist/foundations.js +0 -1
  162. package/docs/accordion.html +0 -344
  163. package/docs/alert.html +0 -177
  164. package/docs/bottomsheet.html +0 -240
  165. package/docs/button.html +0 -291
  166. package/docs/card-awards.webp +0 -0
  167. package/docs/card-cabinet.webp +0 -0
  168. package/docs/card-city.webp +0 -0
  169. package/docs/card-fingerprint.webp +0 -0
  170. package/docs/card-holiday.webp +0 -0
  171. package/docs/card-names.webp +0 -0
  172. package/docs/card.html +0 -159
  173. package/docs/checkbox.html +0 -147
  174. package/docs/datepicker.html +0 -274
  175. package/docs/dialog.html +0 -195
  176. package/docs/divider.html +0 -139
  177. package/docs/docs.css +0 -26
  178. package/docs/docs.js +0 -139
  179. package/docs/iconbutton.html +0 -331
  180. package/docs/index.html +0 -431
  181. package/docs/list.html +0 -310
  182. package/docs/menu.html +0 -574
  183. package/docs/micl.css +0 -1
  184. package/docs/micl.js +0 -1
  185. package/docs/navigationrail.html +0 -138
  186. package/docs/progressindicator.html +0 -288
  187. package/docs/radio.html +0 -123
  188. package/docs/select.html +0 -337
  189. package/docs/shapes.css +0 -1
  190. package/docs/shapes.html +0 -159
  191. package/docs/shapes.js +0 -1
  192. package/docs/sidesheet.html +0 -149
  193. package/docs/slider.html +0 -141
  194. package/docs/snackbar.html +0 -102
  195. package/docs/stepper.html +0 -319
  196. package/docs/switch.html +0 -196
  197. package/docs/textfield.html +0 -208
  198. package/docs/themes/airblue/dark-hc.css +0 -51
  199. package/docs/themes/airblue/dark-mc.css +0 -51
  200. package/docs/themes/airblue/dark.css +0 -51
  201. package/docs/themes/airblue/light-hc.css +0 -51
  202. package/docs/themes/airblue/light-mc.css +0 -51
  203. package/docs/themes/airblue/light.css +0 -51
  204. package/docs/themes/airblue/theme.css +0 -306
  205. package/docs/themes/barnred/dark-hc.css +0 -51
  206. package/docs/themes/barnred/dark-mc.css +0 -51
  207. package/docs/themes/barnred/dark.css +0 -51
  208. package/docs/themes/barnred/light-hc.css +0 -51
  209. package/docs/themes/barnred/light-mc.css +0 -51
  210. package/docs/themes/barnred/light.css +0 -51
  211. package/docs/themes/barnred/theme.css +0 -306
  212. package/docs/themes/citrine/dark-hc.css +0 -51
  213. package/docs/themes/citrine/dark-mc.css +0 -51
  214. package/docs/themes/citrine/dark.css +0 -51
  215. package/docs/themes/citrine/light-hc.css +0 -51
  216. package/docs/themes/citrine/light-mc.css +0 -51
  217. package/docs/themes/citrine/light.css +0 -51
  218. package/docs/themes/citrine/theme.css +0 -306
  219. package/docs/themes/gray/dark-hc.css +0 -51
  220. package/docs/themes/gray/dark-mc.css +0 -51
  221. package/docs/themes/gray/dark.css +0 -51
  222. package/docs/themes/gray/light-hc.css +0 -51
  223. package/docs/themes/gray/light-mc.css +0 -51
  224. package/docs/themes/gray/light.css +0 -51
  225. package/docs/themes/gray/theme.css +0 -306
  226. package/docs/themes/greenery/dark-hc.css +0 -51
  227. package/docs/themes/greenery/dark-mc.css +0 -51
  228. package/docs/themes/greenery/dark.css +0 -51
  229. package/docs/themes/greenery/light-hc.css +0 -51
  230. package/docs/themes/greenery/light-mc.css +0 -51
  231. package/docs/themes/greenery/light.css +0 -51
  232. package/docs/themes/greenery/theme.css +0 -306
  233. package/docs/themes/hermana/dark-hc.css +0 -51
  234. package/docs/themes/hermana/dark-mc.css +0 -51
  235. package/docs/themes/hermana/dark.css +0 -51
  236. package/docs/themes/hermana/light-hc.css +0 -51
  237. package/docs/themes/hermana/light-mc.css +0 -51
  238. package/docs/themes/hermana/light.css +0 -51
  239. package/docs/themes/hermana/theme.css +0 -306
  240. package/docs/themes/illuminating/dark-hc.css +0 -51
  241. package/docs/themes/illuminating/dark-mc.css +0 -51
  242. package/docs/themes/illuminating/dark.css +0 -51
  243. package/docs/themes/illuminating/light-hc.css +0 -51
  244. package/docs/themes/illuminating/light-mc.css +0 -51
  245. package/docs/themes/illuminating/light.css +0 -51
  246. package/docs/themes/illuminating/theme.css +0 -306
  247. package/docs/themes/magenta/dark-hc.css +0 -51
  248. package/docs/themes/magenta/dark-mc.css +0 -51
  249. package/docs/themes/magenta/dark.css +0 -51
  250. package/docs/themes/magenta/light-hc.css +0 -51
  251. package/docs/themes/magenta/light-mc.css +0 -51
  252. package/docs/themes/magenta/light.css +0 -51
  253. package/docs/themes/magenta/theme.css +0 -306
  254. package/docs/themes/mocha/dark-hc.css +0 -51
  255. package/docs/themes/mocha/dark-mc.css +0 -51
  256. package/docs/themes/mocha/dark.css +0 -51
  257. package/docs/themes/mocha/light-hc.css +0 -51
  258. package/docs/themes/mocha/light-mc.css +0 -51
  259. package/docs/themes/mocha/light.css +0 -51
  260. package/docs/themes/mocha/theme.css +0 -306
  261. package/docs/themes/olivegreen/dark-hc.css +0 -51
  262. package/docs/themes/olivegreen/dark-mc.css +0 -51
  263. package/docs/themes/olivegreen/dark.css +0 -51
  264. package/docs/themes/olivegreen/light-hc.css +0 -51
  265. package/docs/themes/olivegreen/light-mc.css +0 -51
  266. package/docs/themes/olivegreen/light.css +0 -51
  267. package/docs/themes/olivegreen/theme.css +0 -306
  268. package/docs/themes/peri/dark-hc.css +0 -51
  269. package/docs/themes/peri/dark-mc.css +0 -51
  270. package/docs/themes/peri/dark.css +0 -51
  271. package/docs/themes/peri/light-hc.css +0 -51
  272. package/docs/themes/peri/light-mc.css +0 -51
  273. package/docs/themes/peri/light.css +0 -51
  274. package/docs/themes/peri/theme.css +0 -306
  275. package/docs/timepicker.html +0 -160
  276. package/foundations/form/index.ts +0 -174
  277. package/foundations/layout/README.md +0 -127
  278. package/intl.d.ts +0 -9
  279. package/micl.ts +0 -221
  280. package/styles/README.md +0 -196
  281. package/tools/shapes/generate.mjs +0 -828
  282. package/tsconfig.json +0 -116
  283. package/webpack.config.js +0 -159
package/docs/accordion.html DELETED
@@ -1,344 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Demonstrating MICL Accordions">
7
- <title>MICL Accordions</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,content_copy,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
12
- <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
- <link rel="stylesheet" href="micl.css">
14
- <link rel="stylesheet" href="docs.css">
15
- </head>
16
- <body class="micl-window light">
17
- <main class="micl-body micl-body--stacked-to-extralarge">
18
- <section class="micl-pane">
19
- <header class="micl-appbar">
20
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
21
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
22
- </a>
23
- <div class="micl-appbar__headline micl-appbar__headline--center">
24
- <h1>Accordions</h1>
25
- <p class="micl-appbar__subtitle">Showcasing MICL accordions</p>
26
- </div>
27
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
28
- </header>
29
-
30
- <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-large">
31
- <div class="micl-pane__column">
32
- <div class="micl-card-elevated">
33
- <div class="micl-card__content">
34
- <div class="micl-list">
35
- <details name="accordion1">
36
- <summary class="micl-list-item-one">
37
- <span class="micl-list-item__text">
38
- <span class="micl-list-item__headline">Headline 1</span>
39
- </span>
40
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
41
- </summary>
42
- <div class="micl-list-item__content">
43
- <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
44
- </div>
45
- </details>
46
- <details name="accordion1">
47
- <summary class="micl-list-item-one">
48
- <span class="micl-list-item__text">
49
- <span class="micl-list-item__headline">Headline 2</span>
50
- </span>
51
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
52
- </summary>
53
- <div class="micl-list-item__content">
54
- <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
55
- </div>
56
- </details>
57
- </div>
58
- <div class="micl-list">
59
- <details name="accordion2">
60
- <summary class="micl-list-item-two">
61
- <span class="micl-list-item__text">
62
- <span class="micl-list-item__headline">Marie Curie</span>
63
- <span class="micl-list-item__supporting-text">The name of the employee</span>
64
- </span>
65
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
66
- </summary>
67
- <div class="micl-list-item__content" style="padding-block:16px">
68
- <div class="micl-textfield-filled">
69
- <label for="tf1">Name</label>
70
- <input type="text" id="tf1" value="Marie Curie">
71
- </div>
72
- </div>
73
- </details>
74
- <details name="accordion2">
75
- <summary class="micl-list-item-two">
76
- <span class="micl-list-item__text">
77
- <span class="micl-list-item__headline">Country</span>
78
- <span class="micl-list-item__supporting-text">The country of residence</span>
79
- </span>
80
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
81
- </summary>
82
- <div class="micl-list-item__content" style="padding-block:16px">
83
- <div class="micl-textfield-filled">
84
- <label for="tf2">Country</label>
85
- <input type="text" id="tf2" value="France">
86
- </div>
87
- </div>
88
- </details>
89
- </div>
90
- <div class="micl-list">
91
- <details name="accordion3">
92
- <summary class="micl-list-item-three">
93
- <span class="micl-list-item__text">
94
- <span class="micl-list-item__headline">Headline 1</span>
95
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
96
- </span>
97
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
98
- </summary>
99
- <div class="micl-list-item__content">
100
- <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
101
- </div>
102
- </details>
103
- <details name="accordion3">
104
- <summary class="micl-list-item-three">
105
- <span class="micl-list-item__text">
106
- <span class="micl-list-item__headline">Headline 2</span>
107
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
108
- </span>
109
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
110
- </summary>
111
- <div class="micl-list-item__content">
112
- <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
113
- </div>
114
- </details>
115
- </div>
116
- </div>
117
- </div>
118
- </div>
119
- <div class="micl-pane__column">
120
- <div class="micl-card-filled">
121
- <div class="micl-card__content" style="--md-comp-accordion-item-space:4px">
122
- <div class="micl-list">
123
- <details name="accordion4">
124
- <summary class="micl-list-item-one">
125
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
126
- <span class="micl-list-item__text">
127
- <span class="micl-list-item__headline">Date</span>
128
- </span>
129
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
130
- </summary>
131
- <div class="micl-list-item__content" style="padding-block:16px">
132
- <div class="micl-textfield-outlined">
133
- <label for="tf3">Date</label>
134
- <input type="date" id="tf3" value="2025-11-01">
135
- </div>
136
- </div>
137
- </details>
138
- <details name="accordion4">
139
- <summary class="micl-list-item-one">
140
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
141
- <span class="micl-list-item__text">
142
- <span class="micl-list-item__headline">Time</span>
143
- </span>
144
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
145
- </summary>
146
- <div class="micl-list-item__content" style="padding-block:16px">
147
- <div class="micl-textfield-outlined">
148
- <label for="tf4">Time</label>
149
- <input type="time" id="tf4" value="13:22">
150
- </div>
151
- </div>
152
- </details>
153
- </div>
154
- <div class="micl-list">
155
- <details name="accordion5">
156
- <summary class="micl-list-item-two">
157
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
158
- <span class="micl-list-item__text">
159
- <span class="micl-list-item__headline">Headline 1</span>
160
- <span class="micl-list-item__supporting-text">Supporting text 1</span>
161
- </span>
162
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
163
- </summary>
164
- <div class="micl-list-item__content">
165
- <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
166
- </div>
167
- </details>
168
- <details name="accordion5">
169
- <summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
170
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
171
- <span class="micl-list-item__text">
172
- <span class="micl-list-item__headline">Headline 2</span>
173
- <span class="micl-list-item__supporting-text">Supporting text 2</span>
174
- </span>
175
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
176
- </summary>
177
- <div class="micl-list-item__content">
178
- <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
179
- </div>
180
- </details>
181
- </div>
182
- <div class="micl-list">
183
- <details name="accordion6">
184
- <summary class="micl-list-item-three">
185
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
186
- <span class="micl-list-item__text">
187
- <span class="micl-list-item__headline">Headline 1</span>
188
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
189
- </span>
190
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
191
- </summary>
192
- <div class="micl-list-item__content">
193
- <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
194
- </div>
195
- </details>
196
- <details name="accordion6">
197
- <summary class="micl-list-item-three">
198
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
199
- <span class="micl-list-item__text">
200
- <span class="micl-list-item__headline">Headline 2</span>
201
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
202
- </span>
203
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
204
- </summary>
205
- <div class="micl-list-item__content">
206
- <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
207
- </div>
208
- </details>
209
- </div>
210
- </div>
211
- </div>
212
- </div>
213
- <div class="micl-pane__column">
214
- <div class="micl-card-outlined">
215
- <div class="micl-card__content">
216
- <div class="micl-list">
217
- <details name="accordion7">
218
- <summary class="micl-list-item-one">
219
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
220
- <span class="micl-list-item__text">
221
- <span class="micl-list-item__headline">Headline 1</span>
222
- </span>
223
- <span class="micl-list-item__trailing-text">39</span>
224
- </summary>
225
- <div class="micl-list-item__content">
226
- <p style="font-family:Consolas;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
227
- </div>
228
- </details>
229
- <details name="accordion7">
230
- <summary class="micl-list-item-one">
231
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg)"></span>
232
- <span class="micl-list-item__text">
233
- <span class="micl-list-item__headline">Headline 2</span>
234
- </span>
235
- <span class="micl-list-item__trailing-text">24</span>
236
- </summary>
237
- <div class="micl-list-item__content">
238
- <p style="font-family:cursive;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
239
- </div>
240
- </details>
241
- </div>
242
- <div class="micl-list">
243
- <details name="accordion8">
244
- <summary class="micl-list-item-two">
245
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
246
- <span class="micl-list-item__text">
247
- <span class="micl-list-item__headline">Headline 1</span>
248
- <span class="micl-list-item__supporting-text">Supporting text 1</span>
249
- </span>
250
- <span class="micl-list-item__trailing-text">waiting</span>
251
- </summary>
252
- <div class="micl-list-item__content">
253
- <p style="font-family:'Courier New';color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
254
- </div>
255
- </details>
256
- <details name="accordion8">
257
- <summary class="micl-list-item-two">
258
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg/330px-Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg)"></span>
259
- <span class="micl-list-item__text">
260
- <span class="micl-list-item__headline">Headline 2</span>
261
- <span class="micl-list-item__supporting-text">Supporting text 2</span>
262
- </span>
263
- <span class="micl-list-item__trailing-text">completed</span>
264
- </summary>
265
- <div class="micl-list-item__content">
266
- <p style="font-family:Helvetica;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
267
- </div>
268
- </details>
269
- </div>
270
- <div class="micl-list">
271
- <details name="accordion9">
272
- <summary class="micl-list-item-three">
273
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg/330px-N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg)"></span>
274
- <span class="micl-list-item__text">
275
- <span class="micl-list-item__headline">Headline 1</span>
276
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
277
- </span>
278
- </summary>
279
- <div class="micl-list-item__content">
280
- <p style="font-family:fantasy;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
281
- </div>
282
- </details>
283
- <hr class="micl-divider-inset">
284
- <details name="accordion9">
285
- <summary class="micl-list-item-three">
286
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
287
- <span class="micl-list-item__text">
288
- <span class="micl-list-item__headline">Headline 2</span>
289
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
290
- </span>
291
- </summary>
292
- <div class="micl-list-item__content">
293
- <p style="font-family:Garamond;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
294
- </div>
295
- </details>
296
- </div>
297
- </div>
298
- </div>
299
- </div>
300
- </div>
301
- </section>
302
- <section class="micl-pane">
303
- <div class="micl-card-filled" style="margin-top:8px">
304
- <div class="micl-card__headline-s">
305
- <h2>Code example</h2>
306
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
307
- </div>
308
- <div class="micl-card__content docs-code">
309
- <pre tabindex="-1"><code>&lt;div class="micl-list"&gt;
310
- &lt;details name="accordion"&gt;
311
- &lt;summary class="micl-list-item-two"&gt;
312
- &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;settings&lt;/span&gt;
313
- &lt;span class="micl-list-item__text"&gt;
314
- &lt;span class="micl-list-item__headline"&gt;Headline 1&lt;/span&gt;
315
- &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 1&lt;/span&gt;
316
- &lt;/span&gt;
317
- &lt;/summary&gt;
318
- &lt;div class="micl-list-item__content"&gt;
319
- &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
320
- &lt;/div&gt;
321
- &lt;/details&gt;
322
- &lt;hr class="micl-divider-inset"&gt;
323
- &lt;details name="accordion"&gt;
324
- &lt;summary class="micl-list-item-two micl-list-item--disabled"&gt;
325
- &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;person&lt;/span&gt;
326
- &lt;span class="micl-list-item__text"&gt;
327
- &lt;span class="micl-list-item__headline"&gt;Headline 2&lt;/span&gt;
328
- &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 2&lt;/span&gt;
329
- &lt;/span&gt;
330
- &lt;/summary&gt;
331
- &lt;div class="micl-list-item__content"&gt;
332
- &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
333
- &lt;/div&gt;
334
- &lt;/details&gt;
335
- &lt;/div&gt;</code></pre>
336
- </div>
337
- </div>
338
- </section>
339
- </main>
340
-
341
- <script src="micl.js"></script>
342
- <script src="docs.js"></script>
343
- </body>
344
- </html>
package/docs/alert.html DELETED
@@ -1,177 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Demonstrating MICL Alerts">
7
- <title>MICL Alerts</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,content_copy,dark_mode,error,home,question_mark&display=block">
12
- <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
- <link rel="stylesheet" href="micl.css">
14
- <link rel="stylesheet" href="docs.css">
15
- <style>
16
- .micl-card__content {
17
- display: flex;
18
- flex-direction: column;
19
- row-gap: 24px;
20
- }
21
- </style>
22
- </head>
23
- <body class="micl-window light">
24
- <main class="micl-body micl-body--stacked-to-large">
25
- <section class="micl-pane">
26
- <header class="micl-appbar">
27
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
28
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
29
- </a>
30
- <div class="micl-appbar__headline micl-appbar__headline--center">
31
- <h1>Alerts</h1>
32
- <p class="micl-appbar__subtitle">Showcasing MICL alerts</p>
33
- </div>
34
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
35
- </header>
36
-
37
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
38
- <div class="micl-pane__column">
39
- <div class="micl-card-elevated">
40
- <div class="micl-card__headline-s">
41
- <h2>Error colors</h2>
42
- </div>
43
- <div class="micl-card__content">
44
- <div class="micl-alert-tonal" role="alert">
45
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
46
- <div class="micl-alert__text">
47
- <h3>An error has occurred</h3>
48
- <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
49
- </div>
50
- </div>
51
- <div class="micl-alert-filled" role="alert">
52
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
53
- <div class="micl-alert__text">
54
- <h3>An error has occurred</h3>
55
- <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
56
- </div>
57
- </div>
58
- <div class="micl-alert-outlined" role="alert">
59
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
60
- <div class="micl-alert__text">
61
- <h3>An error has occurred</h3>
62
- <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
63
- </div>
64
- </div>
65
- </div>
66
- </div>
67
- </div>
68
- <div class="micl-pane__column">
69
- <div class="micl-card-filled">
70
- <div class="micl-card__headline-s">
71
- <h2>Primary colors</h2>
72
- </div>
73
- <div class="micl-card__content">
74
- <div class="micl-alert-tonal micl-alert--primary" role="alert">
75
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
76
- <div class="micl-alert__text">
77
- <h3>Your file has been saved</h3>
78
- <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
79
- </div>
80
- </div>
81
- <div class="micl-alert-filled micl-alert--primary" role="alert">
82
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
83
- <div class="micl-alert__text">
84
- <h3>Your file has been saved</h3>
85
- <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
86
- </div>
87
- </div>
88
- <div class="micl-alert-outlined micl-alert--primary" role="alert">
89
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
90
- <div class="micl-alert__text">
91
- <h3>Your file has been saved</h3>
92
- </div>
93
- </div>
94
- </div>
95
- </div>
96
- </div>
97
- <div class="micl-pane__column">
98
- <div class="micl-card-outlined">
99
- <div class="micl-card__headline-s">
100
- <h2>Secondary colors</h2>
101
- </div>
102
- <div class="micl-card__content">
103
- <div class="micl-alert-tonal micl-alert--secondary" role="alert">
104
- <div class="micl-alert__text">
105
- <h3>Your efforts have been rewarded</h3>
106
- <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
107
- </div>
108
- </div>
109
- <div class="micl-alert-filled micl-alert--secondary" role="alert">
110
- <div class="micl-alert__text">
111
- <h3>Your efforts have been rewarded</h3>
112
- <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
113
- </div>
114
- </div>
115
- <div class="micl-alert-outlined micl-alert--secondary" role="alert">
116
- <div class="micl-alert__text">
117
- <h3>Your efforts have been rewarded</h3>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- </div>
123
- <div class="micl-pane__column">
124
- <div class="micl-card-elevated">
125
- <div class="micl-card__headline-s">
126
- <h2>Tertiary colors</h2>
127
- </div>
128
- <div class="micl-card__content">
129
- <div class="micl-alert-tonal micl-alert--tertiary" role="alert">
130
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
131
- <div class="micl-alert__text">
132
- <h3>Checking your progress</h3>
133
- <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
134
- </div>
135
- </div>
136
- <div class="micl-alert-filled micl-alert--tertiary" role="alert">
137
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
138
- <div class="micl-alert__text">
139
- <h3>Checking your progress</h3>
140
- <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
141
- </div>
142
- </div>
143
- <div class="micl-alert-outlined micl-alert--tertiary" role="alert">
144
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
145
- <div class="micl-alert__text">
146
- <h3>Checking your progress</h3>
147
- <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
- </section>
155
- <section class="micl-pane">
156
- <div class="micl-card-filled" style="margin-top:8px">
157
- <div class="micl-card__headline-s">
158
- <h2>Code example</h2>
159
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
160
- </div>
161
- <div class="micl-card__content docs-code">
162
- <pre tabindex="-1"><code>&lt;div class="micl-alert-tonal" role="alert"&gt;
163
- &lt;span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error&lt;/span&gt;
164
- &lt;span class="micl-alert__text"&gt;
165
- &lt;h3&gt;An error has occurred&lt;/h3&gt;
166
- &lt;span class="micl-alert__supporting-text"&gt;Something unexplainable has happened.&lt;/span&gt;
167
- &lt;/span&gt;
168
- &lt;/div&gt;</code></pre>
169
- </div>
170
- </div>
171
- </section>
172
- </main>
173
-
174
- <script src="micl.js"></script>
175
- <script src="docs.js"></script>
176
- </body>
177
- </html>