material-inspired-component-library 8.1.0 → 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 (284) 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 +70 -10
  13. package/components/button/_shared.scss +210 -0
  14. package/components/button/index.scss +75 -389
  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 +63 -12
  29. package/components/iconbutton/index.scss +142 -303
  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 +62 -37
  37. package/components/navigationrail/_navitem.scss +96 -0
  38. package/components/navigationrail/index.scss +78 -132
  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/button/index.d.ts +1 -1
  80. package/dist/components/iconbutton/index.d.ts +2 -7
  81. package/dist/components/slider/index.d.ts +1 -1
  82. package/dist/components/textfield/index.d.ts +2 -2
  83. package/dist/datepicker.css +1 -1
  84. package/dist/datepicker.js +1 -1
  85. package/dist/dialog.css +1 -1
  86. package/dist/dialog.js +1 -1
  87. package/dist/divider.css +1 -1
  88. package/dist/divider.js +1 -1
  89. package/dist/field.css +1 -0
  90. package/dist/field.js +1 -0
  91. package/dist/foundations/form/index.js +1 -1
  92. package/dist/foundations/runtime.d.ts +15 -0
  93. package/dist/foundations/runtime.js +1 -0
  94. package/dist/iconbutton.css +1 -1
  95. package/dist/iconbutton.js +1 -1
  96. package/dist/layout.css +1 -1
  97. package/dist/layout.js +1 -1
  98. package/dist/list.css +1 -1
  99. package/dist/list.js +1 -1
  100. package/dist/menu.css +1 -1
  101. package/dist/menu.js +1 -1
  102. package/dist/micl.css +1 -1
  103. package/dist/micl.d.ts +14 -5
  104. package/dist/micl.js +1 -1
  105. package/dist/navigationbar.css +1 -0
  106. package/dist/navigationbar.js +1 -0
  107. package/dist/navigationrail.css +1 -1
  108. package/dist/navigationrail.js +1 -1
  109. package/dist/progressindicator.css +1 -1
  110. package/dist/progressindicator.js +1 -1
  111. package/dist/radio.css +1 -1
  112. package/dist/radio.js +1 -1
  113. package/dist/scrollbar.js +1 -1
  114. package/dist/select.css +1 -1
  115. package/dist/select.js +1 -1
  116. package/dist/shapes.css +1 -1
  117. package/dist/shapes.js +1 -1
  118. package/dist/sidesheet.css +1 -1
  119. package/dist/sidesheet.js +1 -1
  120. package/dist/slider.css +1 -1
  121. package/dist/slider.js +1 -1
  122. package/dist/snackbar.css +1 -1
  123. package/dist/snackbar.js +1 -1
  124. package/dist/stepper.css +1 -1
  125. package/dist/stepper.js +1 -1
  126. package/dist/switch.css +1 -1
  127. package/dist/switch.js +1 -1
  128. package/dist/textfield.css +1 -1
  129. package/dist/textfield.js +1 -1
  130. package/dist/timepicker.css +1 -1
  131. package/dist/timepicker.js +1 -1
  132. package/foundations/_index.scss +35 -0
  133. package/foundations/{index.scss → base/index.scss} +21 -56
  134. package/foundations/field/index.scss +37 -0
  135. package/foundations/layout/index.scss +64 -65
  136. package/package.json +23 -9
  137. package/styles/statelayer.scss +20 -5
  138. package/styles.scss +5 -2
  139. package/.claude/settings.local.json +0 -14
  140. package/.editorconfig +0 -12
  141. package/.gitattributes +0 -9
  142. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
  143. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  144. package/CLAUDE.md +0 -53
  145. package/CODE_OF_CONDUCT.md +0 -128
  146. package/components/bottomsheet/index.ts +0 -153
  147. package/components/button/index.ts +0 -79
  148. package/components/checkbox/index.ts +0 -148
  149. package/components/datepicker/index.ts +0 -693
  150. package/components/iconbutton/index.ts +0 -77
  151. package/components/list/index.ts +0 -138
  152. package/components/menu/index.ts +0 -145
  153. package/components/navigationrail/index.ts +0 -87
  154. package/components/progressindicator/index.ts +0 -77
  155. package/components/slider/index.ts +0 -149
  156. package/components/snackbar/index.ts +0 -118
  157. package/components/stepper/index.ts +0 -248
  158. package/components/textfield/index.ts +0 -188
  159. package/components/timepicker/index.ts +0 -413
  160. package/dist/components/progressindicator/index.d.ts +0 -6
  161. package/dist/foundations.css +0 -1
  162. package/dist/foundations.js +0 -1
  163. package/docs/accordion.html +0 -344
  164. package/docs/alert.html +0 -177
  165. package/docs/bottomsheet.html +0 -240
  166. package/docs/button.html +0 -290
  167. package/docs/card-awards.webp +0 -0
  168. package/docs/card-cabinet.webp +0 -0
  169. package/docs/card-city.webp +0 -0
  170. package/docs/card-fingerprint.webp +0 -0
  171. package/docs/card-holiday.webp +0 -0
  172. package/docs/card-names.webp +0 -0
  173. package/docs/card.html +0 -159
  174. package/docs/checkbox.html +0 -147
  175. package/docs/datepicker.html +0 -274
  176. package/docs/dialog.html +0 -195
  177. package/docs/divider.html +0 -139
  178. package/docs/docs.css +0 -26
  179. package/docs/docs.js +0 -139
  180. package/docs/iconbutton.html +0 -329
  181. package/docs/index.html +0 -431
  182. package/docs/list.html +0 -310
  183. package/docs/menu.html +0 -574
  184. package/docs/micl.css +0 -1
  185. package/docs/micl.js +0 -1
  186. package/docs/navigationrail.html +0 -138
  187. package/docs/progressindicator.html +0 -288
  188. package/docs/radio.html +0 -123
  189. package/docs/select.html +0 -337
  190. package/docs/shapes.css +0 -1
  191. package/docs/shapes.html +0 -159
  192. package/docs/shapes.js +0 -1
  193. package/docs/sidesheet.html +0 -149
  194. package/docs/slider.html +0 -141
  195. package/docs/snackbar.html +0 -102
  196. package/docs/stepper.html +0 -319
  197. package/docs/switch.html +0 -196
  198. package/docs/textfield.html +0 -208
  199. package/docs/themes/airblue/dark-hc.css +0 -51
  200. package/docs/themes/airblue/dark-mc.css +0 -51
  201. package/docs/themes/airblue/dark.css +0 -51
  202. package/docs/themes/airblue/light-hc.css +0 -51
  203. package/docs/themes/airblue/light-mc.css +0 -51
  204. package/docs/themes/airblue/light.css +0 -51
  205. package/docs/themes/airblue/theme.css +0 -306
  206. package/docs/themes/barnred/dark-hc.css +0 -51
  207. package/docs/themes/barnred/dark-mc.css +0 -51
  208. package/docs/themes/barnred/dark.css +0 -51
  209. package/docs/themes/barnred/light-hc.css +0 -51
  210. package/docs/themes/barnred/light-mc.css +0 -51
  211. package/docs/themes/barnred/light.css +0 -51
  212. package/docs/themes/barnred/theme.css +0 -306
  213. package/docs/themes/citrine/dark-hc.css +0 -51
  214. package/docs/themes/citrine/dark-mc.css +0 -51
  215. package/docs/themes/citrine/dark.css +0 -51
  216. package/docs/themes/citrine/light-hc.css +0 -51
  217. package/docs/themes/citrine/light-mc.css +0 -51
  218. package/docs/themes/citrine/light.css +0 -51
  219. package/docs/themes/citrine/theme.css +0 -306
  220. package/docs/themes/gray/dark-hc.css +0 -51
  221. package/docs/themes/gray/dark-mc.css +0 -51
  222. package/docs/themes/gray/dark.css +0 -51
  223. package/docs/themes/gray/light-hc.css +0 -51
  224. package/docs/themes/gray/light-mc.css +0 -51
  225. package/docs/themes/gray/light.css +0 -51
  226. package/docs/themes/gray/theme.css +0 -306
  227. package/docs/themes/greenery/dark-hc.css +0 -51
  228. package/docs/themes/greenery/dark-mc.css +0 -51
  229. package/docs/themes/greenery/dark.css +0 -51
  230. package/docs/themes/greenery/light-hc.css +0 -51
  231. package/docs/themes/greenery/light-mc.css +0 -51
  232. package/docs/themes/greenery/light.css +0 -51
  233. package/docs/themes/greenery/theme.css +0 -306
  234. package/docs/themes/hermana/dark-hc.css +0 -51
  235. package/docs/themes/hermana/dark-mc.css +0 -51
  236. package/docs/themes/hermana/dark.css +0 -51
  237. package/docs/themes/hermana/light-hc.css +0 -51
  238. package/docs/themes/hermana/light-mc.css +0 -51
  239. package/docs/themes/hermana/light.css +0 -51
  240. package/docs/themes/hermana/theme.css +0 -306
  241. package/docs/themes/illuminating/dark-hc.css +0 -51
  242. package/docs/themes/illuminating/dark-mc.css +0 -51
  243. package/docs/themes/illuminating/dark.css +0 -51
  244. package/docs/themes/illuminating/light-hc.css +0 -51
  245. package/docs/themes/illuminating/light-mc.css +0 -51
  246. package/docs/themes/illuminating/light.css +0 -51
  247. package/docs/themes/illuminating/theme.css +0 -306
  248. package/docs/themes/magenta/dark-hc.css +0 -51
  249. package/docs/themes/magenta/dark-mc.css +0 -51
  250. package/docs/themes/magenta/dark.css +0 -51
  251. package/docs/themes/magenta/light-hc.css +0 -51
  252. package/docs/themes/magenta/light-mc.css +0 -51
  253. package/docs/themes/magenta/light.css +0 -51
  254. package/docs/themes/magenta/theme.css +0 -306
  255. package/docs/themes/mocha/dark-hc.css +0 -51
  256. package/docs/themes/mocha/dark-mc.css +0 -51
  257. package/docs/themes/mocha/dark.css +0 -51
  258. package/docs/themes/mocha/light-hc.css +0 -51
  259. package/docs/themes/mocha/light-mc.css +0 -51
  260. package/docs/themes/mocha/light.css +0 -51
  261. package/docs/themes/mocha/theme.css +0 -306
  262. package/docs/themes/olivegreen/dark-hc.css +0 -51
  263. package/docs/themes/olivegreen/dark-mc.css +0 -51
  264. package/docs/themes/olivegreen/dark.css +0 -51
  265. package/docs/themes/olivegreen/light-hc.css +0 -51
  266. package/docs/themes/olivegreen/light-mc.css +0 -51
  267. package/docs/themes/olivegreen/light.css +0 -51
  268. package/docs/themes/olivegreen/theme.css +0 -306
  269. package/docs/themes/peri/dark-hc.css +0 -51
  270. package/docs/themes/peri/dark-mc.css +0 -51
  271. package/docs/themes/peri/dark.css +0 -51
  272. package/docs/themes/peri/light-hc.css +0 -51
  273. package/docs/themes/peri/light-mc.css +0 -51
  274. package/docs/themes/peri/light.css +0 -51
  275. package/docs/themes/peri/theme.css +0 -306
  276. package/docs/timepicker.html +0 -160
  277. package/foundations/form/index.ts +0 -174
  278. package/foundations/layout/README.md +0 -127
  279. package/intl.d.ts +0 -9
  280. package/micl.ts +0 -221
  281. package/styles/README.md +0 -196
  282. package/tools/shapes/generate.mjs +0 -828
  283. package/tsconfig.json +0 -116
  284. package/webpack.config.js +0 -104
package/docs/stepper.html DELETED
@@ -1,319 +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 Steppers">
7
- <title>MICL Steppers</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=content_copy,dark_mode,home&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
- h2, p {
17
- color: var(--md-sys-color-on-surface);
18
- }
19
- .docs-icon {
20
- inline-size: 32px;
21
- block-size: 32px;
22
- margin: var(--md-comp-card-padding-inline);
23
- border-radius: 16px;
24
- background-color: var(--md-sys-color-primary);
25
- color: var(--md-sys-color-on-primary);
26
- font-size: 16px;
27
- line-height: 32px;
28
- text-align: center;
29
- }
30
- </style>
31
- </head>
32
- <body class="micl-window light">
33
- <main class="micl-body micl-body--stacked-to-large">
34
- <section class="micl-pane">
35
- <header class="micl-appbar">
36
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
37
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
38
- </a>
39
- <div class="micl-appbar__headline micl-appbar__headline--center">
40
- <h1>Steppers</h1>
41
- <p class="micl-appbar__subtitle">Showcasing MICL steppers</p>
42
- </div>
43
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
44
- </header>
45
-
46
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
47
- <div class="micl-pane__column">
48
- <div class="micl-card-elevated">
49
- <div class="docs-icon" aria-hidden="true">A</div>
50
- <div class="micl-card__headline-s">
51
- <h2>Basic stepper with three steps</h2>
52
- </div>
53
- <div class="micl-card__content">
54
- <div class="micl-stepper" role="tablist" aria-label="My stepper">
55
- <div class="micl-stepper__steps" tabindex="-1">
56
- <div class="micl-stepper__step" role="tabpanel" aria-current="step">
57
- <h2>First step</h2>
58
- <p class="md-sys-typescale-body-small">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>
59
- </div>
60
- <div class="micl-stepper__step" role="tabpanel">
61
- <h2>Second step</h2>
62
- <p class="md-sys-typescale-body-medium">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>
63
- </div>
64
- <div class="micl-stepper__step" role="tabpanel">
65
- <h2>Last step</h2>
66
- <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
67
- </div>
68
- </div>
69
- <div class="micl-stepper__actions">
70
- <div>
71
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
72
- </div>
73
- <div>
74
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
75
- </div>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
- <div class="micl-card-outlined">
81
- <div class="docs-icon" aria-hidden="true">C</div>
82
- <div class="micl-card__headline-s">
83
- <h2>Stepper with progress dots</h2>
84
- </div>
85
- <div class="micl-card__content">
86
- <div class="micl-stepper" role="tablist" aria-label="My stepper">
87
- <div class="micl-stepper__steps" tabindex="-1">
88
- <div class="micl-stepper__step" role="tabpanel" aria-current="step">
89
- <h2>First step</h2>
90
- <p class="md-sys-typescale-body-small">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>
91
- </div>
92
- <div class="micl-stepper__step" role="tabpanel">
93
- <h2>Second step</h2>
94
- <p class="md-sys-typescale-body-medium">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>
95
- </div>
96
- <div class="micl-stepper__step" role="tabpanel">
97
- <h2>Last step</h2>
98
- <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
99
- </div>
100
- </div>
101
- <div class="micl-stepper__actions">
102
- <div>
103
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
104
- </div>
105
- <div class="micl-stepper__progress-dots"></div>
106
- <div>
107
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
108
- </div>
109
- </div>
110
- </div>
111
- </div>
112
- </div>
113
- <div class="micl-card-filled">
114
- <div class="docs-icon" aria-hidden="true">F</div>
115
- <div class="micl-card__headline-s">
116
- <h2>Non-linear stepper</h2>
117
- </div>
118
- <div class="micl-card__content">
119
- <div class="micl-stepper micl-stepper--nonlinear" role="tablist" aria-label="My stepper">
120
- <div class="micl-stepper__header" style="--md-sys-stepper-counter-style:upper-alpha">
121
- <button type="button" role="tab" id="step1label" class="micl-button-text-xs" aria-controls="step4" aria-selected="true">
122
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
123
- First step
124
- </button>
125
- <button type="button" role="tab" id="step2label" class="micl-button-text-xs" aria-controls="step5">
126
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
127
- Second step
128
- </button>
129
- <button type="button" role="tab" id="step3label" class="micl-button-text-xs" aria-controls="step6">
130
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
131
- Last step
132
- </button>
133
- </div>
134
- <div class="micl-stepper__steps" tabindex="-1">
135
- <div id="step4" class="micl-stepper__step" role="tabpanel" aria-labelledby="step1label" aria-current="step">
136
- <p class="md-sys-typescale-body-small">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>
137
- </div>
138
- <div id="step5" class="micl-stepper__step" role="tabpanel" aria-labelledby="step2label">
139
- <p class="md-sys-typescale-body-medium">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>
140
- </div>
141
- <div id="step6" class="micl-stepper__step" role="tabpanel" aria-labelledby="step3label">
142
- <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
143
- </div>
144
- </div>
145
- <div class="micl-stepper__actions">
146
- <div>
147
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
148
- </div>
149
- <div>
150
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
151
- </div>
152
- </div>
153
- </div>
154
- </div>
155
- </div>
156
- </div>
157
- <div class="micl-pane__column">
158
- <div class="micl-card-filled">
159
- <div class="docs-icon" aria-hidden="true">B</div>
160
- <div class="micl-card__headline-s">
161
- <h2>Stepper with progress counter</h2>
162
- </div>
163
- <div class="micl-card__content">
164
- <div class="micl-stepper" role="tablist" aria-label="My stepper">
165
- <div class="micl-stepper__steps" tabindex="-1">
166
- <div class="micl-stepper__step" role="tabpanel">
167
- <h2>First step</h2>
168
- <p class="md-sys-typescale-body-small">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>
169
- </div>
170
- <div class="micl-stepper__step" role="tabpanel" aria-current="step">
171
- <h2>Second step</h2>
172
- <p class="md-sys-typescale-body-medium">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>
173
- </div>
174
- <div class="micl-stepper__step" role="tabpanel">
175
- <h2>Last step</h2>
176
- <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
177
- </div>
178
- </div>
179
- <div class="micl-stepper__actions">
180
- <div>
181
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
182
- </div>
183
- <div class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">
184
- <span class="micl-stepper__progress-current"></span>
185
- <span> of </span>
186
- <span class="micl-stepper__progress-total"></span>
187
- </div>
188
- <div>
189
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
- </div>
195
- <div class="micl-card-elevated">
196
- <div class="docs-icon" aria-hidden="true">D</div>
197
- <div class="micl-card__headline-s">
198
- <h2>Stepper with header</h2>
199
- </div>
200
- <div class="micl-card__content">
201
- <div class="micl-stepper" role="tablist" aria-label="My stepper">
202
- <div class="micl-stepper__header">
203
- <button type="button" role="tab" id="step4label" class="micl-button-text-xs" aria-controls="step1" aria-selected="true">
204
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
205
- First step
206
- </button>
207
- <button type="button" role="tab" id="step5label" class="micl-button-text-xs" aria-controls="step2">
208
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
209
- Second step
210
- </button>
211
- <button type="button" role="tab" id="step6label" class="micl-button-text-xs" aria-controls="step3">
212
- <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
213
- Last step
214
- </button>
215
- </div>
216
- <div class="micl-stepper__steps" tabindex="-1">
217
- <div id="step1" class="micl-stepper__step" role="tabpanel" aria-labelledby="step4label" aria-current="step">
218
- <p class="md-sys-typescale-body-small">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>
219
- </div>
220
- <div id="step2" class="micl-stepper__step" role="tabpanel" aria-labelledby="step5label">
221
- <p class="md-sys-typescale-body-medium">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>
222
- </div>
223
- <div id="step3" class="micl-stepper__step" role="tabpanel" aria-labelledby="step6label">
224
- <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
225
- </div>
226
- </div>
227
- <div class="micl-stepper__actions">
228
- <div>
229
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
230
- </div>
231
- <div>
232
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
233
- </div>
234
- </div>
235
- </div>
236
- </div>
237
- </div>
238
- <div class="micl-card-outlined">
239
- <div class="docs-icon" aria-hidden="true">G</div>
240
- <div class="micl-card__headline-s">
241
- <h2>Stepper with validation</h2>
242
- </div>
243
- <div class="micl-card__content">
244
- <form class="micl-stepper" role="tablist" aria-label="My stepper">
245
- <div class="micl-stepper__steps" tabindex="-1">
246
- <fieldset class="micl-stepper__step" style="row-gap:16px" role="tabpanel" aria-current="step">
247
- <div class="micl-textfield-outlined">
248
- <label for="mytextfield1">Username</label>
249
- <input type="text" id="mytextfield1" name="mytext" required maxlength="10">
250
- </div>
251
- <div class="micl-textfield-outlined">
252
- <label for="mytextfield2">Password</label>
253
- <input type="password" id="mytextfield2" name="mypassword" pattern="\d{4,4}" required>
254
- <span class="micl-textfield__supporting-text">A password must consist of four digits</span>
255
- </div>
256
- <div class="micl-flex--vcenter">
257
- <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1" required>
258
- <label for="mycheckbox1" class="md-sys-typescale-body-medium">I agree to the terms and conditions</label>
259
- </div>
260
- </fieldset>
261
- <fieldset class="micl-stepper__step" role="tabpanel">
262
- <p class="md-sys-typescale-body-medium">Congratulations!</p>
263
- </fieldset>
264
- </div>
265
- <div class="micl-stepper__actions">
266
- <div>
267
- <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
268
- </div>
269
- <div>
270
- <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
271
- </div>
272
- </div>
273
- </form>
274
- </div>
275
- </div>
276
- </div>
277
- </div>
278
- </section>
279
- <section class="micl-pane" style="flex-shrink:0.5">
280
- <div class="micl-card-filled" style="margin-top:8px">
281
- <div class="micl-card__headline-s">
282
- <h2>Code example</h2>
283
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
284
- </div>
285
- <div class="micl-card__content docs-code">
286
- <pre tabindex="-1"><code>&lt;div class="micl-stepper" role="tablist" aria-label="My stepper"&gt;
287
- &lt;div class="micl-stepper__steps"&gt;
288
- &lt;div class="micl-stepper__step" role="tabpanel" aria-current="step"&gt;
289
- &lt;h2&gt;First step&lt;/h2&gt;
290
- &lt;p&gt;Content First step&lt;/p&gt;
291
- &lt;/div&gt;
292
- &lt;div class="micl-stepper__step" role="tabpanel"&gt;
293
- &lt;h2&gt;Second step&lt;/h2&gt;
294
- &lt;p&gt;Content Second step&lt;/p&gt;
295
- &lt;/div&gt;
296
- &lt;div class="micl-stepper__step" role="tabpanel"&gt;
297
- &lt;h2&gt;Last step&lt;/h2&gt;
298
- &lt;p&gt;Content Last step&lt;/p&gt;
299
- &lt;/div&gt;
300
- &lt;/div&gt;
301
-
302
- &lt;div class="micl-stepper__actions"&gt;
303
- &lt;div&gt;
304
- &lt;button type="button" class="micl-button-text-m micl-stepper__action-back"&gt;Back&lt;/button&gt;
305
- &lt;/div&gt;
306
- &lt;div&gt;
307
- &lt;button type="button" class="micl-button-text-m micl-stepper__action-next"&gt;Next&lt;/button&gt;
308
- &lt;/div&gt;
309
- &lt;/div&gt;
310
- &lt;/div&gt;</code></pre>
311
- </div>
312
- </div>
313
- </section>
314
- </main>
315
-
316
- <script src="micl.js"></script>
317
- <script src="docs.js"></script>
318
- </body>
319
- </html>
package/docs/switch.html DELETED
@@ -1,196 +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 Switches">
7
- <title>MICL Switches</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=content_copy,dark_mode,home&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-filled.noicons .micl-card__content {
17
- display: flex;
18
- flex-direction: column;
19
- align-items: flex-end;
20
- text-align: end;
21
- }
22
- .micl-card-outlined.unselectedicon .micl-card__content {
23
- display: flex;
24
- flex-direction: column;
25
- }
26
- .micl-flex--vcenter {
27
- column-gap: 16px;
28
- }
29
- .micl-card-outlined.unselectedicon .micl-flex--vcenter {
30
- width: 100%;
31
- justify-content: space-between;
32
- }
33
- .micl-card-outlined.unselectedicon label {
34
- display: flex;
35
- flex-direction: column;
36
- flex-basis: 100%;
37
- margin-block: 12px;
38
- }
39
- .noicons input[type=checkbox].micl-switch {
40
- --md-sys-switch-selected-icon: "";
41
- --md-sys-switch-unselected-icon: "";
42
- }
43
- .selectedicon input[type=checkbox].micl-switch {
44
- --md-sys-switch-unselected-icon: "";
45
- }
46
- .unselectedicon input[type=checkbox].micl-switch {
47
- --md-sys-switch-selected-icon: "";
48
- }
49
- </style>
50
- </head>
51
- <body class="micl-window light">
52
- <main class="micl-body micl-body--stacked-to-large">
53
- <section class="micl-pane">
54
- <header class="micl-appbar">
55
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
56
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
57
- </a>
58
- <div class="micl-appbar__headline micl-appbar__headline--center">
59
- <h1>Switches</h1>
60
- <p class="micl-appbar__subtitle">Showcasing MICL switches</p>
61
- </div>
62
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
63
- </header>
64
-
65
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
66
- <div class="micl-pane__column">
67
- <div class="micl-card-elevated">
68
- <div class="micl-card__headline-s">
69
- <h2>Switches with icons</h2>
70
- </div>
71
- <div class="micl-card__content">
72
- <div class="micl-flex--vcenter">
73
- <input type="checkbox" class="micl-switch" id="myswitch1" checked value="c1" role="switch">
74
- <label for="myswitch1" class="md-sys-typescale-body-medium">First Choice</label>
75
- </div>
76
- <div class="micl-flex--vcenter">
77
- <input type="checkbox" class="micl-switch" id="myswitch2" value="c2" role="switch">
78
- <label for="myswitch2" class="md-sys-typescale-body-medium">Second Choice</label>
79
- </div>
80
- <div class="micl-flex--vcenter">
81
- <input type="checkbox" class="micl-switch" id="myswitch3" value="c3" disabled role="switch">
82
- <label for="myswitch3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
83
- </div>
84
- <div class="micl-flex--vcenter">
85
- <input type="checkbox" class="micl-switch" id="myswitch4" value="c4" checked disabled role="switch">
86
- <label for="myswitch4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
87
- </div>
88
- </div>
89
- </div>
90
- <div class="micl-card-filled noicons">
91
- <div class="micl-card__headline-s">
92
- <h2>Switches without icons</h2>
93
- </div>
94
- <div class="micl-card__content">
95
- <div class="micl-flex--vcenter">
96
- <label for="myswitch5" class="md-sys-typescale-body-medium">First Choice</label>
97
- <input type="checkbox" class="micl-switch" id="myswitch5" checked value="c1" role="switch">
98
- </div>
99
- <div class="micl-flex--vcenter">
100
- <label for="myswitch6" class="md-sys-typescale-body-medium">Second Choice</label>
101
- <input type="checkbox" class="micl-switch" id="myswitch6" value="c2" role="switch">
102
- </div>
103
- <div class="micl-flex--vcenter">
104
- <label for="myswitch7" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
105
- <input type="checkbox" class="micl-switch" id="myswitch7" value="c3" disabled role="switch">
106
- </div>
107
- <div class="micl-flex--vcenter">
108
- <label for="myswitch8" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
109
- <input type="checkbox" class="micl-switch" id="myswitch8" value="c4" checked disabled role="switch">
110
- </div>
111
- </div>
112
- </div>
113
- </div>
114
- <div class="micl-pane__column">
115
- <div class="micl-card-outlined selectedicon">
116
- <div class="micl-card__headline-s">
117
- <h2>Switches with selected icon</h2>
118
- </div>
119
- <div class="micl-card__content">
120
- <div class="micl-flex--vcenter">
121
- <input type="checkbox" class="micl-switch" id="myswitch9" checked value="c1" role="switch">
122
- <label for="myswitch9" class="md-sys-typescale-body-medium">First Choice</label>
123
- </div>
124
- <div class="micl-flex--vcenter">
125
- <input type="checkbox" class="micl-switch" id="myswitch10" value="c2" role="switch">
126
- <label for="myswitch10" class="md-sys-typescale-body-medium">Second Choice</label>
127
- </div>
128
- <div class="micl-flex--vcenter">
129
- <input type="checkbox" class="micl-switch" id="myswitch11" value="c3" disabled role="switch">
130
- <label for="myswitch11" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
131
- </div>
132
- <div class="micl-flex--vcenter">
133
- <input type="checkbox" class="micl-switch" id="myswitch12" value="c4" checked disabled role="switch">
134
- <label for="myswitch12" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
135
- </div>
136
- </div>
137
- </div>
138
-
139
- <div class="micl-card-outlined unselectedicon">
140
- <div class="micl-card__headline-s">
141
- <h2>Switches with unselected icon</h2>
142
- </div>
143
- <div class="micl-card__content">
144
- <div class="micl-flex--vcenter">
145
- <label for="myswitch13">
146
- <span class="md-sys-typescale-body-large">First Choice</span>
147
- <span class="md-sys-typescale-body-small">This is the first choice</span>
148
- </label>
149
- <input type="checkbox" class="micl-switch" id="myswitch13" checked value="c1" role="switch">
150
- </div>
151
- <div class="micl-flex--vcenter">
152
- <label for="myswitch14">
153
- <span class="md-sys-typescale-body-large">Second Choice</span>
154
- <span class="md-sys-typescale-body-small">This is the second choice</span>
155
- </label>
156
- <input type="checkbox" class="micl-switch" id="myswitch14" value="c2" role="switch">
157
- </div>
158
- <div class="micl-flex--vcenter">
159
- <label for="myswitch15">
160
- <span class="md-sys-typescale-body-large">Third Choice</span>
161
- <span class="md-sys-typescale-body-small">This is the third choice</span>
162
- </label>
163
- <input type="checkbox" class="micl-switch" id="myswitch15" value="c3" disabled role="switch">
164
- </div>
165
- <div class="micl-flex--vcenter">
166
- <label for="myswitch16">
167
- <span class="md-sys-typescale-body-large">Fourth Choice</span>
168
- <span class="md-sys-typescale-body-small">This is the fourth choice</span>
169
- </label>
170
- <input type="checkbox" class="micl-switch" id="myswitch16" value="c4" checked disabled role="switch">
171
- </div>
172
- </div>
173
- </div>
174
- </div>
175
- </div>
176
- </section>
177
- <section class="micl-pane">
178
- <div class="micl-card-filled" style="margin-top:8px">
179
- <div class="micl-card__headline-s">
180
- <h2>Code example</h2>
181
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
182
- </div>
183
- <div class="micl-card__content docs-code">
184
- <pre tabindex="-1"><code>&lt;div class="micl-flex--vcenter" style="column-gap:16px"&gt;
185
- &lt;input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch"&gt;
186
- &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
187
- &lt;/div&gt;</code></pre>
188
- </div>
189
- </div>
190
- </section>
191
- </main>
192
-
193
- <script src="micl.js"></script>
194
- <script src="docs.js"></script>
195
- </body>
196
- </html>