material-inspired-component-library 1.2.1 → 1.3.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 (53) hide show
  1. package/README.md +12 -2
  2. package/components/bottomsheet/index.scss +18 -16
  3. package/components/button/README.md +1 -1
  4. package/components/button/index.scss +57 -80
  5. package/components/card/index.scss +33 -31
  6. package/components/checkbox/index.scss +5 -9
  7. package/components/dialog/index.scss +38 -29
  8. package/components/iconbutton/README.md +1 -1
  9. package/components/iconbutton/index.scss +51 -81
  10. package/components/list/index.scss +45 -33
  11. package/components/list/index.ts +10 -9
  12. package/components/menu/README.md +67 -4
  13. package/components/menu/index.scss +43 -39
  14. package/components/menu/index.ts +47 -16
  15. package/components/navigationrail/README.md +99 -0
  16. package/components/navigationrail/index.scss +157 -0
  17. package/components/radio/index.scss +28 -15
  18. package/components/select/index.scss +4 -12
  19. package/components/sidesheet/index.scss +21 -19
  20. package/components/switch/index.scss +11 -8
  21. package/components/textfield/index.scss +16 -7
  22. package/dist/bottomsheet.css +1 -1
  23. package/dist/button.css +1 -1
  24. package/dist/card.css +1 -1
  25. package/dist/checkbox.css +1 -1
  26. package/dist/components/menu/index.d.ts +0 -11
  27. package/dist/dialog.css +1 -1
  28. package/dist/iconbutton.css +1 -1
  29. package/dist/list.css +1 -1
  30. package/dist/menu.css +1 -1
  31. package/dist/micl.css +1 -1
  32. package/dist/micl.js +1 -1
  33. package/dist/navigationrail.css +1 -0
  34. package/dist/navigationrail.js +1 -0
  35. package/dist/radio.css +1 -1
  36. package/dist/select.css +1 -1
  37. package/dist/sidesheet.css +1 -1
  38. package/dist/slider.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/textfield.css +1 -1
  41. package/docs/dialog.html +4 -4
  42. package/docs/docs.js +2 -2
  43. package/docs/index.html +3 -1
  44. package/docs/menu.html +183 -3
  45. package/docs/micl.css +1 -1
  46. package/docs/micl.js +1 -1
  47. package/docs/navigationrail.html +75 -0
  48. package/micl.ts +10 -8
  49. package/package.json +7 -7
  50. package/styles/statelayer.scss +14 -0
  51. package/styles.scss +1 -1
  52. package/webpack.config.js +37 -0
  53. package/styles/ripple.scss +0 -50
package/docs/dialog.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>MICL Dialogs</title>
7
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=close,dark_mode,info,logout,person,restart_alt&display=block">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,info,person,restart_alt&display=block">
9
9
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
10
  <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
@@ -53,19 +53,19 @@
53
53
  <hr class="micl-divider">
54
54
  <ul class="micl-list" style="--md-sys-list-item-container-color:transparent;margin-block:24px">
55
55
  <li class="micl-list-item-one">
56
- <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
56
+ <span class="micl-list-item__avatar">JH</span>
57
57
  <span class="micl-list-item__text">
58
58
  <span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
59
59
  </span>
60
60
  </li>
61
61
  <li class="micl-list-item-one">
62
- <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
62
+ <span class="micl-list-item__avatar">LS</span>
63
63
  <span class="micl-list-item__text">
64
64
  <span class="micl-list-item__headline">laura.smith@outlook.com</span>
65
65
  </span>
66
66
  </li>
67
67
  <li class="micl-list-item-one">
68
- <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
68
+ <span class="micl-list-item__avatar">LH</span>
69
69
  <span class="micl-list-item__text">
70
70
  <span class="micl-list-item__headline">lucy.hong@gmail.com</span>
71
71
  </span>
package/docs/docs.js CHANGED
@@ -8,13 +8,13 @@ document.getElementById('settings-placeholder').innerHTML =
8
8
  <div class="micl-textfield-outlined">
9
9
  <label for="theme">Theme</label>
10
10
  <select id="theme">
11
- <option class="micl-list-item-one" value="airblue">
11
+ <option class="micl-list-item-one" selected value="airblue">
12
12
  <span class="micl-list-item__text">Air blue</span>
13
13
  </option>
14
14
  <option class="micl-list-item-one" value="barnred">
15
15
  <span class="micl-list-item__text">Barn red</span>
16
16
  </option>
17
- <option class="micl-list-item-one" selected value="citrine">
17
+ <option class="micl-list-item-one" value="citrine">
18
18
  <span class="micl-list-item__text">Citrine</span>
19
19
  </option>
20
20
  <option class="micl-list-item-one" value="olivegreen">
package/docs/index.html CHANGED
@@ -3,6 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
6
7
  <title>MICL Showcase</title>
7
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
9
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,globe,link,more_vert,newspaper,person,share&display=block">
@@ -81,7 +82,7 @@
81
82
  <input type="checkbox" class="micl-switch" id="myswitch" checked value="c1" role="switch">
82
83
  <label for="myswitch" class="md-sys-typescale-body-medium">First switch</label>
83
84
  </div>
84
- <input type="range" class="micl-slider-xs" style="width:100%;margin-block:16px" min="1" max="10" value="6">
85
+ <input type="range" class="micl-slider-xs" style="width:100%;margin-block:16px" min="1" max="10" value="6" aria-label="Slider component">
85
86
  </div>
86
87
  </div>
87
88
 
@@ -303,6 +304,7 @@
303
304
  <p><a href="iconbutton.html" class="md-sys-typescale-body-large">Icon buttons</a></p>
304
305
  <p><a href="list.html" class="md-sys-typescale-body-large">Lists</a></p>
305
306
  <p><a href="menu.html" class="md-sys-typescale-body-large">Menus</a></p>
307
+ <p><a href="navigationrail.html" class="md-sys-typescale-body-large">Navigation rails</a></p>
306
308
  <p><a href="radio.html" class="md-sys-typescale-body-large">Radio buttons</a></p>
307
309
  <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
308
310
  <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
package/docs/menu.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>MICL Menus</title>
7
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=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,person,settings&display=block">
9
9
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
10
  <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
@@ -70,7 +70,7 @@
70
70
  </li>
71
71
  <li class="micl-list-item-two">
72
72
  <label>
73
- <span class="micl-list-item__icon material-symbols-outlined">person</span>
73
+ <span class="micl-list-item__icon"></span>
74
74
  <span class="micl-list-item__text">
75
75
  <span class="micl-list-item__headline">Person</span>
76
76
  <span class="micl-list-item__supporting-text">Are you an administrator?</span>
@@ -86,11 +86,11 @@
86
86
  </span>
87
87
  </li>
88
88
  <li class="micl-list-item-two micl-list-item__divider">
89
- <span class="micl-list-item__icon material-symbols-outlined">confirmation_number</span>
90
89
  <span class="micl-list-item__text">
91
90
  <span class="micl-list-item__headline">Contact</span>
92
91
  <span class="micl-list-item__supporting-text">Call me!</span>
93
92
  </span>
93
+ <span class="micl-list-item__icon material-symbols-outlined">keyboard_command_key</span>
94
94
  </li>
95
95
  </ul>
96
96
  </nav>
@@ -137,6 +137,186 @@
137
137
  </ul>
138
138
  </nav>
139
139
  </div>
140
+
141
+ <div style="position:relative">
142
+ <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu4">Open Menu with Sub-Menus</button>
143
+ <nav id="mymenu4" class="micl-menu" popover>
144
+ <ul class="micl-list">
145
+ <li class="micl-list-item-one" tabindex="0">
146
+ <button popovertarget="mymenu5" tabindex="-1">
147
+ <span class="micl-list-item__text">
148
+ <span class="micl-list-item__headline">Europe</span>
149
+ </span>
150
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
151
+ </button>
152
+ <nav id="mymenu5" class="micl-menu" popover>
153
+ <ul class="micl-list">
154
+ <li class="micl-list-item-one" tabindex="0">
155
+ <span class="micl-list-item__text">
156
+ <span class="micl-list-item__headline">Norway</span>
157
+ </span>
158
+ </li>
159
+ <li class="micl-list-item-one">
160
+ <span class="micl-list-item__text">
161
+ <span class="micl-list-item__headline">Sweden</span>
162
+ </span>
163
+ </li>
164
+ <li class="micl-list-item-one">
165
+ <span class="micl-list-item__text">
166
+ <span class="micl-list-item__headline">France</span>
167
+ </span>
168
+ </li>
169
+ <li class="micl-list-item-one">
170
+ <span class="micl-list-item__text">
171
+ <span class="micl-list-item__headline">Italy</span>
172
+ </span>
173
+ </li>
174
+ <li class="micl-list-item-one">
175
+ <span class="micl-list-item__text">
176
+ <span class="micl-list-item__headline">Slovenia</span>
177
+ </span>
178
+ </li>
179
+ </ul>
180
+ </nav>
181
+ </li>
182
+ <li class="micl-list-item-one">
183
+ <button popovertarget="mymenu6" tabindex="-1">
184
+ <span class="micl-list-item__text">
185
+ <span class="micl-list-item__headline">Africa</span>
186
+ </span>
187
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
188
+ </button>
189
+ <nav id="mymenu6" class="micl-menu" popover>
190
+ <ul class="micl-list">
191
+ <li class="micl-list-item-one" tabindex="0">
192
+ <span class="micl-list-item__text">
193
+ <span class="micl-list-item__headline">Egypt</span>
194
+ </span>
195
+ </li>
196
+ <li class="micl-list-item-one">
197
+ <span class="micl-list-item__text">
198
+ <span class="micl-list-item__headline">Cameroon</span>
199
+ </span>
200
+ </li>
201
+ <li class="micl-list-item-one">
202
+ <span class="micl-list-item__text">
203
+ <span class="micl-list-item__headline">Botswana</span>
204
+ </span>
205
+ </li>
206
+ <li class="micl-list-item-one">
207
+ <span class="micl-list-item__text">
208
+ <span class="micl-list-item__headline">Ghana</span>
209
+ </span>
210
+ </li>
211
+ <li class="micl-list-item-one">
212
+ <span class="micl-list-item__text">
213
+ <span class="micl-list-item__headline">Niger</span>
214
+ </span>
215
+ </li>
216
+ </ul>
217
+ </nav>
218
+ </li>
219
+ <li class="micl-list-item-one">
220
+ <button popovertarget="mymenu7" tabindex="-1">
221
+ <span class="micl-list-item__text">
222
+ <span class="micl-list-item__headline">Asia</span>
223
+ </span>
224
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
225
+ </button>
226
+ <nav id="mymenu7" class="micl-menu" popover>
227
+ <ul class="micl-list">
228
+ <li class="micl-list-item-one" tabindex="0">
229
+ <span class="micl-list-item__text">
230
+ <span class="micl-list-item__headline">Bhutan</span>
231
+ </span>
232
+ </li>
233
+ <li class="micl-list-item-one">
234
+ <span class="micl-list-item__text">
235
+ <span class="micl-list-item__headline">India</span>
236
+ </span>
237
+ </li>
238
+ <li class="micl-list-item-one">
239
+ <span class="micl-list-item__text">
240
+ <span class="micl-list-item__headline">Jordan</span>
241
+ </span>
242
+ </li>
243
+ <li class="micl-list-item-one">
244
+ <span class="micl-list-item__text">
245
+ <span class="micl-list-item__headline">Vietnam</span>
246
+ </span>
247
+ </li>
248
+ <li class="micl-list-item-one">
249
+ <span class="micl-list-item__text">
250
+ <span class="micl-list-item__headline">Mongolia</span>
251
+ </span>
252
+ </li>
253
+ </ul>
254
+ </nav>
255
+ </li>
256
+ <li class="micl-list-item-one">
257
+ <button popovertarget="mymenu8" tabindex="-1">
258
+ <span class="micl-list-item__text">
259
+ <span class="micl-list-item__headline">America</span>
260
+ </span>
261
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
262
+ </button>
263
+ <nav id="mymenu8" class="micl-menu" popover>
264
+ <ul class="micl-list">
265
+ <li class="micl-list-item-one" tabindex="0">
266
+ <button popovertarget="mymenu9" tabindex="-1">
267
+ <span class="micl-list-item__text">
268
+ <span class="micl-list-item__headline">North America</span>
269
+ </span>
270
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
271
+ </button>
272
+ <nav id="mymenu9" class="micl-menu" popover>
273
+ <ul class="micl-list">
274
+ <li class="micl-list-item-one" tabindex="0">
275
+ <span class="micl-list-item__text">
276
+ <span class="micl-list-item__headline">Mexico</span>
277
+ </span>
278
+ </li>
279
+ <li class="micl-list-item-one">
280
+ <span class="micl-list-item__text">
281
+ <span class="micl-list-item__headline">Canada</span>
282
+ </span>
283
+ </li>
284
+ <li class="micl-list-item-one">
285
+ <span class="micl-list-item__text">
286
+ <span class="micl-list-item__headline">USA</span>
287
+ </span>
288
+ </li>
289
+ </ul>
290
+ </nav>
291
+ </li>
292
+ <li class="micl-list-item-one">
293
+ <button popovertarget="mymenu10" tabindex="-1">
294
+ <span class="micl-list-item__text">
295
+ <span class="micl-list-item__headline">South America</span>
296
+ </span>
297
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
298
+ </button>
299
+ <nav id="mymenu10" class="micl-menu" popover>
300
+ <ul class="micl-list">
301
+ <li class="micl-list-item-one" tabindex="0">
302
+ <span class="micl-list-item__text">
303
+ <span class="micl-list-item__headline">Brazil</span>
304
+ </span>
305
+ </li>
306
+ <li class="micl-list-item-one">
307
+ <span class="micl-list-item__text">
308
+ <span class="micl-list-item__headline">Peru</span>
309
+ </span>
310
+ </li>
311
+ </ul>
312
+ </nav>
313
+ </li>
314
+ </ul>
315
+ </nav>
316
+ </li>
317
+ </ul>
318
+ </nav>
319
+ </div>
140
320
  </div>
141
321
  </div>
142
322
  </div>