material-inspired-component-library 6.0.2 → 6.0.4
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/README.md +1 -0
- package/components/button/index.scss +1 -0
- package/components/dialog/README.md +1 -1
- package/components/iconbutton/index.scss +4 -0
- package/components/list/README.md +5 -9
- package/components/list/index.ts +65 -35
- package/components/menu/README.md +7 -7
- package/components/navigationrail/index.scss +23 -13
- package/components/navigationrail/index.ts +21 -4
- package/components/select/index.scss +3 -0
- package/components/snackbar/index.scss +142 -0
- package/components/snackbar/index.ts +56 -0
- package/components/stepper/README.md +1 -1
- package/components/stepper/index.ts +6 -2
- package/components/textfield/index.scss +1 -1
- package/components/textfield/index.ts +28 -19
- package/dist/button.css +1 -1
- package/dist/components/list/index.d.ts +2 -1
- package/dist/components/navigationrail/index.d.ts +2 -1
- package/dist/components/snackbar/index.d.ts +5 -0
- package/dist/components/textfield/index.d.ts +1 -0
- package/dist/iconbutton.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/select.css +1 -1
- package/dist/snackbar.css +1 -0
- package/dist/snackbar.js +1 -0
- package/dist/textfield.css +1 -1
- package/docs/accordion.html +5 -6
- package/docs/alert.html +18 -19
- package/docs/bottomsheet.html +28 -29
- package/docs/button.html +7 -8
- package/docs/card.html +5 -6
- package/docs/checkbox.html +5 -6
- package/docs/datepicker.html +5 -6
- package/docs/dialog.html +4 -5
- package/docs/divider.html +4 -5
- package/docs/docs.css +1 -0
- package/docs/docs.js +4 -0
- package/docs/iconbutton.html +10 -11
- package/docs/index.html +1 -1
- package/docs/list.html +20 -21
- package/docs/menu.html +30 -31
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/radio.html +5 -6
- package/docs/select.html +5 -6
- package/docs/sidesheet.html +11 -12
- package/docs/slider.html +5 -6
- package/docs/snackbar.html +85 -0
- package/docs/snackbar1.html +159 -0
- package/docs/snackbar2.html +159 -0
- package/docs/stepper.html +5 -6
- package/docs/switch.html +5 -6
- package/docs/textfield.html +5 -6
- package/docs/timepicker.html +5 -6
- package/micl.ts +4 -1
- package/package.json +2 -1
- package/styles.scss +1 -0
package/docs/button.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,edit,home&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -237,21 +237,20 @@
|
|
|
237
237
|
</div>
|
|
238
238
|
</section>
|
|
239
239
|
<section class="micl-pane">
|
|
240
|
-
<div class="micl-card-filled">
|
|
240
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
241
241
|
<div class="micl-card__headline-s">
|
|
242
242
|
<h2>Code example</h2>
|
|
243
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
243
244
|
</div>
|
|
244
245
|
<div class="micl-card__content docs-code">
|
|
245
|
-
<pre tabindex="-1"><code
|
|
246
|
-
<button type="button" class="micl-button-tonal-s">Click</button>
|
|
246
|
+
<pre tabindex="-1"><code><button type="button" class="micl-button-tonal-s">Click</button>
|
|
247
247
|
|
|
248
248
|
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
249
249
|
|
|
250
250
|
<button type="button" class="micl-button-outlined-xl micl-button--square">
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
</button>
|
|
254
|
-
</code></pre>
|
|
251
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
252
|
+
Click
|
|
253
|
+
</button></code></pre>
|
|
255
254
|
</div>
|
|
256
255
|
</div>
|
|
257
256
|
</section>
|
package/docs/card.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -118,13 +118,13 @@
|
|
|
118
118
|
</div>
|
|
119
119
|
</section>
|
|
120
120
|
<section class="micl-pane micl-pane--fixed" style="width:680px">
|
|
121
|
-
<div class="micl-card-filled">
|
|
121
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
122
122
|
<div class="micl-card__headline-s">
|
|
123
123
|
<h2>Code example</h2>
|
|
124
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
124
125
|
</div>
|
|
125
126
|
<div class="micl-card__content docs-code">
|
|
126
|
-
<pre tabindex="-1"><code
|
|
127
|
-
<div class="micl-card-elevated" tabindex="0">
|
|
127
|
+
<pre tabindex="-1"><code><div class="micl-card-elevated" tabindex="0">
|
|
128
128
|
<div class="micl-card__headline-s">
|
|
129
129
|
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
|
|
130
130
|
</div>
|
|
@@ -133,8 +133,7 @@
|
|
|
133
133
|
<div class="micl-card__content">
|
|
134
134
|
<p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
|
|
135
135
|
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</code></pre>
|
|
136
|
+
</div></code></pre>
|
|
138
137
|
</div>
|
|
139
138
|
</div>
|
|
140
139
|
</section>
|
package/docs/checkbox.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -126,17 +126,16 @@
|
|
|
126
126
|
</div>
|
|
127
127
|
</section>
|
|
128
128
|
<section class="micl-pane">
|
|
129
|
-
<div class="micl-card-filled">
|
|
129
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
130
130
|
<div class="micl-card__headline-s">
|
|
131
131
|
<h2>Code example</h2>
|
|
132
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
132
133
|
</div>
|
|
133
134
|
<div class="micl-card__content docs-code">
|
|
134
|
-
<pre
|
|
135
|
-
<div class="micl-flex--vcenter">
|
|
135
|
+
<pre><code><div class="micl-flex--vcenter">
|
|
136
136
|
<input type="checkbox" id="id0" class="micl-checkbox" value="v0">
|
|
137
137
|
<label for="id0" class="md-sys-typescale-body-medium">First Choice</label>
|
|
138
|
-
</div>
|
|
139
|
-
</code></pre>
|
|
138
|
+
</div></code></pre>
|
|
140
139
|
</div>
|
|
141
140
|
</div>
|
|
142
141
|
</section>
|
package/docs/datepicker.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,dark_mode,edit,home&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,content_copy,dark_mode,edit,home&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -220,13 +220,13 @@
|
|
|
220
220
|
</div>
|
|
221
221
|
</section>
|
|
222
222
|
<section class="micl-pane">
|
|
223
|
-
<div class="micl-card-filled">
|
|
223
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
224
224
|
<div class="micl-card__headline-s">
|
|
225
225
|
<h2>Code example</h2>
|
|
226
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
226
227
|
</div>
|
|
227
228
|
<div class="micl-card__content docs-code">
|
|
228
|
-
<pre tabindex="-1"><code
|
|
229
|
-
<dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1">
|
|
229
|
+
<pre tabindex="-1"><code><dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1">
|
|
230
230
|
<form method="dialog">
|
|
231
231
|
<div class="micl-dialog__headline">
|
|
232
232
|
<h2 id="id1">Enter dates</h2>
|
|
@@ -262,8 +262,7 @@
|
|
|
262
262
|
<button class="micl-button-text-s" value="OK">OK</button>
|
|
263
263
|
</div>
|
|
264
264
|
</form>
|
|
265
|
-
</dialog>
|
|
266
|
-
</code></pre>
|
|
265
|
+
</dialog></code></pre>
|
|
267
266
|
</div>
|
|
268
267
|
</div>
|
|
269
268
|
</section>
|
package/docs/dialog.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,home,person,restart_alt&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,home,person,restart_alt&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -171,10 +171,10 @@
|
|
|
171
171
|
<div class="micl-card-filled">
|
|
172
172
|
<div class="micl-card__headline-s">
|
|
173
173
|
<h2>Code example</h2>
|
|
174
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
174
175
|
</div>
|
|
175
176
|
<div class="micl-card__content docs-code">
|
|
176
|
-
<pre tabindex="-1"><code
|
|
177
|
-
<dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover>
|
|
177
|
+
<pre tabindex="-1"><code><dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover>
|
|
178
178
|
<div class="micl-dialog__headline">
|
|
179
179
|
<h2>Basic dialog</h2>
|
|
180
180
|
<span class="micl-dialog__supporting-text">A dialog is a type of modal window.</span>
|
|
@@ -183,8 +183,7 @@
|
|
|
183
183
|
<button type="button" class="micl-button-text-s" popovertarget="id0">Cancel</button>
|
|
184
184
|
<button type="button" class="micl-button-text-s">Action</button>
|
|
185
185
|
</div>
|
|
186
|
-
</dialog>
|
|
187
|
-
</code></pre>
|
|
186
|
+
</dialog></code></pre>
|
|
188
187
|
</div>
|
|
189
188
|
</div>
|
|
190
189
|
</div>
|
package/docs/divider.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -121,14 +121,13 @@
|
|
|
121
121
|
</div>
|
|
122
122
|
</section>
|
|
123
123
|
<section class="micl-pane">
|
|
124
|
-
<div class="micl-card-filled">
|
|
124
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
125
125
|
<div class="micl-card__headline-s">
|
|
126
126
|
<h2>Code example</h2>
|
|
127
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
127
128
|
</div>
|
|
128
129
|
<div class="micl-card__content docs-code">
|
|
129
|
-
<pre tabindex="-1"><code>
|
|
130
|
-
<hr class="micl-divider">
|
|
131
|
-
</code></pre>
|
|
130
|
+
<pre tabindex="-1"><code><hr class="micl-divider"></code></pre>
|
|
132
131
|
</div>
|
|
133
132
|
</div>
|
|
134
133
|
</section>
|
package/docs/docs.css
CHANGED
package/docs/docs.js
CHANGED
|
@@ -133,3 +133,7 @@ document.getElementById('directionality').addEventListener('change', event => {
|
|
|
133
133
|
}
|
|
134
134
|
catch (e) {}
|
|
135
135
|
});
|
|
136
|
+
document.getElementById('copycode')?.addEventListener('click', event => {
|
|
137
|
+
const code = document.querySelector('code');
|
|
138
|
+
!!code && navigator.clipboard.writeText(code.textContent).then(() => {}).catch(e => {});
|
|
139
|
+
});
|
package/docs/iconbutton.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
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
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home,settings&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -288,23 +288,22 @@
|
|
|
288
288
|
</div>
|
|
289
289
|
</section>
|
|
290
290
|
<section class="micl-pane">
|
|
291
|
-
<div class="micl-card-filled">
|
|
291
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
292
292
|
<div class="micl-card__headline-s">
|
|
293
293
|
<h2>Code example</h2>
|
|
294
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
294
295
|
</div>
|
|
295
296
|
<div class="micl-card__content docs-code">
|
|
296
|
-
<pre tabindex="-1"><code
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
aria-label="Control Panel"
|
|
297
|
+
<pre tabindex="-1"><code><button type="button"
|
|
298
|
+
class="micl-iconbutton-standard-s material-symbols-outlined"
|
|
299
|
+
aria-label="Control Panel"
|
|
300
300
|
>settings</button>
|
|
301
301
|
|
|
302
302
|
<button type="button"
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
>settings</button>
|
|
307
|
-
</code></pre>
|
|
303
|
+
class="micl-iconbutton-filled-m material-symbols-outlined
|
|
304
|
+
micl-button--toggle micl-button--selected"
|
|
305
|
+
aria-label="Control Panel"
|
|
306
|
+
>settings</button></code></pre>
|
|
308
307
|
</div>
|
|
309
308
|
</div>
|
|
310
309
|
</section>
|
package/docs/index.html
CHANGED
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
<h2>Lists</h2>
|
|
182
182
|
</div>
|
|
183
183
|
<div class="micl-card__content">
|
|
184
|
-
<ul class="micl-list"
|
|
184
|
+
<ul class="micl-list">
|
|
185
185
|
<li class="micl-list-item-one">
|
|
186
186
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
|
|
187
187
|
<span class="micl-list-item__text">
|
package/docs/list.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<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_right,more_horiz,person,search,settings&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,content_copy,dark_mode,home,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
</li>
|
|
68
68
|
</ul>
|
|
69
69
|
<ul class="micl-list">
|
|
70
|
-
<li class="micl-list-item-one"
|
|
70
|
+
<li class="micl-list-item-one">
|
|
71
71
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
|
|
72
72
|
<span class="micl-list-item__text">
|
|
73
73
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -90,20 +90,20 @@
|
|
|
90
90
|
<label>
|
|
91
91
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
|
|
92
92
|
<span class="micl-list-item__text">
|
|
93
|
-
<span
|
|
93
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
94
94
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
95
95
|
</span>
|
|
96
|
-
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2"
|
|
96
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2" aria-label="Headline 1">
|
|
97
97
|
</label>
|
|
98
98
|
</li>
|
|
99
99
|
<li role="option" class="micl-list-item-three">
|
|
100
100
|
<label>
|
|
101
101
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
|
|
102
102
|
<span class="micl-list-item__text">
|
|
103
|
-
<span
|
|
103
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
104
104
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
105
105
|
</span>
|
|
106
|
-
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3"
|
|
106
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3" aria-label="Headline 2">
|
|
107
107
|
</label>
|
|
108
108
|
</li>
|
|
109
109
|
</ul>
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
</ul>
|
|
133
133
|
<ul class="micl-list">
|
|
134
134
|
<li class="micl-list-item-three" tabindex="0">
|
|
135
|
-
<a href="https://www.thetimes.com/"
|
|
135
|
+
<a href="https://www.thetimes.com/" target="_blank">
|
|
136
136
|
<span class="micl-list-item__avatar">T</span>
|
|
137
137
|
<span class="micl-list-item__text">
|
|
138
138
|
<span class="micl-list-item__headline">The Times</span>
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
<span class="micl-list-item__headline">Headline</span>
|
|
166
166
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
167
167
|
</span>
|
|
168
|
-
<input type="checkbox" class="micl-switch" id="myswitch" value="c1"
|
|
168
|
+
<input type="checkbox" class="micl-switch" id="myswitch" value="c1" aria-label="Headline">
|
|
169
169
|
</label>
|
|
170
170
|
</li>
|
|
171
171
|
</ul>
|
|
@@ -204,10 +204,10 @@
|
|
|
204
204
|
<label>
|
|
205
205
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
206
206
|
<span class="micl-list-item__text">
|
|
207
|
-
<span
|
|
207
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
208
208
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
209
209
|
</span>
|
|
210
|
-
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1"
|
|
210
|
+
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1" aria-label="Headline">
|
|
211
211
|
</label>
|
|
212
212
|
</li>
|
|
213
213
|
</ul>
|
|
@@ -232,18 +232,18 @@
|
|
|
232
232
|
<li role="option" class="micl-list-item-three" tabindex="0" aria-selected="true">
|
|
233
233
|
<label>
|
|
234
234
|
<span class="micl-list-item__text">
|
|
235
|
-
<span
|
|
235
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
236
236
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
237
237
|
</span>
|
|
238
|
-
<input type="checkbox" id="cb4" class="micl-checkbox" value="c2" checked
|
|
238
|
+
<input type="checkbox" id="cb4" class="micl-checkbox" value="c2" checked aria-label="Headline 1">
|
|
239
239
|
</label>
|
|
240
240
|
</li>
|
|
241
|
-
<li role="separator" class="micl-divider"></li>
|
|
241
|
+
<li role="separator" class="micl-divider" tabindex="-1"></li>
|
|
242
242
|
<li role="option" class="micl-list-item-three">
|
|
243
243
|
<label>
|
|
244
|
-
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3"
|
|
244
|
+
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3" aria-label="Headline 2">
|
|
245
245
|
<span class="micl-list-item__text">
|
|
246
|
-
<span
|
|
246
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
247
247
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
248
248
|
</span>
|
|
249
249
|
</label>
|
|
@@ -255,13 +255,13 @@
|
|
|
255
255
|
</div>
|
|
256
256
|
</section>
|
|
257
257
|
<section class="micl-pane">
|
|
258
|
-
<div class="micl-card-filled">
|
|
258
|
+
<div class="micl-card-filled" style="margin-top:8px">
|
|
259
259
|
<div class="micl-card__headline-s">
|
|
260
260
|
<h2>Code example</h2>
|
|
261
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
261
262
|
</div>
|
|
262
263
|
<div class="micl-card__content docs-code">
|
|
263
|
-
<pre tabindex="-1"><code
|
|
264
|
-
<ul class="micl-list">
|
|
264
|
+
<pre tabindex="-1"><code><ul class="micl-list">
|
|
265
265
|
<li class="micl-list-item-two">
|
|
266
266
|
<span class="micl-list-item__avatar">17</span>
|
|
267
267
|
<span class="micl-list-item__text">
|
|
@@ -279,11 +279,10 @@
|
|
|
279
279
|
<span class="micl-list-item__headline">Headline</span>
|
|
280
280
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
281
281
|
</span>
|
|
282
|
-
<input type="checkbox" id="id0" class="micl-checkbox" value="v0"
|
|
282
|
+
<input type="checkbox" id="id0" class="micl-checkbox" value="v0">
|
|
283
283
|
</label>
|
|
284
284
|
</li>
|
|
285
|
-
</ul>
|
|
286
|
-
</code></pre>
|
|
285
|
+
</ul></code></pre>
|
|
287
286
|
</div>
|
|
288
287
|
</div>
|
|
289
288
|
</section>
|
package/docs/menu.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
|
|
11
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,content_copy,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
14
|
<link rel="stylesheet" href="docs.css">
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<span class="micl-list-item__headline">Person</span>
|
|
85
85
|
<span class="micl-list-item__supporting-text">Are you an administrator?</span>
|
|
86
86
|
</span>
|
|
87
|
-
<input type="checkbox" id="cb1" class="micl-checkbox" value="c1"
|
|
87
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
|
|
88
88
|
</label>
|
|
89
89
|
</li>
|
|
90
90
|
<li class="micl-list-item-two">
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
</span>
|
|
127
127
|
</li>
|
|
128
128
|
<li class="micl-list-item-three">
|
|
129
|
-
<a href="https://www.nytimes.com"
|
|
129
|
+
<a href="https://www.nytimes.com" target="_blank">
|
|
130
130
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
|
|
131
131
|
<span class="micl-list-item__text">
|
|
132
132
|
<span class="micl-list-item__headline">The New York Times</span>
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
<span class="micl-list-item__headline">Select or Unselect</span>
|
|
142
142
|
<span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
|
|
143
143
|
</span>
|
|
144
|
-
<input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2"
|
|
144
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2">
|
|
145
145
|
</label>
|
|
146
146
|
</li>
|
|
147
147
|
</ul>
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
<nav id="mymenu4" class="micl-menu" popover>
|
|
154
154
|
<ul class="micl-list">
|
|
155
155
|
<li class="micl-list-item-one" tabindex="0">
|
|
156
|
-
<button popovertarget="mymenu5"
|
|
156
|
+
<button popovertarget="mymenu5">
|
|
157
157
|
<span class="micl-list-item__text">
|
|
158
158
|
<span class="micl-list-item__headline">Europe</span>
|
|
159
159
|
</span>
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
</nav>
|
|
191
191
|
</li>
|
|
192
192
|
<li class="micl-list-item-one">
|
|
193
|
-
<button popovertarget="mymenu6"
|
|
193
|
+
<button popovertarget="mymenu6">
|
|
194
194
|
<span class="micl-list-item__text">
|
|
195
195
|
<span class="micl-list-item__headline">Africa</span>
|
|
196
196
|
</span>
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
</nav>
|
|
228
228
|
</li>
|
|
229
229
|
<li class="micl-list-item-one">
|
|
230
|
-
<button popovertarget="mymenu7"
|
|
230
|
+
<button popovertarget="mymenu7">
|
|
231
231
|
<span class="micl-list-item__text">
|
|
232
232
|
<span class="micl-list-item__headline">Asia</span>
|
|
233
233
|
</span>
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
</nav>
|
|
265
265
|
</li>
|
|
266
266
|
<li class="micl-list-item-one">
|
|
267
|
-
<button popovertarget="mymenu8"
|
|
267
|
+
<button popovertarget="mymenu8">
|
|
268
268
|
<span class="micl-list-item__text">
|
|
269
269
|
<span class="micl-list-item__headline">America</span>
|
|
270
270
|
</span>
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
<nav id="mymenu8" class="micl-menu" popover>
|
|
274
274
|
<ul class="micl-list">
|
|
275
275
|
<li class="micl-list-item-one" tabindex="0">
|
|
276
|
-
<button popovertarget="mymenu9"
|
|
276
|
+
<button popovertarget="mymenu9">
|
|
277
277
|
<span class="micl-list-item__text">
|
|
278
278
|
<span class="micl-list-item__headline">North America</span>
|
|
279
279
|
</span>
|
|
@@ -300,7 +300,7 @@
|
|
|
300
300
|
</nav>
|
|
301
301
|
</li>
|
|
302
302
|
<li class="micl-list-item-one">
|
|
303
|
-
<button popovertarget="mymenu10"
|
|
303
|
+
<button popovertarget="mymenu10">
|
|
304
304
|
<span class="micl-list-item__text">
|
|
305
305
|
<span class="micl-list-item__headline">South America</span>
|
|
306
306
|
</span>
|
|
@@ -334,29 +334,28 @@
|
|
|
334
334
|
<div class="micl-card-filled">
|
|
335
335
|
<div class="micl-card__headline-s">
|
|
336
336
|
<h2>Code example</h2>
|
|
337
|
+
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
337
338
|
</div>
|
|
338
339
|
<div class="micl-card__content docs-code">
|
|
339
|
-
<pre tabindex="-1"><code
|
|
340
|
-
<
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
</nav>
|
|
359
|
-
</code></pre>
|
|
340
|
+
<pre tabindex="-1"><code><nav id="id0" class="micl-menu" popover>
|
|
341
|
+
<ul class="micl-list">
|
|
342
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
343
|
+
<span class="micl-list-item__text">
|
|
344
|
+
<span class="micl-list-item__headline">Home</span>
|
|
345
|
+
</span>
|
|
346
|
+
</li>
|
|
347
|
+
<li class="micl-list-item-one">
|
|
348
|
+
<span class="micl-list-item__text">
|
|
349
|
+
<span class="micl-list-item__headline">About</span>
|
|
350
|
+
</span>
|
|
351
|
+
</li>
|
|
352
|
+
<li class="micl-list-item-one micl-list-item--disabled">
|
|
353
|
+
<span class="micl-list-item__text">
|
|
354
|
+
<span class="micl-list-item__headline">Contact</span>
|
|
355
|
+
</span>
|
|
356
|
+
</li>
|
|
357
|
+
</ul>
|
|
358
|
+
</nav></code></pre>
|
|
360
359
|
</div>
|
|
361
360
|
</div>
|
|
362
361
|
</div>
|