material-inspired-component-library 6.0.0 → 6.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.
Files changed (43) hide show
  1. package/components/alert/README.md +1 -1
  2. package/components/appbar/README.md +1 -1
  3. package/components/badge/README.md +1 -1
  4. package/components/list/README.md +22 -7
  5. package/components/sidesheet/README.md +3 -3
  6. package/components/textfield/README.md +2 -2
  7. package/dist/alert.css +1 -1
  8. package/dist/appbar.css +1 -1
  9. package/dist/badge.css +1 -1
  10. package/dist/bottomsheet.css +1 -1
  11. package/dist/button.css +1 -1
  12. package/dist/card.css +1 -1
  13. package/dist/checkbox.css +1 -1
  14. package/dist/datepicker.css +1 -1
  15. package/dist/dialog.css +1 -1
  16. package/dist/divider.css +1 -1
  17. package/dist/foundations.css +1 -1
  18. package/dist/iconbutton.css +1 -1
  19. package/dist/list.css +1 -1
  20. package/dist/menu.css +1 -1
  21. package/dist/micl.css +1 -1
  22. package/dist/navigationrail.css +1 -1
  23. package/dist/radio.css +1 -1
  24. package/dist/select.css +1 -1
  25. package/dist/sidesheet.css +1 -1
  26. package/dist/slider.css +1 -1
  27. package/dist/stepper.css +1 -1
  28. package/dist/switch.css +1 -1
  29. package/dist/textfield.css +1 -1
  30. package/dist/timepicker.css +1 -1
  31. package/docs/accordion.html +20 -20
  32. package/docs/alert.html +10 -10
  33. package/docs/bottomsheet.html +6 -6
  34. package/docs/index.html +15 -15
  35. package/docs/list.html +14 -14
  36. package/docs/menu.html +12 -12
  37. package/docs/micl.css +1 -1
  38. package/docs/sidesheet.html +1 -1
  39. package/docs/slider.html +2 -2
  40. package/docs/textfield.html +24 -24
  41. package/docs/timepicker.html +1 -1
  42. package/foundations/index.scss +4 -1
  43. package/package.json +1 -1
package/docs/accordion.html CHANGED
@@ -37,7 +37,7 @@
37
37
  <span class="micl-list-item__text">
38
38
  <span class="micl-list-item__headline">Headline 1</span>
39
39
  </span>
40
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
40
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
41
41
  </summary>
42
42
  <div class="micl-list-item__content">
43
43
  <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -48,7 +48,7 @@
48
48
  <span class="micl-list-item__text">
49
49
  <span class="micl-list-item__headline">Headline 2</span>
50
50
  </span>
51
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
51
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
52
52
  </summary>
53
53
  <div class="micl-list-item__content">
54
54
  <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -62,7 +62,7 @@
62
62
  <span class="micl-list-item__headline">Marie Curie</span>
63
63
  <span class="micl-list-item__supporting-text">The name of the employee</span>
64
64
  </span>
65
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
65
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
66
66
  </summary>
67
67
  <div class="micl-list-item__content" style="padding-block:16px">
68
68
  <div class="micl-textfield-filled">
@@ -77,7 +77,7 @@
77
77
  <span class="micl-list-item__headline">Country</span>
78
78
  <span class="micl-list-item__supporting-text">The country of residence</span>
79
79
  </span>
80
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
80
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
81
81
  </summary>
82
82
  <div class="micl-list-item__content" style="padding-block:16px">
83
83
  <div class="micl-textfield-filled">
@@ -94,7 +94,7 @@
94
94
  <span class="micl-list-item__headline">Headline 1</span>
95
95
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
96
96
  </span>
97
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
97
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
98
98
  </summary>
99
99
  <div class="micl-list-item__content">
100
100
  <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -106,7 +106,7 @@
106
106
  <span class="micl-list-item__headline">Headline 2</span>
107
107
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
108
108
  </span>
109
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
109
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
110
110
  </summary>
111
111
  <div class="micl-list-item__content">
112
112
  <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -122,11 +122,11 @@
122
122
  <div class="micl-list" role="listbox">
123
123
  <details name="accordion4">
124
124
  <summary class="micl-list-item-one">
125
- <span class="material-symbols-outlined micl-list-item__icon">search</span>
125
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
126
126
  <span class="micl-list-item__text">
127
127
  <span class="micl-list-item__headline">Date</span>
128
128
  </span>
129
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
129
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
130
130
  </summary>
131
131
  <div class="micl-list-item__content" style="padding-block:16px">
132
132
  <div class="micl-textfield-outlined">
@@ -137,11 +137,11 @@
137
137
  </details>
138
138
  <details name="accordion4">
139
139
  <summary class="micl-list-item-one" tabindex="-1">
140
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
140
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
141
141
  <span class="micl-list-item__text">
142
142
  <span class="micl-list-item__headline">Time</span>
143
143
  </span>
144
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
144
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
145
145
  </summary>
146
146
  <div class="micl-list-item__content" style="padding-block:16px">
147
147
  <div class="micl-textfield-outlined">
@@ -154,12 +154,12 @@
154
154
  <div class="micl-list" role="listbox">
155
155
  <details name="accordion5">
156
156
  <summary class="micl-list-item-two">
157
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
157
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
158
158
  <span class="micl-list-item__text">
159
159
  <span class="micl-list-item__headline">Headline 1</span>
160
160
  <span class="micl-list-item__supporting-text">Supporting text 1</span>
161
161
  </span>
162
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
162
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
163
163
  </summary>
164
164
  <div class="micl-list-item__content">
165
165
  <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -167,12 +167,12 @@
167
167
  </details>
168
168
  <details name="accordion5">
169
169
  <summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
170
- <span class="material-symbols-outlined micl-list-item__icon">person</span>
170
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
171
171
  <span class="micl-list-item__text">
172
172
  <span class="micl-list-item__headline">Headline 2</span>
173
173
  <span class="micl-list-item__supporting-text">Supporting text 2</span>
174
174
  </span>
175
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
175
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
176
176
  </summary>
177
177
  <div class="micl-list-item__content">
178
178
  <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -182,12 +182,12 @@
182
182
  <div class="micl-list" role="listbox">
183
183
  <details name="accordion6">
184
184
  <summary class="micl-list-item-three">
185
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
185
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
186
186
  <span class="micl-list-item__text">
187
187
  <span class="micl-list-item__headline">Headline 1</span>
188
188
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
189
189
  </span>
190
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
190
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
191
191
  </summary>
192
192
  <div class="micl-list-item__content">
193
193
  <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -195,12 +195,12 @@
195
195
  </details>
196
196
  <details name="accordion6">
197
197
  <summary class="micl-list-item-three" tabindex="-1">
198
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
198
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
199
199
  <span class="micl-list-item__text">
200
200
  <span class="micl-list-item__headline">Headline 2</span>
201
201
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
202
202
  </span>
203
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
203
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
204
204
  </summary>
205
205
  <div class="micl-list-item__content">
206
206
  <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -309,7 +309,7 @@
309
309
  &lt;div class="micl-list" role="listbox"&gt;
310
310
  &lt;details name="accordion"&gt;
311
311
  &lt;summary class="micl-list-item-two"&gt;
312
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;settings&lt;/span&gt;
312
+ &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;settings&lt;/span&gt;
313
313
  &lt;span class="micl-list-item__text"&gt;
314
314
  &lt;span class="micl-list-item__headline"&gt;Headline 1&lt;/span&gt;
315
315
  &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 1&lt;/span&gt;
@@ -322,7 +322,7 @@
322
322
  &lt;hr class="micl-divider"&gt;
323
323
  &lt;details name="accordion"&gt;
324
324
  &lt;summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1"&gt;
325
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;person&lt;/span&gt;
325
+ &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;person&lt;/span&gt;
326
326
  &lt;span class="micl-list-item__text"&gt;
327
327
  &lt;span class="micl-list-item__headline"&gt;Headline 2&lt;/span&gt;
328
328
  &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 2&lt;/span&gt;
package/docs/alert.html CHANGED
@@ -42,21 +42,21 @@
42
42
  </div>
43
43
  <div class="micl-card__content">
44
44
  <div class="micl-alert-tonal" role="alert">
45
- <span class="micl-alert__icon material-symbols-outlined">error</span>
45
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
46
46
  <div class="micl-alert__text">
47
47
  <h4>An error has occurred</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">error</span>
52
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
53
53
  <div class="micl-alert__text">
54
54
  <h4>An error has occurred</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">error</span>
59
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
60
60
  <div class="micl-alert__text">
61
61
  <h4>An error has occurred</h4>
62
62
  <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
@@ -72,21 +72,21 @@
72
72
  </div>
73
73
  <div class="micl-card__content">
74
74
  <div class="micl-alert-tonal micl-alert--primary" role="alert">
75
- <span class="micl-alert__icon material-symbols-outlined">check</span>
75
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
76
76
  <div class="micl-alert__text">
77
77
  <h4>Your file has been saved</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">check</span>
82
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
83
83
  <div class="micl-alert__text">
84
84
  <h4>Your file has been saved</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">check</span>
89
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
90
90
  <div class="micl-alert__text">
91
91
  <h4>Your file has been saved</h4>
92
92
  </div>
@@ -127,21 +127,21 @@
127
127
  </div>
128
128
  <div class="micl-card__content">
129
129
  <div class="micl-alert-tonal micl-alert--tertiary" role="alert">
130
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
130
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
131
131
  <div class="micl-alert__text">
132
132
  <h4>Checking your progress</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
137
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
138
138
  <div class="micl-alert__text">
139
139
  <h4>Checking your progress</h4>
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
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
144
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
145
145
  <div class="micl-alert__text">
146
146
  <h4>Checking your progress</h4>
147
147
  <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
@@ -160,7 +160,7 @@
160
160
  <div class="micl-card__content docs-code">
161
161
  <pre tabindex="-1"><code>
162
162
  &lt;div class="micl-alert-tonal" role="alert"&gt;
163
- &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
163
+ &lt;span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error&lt;/span&gt;
164
164
  &lt;span class="micl-alert__text"&gt;
165
165
  &lt;h4&gt;An error has occurred&lt;/h4&gt;
166
166
  &lt;span class="micl-alert__supporting-text"&gt;Something unexplainable has happened.&lt;/span&gt;
package/docs/bottomsheet.html CHANGED
@@ -126,19 +126,19 @@
126
126
  <div class="micl-bottomsheet__content">
127
127
  <ul class="micl-list" role="listbox">
128
128
  <li class="micl-list-item-one" tabindex="0">
129
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
129
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
130
130
  <span class="micl-list-item__text">
131
131
  <span class="micl-list-item__headline">Share</span>
132
132
  </span>
133
133
  </li>
134
134
  <li class="micl-list-item-one" tabindex="0">
135
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
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
140
  <li class="micl-list-item-one" tabindex="0">
141
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
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>
144
144
  </span>
@@ -155,19 +155,19 @@
155
155
  <div class="micl-bottomsheet__content">
156
156
  <ul class="micl-list" role="listbox" style="display:flex">
157
157
  <li class="micl-list-item-one" tabindex="0">
158
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
158
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
159
159
  <span class="micl-list-item__text">
160
160
  <span class="micl-list-item__headline">Share</span>
161
161
  </span>
162
162
  </li>
163
163
  <li class="micl-list-item-one" tabindex="0">
164
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
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
169
  <li class="micl-list-item-one" tabindex="0">
170
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
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>
package/docs/index.html CHANGED
@@ -29,24 +29,24 @@
29
29
  <div class="micl-navigationrail__content">
30
30
  <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
31
31
  <label for="item1" class="micl-navigationrail__item" tabindex="0">
32
- <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
32
+ <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
33
33
  <span class="micl-navigationrail__text">Inbox</span>
34
34
  <span class="micl-badge" style="position-anchor:--inbox">97</span>
35
35
  </label>
36
36
  <input type="radio" id="item2" name="navitem" value="email_outbox">
37
37
  <label for="item2" class="micl-navigationrail__item" tabindex="0">
38
- <span class="micl-navigationrail__icon material-symbols-outlined">outbox</span>
38
+ <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
39
39
  <span class="micl-navigationrail__text">Outbox</span>
40
40
  </label>
41
41
  <input type="radio" id="item3" name="navitem" value="email_favorites">
42
42
  <label for="item3" class="micl-navigationrail__item" tabindex="0">
43
- <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites">favorite</span>
43
+ <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
44
44
  <span class="micl-navigationrail__text">Favorites</span>
45
45
  <span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
46
46
  </label>
47
47
  <input type="radio" id="item4" name="navitem" value="email_trash">
48
48
  <label for="item4" class="micl-navigationrail__item" tabindex="0">
49
- <span class="micl-navigationrail__icon material-symbols-outlined">delete</span>
49
+ <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
50
50
  <span class="micl-navigationrail__text">Trash</span>
51
51
  </label>
52
52
  </div>
@@ -132,7 +132,7 @@
132
132
  <span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
133
133
  <div class="micl-card__content">
134
134
  <div class="micl-alert-outlined" role="alert">
135
- <span class="micl-alert__icon material-symbols-outlined">error</span>
135
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
136
136
  <div class="micl-alert__text">
137
137
  <h4>This is an alert</h4>
138
138
  <span class="micl-alert__supporting-text">An error has occurred</span>
@@ -149,14 +149,14 @@
149
149
  </span>
150
150
  </li>
151
151
  <li class="micl-list-item-one" tabindex="0">
152
- <span class="micl-list-item__icon material-symbols-outlined">globe</span>
152
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">globe</span>
153
153
  <span class="micl-list-item__text">
154
154
  <span class="micl-list-item__headline">Menu item with an icon</span>
155
155
  </span>
156
156
  </li>
157
157
  <li class="micl-list-item-three">
158
158
  <a href="https://www.nytimes.com" tabindex="-1">
159
- <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
159
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
160
160
  <span class="micl-list-item__text">
161
161
  <span class="micl-list-item__headline">The New York Times</span>
162
162
  <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
@@ -183,13 +183,13 @@
183
183
  <div class="micl-card__content">
184
184
  <ul class="micl-list" role="listbox">
185
185
  <li class="micl-list-item-one">
186
- <span class="material-symbols-outlined micl-list-item__icon">person</span>
186
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
187
187
  <span class="micl-list-item__text">
188
188
  <span class="micl-list-item__headline">One-line list item</span>
189
189
  </span>
190
190
  </li>
191
191
  <li class="micl-list-item-two">
192
- <span class="material-symbols-outlined micl-list-item__icon">globe</span>
192
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">globe</span>
193
193
  <span class="micl-list-item__text">
194
194
  <span class="micl-list-item__headline">Two-line list item</span>
195
195
  <span class="micl-list-item__supporting-text">Supporting text</span>
@@ -211,7 +211,7 @@
211
211
  <span class="micl-list-item__headline">Accordion item 1</span>
212
212
  <span class="micl-list-item__supporting-text">Click to open</span>
213
213
  </span>
214
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
214
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
215
215
  </summary>
216
216
  <div class="micl-list-item__content" style="padding-block:16px">
217
217
  <div class="micl-textfield-filled">
@@ -227,7 +227,7 @@
227
227
  <span class="micl-list-item__headline">Accordion item 2</span>
228
228
  <span class="micl-list-item__supporting-text">Click to open</span>
229
229
  </span>
230
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
230
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
231
231
  </summary>
232
232
  <div class="micl-list-item__content" style="padding-block:16px">
233
233
  <div class="micl-textfield-filled">
@@ -270,7 +270,7 @@
270
270
  <div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block-start:16px">
271
271
  <dialog id="mydialog" class="micl-dialog" popover closedby="none" aria-labelledby="mytitle">
272
272
  <form method="dialog" class="micl-dialog__headline">
273
- <span class="micl-dialog__icon material-symbols-outlined">person</span>
273
+ <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
274
274
  <h2 id="mytitle">Personal info</h2>
275
275
  </form>
276
276
  <div class="micl-dialog__content">
@@ -339,19 +339,19 @@
339
339
  <div class="micl-bottomsheet__content">
340
340
  <ul class="micl-list" style="--md-sys-list-item-container-color:transparent" role="listbox">
341
341
  <li class="micl-list-item-one" tabindex="0">
342
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
342
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
343
343
  <span class="micl-list-item__text">
344
344
  <span class="micl-list-item__headline">Share</span>
345
345
  </span>
346
346
  </li>
347
347
  <li class="micl-list-item-one" tabindex="0">
348
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
348
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
349
349
  <span class="micl-list-item__text">
350
350
  <span class="micl-list-item__headline">Get link</span>
351
351
  </span>
352
352
  </li>
353
353
  <li class="micl-list-item-one" tabindex="0">
354
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
354
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
355
355
  <span class="micl-list-item__text">
356
356
  <span class="micl-list-item__headline">Edit name</span>
357
357
  </span>
package/docs/list.html CHANGED
@@ -68,27 +68,27 @@
68
68
  </ul>
69
69
  <ul class="micl-list">
70
70
  <li class="micl-list-item-one" tabindex="0">
71
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
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>
74
74
  </span>
75
- <span class="material-symbols-outlined micl-list-item__icon">more_horiz</span>
75
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">more_horiz</span>
76
76
  </li>
77
77
  </ul>
78
78
  <ul class="micl-list">
79
79
  <li class="micl-list-item-two" tabindex="0">
80
- <span class="material-symbols-outlined micl-list-item__icon">person</span>
80
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
81
81
  <span class="micl-list-item__text">
82
82
  <span class="micl-list-item__headline">Headline</span>
83
83
  <span class="micl-list-item__supporting-text">Supporting text</span>
84
84
  </span>
85
- <span class="material-symbols-outlined micl-list-item__icon">keyboard_arrow_right</span>
85
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">keyboard_arrow_right</span>
86
86
  </li>
87
87
  </ul>
88
88
  <ul class="micl-list" role="listbox">
89
- <li class="micl-list-item-three" tabindex="0">
89
+ <li role="option" class="micl-list-item-three" tabindex="0">
90
90
  <label>
91
- <span class="material-symbols-outlined micl-list-item__icon">search</span>
91
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
92
92
  <span class="micl-list-item__text">
93
93
  <span id="hd1" 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>
@@ -96,9 +96,9 @@
96
96
  <input type="checkbox" id="cb1" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd1">
97
97
  </label>
98
98
  </li>
99
- <li class="micl-list-item-three">
99
+ <li role="option" class="micl-list-item-three">
100
100
  <label>
101
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
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
103
  <span id="hd2" 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>
@@ -158,7 +158,7 @@
158
158
  </li>
159
159
  </ul>
160
160
  <ul class="micl-list" role="listbox">
161
- <li class="micl-list-item-two" tabindex="0">
161
+ <li role="option" class="micl-list-item-two" tabindex="0">
162
162
  <label>
163
163
  <span class="micl-list-item__image" style="background-image:url(card-holiday.webp)"></span>
164
164
  <span class="micl-list-item__text">
@@ -200,7 +200,7 @@
200
200
  </li>
201
201
  </ul>
202
202
  <ul class="micl-list" role="listbox">
203
- <li class="micl-list-item-two" tabindex="0">
203
+ <li role="option" class="micl-list-item-two" tabindex="0">
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">
@@ -229,23 +229,23 @@
229
229
  </li>
230
230
  </ul>
231
231
  <ul class="micl-list" role="listbox">
232
- <li class="micl-list-item-three" tabindex="0">
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
235
  <span id="hd4" 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" tabindex="-1" aria-labelledby="hd4">
238
+ <input type="checkbox" id="cb4" class="micl-checkbox" value="c2" checked tabindex="-1" aria-labelledby="hd4">
239
239
  </label>
240
240
  </li>
241
241
  <li role="separator" class="micl-divider"></li>
242
- <li class="micl-list-item-three">
242
+ <li role="option" class="micl-list-item-three">
243
243
  <label>
244
+ <input type="checkbox" id="cb5" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd5">
244
245
  <span class="micl-list-item__text">
245
246
  <span id="hd5" class="micl-list-item__headline">Headline 2</span>
246
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>
247
248
  </span>
248
- <input type="checkbox" id="cb5" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd5">
249
249
  </label>
250
250
  </li>
251
251
  </ul>