material-inspired-component-library 2.0.1 → 3.0.1

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 (76) hide show
  1. package/README.md +14 -0
  2. package/components/README.md +2 -0
  3. package/components/appbar/README.md +94 -0
  4. package/components/appbar/index.scss +216 -0
  5. package/components/button/index.scss +70 -65
  6. package/components/button/index.ts +1 -1
  7. package/components/card/index.scss +1 -1
  8. package/components/checkbox/README.md +9 -0
  9. package/components/checkbox/index.scss +4 -0
  10. package/components/divider/index.scss +10 -10
  11. package/components/iconbutton/index.scss +111 -111
  12. package/components/iconbutton/index.ts +1 -1
  13. package/components/list/README.md +4 -4
  14. package/components/list/index.scss +3 -3
  15. package/components/navigationrail/README.md +11 -11
  16. package/components/navigationrail/index.scss +20 -12
  17. package/components/radio/README.md +13 -4
  18. package/components/radio/index.scss +7 -5
  19. package/components/select/README.md +28 -6
  20. package/components/select/index.scss +56 -10
  21. package/components/textfield/index.scss +3 -9
  22. package/components/textfield/index.ts +29 -22
  23. package/dist/appbar.css +1 -0
  24. package/dist/appbar.js +1 -0
  25. package/dist/bottomsheet.css +1 -1
  26. package/dist/button.css +1 -1
  27. package/dist/card.css +1 -1
  28. package/dist/checkbox.css +1 -1
  29. package/dist/components/textfield/index.d.ts +1 -1
  30. package/dist/dialog.css +1 -1
  31. package/dist/divider.css +1 -1
  32. package/dist/iconbutton.css +1 -1
  33. package/dist/layout.css +1 -0
  34. package/dist/layout.js +1 -0
  35. package/dist/list.css +1 -1
  36. package/dist/menu.css +1 -1
  37. package/dist/micl.css +1 -1
  38. package/dist/micl.js +1 -1
  39. package/dist/navigationrail.css +1 -1
  40. package/dist/radio.css +1 -1
  41. package/dist/select.css +1 -1
  42. package/dist/sidesheet.css +1 -1
  43. package/dist/slider.css +1 -1
  44. package/dist/switch.css +1 -1
  45. package/dist/textfield.css +1 -1
  46. package/docs/accordion.html +298 -254
  47. package/docs/bottomsheet.html +174 -145
  48. package/docs/button.html +210 -182
  49. package/docs/card.html +107 -72
  50. package/docs/checkbox.html +92 -69
  51. package/docs/dialog.html +154 -123
  52. package/docs/divider.html +96 -67
  53. package/docs/docs.css +14 -24
  54. package/docs/docs.js +4 -2
  55. package/docs/iconbutton.html +196 -171
  56. package/docs/index.html +296 -286
  57. package/docs/list.html +260 -216
  58. package/docs/menu.html +260 -220
  59. package/docs/micl.css +1 -1
  60. package/docs/micl.js +1 -1
  61. package/docs/navigationrail.html +36 -34
  62. package/docs/radio.html +93 -72
  63. package/docs/select.html +253 -173
  64. package/docs/sidesheet.html +104 -87
  65. package/docs/slider.html +105 -72
  66. package/docs/switch.html +126 -101
  67. package/docs/textfield.html +181 -138
  68. package/layout/README.md +122 -0
  69. package/layout/index.scss +259 -0
  70. package/micl.ts +1 -1
  71. package/package.json +4 -1
  72. package/styles/shapes.scss +0 -2
  73. package/styles/statelayer.scss +2 -0
  74. package/styles.scss +13 -0
  75. package/webpack.config.js +1 -1
  76. package/styles/layout.scss +0 -74
package/docs/button.html CHANGED
@@ -3,202 +3,230 @@
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 Buttons">
6
7
  <title>MICL Buttons</title>
7
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
9
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
11
  <link rel="stylesheet" href="micl.css">
11
12
  <link rel="stylesheet" href="docs.css">
12
13
  </head>
13
- <body class="light">
14
- <div class="headline">
15
- <h1 class="md-sys-typescale-emphasized-display-small">Buttons</h1>
16
- <div id="settings-placeholder"></div>
17
- </div>
14
+ <body class="micl-window light">
15
+ <main class="micl-body micl-body--stacked-to-large">
16
+ <section class="micl-pane">
17
+ <header class="micl-appbar">
18
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
19
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
20
+ </a>
21
+ <div class="micl-appbar__headline micl-appbar__headline--center">
22
+ <h1>Buttons</h1>
23
+ <p class="micl-appbar__subtitle">Showcasing MICL buttons</p>
24
+ </div>
25
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
26
+ </header>
18
27
 
19
- <div class="cards">
20
- <div class="micl-card-filled" style="width:850px">
21
- <div class="micl-card__headline-m">
22
- <h2>Text buttons</h2>
28
+ <div class="micl-card-filled">
29
+ <div class="micl-card__headline-m">
30
+ <h2>Text buttons</h2>
31
+ </div>
32
+ <div class="micl-card__content" style="padding-block:8px 16px">
33
+ <button type="button" class="micl-button-text-xs">Click</button>
34
+ <button type="button" class="micl-button-text-s">Click</button>
35
+ <button type="button" class="micl-button-text-m">Click</button>
36
+ <button type="button" class="micl-button-text-l">Click</button>
37
+ <button type="button" class="micl-button-text-xl">Click</button>
38
+ <p></p>
39
+ <button type="button" class="micl-button-text-xs micl-button--square">
40
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
41
+ Click
42
+ </button>
43
+ <button type="button" class="micl-button-text-s micl-button--square">
44
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
45
+ Click
46
+ </button>
47
+ <button type="button" class="micl-button-text-m micl-button--square">
48
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
49
+ Click
50
+ </button>
51
+ <button type="button" class="micl-button-text-l micl-button--square">
52
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
53
+ Click
54
+ </button>
55
+ <button type="button" class="micl-button-text-xl micl-button--square">
56
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
57
+ Click
58
+ </button>
59
+ </div>
23
60
  </div>
24
- <div class="micl-card__content" style="padding-block:8px 16px">
25
- <button type="button" class="micl-button-text-xs">Click</button>
26
- <button type="button" class="micl-button-text-s">Click</button>
27
- <button type="button" class="micl-button-text-m">Click</button>
28
- <button type="button" class="micl-button-text-l">Click</button>
29
- <button type="button" class="micl-button-text-xl">Click</button>
30
- <p></p>
31
- <button type="button" class="micl-button-text-xs micl-button--square">
32
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
33
- Click
34
- </button>
35
- <button type="button" class="micl-button-text-s micl-button--square">
36
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
37
- Click
38
- </button>
39
- <button type="button" class="micl-button-text-m micl-button--square">
40
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
41
- Click
42
- </button>
43
- <button type="button" class="micl-button-text-l micl-button--square">
44
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
45
- Click
46
- </button>
47
- <button type="button" class="micl-button-text-xl micl-button--square">
48
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
49
- Click
50
- </button>
61
+ <div class="micl-card-outlined">
62
+ <div class="micl-card__headline-m">
63
+ <h2>Elevated buttons</h2>
64
+ </div>
65
+ <div class="micl-card__content" style="padding-block:8px 16px">
66
+ <button type="button" class="micl-button-elevated-xs">Click</button>
67
+ <button type="button" class="micl-button-elevated-s">Click</button>
68
+ <button type="button" class="micl-button-elevated-m">Click</button>
69
+ <button type="button" class="micl-button-elevated-l">Click</button>
70
+ <button type="button" class="micl-button-elevated-xl">Click</button>
71
+ <p></p>
72
+ <button type="button" class="micl-button-elevated-xs micl-button--square">
73
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
74
+ <span>Click</span>
75
+ </button>
76
+ <button type="button" class="micl-button-elevated-s micl-button--square">
77
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
78
+ <span>Click</span>
79
+ </button>
80
+ <button type="button" class="micl-button-elevated-m micl-button--square">
81
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
82
+ <span>Click</span>
83
+ </button>
84
+ <button type="button" class="micl-button-elevated-l micl-button--square">
85
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
86
+ <span>Click</span>
87
+ </button>
88
+ <button type="button" class="micl-button-elevated-xl micl-button--square">
89
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
90
+ <span>Click</span>
91
+ </button>
92
+ </div>
51
93
  </div>
52
- </div>
53
- <div class="micl-card-outlined" style="width:850px">
54
- <div class="micl-card__headline-m">
55
- <h2>Elevated buttons</h2>
94
+ <div class="micl-card-elevated">
95
+ <div class="micl-card__headline-m">
96
+ <h2>Filled buttons</h2>
97
+ </div>
98
+ <div class="micl-card__content" style="padding-block:8px 16px">
99
+ <button type="button" class="micl-button-filled-xs">Click</button>
100
+ <button type="button" class="micl-button-filled-s">Click</button>
101
+ <button type="button" class="micl-button-filled-m">Click</button>
102
+ <button type="button" class="micl-button-filled-l">Click</button>
103
+ <button type="button" class="micl-button-filled-xl">Click</button>
104
+ <p></p>
105
+ <button type="button" class="micl-button-filled-xs micl-button--square">
106
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
107
+ Click
108
+ </button>
109
+ <button type="button" class="micl-button-filled-s micl-button--square">
110
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
111
+ Click
112
+ </button>
113
+ <button type="button" class="micl-button-filled-m micl-button--square">
114
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
115
+ Click
116
+ </button>
117
+ <button type="button" class="micl-button-filled-l micl-button--square">
118
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
119
+ Click
120
+ </button>
121
+ <button type="button" class="micl-button-filled-xl micl-button--square">
122
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
123
+ Click
124
+ </button>
125
+ </div>
56
126
  </div>
57
- <div class="micl-card__content" style="padding-block:8px 16px">
58
- <button type="button" class="micl-button-elevated-xs">Click</button>
59
- <button type="button" class="micl-button-elevated-s">Click</button>
60
- <button type="button" class="micl-button-elevated-m">Click</button>
61
- <button type="button" class="micl-button-elevated-l">Click</button>
62
- <button type="button" class="micl-button-elevated-xl">Click</button>
63
- <p></p>
64
- <button type="button" class="micl-button-elevated-xs micl-button--square">
65
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
66
- <span>Click</span>
67
- </button>
68
- <button type="button" class="micl-button-elevated-s micl-button--square">
69
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
70
- <span>Click</span>
71
- </button>
72
- <button type="button" class="micl-button-elevated-m micl-button--square">
73
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
74
- <span>Click</span>
75
- </button>
76
- <button type="button" class="micl-button-elevated-l micl-button--square">
77
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
78
- <span>Click</span>
79
- </button>
80
- <button type="button" class="micl-button-elevated-xl micl-button--square">
81
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
82
- <span>Click</span>
83
- </button>
127
+ <div class="micl-card-outlined">
128
+ <div class="micl-card__headline-m">
129
+ <h2>Tonal buttons</h2>
130
+ </div>
131
+ <div class="micl-card__content" style="padding-block:8px 16px">
132
+ <button type="button" class="micl-button-tonal-xs">Click</button>
133
+ <button type="button" class="micl-button-tonal-s">Click</button>
134
+ <button type="button" class="micl-button-tonal-m">Click</button>
135
+ <button type="button" class="micl-button-tonal-l">Click</button>
136
+ <button type="button" class="micl-button-tonal-xl">Click</button>
137
+ <p></p>
138
+ <button type="button" class="micl-button-tonal-xs micl-button--square">
139
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
140
+ Click
141
+ </button>
142
+ <button type="button" class="micl-button-tonal-s micl-button--square">
143
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
144
+ Click
145
+ </button>
146
+ <button type="button" class="micl-button-tonal-m micl-button--square">
147
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
148
+ Click
149
+ </button>
150
+ <button type="button" class="micl-button-tonal-l micl-button--square">
151
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
152
+ Click
153
+ </button>
154
+ <button type="button" class="micl-button-tonal-xl micl-button--square">
155
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
156
+ Click
157
+ </button>
158
+ </div>
84
159
  </div>
85
- </div>
86
- <div class="micl-card-elevated" style="width:850px">
87
- <div class="micl-card__headline-m">
88
- <h2>Filled buttons</h2>
160
+ <div class="micl-card-elevated">
161
+ <div class="micl-card__headline-m">
162
+ <h2>Outlined buttons</h2>
163
+ </div>
164
+ <div class="micl-card__content" style="padding-block:8px 16px">
165
+ <button type="button" class="micl-button-outlined-xs">Click</button>
166
+ <button type="button" class="micl-button-outlined-s">Click</button>
167
+ <button type="button" class="micl-button-outlined-m">Click</button>
168
+ <button type="button" class="micl-button-outlined-l">Click</button>
169
+ <button type="button" class="micl-button-outlined-xl">Click</button>
170
+ <p></p>
171
+ <button type="button" class="micl-button-outlined-xs micl-button--square">
172
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
173
+ Click
174
+ </button>
175
+ <button type="button" class="micl-button-outlined-s micl-button--square">
176
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
177
+ Click
178
+ </button>
179
+ <button type="button" class="micl-button-outlined-m micl-button--square">
180
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
181
+ Click
182
+ </button>
183
+ <button type="button" class="micl-button-outlined-l micl-button--square">
184
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
185
+ Click
186
+ </button>
187
+ <button type="button" class="micl-button-outlined-xl micl-button--square">
188
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
189
+ Click
190
+ </button>
191
+ </div>
89
192
  </div>
90
- <div class="micl-card__content" style="padding-block:8px 16px">
91
- <button type="button" class="micl-button-filled-xs">Click</button>
92
- <button type="button" class="micl-button-filled-s">Click</button>
93
- <button type="button" class="micl-button-filled-m">Click</button>
94
- <button type="button" class="micl-button-filled-l">Click</button>
95
- <button type="button" class="micl-button-filled-xl">Click</button>
96
- <p></p>
97
- <button type="button" class="micl-button-filled-xs micl-button--square">
98
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
99
- Click
100
- </button>
101
- <button type="button" class="micl-button-filled-s micl-button--square">
102
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
103
- Click
104
- </button>
105
- <button type="button" class="micl-button-filled-m micl-button--square">
106
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
107
- Click
108
- </button>
109
- <button type="button" class="micl-button-filled-l micl-button--square">
110
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
111
- Click
112
- </button>
113
- <button type="button" class="micl-button-filled-xl micl-button--square">
114
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
115
- Click
116
- </button>
193
+ <div class="micl-card-outlined">
194
+ <div class="micl-card__headline-m">
195
+ <h2>Toggle buttons</h2>
196
+ </div>
197
+ <div class="micl-card__content" style="padding-block:8px 16px">
198
+ <button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
199
+ <button type="button" class="micl-button-filled-m micl-button--toggle">Click</button>
200
+ <button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
201
+ <button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
202
+ <p></p>
203
+ <button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
204
+ <button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
205
+ <button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
206
+ <button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
207
+ </div>
117
208
  </div>
118
- </div>
119
- <div class="micl-card-outlined" style="width:850px">
120
- <div class="micl-card__headline-m">
121
- <h2>Tonal buttons</h2>
122
- </div>
123
- <div class="micl-card__content" style="padding-block:8px 16px">
124
- <button type="button" class="micl-button-tonal-xs">Click</button>
125
- <button type="button" class="micl-button-tonal-s">Click</button>
126
- <button type="button" class="micl-button-tonal-m">Click</button>
127
- <button type="button" class="micl-button-tonal-l">Click</button>
128
- <button type="button" class="micl-button-tonal-xl">Click</button>
129
- <p></p>
130
- <button type="button" class="micl-button-tonal-xs micl-button--square">
131
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
132
- Click
133
- </button>
134
- <button type="button" class="micl-button-tonal-s micl-button--square">
135
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
136
- Click
137
- </button>
138
- <button type="button" class="micl-button-tonal-m micl-button--square">
139
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
140
- Click
141
- </button>
142
- <button type="button" class="micl-button-tonal-l micl-button--square">
143
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
144
- Click
145
- </button>
146
- <button type="button" class="micl-button-tonal-xl micl-button--square">
147
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
148
- Click
149
- </button>
150
- </div>
151
- </div>
152
- <div class="micl-card-elevated" style="width:850px">
153
- <div class="micl-card__headline-m">
154
- <h2>Outlined buttons</h2>
155
- </div>
156
- <div class="micl-card__content" style="padding-block:8px 16px">
157
- <button type="button" class="micl-button-outlined-xs">Click</button>
158
- <button type="button" class="micl-button-outlined-s">Click</button>
159
- <button type="button" class="micl-button-outlined-m">Click</button>
160
- <button type="button" class="micl-button-outlined-l">Click</button>
161
- <button type="button" class="micl-button-outlined-xl">Click</button>
162
- <p></p>
163
- <button type="button" class="micl-button-outlined-xs micl-button--square">
164
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
165
- Click
166
- </button>
167
- <button type="button" class="micl-button-outlined-s micl-button--square">
168
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
169
- Click
170
- </button>
171
- <button type="button" class="micl-button-outlined-m micl-button--square">
172
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
173
- Click
174
- </button>
175
- <button type="button" class="micl-button-outlined-l micl-button--square">
176
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
177
- Click
178
- </button>
179
- <button type="button" class="micl-button-outlined-xl micl-button--square">
180
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
181
- Click
182
- </button>
183
- </div>
184
- </div>
185
- <div class="micl-card-outlined" style="width:850px">
186
- <div class="micl-card__headline-m">
187
- <h2>Toggle buttons</h2>
188
- </div>
189
- <div class="micl-card__content" style="padding-block:8px 16px">
190
- <button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
191
- <button type="button" class="micl-button-filled-m micl-button--toggle">Click</button>
192
- <button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
193
- <button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
194
- <p></p>
195
- <button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
196
- <button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
197
- <button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
198
- <button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
209
+ </section>
210
+ <section class="micl-pane">
211
+ <div class="micl-card-filled">
212
+ <div class="micl-card__headline-s">
213
+ <h2>Code example</h2>
214
+ </div>
215
+ <div class="micl-card__content docs-code">
216
+ <pre><code>
217
+ &lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
218
+
219
+ &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
220
+
221
+ &lt;button type="button" class="micl-button-outlined-xl micl-button--square"&gt;
222
+ &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
223
+ Click
224
+ &lt;/button&gt;
225
+ </code></pre>
226
+ </div>
199
227
  </div>
200
- </div>
201
- </div>
228
+ </section>
229
+ </main>
202
230
 
203
231
  <script src="micl.js"></script>
204
232
  <script src="docs.js"></script>