material-inspired-component-library 6.0.0 → 6.0.3

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 (72) 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/select/index.scss +3 -0
  6. package/components/sidesheet/README.md +3 -3
  7. package/components/snackbar/index.scss +78 -0
  8. package/components/snackbar/index.ts +56 -0
  9. package/components/stepper/README.md +1 -1
  10. package/components/stepper/index.ts +6 -2
  11. package/components/textfield/README.md +2 -2
  12. package/components/textfield/index.scss +1 -1
  13. package/dist/alert.css +1 -1
  14. package/dist/appbar.css +1 -1
  15. package/dist/badge.css +1 -1
  16. package/dist/bottomsheet.css +1 -1
  17. package/dist/button.css +1 -1
  18. package/dist/card.css +1 -1
  19. package/dist/checkbox.css +1 -1
  20. package/dist/components/snackbar/index.d.ts +5 -0
  21. package/dist/datepicker.css +1 -1
  22. package/dist/dialog.css +1 -1
  23. package/dist/divider.css +1 -1
  24. package/dist/foundations.css +1 -1
  25. package/dist/iconbutton.css +1 -1
  26. package/dist/list.css +1 -1
  27. package/dist/menu.css +1 -1
  28. package/dist/micl.css +1 -1
  29. package/dist/micl.js +1 -1
  30. package/dist/navigationrail.css +1 -1
  31. package/dist/radio.css +1 -1
  32. package/dist/select.css +1 -1
  33. package/dist/sidesheet.css +1 -1
  34. package/dist/slider.css +1 -1
  35. package/dist/snackbar.css +1 -0
  36. package/dist/snackbar.js +1 -0
  37. package/dist/stepper.css +1 -1
  38. package/dist/switch.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/timepicker.css +1 -1
  41. package/docs/accordion.html +25 -26
  42. package/docs/alert.html +15 -16
  43. package/docs/bottomsheet.html +29 -30
  44. package/docs/button.html +7 -8
  45. package/docs/card.html +5 -6
  46. package/docs/checkbox.html +5 -6
  47. package/docs/datepicker.html +5 -6
  48. package/docs/dialog.html +4 -5
  49. package/docs/divider.html +4 -5
  50. package/docs/docs.css +1 -0
  51. package/docs/docs.js +4 -0
  52. package/docs/iconbutton.html +10 -11
  53. package/docs/index.html +15 -15
  54. package/docs/list.html +19 -20
  55. package/docs/menu.html +33 -34
  56. package/docs/micl.css +1 -1
  57. package/docs/micl.js +1 -1
  58. package/docs/radio.html +5 -6
  59. package/docs/select.html +5 -6
  60. package/docs/sidesheet.html +12 -13
  61. package/docs/slider.html +7 -8
  62. package/docs/snackbar.html +76 -0
  63. package/docs/snackbar1.html +159 -0
  64. package/docs/snackbar2.html +159 -0
  65. package/docs/stepper.html +5 -6
  66. package/docs/switch.html +5 -6
  67. package/docs/textfield.html +29 -30
  68. package/docs/timepicker.html +6 -7
  69. package/foundations/index.scss +4 -1
  70. package/micl.ts +2 -0
  71. package/package.json +1 -1
  72. package/styles.scss +1 -0
package/docs/accordion.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,content_copy,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -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>
@@ -300,16 +300,16 @@
300
300
  </div>
301
301
  </section>
302
302
  <section class="micl-pane">
303
- <div class="micl-card-filled">
303
+ <div class="micl-card-filled" style="margin-top:8px">
304
304
  <div class="micl-card__headline-s">
305
305
  <h2>Code example</h2>
306
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
306
307
  </div>
307
308
  <div class="micl-card__content docs-code">
308
- <pre tabindex="-1"><code>
309
- &lt;div class="micl-list" role="listbox"&gt;
309
+ <pre tabindex="-1"><code>&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;
@@ -332,8 +332,7 @@
332
332
  &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
333
333
  &lt;/div&gt;
334
334
  &lt;/details&gt;
335
- &lt;/div&gt;
336
- </code></pre>
335
+ &lt;/div&gt;</code></pre>
337
336
  </div>
338
337
  </div>
339
338
  </section>
package/docs/alert.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,dark_mode,error,home,question_mark&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,content_copy,dark_mode,error,home,question_mark&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -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>
@@ -153,20 +153,19 @@
153
153
  </div>
154
154
  </section>
155
155
  <section class="micl-pane">
156
- <div class="micl-card-filled">
156
+ <div class="micl-card-filled" style="margin-top:8px">
157
157
  <div class="micl-card__headline-s">
158
158
  <h2>Code example</h2>
159
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
159
160
  </div>
160
161
  <div class="micl-card__content docs-code">
161
- <pre tabindex="-1"><code>
162
- &lt;div class="micl-alert-tonal" role="alert"&gt;
163
- &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
162
+ <pre tabindex="-1"><code>&lt;div class="micl-alert-tonal" role="alert"&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;
167
167
  &lt;/span&gt;
168
- &lt;/div&gt;
169
- </code></pre>
168
+ &lt;/div&gt;</code></pre>
170
169
  </div>
171
170
  </div>
172
171
  </section>
package/docs/bottomsheet.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,home,link,pause,share,skip_next&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,edit,home,link,pause,share,skip_next&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -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>
@@ -206,31 +206,30 @@
206
206
  <div class="micl-card-filled">
207
207
  <div class="micl-card__headline-s">
208
208
  <h2>Code example</h2>
209
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
209
210
  </div>
210
211
  <div class="micl-card__content docs-code">
211
- <pre tabindex="-1"><code>
212
- &lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
213
- &lt;div class="micl-bottomsheet__headline"&gt;
214
- &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
215
- &lt;/div&gt;
216
- &lt;div class="micl-bottomsheet__content"&gt;
217
- &lt;ul class="micl-list" role="listbox"&gt;
218
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
219
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
220
- &lt;span class="micl-list-item__text"&gt;
221
- &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
222
- &lt;/span&gt;
223
- &lt;/li&gt;
224
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
225
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
226
- &lt;span class="micl-list-item__text"&gt;
227
- &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
228
- &lt;/span&gt;
229
- &lt;/li&gt;
230
- &lt;/ul&gt;
231
- &lt;/div&gt;
232
- &lt;/dialog&gt;
233
- </code></pre>
212
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
213
+ &lt;div class="micl-bottomsheet__headline"&gt;
214
+ &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
215
+ &lt;/div&gt;
216
+ &lt;div class="micl-bottomsheet__content"&gt;
217
+ &lt;ul class="micl-list" role="listbox"&gt;
218
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
219
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
220
+ &lt;span class="micl-list-item__text"&gt;
221
+ &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
222
+ &lt;/span&gt;
223
+ &lt;/li&gt;
224
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
225
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
226
+ &lt;span class="micl-list-item__text"&gt;
227
+ &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
228
+ &lt;/span&gt;
229
+ &lt;/li&gt;
230
+ &lt;/ul&gt;
231
+ &lt;/div&gt;
232
+ &lt;/dialog&gt;</code></pre>
234
233
  </div>
235
234
  </div>
236
235
  </div>
package/docs/button.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,edit,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -237,21 +237,20 @@
237
237
  </div>
238
238
  </section>
239
239
  <section class="micl-pane">
240
- <div class="micl-card-filled">
240
+ <div class="micl-card-filled" style="margin-top:8px">
241
241
  <div class="micl-card__headline-s">
242
242
  <h2>Code example</h2>
243
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
243
244
  </div>
244
245
  <div class="micl-card__content docs-code">
245
- <pre tabindex="-1"><code>
246
- &lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
246
+ <pre tabindex="-1"><code>&lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
247
247
 
248
248
  &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
249
249
 
250
250
  &lt;button type="button" class="micl-button-outlined-xl micl-button--square"&gt;
251
- &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
252
- Click
253
- &lt;/button&gt;
254
- </code></pre>
251
+ &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
252
+ Click
253
+ &lt;/button&gt;</code></pre>
255
254
  </div>
256
255
  </div>
257
256
  </section>
package/docs/card.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -118,13 +118,13 @@
118
118
  </div>
119
119
  </section>
120
120
  <section class="micl-pane micl-pane--fixed" style="width:680px">
121
- <div class="micl-card-filled">
121
+ <div class="micl-card-filled" style="margin-top:8px">
122
122
  <div class="micl-card__headline-s">
123
123
  <h2>Code example</h2>
124
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
124
125
  </div>
125
126
  <div class="micl-card__content docs-code">
126
- <pre tabindex="-1"><code>
127
- &lt;div class="micl-card-elevated" tabindex="0"&gt;
127
+ <pre tabindex="-1"><code>&lt;div class="micl-card-elevated" tabindex="0"&gt;
128
128
  &lt;div class="micl-card__headline-s"&gt;
129
129
  &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/h2&gt;
130
130
  &lt;/div&gt;
@@ -133,8 +133,7 @@
133
133
  &lt;div class="micl-card__content"&gt;
134
134
  &lt;p class="md-sys-typescale-body-small"&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/p&gt;
135
135
  &lt;/div&gt;
136
- &lt;/div&gt;
137
- </code></pre>
136
+ &lt;/div&gt;</code></pre>
138
137
  </div>
139
138
  </div>
140
139
  </section>
package/docs/checkbox.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -126,17 +126,16 @@
126
126
  </div>
127
127
  </section>
128
128
  <section class="micl-pane">
129
- <div class="micl-card-filled">
129
+ <div class="micl-card-filled" style="margin-top:8px">
130
130
  <div class="micl-card__headline-s">
131
131
  <h2>Code example</h2>
132
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
132
133
  </div>
133
134
  <div class="micl-card__content docs-code">
134
- <pre tabindex="-1"><code>
135
- &lt;div class="micl-flex--vcenter"&gt;
135
+ <pre><code>&lt;div class="micl-flex--vcenter"&gt;
136
136
  &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
137
137
  &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
138
- &lt;/div&gt;
139
- </code></pre>
138
+ &lt;/div&gt;</code></pre>
140
139
  </div>
141
140
  </div>
142
141
  </section>
package/docs/datepicker.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,dark_mode,edit,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,content_copy,dark_mode,edit,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -220,13 +220,13 @@
220
220
  </div>
221
221
  </section>
222
222
  <section class="micl-pane">
223
- <div class="micl-card-filled">
223
+ <div class="micl-card-filled" style="margin-top:8px">
224
224
  <div class="micl-card__headline-s">
225
225
  <h2>Code example</h2>
226
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
226
227
  </div>
227
228
  <div class="micl-card__content docs-code">
228
- <pre tabindex="-1"><code>
229
- &lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
229
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
230
230
  &lt;form method="dialog"&gt;
231
231
  &lt;div class="micl-dialog__headline"&gt;
232
232
  &lt;h2 id="id1"&gt;Enter dates&lt;/h2&gt;
@@ -262,8 +262,7 @@
262
262
  &lt;button class="micl-button-text-s" value="OK"&gt;OK&lt;/button&gt;
263
263
  &lt;/div&gt;
264
264
  &lt;/form&gt;
265
- &lt;/dialog&gt;
266
- </code></pre>
265
+ &lt;/dialog&gt;</code></pre>
267
266
  </div>
268
267
  </div>
269
268
  </section>
package/docs/dialog.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,home,person,restart_alt&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,home,person,restart_alt&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -171,10 +171,10 @@
171
171
  <div class="micl-card-filled">
172
172
  <div class="micl-card__headline-s">
173
173
  <h2>Code example</h2>
174
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
174
175
  </div>
175
176
  <div class="micl-card__content docs-code">
176
- <pre tabindex="-1"><code>
177
- &lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
177
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
178
178
  &lt;div class="micl-dialog__headline"&gt;
179
179
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
180
180
  &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
@@ -183,8 +183,7 @@
183
183
  &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;Cancel&lt;/button&gt;
184
184
  &lt;button type="button" class="micl-button-text-s"&gt;Action&lt;/button&gt;
185
185
  &lt;/div&gt;
186
- &lt;/dialog&gt;
187
- </code></pre>
186
+ &lt;/dialog&gt;</code></pre>
188
187
  </div>
189
188
  </div>
190
189
  </div>