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/divider.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">
@@ -121,14 +121,13 @@
121
121
  </div>
122
122
  </section>
123
123
  <section class="micl-pane">
124
- <div class="micl-card-filled">
124
+ <div class="micl-card-filled" style="margin-top:8px">
125
125
  <div class="micl-card__headline-s">
126
126
  <h2>Code example</h2>
127
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
127
128
  </div>
128
129
  <div class="micl-card__content docs-code">
129
- <pre tabindex="-1"><code>
130
- &lt;hr class="micl-divider"&gt;
131
- </code></pre>
130
+ <pre tabindex="-1"><code>&lt;hr class="micl-divider"&gt;</code></pre>
132
131
  </div>
133
132
  </div>
134
133
  </section>
package/docs/docs.css CHANGED
@@ -20,6 +20,7 @@ pre {
20
20
  row-gap: 16px;
21
21
  }
22
22
  .docs-code {
23
+ padding-block: var(--md-sys-card-content-padding-block);
23
24
  background-color: var(--md-sys-color-secondary);
24
25
  color: var(--md-sys-color-on-secondary);
25
26
  }
package/docs/docs.js CHANGED
@@ -133,3 +133,7 @@ document.getElementById('directionality').addEventListener('change', event => {
133
133
  }
134
134
  catch (e) {}
135
135
  });
136
+ document.getElementById('copycode')?.addEventListener('click', event => {
137
+ const code = document.querySelector('code');
138
+ !!code && navigator.clipboard.writeText(code.textContent).then(() => {}).catch(e => {});
139
+ });
package/docs/iconbutton.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,settings&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,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">
@@ -288,23 +288,22 @@
288
288
  </div>
289
289
  </section>
290
290
  <section class="micl-pane">
291
- <div class="micl-card-filled">
291
+ <div class="micl-card-filled" style="margin-top:8px">
292
292
  <div class="micl-card__headline-s">
293
293
  <h2>Code example</h2>
294
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
294
295
  </div>
295
296
  <div class="micl-card__content docs-code">
296
- <pre tabindex="-1"><code>
297
- &lt;button type="button"
298
- class="micl-iconbutton-standard-s material-symbols-outlined"
299
- aria-label="Control Panel"
297
+ <pre tabindex="-1"><code>&lt;button type="button"
298
+ class="micl-iconbutton-standard-s material-symbols-outlined"
299
+ aria-label="Control Panel"
300
300
  &gt;settings&lt;/button&gt;
301
301
 
302
302
  &lt;button type="button"
303
- class="micl-iconbutton-filled-m material-symbols-outlined
304
- micl-button--toggle micl-button--selected"
305
- aria-label="Control Panel"
306
- &gt;settings&lt;/button&gt;
307
- </code></pre>
303
+ class="micl-iconbutton-filled-m material-symbols-outlined
304
+ micl-button--toggle micl-button--selected"
305
+ aria-label="Control Panel"
306
+ &gt;settings&lt;/button&gt;</code></pre>
308
307
  </div>
309
308
  </div>
310
309
  </section>
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
@@ -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_right,more_horiz,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_right,more_horiz,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">
@@ -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>
@@ -255,13 +255,13 @@
255
255
  </div>
256
256
  </section>
257
257
  <section class="micl-pane">
258
- <div class="micl-card-filled">
258
+ <div class="micl-card-filled" style="margin-top:8px">
259
259
  <div class="micl-card__headline-s">
260
260
  <h2>Code example</h2>
261
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
261
262
  </div>
262
263
  <div class="micl-card__content docs-code">
263
- <pre tabindex="-1"><code>
264
- &lt;ul class="micl-list"&gt;
264
+ <pre tabindex="-1"><code>&lt;ul class="micl-list"&gt;
265
265
  &lt;li class="micl-list-item-two"&gt;
266
266
  &lt;span class="micl-list-item__avatar"&gt;17&lt;/span&gt;
267
267
  &lt;span class="micl-list-item__text"&gt;
@@ -282,8 +282,7 @@
282
282
  &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0" tabindex="-1"&gt;
283
283
  &lt;/label&gt;
284
284
  &lt;/li&gt;
285
- &lt;/ul&gt;
286
- </code></pre>
285
+ &lt;/ul&gt;</code></pre>
287
286
  </div>
288
287
  </div>
289
288
  </section>
package/docs/menu.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_right,check,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,content_copy,dark_mode,group,home,keyboard_command_key,newspaper,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">
@@ -71,7 +71,7 @@
71
71
  <nav id="mymenu2" class="micl-menu" popover>
72
72
  <ul class="micl-list">
73
73
  <li class="micl-list-item-two" tabindex="0">
74
- <span class="micl-list-item__icon material-symbols-outlined">home</span>
74
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">home</span>
75
75
  <span class="micl-list-item__text">
76
76
  <span class="micl-list-item__headline">Home</span>
77
77
  <span class="micl-list-item__supporting-text">Click here to go home</span>
@@ -88,7 +88,7 @@
88
88
  </label>
89
89
  </li>
90
90
  <li class="micl-list-item-two">
91
- <span class="micl-list-item__icon material-symbols-outlined">settings</span>
91
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">settings</span>
92
92
  <span class="micl-list-item__text">
93
93
  <span class="micl-list-item__headline">About</span>
94
94
  <span class="micl-list-item__supporting-text">Change everything in the system</span>
@@ -100,7 +100,7 @@
100
100
  <span class="micl-list-item__headline">Contact</span>
101
101
  <span class="micl-list-item__supporting-text">Call me!</span>
102
102
  </span>
103
- <span class="micl-list-item__icon material-symbols-outlined">keyboard_command_key</span>
103
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">keyboard_command_key</span>
104
104
  </li>
105
105
  </ul>
106
106
  </nav>
@@ -111,7 +111,7 @@
111
111
  <nav id="mymenu3" class="micl-menu" popover>
112
112
  <ul class="micl-list">
113
113
  <li class="micl-list-item-three" tabindex="0">
114
- <span class="micl-list-item__icon material-symbols-outlined">group</span>
114
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">group</span>
115
115
  <span class="micl-list-item__text">
116
116
  <span class="micl-list-item__headline">Number of employees</span>
117
117
  <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
@@ -127,7 +127,7 @@
127
127
  </li>
128
128
  <li class="micl-list-item-three">
129
129
  <a href="https://www.nytimes.com" tabindex="-1">
130
- <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
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>
133
133
  <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
@@ -136,7 +136,7 @@
136
136
  </li>
137
137
  <li class="micl-list-item-three">
138
138
  <label>
139
- <span class="micl-list-item__icon material-symbols-outlined">check</span>
139
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">check</span>
140
140
  <span class="micl-list-item__text">
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>
@@ -157,7 +157,7 @@
157
157
  <span class="micl-list-item__text">
158
158
  <span class="micl-list-item__headline">Europe</span>
159
159
  </span>
160
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
160
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
161
161
  </button>
162
162
  <nav id="mymenu5" class="micl-menu" popover>
163
163
  <ul class="micl-list">
@@ -194,7 +194,7 @@
194
194
  <span class="micl-list-item__text">
195
195
  <span class="micl-list-item__headline">Africa</span>
196
196
  </span>
197
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
197
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
198
198
  </button>
199
199
  <nav id="mymenu6" class="micl-menu" popover>
200
200
  <ul class="micl-list">
@@ -231,7 +231,7 @@
231
231
  <span class="micl-list-item__text">
232
232
  <span class="micl-list-item__headline">Asia</span>
233
233
  </span>
234
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
234
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
235
235
  </button>
236
236
  <nav id="mymenu7" class="micl-menu" popover>
237
237
  <ul class="micl-list">
@@ -268,7 +268,7 @@
268
268
  <span class="micl-list-item__text">
269
269
  <span class="micl-list-item__headline">America</span>
270
270
  </span>
271
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
271
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
272
272
  </button>
273
273
  <nav id="mymenu8" class="micl-menu" popover>
274
274
  <ul class="micl-list">
@@ -277,7 +277,7 @@
277
277
  <span class="micl-list-item__text">
278
278
  <span class="micl-list-item__headline">North America</span>
279
279
  </span>
280
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
280
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
281
281
  </button>
282
282
  <nav id="mymenu9" class="micl-menu" popover>
283
283
  <ul class="micl-list">
@@ -304,7 +304,7 @@
304
304
  <span class="micl-list-item__text">
305
305
  <span class="micl-list-item__headline">South America</span>
306
306
  </span>
307
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
307
+ <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">arrow_right</span>
308
308
  </button>
309
309
  <nav id="mymenu10" class="micl-menu" popover>
310
310
  <ul class="micl-list">
@@ -334,29 +334,28 @@
334
334
  <div class="micl-card-filled">
335
335
  <div class="micl-card__headline-s">
336
336
  <h2>Code example</h2>
337
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
337
338
  </div>
338
339
  <div class="micl-card__content docs-code">
339
- <pre tabindex="-1"><code>
340
- &lt;nav id="id0" class="micl-menu" popover&gt;
341
- &lt;ul class="micl-list"&gt;
342
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
343
- &lt;span class="micl-list-item__text"&gt;
344
- &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
345
- &lt;/span&gt;
346
- &lt;/li&gt;
347
- &lt;li class="micl-list-item-one"&gt;
348
- &lt;span class="micl-list-item__text"&gt;
349
- &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
350
- &lt;/span&gt;
351
- &lt;/li&gt;
352
- &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
353
- &lt;span class="micl-list-item__text"&gt;
354
- &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
355
- &lt;/span&gt;
356
- &lt;/li&gt;
357
- &lt;/ul&gt;
358
- &lt;/nav&gt;
359
- </code></pre>
340
+ <pre tabindex="-1"><code>&lt;nav id="id0" class="micl-menu" popover&gt;
341
+ &lt;ul class="micl-list"&gt;
342
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
343
+ &lt;span class="micl-list-item__text"&gt;
344
+ &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
345
+ &lt;/span&gt;
346
+ &lt;/li&gt;
347
+ &lt;li class="micl-list-item-one"&gt;
348
+ &lt;span class="micl-list-item__text"&gt;
349
+ &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
350
+ &lt;/span&gt;
351
+ &lt;/li&gt;
352
+ &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
353
+ &lt;span class="micl-list-item__text"&gt;
354
+ &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
355
+ &lt;/span&gt;
356
+ &lt;/li&gt;
357
+ &lt;/ul&gt;
358
+ &lt;/nav&gt;</code></pre>
360
359
  </div>
361
360
  </div>
362
361
  </div>