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/textfield.html DELETED
@@ -1,208 +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 Text Fields">
7
- <title>MICL Text Fields</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=cancel,content_copy,credit_card,dark_mode,error,home,search&display=block">
12
- <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
- <link rel="stylesheet" href="micl.css">
14
- <link rel="stylesheet" href="docs.css">
15
- <style>
16
- .micl-textfield-outlined, .micl-textfield-filled {
17
- margin: 32px 0;
18
- }
19
- </style>
20
- </head>
21
- <body class="micl-window light">
22
- <main class="micl-body micl-body--stacked-to-large">
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>Text fields</h1>
30
- <p class="micl-appbar__subtitle">Showcasing MICL text fields</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-elevated">
38
- <div class="micl-card__content">
39
- <div class="micl-textfield-outlined">
40
- <label for="mytextfield1">Label text</label>
41
- <input type="text" id="mytextfield1">
42
- </div>
43
- <div class="micl-textfield-outlined">
44
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
45
- <label for="mytextfield2">Name</label>
46
- <input type="text" id="mytextfield2" value="Marie Curie">
47
- </div>
48
- <div class="micl-textfield-outlined">
49
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
50
- <label for="mytextfield3">Label text</label>
51
- <input type="text" id="mytextfield3">
52
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
53
- </div>
54
- <div class="micl-textfield-outlined">
55
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
56
- <label for="mytextfield4">City</label>
57
- <input type="text" id="mytextfield4" disabled value="Paris">
58
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
59
- </div>
60
- <div class="micl-textfield-outlined">
61
- <label for="mytextfield5">Multiline text field</label>
62
- <textarea id="mytextfield5"></textarea>
63
- </div>
64
- <div class="micl-textfield-outlined micl-textfield--error">
65
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
66
- <label for="mytextfield6">Label text</label>
67
- <input type="text" id="mytextfield6">
68
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
69
- </div>
70
- <div class="micl-textfield-outlined micl-textfield--error">
71
- <label for="mytextfield7">Password</label>
72
- <input type="password" id="mytextfield7" value="foobar">
73
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
74
- <span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
75
- </div>
76
- </div>
77
- </div>
78
- <div class="micl-card-filled">
79
- <div class="micl-card__content">
80
- <div class="micl-textfield-outlined">
81
- <input type="text" name="myname">
82
- </div>
83
- <div class="micl-textfield-outlined">
84
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
85
- <label for="mytextfield12">Text field</label>
86
- <input type="text" id="mytextfield12" value="Outlined">
87
- <span class="micl-textfield__supporting-text">Supporting text</span>
88
- </div>
89
- <div class="micl-textfield-outlined">
90
- <span class="micl-textfield__prefix" aria-label="Euro">€</span>
91
- <label for="mytextfield13">Amount</label>
92
- <input type="text" id="mytextfield13" value="299.89">
93
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">credit_card</span>
94
- </div>
95
- <div class="micl-textfield-outlined">
96
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
97
- <label for="mytextfield14">City</label>
98
- <input type="text" id="mytextfield14" disabled value="Paris">
99
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
100
- <span class="micl-textfield__supporting-text">This input field is disabled</span>
101
- </div>
102
- <div class="micl-textfield-outlined">
103
- <label for="mytextfield15">Text area</label>
104
- <textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
105
- </div>
106
- <div class="micl-textfield-outlined micl-textfield--error">
107
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
108
- <label for="mytextfield16">Label text</label>
109
- <input type="text" id="mytextfield16">
110
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
111
- </div>
112
- <div class="micl-textfield-outlined micl-textfield--error">
113
- <label for="mytextfield17">Weight</label>
114
- <input type="number" id="mytextfield17" value="17800">
115
- <span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
116
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
117
- <span class="micl-textfield__supporting-text">Too heavy</span>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- <div class="micl-pane__column">
123
- <div class="micl-card-outlined">
124
- <div class="micl-card__content">
125
- <div class="micl-textfield-filled">
126
- <label for="mytextfield21">Timestamp</label>
127
- <input type="datetime-local" id="mytextfield21">
128
- </div>
129
- <div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
130
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
131
- <span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
132
- <label for="mytextfield22">Amount*</label>
133
- <input type="text" id="mytextfield22" required value="">
134
- <span class="micl-textfield__supporting-text">In Norwegian kroner</span>
135
- </div>
136
- <div class="micl-textfield-filled">
137
- <span class="micl-textfield__character-counter"></span>
138
- <span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
139
- <span class="micl-textfield__prefix" aria-label="Euro">€</span>
140
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
141
- <input type="text" id="mytextfield23" maxlength="24">
142
- <label for="mytextfield23">Label text</label>
143
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
144
- </div>
145
- <div class="micl-textfield-filled">
146
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
147
- <label for="mytextfield24">City</label>
148
- <input type="text" id="mytextfield24" disabled value="Paris">
149
- <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
150
- <span class="micl-textfield__supporting-text">This input field is disabled</span>
151
- </div>
152
- <div class="micl-textfield-filled">
153
- <label for="mytextfield25">Multiline text field</label>
154
- <textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
155
- <span class="micl-textfield__character-counter"></span>
156
- </div>
157
- <div class="micl-textfield-filled micl-textfield--error">
158
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
159
- <label for="mytextfield26">Label text</label>
160
- <input type="text" id="mytextfield26">
161
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
162
- </div>
163
- <div class="micl-textfield-filled micl-textfield--error">
164
- <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
165
- <label for="mytextfield27">City</label>
166
- <input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
167
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
168
- <span class="micl-textfield__supporting-text">Incorrect spelling</span>
169
- <span class="micl-textfield__character-counter"></span>
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
- </div>
175
- </section>
176
- <section class="micl-pane">
177
- <div class="micl-card-filled" style="margin-top:8px">
178
- <div class="micl-card__headline-s">
179
- <h2>Code example</h2>
180
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
181
- </div>
182
- <div class="micl-card__content docs-code">
183
- <pre tabindex="-1"><code>&lt;div class="micl-textfield-outlined"&gt;
184
- &lt;label for="id0">Label text&lt;/label&gt;
185
- &lt;input type="text" id="id0"&gt;
186
- &lt;/div&gt;
187
-
188
- &lt;div class="micl-textfield-outlined"&gt;
189
- &lt;label for="id1"&gt;Multiline text field&lt;/label&gt;
190
- &lt;textarea id="id1"&gt;&lt;/textarea&gt;
191
- &lt;/div>
192
-
193
- &lt;div class="micl-textfield-outlined"&gt;
194
- &lt;span class="micl-textfield__icon-leading material-symbols-outlined"&gt;search&lt;/span&gt;
195
- &lt;label for="id2"&gt;City&lt;/label&gt;
196
- &lt;input type="text" id="id2" disabled value="Paris"&gt;
197
- &lt;span class="micl-textfield__icon-trailing material-symbols-outlined"&gt;cancel&lt;/span&gt;
198
- &lt;span class="micl-textfield__supporting-text"&gt;Disabled field&lt;/span&gt;
199
- &lt;/div&gt;</code></pre>
200
- </div>
201
- </div>
202
- </section>
203
- </main>
204
-
205
- <script src="micl.js"></script>
206
- <script src="docs.js"></script>
207
- </body>
208
- </html>
package/docs/themes/airblue/dark-hc.css DELETED
@@ -1,51 +0,0 @@
1
- .dark-high-contrast {
2
- --md-sys-color-primary: rgb(226 242 255);
3
- --md-sys-color-surface-tint: rgb(145 206 245);
4
- --md-sys-color-on-primary: rgb(0 0 0);
5
- --md-sys-color-primary-container: rgb(141 202 241);
6
- --md-sys-color-on-primary-container: rgb(0 13 22);
7
- --md-sys-color-secondary: rgb(226 242 255);
8
- --md-sys-color-on-secondary: rgb(0 0 0);
9
- --md-sys-color-secondary-container: rgb(178 197 212);
10
- --md-sys-color-on-secondary-container: rgb(0 13 22);
11
- --md-sys-color-tertiary: rgb(244 237 255);
12
- --md-sys-color-on-tertiary: rgb(0 0 0);
13
- --md-sys-color-tertiary-container: rgb(200 189 229);
14
- --md-sys-color-on-tertiary-container: rgb(13 6 36);
15
- --md-sys-color-error: rgb(255 236 233);
16
- --md-sys-color-on-error: rgb(0 0 0);
17
- --md-sys-color-error-container: rgb(255 174 164);
18
- --md-sys-color-on-error-container: rgb(34 0 1);
19
- --md-sys-color-background: rgb(15 20 23);
20
- --md-sys-color-on-background: rgb(223 227 231);
21
- --md-sys-color-surface: rgb(15 20 23);
22
- --md-sys-color-on-surface: rgb(255 255 255);
23
- --md-sys-color-surface-variant: rgb(65 72 77);
24
- --md-sys-color-on-surface-variant: rgb(255 255 255);
25
- --md-sys-color-outline: rgb(234 241 247);
26
- --md-sys-color-outline-variant: rgb(189 195 202);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(223 227 231);
30
- --md-sys-color-inverse-on-surface: rgb(0 0 0);
31
- --md-sys-color-inverse-primary: rgb(0 77 108);
32
- --md-sys-color-primary-fixed: rgb(198 231 255);
33
- --md-sys-color-on-primary-fixed: rgb(0 0 0);
34
- --md-sys-color-primary-fixed-dim: rgb(145 206 245);
35
- --md-sys-color-on-primary-fixed-variant: rgb(0 19 30);
36
- --md-sys-color-secondary-fixed: rgb(210 229 244);
37
- --md-sys-color-on-secondary-fixed: rgb(0 0 0);
38
- --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(1 19 30);
40
- --md-sys-color-tertiary-fixed: rgb(231 222 255);
41
- --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
42
- --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(19 12 42);
44
- --md-sys-color-surface-dim: rgb(15 20 23);
45
- --md-sys-color-surface-bright: rgb(76 81 84);
46
- --md-sys-color-surface-container-lowest: rgb(0 0 0);
47
- --md-sys-color-surface-container-low: rgb(28 32 36);
48
- --md-sys-color-surface-container: rgb(44 49 52);
49
- --md-sys-color-surface-container-high: rgb(55 60 64);
50
- --md-sys-color-surface-container-highest: rgb(67 71 75);
51
- }
package/docs/themes/airblue/dark-mc.css DELETED
@@ -1,51 +0,0 @@
1
- .dark-medium-contrast {
2
- --md-sys-color-primary: rgb(184 226 255);
3
- --md-sys-color-surface-tint: rgb(145 206 245);
4
- --md-sys-color-on-primary: rgb(0 41 59);
5
- --md-sys-color-primary-container: rgb(90 152 188);
6
- --md-sys-color-on-primary-container: rgb(0 0 0);
7
- --md-sys-color-secondary: rgb(204 223 238);
8
- --md-sys-color-on-secondary: rgb(21 40 51);
9
- --md-sys-color-secondary-container: rgb(128 147 161);
10
- --md-sys-color-on-secondary-container: rgb(0 0 0);
11
- --md-sys-color-tertiary: rgb(226 215 255);
12
- --md-sys-color-on-tertiary: rgb(40 33 64);
13
- --md-sys-color-tertiary-container: rgb(149 139 177);
14
- --md-sys-color-on-tertiary-container: rgb(0 0 0);
15
- --md-sys-color-error: rgb(255 210 204);
16
- --md-sys-color-on-error: rgb(84 0 3);
17
- --md-sys-color-error-container: rgb(255 84 73);
18
- --md-sys-color-on-error-container: rgb(0 0 0);
19
- --md-sys-color-background: rgb(15 20 23);
20
- --md-sys-color-on-background: rgb(223 227 231);
21
- --md-sys-color-surface: rgb(15 20 23);
22
- --md-sys-color-on-surface: rgb(255 255 255);
23
- --md-sys-color-surface-variant: rgb(65 72 77);
24
- --md-sys-color-on-surface-variant: rgb(215 221 228);
25
- --md-sys-color-outline: rgb(172 179 185);
26
- --md-sys-color-outline-variant: rgb(138 145 151);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(223 227 231);
30
- --md-sys-color-inverse-on-surface: rgb(38 43 46);
31
- --md-sys-color-inverse-primary: rgb(0 77 108);
32
- --md-sys-color-primary-fixed: rgb(198 231 255);
33
- --md-sys-color-on-primary-fixed: rgb(0 19 30);
34
- --md-sys-color-primary-fixed-dim: rgb(145 206 245);
35
- --md-sys-color-on-primary-fixed-variant: rgb(0 58 83);
36
- --md-sys-color-secondary-fixed: rgb(210 229 244);
37
- --md-sys-color-on-secondary-fixed: rgb(1 19 30);
38
- --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(38 56 68);
40
- --md-sys-color-tertiary-fixed: rgb(231 222 255);
41
- --md-sys-color-on-tertiary-fixed: rgb(19 12 42);
42
- --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(57 49 82);
44
- --md-sys-color-surface-dim: rgb(15 20 23);
45
- --md-sys-color-surface-bright: rgb(65 69 73);
46
- --md-sys-color-surface-container-lowest: rgb(4 8 11);
47
- --md-sys-color-surface-container-low: rgb(26 30 33);
48
- --md-sys-color-surface-container: rgb(36 40 44);
49
- --md-sys-color-surface-container-high: rgb(47 51 55);
50
- --md-sys-color-surface-container-highest: rgb(58 62 66);
51
- }
package/docs/themes/airblue/dark.css DELETED
@@ -1,51 +0,0 @@
1
- .dark {
2
- --md-sys-color-primary: rgb(145 206 245);
3
- --md-sys-color-surface-tint: rgb(145 206 245);
4
- --md-sys-color-on-primary: rgb(0 52 75);
5
- --md-sys-color-primary-container: rgb(0 76 107);
6
- --md-sys-color-on-primary-container: rgb(198 231 255);
7
- --md-sys-color-secondary: rgb(182 201 216);
8
- --md-sys-color-on-secondary: rgb(32 51 62);
9
- --md-sys-color-secondary-container: rgb(55 73 85);
10
- --md-sys-color-on-secondary-container: rgb(210 229 244);
11
- --md-sys-color-tertiary: rgb(204 193 233);
12
- --md-sys-color-on-tertiary: rgb(51 44 76);
13
- --md-sys-color-tertiary-container: rgb(74 66 99);
14
- --md-sys-color-on-tertiary-container: rgb(231 222 255);
15
- --md-sys-color-error: rgb(255 180 171);
16
- --md-sys-color-on-error: rgb(105 0 5);
17
- --md-sys-color-error-container: rgb(147 0 10);
18
- --md-sys-color-on-error-container: rgb(255 218 214);
19
- --md-sys-color-background: rgb(15 20 23);
20
- --md-sys-color-on-background: rgb(223 227 231);
21
- --md-sys-color-surface: rgb(15 20 23);
22
- --md-sys-color-on-surface: rgb(223 227 231);
23
- --md-sys-color-surface-variant: rgb(65 72 77);
24
- --md-sys-color-on-surface-variant: rgb(193 199 206);
25
- --md-sys-color-outline: rgb(139 146 152);
26
- --md-sys-color-outline-variant: rgb(65 72 77);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(223 227 231);
30
- --md-sys-color-inverse-on-surface: rgb(44 49 52);
31
- --md-sys-color-inverse-primary: rgb(32 100 135);
32
- --md-sys-color-primary-fixed: rgb(198 231 255);
33
- --md-sys-color-on-primary-fixed: rgb(0 30 45);
34
- --md-sys-color-primary-fixed-dim: rgb(145 206 245);
35
- --md-sys-color-on-primary-fixed-variant: rgb(0 76 107);
36
- --md-sys-color-secondary-fixed: rgb(210 229 244);
37
- --md-sys-color-on-secondary-fixed: rgb(10 30 40);
38
- --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(55 73 85);
40
- --md-sys-color-tertiary-fixed: rgb(231 222 255);
41
- --md-sys-color-on-tertiary-fixed: rgb(30 23 53);
42
- --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(74 66 99);
44
- --md-sys-color-surface-dim: rgb(15 20 23);
45
- --md-sys-color-surface-bright: rgb(53 58 61);
46
- --md-sys-color-surface-container-lowest: rgb(10 15 18);
47
- --md-sys-color-surface-container-low: rgb(24 28 31);
48
- --md-sys-color-surface-container: rgb(28 32 36);
49
- --md-sys-color-surface-container-high: rgb(38 43 46);
50
- --md-sys-color-surface-container-highest: rgb(49 53 57);
51
- }
package/docs/themes/airblue/light-hc.css DELETED
@@ -1,51 +0,0 @@
1
- .light-high-contrast {
2
- --md-sys-color-primary: rgb(0 48 69);
3
- --md-sys-color-surface-tint: rgb(32 100 135);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: rgb(0 79 110);
6
- --md-sys-color-on-primary-container: rgb(255 255 255);
7
- --md-sys-color-secondary: rgb(28 46 58);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(57 75 88);
10
- --md-sys-color-on-secondary-container: rgb(255 255 255);
11
- --md-sys-color-tertiary: rgb(47 39 71);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(76 68 102);
14
- --md-sys-color-on-tertiary-container: rgb(255 255 255);
15
- --md-sys-color-error: rgb(96 0 4);
16
- --md-sys-color-on-error: rgb(255 255 255);
17
- --md-sys-color-error-container: rgb(152 0 10);
18
- --md-sys-color-on-error-container: rgb(255 255 255);
19
- --md-sys-color-background: rgb(246 250 254);
20
- --md-sys-color-on-background: rgb(24 28 31);
21
- --md-sys-color-surface: rgb(246 250 254);
22
- --md-sys-color-on-surface: rgb(0 0 0);
23
- --md-sys-color-surface-variant: rgb(221 227 234);
24
- --md-sys-color-on-surface-variant: rgb(0 0 0);
25
- --md-sys-color-outline: rgb(38 45 50);
26
- --md-sys-color-outline-variant: rgb(67 74 79);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(44 49 52);
30
- --md-sys-color-inverse-on-surface: rgb(255 255 255);
31
- --md-sys-color-inverse-primary: rgb(145 206 245);
32
- --md-sys-color-primary-fixed: rgb(0 79 110);
33
- --md-sys-color-on-primary-fixed: rgb(255 255 255);
34
- --md-sys-color-primary-fixed-dim: rgb(0 55 78);
35
- --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36
- --md-sys-color-secondary-fixed: rgb(57 75 88);
37
- --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38
- --md-sys-color-secondary-fixed-dim: rgb(35 53 64);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40
- --md-sys-color-tertiary-fixed: rgb(76 68 102);
41
- --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42
- --md-sys-color-tertiary-fixed-dim: rgb(53 46 78);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44
- --md-sys-color-surface-dim: rgb(181 185 189);
45
- --md-sys-color-surface-bright: rgb(246 250 254);
46
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
47
- --md-sys-color-surface-container-low: rgb(238 241 246);
48
- --md-sys-color-surface-container: rgb(223 227 231);
49
- --md-sys-color-surface-container-high: rgb(209 213 217);
50
- --md-sys-color-surface-container-highest: rgb(195 199 203);
51
- }
package/docs/themes/airblue/light-mc.css DELETED
@@ -1,51 +0,0 @@
1
- .light-medium-contrast {
2
- --md-sys-color-primary: rgb(0 58 83);
3
- --md-sys-color-surface-tint: rgb(32 100 135);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: rgb(51 115 150);
6
- --md-sys-color-on-primary-container: rgb(255 255 255);
7
- --md-sys-color-secondary: rgb(38 56 68);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(93 111 124);
10
- --md-sys-color-on-secondary-container: rgb(255 255 255);
11
- --md-sys-color-tertiary: rgb(57 49 82);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(113 104 140);
14
- --md-sys-color-on-tertiary-container: rgb(255 255 255);
15
- --md-sys-color-error: rgb(116 0 6);
16
- --md-sys-color-on-error: rgb(255 255 255);
17
- --md-sys-color-error-container: rgb(207 44 39);
18
- --md-sys-color-on-error-container: rgb(255 255 255);
19
- --md-sys-color-background: rgb(246 250 254);
20
- --md-sys-color-on-background: rgb(24 28 31);
21
- --md-sys-color-surface: rgb(246 250 254);
22
- --md-sys-color-on-surface: rgb(13 18 21);
23
- --md-sys-color-surface-variant: rgb(221 227 234);
24
- --md-sys-color-on-surface-variant: rgb(48 55 60);
25
- --md-sys-color-outline: rgb(76 83 89);
26
- --md-sys-color-outline-variant: rgb(103 110 116);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(44 49 52);
30
- --md-sys-color-inverse-on-surface: rgb(238 241 246);
31
- --md-sys-color-inverse-primary: rgb(145 206 245);
32
- --md-sys-color-primary-fixed: rgb(51 115 150);
33
- --md-sys-color-on-primary-fixed: rgb(255 255 255);
34
- --md-sys-color-primary-fixed-dim: rgb(15 91 125);
35
- --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36
- --md-sys-color-secondary-fixed: rgb(93 111 124);
37
- --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38
- --md-sys-color-secondary-fixed-dim: rgb(69 87 100);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40
- --md-sys-color-tertiary-fixed: rgb(113 104 140);
41
- --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42
- --md-sys-color-tertiary-fixed-dim: rgb(88 80 114);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44
- --md-sys-color-surface-dim: rgb(195 199 203);
45
- --md-sys-color-surface-bright: rgb(246 250 254);
46
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
47
- --md-sys-color-surface-container-low: rgb(240 244 248);
48
- --md-sys-color-surface-container: rgb(229 232 237);
49
- --md-sys-color-surface-container-high: rgb(217 221 226);
50
- --md-sys-color-surface-container-highest: rgb(206 210 214);
51
- }
package/docs/themes/airblue/light.css DELETED
@@ -1,51 +0,0 @@
1
- .light {
2
- --md-sys-color-primary: rgb(32 100 135);
3
- --md-sys-color-surface-tint: rgb(32 100 135);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: rgb(198 231 255);
6
- --md-sys-color-on-primary-container: rgb(0 76 107);
7
- --md-sys-color-secondary: rgb(79 97 109);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(210 229 244);
10
- --md-sys-color-on-secondary-container: rgb(55 73 85);
11
- --md-sys-color-tertiary: rgb(98 89 124);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(231 222 255);
14
- --md-sys-color-on-tertiary-container: rgb(74 66 99);
15
- --md-sys-color-error: rgb(186 26 26);
16
- --md-sys-color-on-error: rgb(255 255 255);
17
- --md-sys-color-error-container: rgb(255 218 214);
18
- --md-sys-color-on-error-container: rgb(147 0 10);
19
- --md-sys-color-background: rgb(246 250 254);
20
- --md-sys-color-on-background: rgb(24 28 31);
21
- --md-sys-color-surface: rgb(246 250 254);
22
- --md-sys-color-on-surface: rgb(24 28 31);
23
- --md-sys-color-surface-variant: rgb(221 227 234);
24
- --md-sys-color-on-surface-variant: rgb(65 72 77);
25
- --md-sys-color-outline: rgb(113 120 126);
26
- --md-sys-color-outline-variant: rgb(193 199 206);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(44 49 52);
30
- --md-sys-color-inverse-on-surface: rgb(238 241 246);
31
- --md-sys-color-inverse-primary: rgb(145 206 245);
32
- --md-sys-color-primary-fixed: rgb(198 231 255);
33
- --md-sys-color-on-primary-fixed: rgb(0 30 45);
34
- --md-sys-color-primary-fixed-dim: rgb(145 206 245);
35
- --md-sys-color-on-primary-fixed-variant: rgb(0 76 107);
36
- --md-sys-color-secondary-fixed: rgb(210 229 244);
37
- --md-sys-color-on-secondary-fixed: rgb(10 30 40);
38
- --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(55 73 85);
40
- --md-sys-color-tertiary-fixed: rgb(231 222 255);
41
- --md-sys-color-on-tertiary-fixed: rgb(30 23 53);
42
- --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(74 66 99);
44
- --md-sys-color-surface-dim: rgb(215 218 223);
45
- --md-sys-color-surface-bright: rgb(246 250 254);
46
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
47
- --md-sys-color-surface-container-low: rgb(240 244 248);
48
- --md-sys-color-surface-container: rgb(235 238 243);
49
- --md-sys-color-surface-container-high: rgb(229 232 237);
50
- --md-sys-color-surface-container-highest: rgb(223 227 231);
51
- }