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/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
- });