material-inspired-component-library 4.0.0 → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/README.md +42 -3
- package/components/alert/README.md +19 -7
- package/components/button/README.md +1 -1
- package/components/button/index.scss +23 -20
- package/components/dialog/README.md +5 -5
- package/components/divider/index.scss +9 -3
- package/components/iconbutton/README.md +1 -1
- package/components/iconbutton/index.scss +20 -17
- package/components/list/README.md +18 -16
- package/components/list/index.scss +90 -68
- package/components/menu/README.md +2 -1
- package/components/menu/index.scss +6 -18
- package/components/select/README.md +7 -2
- package/components/select/index.scss +2 -3
- package/components/sidesheet/README.md +13 -19
- package/components/sidesheet/index.scss +15 -16
- package/components/textfield/index.ts +26 -0
- package/components/timepicker/index.scss +268 -0
- package/components/timepicker/index.ts +113 -0
- package/dist/button.css +1 -1
- package/dist/components/timepicker/index.d.ts +5 -0
- package/dist/divider.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/menu.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/timepicker.css +1 -0
- package/dist/timepicker.js +1 -0
- package/docs/accordion.html +31 -17
- package/docs/button.html +42 -15
- package/docs/iconbutton.html +258 -164
- package/docs/index.html +11 -8
- package/docs/list.html +52 -44
- package/docs/menu.html +2 -1
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/sidesheet.html +3 -2
- package/docs/timepicker.html +113 -0
- package/micl.ts +3 -1
- package/package.json +2 -4
- package/styles.scss +1 -0
package/docs/accordion.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<meta name="description" content="Demonstrating MICL Accordions">
|
|
7
7
|
<title>MICL Accordions</title>
|
|
8
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
9
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,person,search,settings&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
|
|
10
10
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
11
11
|
<link rel="stylesheet" href="micl.css">
|
|
12
12
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<main class="micl-body micl-body--stacked-to-extralarge">
|
|
16
16
|
<section class="micl-pane">
|
|
17
17
|
<header class="micl-appbar">
|
|
18
|
-
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-
|
|
18
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
|
|
19
19
|
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
20
20
|
</a>
|
|
21
21
|
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
<span class="micl-list-item__text">
|
|
36
36
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
37
37
|
</span>
|
|
38
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
38
39
|
</summary>
|
|
39
40
|
<div class="micl-list-item__content">
|
|
40
41
|
<p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
|
|
@@ -45,6 +46,7 @@
|
|
|
45
46
|
<span class="micl-list-item__text">
|
|
46
47
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
47
48
|
</span>
|
|
49
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
48
50
|
</summary>
|
|
49
51
|
<div class="micl-list-item__content">
|
|
50
52
|
<p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
<span class="micl-list-item__headline">Marie Curie</span>
|
|
59
61
|
<span class="micl-list-item__supporting-text">The name of the employee</span>
|
|
60
62
|
</span>
|
|
63
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
61
64
|
</summary>
|
|
62
65
|
<div class="micl-list-item__content" style="padding-block:16px">
|
|
63
66
|
<div class="micl-textfield-filled">
|
|
@@ -72,6 +75,7 @@
|
|
|
72
75
|
<span class="micl-list-item__headline">Country</span>
|
|
73
76
|
<span class="micl-list-item__supporting-text">The country of residence</span>
|
|
74
77
|
</span>
|
|
78
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
75
79
|
</summary>
|
|
76
80
|
<div class="micl-list-item__content" style="padding-block:16px">
|
|
77
81
|
<div class="micl-textfield-filled">
|
|
@@ -88,6 +92,7 @@
|
|
|
88
92
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
89
93
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
90
94
|
</span>
|
|
95
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
91
96
|
</summary>
|
|
92
97
|
<div class="micl-list-item__content">
|
|
93
98
|
<p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
@@ -99,6 +104,7 @@
|
|
|
99
104
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
100
105
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
101
106
|
</span>
|
|
107
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
102
108
|
</summary>
|
|
103
109
|
<div class="micl-list-item__content">
|
|
104
110
|
<p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
@@ -110,7 +116,7 @@
|
|
|
110
116
|
</div>
|
|
111
117
|
<div class="micl-pane__column">
|
|
112
118
|
<div class="micl-card-filled">
|
|
113
|
-
<div class="micl-card__content">
|
|
119
|
+
<div class="micl-card__content" style="--md-sys-accordion-item-space:4px">
|
|
114
120
|
<div class="micl-list" role="listbox">
|
|
115
121
|
<details name="accordion4">
|
|
116
122
|
<summary class="micl-list-item-one">
|
|
@@ -118,6 +124,7 @@
|
|
|
118
124
|
<span class="micl-list-item__text">
|
|
119
125
|
<span class="micl-list-item__headline">Date</span>
|
|
120
126
|
</span>
|
|
127
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
121
128
|
</summary>
|
|
122
129
|
<div class="micl-list-item__content" style="padding-block:16px">
|
|
123
130
|
<div class="micl-textfield-outlined">
|
|
@@ -132,6 +139,7 @@
|
|
|
132
139
|
<span class="micl-list-item__text">
|
|
133
140
|
<span class="micl-list-item__headline">Time</span>
|
|
134
141
|
</span>
|
|
142
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
135
143
|
</summary>
|
|
136
144
|
<div class="micl-list-item__content" style="padding-block:16px">
|
|
137
145
|
<div class="micl-textfield-outlined">
|
|
@@ -149,6 +157,7 @@
|
|
|
149
157
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
150
158
|
<span class="micl-list-item__supporting-text">Supporting text 1</span>
|
|
151
159
|
</span>
|
|
160
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
152
161
|
</summary>
|
|
153
162
|
<div class="micl-list-item__content">
|
|
154
163
|
<p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
|
|
@@ -161,6 +170,7 @@
|
|
|
161
170
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
162
171
|
<span class="micl-list-item__supporting-text">Supporting text 2</span>
|
|
163
172
|
</span>
|
|
173
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
164
174
|
</summary>
|
|
165
175
|
<div class="micl-list-item__content">
|
|
166
176
|
<p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
|
|
@@ -175,6 +185,7 @@
|
|
|
175
185
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
176
186
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
177
187
|
</span>
|
|
188
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
178
189
|
</summary>
|
|
179
190
|
<div class="micl-list-item__content">
|
|
180
191
|
<p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
@@ -187,6 +198,7 @@
|
|
|
187
198
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
188
199
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
189
200
|
</span>
|
|
201
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
190
202
|
</summary>
|
|
191
203
|
<div class="micl-list-item__content">
|
|
192
204
|
<p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
@@ -253,7 +265,7 @@
|
|
|
253
265
|
</div>
|
|
254
266
|
</details>
|
|
255
267
|
</div>
|
|
256
|
-
<div class="micl-list
|
|
268
|
+
<div class="micl-list" role="listbox">
|
|
257
269
|
<details name="accordion9">
|
|
258
270
|
<summary class="micl-list-item-three">
|
|
259
271
|
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg/330px-N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg)"></span>
|
|
@@ -266,6 +278,7 @@
|
|
|
266
278
|
<p style="font-family:fantasy;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
|
|
267
279
|
</div>
|
|
268
280
|
</details>
|
|
281
|
+
<hr class="micl-divider">
|
|
269
282
|
<details name="accordion9">
|
|
270
283
|
<summary class="micl-list-item-three" tabindex="-1">
|
|
271
284
|
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
|
|
@@ -292,28 +305,29 @@
|
|
|
292
305
|
<div class="micl-card__content docs-code">
|
|
293
306
|
<pre tabindex="-1"><code>
|
|
294
307
|
<div class="micl-list" role="listbox">
|
|
295
|
-
<details name="accordion">
|
|
308
|
+
<details name="accordion">
|
|
296
309
|
<summary class="micl-list-item-two">
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
310
|
+
<span class="material-symbols-outlined micl-list-item__icon">settings</span>
|
|
311
|
+
<span class="micl-list-item__text">
|
|
312
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
313
|
+
<span class="micl-list-item__supporting-text">Supporting text 1</span>
|
|
314
|
+
</span>
|
|
302
315
|
</summary>
|
|
303
316
|
<div class="micl-list-item__content">
|
|
304
|
-
|
|
317
|
+
<p class="md-sys-typescale-body-medium">Lorem ipsum.</p>
|
|
305
318
|
</div>
|
|
306
319
|
</details>
|
|
320
|
+
<hr class="micl-divider">
|
|
307
321
|
<details name="accordion">
|
|
308
322
|
<summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
323
|
+
<span class="material-symbols-outlined micl-list-item__icon">person</span>
|
|
324
|
+
<span class="micl-list-item__text">
|
|
325
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
326
|
+
<span class="micl-list-item__supporting-text">Supporting text 2</span>
|
|
327
|
+
</span>
|
|
314
328
|
</summary>
|
|
315
329
|
<div class="micl-list-item__content">
|
|
316
|
-
|
|
330
|
+
<p class="md-sys-typescale-body-medium">Lorem ipsum.</p>
|
|
317
331
|
</div>
|
|
318
332
|
</details>
|
|
319
333
|
</div>
|
package/docs/button.html
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
49
49
|
Click
|
|
50
50
|
</button>
|
|
51
|
-
<button type="button" class="micl-button-text-l micl-button--square">
|
|
51
|
+
<button type="button" class="micl-button-text-l micl-button--square" disabled>
|
|
52
52
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
53
53
|
Click
|
|
54
54
|
</button>
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
82
82
|
<span>Click</span>
|
|
83
83
|
</button>
|
|
84
|
-
<button type="button" class="micl-button-elevated-l micl-button--square">
|
|
84
|
+
<button type="button" class="micl-button-elevated-l micl-button--square" disabled>
|
|
85
85
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
86
86
|
<span>Click</span>
|
|
87
87
|
</button>
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
115
115
|
Click
|
|
116
116
|
</button>
|
|
117
|
-
<button type="button" class="micl-button-filled-l micl-button--square">
|
|
117
|
+
<button type="button" class="micl-button-filled-l micl-button--square" disabled>
|
|
118
118
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
119
119
|
Click
|
|
120
120
|
</button>
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
148
148
|
Click
|
|
149
149
|
</button>
|
|
150
|
-
<button type="button" class="micl-button-tonal-l micl-button--square">
|
|
150
|
+
<button type="button" class="micl-button-tonal-l micl-button--square" disabled>
|
|
151
151
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
152
152
|
Click
|
|
153
153
|
</button>
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
181
181
|
Click
|
|
182
182
|
</button>
|
|
183
|
-
<button type="button" class="micl-button-outlined-l micl-button--square">
|
|
183
|
+
<button type="button" class="micl-button-outlined-l micl-button--square" disabled>
|
|
184
184
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
185
185
|
Click
|
|
186
186
|
</button>
|
|
@@ -194,16 +194,43 @@
|
|
|
194
194
|
<div class="micl-card__headline-m">
|
|
195
195
|
<h2>Toggle buttons</h2>
|
|
196
196
|
</div>
|
|
197
|
-
<div class="micl-card__content"
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<
|
|
205
|
-
|
|
206
|
-
|
|
197
|
+
<div class="micl-card__content">
|
|
198
|
+
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
199
|
+
<button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
|
|
200
|
+
<button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
|
|
201
|
+
<button type="button" class="micl-button-elevated-m micl-button--square micl-button--toggle">Click</button>
|
|
202
|
+
<button type="button" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
|
|
203
|
+
</div>
|
|
204
|
+
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
205
|
+
<button type="button" class="micl-button-filled-m micl-button--toggle">
|
|
206
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
207
|
+
Click
|
|
208
|
+
</button>
|
|
209
|
+
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">
|
|
210
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
211
|
+
Click
|
|
212
|
+
</button>
|
|
213
|
+
<button type="button" class="micl-button-filled-m micl-button--square micl-button--toggle">
|
|
214
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
215
|
+
Click
|
|
216
|
+
</button>
|
|
217
|
+
<button type="button" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected">
|
|
218
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
219
|
+
Click
|
|
220
|
+
</button>
|
|
221
|
+
</div>
|
|
222
|
+
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
223
|
+
<button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
|
|
224
|
+
<button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
|
|
225
|
+
<button type="button" class="micl-button-tonal-m micl-button--square micl-button--toggle">Click</button>
|
|
226
|
+
<button type="button" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
|
|
227
|
+
</div>
|
|
228
|
+
<div style="display:flex;flex-wrap:wrap;gap:8px">
|
|
229
|
+
<button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
|
|
230
|
+
<button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
|
|
231
|
+
<button type="button" class="micl-button-outlined-m micl-button--square micl-button--toggle">Click</button>
|
|
232
|
+
<button type="button" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
|
|
233
|
+
</div>
|
|
207
234
|
</div>
|
|
208
235
|
</div>
|
|
209
236
|
</section>
|