material-inspired-component-library 4.0.0 → 4.0.2
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.
- package/components/accordion/README.md +42 -3
- package/components/alert/README.md +19 -7
- package/components/button/README.md +1 -1
- package/components/button/index.scss +23 -20
- package/components/dialog/README.md +5 -5
- package/components/divider/index.scss +9 -3
- package/components/iconbutton/README.md +1 -1
- package/components/iconbutton/index.scss +20 -17
- package/components/list/README.md +18 -16
- package/components/list/index.scss +90 -68
- package/components/menu/README.md +2 -1
- package/components/menu/index.scss +6 -18
- package/components/select/README.md +7 -2
- package/components/select/index.scss +2 -3
- package/components/sidesheet/README.md +13 -19
- package/components/sidesheet/index.scss +15 -16
- package/components/textfield/index.ts +26 -0
- package/components/timepicker/index.scss +268 -0
- package/components/timepicker/index.ts +113 -0
- package/dist/button.css +1 -1
- package/dist/components/timepicker/index.d.ts +5 -0
- package/dist/divider.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/menu.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/timepicker.css +1 -0
- package/dist/timepicker.js +1 -0
- package/docs/accordion.html +31 -17
- package/docs/button.html +42 -15
- package/docs/iconbutton.html +258 -164
- package/docs/index.html +11 -8
- package/docs/list.html +52 -44
- package/docs/menu.html +2 -1
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/sidesheet.html +3 -2
- package/docs/timepicker.html +113 -0
- package/micl.ts +3 -1
- package/package.json +2 -4
- package/styles.scss +1 -0
package/docs/list.html
CHANGED
|
@@ -35,23 +35,23 @@
|
|
|
35
35
|
<div class="micl-pane__column">
|
|
36
36
|
<div class="micl-card-elevated">
|
|
37
37
|
<div class="micl-card__content">
|
|
38
|
-
<ul class="micl-list"
|
|
39
|
-
<li class="micl-list-item-one"
|
|
38
|
+
<ul class="micl-list">
|
|
39
|
+
<li class="micl-list-item-one">
|
|
40
40
|
<span class="micl-list-item__text">
|
|
41
41
|
<span class="micl-list-item__headline">Headline</span>
|
|
42
42
|
</span>
|
|
43
43
|
</li>
|
|
44
44
|
</ul>
|
|
45
|
-
<ul class="micl-list"
|
|
46
|
-
<li class="micl-list-item-two"
|
|
45
|
+
<ul class="micl-list">
|
|
46
|
+
<li class="micl-list-item-two">
|
|
47
47
|
<span class="micl-list-item__text">
|
|
48
48
|
<span class="micl-list-item__headline">Headline</span>
|
|
49
49
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
50
50
|
</span>
|
|
51
51
|
</li>
|
|
52
52
|
</ul>
|
|
53
|
-
<ul class="micl-list"
|
|
54
|
-
<li class="micl-list-item-three"
|
|
53
|
+
<ul class="micl-list">
|
|
54
|
+
<li class="micl-list-item-three">
|
|
55
55
|
<span class="micl-list-item__text">
|
|
56
56
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
57
57
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</span>
|
|
65
65
|
</li>
|
|
66
66
|
</ul>
|
|
67
|
-
<ul class="micl-list"
|
|
67
|
+
<ul class="micl-list">
|
|
68
68
|
<li class="micl-list-item-one" tabindex="0">
|
|
69
69
|
<span class="material-symbols-outlined micl-list-item__icon">settings</span>
|
|
70
70
|
<span class="micl-list-item__text">
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
<span class="material-symbols-outlined micl-list-item__icon">more_horiz</span>
|
|
74
74
|
</li>
|
|
75
75
|
</ul>
|
|
76
|
-
<ul class="micl-list"
|
|
76
|
+
<ul class="micl-list">
|
|
77
77
|
<li class="micl-list-item-two" tabindex="0">
|
|
78
78
|
<span class="material-symbols-outlined micl-list-item__icon">person</span>
|
|
79
79
|
<span class="micl-list-item__text">
|
|
@@ -85,18 +85,24 @@
|
|
|
85
85
|
</ul>
|
|
86
86
|
<ul class="micl-list" role="listbox">
|
|
87
87
|
<li class="micl-list-item-three" tabindex="0">
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
<span class="micl-list-
|
|
91
|
-
|
|
92
|
-
|
|
88
|
+
<label>
|
|
89
|
+
<span class="material-symbols-outlined micl-list-item__icon">search</span>
|
|
90
|
+
<span class="micl-list-item__text">
|
|
91
|
+
<span id="hd1" class="micl-list-item__headline">Headline 1</span>
|
|
92
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
93
|
+
</span>
|
|
94
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd1">
|
|
95
|
+
</label>
|
|
93
96
|
</li>
|
|
94
97
|
<li class="micl-list-item-three">
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
<span class="micl-list-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
<label>
|
|
99
|
+
<span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
|
|
100
|
+
<span class="micl-list-item__text">
|
|
101
|
+
<span id="hd2" class="micl-list-item__headline">Headline 2</span>
|
|
102
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
103
|
+
</span>
|
|
104
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd2">
|
|
105
|
+
</label>
|
|
100
106
|
</li>
|
|
101
107
|
</ul>
|
|
102
108
|
</div>
|
|
@@ -105,16 +111,16 @@
|
|
|
105
111
|
<div class="micl-pane__column">
|
|
106
112
|
<div class="micl-card-filled">
|
|
107
113
|
<div class="micl-card__content">
|
|
108
|
-
<ul class="micl-list"
|
|
109
|
-
<li class="micl-list-item-one"
|
|
114
|
+
<ul class="micl-list">
|
|
115
|
+
<li class="micl-list-item-one">
|
|
110
116
|
<span class="micl-list-item__avatar">3</span>
|
|
111
117
|
<span class="micl-list-item__text">
|
|
112
118
|
<span class="micl-list-item__headline">Headline</span>
|
|
113
119
|
</span>
|
|
114
120
|
</li>
|
|
115
121
|
</ul>
|
|
116
|
-
<ul class="micl-list"
|
|
117
|
-
<li class="micl-list-item-two"
|
|
122
|
+
<ul class="micl-list">
|
|
123
|
+
<li class="micl-list-item-two">
|
|
118
124
|
<span class="micl-list-item__avatar">17</span>
|
|
119
125
|
<span class="micl-list-item__text">
|
|
120
126
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -122,7 +128,7 @@
|
|
|
122
128
|
</span>
|
|
123
129
|
</li>
|
|
124
130
|
</ul>
|
|
125
|
-
<ul class="micl-list"
|
|
131
|
+
<ul class="micl-list">
|
|
126
132
|
<li class="micl-list-item-three" tabindex="0">
|
|
127
133
|
<a href="https://www.thetimes.com/" tabindex="-1">
|
|
128
134
|
<span class="micl-list-item__avatar">T</span>
|
|
@@ -140,8 +146,8 @@
|
|
|
140
146
|
</span>
|
|
141
147
|
</li>
|
|
142
148
|
</ul>
|
|
143
|
-
<ul class="micl-list"
|
|
144
|
-
<li class="micl-list-item-one"
|
|
149
|
+
<ul class="micl-list">
|
|
150
|
+
<li class="micl-list-item-one">
|
|
145
151
|
<span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
|
|
146
152
|
<span class="micl-list-item__text">
|
|
147
153
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -161,16 +167,16 @@
|
|
|
161
167
|
</label>
|
|
162
168
|
</li>
|
|
163
169
|
</ul>
|
|
164
|
-
<ul class="micl-list"
|
|
165
|
-
<li class="micl-list-item-three"
|
|
166
|
-
<span class="micl-list-item__image" style="background-image:url(card-cabinet.webp)"></span>
|
|
170
|
+
<ul class="micl-list">
|
|
171
|
+
<li class="micl-list-item-three">
|
|
172
|
+
<span class="micl-list-item__image" style="background-image:url(card-cabinet.webp);border-radius:16px"></span>
|
|
167
173
|
<span class="micl-list-item__text">
|
|
168
174
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
169
175
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
170
176
|
</span>
|
|
171
177
|
</li>
|
|
172
178
|
<li class="micl-list-item-three">
|
|
173
|
-
<span class="micl-list-item__image" style="background-image:url(card-awards.webp)"></span>
|
|
179
|
+
<span class="micl-list-item__image" style="background-image:url(card-awards.webp);border-radius:16px"></span>
|
|
174
180
|
<span class="micl-list-item__text">
|
|
175
181
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
176
182
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
@@ -181,10 +187,10 @@
|
|
|
181
187
|
</div>
|
|
182
188
|
</div>
|
|
183
189
|
<div class="micl-pane__column">
|
|
184
|
-
<div class="micl-card-
|
|
190
|
+
<div class="micl-card-elevated">
|
|
185
191
|
<div class="micl-card__content">
|
|
186
|
-
<ul class="micl-list"
|
|
187
|
-
<li class="micl-list-item-one"
|
|
192
|
+
<ul class="micl-list">
|
|
193
|
+
<li class="micl-list-item-one">
|
|
188
194
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-city.webp)"></span>
|
|
189
195
|
<span class="micl-list-item__text">
|
|
190
196
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -196,21 +202,22 @@
|
|
|
196
202
|
<label>
|
|
197
203
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
198
204
|
<span class="micl-list-item__text">
|
|
199
|
-
<span id="
|
|
205
|
+
<span id="hd3" class="micl-list-item__headline">Headline</span>
|
|
200
206
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
201
207
|
</span>
|
|
202
|
-
<input type="checkbox" id="
|
|
208
|
+
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1" tabindex="-1" aria-labelledby="hd3">
|
|
203
209
|
</label>
|
|
204
210
|
</li>
|
|
205
211
|
</ul>
|
|
206
|
-
<ul class="micl-list
|
|
207
|
-
<li class="micl-list-item-three"
|
|
212
|
+
<ul class="micl-list">
|
|
213
|
+
<li class="micl-list-item-three">
|
|
208
214
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-cabinet.webp)"></span>
|
|
209
215
|
<span class="micl-list-item__text">
|
|
210
216
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
211
217
|
<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>
|
|
212
218
|
</span>
|
|
213
219
|
</li>
|
|
220
|
+
<li role="separator" class="micl-divider"></li>
|
|
214
221
|
<li class="micl-list-item-three">
|
|
215
222
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
|
|
216
223
|
<span class="micl-list-item__text">
|
|
@@ -219,23 +226,24 @@
|
|
|
219
226
|
</span>
|
|
220
227
|
</li>
|
|
221
228
|
</ul>
|
|
222
|
-
<ul class="micl-list
|
|
229
|
+
<ul class="micl-list" role="listbox">
|
|
223
230
|
<li class="micl-list-item-three" tabindex="0">
|
|
224
231
|
<label>
|
|
225
232
|
<span class="micl-list-item__text">
|
|
226
|
-
<span id="
|
|
233
|
+
<span id="hd4" class="micl-list-item__headline">Headline 1</span>
|
|
227
234
|
<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
235
|
</span>
|
|
229
|
-
<input type="checkbox" id="
|
|
236
|
+
<input type="checkbox" id="cb4" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd4">
|
|
230
237
|
</label>
|
|
231
238
|
</li>
|
|
239
|
+
<li role="separator" class="micl-divider"></li>
|
|
232
240
|
<li class="micl-list-item-three">
|
|
233
241
|
<label>
|
|
234
242
|
<span class="micl-list-item__text">
|
|
235
|
-
<span id="
|
|
243
|
+
<span id="hd5" class="micl-list-item__headline">Headline 2</span>
|
|
236
244
|
<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
245
|
</span>
|
|
238
|
-
<input type="checkbox" id="
|
|
246
|
+
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd5">
|
|
239
247
|
</label>
|
|
240
248
|
</li>
|
|
241
249
|
</ul>
|
|
@@ -251,8 +259,8 @@
|
|
|
251
259
|
</div>
|
|
252
260
|
<div class="micl-card__content docs-code">
|
|
253
261
|
<pre tabindex="-1"><code>
|
|
254
|
-
<ul class="micl-list"
|
|
255
|
-
<li class="micl-list-item-two"
|
|
262
|
+
<ul class="micl-list">
|
|
263
|
+
<li class="micl-list-item-two">
|
|
256
264
|
<span class="micl-list-item__avatar">17</span>
|
|
257
265
|
<span class="micl-list-item__text">
|
|
258
266
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -261,7 +269,7 @@
|
|
|
261
269
|
</li>
|
|
262
270
|
</ul>
|
|
263
271
|
|
|
264
|
-
<ul class="micl-list"
|
|
272
|
+
<ul class="micl-list">
|
|
265
273
|
<li class="micl-list-item-two" tabindex="0">
|
|
266
274
|
<label>
|
|
267
275
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
package/docs/menu.html
CHANGED
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
<span class="micl-list-item__supporting-text">Change everything in the system</span>
|
|
93
93
|
</span>
|
|
94
94
|
</li>
|
|
95
|
-
<li class="micl-
|
|
95
|
+
<li role="separator" class="micl-divider"></li>
|
|
96
|
+
<li class="micl-list-item-two">
|
|
96
97
|
<span class="micl-list-item__text">
|
|
97
98
|
<span class="micl-list-item__headline">Contact</span>
|
|
98
99
|
<span class="micl-list-item__supporting-text">Call me!</span>
|