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/card.html DELETED
@@ -1,159 +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 Cards">
7
- <title>MICL Cards</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__content:not(.docs-code) p {
17
- margin: 0;
18
- color: var(--md-sys-color-on-surface);
19
- }
20
- .docs-icon {
21
- inline-size: 32px;
22
- block-size: 32px;
23
- margin: var(--md-comp-card-padding-inline);
24
- border-radius: 16px;
25
- background-color: var(--md-sys-color-primary);
26
- color: var(--md-sys-color-on-primary);
27
- font-size: 16px;
28
- line-height: 32px;
29
- text-align: center;
30
- }
31
- </style>
32
- </head>
33
- <body class="micl-window light">
34
- <main class="micl-body micl-body--stacked-to-large">
35
- <section class="micl-pane">
36
- <header class="micl-appbar">
37
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
38
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
39
- </a>
40
- <div class="micl-appbar__headline micl-appbar__headline--center">
41
- <h1>Cards</h1>
42
- <p class="micl-appbar__subtitle">Showcasing MICL cards</p>
43
- </div>
44
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
45
- </header>
46
-
47
- <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
48
- <div class="micl-pane__column">
49
- <div role="button" class="micl-card-elevated" style="margin-top:8px" tabindex="0">
50
- <div class="docs-icon" aria-hidden="true">A</div>
51
- <div class="micl-card__headline-s">
52
- <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
53
- </div>
54
- <p class="micl-card__subhead">Dummy or placeholder text</p>
55
- <p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
56
- <div class="micl-card__content">
57
- <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>
58
- </div>
59
- </div>
60
- <div class="micl-card-filled">
61
- <div class="micl-card__headline-m">
62
- <h2>Lorem ipsum</h2>
63
- </div>
64
- <p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
65
- <div class="micl-card__content">
66
- <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>
67
- <button type="button" class="micl-button-filled-s" style="margin-block-start:16px">Action</button>
68
- </div>
69
- </div>
70
- <div role="link" class="micl-card-outlined" tabindex="0">
71
- <div class="micl-card__headline-l">
72
- <h2>Lorem</h2>
73
- </div>
74
- <div class="micl-card__content">
75
- <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. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
76
- </div>
77
- </div>
78
- </div>
79
- <div class="micl-pane__column">
80
- <details class="micl-card-elevated" style="margin-top:8px">
81
- <summary>
82
- <span class="micl-card__headline-s">
83
- <span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
84
- </span>
85
- <span class="micl-card__subhead">Dummy or placeholder text</span>
86
- <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
87
- </summary>
88
- <div class="micl-card__content" style="padding-inline:0">
89
- <p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-comp-card-padding-inline);padding-inline:var(--md-comp-card-padding-inline)">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>
90
- <hr class="micl-divider" style="--md-sys-divider-space:8px">
91
- <button type="button" class="micl-button-text-s">Share</button>
92
- </div>
93
- </details>
94
- <details class="micl-card-elevated">
95
- <summary>
96
- <img alt="holiday" class="micl-card__image" src="card-holiday.webp" aria-hidden="true">
97
- <span class="micl-card__headline-s">
98
- <span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
99
- </span>
100
- <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
101
- </summary>
102
- <div class="micl-card__content" style="padding-inline:0">
103
- <p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-comp-card-padding-inline);padding-inline:var(--md-comp-card-padding-inline)">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>
104
- <hr class="micl-divider" style="--md-sys-divider-space:8px">
105
- <button type="button" class="micl-button-text-s">Share</button>
106
- </div>
107
- </details>
108
- <details class="micl-card-outlined">
109
- <summary>
110
- <span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340" aria-hidden="true"></span>
111
- <span class="micl-card__headline-l">
112
- <span class="micl-heading">Lorem</span>
113
- </span>
114
- </summary>
115
- <div class="micl-card__content">
116
- <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. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
117
- </div>
118
- </details>
119
- <details class="micl-card-filled">
120
- <summary class="micl-card--compact">
121
- <span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340" aria-hidden="true"></span>
122
- <span class="micl-card__headline-m">
123
- <span class="micl-heading">Lorem ipsum</span>
124
- </span>
125
- <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
126
- </summary>
127
- <div class="micl-card__content">
128
- <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>
129
- </div>
130
- </details>
131
- </div>
132
- </div>
133
- </section>
134
- <section class="micl-pane micl-pane--fixed" style="width:680px">
135
- <div class="micl-card-filled" style="margin-top:8px">
136
- <div class="micl-card__headline-s">
137
- <h2>Code example</h2>
138
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
139
- </div>
140
- <div class="micl-card__content docs-code">
141
- <pre tabindex="-1"><code>&lt;div class="micl-card-elevated" tabindex="0"&gt;
142
- &lt;div class="micl-card__headline-s"&gt;
143
- &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/h2&gt;
144
- &lt;/div&gt;
145
- &lt;p class="micl-card__subhead"&gt;Dummy or placeholder text&lt;/p&gt;
146
- &lt;p class="micl-card__supporting-text"&gt;This is a text commonly used in web development.&lt;/p&gt;
147
- &lt;div class="micl-card__content"&gt;
148
- &lt;p class="md-sys-typescale-body-small"&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/p&gt;
149
- &lt;/div&gt;
150
- &lt;/div&gt;</code></pre>
151
- </div>
152
- </div>
153
- </section>
154
- </main>
155
-
156
- <script src="micl.js"></script>
157
- <script src="docs.js"></script>
158
- </body>
159
- </html>
package/docs/checkbox.html DELETED
@@ -1,147 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
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 Checkboxes">
7
- <title>MICL Checkboxes</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 .micl-card__content {
17
- display: flex;
18
- flex-direction: column;
19
- align-items: flex-end;
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>Checkboxes</h1>
32
- <p class="micl-appbar__subtitle">Showcasing MICL checkboxes</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__content">
41
- <div class="micl-flex--vcenter">
42
- <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1">
43
- <label for="mycheckbox1" class="md-sys-typescale-body-medium">First Choice</label>
44
- </div>
45
- <div class="micl-flex--vcenter">
46
- <input type="checkbox" id="mycheckbox2" class="micl-checkbox" checked value="c2">
47
- <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second Choice</label>
48
- </div>
49
- <div class="micl-flex--vcenter">
50
- <input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
51
- <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
52
- </div>
53
- <div class="micl-flex--vcenter">
54
- <input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
55
- <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
56
- </div>
57
- </div>
58
- </div>
59
- <div class="micl-card-filled">
60
- <div class="micl-card__content">
61
- <div class="micl-flex--vcenter">
62
- <label for="mycheckbox21" class="md-sys-typescale-body-medium">First Choice</label>
63
- <input type="checkbox" id="mycheckbox21" class="micl-checkbox" value="c1">
64
- </div>
65
- <div class="micl-flex--vcenter">
66
- <label for="mycheckbox22" class="md-sys-typescale-body-medium">Second Choice</label>
67
- <input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
68
- </div>
69
- <div class="micl-flex--vcenter">
70
- <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
71
- <input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
72
- </div>
73
- <div class="micl-flex--vcenter">
74
- <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
75
- <input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
- <div class="micl-pane__column">
81
- <div class="micl-card-outlined">
82
- <div class="micl-card__content">
83
- <div class="micl-flex--vcenter">
84
- <input type="checkbox" id="mycheckbox11" class="micl-checkbox micl-checkbox--error" value="c1">
85
- <label for="mycheckbox11" class="md-sys-typescale-body-medium">First Choice</label>
86
- </div>
87
- <div class="micl-flex--vcenter">
88
- <input type="checkbox" id="mycheckbox12" class="micl-checkbox micl-checkbox--error" checked value="c2">
89
- <label for="mycheckbox12" class="md-sys-typescale-body-medium">Second Choice</label>
90
- </div>
91
- <div class="micl-flex--vcenter">
92
- <input type="checkbox" id="mycheckbox13" class="micl-checkbox micl-checkbox--error" disabled value="c3">
93
- <label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
94
- </div>
95
- <div class="micl-flex--vcenter">
96
- <input type="checkbox" id="mycheckbox14" class="micl-checkbox micl-checkbox--error" disabled checked value="c4">
97
- <label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
98
- </div>
99
- </div>
100
- </div>
101
- <div class="micl-card-elevated">
102
- <div class="micl-card__content">
103
- <div class="micl-checkbox-group">
104
- <div class="micl-flex--vcenter">
105
- <input type="checkbox" id="mycheckbox30" class="micl-checkbox micl-checkbox__parent" value="c0">
106
- <label for="mycheckbox30" class="md-sys-typescale-body-medium">Choices</label>
107
- </div>
108
- <div style="padding-inline-start:16px">
109
- <div class="micl-flex--vcenter">
110
- <input type="checkbox" id="mycheckbox31" class="micl-checkbox" value="c1">
111
- <label for="mycheckbox31" class="md-sys-typescale-body-medium">First Choice</label>
112
- </div>
113
- <div class="micl-flex--vcenter">
114
- <input type="checkbox" id="mycheckbox32" class="micl-checkbox" checked value="c2">
115
- <label for="mycheckbox32" class="md-sys-typescale-body-medium">Second Choice</label>
116
- </div>
117
- <div class="micl-flex--vcenter">
118
- <input type="checkbox" id="mycheckbox33" class="micl-checkbox" value="c3">
119
- <label for="mycheckbox33" class="md-sys-typescale-body-medium">Third Choice</label>
120
- </div>
121
- </div>
122
- </div>
123
- </div>
124
- </div>
125
- </div>
126
- </div>
127
- </section>
128
- <section class="micl-pane">
129
- <div class="micl-card-filled" style="margin-top:8px">
130
- <div class="micl-card__headline-s">
131
- <h2>Code example</h2>
132
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
133
- </div>
134
- <div class="micl-card__content docs-code">
135
- <pre><code>&lt;div class="micl-flex--vcenter"&gt;
136
- &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
137
- &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
138
- &lt;/div&gt;</code></pre>
139
- </div>
140
- </div>
141
- </section>
142
- </main>
143
-
144
- <script src="micl.js"></script>
145
- <script src="docs.js"></script>
146
- </body>
147
- </html>
package/docs/datepicker.html DELETED
@@ -1,274 +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 Date Pickers">
7
- <title>MICL Date Pickers</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=arrow_drop_down,calendar_today,check,chevron_backward,chevron_forward,content_copy,dark_mode,edit,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__content {
17
- display: flex;
18
- flex-direction: column;
19
- row-gap: 8px;
20
- }
21
- p {
22
- margin-block: 24px 0px;
23
- color: var(--md-sys-color-on-surface);
24
- }
25
- </style>
26
- </head>
27
- <body class="micl-window light">
28
- <main class="micl-body micl-body--stacked-to-large">
29
- <section class="micl-pane">
30
- <header class="micl-appbar">
31
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
32
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
33
- </a>
34
- <div class="micl-appbar__headline micl-appbar__headline--center">
35
- <h1>Date Pickers</h1>
36
- <p class="micl-appbar__subtitle">Showcasing MICL date pickers</p>
37
- </div>
38
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
39
- </header>
40
-
41
- <div class="micl-pane__columns">
42
- <div class="micl-pane__column" style="gap:24px">
43
- <div class="micl-card-outlined">
44
- <div class="micl-card__content">
45
- <p class="md-sys-typescale-body-medium">Default non-MICL date input field</p>
46
- <input type="date" name="t0" style="width:fit-content" value="2025-12-01">
47
- <p class="md-sys-typescale-body-medium">MICL date textfield component without the MICL date picker component</p>
48
- <div class="micl-textfield-outlined" style="width:fit-content">
49
- <label for="mytextfield0">Select date</label>
50
- <input type="date" id="mytextfield0" value="2026-01-10">
51
- </div>
52
-
53
- <p class="md-sys-typescale-body-medium">MICL date textfield component with the MICL date picker component</p>
54
- <div class="micl-textfield-outlined" style="width:fit-content">
55
- <label for="mytextfield1">Start date</label>
56
- <input type="date" id="mytextfield1" data-datepicker="mydatepicker1" value="2025-12-02">
57
- </div>
58
- <dialog id="mydatepicker1" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle1">
59
- <form method="dialog">
60
- <div class="micl-dialog__headline">
61
- <h2 id="mytitle1">Enter dates</h2>
62
- <span class="micl-dialog__supporting-text">Select date</span>
63
- <button type="button" id="btn1" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
64
- <hr class="micl-divider">
65
- <div class="micl-datepicker__month-selector">
66
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
67
- <button type="button" class="micl-datepicker__month micl-button-text-xs">
68
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
69
- </button>
70
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
71
- </div>
72
- <div class="micl-datepicker__year-selector">
73
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
74
- <button type="button" class="micl-datepicker__year micl-button-text-xs">
75
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
76
- </button>
77
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
78
- </div>
79
- </div>
80
- <div class="micl-dialog__content">
81
- <div class="micl-datepicker__calendars"></div>
82
- <div class="micl-datepicker__years"></div>
83
- <div class="micl-datepicker__months"></div>
84
- <div class="micl-datepicker__input micl-textfield-outlined">
85
- <label for="mydate1">Date</label>
86
- <input type="text" id="mydate1">
87
- </div>
88
- </div>
89
- <div class="micl-dialog__actions">
90
- <button class="micl-button-text-s" value="">Cancel</button>
91
- <button class="micl-button-text-s" value="OK">OK</button>
92
- </div>
93
- </form>
94
- </dialog>
95
-
96
- <p class="md-sys-typescale-body-medium">MICL date textfield component with a docked MICL date picker component</p>
97
- <div class="micl-textfield-outlined" style="width:fit-content;anchor-name:--myanchor">
98
- <label for="mytextfield2">Start date</label>
99
- <input type="date" id="mytextfield2" data-datepicker="mydatepicker2" value="2025-12-02">
100
- </div>
101
- <dialog id="mydatepicker2" class="micl-dialog micl-dialog--docked micl-datepicker" style="position-anchor:--myanchor" popover closedby="closerequest">
102
- <form method="dialog">
103
- <div class="micl-dialog__headline">
104
- <span class="micl-dialog__supporting-text">Enter date</span>
105
- <div class="micl-datepicker__month-selector">
106
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
107
- <button type="button" class="micl-datepicker__month micl-button-text-xs">
108
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
109
- </button>
110
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
111
- </div>
112
- <div class="micl-datepicker__year-selector">
113
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
114
- <button type="button" class="micl-datepicker__year micl-button-text-xs">
115
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
116
- </button>
117
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
118
- </div>
119
- </div>
120
- <div class="micl-dialog__content">
121
- <div class="micl-datepicker__calendars"></div>
122
- <div class="micl-datepicker__years"></div>
123
- <div class="micl-datepicker__months"></div>
124
- </div>
125
- <div class="micl-dialog__actions">
126
- <button class="micl-button-text-s" value="">Cancel</button>
127
- <button class="micl-button-text-s" value="OK">OK</button>
128
- </div>
129
- </form>
130
- </dialog>
131
-
132
- <p class="md-sys-typescale-body-medium">MICL date textfield component with limited date range</p>
133
- <div class="micl-textfield-outlined" style="width:fit-content">
134
- <label for="mytextfield1">Start date</label>
135
- <input type="date" id="mytextfield3" min="2025-10-01" max="2026-04-30" data-datepicker="mydatepicker3" value="2025-12-02">
136
- </div>
137
- <dialog id="mydatepicker3" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle3">
138
- <form method="dialog">
139
- <div class="micl-dialog__headline">
140
- <h2 id="mytitle3">Enter dates</h2>
141
- <span class="micl-dialog__supporting-text">Select date</span>
142
- <button type="button" id="btn2" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
143
- <hr class="micl-divider">
144
- <div class="micl-datepicker__month-selector">
145
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
146
- <button type="button" class="micl-datepicker__month micl-button-text-xs">
147
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
148
- </button>
149
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
150
- </div>
151
- <div class="micl-datepicker__year-selector">
152
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
153
- <button type="button" class="micl-datepicker__year micl-button-text-xs">
154
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
155
- </button>
156
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
157
- </div>
158
- </div>
159
- <div class="micl-dialog__content">
160
- <div class="micl-datepicker__calendars"></div>
161
- <div class="micl-datepicker__years"></div>
162
- <div class="micl-datepicker__months"></div>
163
- <div class="micl-datepicker__input micl-textfield-outlined">
164
- <label for="mydate2">Date</label>
165
- <input type="text" id="mydate2">
166
- </div>
167
- </div>
168
- <div class="micl-dialog__actions">
169
- <button class="micl-button-text-s" value="">Cancel</button>
170
- <button class="micl-button-text-s" value="OK">OK</button>
171
- </div>
172
- </form>
173
- </dialog>
174
-
175
- <p class="md-sys-typescale-body-medium">Date input using a MICL button component that opens the MICL date picker</p>
176
- <div class="micl-flex--vcenter" style="column-gap:8px">
177
- <label for="mydate" class="md-sys-typescale-body-large">Start date:</label>
178
- <button type="button" id="mydate" class="micl-button-text-m" command="show-modal" commandfor="mydatepicker4" value="2026-01-23">23.01.2026</button>
179
- </div>
180
- <dialog id="mydatepicker4" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle4">
181
- <form method="dialog">
182
- <div class="micl-dialog__headline">
183
- <h2 id="mytitle4">Enter dates</h2>
184
- <span class="micl-dialog__supporting-text">Select date</span>
185
- <button type="button" id="btn4" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
186
- <hr class="micl-divider">
187
- <div class="micl-datepicker__month-selector">
188
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
189
- <button type="button" class="micl-datepicker__month micl-button-text-xs">
190
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
191
- </button>
192
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
193
- </div>
194
- <div class="micl-datepicker__year-selector">
195
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
196
- <button type="button" class="micl-datepicker__year micl-button-text-xs">
197
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
198
- </button>
199
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
200
- </div>
201
- </div>
202
- <div class="micl-dialog__content">
203
- <div class="micl-datepicker__calendars"></div>
204
- <div class="micl-datepicker__years"></div>
205
- <div class="micl-datepicker__months"></div>
206
- <div class="micl-datepicker__input micl-textfield-outlined">
207
- <label for="mydate3">Date</label>
208
- <input type="text" id="mydate3">
209
- </div>
210
- </div>
211
- <div class="micl-dialog__actions">
212
- <button class="micl-button-text-s" value="">Cancel</button>
213
- <button class="micl-button-text-s" value="OK">OK</button>
214
- </div>
215
- </form>
216
- </dialog>
217
- </div>
218
- </div>
219
- </div>
220
- </div>
221
- </section>
222
- <section class="micl-pane">
223
- <div class="micl-card-filled" style="margin-top:8px">
224
- <div class="micl-card__headline-s">
225
- <h2>Code example</h2>
226
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
227
- </div>
228
- <div class="micl-card__content docs-code">
229
- <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
230
- &lt;form method="dialog"&gt;
231
- &lt;div class="micl-dialog__headline"&gt;
232
- &lt;h2 id="id1"&gt;Enter dates&lt;/h2&gt;
233
- &lt;span class="micl-dialog__supporting-text"&gt;Select date&lt;/span&gt;
234
- &lt;button type="button" id="btn" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"&gt;&lt;/button&gt;
235
- &lt;hr class="micl-divider"&gt;
236
- &lt;div class="micl-datepicker__month-selector"&gt;
237
- &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month"&gt;chevron_backward&lt;/button&gt;
238
- &lt;button type="button" class="micl-datepicker__month micl-button-text-xs"&gt;
239
- &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
240
- &lt;/button&gt;
241
- &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month"&gt;chevron_forward&lt;/button&gt;
242
- &lt;/div&gt;
243
- &lt;div class="micl-datepicker__year-selector"&gt;
244
- &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year"&gt;chevron_backward&lt;/button&gt;
245
- &lt;button type="button" class="micl-datepicker__year micl-button-text-xs"&gt;
246
- &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
247
- &lt;/button&gt;
248
- &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year"&gt;chevron_forward&lt;/button&gt;
249
- &lt;/div&gt;
250
- &lt;/div&gt;
251
- &lt;div class="micl-dialog__content"&gt;
252
- &lt;div class="micl-datepicker__calendars"&gt;&lt;/div&gt;
253
- &lt;div class="micl-datepicker__years"&gt;&lt;/div&gt;
254
- &lt;div class="micl-datepicker__months"&gt;&lt;/div&gt;
255
- &lt;div class="micl-datepicker__input micl-textfield-outlined"&gt;
256
- &lt;label for="mydate1"&gt;Date&lt;/label&gt;
257
- &lt;input type="text" id="mydate1"&gt;
258
- &lt;/div&gt;
259
- &lt;/div&gt;
260
- &lt;div class="micl-dialog__actions"&gt;
261
- &lt;button class="micl-button-text-s" value=""&gt;Cancel&lt;/button&gt;
262
- &lt;button class="micl-button-text-s" value="OK"&gt;OK&lt;/button&gt;
263
- &lt;/div&gt;
264
- &lt;/form&gt;
265
- &lt;/dialog&gt;</code></pre>
266
- </div>
267
- </div>
268
- </section>
269
- </main>
270
-
271
- <script src="micl.js"></script>
272
- <script src="docs.js"></script>
273
- </body>
274
- </html>