material-inspired-component-library 6.0.3 → 6.0.4
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/README.md +1 -0
- package/components/button/index.scss +1 -0
- package/components/dialog/README.md +1 -1
- package/components/iconbutton/index.scss +4 -0
- package/components/list/README.md +5 -9
- package/components/list/index.ts +65 -35
- package/components/menu/README.md +7 -7
- package/components/navigationrail/index.scss +23 -13
- package/components/navigationrail/index.ts +21 -4
- package/components/snackbar/index.scss +64 -0
- package/components/textfield/index.ts +28 -19
- package/dist/button.css +1 -1
- package/dist/components/list/index.d.ts +2 -1
- package/dist/components/navigationrail/index.d.ts +2 -1
- package/dist/components/textfield/index.d.ts +1 -0
- package/dist/iconbutton.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/snackbar.css +1 -1
- package/docs/alert.html +13 -13
- package/docs/bottomsheet.html +6 -6
- package/docs/index.html +1 -1
- package/docs/list.html +15 -15
- package/docs/menu.html +9 -9
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/snackbar.html +19 -10
- package/micl.ts +2 -1
- package/package.json +2 -1
package/docs/alert.html
CHANGED
|
@@ -44,21 +44,21 @@
|
|
|
44
44
|
<div class="micl-alert-tonal" role="alert">
|
|
45
45
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
|
|
46
46
|
<div class="micl-alert__text">
|
|
47
|
-
<
|
|
47
|
+
<h3>An error has occurred</h3>
|
|
48
48
|
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
51
|
<div class="micl-alert-filled" role="alert">
|
|
52
52
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
|
|
53
53
|
<div class="micl-alert__text">
|
|
54
|
-
<
|
|
54
|
+
<h3>An error has occurred</h3>
|
|
55
55
|
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
58
58
|
<div class="micl-alert-outlined" role="alert">
|
|
59
59
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
|
|
60
60
|
<div class="micl-alert__text">
|
|
61
|
-
<
|
|
61
|
+
<h3>An error has occurred</h3>
|
|
62
62
|
<span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
@@ -74,21 +74,21 @@
|
|
|
74
74
|
<div class="micl-alert-tonal micl-alert--primary" role="alert">
|
|
75
75
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
|
|
76
76
|
<div class="micl-alert__text">
|
|
77
|
-
<
|
|
77
|
+
<h3>Your file has been saved</h3>
|
|
78
78
|
<span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
|
|
79
79
|
</div>
|
|
80
80
|
</div>
|
|
81
81
|
<div class="micl-alert-filled micl-alert--primary" role="alert">
|
|
82
82
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
|
|
83
83
|
<div class="micl-alert__text">
|
|
84
|
-
<
|
|
84
|
+
<h3>Your file has been saved</h3>
|
|
85
85
|
<span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
88
88
|
<div class="micl-alert-outlined micl-alert--primary" role="alert">
|
|
89
89
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
|
|
90
90
|
<div class="micl-alert__text">
|
|
91
|
-
<
|
|
91
|
+
<h3>Your file has been saved</h3>
|
|
92
92
|
</div>
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
@@ -102,19 +102,19 @@
|
|
|
102
102
|
<div class="micl-card__content">
|
|
103
103
|
<div class="micl-alert-tonal micl-alert--secondary" role="alert">
|
|
104
104
|
<div class="micl-alert__text">
|
|
105
|
-
<
|
|
105
|
+
<h3>Your efforts have been rewarded</h3>
|
|
106
106
|
<span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
<div class="micl-alert-filled micl-alert--secondary" role="alert">
|
|
110
110
|
<div class="micl-alert__text">
|
|
111
|
-
<
|
|
111
|
+
<h3>Your efforts have been rewarded</h3>
|
|
112
112
|
<span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
115
115
|
<div class="micl-alert-outlined micl-alert--secondary" role="alert">
|
|
116
116
|
<div class="micl-alert__text">
|
|
117
|
-
<
|
|
117
|
+
<h3>Your efforts have been rewarded</h3>
|
|
118
118
|
</div>
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
@@ -129,21 +129,21 @@
|
|
|
129
129
|
<div class="micl-alert-tonal micl-alert--tertiary" role="alert">
|
|
130
130
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
|
|
131
131
|
<div class="micl-alert__text">
|
|
132
|
-
<
|
|
132
|
+
<h3>Checking your progress</h3>
|
|
133
133
|
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
134
134
|
</div>
|
|
135
135
|
</div>
|
|
136
136
|
<div class="micl-alert-filled micl-alert--tertiary" role="alert">
|
|
137
137
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
|
|
138
138
|
<div class="micl-alert__text">
|
|
139
|
-
<
|
|
139
|
+
<h3>Checking your progress</h3>
|
|
140
140
|
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
141
141
|
</div>
|
|
142
142
|
</div>
|
|
143
143
|
<div class="micl-alert-outlined micl-alert--tertiary" role="alert">
|
|
144
144
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
|
|
145
145
|
<div class="micl-alert__text">
|
|
146
|
-
<
|
|
146
|
+
<h3>Checking your progress</h3>
|
|
147
147
|
<span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
|
|
148
148
|
</div>
|
|
149
149
|
</div>
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
<pre tabindex="-1"><code><div class="micl-alert-tonal" role="alert">
|
|
163
163
|
<span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
|
|
164
164
|
<span class="micl-alert__text">
|
|
165
|
-
<
|
|
165
|
+
<h3>An error has occurred</h3>
|
|
166
166
|
<span class="micl-alert__supporting-text">Something unexplainable has happened.</span>
|
|
167
167
|
</span>
|
|
168
168
|
</div></code></pre>
|
package/docs/bottomsheet.html
CHANGED
|
@@ -131,13 +131,13 @@
|
|
|
131
131
|
<span class="micl-list-item__headline">Share</span>
|
|
132
132
|
</span>
|
|
133
133
|
</li>
|
|
134
|
-
<li class="micl-list-item-one"
|
|
134
|
+
<li class="micl-list-item-one">
|
|
135
135
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
|
|
136
136
|
<span class="micl-list-item__text">
|
|
137
137
|
<span class="micl-list-item__headline">Get link</span>
|
|
138
138
|
</span>
|
|
139
139
|
</li>
|
|
140
|
-
<li class="micl-list-item-one"
|
|
140
|
+
<li class="micl-list-item-one">
|
|
141
141
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
|
|
142
142
|
<span class="micl-list-item__text">
|
|
143
143
|
<span class="micl-list-item__headline">Edit name</span>
|
|
@@ -160,19 +160,19 @@
|
|
|
160
160
|
<span class="micl-list-item__headline">Share</span>
|
|
161
161
|
</span>
|
|
162
162
|
</li>
|
|
163
|
-
<li class="micl-list-item-one"
|
|
163
|
+
<li class="micl-list-item-one">
|
|
164
164
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
|
|
165
165
|
<span class="micl-list-item__text">
|
|
166
166
|
<span class="micl-list-item__headline">Get link</span>
|
|
167
167
|
</span>
|
|
168
168
|
</li>
|
|
169
|
-
<li class="micl-list-item-one"
|
|
169
|
+
<li class="micl-list-item-one">
|
|
170
170
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
|
|
171
171
|
<span class="micl-list-item__text">
|
|
172
172
|
<span class="micl-list-item__headline">Edit name</span>
|
|
173
173
|
</span>
|
|
174
174
|
</li>
|
|
175
|
-
<li class="micl-list-item-one"
|
|
175
|
+
<li class="micl-list-item-one">
|
|
176
176
|
<button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" command="close" commandfor="mybottomsheet4">close</button>
|
|
177
177
|
</li>
|
|
178
178
|
</ul>
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
<span class="micl-list-item__headline">Share</span>
|
|
222
222
|
</span>
|
|
223
223
|
</li>
|
|
224
|
-
<li class="micl-list-item-one"
|
|
224
|
+
<li class="micl-list-item-one">
|
|
225
225
|
<span class="material-symbols-outlined micl-list-item__icon">edit</span>
|
|
226
226
|
<span class="micl-list-item__text">
|
|
227
227
|
<span class="micl-list-item__headline">Edit name</span>
|
package/docs/index.html
CHANGED
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
<h2>Lists</h2>
|
|
182
182
|
</div>
|
|
183
183
|
<div class="micl-card__content">
|
|
184
|
-
<ul class="micl-list"
|
|
184
|
+
<ul class="micl-list">
|
|
185
185
|
<li class="micl-list-item-one">
|
|
186
186
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
|
|
187
187
|
<span class="micl-list-item__text">
|
package/docs/list.html
CHANGED
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
</li>
|
|
68
68
|
</ul>
|
|
69
69
|
<ul class="micl-list">
|
|
70
|
-
<li class="micl-list-item-one"
|
|
70
|
+
<li class="micl-list-item-one">
|
|
71
71
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
|
|
72
72
|
<span class="micl-list-item__text">
|
|
73
73
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -90,20 +90,20 @@
|
|
|
90
90
|
<label>
|
|
91
91
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
|
|
92
92
|
<span class="micl-list-item__text">
|
|
93
|
-
<span
|
|
93
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
94
94
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
95
95
|
</span>
|
|
96
|
-
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2"
|
|
96
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2" aria-label="Headline 1">
|
|
97
97
|
</label>
|
|
98
98
|
</li>
|
|
99
99
|
<li role="option" class="micl-list-item-three">
|
|
100
100
|
<label>
|
|
101
101
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
|
|
102
102
|
<span class="micl-list-item__text">
|
|
103
|
-
<span
|
|
103
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
104
104
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
105
105
|
</span>
|
|
106
|
-
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3"
|
|
106
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3" aria-label="Headline 2">
|
|
107
107
|
</label>
|
|
108
108
|
</li>
|
|
109
109
|
</ul>
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
</ul>
|
|
133
133
|
<ul class="micl-list">
|
|
134
134
|
<li class="micl-list-item-three" tabindex="0">
|
|
135
|
-
<a href="https://www.thetimes.com/"
|
|
135
|
+
<a href="https://www.thetimes.com/" target="_blank">
|
|
136
136
|
<span class="micl-list-item__avatar">T</span>
|
|
137
137
|
<span class="micl-list-item__text">
|
|
138
138
|
<span class="micl-list-item__headline">The Times</span>
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
<span class="micl-list-item__headline">Headline</span>
|
|
166
166
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
167
167
|
</span>
|
|
168
|
-
<input type="checkbox" class="micl-switch" id="myswitch" value="c1"
|
|
168
|
+
<input type="checkbox" class="micl-switch" id="myswitch" value="c1" aria-label="Headline">
|
|
169
169
|
</label>
|
|
170
170
|
</li>
|
|
171
171
|
</ul>
|
|
@@ -204,10 +204,10 @@
|
|
|
204
204
|
<label>
|
|
205
205
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
206
206
|
<span class="micl-list-item__text">
|
|
207
|
-
<span
|
|
207
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
208
208
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
209
209
|
</span>
|
|
210
|
-
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1"
|
|
210
|
+
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1" aria-label="Headline">
|
|
211
211
|
</label>
|
|
212
212
|
</li>
|
|
213
213
|
</ul>
|
|
@@ -232,18 +232,18 @@
|
|
|
232
232
|
<li role="option" class="micl-list-item-three" tabindex="0" aria-selected="true">
|
|
233
233
|
<label>
|
|
234
234
|
<span class="micl-list-item__text">
|
|
235
|
-
<span
|
|
235
|
+
<span class="micl-list-item__headline">Headline 1</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="cb4" class="micl-checkbox" value="c2" checked
|
|
238
|
+
<input type="checkbox" id="cb4" class="micl-checkbox" value="c2" checked aria-label="Headline 1">
|
|
239
239
|
</label>
|
|
240
240
|
</li>
|
|
241
|
-
<li role="separator" class="micl-divider"></li>
|
|
241
|
+
<li role="separator" class="micl-divider" tabindex="-1"></li>
|
|
242
242
|
<li role="option" class="micl-list-item-three">
|
|
243
243
|
<label>
|
|
244
|
-
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3"
|
|
244
|
+
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3" aria-label="Headline 2">
|
|
245
245
|
<span class="micl-list-item__text">
|
|
246
|
-
<span
|
|
246
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
247
247
|
<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>
|
|
248
248
|
</span>
|
|
249
249
|
</label>
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
<span class="micl-list-item__headline">Headline</span>
|
|
280
280
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
281
281
|
</span>
|
|
282
|
-
<input type="checkbox" id="id0" class="micl-checkbox" value="v0"
|
|
282
|
+
<input type="checkbox" id="id0" class="micl-checkbox" value="v0">
|
|
283
283
|
</label>
|
|
284
284
|
</li>
|
|
285
285
|
</ul></code></pre>
|
package/docs/menu.html
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<span class="micl-list-item__headline">Person</span>
|
|
85
85
|
<span class="micl-list-item__supporting-text">Are you an administrator?</span>
|
|
86
86
|
</span>
|
|
87
|
-
<input type="checkbox" id="cb1" class="micl-checkbox" value="c1"
|
|
87
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
|
|
88
88
|
</label>
|
|
89
89
|
</li>
|
|
90
90
|
<li class="micl-list-item-two">
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
</span>
|
|
127
127
|
</li>
|
|
128
128
|
<li class="micl-list-item-three">
|
|
129
|
-
<a href="https://www.nytimes.com"
|
|
129
|
+
<a href="https://www.nytimes.com" target="_blank">
|
|
130
130
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
|
|
131
131
|
<span class="micl-list-item__text">
|
|
132
132
|
<span class="micl-list-item__headline">The New York Times</span>
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
<span class="micl-list-item__headline">Select or Unselect</span>
|
|
142
142
|
<span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
|
|
143
143
|
</span>
|
|
144
|
-
<input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2"
|
|
144
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2">
|
|
145
145
|
</label>
|
|
146
146
|
</li>
|
|
147
147
|
</ul>
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
<nav id="mymenu4" class="micl-menu" popover>
|
|
154
154
|
<ul class="micl-list">
|
|
155
155
|
<li class="micl-list-item-one" tabindex="0">
|
|
156
|
-
<button popovertarget="mymenu5"
|
|
156
|
+
<button popovertarget="mymenu5">
|
|
157
157
|
<span class="micl-list-item__text">
|
|
158
158
|
<span class="micl-list-item__headline">Europe</span>
|
|
159
159
|
</span>
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
</nav>
|
|
191
191
|
</li>
|
|
192
192
|
<li class="micl-list-item-one">
|
|
193
|
-
<button popovertarget="mymenu6"
|
|
193
|
+
<button popovertarget="mymenu6">
|
|
194
194
|
<span class="micl-list-item__text">
|
|
195
195
|
<span class="micl-list-item__headline">Africa</span>
|
|
196
196
|
</span>
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
</nav>
|
|
228
228
|
</li>
|
|
229
229
|
<li class="micl-list-item-one">
|
|
230
|
-
<button popovertarget="mymenu7"
|
|
230
|
+
<button popovertarget="mymenu7">
|
|
231
231
|
<span class="micl-list-item__text">
|
|
232
232
|
<span class="micl-list-item__headline">Asia</span>
|
|
233
233
|
</span>
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
</nav>
|
|
265
265
|
</li>
|
|
266
266
|
<li class="micl-list-item-one">
|
|
267
|
-
<button popovertarget="mymenu8"
|
|
267
|
+
<button popovertarget="mymenu8">
|
|
268
268
|
<span class="micl-list-item__text">
|
|
269
269
|
<span class="micl-list-item__headline">America</span>
|
|
270
270
|
</span>
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
<nav id="mymenu8" class="micl-menu" popover>
|
|
274
274
|
<ul class="micl-list">
|
|
275
275
|
<li class="micl-list-item-one" tabindex="0">
|
|
276
|
-
<button popovertarget="mymenu9"
|
|
276
|
+
<button popovertarget="mymenu9">
|
|
277
277
|
<span class="micl-list-item__text">
|
|
278
278
|
<span class="micl-list-item__headline">North America</span>
|
|
279
279
|
</span>
|
|
@@ -300,7 +300,7 @@
|
|
|
300
300
|
</nav>
|
|
301
301
|
</li>
|
|
302
302
|
<li class="micl-list-item-one">
|
|
303
|
-
<button popovertarget="mymenu10"
|
|
303
|
+
<button popovertarget="mymenu10">
|
|
304
304
|
<span class="micl-list-item__text">
|
|
305
305
|
<span class="micl-list-item__headline">South America</span>
|
|
306
306
|
</span>
|