material-inspired-component-library 3.1.0 → 4.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 +12 -5
- package/components/README.md +1 -1
- package/components/accordion/README.md +29 -5
- package/components/alert/README.md +76 -0
- package/components/alert/index.scss +1 -0
- package/components/appbar/README.md +9 -4
- package/components/appbar/index.scss +1 -1
- package/components/badge/README.md +8 -3
- package/components/badge/index.scss +1 -0
- package/components/bottomsheet/README.md +8 -3
- package/components/button/README.md +8 -3
- package/components/button/index.scss +7 -0
- package/components/card/README.md +10 -4
- package/components/card/index.scss +1 -1
- package/components/checkbox/README.md +8 -3
- package/components/checkbox/index.scss +2 -0
- package/components/dialog/README.md +8 -3
- package/components/dialog/index.scss +1 -0
- package/components/divider/README.md +8 -3
- package/components/divider/index.scss +2 -2
- package/components/iconbutton/README.md +8 -3
- package/components/iconbutton/index.scss +3 -1
- package/components/list/README.md +26 -19
- package/components/list/index.scss +95 -68
- package/components/menu/README.md +9 -3
- package/components/menu/index.scss +6 -18
- package/components/navigationrail/README.md +8 -3
- package/components/navigationrail/index.scss +1 -0
- package/components/radio/README.md +8 -3
- package/components/radio/index.scss +2 -0
- package/components/select/README.md +10 -5
- package/components/select/index.scss +2 -3
- package/components/sidesheet/README.md +21 -22
- package/components/sidesheet/index.scss +15 -16
- package/components/slider/README.md +8 -3
- package/components/slider/index.scss +1 -0
- package/components/stepper/README.md +190 -0
- package/components/stepper/index.scss +93 -14
- package/components/stepper/index.ts +138 -120
- package/components/switch/README.md +8 -3
- package/components/switch/index.scss +2 -0
- package/components/textfield/README.md +8 -3
- package/components/textfield/index.ts +8 -40
- package/dist/alert.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/components/textfield/index.d.ts +0 -1
- package/dist/dialog.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/foundations/form/index.d.ts +5 -0
- 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/navigationrail.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/stepper.css +1 -1
- package/dist/switch.css +1 -1
- package/docs/accordion.html +31 -17
- package/docs/alert.html +3 -8
- package/docs/bottomsheet.html +2 -2
- package/docs/button.html +2 -2
- package/docs/card.html +7 -7
- package/docs/checkbox.html +2 -2
- package/docs/dialog.html +2 -2
- package/docs/divider.html +8 -8
- package/docs/iconbutton.html +2 -2
- package/docs/index.html +53 -39
- package/docs/list.html +54 -46
- package/docs/menu.html +4 -3
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/radio.html +2 -2
- package/docs/select.html +2 -2
- package/docs/sidesheet.html +5 -4
- package/docs/slider.html +2 -2
- package/docs/stepper.html +318 -0
- package/docs/switch.html +8 -4
- package/docs/textfield.html +2 -2
- package/foundations/form/index.ts +174 -0
- package/{layout → foundations/layout}/README.md +5 -0
- package/{layout → foundations/layout}/index.scss +1 -1
- package/micl.ts +1 -3
- package/package.json +4 -4
- package/styles.scss +1 -1
- package/webpack.config.js +1 -1
package/docs/index.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
|
|
7
7
|
<title>MICL Showcase</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=close,dark_mode,delete,edit,favorite,globe,inbox,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,share&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">
|
|
@@ -128,39 +128,48 @@
|
|
|
128
128
|
<h2>Card</h2>
|
|
129
129
|
</div>
|
|
130
130
|
<span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
|
|
131
|
-
<div class="micl-card__content"
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
</span>
|
|
146
|
-
</li>
|
|
147
|
-
<li class="micl-list-item-three">
|
|
148
|
-
<a href="https://www.nytimes.com" tabindex="-1">
|
|
149
|
-
<span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
|
|
131
|
+
<div class="micl-card__content">
|
|
132
|
+
<div class="micl-alert-outlined" role="alert">
|
|
133
|
+
<span class="micl-alert__icon material-symbols-outlined">error</span>
|
|
134
|
+
<div class="micl-alert__text">
|
|
135
|
+
<h4>This is an alert</h4>
|
|
136
|
+
<span class="micl-alert__supporting-text">An error has occurred</span>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
<div style="display:flex;justify-content:space-between;padding-block-start:16px">
|
|
140
|
+
<button type="button" class="micl-button-filled-s">Action</button>
|
|
141
|
+
<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
|
|
142
|
+
<nav id="mymenu" class="micl-menu" popover>
|
|
143
|
+
<ul class="micl-list">
|
|
144
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
150
145
|
<span class="micl-list-item__text">
|
|
151
|
-
<span class="micl-list-item__headline">
|
|
152
|
-
<span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
|
|
146
|
+
<span class="micl-list-item__headline">Menu item without graphics</span>
|
|
153
147
|
</span>
|
|
154
|
-
</
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
</
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
148
|
+
</li>
|
|
149
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
150
|
+
<span class="micl-list-item__icon material-symbols-outlined">globe</span>
|
|
151
|
+
<span class="micl-list-item__text">
|
|
152
|
+
<span class="micl-list-item__headline">Menu item with an icon</span>
|
|
153
|
+
</span>
|
|
154
|
+
</li>
|
|
155
|
+
<li class="micl-list-item-three">
|
|
156
|
+
<a href="https://www.nytimes.com" tabindex="-1">
|
|
157
|
+
<span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
|
|
158
|
+
<span class="micl-list-item__text">
|
|
159
|
+
<span class="micl-list-item__headline">The New York Times</span>
|
|
160
|
+
<span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
|
|
161
|
+
</span>
|
|
162
|
+
</a>
|
|
163
|
+
</li>
|
|
164
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
165
|
+
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
|
|
166
|
+
<span class="micl-list-item__text">
|
|
167
|
+
<span class="micl-list-item__headline">Item with an image</span>
|
|
168
|
+
</span>
|
|
169
|
+
</li>
|
|
170
|
+
</ul>
|
|
171
|
+
</nav>
|
|
172
|
+
</div>
|
|
164
173
|
</div>
|
|
165
174
|
</div>
|
|
166
175
|
</div>
|
|
@@ -170,21 +179,21 @@
|
|
|
170
179
|
<h2>Lists</h2>
|
|
171
180
|
</div>
|
|
172
181
|
<div class="micl-card__content">
|
|
173
|
-
<ul class="micl-list"
|
|
174
|
-
<li class="micl-list-item-one"
|
|
182
|
+
<ul class="micl-list" role="listbox">
|
|
183
|
+
<li class="micl-list-item-one">
|
|
175
184
|
<span class="material-symbols-outlined micl-list-item__icon">person</span>
|
|
176
185
|
<span class="micl-list-item__text">
|
|
177
186
|
<span class="micl-list-item__headline">One-line list item</span>
|
|
178
187
|
</span>
|
|
179
188
|
</li>
|
|
180
|
-
<li class="micl-list-item-two"
|
|
189
|
+
<li class="micl-list-item-two">
|
|
181
190
|
<span class="material-symbols-outlined micl-list-item__icon">globe</span>
|
|
182
191
|
<span class="micl-list-item__text">
|
|
183
192
|
<span class="micl-list-item__headline">Two-line list item</span>
|
|
184
193
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
185
194
|
</span>
|
|
186
195
|
</li>
|
|
187
|
-
<li class="micl-list-item-three"
|
|
196
|
+
<li class="micl-list-item-three">
|
|
188
197
|
<span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
|
|
189
198
|
<span class="micl-list-item__text">
|
|
190
199
|
<span class="micl-list-item__headline">Three-line list item</span>
|
|
@@ -193,29 +202,32 @@
|
|
|
193
202
|
</li>
|
|
194
203
|
</ul>
|
|
195
204
|
|
|
196
|
-
<div class="micl-list"
|
|
205
|
+
<div class="micl-list" role="listbox">
|
|
197
206
|
<details name="accordion">
|
|
198
207
|
<summary class="micl-list-item-two">
|
|
199
208
|
<span class="micl-list-item__text">
|
|
200
209
|
<span class="micl-list-item__headline">Accordion item 1</span>
|
|
201
210
|
<span class="micl-list-item__supporting-text">Click to open</span>
|
|
202
211
|
</span>
|
|
212
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
203
213
|
</summary>
|
|
204
|
-
<div class="micl-list-item__content" style="padding-block
|
|
214
|
+
<div class="micl-list-item__content" style="padding-block:16px">
|
|
205
215
|
<div class="micl-textfield-filled">
|
|
206
216
|
<label for="tf1">Name</label>
|
|
207
217
|
<input type="text" id="tf1" value="Filled text field">
|
|
208
218
|
</div>
|
|
209
219
|
</div>
|
|
210
220
|
</details>
|
|
221
|
+
<hr class="micl-divider">
|
|
211
222
|
<details name="accordion">
|
|
212
223
|
<summary class="micl-list-item-two" tabindex="-1">
|
|
213
224
|
<span class="micl-list-item__text">
|
|
214
225
|
<span class="micl-list-item__headline">Accordion item 2</span>
|
|
215
226
|
<span class="micl-list-item__supporting-text">Click to open</span>
|
|
216
227
|
</span>
|
|
228
|
+
<span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
|
|
217
229
|
</summary>
|
|
218
|
-
<div class="micl-list-item__content" style="padding-block
|
|
230
|
+
<div class="micl-list-item__content" style="padding-block:16px">
|
|
219
231
|
<div class="micl-textfield-filled">
|
|
220
232
|
<label for="tf2">Date</label>
|
|
221
233
|
<input type="date" id="tf2" value="">
|
|
@@ -332,6 +344,7 @@
|
|
|
332
344
|
</div>
|
|
333
345
|
<div class="micl-card__content" style="column-count:2;padding-block-start:16px">
|
|
334
346
|
<p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
|
|
347
|
+
<p><a href="alert.html" class="md-sys-typescale-body-large">Alerts</a></p>
|
|
335
348
|
<p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
|
|
336
349
|
<p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
|
|
337
350
|
<p><a href="card.html" class="md-sys-typescale-body-large">Cards</a></p>
|
|
@@ -346,6 +359,7 @@
|
|
|
346
359
|
<p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
|
|
347
360
|
<p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
|
|
348
361
|
<p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
|
|
362
|
+
<p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
|
|
349
363
|
<p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
|
|
350
364
|
<p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
|
|
351
365
|
</div>
|
package/docs/list.html
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<main class="micl-body micl-body--stacked-to-extralarge">
|
|
22
22
|
<section class="micl-pane">
|
|
23
23
|
<header class="micl-appbar">
|
|
24
|
-
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-
|
|
24
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
|
|
25
25
|
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
26
26
|
</a>
|
|
27
27
|
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
@@ -35,23 +35,23 @@
|
|
|
35
35
|
<div class="micl-pane__column">
|
|
36
36
|
<div class="micl-card-elevated">
|
|
37
37
|
<div class="micl-card__content">
|
|
38
|
-
<ul class="micl-list"
|
|
39
|
-
<li class="micl-list-item-one"
|
|
38
|
+
<ul class="micl-list">
|
|
39
|
+
<li class="micl-list-item-one">
|
|
40
40
|
<span class="micl-list-item__text">
|
|
41
41
|
<span class="micl-list-item__headline">Headline</span>
|
|
42
42
|
</span>
|
|
43
43
|
</li>
|
|
44
44
|
</ul>
|
|
45
|
-
<ul class="micl-list"
|
|
46
|
-
<li class="micl-list-item-two"
|
|
45
|
+
<ul class="micl-list">
|
|
46
|
+
<li class="micl-list-item-two">
|
|
47
47
|
<span class="micl-list-item__text">
|
|
48
48
|
<span class="micl-list-item__headline">Headline</span>
|
|
49
49
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
50
50
|
</span>
|
|
51
51
|
</li>
|
|
52
52
|
</ul>
|
|
53
|
-
<ul class="micl-list"
|
|
54
|
-
<li class="micl-list-item-three"
|
|
53
|
+
<ul class="micl-list">
|
|
54
|
+
<li class="micl-list-item-three">
|
|
55
55
|
<span class="micl-list-item__text">
|
|
56
56
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
57
57
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</span>
|
|
65
65
|
</li>
|
|
66
66
|
</ul>
|
|
67
|
-
<ul class="micl-list"
|
|
67
|
+
<ul class="micl-list">
|
|
68
68
|
<li class="micl-list-item-one" tabindex="0">
|
|
69
69
|
<span class="material-symbols-outlined micl-list-item__icon">settings</span>
|
|
70
70
|
<span class="micl-list-item__text">
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
<span class="material-symbols-outlined micl-list-item__icon">more_horiz</span>
|
|
74
74
|
</li>
|
|
75
75
|
</ul>
|
|
76
|
-
<ul class="micl-list"
|
|
76
|
+
<ul class="micl-list">
|
|
77
77
|
<li class="micl-list-item-two" tabindex="0">
|
|
78
78
|
<span class="material-symbols-outlined micl-list-item__icon">person</span>
|
|
79
79
|
<span class="micl-list-item__text">
|
|
@@ -85,18 +85,24 @@
|
|
|
85
85
|
</ul>
|
|
86
86
|
<ul class="micl-list" role="listbox">
|
|
87
87
|
<li class="micl-list-item-three" tabindex="0">
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
<span class="micl-list-
|
|
91
|
-
|
|
92
|
-
|
|
88
|
+
<label>
|
|
89
|
+
<span class="material-symbols-outlined micl-list-item__icon">search</span>
|
|
90
|
+
<span class="micl-list-item__text">
|
|
91
|
+
<span id="hd1" class="micl-list-item__headline">Headline 1</span>
|
|
92
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
93
|
+
</span>
|
|
94
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd1">
|
|
95
|
+
</label>
|
|
93
96
|
</li>
|
|
94
97
|
<li class="micl-list-item-three">
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
<span class="micl-list-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
<label>
|
|
99
|
+
<span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
|
|
100
|
+
<span class="micl-list-item__text">
|
|
101
|
+
<span id="hd2" class="micl-list-item__headline">Headline 2</span>
|
|
102
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
103
|
+
</span>
|
|
104
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd2">
|
|
105
|
+
</label>
|
|
100
106
|
</li>
|
|
101
107
|
</ul>
|
|
102
108
|
</div>
|
|
@@ -105,16 +111,16 @@
|
|
|
105
111
|
<div class="micl-pane__column">
|
|
106
112
|
<div class="micl-card-filled">
|
|
107
113
|
<div class="micl-card__content">
|
|
108
|
-
<ul class="micl-list"
|
|
109
|
-
<li class="micl-list-item-one"
|
|
114
|
+
<ul class="micl-list">
|
|
115
|
+
<li class="micl-list-item-one">
|
|
110
116
|
<span class="micl-list-item__avatar">3</span>
|
|
111
117
|
<span class="micl-list-item__text">
|
|
112
118
|
<span class="micl-list-item__headline">Headline</span>
|
|
113
119
|
</span>
|
|
114
120
|
</li>
|
|
115
121
|
</ul>
|
|
116
|
-
<ul class="micl-list"
|
|
117
|
-
<li class="micl-list-item-two"
|
|
122
|
+
<ul class="micl-list">
|
|
123
|
+
<li class="micl-list-item-two">
|
|
118
124
|
<span class="micl-list-item__avatar">17</span>
|
|
119
125
|
<span class="micl-list-item__text">
|
|
120
126
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -122,7 +128,7 @@
|
|
|
122
128
|
</span>
|
|
123
129
|
</li>
|
|
124
130
|
</ul>
|
|
125
|
-
<ul class="micl-list"
|
|
131
|
+
<ul class="micl-list">
|
|
126
132
|
<li class="micl-list-item-three" tabindex="0">
|
|
127
133
|
<a href="https://www.thetimes.com/" tabindex="-1">
|
|
128
134
|
<span class="micl-list-item__avatar">T</span>
|
|
@@ -140,8 +146,8 @@
|
|
|
140
146
|
</span>
|
|
141
147
|
</li>
|
|
142
148
|
</ul>
|
|
143
|
-
<ul class="micl-list"
|
|
144
|
-
<li class="micl-list-item-one"
|
|
149
|
+
<ul class="micl-list">
|
|
150
|
+
<li class="micl-list-item-one">
|
|
145
151
|
<span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
|
|
146
152
|
<span class="micl-list-item__text">
|
|
147
153
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -161,16 +167,16 @@
|
|
|
161
167
|
</label>
|
|
162
168
|
</li>
|
|
163
169
|
</ul>
|
|
164
|
-
<ul class="micl-list"
|
|
165
|
-
<li class="micl-list-item-three"
|
|
166
|
-
<span class="micl-list-item__image" style="background-image:url(card-cabinet.webp)"></span>
|
|
170
|
+
<ul class="micl-list">
|
|
171
|
+
<li class="micl-list-item-three">
|
|
172
|
+
<span class="micl-list-item__image" style="background-image:url(card-cabinet.webp);border-radius:16px"></span>
|
|
167
173
|
<span class="micl-list-item__text">
|
|
168
174
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
169
175
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
170
176
|
</span>
|
|
171
177
|
</li>
|
|
172
178
|
<li class="micl-list-item-three">
|
|
173
|
-
<span class="micl-list-item__image" style="background-image:url(card-awards.webp)"></span>
|
|
179
|
+
<span class="micl-list-item__image" style="background-image:url(card-awards.webp);border-radius:16px"></span>
|
|
174
180
|
<span class="micl-list-item__text">
|
|
175
181
|
<span class="micl-list-item__headline">Headline 2</span>
|
|
176
182
|
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
@@ -181,10 +187,10 @@
|
|
|
181
187
|
</div>
|
|
182
188
|
</div>
|
|
183
189
|
<div class="micl-pane__column">
|
|
184
|
-
<div class="micl-card-
|
|
190
|
+
<div class="micl-card-elevated">
|
|
185
191
|
<div class="micl-card__content">
|
|
186
|
-
<ul class="micl-list"
|
|
187
|
-
<li class="micl-list-item-one"
|
|
192
|
+
<ul class="micl-list">
|
|
193
|
+
<li class="micl-list-item-one">
|
|
188
194
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-city.webp)"></span>
|
|
189
195
|
<span class="micl-list-item__text">
|
|
190
196
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -196,21 +202,22 @@
|
|
|
196
202
|
<label>
|
|
197
203
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
198
204
|
<span class="micl-list-item__text">
|
|
199
|
-
<span id="
|
|
205
|
+
<span id="hd3" class="micl-list-item__headline">Headline</span>
|
|
200
206
|
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
201
207
|
</span>
|
|
202
|
-
<input type="checkbox" id="
|
|
208
|
+
<input type="checkbox" id="cb3" class="micl-checkbox" value="c1" tabindex="-1" aria-labelledby="hd3">
|
|
203
209
|
</label>
|
|
204
210
|
</li>
|
|
205
211
|
</ul>
|
|
206
|
-
<ul class="micl-list
|
|
207
|
-
<li class="micl-list-item-three"
|
|
212
|
+
<ul class="micl-list">
|
|
213
|
+
<li class="micl-list-item-three">
|
|
208
214
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-cabinet.webp)"></span>
|
|
209
215
|
<span class="micl-list-item__text">
|
|
210
216
|
<span class="micl-list-item__headline">Headline 1</span>
|
|
211
217
|
<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>
|
|
212
218
|
</span>
|
|
213
219
|
</li>
|
|
220
|
+
<li role="separator" class="micl-divider"></li>
|
|
214
221
|
<li class="micl-list-item-three">
|
|
215
222
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
|
|
216
223
|
<span class="micl-list-item__text">
|
|
@@ -219,23 +226,24 @@
|
|
|
219
226
|
</span>
|
|
220
227
|
</li>
|
|
221
228
|
</ul>
|
|
222
|
-
<ul class="micl-list
|
|
229
|
+
<ul class="micl-list" role="listbox">
|
|
223
230
|
<li class="micl-list-item-three" tabindex="0">
|
|
224
231
|
<label>
|
|
225
232
|
<span class="micl-list-item__text">
|
|
226
|
-
<span id="
|
|
233
|
+
<span id="hd4" class="micl-list-item__headline">Headline 1</span>
|
|
227
234
|
<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>
|
|
228
235
|
</span>
|
|
229
|
-
<input type="checkbox" id="
|
|
236
|
+
<input type="checkbox" id="cb4" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd4">
|
|
230
237
|
</label>
|
|
231
238
|
</li>
|
|
239
|
+
<li role="separator" class="micl-divider"></li>
|
|
232
240
|
<li class="micl-list-item-three">
|
|
233
241
|
<label>
|
|
234
242
|
<span class="micl-list-item__text">
|
|
235
|
-
<span id="
|
|
243
|
+
<span id="hd5" class="micl-list-item__headline">Headline 2</span>
|
|
236
244
|
<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
245
|
</span>
|
|
238
|
-
<input type="checkbox" id="
|
|
246
|
+
<input type="checkbox" id="cb5" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd5">
|
|
239
247
|
</label>
|
|
240
248
|
</li>
|
|
241
249
|
</ul>
|
|
@@ -250,9 +258,9 @@
|
|
|
250
258
|
<h2>Code example</h2>
|
|
251
259
|
</div>
|
|
252
260
|
<div class="micl-card__content docs-code">
|
|
253
|
-
<pre><code>
|
|
254
|
-
<ul class="micl-list"
|
|
255
|
-
<li class="micl-list-item-two"
|
|
261
|
+
<pre tabindex="-1"><code>
|
|
262
|
+
<ul class="micl-list">
|
|
263
|
+
<li class="micl-list-item-two">
|
|
256
264
|
<span class="micl-list-item__avatar">17</span>
|
|
257
265
|
<span class="micl-list-item__text">
|
|
258
266
|
<span class="micl-list-item__headline">Headline</span>
|
|
@@ -261,7 +269,7 @@
|
|
|
261
269
|
</li>
|
|
262
270
|
</ul>
|
|
263
271
|
|
|
264
|
-
<ul class="micl-list"
|
|
272
|
+
<ul class="micl-list">
|
|
265
273
|
<li class="micl-list-item-two" tabindex="0">
|
|
266
274
|
<label>
|
|
267
275
|
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
package/docs/menu.html
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<main class="micl-body">
|
|
24
24
|
<section class="micl-pane">
|
|
25
25
|
<header class="micl-appbar">
|
|
26
|
-
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-
|
|
26
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
|
|
27
27
|
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
28
28
|
</a>
|
|
29
29
|
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
<span class="micl-list-item__supporting-text">Change everything in the system</span>
|
|
93
93
|
</span>
|
|
94
94
|
</li>
|
|
95
|
-
<li class="micl-
|
|
95
|
+
<li role="separator" class="micl-divider"></li>
|
|
96
|
+
<li class="micl-list-item-two">
|
|
96
97
|
<span class="micl-list-item__text">
|
|
97
98
|
<span class="micl-list-item__headline">Contact</span>
|
|
98
99
|
<span class="micl-list-item__supporting-text">Call me!</span>
|
|
@@ -333,7 +334,7 @@
|
|
|
333
334
|
<h2>Code example</h2>
|
|
334
335
|
</div>
|
|
335
336
|
<div class="micl-card__content docs-code">
|
|
336
|
-
<pre><code>
|
|
337
|
+
<pre tabindex="-1"><code>
|
|
337
338
|
<nav id="id0" class="micl-menu" popover>
|
|
338
339
|
<ul class="micl-list">
|
|
339
340
|
<li class="micl-list-item-one" tabindex="0">
|