material-inspired-component-library 2.0.1 → 3.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.
Files changed (76) hide show
  1. package/README.md +14 -0
  2. package/components/README.md +2 -0
  3. package/components/appbar/README.md +94 -0
  4. package/components/appbar/index.scss +216 -0
  5. package/components/button/index.scss +70 -65
  6. package/components/button/index.ts +1 -1
  7. package/components/card/index.scss +1 -1
  8. package/components/checkbox/README.md +9 -0
  9. package/components/checkbox/index.scss +4 -0
  10. package/components/divider/index.scss +10 -10
  11. package/components/iconbutton/index.scss +111 -111
  12. package/components/iconbutton/index.ts +1 -1
  13. package/components/list/README.md +4 -4
  14. package/components/list/index.scss +3 -3
  15. package/components/navigationrail/README.md +11 -11
  16. package/components/navigationrail/index.scss +20 -12
  17. package/components/radio/README.md +13 -4
  18. package/components/radio/index.scss +7 -5
  19. package/components/select/README.md +28 -6
  20. package/components/select/index.scss +56 -10
  21. package/components/textfield/index.scss +3 -9
  22. package/components/textfield/index.ts +29 -22
  23. package/dist/appbar.css +1 -0
  24. package/dist/appbar.js +1 -0
  25. package/dist/bottomsheet.css +1 -1
  26. package/dist/button.css +1 -1
  27. package/dist/card.css +1 -1
  28. package/dist/checkbox.css +1 -1
  29. package/dist/components/textfield/index.d.ts +1 -1
  30. package/dist/dialog.css +1 -1
  31. package/dist/divider.css +1 -1
  32. package/dist/iconbutton.css +1 -1
  33. package/dist/layout.css +1 -0
  34. package/dist/layout.js +1 -0
  35. package/dist/list.css +1 -1
  36. package/dist/menu.css +1 -1
  37. package/dist/micl.css +1 -1
  38. package/dist/micl.js +1 -1
  39. package/dist/navigationrail.css +1 -1
  40. package/dist/radio.css +1 -1
  41. package/dist/select.css +1 -1
  42. package/dist/sidesheet.css +1 -1
  43. package/dist/slider.css +1 -1
  44. package/dist/switch.css +1 -1
  45. package/dist/textfield.css +1 -1
  46. package/docs/accordion.html +298 -254
  47. package/docs/bottomsheet.html +174 -145
  48. package/docs/button.html +210 -182
  49. package/docs/card.html +107 -72
  50. package/docs/checkbox.html +92 -69
  51. package/docs/dialog.html +154 -123
  52. package/docs/divider.html +96 -67
  53. package/docs/docs.css +14 -24
  54. package/docs/docs.js +4 -2
  55. package/docs/iconbutton.html +196 -171
  56. package/docs/index.html +296 -286
  57. package/docs/list.html +260 -216
  58. package/docs/menu.html +260 -220
  59. package/docs/micl.css +1 -1
  60. package/docs/micl.js +1 -1
  61. package/docs/navigationrail.html +36 -34
  62. package/docs/radio.html +93 -72
  63. package/docs/select.html +253 -173
  64. package/docs/sidesheet.html +104 -87
  65. package/docs/slider.html +105 -72
  66. package/docs/switch.html +126 -101
  67. package/docs/textfield.html +181 -138
  68. package/layout/README.md +122 -0
  69. package/layout/index.scss +259 -0
  70. package/micl.ts +1 -1
  71. package/package.json +4 -1
  72. package/styles/shapes.scss +0 -2
  73. package/styles/statelayer.scss +2 -0
  74. package/styles.scss +13 -0
  75. package/webpack.config.js +1 -1
  76. package/styles/layout.scss +0 -74
package/docs/accordion.html CHANGED
@@ -3,281 +3,325 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Accordions">
6
7
  <title>MICL Accordions</title>
7
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,person,search,settings&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,person,search,settings&display=block">
9
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
11
  <link rel="stylesheet" href="micl.css">
11
12
  <link rel="stylesheet" href="docs.css">
12
- <style>
13
- .micl-card__content {
14
- display: flex;
15
- flex-direction: column;
16
- row-gap: 8px;
17
- padding-block: 16px;
18
- }
19
- </style>
20
13
  </head>
21
- <body class="light">
22
- <div class="headline">
23
- <h1 class="md-sys-typescale-emphasized-display-small">Accordions</h1>
24
- <div id="settings-placeholder"></div>
25
- </div>
26
-
27
- <div class="cards">
28
- <div class="micl-card-elevated">
29
- <div class="micl-card__content">
30
- <div class="micl-list" role="listbox">
31
- <details name="accordion1">
32
- <summary class="micl-list-item-one">
33
- <span class="micl-list-item__text">
34
- <span class="micl-list-item__headline">Headline 1</span>
35
- </span>
36
- </summary>
37
- <div class="micl-list-item__content">
38
- <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>
39
- </div>
40
- </details>
41
- <details name="accordion1">
42
- <summary class="micl-list-item-one" tabindex="-1">
43
- <span class="micl-list-item__text">
44
- <span class="micl-list-item__headline">Headline 2</span>
45
- </span>
46
- </summary>
47
- <div class="micl-list-item__content">
48
- <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>
49
- </div>
50
- </details>
14
+ <body class="micl-window light">
15
+ <main class="micl-body micl-body--stacked-to-extralarge">
16
+ <section class="micl-pane">
17
+ <header class="micl-appbar">
18
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
19
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
20
+ </a>
21
+ <div class="micl-appbar__headline micl-appbar__headline--center">
22
+ <h1>Accordions</h1>
23
+ <p class="micl-appbar__subtitle">Showcasing MICL accordions</p>
51
24
  </div>
52
- <div class="micl-list" role="listbox">
53
- <details name="accordion2">
54
- <summary class="micl-list-item-two">
55
- <span class="micl-list-item__text">
56
- <span class="micl-list-item__headline">Marie Curie</span>
57
- <span class="micl-list-item__supporting-text">The name of the employee</span>
58
- </span>
59
- </summary>
60
- <div class="micl-list-item__content" style="padding-block:16px">
61
- <div class="micl-textfield-filled">
62
- <label for="tf1">Name</label>
63
- <input type="text" id="tf1" value="Marie Curie">
25
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
26
+ </header>
27
+
28
+ <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-large">
29
+ <div class="micl-pane__column">
30
+ <div class="micl-card-elevated">
31
+ <div class="micl-card__content">
32
+ <div class="micl-list" role="listbox">
33
+ <details name="accordion1">
34
+ <summary class="micl-list-item-one">
35
+ <span class="micl-list-item__text">
36
+ <span class="micl-list-item__headline">Headline 1</span>
37
+ </span>
38
+ </summary>
39
+ <div class="micl-list-item__content">
40
+ <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>
41
+ </div>
42
+ </details>
43
+ <details name="accordion1">
44
+ <summary class="micl-list-item-one" tabindex="-1">
45
+ <span class="micl-list-item__text">
46
+ <span class="micl-list-item__headline">Headline 2</span>
47
+ </span>
48
+ </summary>
49
+ <div class="micl-list-item__content">
50
+ <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>
51
+ </div>
52
+ </details>
64
53
  </div>
65
- </div>
66
- </details>
67
- <details name="accordion2">
68
- <summary class="micl-list-item-two" tabindex="-1">
69
- <span class="micl-list-item__text">
70
- <span class="micl-list-item__headline">Country</span>
71
- <span class="micl-list-item__supporting-text">The country of residence</span>
72
- </span>
73
- </summary>
74
- <div class="micl-list-item__content" style="padding-block:16px">
75
- <div class="micl-textfield-filled">
76
- <label for="tf2">Country</label>
77
- <input type="text" id="tf2" value="France">
54
+ <div class="micl-list" role="listbox">
55
+ <details name="accordion2">
56
+ <summary class="micl-list-item-two">
57
+ <span class="micl-list-item__text">
58
+ <span class="micl-list-item__headline">Marie Curie</span>
59
+ <span class="micl-list-item__supporting-text">The name of the employee</span>
60
+ </span>
61
+ </summary>
62
+ <div class="micl-list-item__content" style="padding-block:16px">
63
+ <div class="micl-textfield-filled">
64
+ <label for="tf1">Name</label>
65
+ <input type="text" id="tf1" value="Marie Curie">
66
+ </div>
67
+ </div>
68
+ </details>
69
+ <details name="accordion2">
70
+ <summary class="micl-list-item-two" tabindex="-1">
71
+ <span class="micl-list-item__text">
72
+ <span class="micl-list-item__headline">Country</span>
73
+ <span class="micl-list-item__supporting-text">The country of residence</span>
74
+ </span>
75
+ </summary>
76
+ <div class="micl-list-item__content" style="padding-block:16px">
77
+ <div class="micl-textfield-filled">
78
+ <label for="tf2">Country</label>
79
+ <input type="text" id="tf2" value="France">
80
+ </div>
81
+ </div>
82
+ </details>
83
+ </div>
84
+ <div class="micl-list" role="listbox">
85
+ <details name="accordion3">
86
+ <summary class="micl-list-item-three">
87
+ <span class="micl-list-item__text">
88
+ <span class="micl-list-item__headline">Headline 1</span>
89
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
90
+ </span>
91
+ </summary>
92
+ <div class="micl-list-item__content">
93
+ <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>
94
+ </div>
95
+ </details>
96
+ <details name="accordion3">
97
+ <summary class="micl-list-item-three" tabindex="-1">
98
+ <span class="micl-list-item__text">
99
+ <span class="micl-list-item__headline">Headline 2</span>
100
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
101
+ </span>
102
+ </summary>
103
+ <div class="micl-list-item__content">
104
+ <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>
105
+ </div>
106
+ </details>
78
107
  </div>
79
108
  </div>
80
- </details>
81
- </div>
82
- <div class="micl-list" role="listbox">
83
- <details name="accordion3">
84
- <summary class="micl-list-item-three">
85
- <span class="micl-list-item__text">
86
- <span class="micl-list-item__headline">Headline 1</span>
87
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
88
- </span>
89
- </summary>
90
- <div class="micl-list-item__content">
91
- <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>
92
- </div>
93
- </details>
94
- <details name="accordion3">
95
- <summary class="micl-list-item-three" tabindex="-1">
96
- <span class="micl-list-item__text">
97
- <span class="micl-list-item__headline">Headline 2</span>
98
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
99
- </span>
100
- </summary>
101
- <div class="micl-list-item__content">
102
- <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>
103
- </div>
104
- </details>
109
+ </div>
105
110
  </div>
106
- </div>
107
- </div>
108
-
109
- <div class="micl-card-filled">
110
- <div class="micl-card__content">
111
- <div class="micl-list" role="listbox">
112
- <details name="accordion4">
113
- <summary class="micl-list-item-one">
114
- <span class="material-symbols-outlined micl-list-item__icon">search</span>
115
- <span class="micl-list-item__text">
116
- <span class="micl-list-item__headline">Date</span>
117
- </span>
118
- </summary>
119
- <div class="micl-list-item__content" style="padding-block:16px">
120
- <div class="micl-textfield-outlined">
121
- <label for="tf3">Date</label>
122
- <input type="date" id="tf3" value="2025-11-01">
111
+ <div class="micl-pane__column">
112
+ <div class="micl-card-filled">
113
+ <div class="micl-card__content">
114
+ <div class="micl-list" role="listbox">
115
+ <details name="accordion4">
116
+ <summary class="micl-list-item-one">
117
+ <span class="material-symbols-outlined micl-list-item__icon">search</span>
118
+ <span class="micl-list-item__text">
119
+ <span class="micl-list-item__headline">Date</span>
120
+ </span>
121
+ </summary>
122
+ <div class="micl-list-item__content" style="padding-block:16px">
123
+ <div class="micl-textfield-outlined">
124
+ <label for="tf3">Date</label>
125
+ <input type="date" id="tf3" value="2025-11-01">
126
+ </div>
127
+ </div>
128
+ </details>
129
+ <details name="accordion4">
130
+ <summary class="micl-list-item-one" tabindex="-1">
131
+ <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
132
+ <span class="micl-list-item__text">
133
+ <span class="micl-list-item__headline">Time</span>
134
+ </span>
135
+ </summary>
136
+ <div class="micl-list-item__content" style="padding-block:16px">
137
+ <div class="micl-textfield-outlined">
138
+ <label for="tf4">Time</label>
139
+ <input type="time" id="tf4" value="13:22">
140
+ </div>
141
+ </div>
142
+ </details>
123
143
  </div>
124
- </div>
125
- </details>
126
- <details name="accordion4">
127
- <summary class="micl-list-item-one" tabindex="-1">
128
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
129
- <span class="micl-list-item__text">
130
- <span class="micl-list-item__headline">Time</span>
131
- </span>
132
- </summary>
133
- <div class="micl-list-item__content" style="padding-block:16px">
134
- <div class="micl-textfield-outlined">
135
- <label for="tf4">Time</label>
136
- <input type="time" id="tf4" value="13:22">
144
+ <div class="micl-list" role="listbox">
145
+ <details name="accordion5">
146
+ <summary class="micl-list-item-two">
147
+ <span class="material-symbols-outlined micl-list-item__icon">settings</span>
148
+ <span class="micl-list-item__text">
149
+ <span class="micl-list-item__headline">Headline 1</span>
150
+ <span class="micl-list-item__supporting-text">Supporting text 1</span>
151
+ </span>
152
+ </summary>
153
+ <div class="micl-list-item__content">
154
+ <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>
155
+ </div>
156
+ </details>
157
+ <details name="accordion5">
158
+ <summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
159
+ <span class="material-symbols-outlined micl-list-item__icon">person</span>
160
+ <span class="micl-list-item__text">
161
+ <span class="micl-list-item__headline">Headline 2</span>
162
+ <span class="micl-list-item__supporting-text">Supporting text 2</span>
163
+ </span>
164
+ </summary>
165
+ <div class="micl-list-item__content">
166
+ <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>
167
+ </div>
168
+ </details>
169
+ </div>
170
+ <div class="micl-list" role="listbox">
171
+ <details name="accordion6">
172
+ <summary class="micl-list-item-three">
173
+ <span class="material-symbols-outlined micl-list-item__icon">settings</span>
174
+ <span class="micl-list-item__text">
175
+ <span class="micl-list-item__headline">Headline 1</span>
176
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
177
+ </span>
178
+ </summary>
179
+ <div class="micl-list-item__content">
180
+ <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>
181
+ </div>
182
+ </details>
183
+ <details name="accordion6">
184
+ <summary class="micl-list-item-three" tabindex="-1">
185
+ <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
186
+ <span class="micl-list-item__text">
187
+ <span class="micl-list-item__headline">Headline 2</span>
188
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
189
+ </span>
190
+ </summary>
191
+ <div class="micl-list-item__content">
192
+ <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>
193
+ </div>
194
+ </details>
137
195
  </div>
138
196
  </div>
139
- </details>
140
- </div>
141
- <div class="micl-list" role="listbox">
142
- <details name="accordion5">
143
- <summary class="micl-list-item-two">
144
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
145
- <span class="micl-list-item__text">
146
- <span class="micl-list-item__headline">Headline 1</span>
147
- <span class="micl-list-item__supporting-text">Supporting text 1</span>
148
- </span>
149
- </summary>
150
- <div class="micl-list-item__content">
151
- <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>
152
- </div>
153
- </details>
154
- <details name="accordion5">
155
- <summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
156
- <span class="material-symbols-outlined micl-list-item__icon">person</span>
157
- <span class="micl-list-item__text">
158
- <span class="micl-list-item__headline">Headline 2</span>
159
- <span class="micl-list-item__supporting-text">Supporting text 2</span>
160
- </span>
161
- </summary>
162
- <div class="micl-list-item__content">
163
- <p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
164
- </div>
165
- </details>
197
+ </div>
166
198
  </div>
167
- <div class="micl-list" role="listbox">
168
- <details name="accordion6">
169
- <summary class="micl-list-item-three">
170
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
171
- <span class="micl-list-item__text">
172
- <span class="micl-list-item__headline">Headline 1</span>
173
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
174
- </span>
175
- </summary>
176
- <div class="micl-list-item__content">
177
- <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>
178
- </div>
179
- </details>
180
- <details name="accordion6">
181
- <summary class="micl-list-item-three" tabindex="-1">
182
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
183
- <span class="micl-list-item__text">
184
- <span class="micl-list-item__headline">Headline 2</span>
185
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
186
- </span>
187
- </summary>
188
- <div class="micl-list-item__content">
189
- <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>
199
+ <div class="micl-pane__column">
200
+ <div class="micl-card-outlined">
201
+ <div class="micl-card__content">
202
+ <div class="micl-list" role="listbox">
203
+ <details name="accordion7">
204
+ <summary class="micl-list-item-one">
205
+ <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>
206
+ <span class="micl-list-item__text">
207
+ <span class="micl-list-item__headline">Headline 1</span>
208
+ </span>
209
+ <span class="micl-list-item__trailing-text">39</span>
210
+ </summary>
211
+ <div class="micl-list-item__content">
212
+ <p style="font-family:Consolas;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>
213
+ </div>
214
+ </details>
215
+ <details name="accordion7">
216
+ <summary class="micl-list-item-one" tabindex="-1">
217
+ <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>
218
+ <span class="micl-list-item__text">
219
+ <span class="micl-list-item__headline">Headline 2</span>
220
+ </span>
221
+ <span class="micl-list-item__trailing-text">24</span>
222
+ </summary>
223
+ <div class="micl-list-item__content">
224
+ <p style="font-family:cursive;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>
225
+ </div>
226
+ </details>
227
+ </div>
228
+ <div class="micl-list" role="listbox">
229
+ <details name="accordion8">
230
+ <summary class="micl-list-item-two">
231
+ <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>
232
+ <span class="micl-list-item__text">
233
+ <span class="micl-list-item__headline">Headline 1</span>
234
+ <span class="micl-list-item__supporting-text">Supporting text 1</span>
235
+ </span>
236
+ <span class="micl-list-item__trailing-text">waiting</span>
237
+ </summary>
238
+ <div class="micl-list-item__content">
239
+ <p style="font-family:'Courier New';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>
240
+ </div>
241
+ </details>
242
+ <details name="accordion8">
243
+ <summary class="micl-list-item-two" tabindex="-1">
244
+ <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>
245
+ <span class="micl-list-item__text">
246
+ <span class="micl-list-item__headline">Headline 2</span>
247
+ <span class="micl-list-item__supporting-text">Supporting text 2</span>
248
+ </span>
249
+ <span class="micl-list-item__trailing-text">completed</span>
250
+ </summary>
251
+ <div class="micl-list-item__content">
252
+ <p style="font-family:Helvetica;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>
253
+ </div>
254
+ </details>
255
+ </div>
256
+ <div class="micl-list micl-list__divider" role="listbox">
257
+ <details name="accordion9">
258
+ <summary class="micl-list-item-three">
259
+ <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>
260
+ <span class="micl-list-item__text">
261
+ <span class="micl-list-item__headline">Headline 1</span>
262
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
263
+ </span>
264
+ </summary>
265
+ <div class="micl-list-item__content">
266
+ <p style="font-family:fantasy;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
267
+ </div>
268
+ </details>
269
+ <details name="accordion9">
270
+ <summary class="micl-list-item-three" tabindex="-1">
271
+ <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>
272
+ <span class="micl-list-item__text">
273
+ <span class="micl-list-item__headline">Headline 2</span>
274
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
275
+ </span>
276
+ </summary>
277
+ <div class="micl-list-item__content">
278
+ <p style="font-family:Garamond;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>
279
+ </div>
280
+ </details>
281
+ </div>
190
282
  </div>
191
- </details>
283
+ </div>
192
284
  </div>
193
285
  </div>
194
- </div>
195
-
196
- <div class="micl-card-outlined">
197
- <div class="micl-card__content">
198
- <div class="micl-list" role="listbox">
199
- <details name="accordion7">
200
- <summary class="micl-list-item-one">
201
- <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>
202
- <span class="micl-list-item__text">
203
- <span class="micl-list-item__headline">Headline 1</span>
204
- </span>
205
- <span class="micl-list-item__trailing-text">39</span>
206
- </summary>
207
- <div class="micl-list-item__content">
208
- <p style="font-family:Consolas;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>
209
- </div>
210
- </details>
211
- <details name="accordion7">
212
- <summary class="micl-list-item-one" tabindex="-1">
213
- <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>
214
- <span class="micl-list-item__text">
215
- <span class="micl-list-item__headline">Headline 2</span>
216
- </span>
217
- <span class="micl-list-item__trailing-text">24</span>
218
- </summary>
219
- <div class="micl-list-item__content">
220
- <p style="font-family:cursive;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>
221
- </div>
222
- </details>
286
+ </section>
287
+ <section class="micl-pane">
288
+ <div class="micl-card-filled">
289
+ <div class="micl-card__headline-s">
290
+ <h2>Code example</h2>
223
291
  </div>
224
- <div class="micl-list" role="listbox">
225
- <details name="accordion8">
226
- <summary class="micl-list-item-two">
227
- <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>
228
- <span class="micl-list-item__text">
229
- <span class="micl-list-item__headline">Headline 1</span>
230
- <span class="micl-list-item__supporting-text">Supporting text 1</span>
231
- </span>
232
- <span class="micl-list-item__trailing-text">waiting</span>
233
- </summary>
234
- <div class="micl-list-item__content">
235
- <p style="font-family:'Courier New';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>
236
- </div>
237
- </details>
238
- <details name="accordion8">
239
- <summary class="micl-list-item-two" tabindex="-1">
240
- <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>
241
- <span class="micl-list-item__text">
242
- <span class="micl-list-item__headline">Headline 2</span>
243
- <span class="micl-list-item__supporting-text">Supporting text 2</span>
244
- </span>
245
- <span class="micl-list-item__trailing-text">completed</span>
246
- </summary>
247
- <div class="micl-list-item__content">
248
- <p style="font-family:Helvetica;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>
249
- </div>
250
- </details>
251
- </div>
252
- <div class="micl-list micl-list__divider" role="listbox">
253
- <details name="accordion9">
254
- <summary class="micl-list-item-three">
255
- <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>
256
- <span class="micl-list-item__text">
257
- <span class="micl-list-item__headline">Headline 1</span>
258
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
259
- </span>
260
- </summary>
261
- <div class="micl-list-item__content">
262
- <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>
263
- </div>
264
- </details>
265
- <details name="accordion9">
266
- <summary class="micl-list-item-three" tabindex="-1">
267
- <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>
268
- <span class="micl-list-item__text">
269
- <span class="micl-list-item__headline">Headline 2</span>
270
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
271
- </span>
272
- </summary>
273
- <div class="micl-list-item__content">
274
- <p style="font-family:Garamond;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>
275
- </div>
276
- </details>
292
+ <div class="micl-card__content docs-code">
293
+ <pre><code>
294
+ &lt;div class="micl-list" role="listbox"&gt;
295
+ &lt;details name="accordion"&gt;
296
+ &lt;summary class="micl-list-item-two"&gt;
297
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;settings&lt;/span&gt;
298
+ &lt;span class="micl-list-item__text"&gt;
299
+ &lt;span class="micl-list-item__headline"&gt;Headline 1&lt;/span&gt;
300
+ &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 1&lt;/span&gt;
301
+ &lt;/span&gt;
302
+ &lt;/summary&gt;
303
+ &lt;div class="micl-list-item__content"&gt;
304
+ &lt;p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)"&gt;Lorem ipsum.&lt;/p&gt;
305
+ &lt;/div&gt;
306
+ &lt;/details&gt;
307
+ &lt;details name="accordion"&gt;
308
+ &lt;summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1"&gt;
309
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;person&lt;/span&gt;
310
+ &lt;span class="micl-list-item__text"&gt;
311
+ &lt;span class="micl-list-item__headline"&gt;Headline 2&lt;/span&gt;
312
+ &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 2&lt;/span&gt;
313
+ &lt;/span&gt;
314
+ &lt;/summary&gt;
315
+ &lt;div class="micl-list-item__content"&gt;
316
+ &lt;p class="md-sys-typescale-body-medium" style="color:var(--md-sys-color-on-surface)"&gt;Lorem ipsum.&lt;/p&gt;
317
+ &lt;/div&gt;
318
+ &lt;/details&gt;
319
+ &lt;/div&gt;
320
+ </code></pre>
277
321
  </div>
278
322
  </div>
279
- </div>
280
- </div>
323
+ </section>
324
+ </main>
281
325
 
282
326
  <script src="micl.js"></script>
283
327
  <script src="docs.js"></script>