material-inspired-component-library 7.0.2 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/CLAUDE.md +42 -0
  2. package/README.md +6 -0
  3. package/components/accordion/README.md +6 -3
  4. package/components/button/index.scss +10 -6
  5. package/components/card/README.md +4 -0
  6. package/components/card/index.scss +159 -150
  7. package/components/checkbox/index.scss +11 -6
  8. package/components/datepicker/index.ts +9 -9
  9. package/components/dialog/index.scss +5 -6
  10. package/components/iconbutton/index.scss +10 -6
  11. package/components/list/README.md +191 -32
  12. package/components/list/index.scss +256 -190
  13. package/components/list/index.ts +100 -100
  14. package/components/menu/README.md +199 -10
  15. package/components/menu/index.scss +224 -47
  16. package/components/menu/index.ts +74 -37
  17. package/components/navigationrail/index.scss +75 -69
  18. package/components/radio/index.scss +11 -6
  19. package/components/select/README.md +42 -5
  20. package/components/select/index.scss +39 -79
  21. package/components/stepper/index.scss +1 -5
  22. package/components/textfield/index.scss +1 -1
  23. package/components/textfield/index.ts +2 -2
  24. package/dist/alert.css +1 -1
  25. package/dist/appbar.css +1 -1
  26. package/dist/badge.css +1 -1
  27. package/dist/bottomsheet.css +1 -1
  28. package/dist/button.css +1 -1
  29. package/dist/card.css +1 -1
  30. package/dist/checkbox.css +1 -1
  31. package/dist/components/list/index.d.ts +2 -2
  32. package/dist/datepicker.css +1 -1
  33. package/dist/dialog.css +1 -1
  34. package/dist/divider.css +1 -1
  35. package/dist/foundations.css +1 -1
  36. package/dist/iconbutton.css +1 -1
  37. package/dist/list.css +1 -1
  38. package/dist/menu.css +1 -1
  39. package/dist/micl.css +1 -1
  40. package/dist/micl.js +1 -1
  41. package/dist/navigationrail.css +1 -1
  42. package/dist/radio.css +1 -1
  43. package/dist/select.css +1 -1
  44. package/dist/sidesheet.css +1 -1
  45. package/dist/slider.css +1 -1
  46. package/dist/snackbar.css +1 -1
  47. package/dist/stepper.css +1 -1
  48. package/dist/switch.css +1 -1
  49. package/dist/textfield.css +1 -1
  50. package/dist/timepicker.css +1 -1
  51. package/docs/accordion.html +24 -24
  52. package/docs/bottomsheet.html +1 -4
  53. package/docs/dialog.html +1 -1
  54. package/docs/index.html +4 -4
  55. package/docs/list.html +38 -22
  56. package/docs/menu.html +246 -41
  57. package/docs/micl.css +1 -1
  58. package/docs/micl.js +1 -1
  59. package/docs/select.html +68 -19
  60. package/docs/shapes.html +85 -0
  61. package/foundations/index.scss +0 -1
  62. package/micl.ts +6 -1
  63. package/package.json +3 -3
  64. package/styles/README.md +4 -4
  65. package/styles/shapes.scss +81 -0
  66. package/styles/statelayer.scss +10 -0
package/docs/accordion.html CHANGED
@@ -37,18 +37,18 @@
37
37
  <span class="micl-list-item__text">
38
38
  <span class="micl-list-item__headline">Headline 1</span>
39
39
  </span>
40
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
40
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
41
41
  </summary>
42
42
  <div class="micl-list-item__content">
43
43
  <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
44
44
  </div>
45
45
  </details>
46
46
  <details name="accordion1">
47
- <summary class="micl-list-item-one" tabindex="-1">
47
+ <summary class="micl-list-item-one">
48
48
  <span class="micl-list-item__text">
49
49
  <span class="micl-list-item__headline">Headline 2</span>
50
50
  </span>
51
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
51
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
52
52
  </summary>
53
53
  <div class="micl-list-item__content">
54
54
  <p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -62,7 +62,7 @@
62
62
  <span class="micl-list-item__headline">Marie Curie</span>
63
63
  <span class="micl-list-item__supporting-text">The name of the employee</span>
64
64
  </span>
65
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
65
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
66
66
  </summary>
67
67
  <div class="micl-list-item__content" style="padding-block:16px">
68
68
  <div class="micl-textfield-filled">
@@ -72,12 +72,12 @@
72
72
  </div>
73
73
  </details>
74
74
  <details name="accordion2">
75
- <summary class="micl-list-item-two" tabindex="-1">
75
+ <summary class="micl-list-item-two">
76
76
  <span class="micl-list-item__text">
77
77
  <span class="micl-list-item__headline">Country</span>
78
78
  <span class="micl-list-item__supporting-text">The country of residence</span>
79
79
  </span>
80
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
80
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
81
81
  </summary>
82
82
  <div class="micl-list-item__content" style="padding-block:16px">
83
83
  <div class="micl-textfield-filled">
@@ -94,19 +94,19 @@
94
94
  <span class="micl-list-item__headline">Headline 1</span>
95
95
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
96
96
  </span>
97
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
97
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
98
98
  </summary>
99
99
  <div class="micl-list-item__content">
100
100
  <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
101
101
  </div>
102
102
  </details>
103
103
  <details name="accordion3">
104
- <summary class="micl-list-item-three" tabindex="-1">
104
+ <summary class="micl-list-item-three">
105
105
  <span class="micl-list-item__text">
106
106
  <span class="micl-list-item__headline">Headline 2</span>
107
107
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
108
108
  </span>
109
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
109
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
110
110
  </summary>
111
111
  <div class="micl-list-item__content">
112
112
  <p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -118,7 +118,7 @@
118
118
  </div>
119
119
  <div class="micl-pane__column">
120
120
  <div class="micl-card-filled">
121
- <div class="micl-card__content" style="--md-sys-accordion-item-space:4px">
121
+ <div class="micl-card__content" style="--md-comp-accordion-item-space:4px">
122
122
  <div class="micl-list">
123
123
  <details name="accordion4">
124
124
  <summary class="micl-list-item-one">
@@ -126,7 +126,7 @@
126
126
  <span class="micl-list-item__text">
127
127
  <span class="micl-list-item__headline">Date</span>
128
128
  </span>
129
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
129
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
130
130
  </summary>
131
131
  <div class="micl-list-item__content" style="padding-block:16px">
132
132
  <div class="micl-textfield-outlined">
@@ -136,12 +136,12 @@
136
136
  </div>
137
137
  </details>
138
138
  <details name="accordion4">
139
- <summary class="micl-list-item-one" tabindex="-1">
139
+ <summary class="micl-list-item-one">
140
140
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
141
141
  <span class="micl-list-item__text">
142
142
  <span class="micl-list-item__headline">Time</span>
143
143
  </span>
144
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
144
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
145
145
  </summary>
146
146
  <div class="micl-list-item__content" style="padding-block:16px">
147
147
  <div class="micl-textfield-outlined">
@@ -159,7 +159,7 @@
159
159
  <span class="micl-list-item__headline">Headline 1</span>
160
160
  <span class="micl-list-item__supporting-text">Supporting text 1</span>
161
161
  </span>
162
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
162
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
163
163
  </summary>
164
164
  <div class="micl-list-item__content">
165
165
  <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -172,7 +172,7 @@
172
172
  <span class="micl-list-item__headline">Headline 2</span>
173
173
  <span class="micl-list-item__supporting-text">Supporting text 2</span>
174
174
  </span>
175
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
175
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
176
176
  </summary>
177
177
  <div class="micl-list-item__content">
178
178
  <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
@@ -187,20 +187,20 @@
187
187
  <span class="micl-list-item__headline">Headline 1</span>
188
188
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
189
189
  </span>
190
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
190
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
191
191
  </summary>
192
192
  <div class="micl-list-item__content">
193
193
  <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
194
194
  </div>
195
195
  </details>
196
196
  <details name="accordion6">
197
- <summary class="micl-list-item-three" tabindex="-1">
197
+ <summary class="micl-list-item-three">
198
198
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">confirmation_number</span>
199
199
  <span class="micl-list-item__text">
200
200
  <span class="micl-list-item__headline">Headline 2</span>
201
201
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
202
202
  </span>
203
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
203
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
204
204
  </summary>
205
205
  <div class="micl-list-item__content">
206
206
  <p style="color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
@@ -227,7 +227,7 @@
227
227
  </div>
228
228
  </details>
229
229
  <details name="accordion7">
230
- <summary class="micl-list-item-one" tabindex="-1">
230
+ <summary class="micl-list-item-one">
231
231
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg)"></span>
232
232
  <span class="micl-list-item__text">
233
233
  <span class="micl-list-item__headline">Headline 2</span>
@@ -254,7 +254,7 @@
254
254
  </div>
255
255
  </details>
256
256
  <details name="accordion8">
257
- <summary class="micl-list-item-two" tabindex="-1">
257
+ <summary class="micl-list-item-two">
258
258
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg/330px-Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg)"></span>
259
259
  <span class="micl-list-item__text">
260
260
  <span class="micl-list-item__headline">Headline 2</span>
@@ -280,9 +280,9 @@
280
280
  <p style="font-family:fantasy;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
281
281
  </div>
282
282
  </details>
283
- <hr class="micl-divider">
283
+ <hr class="micl-divider-inset">
284
284
  <details name="accordion9">
285
- <summary class="micl-list-item-three" tabindex="-1">
285
+ <summary class="micl-list-item-three">
286
286
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
287
287
  <span class="micl-list-item__text">
288
288
  <span class="micl-list-item__headline">Headline 2</span>
@@ -319,9 +319,9 @@
319
319
  &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
320
320
  &lt;/div&gt;
321
321
  &lt;/details&gt;
322
- &lt;hr class="micl-divider"&gt;
322
+ &lt;hr class="micl-divider-inset"&gt;
323
323
  &lt;details name="accordion"&gt;
324
- &lt;summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1"&gt;
324
+ &lt;summary class="micl-list-item-two micl-list-item--disabled"&gt;
325
325
  &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;person&lt;/span&gt;
326
326
  &lt;span class="micl-list-item__text"&gt;
327
327
  &lt;span class="micl-list-item__headline"&gt;Headline 2&lt;/span&gt;
package/docs/bottomsheet.html CHANGED
@@ -50,9 +50,6 @@
50
50
  flex: 1 1 100%;
51
51
  flex-direction: column;
52
52
  }
53
- .micl-list {
54
- --md-sys-list-item-container-color: var(--md-sys-color-surface-container-low);
55
- }
56
53
  </style>
57
54
  </head>
58
55
  <body class="micl-window light">
@@ -153,7 +150,7 @@
153
150
  <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
154
151
  </div>
155
152
  <div class="micl-bottomsheet__content">
156
- <ul class="micl-list" role="listbox" style="display:flex">
153
+ <ul class="micl-list" role="listbox" style="flex-direction:row">
157
154
  <li class="micl-list-item-one" tabindex="0">
158
155
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
159
156
  <span class="micl-list-item__text">
package/docs/dialog.html CHANGED
@@ -59,7 +59,7 @@
59
59
  </div>
60
60
  <div class="micl-dialog__content">
61
61
  <hr class="micl-divider">
62
- <ul class="micl-list" style="--md-sys-list-item-container-color:transparent;margin-block:8px">
62
+ <ul class="micl-list" style="margin-block:8px">
63
63
  <li class="micl-list-item-one">
64
64
  <span class="micl-list-item__avatar">JH</span>
65
65
  <span class="micl-list-item__text">
package/docs/index.html CHANGED
@@ -130,7 +130,7 @@
130
130
  <div class="micl-alert-outlined" role="alert">
131
131
  <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
132
132
  <div class="micl-alert__text">
133
- <h4>This is an alert</h4>
133
+ <h3>This is an alert</h3>
134
134
  <span class="micl-alert__supporting-text">An error has occurred</span>
135
135
  </div>
136
136
  </div>
@@ -207,7 +207,7 @@
207
207
  <span class="micl-list-item__headline">Accordion item 1</span>
208
208
  <span class="micl-list-item__supporting-text">Click to open</span>
209
209
  </span>
210
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
210
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
211
211
  </summary>
212
212
  <div class="micl-list-item__content" style="padding-block:16px">
213
213
  <div class="micl-textfield-filled">
@@ -223,7 +223,7 @@
223
223
  <span class="micl-list-item__headline">Accordion item 2</span>
224
224
  <span class="micl-list-item__supporting-text">Click to open</span>
225
225
  </span>
226
- <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-label="Open or close accordion panel">keyboard_arrow_down</span>
226
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander">keyboard_arrow_down</span>
227
227
  </summary>
228
228
  <div class="micl-list-item__content" style="padding-block:16px">
229
229
  <div class="micl-textfield-filled">
@@ -333,7 +333,7 @@
333
333
  <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
334
334
  </div>
335
335
  <div class="micl-bottomsheet__content">
336
- <ul class="micl-list" style="--md-sys-list-item-container-color:transparent" role="listbox">
336
+ <ul class="micl-list" role="listbox">
337
337
  <li class="micl-list-item-one" tabindex="0">
338
338
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
339
339
  <span class="micl-list-item__text">
package/docs/list.html CHANGED
@@ -8,11 +8,16 @@
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,content_copy,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,star&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">
15
15
  <style>
16
+ .micl-card__content {
17
+ display: flex;
18
+ flex-direction: column;
19
+ row-gap: 24px;
20
+ }
16
21
  input[type=checkbox].micl-switch {
17
22
  --md-sys-switch-selected-icon: "";
18
23
  --md-sys-switch-unselected-icon: "";
@@ -37,14 +42,18 @@
37
42
  <div class="micl-pane__column">
38
43
  <div class="micl-card-elevated">
39
44
  <div class="micl-card__content">
40
- <ul class="micl-list">
45
+ <ul class="micl-list micl-list--segmented">
41
46
  <li class="micl-list-item-one">
42
47
  <span class="micl-list-item__text">
43
48
  <span class="micl-list-item__headline">Headline</span>
44
49
  </span>
45
50
  </li>
46
- </ul>
47
- <ul class="micl-list">
51
+ <li class="micl-list-item-one">
52
+ <span class="micl-list-item__text">
53
+ <span class="micl-list-item__overline">Overline</span>
54
+ <span class="micl-list-item__headline">Headline</span>
55
+ </span>
56
+ </li>
48
57
  <li class="micl-list-item-two">
49
58
  <span class="micl-list-item__text">
50
59
  <span class="micl-list-item__headline">Headline</span>
@@ -52,7 +61,7 @@
52
61
  </span>
53
62
  </li>
54
63
  </ul>
55
- <ul class="micl-list">
64
+ <ul class="micl-list micl-list--segmented">
56
65
  <li class="micl-list-item-three">
57
66
  <span class="micl-list-item__text">
58
67
  <span class="micl-list-item__headline">Headline 1</span>
@@ -67,6 +76,13 @@
67
76
  </li>
68
77
  </ul>
69
78
  <ul class="micl-list">
79
+ <li class="micl-list-item-one">
80
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">star</span>
81
+ <span class="micl-list-item__text">
82
+ <span class="micl-list-item__overline">Overline</span>
83
+ <span class="micl-list-item__headline">Headline</span>
84
+ </span>
85
+ </li>
70
86
  <li class="micl-list-item-one">
71
87
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
72
88
  <span class="micl-list-item__text">
@@ -74,8 +90,6 @@
74
90
  </span>
75
91
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">more_horiz</span>
76
92
  </li>
77
- </ul>
78
- <ul class="micl-list">
79
93
  <li class="micl-list-item-two" tabindex="0">
80
94
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
81
95
  <span class="micl-list-item__text">
@@ -85,7 +99,7 @@
85
99
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">keyboard_arrow_right</span>
86
100
  </li>
87
101
  </ul>
88
- <ul class="micl-list" role="listbox">
102
+ <ul class="micl-list micl-list--segmented" role="listbox">
89
103
  <li role="option" class="micl-list-item-three" tabindex="0">
90
104
  <label>
91
105
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
@@ -93,7 +107,7 @@
93
107
  <span class="micl-list-item__headline">Headline 1</span>
94
108
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
95
109
  </span>
96
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c2" aria-label="Headline 1">
110
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c2" aria-label="Headline 1" checked>
97
111
  </label>
98
112
  </li>
99
113
  <li role="option" class="micl-list-item-three">
@@ -117,11 +131,10 @@
117
131
  <li class="micl-list-item-one">
118
132
  <span class="micl-list-item__avatar">3</span>
119
133
  <span class="micl-list-item__text">
134
+ <span class="micl-list-item__overline">Overline</span>
120
135
  <span class="micl-list-item__headline">Headline</span>
121
136
  </span>
122
137
  </li>
123
- </ul>
124
- <ul class="micl-list">
125
138
  <li class="micl-list-item-two">
126
139
  <span class="micl-list-item__avatar">17</span>
127
140
  <span class="micl-list-item__text">
@@ -130,7 +143,7 @@
130
143
  </span>
131
144
  </li>
132
145
  </ul>
133
- <ul class="micl-list">
146
+ <ul class="micl-list micl-list--segmented">
134
147
  <li class="micl-list-item-three" tabindex="0">
135
148
  <a href="https://www.thetimes.com/" target="_blank">
136
149
  <span class="micl-list-item__avatar">T</span>
@@ -149,12 +162,14 @@
149
162
  </li>
150
163
  </ul>
151
164
  <ul class="micl-list">
152
- <li class="micl-list-item-one">
153
- <span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
154
- <span class="micl-list-item__text">
155
- <span class="micl-list-item__headline">Headline</span>
156
- </span>
157
- <span class="micl-list-item__trailing-text">100+</span>
165
+ <li class="micl-list-item-one" tabindex="0">
166
+ <button type="button" onclick="alert('This list item acts as an action button')">
167
+ <span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
168
+ <span class="micl-list-item__text">
169
+ <span class="micl-list-item__headline">Headline</span>
170
+ </span>
171
+ <span class="micl-list-item__trailing-text">100+</span>
172
+ </button>
158
173
  </li>
159
174
  </ul>
160
175
  <ul class="micl-list" role="listbox">
@@ -162,8 +177,8 @@
162
177
  <label>
163
178
  <span class="micl-list-item__image" style="background-image:url(card-holiday.webp)"></span>
164
179
  <span class="micl-list-item__text">
180
+ <span class="micl-list-item__overline">Overline</span>
165
181
  <span class="micl-list-item__headline">Headline</span>
166
- <span class="micl-list-item__supporting-text">Supporting text</span>
167
182
  </span>
168
183
  <input type="checkbox" class="micl-switch" id="myswitch" value="c1" aria-label="Headline">
169
184
  </label>
@@ -192,7 +207,7 @@
192
207
  <div class="micl-card-elevated">
193
208
  <div class="micl-card__content">
194
209
  <ul class="micl-list">
195
- <li class="micl-list-item-one">
210
+ <li class="micl-list-item-one micl-list-item--disabled">
196
211
  <span class="micl-list-item__thumbnail" style="background-image:url(card-city.webp)"></span>
197
212
  <span class="micl-list-item__text">
198
213
  <span class="micl-list-item__headline">Headline</span>
@@ -219,7 +234,7 @@
219
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>
220
235
  </span>
221
236
  </li>
222
- <li role="separator" class="micl-divider"></li>
237
+ <li role="separator" class="micl-divider-inset"></li>
223
238
  <li class="micl-list-item-three">
224
239
  <span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
225
240
  <span class="micl-list-item__text">
@@ -238,7 +253,7 @@
238
253
  <input type="checkbox" id="cb4" class="micl-checkbox" value="c2" checked aria-label="Headline 1">
239
254
  </label>
240
255
  </li>
241
- <li role="separator" class="micl-divider" tabindex="-1"></li>
256
+ <li role="separator" class="micl-divider-inset" tabindex="-1"></li>
242
257
  <li role="option" class="micl-list-item-three">
243
258
  <label>
244
259
  <input type="checkbox" id="cb5" class="micl-checkbox" value="c3" aria-label="Headline 2">
@@ -246,6 +261,7 @@
246
261
  <span class="micl-list-item__headline">Headline 2</span>
247
262
  <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
263
  </span>
264
+ <span class="micl-list-item__trailing-text">47</span>
249
265
  </label>
250
266
  </li>
251
267
  </ul>