material-inspired-component-library 6.0.7 → 7.0.0

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/README.md +11 -2
  2. package/components/appbar/index.scss +4 -4
  3. package/components/button/README.md +16 -1
  4. package/components/button/index.scss +6 -0
  5. package/components/button/index.ts +17 -0
  6. package/components/card/README.md +82 -11
  7. package/components/card/index.scss +169 -209
  8. package/components/datepicker/README.md +3 -2
  9. package/components/datepicker/index.ts +0 -8
  10. package/components/iconbutton/README.md +11 -0
  11. package/components/iconbutton/index.scss +12 -0
  12. package/components/iconbutton/index.ts +15 -0
  13. package/components/navigationrail/README.md +64 -59
  14. package/components/navigationrail/index.scss +197 -300
  15. package/components/navigationrail/index.ts +55 -38
  16. package/components/snackbar/README.md +126 -0
  17. package/components/snackbar/index.scss +94 -73
  18. package/components/snackbar/index.ts +90 -28
  19. package/components/timepicker/README.md +2 -1
  20. package/components/timepicker/index.ts +0 -3
  21. package/dist/appbar.css +1 -1
  22. package/dist/button.css +1 -1
  23. package/dist/card.css +1 -1
  24. package/dist/components/navigationrail/index.d.ts +2 -1
  25. package/dist/components/snackbar/index.d.ts +1 -0
  26. package/dist/iconbutton.css +1 -1
  27. package/dist/micl.css +1 -1
  28. package/dist/micl.js +1 -1
  29. package/dist/navigationrail.css +1 -1
  30. package/dist/snackbar.css +1 -1
  31. package/docs/button.html +43 -15
  32. package/docs/card.html +6 -5
  33. package/docs/datepicker.html +4 -4
  34. package/docs/iconbutton.html +22 -8
  35. package/docs/index.html +31 -18
  36. package/docs/micl.css +1 -1
  37. package/docs/micl.js +1 -1
  38. package/docs/navigationrail.html +76 -22
  39. package/docs/snackbar.html +31 -14
  40. package/docs/timepicker.html +12 -3
  41. package/package.json +1 -1
  42. package/docs/snackbar1.html +0 -159
  43. package/docs/snackbar2.html +0 -159
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=content_copy,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,draw,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">
@@ -200,38 +200,50 @@
200
200
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
201
201
  <button type="button" id="btn1" class="micl-button-elevated-m micl-button--toggle" commandfor="btn1" command="--micl-toggle">Click</button>
202
202
  <button type="button" id="btn2" class="micl-button-elevated-m micl-button--toggle micl-button--selected" commandfor="btn2" command="--micl-toggle">Click</button>
203
- <button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">Click</button>
204
- <button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">Click</button>
205
- </div>
206
- <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
207
- <button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">
203
+ <button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">
208
204
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
209
205
  Click
210
206
  </button>
211
- <button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle micl-button--selected" commandfor="btn6" command="--micl-toggle">
212
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
207
+ <button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">
208
+ <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
213
209
  Click
214
210
  </button>
211
+ </div>
212
+ <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
213
+ <button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">Click</button>
214
+ <button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle micl-button--selected" commandfor="btn6" command="--micl-toggle">Click</button>
215
215
  <button type="button" id="btn7" class="micl-button-filled-m micl-button--square micl-button--toggle" commandfor="btn7" command="--micl-toggle">
216
216
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
217
217
  Click
218
218
  </button>
219
219
  <button type="button" id="btn8" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn8" command="--micl-toggle">
220
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
220
+ <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
221
221
  Click
222
222
  </button>
223
223
  </div>
224
224
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
225
225
  <button type="button" id="btn9" class="micl-button-tonal-m micl-button--toggle" commandfor="btn9" command="--micl-toggle">Click</button>
226
226
  <button type="button" id="btn10" class="micl-button-tonal-m micl-button--toggle micl-button--selected" commandfor="btn10" command="--micl-toggle">Click</button>
227
- <button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">Click</button>
228
- <button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn12" command="--micl-toggle">Click</button>
227
+ <button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">
228
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
229
+ Click
230
+ </button>
231
+ <button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn12" command="--micl-toggle">
232
+ <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
233
+ Click
234
+ </button>
229
235
  </div>
230
236
  <div style="display:flex;flex-wrap:wrap;gap:8px">
231
237
  <button type="button" id="btn13" class="micl-button-outlined-m micl-button--toggle" commandfor="btn13" command="--micl-toggle">Click</button>
232
238
  <button type="button" id="btn14" class="micl-button-outlined-m micl-button--toggle micl-button--selected" commandfor="btn14" command="--micl-toggle">Click</button>
233
- <button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">Click</button>
234
- <button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn16" command="--micl-toggle">Click</button>
239
+ <button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">
240
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
241
+ Click
242
+ </button>
243
+ <button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn16" command="--micl-toggle">
244
+ <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
245
+ Click
246
+ </button>
235
247
  </div>
236
248
  </div>
237
249
  </div>
@@ -245,11 +257,27 @@
245
257
  <div class="micl-card__content docs-code">
246
258
  <pre tabindex="-1"><code>&lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
247
259
 
248
- &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
249
-
250
260
  &lt;button type="button" class="micl-button-outlined-xl micl-button--square"&gt;
251
261
  &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
252
262
  Click
263
+ &lt;/button&gt;
264
+
265
+ &lt;button class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
266
+
267
+ &lt;button
268
+ type="button"
269
+ id="mybutton"
270
+ class="micl-button-tonal-l micl-button--toggle"
271
+ commandfor="mybutton"
272
+ command="--micl-toggle"
273
+ &gt;
274
+ &lt;span
275
+ class="micl-button__icon material-symbols-outlined"
276
+ data-miclicon="edit"
277
+ data-micliconselected="draw"
278
+ aria-hidden="true"
279
+ &gt;&lt;/span&gt;
280
+ Click
253
281
  &lt;/button&gt;</code></pre>
254
282
  </div>
255
283
  </div>
package/docs/card.html CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
48
48
  <div class="micl-pane__column">
49
- <div class="micl-card-elevated" style="margin-top:8px" tabindex="0">
49
+ <div role="button" class="micl-card-elevated" style="margin-top:8px" tabindex="0">
50
50
  <div class="docs-icon" aria-hidden="true">A</div>
51
51
  <div class="micl-card__headline-s">
52
52
  <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
@@ -64,9 +64,10 @@
64
64
  <p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
65
65
  <div class="micl-card__content">
66
66
  <p class="md-sys-typescale-body-medium">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>
67
+ <button type="button" class="micl-button-filled-s" style="margin-block-start:16px">Action</button>
67
68
  </div>
68
69
  </div>
69
- <div class="micl-card-outlined" tabindex="0">
70
+ <div role="link" class="micl-card-outlined" tabindex="0">
70
71
  <div class="micl-card__headline-l">
71
72
  <h2>Lorem</h2>
72
73
  </div>
@@ -92,7 +93,7 @@
92
93
  </details>
93
94
  <details class="micl-card-elevated">
94
95
  <summary>
95
- <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
96
+ <img alt="holiday" class="micl-card__image" src="card-holiday.webp" aria-hidden="true">
96
97
  <span class="micl-card__headline-s">
97
98
  <span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
98
99
  </span>
@@ -106,7 +107,7 @@
106
107
  </details>
107
108
  <details class="micl-card-outlined">
108
109
  <summary>
109
- <span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340"></span>
110
+ <span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340" aria-hidden="true"></span>
110
111
  <span class="micl-card__headline-l">
111
112
  <span class="micl-heading">Lorem</span>
112
113
  </span>
@@ -117,7 +118,7 @@
117
118
  </details>
118
119
  <details class="micl-card-filled">
119
120
  <summary class="micl-card--compact">
120
- <span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340"></span>
121
+ <span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340" aria-hidden="true"></span>
121
122
  <span class="micl-card__headline-m">
122
123
  <span class="micl-heading">Lorem ipsum</span>
123
124
  </span>
package/docs/datepicker.html CHANGED
@@ -60,7 +60,7 @@
60
60
  <div class="micl-dialog__headline">
61
61
  <h2 id="mytitle1">Enter dates</h2>
62
62
  <span class="micl-dialog__supporting-text">Select date</span>
63
- <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
63
+ <button type="button" id="btn1" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
64
64
  <hr class="micl-divider">
65
65
  <div class="micl-datepicker__month-selector">
66
66
  <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
@@ -139,7 +139,7 @@
139
139
  <div class="micl-dialog__headline">
140
140
  <h2 id="mytitle3">Enter dates</h2>
141
141
  <span class="micl-dialog__supporting-text">Select date</span>
142
- <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
142
+ <button type="button" id="btn2" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
143
143
  <hr class="micl-divider">
144
144
  <div class="micl-datepicker__month-selector">
145
145
  <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
@@ -182,7 +182,7 @@
182
182
  <div class="micl-dialog__headline">
183
183
  <h2 id="mytitle4">Enter dates</h2>
184
184
  <span class="micl-dialog__supporting-text">Select date</span>
185
- <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
185
+ <button type="button" id="btn4" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
186
186
  <hr class="micl-divider">
187
187
  <div class="micl-datepicker__month-selector">
188
188
  <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
@@ -231,7 +231,7 @@
231
231
  &lt;div class="micl-dialog__headline"&gt;
232
232
  &lt;h2 id="id1"&gt;Enter dates&lt;/h2&gt;
233
233
  &lt;span class="micl-dialog__supporting-text"&gt;Select date&lt;/span&gt;
234
- &lt;button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today"&gt;edit&lt;/button&gt;
234
+ &lt;button type="button" id="btn" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"&gt;&lt;/button&gt;
235
235
  &lt;hr class="micl-divider"&gt;
236
236
  &lt;div class="micl-datepicker__month-selector"&gt;
237
237
  &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month"&gt;chevron_left&lt;/button&gt;
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=content_copy,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=check_circle,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">
@@ -270,19 +270,19 @@
270
270
  <div class="micl-card__content">
271
271
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
272
272
  <button type="button" id="btn1" class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" aria-label="Control Panel">settings</button>
273
- <button type="button" id="btn2" class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn2" command="--micl-toggle" aria-label="Control Panel">settings</button>
273
+ <button type="button" id="btn2" class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
274
274
  </div>
275
275
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
276
276
  <button type="button" id="btn3" class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" commandfor="btn3" command="--micl-toggle" aria-label="Control Panel">settings</button>
277
- <button type="button" id="btn4" class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn4" command="--micl-toggle" aria-label="Control Panel">settings</button>
277
+ <button type="button" id="btn4" class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
278
278
  </div>
279
279
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
280
280
  <button type="button" id="btn5" class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" commandfor="btn5" command="--micl-toggle" aria-label="Control Panel">settings</button>
281
- <button type="button" id="btn6" class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn6" command="--micl-toggle" aria-label="Control Panel">settings</button>
281
+ <button type="button" id="btn6" class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn6" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
282
282
  </div>
283
283
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
284
284
  <button type="button" id="btn7" class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" commandfor="btn7" command="--micl-toggle" aria-label="Control Panel">settings</button>
285
- <button type="button" id="btn8" class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn8" command="--micl-toggle" aria-label="Control Panel">settings</button>
285
+ <button type="button" id="btn8" class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn8" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
286
286
  </div>
287
287
  </div>
288
288
  </div>
@@ -294,16 +294,30 @@
294
294
  <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
295
295
  </div>
296
296
  <div class="micl-card__content docs-code">
297
- <pre tabindex="-1"><code>&lt;button type="button"
297
+ <pre tabindex="-1"><code>&lt;button
298
+ type="button"
298
299
  class="micl-iconbutton-standard-s material-symbols-outlined"
299
300
  aria-label="Control Panel"
300
301
  &gt;settings&lt;/button&gt;
301
302
 
302
- &lt;button type="button"
303
+ &lt;button
304
+ type="button"
303
305
  class="micl-iconbutton-filled-m material-symbols-outlined
304
306
  micl-button--toggle micl-button--selected"
305
307
  aria-label="Control Panel"
306
- &gt;settings&lt;/button&gt;</code></pre>
308
+ &gt;settings&lt;/button&gt;
309
+
310
+ &lt;button
311
+ type="button"
312
+ id="mybutton"
313
+ class="micl-iconbutton-outlined-m micl-button--toggle
314
+ micl-button--selected material-symbols-outlined"
315
+ commandfor="mybutton"
316
+ command="--micl-toggle"
317
+ data-miclicon="settings"
318
+ data-micliconselected="check_circle"
319
+ aria-label="Control Panel"
320
+ &gt;&lt;/button&gt;</code></pre>
307
321
  </div>
308
322
  </div>
309
323
  </section>
package/docs/index.html CHANGED
@@ -22,33 +22,29 @@
22
22
  </style>
23
23
  </head>
24
24
  <body class="micl-window light">
25
- <dialog id="mynavigationrail" class="micl-navigationrail" closedby="closerequest">
25
+ <dialog id="mynavigationrail" class="micl-navigationrail" style="--md-comp-nav-rail-expanded-top-space:12px" closedby="closerequest">
26
26
  <div class="micl-navigationrail__headline">
27
27
  <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" command="close" commandfor="mynavigationrail" aria-label="Close navigation rail">menu_open</button>
28
28
  </div>
29
29
  <div class="micl-navigationrail__content">
30
- <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
31
- <label for="item1" class="micl-navigationrail__item" tabindex="0">
30
+ <a href="#" class="micl-navigationrail__item" tabindex="0">
32
31
  <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
33
32
  <span class="micl-navigationrail__text">Inbox</span>
34
- <span class="micl-badge" style="position-anchor:--inbox">97</span>
35
- </label>
36
- <input type="radio" id="item2" name="navitem" value="email_outbox">
37
- <label for="item2" class="micl-navigationrail__item" tabindex="0">
33
+ <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-inline-offset:-16px">97</span>
34
+ </a>
35
+ <a href="#" class="micl-navigationrail__item" tabindex="0">
38
36
  <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
39
37
  <span class="micl-navigationrail__text">Outbox</span>
40
- </label>
41
- <input type="radio" id="item3" name="navitem" value="email_favorites">
42
- <label for="item3" class="micl-navigationrail__item" tabindex="0">
38
+ </a>
39
+ <a href="#" class="micl-navigationrail__item" tabindex="0">
43
40
  <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
44
41
  <span class="micl-navigationrail__text">Favorites</span>
45
- <span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
46
- </label>
47
- <input type="radio" id="item4" name="navitem" value="email_trash">
48
- <label for="item4" class="micl-navigationrail__item" tabindex="0">
42
+ <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-inline-offset:-16px"></span>
43
+ </a>
44
+ <a href="#" class="micl-navigationrail__item" tabindex="0">
49
45
  <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
50
46
  <span class="micl-navigationrail__text">Trash</span>
51
- </label>
47
+ </a>
52
48
  </div>
53
49
  </dialog>
54
50
 
@@ -125,7 +121,7 @@
125
121
  </div>
126
122
 
127
123
  <div class="micl-card-outlined">
128
- <img class="micl-card__image" alt="city" src="card-city.webp">
124
+ <img class="micl-card__image" alt="city" src="card-city.webp" aria-hidden="true">
129
125
  <div class="micl-card__headline-l">
130
126
  <h2>Card</h2>
131
127
  </div>
@@ -196,7 +192,7 @@
196
192
  </span>
197
193
  </li>
198
194
  <li class="micl-list-item-three">
199
- <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
195
+ <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center" aria-hidden="true"></span>
200
196
  <span class="micl-list-item__text">
201
197
  <span class="micl-list-item__headline">Three-line list item</span>
202
198
  <span class="micl-list-item__supporting-text">Supporting text</span>
@@ -249,7 +245,7 @@
249
245
  <div class="micl-timepicker__dial"></div>
250
246
  </div>
251
247
  <div class="micl-dialog__actions">
252
- <button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-alticon="schedule">keyboard</button>
248
+ <button type="button" id="btn" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="keyboard" data-micliconselected="schedule"></button>
253
249
  <div>
254
250
  <button class="micl-button-text-s" value="">Cancel</button>
255
251
  <button class="micl-button-text-s" value="OK">OK</button>
@@ -385,6 +381,7 @@
385
381
  <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
386
382
  <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
387
383
  <p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
384
+ <p><a href="snackbar.html" class="md-sys-typescale-body-large">Snackbars</a></p>
388
385
  <p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
389
386
  <p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
390
387
  <p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
@@ -395,8 +392,24 @@
395
392
  </div>
396
393
  </section>
397
394
  </main>
395
+ <div id="mysnackbar" class="micl-snackbar" popover data-micldelay="7000" role="status" aria-atomic="true">
396
+ <span class="micl-snackbar__supporting-text">This is the Snackbar component</span>
397
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysnackbar" popovertargetaction="hide">close</button>
398
+ </div>
398
399
 
399
400
  <script src="micl.js"></script>
400
401
  <script src="docs.js"></script>
402
+ <script>
403
+ const loaded = () => {
404
+ document.removeEventListener('DOMContentLoaded', loaded);
405
+ document.querySelector('#mysnackbar')?.showPopover();
406
+ };
407
+ if (document.readyState !== 'loading') {
408
+ document.querySelector('#mysnackbar')?.showPopover();
409
+ }
410
+ else {
411
+ document.addEventListener('DOMContentLoaded', loaded);
412
+ }
413
+ </script>
401
414
  </body>
402
415
  </html>