material-inspired-component-library 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/components/accordion/README.md +42 -3
  2. package/components/alert/README.md +19 -7
  3. package/components/button/README.md +1 -1
  4. package/components/button/index.scss +23 -20
  5. package/components/dialog/README.md +5 -5
  6. package/components/divider/index.scss +9 -3
  7. package/components/iconbutton/README.md +1 -1
  8. package/components/iconbutton/index.scss +20 -17
  9. package/components/list/README.md +18 -16
  10. package/components/list/index.scss +90 -68
  11. package/components/menu/README.md +2 -1
  12. package/components/menu/index.scss +6 -18
  13. package/components/select/README.md +7 -2
  14. package/components/select/index.scss +2 -3
  15. package/components/sidesheet/README.md +13 -19
  16. package/components/sidesheet/index.scss +15 -16
  17. package/components/textfield/index.ts +26 -0
  18. package/components/timepicker/index.scss +268 -0
  19. package/components/timepicker/index.ts +113 -0
  20. package/dist/button.css +1 -1
  21. package/dist/components/timepicker/index.d.ts +5 -0
  22. package/dist/divider.css +1 -1
  23. package/dist/iconbutton.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/menu.css +1 -1
  26. package/dist/micl.css +1 -1
  27. package/dist/micl.js +1 -1
  28. package/dist/select.css +1 -1
  29. package/dist/sidesheet.css +1 -1
  30. package/dist/timepicker.css +1 -0
  31. package/dist/timepicker.js +1 -0
  32. package/docs/accordion.html +31 -17
  33. package/docs/button.html +42 -15
  34. package/docs/iconbutton.html +258 -164
  35. package/docs/index.html +11 -8
  36. package/docs/list.html +52 -44
  37. package/docs/menu.html +2 -1
  38. package/docs/micl.css +1 -1
  39. package/docs/micl.js +1 -1
  40. package/docs/sidesheet.html +3 -2
  41. package/docs/timepicker.html +113 -0
  42. package/micl.ts +3 -1
  43. package/package.json +2 -4
  44. package/styles.scss +1 -0
package/docs/iconbutton.html CHANGED
@@ -33,169 +33,256 @@
33
33
  </header>
34
34
 
35
35
  <div class="micl-card-elevated">
36
- <div class="micl-card__content">
36
+ <div class="micl-card__headline-m">
37
+ <h2>Standard buttons</h2>
38
+ </div>
39
+ <div class="micl-card__content" style="padding-block:8px 16px">
40
+ <div>
41
+ <button type="button" class="micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
42
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
43
+ <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" aria-label="Control Panel">settings</button>
44
+ <button type="button" class="micl-iconbutton-standard-l material-symbols-outlined" aria-label="Control Panel">settings</button>
45
+ <button type="button" class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
46
+ </div>
47
+ <div>
48
+ <button type="button" class="micl-iconbutton-standard-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
49
+ <button type="button" class="micl-iconbutton-standard-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
50
+ <button type="button" class="micl-iconbutton-standard-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
51
+ <button type="button" class="micl-iconbutton-standard-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
52
+ <button type="button" class="micl-iconbutton-standard-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
53
+ </div>
54
+ <div>
55
+ <button type="button" class="micl-iconbutton-standard-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
56
+ <button type="button" class="micl-iconbutton-standard-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
57
+ <button type="button" class="micl-iconbutton-standard-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
58
+ <button type="button" class="micl-iconbutton-standard-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
59
+ <button type="button" class="micl-iconbutton-standard-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
60
+ </div>
61
+ <div>
62
+ <button type="button" class="micl-iconbutton-standard-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
63
+ <button type="button" class="micl-iconbutton-standard-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
64
+ <button type="button" class="micl-iconbutton-standard-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
65
+ <button type="button" class="micl-iconbutton-standard-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
66
+ <button type="button" class="micl-iconbutton-standard-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
67
+ </div>
68
+ <div>
69
+ <button type="button" class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
70
+ <button type="button" class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
71
+ <button type="button" class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
72
+ <button type="button" class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
73
+ <button type="button" class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
74
+ </div>
75
+ <div>
76
+ <button type="button" class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
77
+ <button type="button" class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
78
+ <button type="button" class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
79
+ <button type="button" class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
80
+ <button type="button" class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ <div class="micl-card-elevated">
85
+ <div class="micl-card__headline-m">
86
+ <h2>Filled buttons</h2>
87
+ </div>
88
+ <div class="micl-card__content" style="padding-block:8px 16px">
89
+ <div>
90
+ <button type="button" class="micl-iconbutton-filled-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
91
+ <button type="button" class="micl-iconbutton-filled-s material-symbols-outlined" aria-label="Control Panel">settings</button>
92
+ <button type="button" class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
93
+ <button type="button" class="micl-iconbutton-filled-l material-symbols-outlined" aria-label="Control Panel">settings</button>
94
+ <button type="button" class="micl-iconbutton-filled-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
95
+ </div>
37
96
  <div>
38
- <button class="micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
39
- <button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
40
- <button class="micl-iconbutton-standard-m material-symbols-outlined" aria-label="Control Panel">settings</button>
41
- <button class="micl-iconbutton-standard-l material-symbols-outlined" aria-label="Control Panel">settings</button>
42
- <button class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
43
- <button class="micl-iconbutton-standard-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
44
- <button class="micl-iconbutton-standard-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
45
- <button class="micl-iconbutton-standard-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
46
- <button class="micl-iconbutton-standard-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
47
- <button class="micl-iconbutton-standard-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
48
- <button class="micl-iconbutton-standard-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
49
- <button class="micl-iconbutton-standard-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
50
- <button class="micl-iconbutton-standard-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
51
- <button class="micl-iconbutton-standard-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
52
- <button class="micl-iconbutton-standard-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
53
- </div>
54
- <div>
55
- <button class="micl-iconbutton-standard-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
56
- <button class="micl-iconbutton-standard-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
57
- <button class="micl-iconbutton-standard-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
58
- <button class="micl-iconbutton-standard-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
59
- <button class="micl-iconbutton-standard-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
60
- <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
61
- <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
62
- <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
63
- <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
64
- <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
65
- <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
66
- <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
67
- <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
68
- <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
69
- <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
70
- </div>
71
- <div>
72
- <button class="micl-iconbutton-filled-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
73
- <button class="micl-iconbutton-filled-s material-symbols-outlined" aria-label="Control Panel">settings</button>
74
- <button class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
75
- <button class="micl-iconbutton-filled-l material-symbols-outlined" aria-label="Control Panel">settings</button>
76
- <button class="micl-iconbutton-filled-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
77
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
78
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
79
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
80
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
81
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
82
- <button class="micl-iconbutton-filled-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
83
- <button class="micl-iconbutton-filled-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
84
- <button class="micl-iconbutton-filled-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
85
- <button class="micl-iconbutton-filled-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
86
- <button class="micl-iconbutton-filled-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
87
- </div>
88
- <div>
89
- <button class="micl-iconbutton-filled-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
90
- <button class="micl-iconbutton-filled-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
91
- <button class="micl-iconbutton-filled-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
92
- <button class="micl-iconbutton-filled-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
93
- <button class="micl-iconbutton-filled-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
94
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
95
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
96
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
97
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
98
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
99
- <button class="micl-iconbutton-filled-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
100
- <button class="micl-iconbutton-filled-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
101
- <button class="micl-iconbutton-filled-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
102
- <button class="micl-iconbutton-filled-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
103
- <button class="micl-iconbutton-filled-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
104
- </div>
105
- <div>
106
- <button class="micl-iconbutton-tonal-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
107
- <button class="micl-iconbutton-tonal-s material-symbols-outlined" aria-label="Control Panel">settings</button>
108
- <button class="micl-iconbutton-tonal-m material-symbols-outlined" aria-label="Control Panel">settings</button>
109
- <button class="micl-iconbutton-tonal-l material-symbols-outlined" aria-label="Control Panel">settings</button>
110
- <button class="micl-iconbutton-tonal-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
111
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
112
- <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
113
- <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
114
- <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
115
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
116
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
117
- <button class="micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
118
- <button class="micl-iconbutton-tonal-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
119
- <button class="micl-iconbutton-tonal-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
120
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
121
- </div>
122
- <div>
123
- <button class="micl-iconbutton-tonal-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
124
- <button class="micl-iconbutton-tonal-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
125
- <button class="micl-iconbutton-tonal-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
126
- <button class="micl-iconbutton-tonal-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
127
- <button class="micl-iconbutton-tonal-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
128
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
129
- <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
130
- <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
131
- <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
132
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
133
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
134
- <button class="micl-iconbutton-tonal-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
135
- <button class="micl-iconbutton-tonal-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
136
- <button class="micl-iconbutton-tonal-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
137
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
138
- </div>
139
- <div>
140
- <button class="micl-iconbutton-outlined-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
141
- <button class="micl-iconbutton-outlined-s material-symbols-outlined" aria-label="Control Panel">settings</button>
142
- <button class="micl-iconbutton-outlined-m material-symbols-outlined" aria-label="Control Panel">settings</button>
143
- <button class="micl-iconbutton-outlined-l material-symbols-outlined" aria-label="Control Panel">settings</button>
144
- <button class="micl-iconbutton-outlined-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
145
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
146
- <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
147
- <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
148
- <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
149
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
150
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
151
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
152
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
153
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
154
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
155
- </div>
156
- <div>
157
- <button class="micl-iconbutton-outlined-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
158
- <button class="micl-iconbutton-outlined-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
159
- <button class="micl-iconbutton-outlined-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
160
- <button class="micl-iconbutton-outlined-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
161
- <button class="micl-iconbutton-outlined-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
162
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
163
- <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
164
- <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
165
- <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
166
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
167
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
168
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
169
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
170
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
171
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
172
- </div>
173
- <div>
174
- <button class="micl-iconbutton-standard-xs material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
175
- <button class="micl-iconbutton-standard-s material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
176
- <button class="micl-iconbutton-standard-m material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
177
- <button class="micl-iconbutton-standard-l material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
178
- <button class="micl-iconbutton-standard-xl material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
179
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
180
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
181
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
182
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
183
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
184
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
185
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
186
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
187
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
188
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
189
- </div>
190
- <div>
191
- <button class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
192
- <button class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
193
- <button class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
194
- <button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
195
- <button class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
196
- <button class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
197
- <button class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
198
- <button class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
97
+ <button type="button" class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
98
+ <button type="button" class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
99
+ <button type="button" class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
100
+ <button type="button" class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
101
+ <button type="button" class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
102
+ </div>
103
+ <div>
104
+ <button type="button" class="micl-iconbutton-filled-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
105
+ <button type="button" class="micl-iconbutton-filled-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
106
+ <button type="button" class="micl-iconbutton-filled-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
107
+ <button type="button" class="micl-iconbutton-filled-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
108
+ <button type="button" class="micl-iconbutton-filled-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
109
+ </div>
110
+ <div>
111
+ <button type="button" class="micl-iconbutton-filled-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
112
+ <button type="button" class="micl-iconbutton-filled-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
113
+ <button type="button" class="micl-iconbutton-filled-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
114
+ <button type="button" class="micl-iconbutton-filled-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
115
+ <button type="button" class="micl-iconbutton-filled-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
116
+ </div>
117
+ <div>
118
+ <button type="button" class="micl-iconbutton-filled-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
119
+ <button type="button" class="micl-iconbutton-filled-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
120
+ <button type="button" class="micl-iconbutton-filled-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
121
+ <button type="button" class="micl-iconbutton-filled-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
122
+ <button type="button" class="micl-iconbutton-filled-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
123
+ </div>
124
+ <div>
125
+ <button type="button" class="micl-iconbutton-filled-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
126
+ <button type="button" class="micl-iconbutton-filled-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
127
+ <button type="button" class="micl-iconbutton-filled-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
128
+ <button type="button" class="micl-iconbutton-filled-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
129
+ <button type="button" class="micl-iconbutton-filled-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <div class="micl-card-outlined">
134
+ <div class="micl-card__headline-m">
135
+ <h2>Tonal buttons</h2>
136
+ </div>
137
+ <div class="micl-card__content" style="padding-block:8px 16px">
138
+ <div>
139
+ <button type="button" class="micl-iconbutton-tonal-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
140
+ <button type="button" class="micl-iconbutton-tonal-s material-symbols-outlined" aria-label="Control Panel">settings</button>
141
+ <button type="button" class="micl-iconbutton-tonal-m material-symbols-outlined" aria-label="Control Panel">settings</button>
142
+ <button type="button" class="micl-iconbutton-tonal-l material-symbols-outlined" aria-label="Control Panel">settings</button>
143
+ <button type="button" class="micl-iconbutton-tonal-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
144
+ </div>
145
+ <div>
146
+ <button type="button" class="micl-iconbutton-tonal-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
147
+ <button type="button" class="micl-iconbutton-tonal-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
148
+ <button type="button" class="micl-iconbutton-tonal-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
149
+ <button type="button" class="micl-iconbutton-tonal-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
150
+ <button type="button" class="micl-iconbutton-tonal-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
151
+ </div>
152
+ <div>
153
+ <button type="button" class="micl-iconbutton-tonal-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
154
+ <button type="button" class="micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
155
+ <button type="button" class="micl-iconbutton-tonal-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
156
+ <button type="button" class="micl-iconbutton-tonal-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
157
+ <button type="button" class="micl-iconbutton-tonal-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
158
+ </div>
159
+ <div>
160
+ <button type="button" class="micl-iconbutton-tonal-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
161
+ <button type="button" class="micl-iconbutton-tonal-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
162
+ <button type="button" class="micl-iconbutton-tonal-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
163
+ <button type="button" class="micl-iconbutton-tonal-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
164
+ <button type="button" class="micl-iconbutton-tonal-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
165
+ </div>
166
+ <div>
167
+ <button type="button" class="micl-iconbutton-tonal-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
168
+ <button type="button" class="micl-iconbutton-tonal-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
169
+ <button type="button" class="micl-iconbutton-tonal-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
170
+ <button type="button" class="micl-iconbutton-tonal-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
171
+ <button type="button" class="micl-iconbutton-tonal-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
172
+ </div>
173
+ <div>
174
+ <button type="button" class="micl-iconbutton-tonal-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
175
+ <button type="button" class="micl-iconbutton-tonal-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
176
+ <button type="button" class="micl-iconbutton-tonal-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
177
+ <button type="button" class="micl-iconbutton-tonal-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
178
+ <button type="button" class="micl-iconbutton-tonal-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="micl-card-elevated">
183
+ <div class="micl-card__headline-m">
184
+ <h2>Outlined buttons</h2>
185
+ </div>
186
+ <div class="micl-card__content" style="padding-block:8px 16px">
187
+ <div>
188
+ <button type="button" class="micl-iconbutton-outlined-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
189
+ <button type="button" class="micl-iconbutton-outlined-s material-symbols-outlined" aria-label="Control Panel">settings</button>
190
+ <button type="button" class="micl-iconbutton-outlined-m material-symbols-outlined" aria-label="Control Panel">settings</button>
191
+ <button type="button" class="micl-iconbutton-outlined-l material-symbols-outlined" aria-label="Control Panel">settings</button>
192
+ <button type="button" class="micl-iconbutton-outlined-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
193
+ </div>
194
+ <div>
195
+ <button type="button" class="micl-iconbutton-outlined-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
196
+ <button type="button" class="micl-iconbutton-outlined-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
197
+ <button type="button" class="micl-iconbutton-outlined-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
198
+ <button type="button" class="micl-iconbutton-outlined-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
199
+ <button type="button" class="micl-iconbutton-outlined-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
200
+ </div>
201
+ <div>
202
+ <button type="button" class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
203
+ <button type="button" class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
204
+ <button type="button" class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
205
+ <button type="button" class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
206
+ <button type="button" class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
207
+ </div>
208
+ <div>
209
+ <button type="button" class="micl-iconbutton-outlined-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
210
+ <button type="button" class="micl-iconbutton-outlined-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
211
+ <button type="button" class="micl-iconbutton-outlined-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
212
+ <button type="button" class="micl-iconbutton-outlined-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
213
+ <button type="button" class="micl-iconbutton-outlined-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
214
+ </div>
215
+ <div>
216
+ <button type="button" class="micl-iconbutton-outlined-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
217
+ <button type="button" class="micl-iconbutton-outlined-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
218
+ <button type="button" class="micl-iconbutton-outlined-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
219
+ <button type="button" class="micl-iconbutton-outlined-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
220
+ <button type="button" class="micl-iconbutton-outlined-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
221
+ </div>
222
+ <div>
223
+ <button type="button" class="micl-iconbutton-outlined-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
224
+ <button type="button" class="micl-iconbutton-outlined-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
225
+ <button type="button" class="micl-iconbutton-outlined-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
226
+ <button type="button" class="micl-iconbutton-outlined-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
227
+ <button type="button" class="micl-iconbutton-outlined-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="micl-card-elevated">
232
+ <div class="micl-card__headline-m">
233
+ <h2>Disabled buttons</h2>
234
+ </div>
235
+ <div class="micl-card__content" style="padding-block:8px 16px">
236
+ <div>
237
+ <button type="button" class="micl-iconbutton-standard-xs material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
238
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
239
+ <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
240
+ <button type="button" class="micl-iconbutton-standard-l material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
241
+ <button type="button" class="micl-iconbutton-standard-xl material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
242
+ </div>
243
+ <div>
244
+ <button type="button" class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
245
+ <button type="button" class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
246
+ <button type="button" class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
247
+ <button type="button" class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
248
+ <button type="button" class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
249
+ </div>
250
+ <div>
251
+ <button type="button" class="micl-iconbutton-tonal-xs material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
252
+ <button type="button" class="micl-iconbutton-tonal-s material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
253
+ <button type="button" class="micl-iconbutton-tonal-m material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
254
+ <button type="button" class="micl-iconbutton-tonal-l material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
255
+ <button type="button" class="micl-iconbutton-tonal-xl material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
256
+ </div>
257
+ <div>
258
+ <button type="button" class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
259
+ <button type="button" class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
260
+ <button type="button" class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
261
+ <button type="button" class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
262
+ <button type="button" class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="micl-card-outlined">
267
+ <div class="micl-card__headline-m">
268
+ <h2>Toggle buttons</h2>
269
+ </div>
270
+ <div class="micl-card__content">
271
+ <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
272
+ <button type="button" class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
273
+ <button type="button" class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
274
+ </div>
275
+ <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
276
+ <button type="button" class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
277
+ <button type="button" class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
278
+ </div>
279
+ <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
280
+ <button type="button" class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
281
+ <button type="button" class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
282
+ </div>
283
+ <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
284
+ <button type="button" class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
285
+ <button type="button" class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
199
286
  </div>
200
287
  </div>
201
288
  </div>
@@ -207,9 +294,16 @@
207
294
  </div>
208
295
  <div class="micl-card__content docs-code">
209
296
  <pre tabindex="-1"><code>
210
- &lt;button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
297
+ &lt;button type="button"
298
+ class="micl-iconbutton-standard-s material-symbols-outlined"
299
+ aria-label="Control Panel"
300
+ &gt;settings&lt;/button&gt;
211
301
 
212
- &lt;button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
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;
213
307
  </code></pre>
214
308
  </div>
215
309
  </div>
package/docs/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
7
7
  <title>MICL Showcase</title>
8
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
9
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
10
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
11
  <link rel="stylesheet" href="micl.css">
12
12
  <link rel="stylesheet" href="docs.css">
@@ -179,21 +179,21 @@
179
179
  <h2>Lists</h2>
180
180
  </div>
181
181
  <div class="micl-card__content">
182
- <ul class="micl-list" style="margin-block:16px" role="listbox">
183
- <li class="micl-list-item-one" tabindex="0">
182
+ <ul class="micl-list" role="listbox">
183
+ <li class="micl-list-item-one">
184
184
  <span class="material-symbols-outlined micl-list-item__icon">person</span>
185
185
  <span class="micl-list-item__text">
186
186
  <span class="micl-list-item__headline">One-line list item</span>
187
187
  </span>
188
188
  </li>
189
- <li class="micl-list-item-two" tabindex="0">
189
+ <li class="micl-list-item-two">
190
190
  <span class="material-symbols-outlined micl-list-item__icon">globe</span>
191
191
  <span class="micl-list-item__text">
192
192
  <span class="micl-list-item__headline">Two-line list item</span>
193
193
  <span class="micl-list-item__supporting-text">Supporting text</span>
194
194
  </span>
195
195
  </li>
196
- <li class="micl-list-item-three" tabindex="0">
196
+ <li class="micl-list-item-three">
197
197
  <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
198
198
  <span class="micl-list-item__text">
199
199
  <span class="micl-list-item__headline">Three-line list item</span>
@@ -202,29 +202,32 @@
202
202
  </li>
203
203
  </ul>
204
204
 
205
- <div class="micl-list" style="margin-block:16px" role="listbox">
205
+ <div class="micl-list" role="listbox">
206
206
  <details name="accordion">
207
207
  <summary class="micl-list-item-two">
208
208
  <span class="micl-list-item__text">
209
209
  <span class="micl-list-item__headline">Accordion item 1</span>
210
210
  <span class="micl-list-item__supporting-text">Click to open</span>
211
211
  </span>
212
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
212
213
  </summary>
213
- <div class="micl-list-item__content" style="padding-block-start:16px">
214
+ <div class="micl-list-item__content" style="padding-block:16px">
214
215
  <div class="micl-textfield-filled">
215
216
  <label for="tf1">Name</label>
216
217
  <input type="text" id="tf1" value="Filled text field">
217
218
  </div>
218
219
  </div>
219
220
  </details>
221
+ <hr class="micl-divider">
220
222
  <details name="accordion">
221
223
  <summary class="micl-list-item-two" tabindex="-1">
222
224
  <span class="micl-list-item__text">
223
225
  <span class="micl-list-item__headline">Accordion item 2</span>
224
226
  <span class="micl-list-item__supporting-text">Click to open</span>
225
227
  </span>
228
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
226
229
  </summary>
227
- <div class="micl-list-item__content" style="padding-block-start:16px">
230
+ <div class="micl-list-item__content" style="padding-block:16px">
228
231
  <div class="micl-textfield-filled">
229
232
  <label for="tf2">Date</label>
230
233
  <input type="date" id="tf2" value="">