material-inspired-component-library 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/CODE_OF_CONDUCT.md +128 -0
  2. package/README.md +14 -0
  3. package/components/README.md +2 -0
  4. package/components/appbar/README.md +94 -0
  5. package/components/appbar/index.scss +216 -0
  6. package/components/badge/README.md +5 -5
  7. package/components/badge/index.scss +20 -27
  8. package/components/bottomsheet/README.md +29 -17
  9. package/components/bottomsheet/index.scss +23 -23
  10. package/components/bottomsheet/index.ts +25 -24
  11. package/components/button/README.md +1 -1
  12. package/components/button/index.scss +70 -65
  13. package/components/button/index.ts +1 -1
  14. package/components/card/index.scss +1 -1
  15. package/components/checkbox/index.scss +4 -0
  16. package/components/dialog/README.md +9 -9
  17. package/components/iconbutton/index.scss +111 -111
  18. package/components/iconbutton/index.ts +1 -1
  19. package/components/navigationrail/README.md +16 -16
  20. package/components/navigationrail/index.scss +20 -12
  21. package/components/radio/index.scss +1 -1
  22. package/components/sidesheet/README.md +32 -17
  23. package/components/sidesheet/index.scss +43 -47
  24. package/components/slider/README.md +5 -5
  25. package/dist/appbar.css +1 -0
  26. package/dist/appbar.js +1 -0
  27. package/dist/badge.css +1 -1
  28. package/dist/bottomsheet.css +1 -1
  29. package/dist/button.css +1 -1
  30. package/dist/card.css +1 -1
  31. package/dist/checkbox.css +1 -1
  32. package/dist/dialog.css +1 -1
  33. package/dist/iconbutton.css +1 -1
  34. package/dist/list.css +1 -1
  35. package/dist/micl.css +1 -1
  36. package/dist/micl.js +1 -1
  37. package/dist/navigationrail.css +1 -1
  38. package/dist/radio.css +1 -1
  39. package/dist/select.css +1 -1
  40. package/dist/sidesheet.css +1 -1
  41. package/dist/slider.css +1 -1
  42. package/dist/switch.css +1 -1
  43. package/dist/textfield.css +1 -1
  44. package/docs/accordion.html +298 -254
  45. package/docs/bottomsheet.html +194 -114
  46. package/docs/button.html +210 -182
  47. package/docs/card.html +107 -72
  48. package/docs/checkbox.html +92 -65
  49. package/docs/dialog.html +154 -123
  50. package/docs/divider.html +96 -67
  51. package/docs/docs.css +14 -24
  52. package/docs/docs.js +4 -2
  53. package/docs/iconbutton.html +196 -171
  54. package/docs/index.html +298 -288
  55. package/docs/list.html +260 -216
  56. package/docs/menu.html +260 -220
  57. package/docs/micl.css +1 -1
  58. package/docs/micl.js +1 -1
  59. package/docs/navigationrail.html +38 -36
  60. package/docs/radio.html +93 -68
  61. package/docs/select.html +213 -173
  62. package/docs/sidesheet.html +105 -73
  63. package/docs/slider.html +105 -72
  64. package/docs/switch.html +126 -101
  65. package/docs/textfield.html +181 -138
  66. package/layout/README.md +122 -0
  67. package/layout/index.scss +258 -0
  68. package/package.json +1 -1
  69. package/styles/statelayer.scss +2 -0
  70. package/styles.scss +13 -0
  71. package/styles/layout.scss +0 -74
package/docs/iconbutton.html CHANGED
@@ -3,11 +3,12 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Icon Buttons">
6
7
  <title>MICL Icon Buttons</title>
7
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,settings&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,settings&display=block">
11
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
12
13
  <link rel="stylesheet" href="micl.css">
13
14
  <link rel="stylesheet" href="docs.css">
@@ -17,179 +18,203 @@
17
18
  }
18
19
  </style>
19
20
  </head>
20
- <body class="light">
21
- <div class="headline">
22
- <h1 class="md-sys-typescale-emphasized-display-small">Icon buttons</h1>
23
- <div id="settings-placeholder"></div>
24
- </div>
21
+ <body class="micl-window light">
22
+ <main class="micl-body micl-body--stacked-to-large">
23
+ <section class="micl-pane">
24
+ <header class="micl-appbar">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
26
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
+ </a>
28
+ <div class="micl-appbar__headline micl-appbar__headline--center">
29
+ <h1>Icon Buttons</h1>
30
+ <p class="micl-appbar__subtitle">Showcasing MICL icon buttons</p>
31
+ </div>
32
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
33
+ </header>
25
34
 
26
- <!-- <div class="micl-card-filled"> -->
27
- <!-- <div class="micl-card__content"> -->
28
- <div>
29
- <button class="micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
30
- <button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
31
- <button class="micl-iconbutton-standard-m material-symbols-outlined" aria-label="Control Panel">settings</button>
32
- <button class="micl-iconbutton-standard-l material-symbols-outlined" aria-label="Control Panel">settings</button>
33
- <button class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
34
- <button class="micl-iconbutton-standard-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
35
- <button class="micl-iconbutton-standard-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
36
- <button class="micl-iconbutton-standard-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
37
- <button class="micl-iconbutton-standard-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
38
- <button class="micl-iconbutton-standard-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
39
- <button class="micl-iconbutton-standard-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
40
- <button class="micl-iconbutton-standard-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
41
- <button class="micl-iconbutton-standard-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
42
- <button class="micl-iconbutton-standard-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
43
- <button class="micl-iconbutton-standard-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
35
+ <div class="micl-card-elevated">
36
+ <div class="micl-card__content">
37
+ <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>
199
+ </div>
200
+ </div>
44
201
  </div>
45
- <div>
46
- <button class="micl-iconbutton-standard-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
47
- <button class="micl-iconbutton-standard-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
48
- <button class="micl-iconbutton-standard-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
49
- <button class="micl-iconbutton-standard-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
50
- <button class="micl-iconbutton-standard-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
51
- <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
52
- <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
53
- <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
54
- <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
55
- <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
56
- <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
57
- <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
58
- <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
59
- <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
60
- <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
61
- </div>
62
- <div>
63
- <button class="micl-iconbutton-filled-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
64
- <button class="micl-iconbutton-filled-s material-symbols-outlined" aria-label="Control Panel">settings</button>
65
- <button class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
66
- <button class="micl-iconbutton-filled-l material-symbols-outlined" aria-label="Control Panel">settings</button>
67
- <button class="micl-iconbutton-filled-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
68
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
69
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
70
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
71
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
72
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
73
- <button class="micl-iconbutton-filled-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
74
- <button class="micl-iconbutton-filled-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
75
- <button class="micl-iconbutton-filled-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
76
- <button class="micl-iconbutton-filled-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
77
- <button class="micl-iconbutton-filled-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
78
- </div>
79
- <div>
80
- <button class="micl-iconbutton-filled-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
81
- <button class="micl-iconbutton-filled-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
82
- <button class="micl-iconbutton-filled-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
83
- <button class="micl-iconbutton-filled-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
84
- <button class="micl-iconbutton-filled-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
85
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
86
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
87
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
88
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
89
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
90
- <button class="micl-iconbutton-filled-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
91
- <button class="micl-iconbutton-filled-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
92
- <button class="micl-iconbutton-filled-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
93
- <button class="micl-iconbutton-filled-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
94
- <button class="micl-iconbutton-filled-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
95
- </div>
96
- <div>
97
- <button class="micl-iconbutton-tonal-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
98
- <button class="micl-iconbutton-tonal-s material-symbols-outlined" aria-label="Control Panel">settings</button>
99
- <button class="micl-iconbutton-tonal-m material-symbols-outlined" aria-label="Control Panel">settings</button>
100
- <button class="micl-iconbutton-tonal-l material-symbols-outlined" aria-label="Control Panel">settings</button>
101
- <button class="micl-iconbutton-tonal-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
102
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
103
- <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
104
- <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
105
- <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
106
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
107
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
108
- <button class="micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
109
- <button class="micl-iconbutton-tonal-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
110
- <button class="micl-iconbutton-tonal-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
111
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
112
- </div>
113
- <div>
114
- <button class="micl-iconbutton-tonal-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
115
- <button class="micl-iconbutton-tonal-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
116
- <button class="micl-iconbutton-tonal-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
117
- <button class="micl-iconbutton-tonal-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
118
- <button class="micl-iconbutton-tonal-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
119
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
120
- <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
121
- <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
122
- <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
123
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
124
- <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
125
- <button class="micl-iconbutton-tonal-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
126
- <button class="micl-iconbutton-tonal-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
127
- <button class="micl-iconbutton-tonal-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
128
- <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
129
- </div>
130
- <div>
131
- <button class="micl-iconbutton-outlined-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
132
- <button class="micl-iconbutton-outlined-s material-symbols-outlined" aria-label="Control Panel">settings</button>
133
- <button class="micl-iconbutton-outlined-m material-symbols-outlined" aria-label="Control Panel">settings</button>
134
- <button class="micl-iconbutton-outlined-l material-symbols-outlined" aria-label="Control Panel">settings</button>
135
- <button class="micl-iconbutton-outlined-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
136
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
137
- <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
138
- <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
139
- <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
140
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
141
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
142
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
143
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
144
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
145
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
146
- </div>
147
- <div>
148
- <button class="micl-iconbutton-outlined-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
149
- <button class="micl-iconbutton-outlined-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
150
- <button class="micl-iconbutton-outlined-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
151
- <button class="micl-iconbutton-outlined-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
152
- <button class="micl-iconbutton-outlined-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
153
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
154
- <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
155
- <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
156
- <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
157
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
158
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
159
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
160
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
161
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
162
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
163
- </div>
164
- <div>
165
- <button class="micl-iconbutton-standard-xs material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
166
- <button class="micl-iconbutton-standard-s material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
167
- <button class="micl-iconbutton-standard-m material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
168
- <button class="micl-iconbutton-standard-l material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
169
- <button class="micl-iconbutton-standard-xl material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
170
- <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
171
- <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
172
- <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
173
- <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
174
- <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
175
- <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
176
- <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
177
- <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
178
- <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
179
- <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
180
- </div>
181
- <div>
182
- <button class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
183
- <button class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
184
- <button class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
185
- <button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
186
- <button class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
187
- <button class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
188
- <button class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
189
- <button class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
202
+ </section>
203
+ <section class="micl-pane">
204
+ <div class="micl-card-filled">
205
+ <div class="micl-card__headline-s">
206
+ <h2>Code example</h2>
207
+ </div>
208
+ <div class="micl-card__content docs-code">
209
+ <pre><code>
210
+ &lt;button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
211
+
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;
213
+ </code></pre>
214
+ </div>
190
215
  </div>
191
- <!-- </div> -->
192
- <!-- </div> -->
216
+ </section>
217
+ </main>
193
218
 
194
219
  <script src="micl.js"></script>
195
220
  <script src="docs.js"></script>