material-inspired-component-library 3.0.0 → 3.0.1

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 (43) hide show
  1. package/components/checkbox/README.md +9 -0
  2. package/components/divider/index.scss +10 -10
  3. package/components/list/README.md +4 -4
  4. package/components/list/index.scss +3 -3
  5. package/components/radio/README.md +13 -4
  6. package/components/radio/index.scss +6 -4
  7. package/components/select/README.md +28 -6
  8. package/components/select/index.scss +56 -10
  9. package/components/textfield/index.scss +3 -9
  10. package/components/textfield/index.ts +29 -22
  11. package/dist/appbar.css +1 -1
  12. package/dist/bottomsheet.css +1 -1
  13. package/dist/button.css +1 -1
  14. package/dist/card.css +1 -1
  15. package/dist/components/textfield/index.d.ts +1 -1
  16. package/dist/dialog.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/iconbutton.css +1 -1
  19. package/dist/layout.css +1 -0
  20. package/dist/layout.js +1 -0
  21. package/dist/list.css +1 -1
  22. package/dist/menu.css +1 -1
  23. package/dist/micl.css +1 -1
  24. package/dist/micl.js +1 -1
  25. package/dist/navigationrail.css +1 -1
  26. package/dist/radio.css +1 -1
  27. package/dist/select.css +1 -1
  28. package/dist/sidesheet.css +1 -1
  29. package/dist/slider.css +1 -1
  30. package/dist/switch.css +1 -1
  31. package/dist/textfield.css +1 -1
  32. package/docs/checkbox.html +12 -16
  33. package/docs/index.html +5 -5
  34. package/docs/list.html +6 -6
  35. package/docs/micl.css +1 -1
  36. package/docs/micl.js +1 -1
  37. package/docs/radio.html +12 -16
  38. package/docs/select.html +46 -6
  39. package/layout/index.scss +30 -29
  40. package/micl.ts +1 -1
  41. package/package.json +4 -1
  42. package/styles/shapes.scss +0 -2
  43. package/webpack.config.js +1 -1
package/docs/checkbox.html CHANGED
@@ -16,10 +16,6 @@
16
16
  flex-direction: column;
17
17
  align-items: flex-end;
18
18
  }
19
- .checkbox {
20
- display: flex;
21
- align-items: center;
22
- }
23
19
  </style>
24
20
  </head>
25
21
  <body class="micl-window light">
@@ -40,19 +36,19 @@
40
36
  <div class="micl-pane__column">
41
37
  <div class="micl-card-elevated">
42
38
  <div class="micl-card__content">
43
- <div class="checkbox">
39
+ <div class="micl-flex--vcenter">
44
40
  <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1">
45
41
  <label for="mycheckbox1" class="md-sys-typescale-body-medium">First Choice</label>
46
42
  </div>
47
- <div class="checkbox">
43
+ <div class="micl-flex--vcenter">
48
44
  <input type="checkbox" id="mycheckbox2" class="micl-checkbox" checked value="c2">
49
45
  <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second Choice</label>
50
46
  </div>
51
- <div class="checkbox">
47
+ <div class="micl-flex--vcenter">
52
48
  <input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
53
49
  <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice</label>
54
50
  </div>
55
- <div class="checkbox">
51
+ <div class="micl-flex--vcenter">
56
52
  <input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
57
53
  <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice</label>
58
54
  </div>
@@ -60,19 +56,19 @@
60
56
  </div>
61
57
  <div class="micl-card-filled">
62
58
  <div class="micl-card__content">
63
- <div class="checkbox">
59
+ <div class="micl-flex--vcenter">
64
60
  <label for="mycheckbox21" class="md-sys-typescale-body-medium">First Choice</label>
65
61
  <input type="checkbox" id="mycheckbox21" class="micl-checkbox" value="c1">
66
62
  </div>
67
- <div class="checkbox">
63
+ <div class="micl-flex--vcenter">
68
64
  <label for="mycheckbox22" class="md-sys-typescale-body-medium">Second Choice</label>
69
65
  <input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
70
66
  </div>
71
- <div class="checkbox">
67
+ <div class="micl-flex--vcenter">
72
68
  <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice</label>
73
69
  <input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
74
70
  </div>
75
- <div class="checkbox">
71
+ <div class="micl-flex--vcenter">
76
72
  <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice</label>
77
73
  <input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
78
74
  </div>
@@ -82,19 +78,19 @@
82
78
  <div class="micl-pane__column">
83
79
  <div class="micl-card-outlined">
84
80
  <div class="micl-card__content">
85
- <div class="checkbox">
81
+ <div class="micl-flex--vcenter">
86
82
  <input type="checkbox" id="mycheckbox11" class="micl-checkbox micl-checkbox--error" value="c1">
87
83
  <label for="mycheckbox11" class="md-sys-typescale-body-medium">First Choice</label>
88
84
  </div>
89
- <div class="checkbox">
85
+ <div class="micl-flex--vcenter">
90
86
  <input type="checkbox" id="mycheckbox12" class="micl-checkbox micl-checkbox--error" checked value="c2">
91
87
  <label for="mycheckbox12" class="md-sys-typescale-body-medium">Second Choice</label>
92
88
  </div>
93
- <div class="checkbox">
89
+ <div class="micl-flex--vcenter">
94
90
  <input type="checkbox" id="mycheckbox13" class="micl-checkbox micl-checkbox--error" disabled value="c3">
95
91
  <label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice</label>
96
92
  </div>
97
- <div class="checkbox">
93
+ <div class="micl-flex--vcenter">
98
94
  <input type="checkbox" id="mycheckbox14" class="micl-checkbox micl-checkbox--error" disabled checked value="c4">
99
95
  <label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice</label>
100
96
  </div>
package/docs/index.html CHANGED
@@ -96,26 +96,26 @@
96
96
  </select>
97
97
  </div>
98
98
  <div>
99
- <div style="display:flex;align-items:center">
99
+ <div class="micl-flex--vcenter">
100
100
  <input type="radio" id="myradio1" class="micl-radio" name="foo" value="bar" checked>
101
101
  <label for="myradio1" class="md-sys-typescale-body-medium">First radio button</label>
102
102
  </div>
103
- <div style="display:flex;align-items:center">
103
+ <div class="micl-flex--vcenter">
104
104
  <input type="radio" id="myradio2" class="micl-radio" name="foo" value="baz">
105
105
  <label for="myradio2" class="md-sys-typescale-body-medium">Second radio button</label>
106
106
  </div>
107
107
  </div>
108
108
  <div>
109
- <div style="display:flex;align-items:center">
109
+ <div class="micl-flex--vcenter">
110
110
  <input type="checkbox" id="mycheckbox1" class="micl-checkbox" checked>
111
111
  <label for="mycheckbox1" class="md-sys-typescale-body-medium">First checkbox</label>
112
112
  </div>
113
- <div style="display:flex;align-items:center">
113
+ <div class="micl-flex--vcenter">
114
114
  <input type="checkbox" id="mycheckbox2" class="micl-checkbox">
115
115
  <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second checkbox</label>
116
116
  </div>
117
117
  </div>
118
- <div style="display:flex;align-items:center;column-gap:16px">
118
+ <div class="micl-flex--vcenter" style="column-gap:16px">
119
119
  <input type="checkbox" class="micl-switch" id="myswitch" checked value="c1" role="switch">
120
120
  <label for="myswitch" class="md-sys-typescale-body-medium">First switch</label>
121
121
  </div>
package/docs/list.html CHANGED
@@ -196,10 +196,10 @@
196
196
  <label>
197
197
  <span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
198
198
  <span class="micl-list-item__text">
199
- <span class="micl-list-item__headline">Headline</span>
199
+ <span id="hd1" class="micl-list-item__headline">Headline</span>
200
200
  <span class="micl-list-item__supporting-text">Supporting text</span>
201
201
  </span>
202
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
202
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1" aria-labelledby="hd1">
203
203
  </label>
204
204
  </li>
205
205
  </ul>
@@ -223,19 +223,19 @@
223
223
  <li class="micl-list-item-three" tabindex="0">
224
224
  <label>
225
225
  <span class="micl-list-item__text">
226
- <span class="micl-list-item__headline">Headline 1</span>
226
+ <span id="hd2" class="micl-list-item__headline">Headline 1</span>
227
227
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
228
228
  </span>
229
- <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
229
+ <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd2">
230
230
  </label>
231
231
  </li>
232
232
  <li class="micl-list-item-three">
233
233
  <label>
234
234
  <span class="micl-list-item__text">
235
- <span class="micl-list-item__headline">Headline 2</span>
235
+ <span id="hd3" class="micl-list-item__headline">Headline 2</span>
236
236
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
237
237
  </span>
238
- <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
238
+ <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd3">
239
239
  </label>
240
240
  </li>
241
241
  </ul>