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/index.html DELETED
@@ -1,431 +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="The Material-Inspired Component Library (MICL) Showcase">
7
- <title>MICL Showcase</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=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,schedule,share&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="shapes.css">
15
- <link rel="stylesheet" href="docs.css">
16
- <style>
17
- a {
18
- color:var(--md-sys-color-on-surface)
19
- }
20
- p:has(a) {
21
- margin-block: 0 16px;
22
- }
23
- </style>
24
- </head>
25
- <body class="micl-window light">
26
- <dialog id="mynavigationrail" class="micl-navigationrail" style="--md-comp-nav-rail-expanded-top-space:12px" closedby="closerequest">
27
- <div class="micl-navigationrail__headline">
28
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" command="close" commandfor="mynavigationrail" aria-label="Close navigation rail">menu_open</button>
29
- </div>
30
- <div class="micl-navigationrail__content">
31
- <a href="#" class="micl-navigationrail__item" tabindex="0">
32
- <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
33
- <span class="micl-navigationrail__text">Inbox</span>
34
- <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-inline-offset:-16px">97</span>
35
- </a>
36
- <a href="#" class="micl-navigationrail__item" tabindex="0">
37
- <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
38
- <span class="micl-navigationrail__text">Outbox</span>
39
- </a>
40
- <a href="#" class="micl-navigationrail__item" tabindex="0">
41
- <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
42
- <span class="micl-navigationrail__text">Favorites</span>
43
- <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-inline-offset:-16px"></span>
44
- </a>
45
- <a href="#" class="micl-navigationrail__item" tabindex="0">
46
- <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
47
- <span class="micl-navigationrail__text">Trash</span>
48
- </a>
49
- </div>
50
- </dialog>
51
-
52
- <main class="micl-body">
53
- <section class="micl-pane">
54
- <header class="micl-appbar micl-appbar--large">
55
- <button type="button" class="micl-appbar__leading-icon micl-iconbutton-standard-s material-symbols-outlined" command="show-modal" commandfor="mynavigationrail" aria-label="Open navigation rail">menu</button>
56
- <div class="micl-appbar__headline micl-appbar__headline--center">
57
- <h1>MICL Showcase</h1>
58
- </div>
59
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
60
- </header>
61
-
62
- <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
63
- <div class="micl-pane__column">
64
- <div class="micl-card-filled">
65
- <div class="micl-card__headline-s">
66
- <h2>Data entry</h2>
67
- </div>
68
- <div class="micl-card__content" style="display:flex;flex-direction:column;row-gap:16px;padding-block-start:16px">
69
- <div class="micl-textfield-outlined">
70
- <label for="mytextfield1">Text field</label>
71
- <input type="text" id="mytextfield1">
72
- </div>
73
- <div class="micl-textfield-outlined">
74
- <label for="myselect1">Select</label>
75
- <select id="myselect1">
76
- <option class="micl-list-item-one" value="AR">
77
- <span class="micl-list-item__text">Argentina</span>
78
- </option>
79
- <option class="micl-list-item-one" value="BO">
80
- <span class="micl-list-item__text">Bolivia</span>
81
- </option>
82
- <option class="micl-list-item-one" value="BR" disabled>
83
- <span class="micl-list-item__text">Brazil</span>
84
- </option>
85
- <option class="micl-list-item-one" value="CL">
86
- <span class="micl-list-item__text">Chile</span>
87
- </option>
88
- <option class="micl-list-item-one" value="CO">
89
- <span class="micl-list-item__text">Colombia</span>
90
- </option>
91
- <option class="micl-list-item-one" value="EC">
92
- <span class="micl-list-item__text">Ecuador</span>
93
- </option>
94
- </select>
95
- </div>
96
- <div>
97
- <div class="micl-flex--vcenter">
98
- <input type="radio" id="myradio1" class="micl-radio" name="foo" value="bar" checked>
99
- <label for="myradio1" class="md-sys-typescale-body-medium">First radio button</label>
100
- </div>
101
- <div class="micl-flex--vcenter">
102
- <input type="radio" id="myradio2" class="micl-radio" name="foo" value="baz">
103
- <label for="myradio2" class="md-sys-typescale-body-medium">Second radio button</label>
104
- </div>
105
- </div>
106
- <div>
107
- <div class="micl-flex--vcenter">
108
- <input type="checkbox" id="mycheckbox1" class="micl-checkbox" checked>
109
- <label for="mycheckbox1" class="md-sys-typescale-body-medium">First checkbox</label>
110
- </div>
111
- <div class="micl-flex--vcenter">
112
- <input type="checkbox" id="mycheckbox2" class="micl-checkbox">
113
- <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second checkbox</label>
114
- </div>
115
- </div>
116
- <div class="micl-flex--vcenter" style="column-gap:16px">
117
- <input type="checkbox" class="micl-switch" id="myswitch" checked value="c1" role="switch">
118
- <label for="myswitch" class="md-sys-typescale-body-medium">First switch</label>
119
- </div>
120
- <input type="range" class="micl-slider-xs" style="width:100%;margin-block:16px" min="1" max="10" value="6" aria-label="Slider component">
121
- </div>
122
- </div>
123
-
124
- <div class="micl-card-outlined">
125
- <img class="micl-card__image" alt="city" src="card-city.webp" aria-hidden="true">
126
- <div class="micl-card__headline-l">
127
- <h2>Card</h2>
128
- </div>
129
- <span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
130
- <div class="micl-card__content">
131
- <div class="micl-alert-outlined" role="alert">
132
- <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
133
- <div class="micl-alert__text">
134
- <h3>This is an alert</h3>
135
- <span class="micl-alert__supporting-text">An error has occurred</span>
136
- </div>
137
- </div>
138
- <div style="display:flex;justify-content:space-between;padding-block-start:16px">
139
- <button type="button" class="micl-button-filled-s">Action</button>
140
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
141
- <nav id="mymenu" class="micl-menu" popover>
142
- <ul class="micl-list">
143
- <li class="micl-list-item-one" tabindex="0">
144
- <span class="micl-list-item__text">
145
- <span class="micl-list-item__headline">Menu item without graphics</span>
146
- </span>
147
- </li>
148
- <li class="micl-list-item-one" tabindex="0">
149
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">globe</span>
150
- <span class="micl-list-item__text">
151
- <span class="micl-list-item__headline">Menu item with an icon</span>
152
- </span>
153
- </li>
154
- <li class="micl-list-item-three">
155
- <a href="https://www.nytimes.com" tabindex="-1">
156
- <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
157
- <span class="micl-list-item__text">
158
- <span class="micl-list-item__headline">The New York Times</span>
159
- <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
160
- </span>
161
- </a>
162
- </li>
163
- <li class="micl-list-item-one" tabindex="0">
164
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Top_of_Atmosphere.jpg/330px-Top_of_Atmosphere.jpg)"></span>
165
- <span class="micl-list-item__text">
166
- <span class="micl-list-item__headline">Item with an image</span>
167
- </span>
168
- </li>
169
- </ul>
170
- </nav>
171
- </div>
172
- </div>
173
- </div>
174
- </div>
175
- <div class="micl-pane__column">
176
- <div class="micl-card-elevated">
177
- <div class="micl-card__headline-l">
178
- <h2>Lists</h2>
179
- </div>
180
- <div class="micl-card__content">
181
- <ul class="micl-list">
182
- <li class="micl-list-item-one">
183
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
184
- <span class="micl-list-item__text">
185
- <span class="micl-list-item__headline">One-line list item</span>
186
- </span>
187
- </li>
188
- <li class="micl-list-item-two">
189
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">globe</span>
190
- <span class="micl-list-item__text">
191
- <span class="micl-list-item__headline">Two-line list item</span>
192
- <span class="micl-list-item__supporting-text">Supporting text</span>
193
- </span>
194
- </li>
195
- <li class="micl-list-item-three">
196
- <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center" aria-hidden="true"></span>
197
- <span class="micl-list-item__text">
198
- <span class="micl-list-item__headline">Three-line list item</span>
199
- <span class="micl-list-item__supporting-text">Supporting text</span>
200
- </span>
201
- </li>
202
- </ul>
203
-
204
- <div class="micl-list" role="listbox">
205
- <details name="accordion">
206
- <summary class="micl-list-item-two">
207
- <span class="micl-list-item__text">
208
- <span class="micl-list-item__headline">Accordion item 1</span>
209
- <span class="micl-list-item__supporting-text">Click to open</span>
210
- </span>
211
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
212
- </summary>
213
- <div class="micl-list-item__content" style="padding-block:16px">
214
- <div class="micl-textfield-filled">
215
- <label for="tf1">Name</label>
216
- <input type="text" id="tf1" value="Filled text field">
217
- </div>
218
- </div>
219
- </details>
220
- <hr class="micl-divider">
221
- <details name="accordion">
222
- <summary class="micl-list-item-two" tabindex="-1">
223
- <span class="micl-list-item__text">
224
- <span class="micl-list-item__headline">Accordion item 2</span>
225
- <span class="micl-list-item__supporting-text">Click to open</span>
226
- </span>
227
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
228
- </summary>
229
- <div class="micl-list-item__content" style="padding-block:16px">
230
- <div class="micl-textfield-filled">
231
- <label for="tf2">Time</label>
232
- <input type="time" id="tf2" data-timepicker="mytimepicker" value="10:05">
233
- </div>
234
- <dialog id="mytimepicker" class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="mytime">
235
- <form method="dialog">
236
- <div class="micl-dialog__headline">
237
- <h2 id="mytime">Enter time</h2>
238
- </div>
239
- <div class="micl-dialog__content">
240
- <input type="number" name="hour" value="00" aria-labelledby="myhour">
241
- <span class="micl-timepicker__separator">:</span>
242
- <input type="number" name="minute" value="00" aria-labelledby="myminute">
243
- <div class="micl-timepicker__period"></div>
244
- <span id="myhour" class="micl-timepicker__supporting-text-hour">Hour</span>
245
- <span id="myminute" class="micl-timepicker__supporting-text-minute">Minute</span>
246
- <div class="micl-timepicker__dial"></div>
247
- </div>
248
- <div class="micl-dialog__actions">
249
- <button type="button" id="btn" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="keyboard" data-micliconselected="schedule"></button>
250
- <div>
251
- <button class="micl-button-text-s" value="">Cancel</button>
252
- <button class="micl-button-text-s" value="OK">OK</button>
253
- </div>
254
- </div>
255
- </form>
256
- </dialog>
257
- </div>
258
- </details>
259
- </div>
260
- </div>
261
- </div>
262
-
263
- <div class="micl-card-outlined">
264
- <div class="micl-card__headline-s">
265
- <h2>Button actions</h2>
266
- </div>
267
- <div class="micl-card__content" style="display:flex;justify-content:space-between;flex-wrap:wrap">
268
- <div style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px">
269
- <dialog id="mydialog" class="micl-dialog" popover closedby="none" aria-labelledby="mytitle">
270
- <form method="dialog" class="micl-dialog__headline">
271
- <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
272
- <h2 id="mytitle">Personal info</h2>
273
- </form>
274
- <div class="micl-dialog__content">
275
- <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
276
- <div class="micl-textfield-outlined" style="margin-block:24px">
277
- <label for="mytextfield2">Name</label>
278
- <input type="text" id="mytextfield2" value="Marie Curie">
279
- </div>
280
- <div class="micl-textfield-outlined" style="margin-block:24px">
281
- <label for="mytextfield3">Address</label>
282
- <input type="text" id="mytextfield3" value="Rue du Boulevard 3, Paris">
283
- </div>
284
- <div class="micl-textfield-outlined">
285
- <label for="myselect">Country</label>
286
- <select id="myselect">
287
- <option class="micl-list-item-one" value="AR">
288
- <span class="micl-list-item__text">Argentina</span>
289
- </option>
290
- <option class="micl-list-item-one" value="BO">
291
- <span class="micl-list-item__text">Bolivia</span>
292
- </option>
293
- <option class="micl-list-item-one" value="BR">
294
- <span class="micl-list-item__text">Brazil</span>
295
- </option>
296
- <option class="micl-list-item-one" value="CL" disabled>
297
- <span class="micl-list-item__text">Chile</span>
298
- </option>
299
- <option class="micl-list-item-one" value="CO">
300
- <span class="micl-list-item__text">Colombia</span>
301
- </option>
302
- <option class="micl-list-item-one" value="FR" selected>
303
- <span class="micl-list-item__text">France</span>
304
- </option>
305
- </select>
306
- </div>
307
- <div class="micl-textfield-outlined" style="margin-block:24px 4px">
308
- <label for="mytextfield4">Profession</label>
309
- <input type="text" id="mytextfield4" value="Physics researcher">
310
- </div>
311
- </div>
312
- <form method="dialog" class="micl-dialog__actions">
313
- <button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
314
- <button class="micl-button-text-s" value="dosave">Save</button>
315
- </form>
316
- </dialog>
317
- <button class="micl-button-elevated-s" popovertarget="mydialog">Open Dialog</button>
318
-
319
- <dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mysidesheettitle">
320
- <div class="micl-sidesheet__headline">
321
- <h2 id="mysidesheettitle">Lorum ipsum</h2>
322
- <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet">close</button>
323
- </div>
324
- <div class="micl-sidesheet__content">
325
- <p style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
326
- <p style="color:var(--md-sys-color-on-surface)">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>
327
- <p style="color:var(--md-sys-color-on-surface)">Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
328
- <p style="color:var(--md-sys-color-on-surface)">Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
329
- </div>
330
- </dialog>
331
- <button type="button" class="micl-button-tonal-s" popovertarget="mysidesheet">Open Side Sheet</button>
332
-
333
- <dialog id="mybottomsheet" class="micl-bottomsheet" popover data-snapheights="400">
334
- <div class="micl-bottomsheet__headline">
335
- <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
336
- </div>
337
- <div class="micl-bottomsheet__content">
338
- <ul class="micl-list" role="listbox">
339
- <li class="micl-list-item-one" tabindex="0">
340
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
341
- <span class="micl-list-item__text">
342
- <span class="micl-list-item__headline">Share</span>
343
- </span>
344
- </li>
345
- <li class="micl-list-item-one" tabindex="0">
346
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
347
- <span class="micl-list-item__text">
348
- <span class="micl-list-item__headline">Get link</span>
349
- </span>
350
- </li>
351
- <li class="micl-list-item-one" tabindex="0">
352
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
353
- <span class="micl-list-item__text">
354
- <span class="micl-list-item__headline">Edit name</span>
355
- </span>
356
- </li>
357
- </ul>
358
- </div>
359
- </dialog>
360
- <button type="button" class="micl-button-outlined-s" popovertarget="mybottomsheet">Open Bottom Sheet</button>
361
- </div>
362
- <div style="display:flex;flex-wrap:wrap">
363
- <svg class="micl-shapes micl-shapes--soft-burst">
364
- <defs>
365
- <pattern id="photo-1" patternUnits="userSpaceOnUse" x="-10" y="0" width="120" height="100">
366
- <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Sibirischer_tiger_de_edit02.jpg/330px-Sibirischer_tiger_de_edit02.jpg" width="120" height="100" preserveAspectRatio="xMidYMid slice" />
367
- </pattern>
368
- </defs>
369
- <path fill="url(#photo-1)" />
370
- </svg>
371
- <svg class="micl-shapes micl-shapes--arrow micl-shapes--outlined" viewBox="-10 0 120 100"><path /></svg>
372
- </div>
373
- </div>
374
- </div>
375
-
376
- <div class="micl-card-elevated">
377
- <div class="micl-card__headline-l">
378
- <h2>Demos</h2>
379
- </div>
380
- <div class="micl-card__content" style="column-count:2;padding-block-start:16px">
381
- <p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
382
- <p><a href="alert.html" class="md-sys-typescale-body-large">Alerts</a></p>
383
- <p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
384
- <p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
385
- <p><a href="card.html" class="md-sys-typescale-body-large">Cards</a></p>
386
- <p><a href="checkbox.html" class="md-sys-typescale-body-large">Checkboxes</a></p>
387
- <p><a href="datepicker.html" class="md-sys-typescale-body-large">Date pickers</a></p>
388
- <p><a href="dialog.html" class="md-sys-typescale-body-large">Dialogs</a></p>
389
- <p><a href="divider.html" class="md-sys-typescale-body-large">Dividers</a></p>
390
- <p><a href="iconbutton.html" class="md-sys-typescale-body-large">Icon buttons</a></p>
391
- <p><a href="list.html" class="md-sys-typescale-body-large">Lists</a></p>
392
- <p><a href="menu.html" class="md-sys-typescale-body-large">Menus</a></p>
393
- <p><a href="navigationrail.html" class="md-sys-typescale-body-large">Navigation rails</a></p>
394
- <!-- <p><a href="progressindicator.html" class="md-sys-typescale-body-large">Progress indicators</a></p> -->
395
- <p><a href="radio.html" class="md-sys-typescale-body-large">Radio buttons</a></p>
396
- <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
397
- <p><a href="shapes.html" class="md-sys-typescale-body-large">Shapes</a></p>
398
- <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
399
- <p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
400
- <p><a href="snackbar.html" class="md-sys-typescale-body-large">Snackbars</a></p>
401
- <p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
402
- <p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
403
- <p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
404
- <p><a href="timepicker.html" class="md-sys-typescale-body-large">Time pickers</a></p>
405
- </div>
406
- </div>
407
- </div>
408
- </div>
409
- </section>
410
- </main>
411
- <div id="mysnackbar" class="micl-snackbar" popover data-micldelay="7000" role="status" aria-atomic="true">
412
- <span class="micl-snackbar__supporting-text">This is the Snackbar component</span>
413
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysnackbar" popovertargetaction="hide">close</button>
414
- </div>
415
-
416
- <script src="micl.js"></script>
417
- <script src="docs.js"></script>
418
- <script>
419
- const loaded = () => {
420
- document.removeEventListener('DOMContentLoaded', loaded);
421
- document.querySelector('#mysnackbar')?.showPopover();
422
- };
423
- if (document.readyState !== 'loading') {
424
- document.querySelector('#mysnackbar')?.showPopover();
425
- }
426
- else {
427
- document.addEventListener('DOMContentLoaded', loaded);
428
- }
429
- </script>
430
- </body>
431
- </html>