material-inspired-component-library 1.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 (174) hide show
  1. package/.editorconfig +12 -0
  2. package/.gitattributes +9 -0
  3. package/.github/ISSUE_TEMPLATE/bug_report.md +35 -0
  4. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  5. package/LICENSE +21 -0
  6. package/README.md +99 -0
  7. package/components/README.md +12 -0
  8. package/components/accordion/README.md +94 -0
  9. package/components/bottomsheet/README.md +77 -0
  10. package/components/bottomsheet/bottomsheet.scss +134 -0
  11. package/components/bottomsheet/index.ts +152 -0
  12. package/components/button/README.md +92 -0
  13. package/components/button/button.scss +515 -0
  14. package/components/button/index.ts +73 -0
  15. package/components/card/README.md +125 -0
  16. package/components/card/card.scss +261 -0
  17. package/components/checkbox/README.md +62 -0
  18. package/components/checkbox/checkbox.scss +275 -0
  19. package/components/checkbox/index.ts +48 -0
  20. package/components/dialog/README.md +133 -0
  21. package/components/dialog/dialog.scss +262 -0
  22. package/components/divider/README.md +52 -0
  23. package/components/divider/divider.scss +74 -0
  24. package/components/iconbutton/README.md +86 -0
  25. package/components/iconbutton/iconbutton.scss +461 -0
  26. package/components/iconbutton/index.ts +73 -0
  27. package/components/list/README.md +176 -0
  28. package/components/list/index.ts +108 -0
  29. package/components/list/list.scss +295 -0
  30. package/components/menu/README.md +96 -0
  31. package/components/menu/index.ts +77 -0
  32. package/components/menu/menu.scss +124 -0
  33. package/components/radio/README.md +53 -0
  34. package/components/radio/radio.scss +138 -0
  35. package/components/select/README.md +84 -0
  36. package/components/select/select.scss +122 -0
  37. package/components/sidesheet/README.md +99 -0
  38. package/components/sidesheet/sidesheet.scss +162 -0
  39. package/components/slider/README.md +69 -0
  40. package/components/slider/index.ts +114 -0
  41. package/components/slider/slider.scss +258 -0
  42. package/components/switch/README.md +49 -0
  43. package/components/switch/switch.scss +176 -0
  44. package/components/textfield/README.md +75 -0
  45. package/components/textfield/index.ts +81 -0
  46. package/components/textfield/textfield.scss +387 -0
  47. package/components.ts +169 -0
  48. package/dist/bottomsheet.css +1 -0
  49. package/dist/bottomsheet.js +0 -0
  50. package/dist/button.css +1 -0
  51. package/dist/button.js +0 -0
  52. package/dist/card.css +1 -0
  53. package/dist/card.js +0 -0
  54. package/dist/checkbox.css +1 -0
  55. package/dist/checkbox.js +0 -0
  56. package/dist/dialog.css +1 -0
  57. package/dist/dialog.js +0 -0
  58. package/dist/divider.css +1 -0
  59. package/dist/divider.js +0 -0
  60. package/dist/iconbutton.css +1 -0
  61. package/dist/iconbutton.js +0 -0
  62. package/dist/list.css +1 -0
  63. package/dist/list.js +0 -0
  64. package/dist/menu.css +1 -0
  65. package/dist/menu.js +0 -0
  66. package/dist/micl.css +1 -0
  67. package/dist/micl.js +1 -0
  68. package/dist/radio.css +1 -0
  69. package/dist/radio.js +0 -0
  70. package/dist/select.css +1 -0
  71. package/dist/select.js +0 -0
  72. package/dist/sidesheet.css +1 -0
  73. package/dist/sidesheet.js +0 -0
  74. package/dist/slider.css +1 -0
  75. package/dist/slider.js +0 -0
  76. package/dist/switch.css +1 -0
  77. package/dist/switch.js +0 -0
  78. package/dist/textfield.css +1 -0
  79. package/dist/textfield.js +0 -0
  80. package/docs/accordion.html +285 -0
  81. package/docs/bottomsheet.html +162 -0
  82. package/docs/button.html +206 -0
  83. package/docs/card-awards.webp +0 -0
  84. package/docs/card-cabinet.webp +0 -0
  85. package/docs/card-city.webp +0 -0
  86. package/docs/card-fingerprint.webp +0 -0
  87. package/docs/card-holiday.webp +0 -0
  88. package/docs/card-names.webp +0 -0
  89. package/docs/card.html +91 -0
  90. package/docs/checkbox.html +99 -0
  91. package/docs/dialog.html +153 -0
  92. package/docs/divider.html +103 -0
  93. package/docs/docs.css +34 -0
  94. package/docs/docs.js +69 -0
  95. package/docs/iconbutton.html +197 -0
  96. package/docs/index.html +319 -0
  97. package/docs/list.html +224 -0
  98. package/docs/menu.html +143 -0
  99. package/docs/micl.css +1 -0
  100. package/docs/micl.js +1 -0
  101. package/docs/radio.html +101 -0
  102. package/docs/select.html +205 -0
  103. package/docs/sidesheet.html +115 -0
  104. package/docs/slider.html +72 -0
  105. package/docs/switch.html +151 -0
  106. package/docs/textfield.html +151 -0
  107. package/docs/themes/airblue/dark-hc.css +51 -0
  108. package/docs/themes/airblue/dark-mc.css +51 -0
  109. package/docs/themes/airblue/dark.css +51 -0
  110. package/docs/themes/airblue/light-hc.css +51 -0
  111. package/docs/themes/airblue/light-mc.css +51 -0
  112. package/docs/themes/airblue/light.css +51 -0
  113. package/docs/themes/airblue/theme.css +306 -0
  114. package/docs/themes/barnred/dark-hc.css +51 -0
  115. package/docs/themes/barnred/dark-mc.css +51 -0
  116. package/docs/themes/barnred/dark.css +51 -0
  117. package/docs/themes/barnred/light-hc.css +51 -0
  118. package/docs/themes/barnred/light-mc.css +51 -0
  119. package/docs/themes/barnred/light.css +51 -0
  120. package/docs/themes/barnred/theme.css +306 -0
  121. package/docs/themes/citrine/dark-hc.css +51 -0
  122. package/docs/themes/citrine/dark-mc.css +51 -0
  123. package/docs/themes/citrine/dark.css +51 -0
  124. package/docs/themes/citrine/light-hc.css +51 -0
  125. package/docs/themes/citrine/light-mc.css +51 -0
  126. package/docs/themes/citrine/light.css +51 -0
  127. package/docs/themes/citrine/theme.css +306 -0
  128. package/docs/themes/olivegreen/dark-hc.css +51 -0
  129. package/docs/themes/olivegreen/dark-mc.css +51 -0
  130. package/docs/themes/olivegreen/dark.css +51 -0
  131. package/docs/themes/olivegreen/light-hc.css +51 -0
  132. package/docs/themes/olivegreen/light-mc.css +51 -0
  133. package/docs/themes/olivegreen/light.css +51 -0
  134. package/docs/themes/olivegreen/theme.css +306 -0
  135. package/package.json +62 -0
  136. package/styles/README.md +99 -0
  137. package/styles/elevation.scss +36 -0
  138. package/styles/motion.scss +124 -0
  139. package/styles/ripple.scss +50 -0
  140. package/styles/shapes.scss +46 -0
  141. package/styles/statelayer.scss +42 -0
  142. package/styles/typography.scss +568 -0
  143. package/styles.scss +43 -0
  144. package/themes/README.md +57 -0
  145. package/themes/airblue/dark-hc.css +51 -0
  146. package/themes/airblue/dark-mc.css +51 -0
  147. package/themes/airblue/dark.css +51 -0
  148. package/themes/airblue/light-hc.css +51 -0
  149. package/themes/airblue/light-mc.css +51 -0
  150. package/themes/airblue/light.css +51 -0
  151. package/themes/airblue/theme.css +306 -0
  152. package/themes/barnred/dark-hc.css +51 -0
  153. package/themes/barnred/dark-mc.css +51 -0
  154. package/themes/barnred/dark.css +51 -0
  155. package/themes/barnred/light-hc.css +51 -0
  156. package/themes/barnred/light-mc.css +51 -0
  157. package/themes/barnred/light.css +51 -0
  158. package/themes/barnred/theme.css +306 -0
  159. package/themes/citrine/dark-hc.css +51 -0
  160. package/themes/citrine/dark-mc.css +51 -0
  161. package/themes/citrine/dark.css +51 -0
  162. package/themes/citrine/light-hc.css +51 -0
  163. package/themes/citrine/light-mc.css +51 -0
  164. package/themes/citrine/light.css +51 -0
  165. package/themes/citrine/theme.css +306 -0
  166. package/themes/olivegreen/dark-hc.css +51 -0
  167. package/themes/olivegreen/dark-mc.css +51 -0
  168. package/themes/olivegreen/dark.css +51 -0
  169. package/themes/olivegreen/light-hc.css +51 -0
  170. package/themes/olivegreen/light-mc.css +51 -0
  171. package/themes/olivegreen/light.css +51 -0
  172. package/themes/olivegreen/theme.css +306 -0
  173. package/tsconfig.json +110 -0
  174. package/webpack.config.js +49 -0
package/docs/switch.html ADDED
@@ -0,0 +1,151 @@
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
+ <title>MICL Switches</title>
7
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
+ <link rel="stylesheet" href="docs.css">
12
+ <style>
13
+ label {
14
+ color: var(--md-sys-color-on-surface);
15
+ }
16
+ .micl-card-filled .micl-card__content,
17
+ .micl-card-outlined.unselectedicon .micl-card__content {
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: flex-end;
21
+ }
22
+ .switch {
23
+ display: flex;
24
+ align-items: center;
25
+ column-gap: 16px;
26
+ height: 48px;
27
+ }
28
+ .micl-card-outlined.unselectedicon .switch {
29
+ width: 100%;
30
+ justify-content: space-between;
31
+ }
32
+ .noicons input[type=checkbox].micl-switch {
33
+ --md-sys-switch-selected-icon: "";
34
+ --md-sys-switch-unselected-icon: "";
35
+ }
36
+ .selectedicon input[type=checkbox].micl-switch {
37
+ --md-sys-switch-unselected-icon: "";
38
+ }
39
+ .unselectedicon input[type=checkbox].micl-switch {
40
+ --md-sys-switch-selected-icon: "";
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="light">
45
+ <div class="headline">
46
+ <h1 class="md-sys-typescale-emphasized-display-small">Switches</h1>
47
+ <div id="settings-placeholder"></div>
48
+ </div>
49
+
50
+ <div class="cards">
51
+ <div class="micl-card-elevated">
52
+ <div class="micl-card__headline-s">
53
+ <h2>Switches with icons</h2>
54
+ </div>
55
+ <div class="micl-card__content">
56
+ <div class="switch">
57
+ <input type="checkbox" class="micl-switch" id="myswitch1" checked value="c1" role="switch">
58
+ <label for="myswitch1" class="md-sys-typescale-body-medium">First Choice</label>
59
+ </div>
60
+ <div class="switch">
61
+ <input type="checkbox" class="micl-switch" id="myswitch2" value="c2" role="switch">
62
+ <label for="myswitch2" class="md-sys-typescale-body-medium">Second Choice</label>
63
+ </div>
64
+ <div class="switch">
65
+ <input type="checkbox" class="micl-switch" id="myswitch3" value="c3" disabled role="switch">
66
+ <label for="myswitch3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
67
+ </div>
68
+ <div class="switch">
69
+ <input type="checkbox" class="micl-switch" id="myswitch4" value="c4" checked disabled role="switch">
70
+ <label for="myswitch4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="micl-card-filled noicons">
76
+ <div class="micl-card__headline-s">
77
+ <h2>Switches without icons</h2>
78
+ </div>
79
+ <div class="micl-card__content">
80
+ <div class="switch">
81
+ <label for="myswitch5" class="md-sys-typescale-body-medium">First Choice</label>
82
+ <input type="checkbox" class="micl-switch" id="myswitch5" checked value="c1" role="switch">
83
+ </div>
84
+ <div class="switch">
85
+ <label for="myswitch6" class="md-sys-typescale-body-medium">Second Choice</label>
86
+ <input type="checkbox" class="micl-switch" id="myswitch6" value="c2" role="switch">
87
+ </div>
88
+ <div class="switch">
89
+ <label for="myswitch7" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
90
+ <input type="checkbox" class="micl-switch" id="myswitch7" value="c3" disabled role="switch">
91
+ </div>
92
+ <div class="switch">
93
+ <label for="myswitch8" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
94
+ <input type="checkbox" class="micl-switch" id="myswitch8" value="c4" checked disabled role="switch">
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="micl-card-outlined selectedicon">
100
+ <div class="micl-card__headline-s">
101
+ <h2>Switches with selected icon</h2>
102
+ </div>
103
+ <div class="micl-card__content">
104
+ <div class="switch">
105
+ <input type="checkbox" class="micl-switch" id="myswitch9" checked value="c1" role="switch">
106
+ <label for="myswitch9" class="md-sys-typescale-body-medium">First Choice</label>
107
+ </div>
108
+ <div class="switch">
109
+ <input type="checkbox" class="micl-switch" id="myswitch10" value="c2" role="switch">
110
+ <label for="myswitch10" class="md-sys-typescale-body-medium">Second Choice</label>
111
+ </div>
112
+ <div class="switch">
113
+ <input type="checkbox" class="micl-switch" id="myswitch11" value="c3" disabled role="switch">
114
+ <label for="myswitch11" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
115
+ </div>
116
+ <div class="switch">
117
+ <input type="checkbox" class="micl-switch" id="myswitch12" value="c4" checked disabled role="switch">
118
+ <label for="myswitch12" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="micl-card-outlined unselectedicon">
124
+ <div class="micl-card__headline-s">
125
+ <h2>Switches with unselected icon</h2>
126
+ </div>
127
+ <div class="micl-card__content">
128
+ <div class="switch">
129
+ <label for="myswitch13" class="md-sys-typescale-body-medium">First Choice</label>
130
+ <input type="checkbox" class="micl-switch" id="myswitch13" checked value="c1" role="switch">
131
+ </div>
132
+ <div class="switch">
133
+ <label for="myswitch14" class="md-sys-typescale-body-medium">Second Choice</label>
134
+ <input type="checkbox" class="micl-switch" id="myswitch14" value="c2" role="switch">
135
+ </div>
136
+ <div class="switch">
137
+ <label for="myswitch15" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
138
+ <input type="checkbox" class="micl-switch" id="myswitch15" value="c3" disabled role="switch">
139
+ </div>
140
+ <div class="switch">
141
+ <label for="myswitch16" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
142
+ <input type="checkbox" class="micl-switch" id="myswitch16" value="c4" checked disabled role="switch">
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <script src="micl.js"></script>
149
+ <script src="docs.js"></script>
150
+ </body>
151
+ </html>
package/docs/textfield.html ADDED
@@ -0,0 +1,151 @@
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
+ <title>MICL Text Fields</title>
7
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,search&display=block">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
+ <link rel="stylesheet" href="docs.css">
12
+ <style>
13
+ .micl-textfield-outlined, .micl-textfield-filled {
14
+ margin: 32px 0;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="light">
19
+ <div class="headline">
20
+ <h1 class="md-sys-typescale-emphasized-display-small">Text fields</h1>
21
+ <div id="settings-placeholder"></div>
22
+ </div>
23
+
24
+ <div class="cards">
25
+ <div class="micl-card-elevated">
26
+ <div class="micl-card__content">
27
+ <div class="micl-textfield-outlined">
28
+ <label for="mytextfield1">Label text</label>
29
+ <input type="text" id="mytextfield1">
30
+ </div>
31
+ <div class="micl-textfield-outlined">
32
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
33
+ <label for="mytextfield2">Name</label>
34
+ <input type="text" id="mytextfield2" value="Marie Curie">
35
+ </div>
36
+ <div class="micl-textfield-outlined">
37
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
38
+ <label for="mytextfield3">Label text</label>
39
+ <input type="text" id="mytextfield3">
40
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
41
+ </div>
42
+ <div class="micl-textfield-outlined">
43
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
44
+ <label for="mytextfield4">City</label>
45
+ <input type="text" id="mytextfield4" disabled value="Paris">
46
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
47
+ </div>
48
+ <div class="micl-textfield-outlined micl-textfield--error">
49
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
50
+ <label for="mytextfield5">Label text</label>
51
+ <input type="text" id="mytextfield5">
52
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
53
+ </div>
54
+ <div class="micl-textfield-outlined micl-textfield--error">
55
+ <label for="mytextfield6">Password</label>
56
+ <input type="password" id="mytextfield6" value="foobar">
57
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
58
+ <span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <div class="micl-card-filled">
63
+ <div class="micl-card__content">
64
+ <div class="micl-textfield-outlined">
65
+ <input type="text" name="myname">
66
+ </div>
67
+ <div class="micl-textfield-outlined">
68
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
69
+ <label for="mytextfield12">Text field</label>
70
+ <input type="text" id="mytextfield12" value="Outlined">
71
+ <span class="micl-textfield__supporting-text">Supporting text</span>
72
+ </div>
73
+ <div class="micl-textfield-outlined">
74
+ <span class="micl-textfield__prefix">€</span>
75
+ <label for="mytextfield13">Amount</label>
76
+ <input type="text" id="mytextfield13" value="299.89">
77
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
78
+ </div>
79
+ <div class="micl-textfield-outlined">
80
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
81
+ <label for="mytextfield14">City</label>
82
+ <input type="text" id="mytextfield14" disabled value="Paris">
83
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
84
+ <span class="micl-textfield__supporting-text">This input field is disabled</span>
85
+ </div>
86
+ <div class="micl-textfield-outlined micl-textfield--error">
87
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
88
+ <label for="mytextfield15">Label text</label>
89
+ <input type="text" id="mytextfield15">
90
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
91
+ </div>
92
+ <div class="micl-textfield-outlined micl-textfield--error">
93
+ <label for="mytextfield16">Weight</label>
94
+ <input type="number" id="mytextfield16" value="17800">
95
+ <span class="micl-textfield__suffix">kg</span>
96
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
97
+ <span class="micl-textfield__supporting-text">Too heavy</span>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ <div class="micl-card-outlined">
102
+ <div class="micl-card__content">
103
+ <div class="micl-textfield-filled">
104
+ <label for="mytextfield21">Timestamp</label>
105
+ <input type="datetime-local" id="mytextfield21">
106
+ </div>
107
+ <div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
108
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
109
+ <span class="micl-textfield__prefix">NOK</span>
110
+ <label for="mytextfield22">Amount*</label>
111
+ <input type="text" id="mytextfield22" required value="">
112
+ <span class="micl-textfield__supporting-text">In Norwegian kroner</span>
113
+ </div>
114
+ <div class="micl-textfield-filled">
115
+ <span class="micl-textfield__character-counter"></span>
116
+ <span class="micl-textfield__supporting-text">Enter at least twelve characters</span>
117
+ <span class="micl-textfield__prefix">€</span>
118
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
119
+ <input type="text" id="mytextfield23" maxlength="24">
120
+ <label for="mytextfield23">Label text</label>
121
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
122
+ </div>
123
+ <div class="micl-textfield-filled">
124
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
125
+ <label for="mytextfield24">City</label>
126
+ <input type="text" id="mytextfield24" disabled value="Paris">
127
+ <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
128
+ <span class="micl-textfield__supporting-text">This input field is disabled</span>
129
+ </div>
130
+ <div class="micl-textfield-filled micl-textfield--error">
131
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
132
+ <label for="mytextfield25">Label text</label>
133
+ <input type="text" id="mytextfield25">
134
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
135
+ </div>
136
+ <div class="micl-textfield-filled micl-textfield--error">
137
+ <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
138
+ <label for="mytextfield26">City</label>
139
+ <input type="text" id="mytextfield26" maxlength="20" value="Amsterdaaam">
140
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
141
+ <span class="micl-textfield__supporting-text">Incorrect spelling</span>
142
+ <span class="micl-textfield__character-counter"></span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <script src="micl.js"></script>
149
+ <script src="docs.js"></script>
150
+ </body>
151
+ </html>
package/docs/themes/airblue/dark-hc.css ADDED
@@ -0,0 +1,51 @@
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 ADDED
@@ -0,0 +1,51 @@
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 ADDED
@@ -0,0 +1,51 @@
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 ADDED
@@ -0,0 +1,51 @@
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 ADDED
@@ -0,0 +1,51 @@
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 ADDED
@@ -0,0 +1,51 @@
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
+ }