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/dialog.html DELETED
@@ -1,195 +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 Dialogs">
7
- <title>MICL Dialogs</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,content_copy,dark_mode,home,person,restart_alt&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
- label {
17
- color: var(--md-sys-color-on-surface);
18
- }
19
- </style>
20
- </head>
21
- <body class="micl-window light">
22
- <main class="micl-body">
23
- <section class="micl-pane">
24
- <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
- </a>
28
- <div class="micl-appbar__headline micl-appbar__headline--center">
29
- <h1>Dialogs</h1>
30
- <p class="micl-appbar__subtitle">Showcasing MICL dialogs</p>
31
- </div>
32
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
33
- </header>
34
-
35
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
36
- <div class="micl-pane__column">
37
- <div class="micl-card-filled">
38
- <div class="micl-card__headline-s">
39
- <h2>Showcase</h2>
40
- </div>
41
- <p class="micl-card__supporting-text">Click a button to open one of the MICL dialogs.</p>
42
- <div class="micl-card__content docs-buttons">
43
- <dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" aria-labelledby="mytitle1">
44
- <div class="micl-dialog__headline">
45
- <h2 id="mytitle1">Basic dialog</h2>
46
- <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
47
- </div>
48
- <div class="micl-dialog__actions">
49
- <button type="button" class="micl-button-text-s" popovertarget="mydialog1" autofocus>OK</button>
50
- </div>
51
- </dialog>
52
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
53
-
54
- <dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" aria-labelledby="mytitle2" aria-describedby="mydesc2">
55
- <div class="micl-dialog__headline">
56
- <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">restart_alt</span>
57
- <h2 id="mytitle2">Reset settings?</h2>
58
- <span id="mydesc2" class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
59
- </div>
60
- <div class="micl-dialog__content">
61
- <hr class="micl-divider">
62
- <ul class="micl-list" style="margin-block:8px">
63
- <li class="micl-list-item-one">
64
- <span class="micl-list-item__avatar">JH</span>
65
- <span class="micl-list-item__text">
66
- <span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
67
- </span>
68
- </li>
69
- <li class="micl-list-item-one">
70
- <span class="micl-list-item__avatar">LS</span>
71
- <span class="micl-list-item__text">
72
- <span class="micl-list-item__headline">laura.smith@outlook.com</span>
73
- </span>
74
- </li>
75
- <li class="micl-list-item-one">
76
- <span class="micl-list-item__avatar">LH</span>
77
- <span class="micl-list-item__text">
78
- <span class="micl-list-item__headline">lucy.hong@gmail.com</span>
79
- </span>
80
- </li>
81
- </ul>
82
- <hr class="micl-divider">
83
- </div>
84
- <div class="micl-dialog__actions">
85
- <button type="button" class="micl-button-text-s" popovertarget="mydialog2" autofocus>Cancel</button>
86
- <button type="button" class="micl-button-text-s">Accept</button>
87
- </div>
88
- </dialog>
89
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
90
-
91
- <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="none" role="alertdialog" aria-labelledby="mytitle3" aria-describedby="mydesc3">
92
- <div class="micl-dialog__headline">
93
- <h2 id="mytitle3">Delete selected images?</h2>
94
- <span id="mydesc3" class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
95
- </div>
96
- <form method="dialog" class="micl-dialog__actions">
97
- <button class="micl-button-text-s" autofocus>Cancel</button>
98
- <button class="micl-button-text-s" value="dodelete">Delete</button>
99
- </form>
100
- </dialog>
101
- <button type="button" class="micl-button-outlined-m micl-button--square" commandfor="mydialog3" command="show-modal">Open Modal Dialog</button>
102
-
103
- <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover closedby="closerequest" aria-labelledby="mytitle4">
104
- <div class="micl-dialog__headline">
105
- <h2 id="mytitle4">Delete selected images?</h2>
106
- <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
107
- </div>
108
- <div class="micl-dialog__actions">
109
- <button class="micl-button-text-s" popovertarget="mydialog4" autofocus>Cancel</button>
110
- <button class="micl-button-text-s">Delete</button>
111
- </div>
112
- </dialog>
113
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
114
-
115
- <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" closedby="none" aria-labelledby="mytitle5">
116
- <form method="dialog" class="micl-dialog__headline">
117
- <button class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" aria-label="Close">close</button>
118
- <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
119
- <h2 id="mytitle5">Personal info</h2>
120
- <button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
121
- </form>
122
- <div class="micl-dialog__content">
123
- <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
124
- <div class="micl-textfield-outlined" style="margin-block:24px">
125
- <label for="mytextfield1">Name</label>
126
- <input type="text" id="mytextfield1" value="Marie Curie">
127
- </div>
128
- <div class="micl-textfield-outlined" style="margin-block:24px">
129
- <label for="mytextfield2">Address</label>
130
- <input type="text" id="mytextfield2" value="Rue du Boulevard 3, Paris">
131
- </div>
132
- <div class="micl-textfield-outlined">
133
- <label for="myselect">Country</label>
134
- <select id="myselect">
135
- <option class="micl-list-item-one" value="AR">
136
- <span class="micl-list-item__text">Argentina</span>
137
- </option>
138
- <option class="micl-list-item-one" value="BO">
139
- <span class="micl-list-item__text">Bolivia</span>
140
- </option>
141
- <option class="micl-list-item-one" value="BR">
142
- <span class="micl-list-item__text">Brazil</span>
143
- </option>
144
- <option class="micl-list-item-one" value="CL" disabled>
145
- <span class="micl-list-item__text">Chile</span>
146
- </option>
147
- <option class="micl-list-item-one" value="CO">
148
- <span class="micl-list-item__text">Colombia</span>
149
- </option>
150
- <option class="micl-list-item-one" value="FR" selected>
151
- <span class="micl-list-item__text">France</span>
152
- </option>
153
- </select>
154
- </div>
155
- <div class="micl-textfield-outlined" style="margin-block:24px 4px">
156
- <label for="mytextfield5">Profession</label>
157
- <input type="text" id="mytextfield5" value="Physics researcher">
158
- </div>
159
- </div>
160
- <form method="dialog" class="micl-dialog__actions">
161
- <button class="micl-button-text-s">Cancel</button>
162
- <button class="micl-button-text-s" value="dosave">Save</button>
163
- </form>
164
- </dialog>
165
- <button type="button" class="micl-button-outlined-m micl-button--square" command="show-modal" commandfor="mydialog5">Open Full-Screen Dialog</button>
166
- </div>
167
- </div>
168
- </div>
169
- <div class="micl-pane__column">
170
- <div class="micl-card-filled">
171
- <div class="micl-card__headline-s">
172
- <h2>Code example</h2>
173
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
174
- </div>
175
- <div class="micl-card__content docs-code">
176
- <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
177
- &lt;div class="micl-dialog__headline"&gt;
178
- &lt;h2&gt;Basic dialog&lt;/h2&gt;
179
- &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
180
- &lt;/div&gt;
181
- &lt;div class="micl-dialog__actions"&gt;
182
- &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;OK&lt;/button&gt;
183
- &lt;/div&gt;
184
- &lt;/dialog&gt;</code></pre>
185
- </div>
186
- </div>
187
- </div>
188
- </div>
189
- </section>
190
- </main>
191
-
192
- <script src="micl.js"></script>
193
- <script src="docs.js"></script>
194
- </body>
195
- </html>
package/docs/divider.html DELETED
@@ -1,139 +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 Dividers">
7
- <title>MICL Dividers</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
- p {
17
- color: var(--md-sys-color-on-surface);
18
- }
19
- section:first-child .micl-pane__column > :last-child {
20
- padding-block-end: 0;
21
- }
22
- section:first-child .micl-card__content {
23
- padding: 0;
24
- }
25
- section:first-child .micl-card-filled {
26
- --md-sys-divider-color: var(--md-sys-color-primary);
27
- }
28
- p.md-sys-typescale-label-large {
29
- margin: 3rem 2rem 1rem;
30
- }
31
- .verticalbox {
32
- display: flex;
33
- flex-wrap: nowrap;
34
- }
35
- </style>
36
- </head>
37
- <body class="micl-window light">
38
- <main class="micl-body micl-body--stacked-to-large">
39
- <section class="micl-pane">
40
- <header class="micl-appbar">
41
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
42
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
43
- </a>
44
- <div class="micl-appbar__headline micl-appbar__headline--center">
45
- <h1>Dividers</h1>
46
- <p class="micl-appbar__subtitle">Showcasing MICL dividers</p>
47
- </div>
48
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
49
- </header>
50
-
51
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
52
- <div class="micl-pane__column">
53
- <div class="micl-card-elevated">
54
- <div class="micl-card__content">
55
- <p class="md-sys-typescale-label-large">Full width:</p>
56
- <hr class="micl-divider">
57
- <p class="md-sys-typescale-label-large">Inset:</p>
58
- <hr class="micl-divider-inset">
59
- <p class="md-sys-typescale-label-large">Inset start:</p>
60
- <hr class="micl-divider-inset-start">
61
- <p class="md-sys-typescale-label-large">Inset end:</p>
62
- <hr class="micl-divider-inset-end">
63
- <p></p>
64
- </div>
65
- </div>
66
- <div class="micl-card-elevated">
67
- <div class="micl-card__content">
68
- <div class="verticalbox">
69
- <p class="md-sys-typescale-label-large">Full height:</p>
70
- <hr class="micl-divider-vertical">
71
- </div>
72
- </div>
73
- </div>
74
- </div>
75
- <div class="micl-pane__column">
76
- <div class="micl-card-filled">
77
- <div class="micl-card__content">
78
- <p class="md-sys-typescale-label-large">Full width:</p>
79
- <hr class="micl-divider">
80
- <p class="md-sys-typescale-label-large">Inset:</p>
81
- <hr class="micl-divider-inset">
82
- <p class="md-sys-typescale-label-large">Inset start:</p>
83
- <hr class="micl-divider-inset-start">
84
- <p class="md-sys-typescale-label-large">Inset end:</p>
85
- <hr class="micl-divider-inset-end">
86
- <p></p>
87
- </div>
88
- </div>
89
- <div class="micl-card-filled">
90
- <div class="micl-card__content">
91
- <div class="verticalbox">
92
- <p class="md-sys-typescale-label-large">Full height:</p>
93
- <hr class="micl-divider-vertical">
94
- </div>
95
- </div>
96
- </div>
97
- </div>
98
- <div class="micl-pane__column">
99
- <div class="micl-card-outlined">
100
- <div class="micl-card__content">
101
- <p class="md-sys-typescale-label-large">Full width:</p>
102
- <hr class="micl-divider">
103
- <p class="md-sys-typescale-label-large">Inset:</p>
104
- <hr class="micl-divider-inset">
105
- <p class="md-sys-typescale-label-large">Inset start:</p>
106
- <hr class="micl-divider-inset-start">
107
- <p class="md-sys-typescale-label-large">Inset end:</p>
108
- <hr class="micl-divider-inset-end">
109
- <p></p>
110
- </div>
111
- </div>
112
- <div class="micl-card-outlined">
113
- <div class="micl-card__content">
114
- <div class="verticalbox">
115
- <p class="md-sys-typescale-label-large">Full height:</p>
116
- <hr class="micl-divider-vertical">
117
- </div>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- </section>
123
- <section class="micl-pane">
124
- <div class="micl-card-filled" style="margin-top:8px">
125
- <div class="micl-card__headline-s">
126
- <h2>Code example</h2>
127
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
128
- </div>
129
- <div class="micl-card__content docs-code">
130
- <pre tabindex="-1"><code>&lt;hr class="micl-divider"&gt;</code></pre>
131
- </div>
132
- </div>
133
- </section>
134
- </main>
135
-
136
- <script src="micl.js"></script>
137
- <script src="docs.js"></script>
138
- </body>
139
- </html>
package/docs/docs.css DELETED
@@ -1,26 +0,0 @@
1
- #settings-directionality {
2
- display: flex;
3
- align-items: center;
4
- column-gap: 16px;
5
- margin-block: 24px 4px;
6
- }
7
- h1 {
8
- color: var(--md-sys-color-on-surface);
9
- }
10
- pre {
11
- width: 100%;
12
- margin: 0;
13
- overflow: auto;
14
- }
15
- .docs-buttons {
16
- display: flex;
17
- flex-direction: column;
18
- align-items: flex-start;
19
- padding-block: 16px;
20
- row-gap: 16px;
21
- }
22
- .docs-code {
23
- padding-block: var(--md-comp-card-content-padding-block);
24
- background-color: var(--md-sys-color-secondary);
25
- color: var(--md-sys-color-on-secondary);
26
- }
package/docs/docs.js DELETED
@@ -1,139 +0,0 @@
1
- document.getElementById('settings-placeholder').innerHTML =
2
- `<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="settings">dark_mode</button>
3
- <dialog id="settings" class="micl-dialog" closedby="any" popover>
4
- <div class="micl-dialog__headline">
5
- <h2>Settings</h2>
6
- </div>
7
- <div class="micl-dialog__content">
8
- <div class="micl-textfield-outlined">
9
- <label for="theme">Theme</label>
10
- <select id="theme">
11
- <option class="micl-list-item-one" selected value="airblue">
12
- <span class="micl-list-item__text">Air blue</span>
13
- </option>
14
- <option class="micl-list-item-one" value="barnred">
15
- <span class="micl-list-item__text">Barn red</span>
16
- </option>
17
- <option class="micl-list-item-one" value="citrine">
18
- <span class="micl-list-item__text">Citrine</span>
19
- </option>
20
- <option class="micl-list-item-one" value="gray">
21
- <span class="micl-list-item__text">Gray</span>
22
- </option>
23
- <option class="micl-list-item-one" value="greenery">
24
- <span class="micl-list-item__text">Greenery</span>
25
- </option>
26
- <option class="micl-list-item-one" value="hermana">
27
- <span class="micl-list-item__text">Hermana</span>
28
- </option>
29
- <option class="micl-list-item-one" value="illuminating">
30
- <span class="micl-list-item__text">Illuminating</span>
31
- </option>
32
- <option class="micl-list-item-one" value="magenta">
33
- <span class="micl-list-item__text">Magenta</span>
34
- </option>
35
- <option class="micl-list-item-one" value="mocha">
36
- <span class="micl-list-item__text">Mocha</span>
37
- </option>
38
- <option class="micl-list-item-one" value="olivegreen">
39
- <span class="micl-list-item__text">Olive green</span>
40
- </option>
41
- <option class="micl-list-item-one" value="peri">
42
- <span class="micl-list-item__text">Peri</span>
43
- </option>
44
- </select>
45
- </div>
46
- <div class="micl-textfield-outlined" style="margin-block-start:24px">
47
- <label for="mode">Mode</label>
48
- <select id="mode">
49
- <option class="micl-list-item-one" selected value="light">
50
- <span class="micl-list-item__text">Light</span>
51
- </option>
52
- <option class="micl-list-item-one" value="light-medium-contrast">
53
- <span class="micl-list-item__text">Light Medium Contrast</span>
54
- </option>
55
- <option class="micl-list-item-one" value="light-high-contrast">
56
- <span class="micl-list-item__text">Light High Contrast</span>
57
- </option>
58
- <option class="micl-list-item-one" value="dark">
59
- <span class="micl-list-item__text">Dark</span>
60
- </option>
61
- <option class="micl-list-item-one" value="dark-medium-contrast">
62
- <span class="micl-list-item__text">Dark Medium Contrast</span>
63
- </option>
64
- <option class="micl-list-item-one" value="dark-high-contrast">
65
- <span class="micl-list-item__text">Dark High Contrast</span>
66
- </option>
67
- </select>
68
- </div>
69
- <div id="settings-directionality">
70
- <label for="directionality" class="md-sys-typescale-body-medium">Right to left:</label>
71
- <input type="checkbox" class="micl-switch" id="directionality" role="switch">
72
- </div>
73
- </div>
74
- <div class="micl-dialog__actions">
75
- <button type="button" class="micl-button-text-s" popovertarget="settings">Close</button>
76
- </div>
77
- </dialog>`;
78
-
79
- try {
80
- const savedTheme = localStorage.getItem('theme');
81
- const themelink = document.getElementById('theme-link');
82
- if (savedTheme && themelink) {
83
- themelink.href = `themes/${savedTheme}/theme.css`
84
- const theme = document.getElementById('theme');
85
- if (theme) {
86
- theme.value = savedTheme;
87
- }
88
- }
89
- const savedMode = localStorage.getItem('mode');
90
- if (savedMode) {
91
- document.body.setAttribute('class', document.body.classList.toString().split(' ').filter(
92
- c => c.startsWith('micl')
93
- ) + ' ' + savedMode);
94
- const mode = document.getElementById('mode');
95
- if (mode) {
96
- mode.value = savedMode;
97
- }
98
- }
99
- const savedDir = localStorage.getItem('dir');
100
- if (savedDir) {
101
- document.documentElement.setAttribute('dir', savedDir);
102
- const directionality = document.getElementById('directionality');
103
- if (directionality) {
104
- directionality.checked = savedDir === 'rtl';
105
- }
106
- }
107
- }
108
- catch (e) {}
109
-
110
- document.getElementById('theme').addEventListener('change', event => {
111
- const themelink = document.getElementById('theme-link');
112
- if (themelink) {
113
- themelink.href = `themes/${event.target.value}/theme.css`
114
- try {
115
- localStorage.setItem('theme', event.target.value);
116
- }
117
- catch (e) {}
118
- }
119
- });
120
- document.getElementById('mode').addEventListener('change', event => {
121
- document.body.setAttribute('class', document.body.classList.toString().split(' ').filter(
122
- c => c.startsWith('micl')
123
- ) + ' ' + event.target.value);
124
- try {
125
- localStorage.setItem('mode', event.target.value);
126
- }
127
- catch (e) {}
128
- });
129
- document.getElementById('directionality').addEventListener('change', event => {
130
- document.documentElement.setAttribute('dir', event.target.checked ? 'rtl' : 'ltr');
131
- try {
132
- localStorage.setItem('dir', event.target.checked ? 'rtl' : 'ltr');
133
- }
134
- catch (e) {}
135
- });
136
- document.getElementById('copycode')?.addEventListener('click', event => {
137
- const code = document.querySelector('code');
138
- !!code && navigator.clipboard.writeText(code.textContent).then(() => {}).catch(e => {});
139
- });