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/menu.html DELETED
@@ -1,574 +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 Menus">
7
- <title>MICL Menus</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_right,check,content_copy,content_cut,content_paste,dark_mode,delete,file_open,group,help,home,keyboard_command_key,newspaper,note_add,open_in_new,redo,settings,undo&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-list-item-two:has(.micl-checkbox) .micl-list-item__icon {
17
- visibility: hidden;
18
- }
19
- .micl-list-item-two:has(.micl-checkbox:checked) .micl-list-item__icon {
20
- visibility: visible;
21
- }
22
- </style>
23
- </head>
24
- <body class="micl-window light">
25
- <main class="micl-body">
26
- <section class="micl-pane">
27
- <header class="micl-appbar">
28
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
29
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
30
- </a>
31
- <div class="micl-appbar__headline micl-appbar__headline--center">
32
- <h1>Menus</h1>
33
- <p class="micl-appbar__subtitle">Showcasing MICL menus</p>
34
- </div>
35
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
36
- </header>
37
-
38
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
39
- <div class="micl-pane__column">
40
- <div class="micl-card-filled">
41
- <div class="micl-card__headline-s">
42
- <h2>Showcase</h2>
43
- </div>
44
- <p class="micl-card__supporting-text">Click a button to open one of the MICL menus.</p>
45
- <div class="micl-card__content docs-buttons">
46
- <div style="position:relative">
47
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu1">Single-item menu</button>
48
- <nav id="mymenu1" class="micl-menu" popover>
49
- <ul class="micl-list">
50
- <li class="micl-list-item-one" tabindex="0">
51
- <span class="micl-list-item__text">
52
- <span class="micl-list-item__headline">Only one item</span>
53
- </span>
54
- </li>
55
- </ul>
56
- </nav>
57
- </div>
58
-
59
- <div style="position:relative">
60
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu2">Basic Menu</button>
61
- <nav id="mymenu2" class="micl-menu" popover>
62
- <ul class="micl-list">
63
- <li class="micl-list-item-one" tabindex="0">
64
- <span class="micl-list-item__text">
65
- <span class="micl-list-item__headline">Home</span>
66
- </span>
67
- </li>
68
- <li class="micl-list-item-one">
69
- <span class="micl-list-item__text">
70
- <span class="micl-list-item__headline">About</span>
71
- </span>
72
- </li>
73
- <li class="micl-list-item-one micl-list-item--disabled">
74
- <span class="micl-list-item__text">
75
- <span class="micl-list-item__headline">Contact</span>
76
- </span>
77
- </li>
78
- </ul>
79
- </nav>
80
- </div>
81
-
82
- <div style="position:relative">
83
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu3">Menu with leading icons + divider</button>
84
- <nav id="mymenu3" class="micl-menu" popover>
85
- <ul class="micl-list">
86
- <li class="micl-list-item-one" tabindex="0">
87
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
88
- <span class="micl-list-item__text">
89
- <span class="micl-list-item__headline">Undo</span>
90
- </span>
91
- </li>
92
- <li class="micl-list-item-one micl-list-item--disabled">
93
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">redo</span>
94
- <span class="micl-list-item__text">
95
- <span class="micl-list-item__headline">Redo</span>
96
- </span>
97
- </li>
98
- <li role="separator" class="micl-divider-inset"></li>
99
- <li class="micl-list-item-one">
100
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
101
- <span class="micl-list-item__text">
102
- <span class="micl-list-item__headline">Cut</span>
103
- </span>
104
- </li>
105
- <li class="micl-list-item-one">
106
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
107
- <span class="micl-list-item__text">
108
- <span class="micl-list-item__headline">Copy</span>
109
- </span>
110
- </li>
111
- <li class="micl-list-item-one">
112
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
113
- <span class="micl-list-item__text">
114
- <span class="micl-list-item__headline">Paste</span>
115
- </span>
116
- </li>
117
- </ul>
118
- </nav>
119
- </div>
120
-
121
- <div style="position:relative">
122
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu4">Grouped menu with trailing icons</button>
123
- <nav id="mymenu4" class="micl-menu" popover>
124
- <ul class="micl-list">
125
- <li class="micl-list-item-one" tabindex="0">
126
- <span class="micl-list-item__text">
127
- <span class="micl-list-item__headline">Undo</span>
128
- </span>
129
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
130
- </li>
131
- <li class="micl-list-item-one micl-list-item--disabled">
132
- <span class="micl-list-item__text">
133
- <span class="micl-list-item__headline">Redo</span>
134
- </span>
135
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">redo</span>
136
- </li>
137
- </ul>
138
- <ul class="micl-list">
139
- <li class="micl-list-item-one" tabindex="0">
140
- <span class="micl-list-item__text">
141
- <span class="micl-list-item__headline">Cut</span>
142
- </span>
143
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
144
- </li>
145
- <li class="micl-list-item-one">
146
- <span class="micl-list-item__text">
147
- <span class="micl-list-item__headline">Copy</span>
148
- </span>
149
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
150
- </li>
151
- <li class="micl-list-item-one">
152
- <span class="micl-list-item__text">
153
- <span class="micl-list-item__headline">Paste</span>
154
- </span>
155
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
156
- </li>
157
- </ul>
158
- </nav>
159
- </div>
160
-
161
- <div style="position:relative">
162
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu5">Menu with supporting text</button>
163
- <nav id="mymenu5" class="micl-menu" popover>
164
- <ul class="micl-list">
165
- <li class="micl-list-item-two" tabindex="0">
166
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">group</span>
167
- <span class="micl-list-item__text">
168
- <span class="micl-list-item__headline">Number of employees</span>
169
- <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
170
- </span>
171
- </li>
172
- <li class="micl-list-item-two">
173
- <span class="micl-list-item__icon" aria-hidden="true"></span>
174
- <span class="micl-list-item__text">
175
- <span class="micl-list-item__headline">Company cars</span>
176
- <span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
177
- </span>
178
- </li>
179
- <li class="micl-list-item-two">
180
- <a href="https://www.nytimes.com" target="_blank">
181
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
182
- <span class="micl-list-item__text">
183
- <span class="micl-list-item__headline">The New York Times</span>
184
- <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
185
- </span>
186
- </a>
187
- </li>
188
- <li class="micl-list-item-two">
189
- <label>
190
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">check</span>
191
- <span class="micl-list-item__text">
192
- <span class="micl-list-item__headline">Select or Unselect</span>
193
- <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
194
- </span>
195
- <input type="checkbox" id="cb5" class="micl-checkbox" style="display:none" value="c5" checked>
196
- </label>
197
- </li>
198
- </ul>
199
- </nav>
200
- </div>
201
-
202
- <div style="position:relative">
203
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu6">Complex menu</button>
204
- <nav id="mymenu6" class="micl-menu" popover>
205
- <ul class="micl-list">
206
- <li class="micl-list-item-one" tabindex="0">
207
- <span class="micl-list-item__text">Open in new window</span>
208
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">open_in_new</span>
209
- </li>
210
- </ul>
211
- <ul class="micl-list">
212
- <li class="micl-list-item-two" tabindex="0">
213
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">home</span>
214
- <span class="micl-list-item__text">
215
- <span class="micl-list-item__headline">Home</span>
216
- <span class="micl-list-item__supporting-text">Click here to go home</span>
217
- </span>
218
- </li>
219
- <li class="micl-list-item-two">
220
- <label>
221
- <span class="micl-list-item__icon"></span>
222
- <span class="micl-list-item__text">
223
- <span class="micl-list-item__headline">Person</span>
224
- <span class="micl-list-item__supporting-text">Are you an administrator?</span>
225
- </span>
226
- <input type="checkbox" id="cb6" class="micl-checkbox" value="c6">
227
- </label>
228
- </li>
229
- <li class="micl-list-item-two">
230
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">settings</span>
231
- <span class="micl-list-item__text">
232
- <span class="micl-list-item__headline">About</span>
233
- <span class="micl-list-item__supporting-text">Change everything in the system</span>
234
- </span>
235
- </li>
236
- <li role="separator" class="micl-divider-inset"></li>
237
- <li class="micl-list-item-two">
238
- <span class="micl-list-item__text">
239
- <span class="micl-list-item__headline">Contact</span>
240
- <span class="micl-list-item__supporting-text">Call me!</span>
241
- </span>
242
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">keyboard_command_key</span>
243
- </li>
244
- </ul>
245
- <ul class="micl-list">
246
- <li class="micl-list-item-two" tabindex="0">
247
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">group</span>
248
- <span class="micl-list-item__text">
249
- <span class="micl-list-item__headline">Number of employees</span>
250
- <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
251
- </span>
252
- <span class="micl-list-item__trailing-text">381</span>
253
- </li>
254
- <li class="micl-list-item-two">
255
- <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>
256
- <span class="micl-list-item__text">
257
- <span class="micl-list-item__headline">Company cars</span>
258
- <span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
259
- </span>
260
- </li>
261
- <li class="micl-list-item-two">
262
- <label>
263
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">check</span>
264
- <span class="micl-list-item__text">
265
- <span class="micl-list-item__headline">Select or Unselect</span>
266
- <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
267
- </span>
268
- <input type="checkbox" id="cb7" class="micl-checkbox" style="display:none" value="c7" checked>
269
- </label>
270
- </li>
271
- </ul>
272
- </nav>
273
- </div>
274
-
275
- <div style="position:relative">
276
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu7">Menu with sub-menus</button>
277
- <nav id="mymenu7" class="micl-menu" popover>
278
- <ul class="micl-list">
279
- <li class="micl-list-item-one" tabindex="0">
280
- <button popovertarget="mymenu7-1">
281
- <span class="micl-list-item__text">
282
- <span class="micl-list-item__headline">Europe</span>
283
- </span>
284
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
285
- </button>
286
- <nav id="mymenu7-1" class="micl-menu" popover>
287
- <ul class="micl-list">
288
- <li class="micl-list-item-one" tabindex="0">
289
- <span class="micl-list-item__text">
290
- <span class="micl-list-item__headline">Norway</span>
291
- </span>
292
- </li>
293
- <li class="micl-list-item-one">
294
- <span class="micl-list-item__text">
295
- <span class="micl-list-item__headline">Sweden</span>
296
- </span>
297
- </li>
298
- <li class="micl-list-item-one">
299
- <span class="micl-list-item__text">
300
- <span class="micl-list-item__headline">France</span>
301
- </span>
302
- </li>
303
- <li class="micl-list-item-one">
304
- <span class="micl-list-item__text">
305
- <span class="micl-list-item__headline">Italy</span>
306
- </span>
307
- </li>
308
- <li class="micl-list-item-one">
309
- <span class="micl-list-item__text">
310
- <span class="micl-list-item__headline">Slovenia</span>
311
- </span>
312
- </li>
313
- </ul>
314
- </nav>
315
- </li>
316
- <li class="micl-list-item-one">
317
- <button popovertarget="mymenu7-2">
318
- <span class="micl-list-item__text">
319
- <span class="micl-list-item__headline">Africa</span>
320
- </span>
321
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
322
- </button>
323
- <nav id="mymenu7-2" class="micl-menu" popover>
324
- <ul class="micl-list">
325
- <li class="micl-list-item-one" tabindex="0">
326
- <span class="micl-list-item__text">
327
- <span class="micl-list-item__headline">Egypt</span>
328
- </span>
329
- </li>
330
- <li class="micl-list-item-one">
331
- <span class="micl-list-item__text">
332
- <span class="micl-list-item__headline">Cameroon</span>
333
- </span>
334
- </li>
335
- <li class="micl-list-item-one">
336
- <span class="micl-list-item__text">
337
- <span class="micl-list-item__headline">Botswana</span>
338
- </span>
339
- </li>
340
- <li class="micl-list-item-one">
341
- <span class="micl-list-item__text">
342
- <span class="micl-list-item__headline">Ghana</span>
343
- </span>
344
- </li>
345
- <li class="micl-list-item-one">
346
- <span class="micl-list-item__text">
347
- <span class="micl-list-item__headline">Niger</span>
348
- </span>
349
- </li>
350
- </ul>
351
- </nav>
352
- </li>
353
- <li class="micl-list-item-one">
354
- <button popovertarget="mymenu7-3">
355
- <span class="micl-list-item__text">
356
- <span class="micl-list-item__headline">Asia</span>
357
- </span>
358
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
359
- </button>
360
- <nav id="mymenu7-3" class="micl-menu" popover>
361
- <ul class="micl-list">
362
- <li class="micl-list-item-one" tabindex="0">
363
- <span class="micl-list-item__text">
364
- <span class="micl-list-item__headline">Bhutan</span>
365
- </span>
366
- </li>
367
- <li class="micl-list-item-one">
368
- <span class="micl-list-item__text">
369
- <span class="micl-list-item__headline">India</span>
370
- </span>
371
- </li>
372
- <li class="micl-list-item-one">
373
- <span class="micl-list-item__text">
374
- <span class="micl-list-item__headline">Jordan</span>
375
- </span>
376
- </li>
377
- <li class="micl-list-item-one">
378
- <span class="micl-list-item__text">
379
- <span class="micl-list-item__headline">Vietnam</span>
380
- </span>
381
- </li>
382
- <li class="micl-list-item-one">
383
- <span class="micl-list-item__text">
384
- <span class="micl-list-item__headline">Mongolia</span>
385
- </span>
386
- </li>
387
- </ul>
388
- </nav>
389
- </li>
390
- <li class="micl-list-item-one">
391
- <button popovertarget="mymenu7-4">
392
- <span class="micl-list-item__text">
393
- <span class="micl-list-item__headline">America</span>
394
- </span>
395
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
396
- </button>
397
- <nav id="mymenu7-4" class="micl-menu" popover>
398
- <ul class="micl-list">
399
- <li class="micl-list-item-one" tabindex="0">
400
- <button popovertarget="mymenu7-4-1">
401
- <span class="micl-list-item__text">
402
- <span class="micl-list-item__headline">North America</span>
403
- </span>
404
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
405
- </button>
406
- <nav id="mymenu7-4-1" class="micl-menu" popover>
407
- <ul class="micl-list">
408
- <li class="micl-list-item-one" tabindex="0">
409
- <span class="micl-list-item__text">
410
- <span class="micl-list-item__headline">Mexico</span>
411
- </span>
412
- </li>
413
- <li class="micl-list-item-one">
414
- <span class="micl-list-item__text">
415
- <span class="micl-list-item__headline">Canada</span>
416
- </span>
417
- </li>
418
- <li class="micl-list-item-one">
419
- <span class="micl-list-item__text">
420
- <span class="micl-list-item__headline">USA</span>
421
- </span>
422
- </li>
423
- </ul>
424
- </nav>
425
- </li>
426
- <li class="micl-list-item-one">
427
- <button popovertarget="mymenu7-4-2">
428
- <span class="micl-list-item__text">
429
- <span class="micl-list-item__headline">South America</span>
430
- </span>
431
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
432
- </button>
433
- <nav id="mymenu7-4-2" class="micl-menu" popover>
434
- <ul class="micl-list">
435
- <li class="micl-list-item-one" tabindex="0">
436
- <span class="micl-list-item__text">
437
- <span class="micl-list-item__headline">Brazil</span>
438
- </span>
439
- </li>
440
- <li class="micl-list-item-one">
441
- <span class="micl-list-item__text">
442
- <span class="micl-list-item__headline">Peru</span>
443
- </span>
444
- </li>
445
- </ul>
446
- </nav>
447
- </li>
448
- </ul>
449
- </nav>
450
- </li>
451
- </ul>
452
- </nav>
453
- </div>
454
-
455
- <div style="position:relative">
456
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu8">A vibrant menu</button>
457
- <nav id="mymenu8" class="micl-menu micl-menu--vibrant" popover>
458
- <ul class="micl-list">
459
- <li class="micl-list-item-one" tabindex="0">
460
- <span class="micl-list-item__text">Open in new window</span>
461
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">open_in_new</span>
462
- </li>
463
- </ul>
464
- <ul class="micl-list">
465
- <li class="micl-list-item-one" tabindex="0">
466
- <span class="micl-list-item__text">Revert</span>
467
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">undo</span>
468
- </li>
469
- <li class="micl-list-item-one">
470
- <span class="micl-list-item__text">Delete</span>
471
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">delete</span>
472
- </li>
473
- <li class="micl-list-item-one">
474
- <span class="micl-list-item__text">Settings</span>
475
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">settings</span>
476
- </li>
477
- <li class="micl-list-item-one">
478
- <label>
479
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">dark_mode</span>
480
- <span class="micl-list-item__text">
481
- <span class="micl-list-item__headline">Dark mode</span>
482
- </span>
483
- <input type="checkbox" id="cb8" class="micl-checkbox" value="dark" checked>
484
- </label>
485
- </li>
486
- <li class="micl-list-item-one">
487
- <span class="micl-list-item__text">Help & feedback</span>
488
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">help</span>
489
- </li>
490
- </ul>
491
- </nav>
492
- </div>
493
-
494
- <div style="position:relative">
495
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu9">Menu with sections</button>
496
- <nav id="mymenu9" class="micl-menu" popover>
497
- <ul class="micl-list">
498
- <li role="separator" class="micl-menu__section">Files</li>
499
- <li class="micl-list-item-one" tabindex="0">
500
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">note_add</span>
501
- <span class="micl-list-item__text">
502
- <span class="micl-list-item__headline">New</span>
503
- </span>
504
- </li>
505
- <li class="micl-list-item-one">
506
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">file_open</span>
507
- <span class="micl-list-item__text">
508
- <span class="micl-list-item__headline">Open</span>
509
- </span>
510
- </li>
511
- </ul>
512
- <ul class="micl-list">
513
- <li role="separator" class="micl-menu__section">Edit</li>
514
- <li class="micl-list-item-one" tabindex="0">
515
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
516
- <span class="micl-list-item__text">
517
- <span class="micl-list-item__headline">Cut</span>
518
- </span>
519
- </li>
520
- <li class="micl-list-item-one">
521
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_copy</span>
522
- <span class="micl-list-item__text">
523
- <span class="micl-list-item__headline">Copy</span>
524
- </span>
525
- </li>
526
- <li class="micl-list-item-one">
527
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_paste</span>
528
- <span class="micl-list-item__text">
529
- <span class="micl-list-item__headline">Paste</span>
530
- </span>
531
- </li>
532
- </ul>
533
- </nav>
534
- </div>
535
- </div>
536
- </div>
537
- </div>
538
- <div class="micl-pane__column">
539
- <div class="micl-card-filled">
540
- <div class="micl-card__headline-s">
541
- <h2>Code example</h2>
542
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
543
- </div>
544
- <div class="micl-card__content docs-code">
545
- <pre tabindex="-1"><code>&lt;nav id="id0" class="micl-menu" popover&gt;
546
- &lt;ul class="micl-list"&gt;
547
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
548
- &lt;span class="micl-list-item__text"&gt;
549
- &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
550
- &lt;/span&gt;
551
- &lt;/li&gt;
552
- &lt;li class="micl-list-item-one"&gt;
553
- &lt;span class="micl-list-item__text"&gt;
554
- &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
555
- &lt;/span&gt;
556
- &lt;/li&gt;
557
- &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
558
- &lt;span class="micl-list-item__text"&gt;
559
- &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
560
- &lt;/span&gt;
561
- &lt;/li&gt;
562
- &lt;/ul&gt;
563
- &lt;/nav&gt;</code></pre>
564
- </div>
565
- </div>
566
- </div>
567
- </div>
568
- </section>
569
- </main>
570
-
571
- <script src="micl.js"></script>
572
- <script src="docs.js"></script>
573
- </body>
574
- </html>