material-inspired-component-library 4.0.1 → 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 (30) hide show
  1. package/components/accordion/README.md +20 -0
  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 +7 -1
  7. package/components/iconbutton/README.md +1 -1
  8. package/components/iconbutton/index.scss +20 -17
  9. package/components/list/index.scss +2 -5
  10. package/components/textfield/index.ts +26 -0
  11. package/components/timepicker/index.scss +268 -0
  12. package/components/timepicker/index.ts +113 -0
  13. package/dist/button.css +1 -1
  14. package/dist/components/timepicker/index.d.ts +5 -0
  15. package/dist/divider.css +1 -1
  16. package/dist/iconbutton.css +1 -1
  17. package/dist/list.css +1 -1
  18. package/dist/micl.css +1 -1
  19. package/dist/micl.js +1 -1
  20. package/dist/timepicker.css +1 -0
  21. package/dist/timepicker.js +1 -0
  22. package/docs/accordion.html +1 -1
  23. package/docs/button.html +42 -15
  24. package/docs/iconbutton.html +258 -164
  25. package/docs/micl.css +1 -1
  26. package/docs/micl.js +1 -1
  27. package/docs/timepicker.html +113 -0
  28. package/micl.ts +3 -1
  29. package/package.json +1 -1
  30. 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>