material-inspired-component-library 6.0.7 → 7.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.
- package/README.md +11 -2
- package/components/accordion/README.md +4 -6
- package/components/appbar/index.scss +4 -4
- package/components/button/README.md +16 -1
- package/components/button/index.scss +6 -0
- package/components/button/index.ts +17 -0
- package/components/card/README.md +84 -11
- package/components/card/index.scss +178 -209
- package/components/checkbox/index.scss +4 -0
- package/components/datepicker/README.md +3 -2
- package/components/datepicker/index.ts +0 -8
- package/components/dialog/README.md +7 -7
- package/components/iconbutton/README.md +11 -0
- package/components/iconbutton/index.scss +12 -0
- package/components/iconbutton/index.ts +15 -0
- package/components/navigationrail/README.md +64 -59
- package/components/navigationrail/index.scss +197 -300
- package/components/navigationrail/index.ts +55 -38
- package/components/radio/index.scss +4 -0
- package/components/select/index.scss +14 -14
- package/components/snackbar/README.md +126 -0
- package/components/snackbar/index.scss +94 -73
- package/components/snackbar/index.ts +90 -28
- package/components/textfield/index.scss +6 -0
- package/components/timepicker/README.md +2 -1
- package/components/timepicker/index.ts +0 -3
- package/dist/appbar.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/navigationrail/index.d.ts +2 -1
- package/dist/components/snackbar/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/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/accordion.html +10 -10
- package/docs/button.html +43 -15
- package/docs/card.html +6 -5
- package/docs/datepicker.html +4 -4
- package/docs/dialog.html +17 -19
- package/docs/iconbutton.html +22 -8
- package/docs/index.html +31 -18
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/navigationrail.html +76 -22
- package/docs/snackbar.html +31 -14
- package/docs/timepicker.html +12 -3
- package/package.json +4 -4
- package/docs/snackbar1.html +0 -159
- package/docs/snackbar2.html +0 -159
package/docs/accordion.html
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<div class="micl-pane__column">
|
|
32
32
|
<div class="micl-card-elevated">
|
|
33
33
|
<div class="micl-card__content">
|
|
34
|
-
<div class="micl-list"
|
|
34
|
+
<div class="micl-list">
|
|
35
35
|
<details name="accordion1">
|
|
36
36
|
<summary class="micl-list-item-one">
|
|
37
37
|
<span class="micl-list-item__text">
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
</div>
|
|
56
56
|
</details>
|
|
57
57
|
</div>
|
|
58
|
-
<div class="micl-list"
|
|
58
|
+
<div class="micl-list">
|
|
59
59
|
<details name="accordion2">
|
|
60
60
|
<summary class="micl-list-item-two">
|
|
61
61
|
<span class="micl-list-item__text">
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
</div>
|
|
88
88
|
</details>
|
|
89
89
|
</div>
|
|
90
|
-
<div class="micl-list"
|
|
90
|
+
<div class="micl-list">
|
|
91
91
|
<details name="accordion3">
|
|
92
92
|
<summary class="micl-list-item-three">
|
|
93
93
|
<span class="micl-list-item__text">
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
<div class="micl-pane__column">
|
|
120
120
|
<div class="micl-card-filled">
|
|
121
121
|
<div class="micl-card__content" style="--md-sys-accordion-item-space:4px">
|
|
122
|
-
<div class="micl-list"
|
|
122
|
+
<div class="micl-list">
|
|
123
123
|
<details name="accordion4">
|
|
124
124
|
<summary class="micl-list-item-one">
|
|
125
125
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
</div>
|
|
152
152
|
</details>
|
|
153
153
|
</div>
|
|
154
|
-
<div class="micl-list"
|
|
154
|
+
<div class="micl-list">
|
|
155
155
|
<details name="accordion5">
|
|
156
156
|
<summary class="micl-list-item-two">
|
|
157
157
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
</div>
|
|
180
180
|
</details>
|
|
181
181
|
</div>
|
|
182
|
-
<div class="micl-list"
|
|
182
|
+
<div class="micl-list">
|
|
183
183
|
<details name="accordion6">
|
|
184
184
|
<summary class="micl-list-item-three">
|
|
185
185
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
<div class="micl-pane__column">
|
|
214
214
|
<div class="micl-card-outlined">
|
|
215
215
|
<div class="micl-card__content">
|
|
216
|
-
<div class="micl-list"
|
|
216
|
+
<div class="micl-list">
|
|
217
217
|
<details name="accordion7">
|
|
218
218
|
<summary class="micl-list-item-one">
|
|
219
219
|
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
</div>
|
|
240
240
|
</details>
|
|
241
241
|
</div>
|
|
242
|
-
<div class="micl-list"
|
|
242
|
+
<div class="micl-list">
|
|
243
243
|
<details name="accordion8">
|
|
244
244
|
<summary class="micl-list-item-two">
|
|
245
245
|
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
</div>
|
|
268
268
|
</details>
|
|
269
269
|
</div>
|
|
270
|
-
<div class="micl-list"
|
|
270
|
+
<div class="micl-list">
|
|
271
271
|
<details name="accordion9">
|
|
272
272
|
<summary class="micl-list-item-three">
|
|
273
273
|
<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>
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
307
307
|
</div>
|
|
308
308
|
<div class="micl-card__content docs-code">
|
|
309
|
-
<pre tabindex="-1"><code><div class="micl-list"
|
|
309
|
+
<pre tabindex="-1"><code><div class="micl-list">
|
|
310
310
|
<details name="accordion">
|
|
311
311
|
<summary class="micl-list-item-two">
|
|
312
312
|
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
|
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=content_copy,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,draw,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">
|
|
@@ -200,38 +200,50 @@
|
|
|
200
200
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
201
201
|
<button type="button" id="btn1" class="micl-button-elevated-m micl-button--toggle" commandfor="btn1" command="--micl-toggle">Click</button>
|
|
202
202
|
<button type="button" id="btn2" class="micl-button-elevated-m micl-button--toggle micl-button--selected" commandfor="btn2" command="--micl-toggle">Click</button>
|
|
203
|
-
<button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">
|
|
204
|
-
<button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">Click</button>
|
|
205
|
-
</div>
|
|
206
|
-
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
207
|
-
<button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">
|
|
203
|
+
<button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">
|
|
208
204
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
209
205
|
Click
|
|
210
206
|
</button>
|
|
211
|
-
<button type="button" id="
|
|
212
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true"
|
|
207
|
+
<button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">
|
|
208
|
+
<span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
|
|
213
209
|
Click
|
|
214
210
|
</button>
|
|
211
|
+
</div>
|
|
212
|
+
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
213
|
+
<button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">Click</button>
|
|
214
|
+
<button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle micl-button--selected" commandfor="btn6" command="--micl-toggle">Click</button>
|
|
215
215
|
<button type="button" id="btn7" class="micl-button-filled-m micl-button--square micl-button--toggle" commandfor="btn7" command="--micl-toggle">
|
|
216
216
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
217
217
|
Click
|
|
218
218
|
</button>
|
|
219
219
|
<button type="button" id="btn8" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn8" command="--micl-toggle">
|
|
220
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true"
|
|
220
|
+
<span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
|
|
221
221
|
Click
|
|
222
222
|
</button>
|
|
223
223
|
</div>
|
|
224
224
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
225
225
|
<button type="button" id="btn9" class="micl-button-tonal-m micl-button--toggle" commandfor="btn9" command="--micl-toggle">Click</button>
|
|
226
226
|
<button type="button" id="btn10" class="micl-button-tonal-m micl-button--toggle micl-button--selected" commandfor="btn10" command="--micl-toggle">Click</button>
|
|
227
|
-
<button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">
|
|
228
|
-
|
|
227
|
+
<button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">
|
|
228
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
229
|
+
Click
|
|
230
|
+
</button>
|
|
231
|
+
<button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn12" command="--micl-toggle">
|
|
232
|
+
<span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
|
|
233
|
+
Click
|
|
234
|
+
</button>
|
|
229
235
|
</div>
|
|
230
236
|
<div style="display:flex;flex-wrap:wrap;gap:8px">
|
|
231
237
|
<button type="button" id="btn13" class="micl-button-outlined-m micl-button--toggle" commandfor="btn13" command="--micl-toggle">Click</button>
|
|
232
238
|
<button type="button" id="btn14" class="micl-button-outlined-m micl-button--toggle micl-button--selected" commandfor="btn14" command="--micl-toggle">Click</button>
|
|
233
|
-
<button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">
|
|
234
|
-
|
|
239
|
+
<button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">
|
|
240
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
241
|
+
Click
|
|
242
|
+
</button>
|
|
243
|
+
<button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn16" command="--micl-toggle">
|
|
244
|
+
<span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
|
|
245
|
+
Click
|
|
246
|
+
</button>
|
|
235
247
|
</div>
|
|
236
248
|
</div>
|
|
237
249
|
</div>
|
|
@@ -245,11 +257,27 @@
|
|
|
245
257
|
<div class="micl-card__content docs-code">
|
|
246
258
|
<pre tabindex="-1"><code><button type="button" class="micl-button-tonal-s">Click</button>
|
|
247
259
|
|
|
248
|
-
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
249
|
-
|
|
250
260
|
<button type="button" class="micl-button-outlined-xl micl-button--square">
|
|
251
261
|
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
252
262
|
Click
|
|
263
|
+
</button>
|
|
264
|
+
|
|
265
|
+
<button class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
266
|
+
|
|
267
|
+
<button
|
|
268
|
+
type="button"
|
|
269
|
+
id="mybutton"
|
|
270
|
+
class="micl-button-tonal-l micl-button--toggle"
|
|
271
|
+
commandfor="mybutton"
|
|
272
|
+
command="--micl-toggle"
|
|
273
|
+
>
|
|
274
|
+
<span
|
|
275
|
+
class="micl-button__icon material-symbols-outlined"
|
|
276
|
+
data-miclicon="edit"
|
|
277
|
+
data-micliconselected="draw"
|
|
278
|
+
aria-hidden="true"
|
|
279
|
+
></span>
|
|
280
|
+
Click
|
|
253
281
|
</button></code></pre>
|
|
254
282
|
</div>
|
|
255
283
|
</div>
|
package/docs/card.html
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
<div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
|
|
48
48
|
<div class="micl-pane__column">
|
|
49
|
-
<div class="micl-card-elevated" style="margin-top:8px" tabindex="0">
|
|
49
|
+
<div role="button" class="micl-card-elevated" style="margin-top:8px" tabindex="0">
|
|
50
50
|
<div class="docs-icon" aria-hidden="true">A</div>
|
|
51
51
|
<div class="micl-card__headline-s">
|
|
52
52
|
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
|
|
@@ -64,9 +64,10 @@
|
|
|
64
64
|
<p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
|
|
65
65
|
<div class="micl-card__content">
|
|
66
66
|
<p class="md-sys-typescale-body-medium">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>
|
|
67
|
+
<button type="button" class="micl-button-filled-s" style="margin-block-start:16px">Action</button>
|
|
67
68
|
</div>
|
|
68
69
|
</div>
|
|
69
|
-
<div class="micl-card-outlined" tabindex="0">
|
|
70
|
+
<div role="link" class="micl-card-outlined" tabindex="0">
|
|
70
71
|
<div class="micl-card__headline-l">
|
|
71
72
|
<h2>Lorem</h2>
|
|
72
73
|
</div>
|
|
@@ -92,7 +93,7 @@
|
|
|
92
93
|
</details>
|
|
93
94
|
<details class="micl-card-elevated">
|
|
94
95
|
<summary>
|
|
95
|
-
<img alt="holiday" class="micl-card__image" src="card-holiday.webp">
|
|
96
|
+
<img alt="holiday" class="micl-card__image" src="card-holiday.webp" aria-hidden="true">
|
|
96
97
|
<span class="micl-card__headline-s">
|
|
97
98
|
<span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
|
|
98
99
|
</span>
|
|
@@ -106,7 +107,7 @@
|
|
|
106
107
|
</details>
|
|
107
108
|
<details class="micl-card-outlined">
|
|
108
109
|
<summary>
|
|
109
|
-
<span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340"></span>
|
|
110
|
+
<span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340" aria-hidden="true"></span>
|
|
110
111
|
<span class="micl-card__headline-l">
|
|
111
112
|
<span class="micl-heading">Lorem</span>
|
|
112
113
|
</span>
|
|
@@ -117,7 +118,7 @@
|
|
|
117
118
|
</details>
|
|
118
119
|
<details class="micl-card-filled">
|
|
119
120
|
<summary class="micl-card--compact">
|
|
120
|
-
<span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340"></span>
|
|
121
|
+
<span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340" aria-hidden="true"></span>
|
|
121
122
|
<span class="micl-card__headline-m">
|
|
122
123
|
<span class="micl-heading">Lorem ipsum</span>
|
|
123
124
|
</span>
|
package/docs/datepicker.html
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
<div class="micl-dialog__headline">
|
|
61
61
|
<h2 id="mytitle1">Enter dates</h2>
|
|
62
62
|
<span class="micl-dialog__supporting-text">Select date</span>
|
|
63
|
-
<button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-
|
|
63
|
+
<button type="button" id="btn1" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
|
|
64
64
|
<hr class="micl-divider">
|
|
65
65
|
<div class="micl-datepicker__month-selector">
|
|
66
66
|
<button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
<div class="micl-dialog__headline">
|
|
140
140
|
<h2 id="mytitle3">Enter dates</h2>
|
|
141
141
|
<span class="micl-dialog__supporting-text">Select date</span>
|
|
142
|
-
<button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-
|
|
142
|
+
<button type="button" id="btn2" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
|
|
143
143
|
<hr class="micl-divider">
|
|
144
144
|
<div class="micl-datepicker__month-selector">
|
|
145
145
|
<button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
<div class="micl-dialog__headline">
|
|
183
183
|
<h2 id="mytitle4">Enter dates</h2>
|
|
184
184
|
<span class="micl-dialog__supporting-text">Select date</span>
|
|
185
|
-
<button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-
|
|
185
|
+
<button type="button" id="btn4" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
|
|
186
186
|
<hr class="micl-divider">
|
|
187
187
|
<div class="micl-datepicker__month-selector">
|
|
188
188
|
<button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
<div class="micl-dialog__headline">
|
|
232
232
|
<h2 id="id1">Enter dates</h2>
|
|
233
233
|
<span class="micl-dialog__supporting-text">Select date</span>
|
|
234
|
-
<button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-
|
|
234
|
+
<button type="button" id="btn" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
|
|
235
235
|
<hr class="micl-divider">
|
|
236
236
|
<div class="micl-datepicker__month-selector">
|
|
237
237
|
<button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
|
package/docs/dialog.html
CHANGED
|
@@ -40,23 +40,22 @@
|
|
|
40
40
|
</div>
|
|
41
41
|
<p class="micl-card__supporting-text">Click a button to open one of the MICL dialogs.</p>
|
|
42
42
|
<div class="micl-card__content docs-buttons">
|
|
43
|
-
<dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any"
|
|
43
|
+
<dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" aria-labelledby="mytitle1">
|
|
44
44
|
<div class="micl-dialog__headline">
|
|
45
45
|
<h2 id="mytitle1">Basic dialog</h2>
|
|
46
46
|
<span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
|
|
47
47
|
</div>
|
|
48
48
|
<div class="micl-dialog__actions">
|
|
49
|
-
<button type="button" class="micl-button-text-s" popovertarget="mydialog1">
|
|
50
|
-
<button type="button" class="micl-button-text-s">Action</button>
|
|
49
|
+
<button type="button" class="micl-button-text-s" popovertarget="mydialog1" autofocus>OK</button>
|
|
51
50
|
</div>
|
|
52
51
|
</dialog>
|
|
53
52
|
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
|
|
54
53
|
|
|
55
|
-
<dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any"
|
|
54
|
+
<dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" aria-labelledby="mytitle2" aria-describedby="mydesc2">
|
|
56
55
|
<div class="micl-dialog__headline">
|
|
57
56
|
<span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">restart_alt</span>
|
|
58
57
|
<h2 id="mytitle2">Reset settings?</h2>
|
|
59
|
-
<span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
|
|
58
|
+
<span id="mydesc2" class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
|
|
60
59
|
</div>
|
|
61
60
|
<div class="micl-dialog__content">
|
|
62
61
|
<hr class="micl-divider">
|
|
@@ -83,39 +82,39 @@
|
|
|
83
82
|
<hr class="micl-divider">
|
|
84
83
|
</div>
|
|
85
84
|
<div class="micl-dialog__actions">
|
|
86
|
-
<button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
|
|
85
|
+
<button type="button" class="micl-button-text-s" popovertarget="mydialog2" autofocus>Cancel</button>
|
|
87
86
|
<button type="button" class="micl-button-text-s">Accept</button>
|
|
88
87
|
</div>
|
|
89
88
|
</dialog>
|
|
90
89
|
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
|
|
91
90
|
|
|
92
|
-
<dialog id="mydialog3" class="micl-dialog" style="width:350px"
|
|
91
|
+
<dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="none" role="alertdialog" aria-labelledby="mytitle3" aria-describedby="mydesc3">
|
|
93
92
|
<div class="micl-dialog__headline">
|
|
94
93
|
<h2 id="mytitle3">Delete selected images?</h2>
|
|
95
|
-
<span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
|
|
94
|
+
<span id="mydesc3" class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
|
|
96
95
|
</div>
|
|
97
96
|
<form method="dialog" class="micl-dialog__actions">
|
|
98
|
-
<button class="micl-button-text-s"
|
|
97
|
+
<button class="micl-button-text-s" autofocus>Cancel</button>
|
|
99
98
|
<button class="micl-button-text-s" value="dodelete">Delete</button>
|
|
100
99
|
</form>
|
|
101
100
|
</dialog>
|
|
102
101
|
<button type="button" class="micl-button-outlined-m micl-button--square" commandfor="mydialog3" command="show-modal">Open Modal Dialog</button>
|
|
103
102
|
|
|
104
|
-
<dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover
|
|
103
|
+
<dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover closedby="closerequest" aria-labelledby="mytitle4">
|
|
105
104
|
<div class="micl-dialog__headline">
|
|
106
105
|
<h2 id="mytitle4">Delete selected images?</h2>
|
|
107
106
|
<span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
|
|
108
107
|
</div>
|
|
109
108
|
<div class="micl-dialog__actions">
|
|
110
|
-
<button class="micl-button-text-s"
|
|
111
|
-
<button class="micl-button-text-s"
|
|
109
|
+
<button class="micl-button-text-s" popovertarget="mydialog4" autofocus>Cancel</button>
|
|
110
|
+
<button class="micl-button-text-s">Delete</button>
|
|
112
111
|
</div>
|
|
113
112
|
</dialog>
|
|
114
113
|
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
|
|
115
114
|
|
|
116
|
-
<dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen"
|
|
115
|
+
<dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" closedby="none" aria-labelledby="mytitle5">
|
|
117
116
|
<form method="dialog" class="micl-dialog__headline">
|
|
118
|
-
<button
|
|
117
|
+
<button class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" aria-label="Close">close</button>
|
|
119
118
|
<span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
|
|
120
119
|
<h2 id="mytitle5">Personal info</h2>
|
|
121
120
|
<button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
|
|
@@ -159,11 +158,11 @@
|
|
|
159
158
|
</div>
|
|
160
159
|
</div>
|
|
161
160
|
<form method="dialog" class="micl-dialog__actions">
|
|
162
|
-
<button
|
|
161
|
+
<button class="micl-button-text-s">Cancel</button>
|
|
163
162
|
<button class="micl-button-text-s" value="dosave">Save</button>
|
|
164
163
|
</form>
|
|
165
164
|
</dialog>
|
|
166
|
-
<button type="button" class="micl-button-outlined-m micl-button--square"
|
|
165
|
+
<button type="button" class="micl-button-outlined-m micl-button--square" command="show-modal" commandfor="mydialog5">Open Full-Screen Dialog</button>
|
|
167
166
|
</div>
|
|
168
167
|
</div>
|
|
169
168
|
</div>
|
|
@@ -174,14 +173,13 @@
|
|
|
174
173
|
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
175
174
|
</div>
|
|
176
175
|
<div class="micl-card__content docs-code">
|
|
177
|
-
<pre tabindex="-1"><code><dialog id="id0" class="micl-dialog" style="width:300px"
|
|
176
|
+
<pre tabindex="-1"><code><dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover>
|
|
178
177
|
<div class="micl-dialog__headline">
|
|
179
178
|
<h2>Basic dialog</h2>
|
|
180
179
|
<span class="micl-dialog__supporting-text">A dialog is a type of modal window.</span>
|
|
181
180
|
</div>
|
|
182
181
|
<div class="micl-dialog__actions">
|
|
183
|
-
<button type="button" class="micl-button-text-s" popovertarget="id0">
|
|
184
|
-
<button type="button" class="micl-button-text-s">Action</button>
|
|
182
|
+
<button type="button" class="micl-button-text-s" popovertarget="id0">OK</button>
|
|
185
183
|
</div>
|
|
186
184
|
</dialog></code></pre>
|
|
187
185
|
</div>
|
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=content_copy,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=check_circle,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">
|
|
@@ -270,19 +270,19 @@
|
|
|
270
270
|
<div class="micl-card__content">
|
|
271
271
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
272
272
|
<button type="button" id="btn1" class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" aria-label="Control Panel">settings</button>
|
|
273
|
-
<button type="button" id="btn2" class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn2" command="--micl-toggle" aria-label="Control Panel"
|
|
273
|
+
<button type="button" id="btn2" class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
|
|
274
274
|
</div>
|
|
275
275
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
276
276
|
<button type="button" id="btn3" class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" commandfor="btn3" command="--micl-toggle" aria-label="Control Panel">settings</button>
|
|
277
|
-
<button type="button" id="btn4" class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn4" command="--micl-toggle" aria-label="Control Panel"
|
|
277
|
+
<button type="button" id="btn4" class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
|
|
278
278
|
</div>
|
|
279
279
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
280
280
|
<button type="button" id="btn5" class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" commandfor="btn5" command="--micl-toggle" aria-label="Control Panel">settings</button>
|
|
281
|
-
<button type="button" id="btn6" class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn6" command="--micl-toggle" aria-label="Control Panel"
|
|
281
|
+
<button type="button" id="btn6" class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn6" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
|
|
282
282
|
</div>
|
|
283
283
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
|
|
284
284
|
<button type="button" id="btn7" class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" commandfor="btn7" command="--micl-toggle" aria-label="Control Panel">settings</button>
|
|
285
|
-
<button type="button" id="btn8" class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn8" command="--micl-toggle" aria-label="Control Panel"
|
|
285
|
+
<button type="button" id="btn8" class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" commandfor="btn8" command="--micl-toggle" data-miclicon="settings" data-micliconselected="check_circle" aria-label="Control Panel"></button>
|
|
286
286
|
</div>
|
|
287
287
|
</div>
|
|
288
288
|
</div>
|
|
@@ -294,16 +294,30 @@
|
|
|
294
294
|
<button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
|
|
295
295
|
</div>
|
|
296
296
|
<div class="micl-card__content docs-code">
|
|
297
|
-
<pre tabindex="-1"><code><button
|
|
297
|
+
<pre tabindex="-1"><code><button
|
|
298
|
+
type="button"
|
|
298
299
|
class="micl-iconbutton-standard-s material-symbols-outlined"
|
|
299
300
|
aria-label="Control Panel"
|
|
300
301
|
>settings</button>
|
|
301
302
|
|
|
302
|
-
<button
|
|
303
|
+
<button
|
|
304
|
+
type="button"
|
|
303
305
|
class="micl-iconbutton-filled-m material-symbols-outlined
|
|
304
306
|
micl-button--toggle micl-button--selected"
|
|
305
307
|
aria-label="Control Panel"
|
|
306
|
-
>settings</button>
|
|
308
|
+
>settings</button>
|
|
309
|
+
|
|
310
|
+
<button
|
|
311
|
+
type="button"
|
|
312
|
+
id="mybutton"
|
|
313
|
+
class="micl-iconbutton-outlined-m micl-button--toggle
|
|
314
|
+
micl-button--selected material-symbols-outlined"
|
|
315
|
+
commandfor="mybutton"
|
|
316
|
+
command="--micl-toggle"
|
|
317
|
+
data-miclicon="settings"
|
|
318
|
+
data-micliconselected="check_circle"
|
|
319
|
+
aria-label="Control Panel"
|
|
320
|
+
></button></code></pre>
|
|
307
321
|
</div>
|
|
308
322
|
</div>
|
|
309
323
|
</section>
|
package/docs/index.html
CHANGED
|
@@ -22,33 +22,29 @@
|
|
|
22
22
|
</style>
|
|
23
23
|
</head>
|
|
24
24
|
<body class="micl-window light">
|
|
25
|
-
<dialog id="mynavigationrail" class="micl-navigationrail" closedby="closerequest">
|
|
25
|
+
<dialog id="mynavigationrail" class="micl-navigationrail" style="--md-comp-nav-rail-expanded-top-space:12px" closedby="closerequest">
|
|
26
26
|
<div class="micl-navigationrail__headline">
|
|
27
27
|
<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" command="close" commandfor="mynavigationrail" aria-label="Close navigation rail">menu_open</button>
|
|
28
28
|
</div>
|
|
29
29
|
<div class="micl-navigationrail__content">
|
|
30
|
-
<
|
|
31
|
-
<label for="item1" class="micl-navigationrail__item" tabindex="0">
|
|
30
|
+
<a href="#" class="micl-navigationrail__item" tabindex="0">
|
|
32
31
|
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
|
|
33
32
|
<span class="micl-navigationrail__text">Inbox</span>
|
|
34
|
-
<span class="micl-badge" style="position-anchor:--inbox">97</span>
|
|
35
|
-
</
|
|
36
|
-
<
|
|
37
|
-
<label for="item2" class="micl-navigationrail__item" tabindex="0">
|
|
33
|
+
<span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-inline-offset:-16px">97</span>
|
|
34
|
+
</a>
|
|
35
|
+
<a href="#" class="micl-navigationrail__item" tabindex="0">
|
|
38
36
|
<span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
|
|
39
37
|
<span class="micl-navigationrail__text">Outbox</span>
|
|
40
|
-
</
|
|
41
|
-
<
|
|
42
|
-
<label for="item3" class="micl-navigationrail__item" tabindex="0">
|
|
38
|
+
</a>
|
|
39
|
+
<a href="#" class="micl-navigationrail__item" tabindex="0">
|
|
43
40
|
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
|
|
44
41
|
<span class="micl-navigationrail__text">Favorites</span>
|
|
45
|
-
<span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
|
|
46
|
-
</
|
|
47
|
-
<
|
|
48
|
-
<label for="item4" class="micl-navigationrail__item" tabindex="0">
|
|
42
|
+
<span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-inline-offset:-16px"></span>
|
|
43
|
+
</a>
|
|
44
|
+
<a href="#" class="micl-navigationrail__item" tabindex="0">
|
|
49
45
|
<span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
|
|
50
46
|
<span class="micl-navigationrail__text">Trash</span>
|
|
51
|
-
</
|
|
47
|
+
</a>
|
|
52
48
|
</div>
|
|
53
49
|
</dialog>
|
|
54
50
|
|
|
@@ -125,7 +121,7 @@
|
|
|
125
121
|
</div>
|
|
126
122
|
|
|
127
123
|
<div class="micl-card-outlined">
|
|
128
|
-
<img class="micl-card__image" alt="city" src="card-city.webp">
|
|
124
|
+
<img class="micl-card__image" alt="city" src="card-city.webp" aria-hidden="true">
|
|
129
125
|
<div class="micl-card__headline-l">
|
|
130
126
|
<h2>Card</h2>
|
|
131
127
|
</div>
|
|
@@ -196,7 +192,7 @@
|
|
|
196
192
|
</span>
|
|
197
193
|
</li>
|
|
198
194
|
<li class="micl-list-item-three">
|
|
199
|
-
<span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
|
|
195
|
+
<span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center" aria-hidden="true"></span>
|
|
200
196
|
<span class="micl-list-item__text">
|
|
201
197
|
<span class="micl-list-item__headline">Three-line list item</span>
|
|
202
198
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
@@ -249,7 +245,7 @@
|
|
|
249
245
|
<div class="micl-timepicker__dial"></div>
|
|
250
246
|
</div>
|
|
251
247
|
<div class="micl-dialog__actions">
|
|
252
|
-
<button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-
|
|
248
|
+
<button type="button" id="btn" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="keyboard" data-micliconselected="schedule"></button>
|
|
253
249
|
<div>
|
|
254
250
|
<button class="micl-button-text-s" value="">Cancel</button>
|
|
255
251
|
<button class="micl-button-text-s" value="OK">OK</button>
|
|
@@ -385,6 +381,7 @@
|
|
|
385
381
|
<p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
|
|
386
382
|
<p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
|
|
387
383
|
<p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
|
|
384
|
+
<p><a href="snackbar.html" class="md-sys-typescale-body-large">Snackbars</a></p>
|
|
388
385
|
<p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
|
|
389
386
|
<p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
|
|
390
387
|
<p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
|
|
@@ -395,8 +392,24 @@
|
|
|
395
392
|
</div>
|
|
396
393
|
</section>
|
|
397
394
|
</main>
|
|
395
|
+
<div id="mysnackbar" class="micl-snackbar" popover data-micldelay="7000" role="status" aria-atomic="true">
|
|
396
|
+
<span class="micl-snackbar__supporting-text">This is the Snackbar component</span>
|
|
397
|
+
<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysnackbar" popovertargetaction="hide">close</button>
|
|
398
|
+
</div>
|
|
398
399
|
|
|
399
400
|
<script src="micl.js"></script>
|
|
400
401
|
<script src="docs.js"></script>
|
|
402
|
+
<script>
|
|
403
|
+
const loaded = () => {
|
|
404
|
+
document.removeEventListener('DOMContentLoaded', loaded);
|
|
405
|
+
document.querySelector('#mysnackbar')?.showPopover();
|
|
406
|
+
};
|
|
407
|
+
if (document.readyState !== 'loading') {
|
|
408
|
+
document.querySelector('#mysnackbar')?.showPopover();
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
document.addEventListener('DOMContentLoaded', loaded);
|
|
412
|
+
}
|
|
413
|
+
</script>
|
|
401
414
|
</body>
|
|
402
415
|
</html>
|