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.
Files changed (92) hide show
  1. package/README.md +12 -5
  2. package/components/README.md +1 -1
  3. package/components/accordion/README.md +29 -5
  4. package/components/alert/README.md +76 -0
  5. package/components/alert/index.scss +1 -0
  6. package/components/appbar/README.md +9 -4
  7. package/components/appbar/index.scss +1 -1
  8. package/components/badge/README.md +8 -3
  9. package/components/badge/index.scss +1 -0
  10. package/components/bottomsheet/README.md +8 -3
  11. package/components/button/README.md +8 -3
  12. package/components/button/index.scss +7 -0
  13. package/components/card/README.md +10 -4
  14. package/components/card/index.scss +1 -1
  15. package/components/checkbox/README.md +8 -3
  16. package/components/checkbox/index.scss +2 -0
  17. package/components/dialog/README.md +8 -3
  18. package/components/dialog/index.scss +1 -0
  19. package/components/divider/README.md +8 -3
  20. package/components/divider/index.scss +2 -2
  21. package/components/iconbutton/README.md +8 -3
  22. package/components/iconbutton/index.scss +3 -1
  23. package/components/list/README.md +26 -19
  24. package/components/list/index.scss +95 -68
  25. package/components/menu/README.md +9 -3
  26. package/components/menu/index.scss +6 -18
  27. package/components/navigationrail/README.md +8 -3
  28. package/components/navigationrail/index.scss +1 -0
  29. package/components/radio/README.md +8 -3
  30. package/components/radio/index.scss +2 -0
  31. package/components/select/README.md +10 -5
  32. package/components/select/index.scss +2 -3
  33. package/components/sidesheet/README.md +21 -22
  34. package/components/sidesheet/index.scss +15 -16
  35. package/components/slider/README.md +8 -3
  36. package/components/slider/index.scss +1 -0
  37. package/components/stepper/README.md +190 -0
  38. package/components/stepper/index.scss +93 -14
  39. package/components/stepper/index.ts +138 -120
  40. package/components/switch/README.md +8 -3
  41. package/components/switch/index.scss +2 -0
  42. package/components/textfield/README.md +8 -3
  43. package/components/textfield/index.ts +8 -40
  44. package/dist/alert.css +1 -1
  45. package/dist/badge.css +1 -1
  46. package/dist/button.css +1 -1
  47. package/dist/card.css +1 -1
  48. package/dist/checkbox.css +1 -1
  49. package/dist/components/textfield/index.d.ts +0 -1
  50. package/dist/dialog.css +1 -1
  51. package/dist/divider.css +1 -1
  52. package/dist/foundations/form/index.d.ts +5 -0
  53. package/dist/iconbutton.css +1 -1
  54. package/dist/list.css +1 -1
  55. package/dist/menu.css +1 -1
  56. package/dist/micl.css +1 -1
  57. package/dist/micl.js +1 -1
  58. package/dist/navigationrail.css +1 -1
  59. package/dist/radio.css +1 -1
  60. package/dist/select.css +1 -1
  61. package/dist/sidesheet.css +1 -1
  62. package/dist/slider.css +1 -1
  63. package/dist/stepper.css +1 -1
  64. package/dist/switch.css +1 -1
  65. package/docs/accordion.html +31 -17
  66. package/docs/alert.html +3 -8
  67. package/docs/bottomsheet.html +2 -2
  68. package/docs/button.html +2 -2
  69. package/docs/card.html +7 -7
  70. package/docs/checkbox.html +2 -2
  71. package/docs/dialog.html +2 -2
  72. package/docs/divider.html +8 -8
  73. package/docs/iconbutton.html +2 -2
  74. package/docs/index.html +53 -39
  75. package/docs/list.html +54 -46
  76. package/docs/menu.html +4 -3
  77. package/docs/micl.css +1 -1
  78. package/docs/micl.js +1 -1
  79. package/docs/radio.html +2 -2
  80. package/docs/select.html +2 -2
  81. package/docs/sidesheet.html +5 -4
  82. package/docs/slider.html +2 -2
  83. package/docs/stepper.html +318 -0
  84. package/docs/switch.html +8 -4
  85. package/docs/textfield.html +2 -2
  86. package/foundations/form/index.ts +174 -0
  87. package/{layout → foundations/layout}/README.md +5 -0
  88. package/{layout → foundations/layout}/index.scss +1 -1
  89. package/micl.ts +1 -3
  90. package/package.json +4 -4
  91. package/styles.scss +1 -1
  92. package/webpack.config.js +1 -1
package/docs/accordion.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="Demonstrating MICL Accordions">
7
7
  <title>MICL Accordions</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=confirmation_number,dark_mode,home,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,keyboard_arrow_down,person,search,settings&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">
@@ -15,7 +15,7 @@
15
15
  <main class="micl-body micl-body--stacked-to-extralarge">
16
16
  <section class="micl-pane">
17
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">
18
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
19
19
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
20
20
  </a>
21
21
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -35,6 +35,7 @@
35
35
  <span class="micl-list-item__text">
36
36
  <span class="micl-list-item__headline">Headline 1</span>
37
37
  </span>
38
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
38
39
  </summary>
39
40
  <div class="micl-list-item__content">
40
41
  <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>
@@ -45,6 +46,7 @@
45
46
  <span class="micl-list-item__text">
46
47
  <span class="micl-list-item__headline">Headline 2</span>
47
48
  </span>
49
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
48
50
  </summary>
49
51
  <div class="micl-list-item__content">
50
52
  <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>
@@ -58,6 +60,7 @@
58
60
  <span class="micl-list-item__headline">Marie Curie</span>
59
61
  <span class="micl-list-item__supporting-text">The name of the employee</span>
60
62
  </span>
63
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
61
64
  </summary>
62
65
  <div class="micl-list-item__content" style="padding-block:16px">
63
66
  <div class="micl-textfield-filled">
@@ -72,6 +75,7 @@
72
75
  <span class="micl-list-item__headline">Country</span>
73
76
  <span class="micl-list-item__supporting-text">The country of residence</span>
74
77
  </span>
78
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
75
79
  </summary>
76
80
  <div class="micl-list-item__content" style="padding-block:16px">
77
81
  <div class="micl-textfield-filled">
@@ -88,6 +92,7 @@
88
92
  <span class="micl-list-item__headline">Headline 1</span>
89
93
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
90
94
  </span>
95
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
91
96
  </summary>
92
97
  <div class="micl-list-item__content">
93
98
  <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>
@@ -99,6 +104,7 @@
99
104
  <span class="micl-list-item__headline">Headline 2</span>
100
105
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
101
106
  </span>
107
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
102
108
  </summary>
103
109
  <div class="micl-list-item__content">
104
110
  <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,6 +124,7 @@
118
124
  <span class="micl-list-item__text">
119
125
  <span class="micl-list-item__headline">Date</span>
120
126
  </span>
127
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
121
128
  </summary>
122
129
  <div class="micl-list-item__content" style="padding-block:16px">
123
130
  <div class="micl-textfield-outlined">
@@ -132,6 +139,7 @@
132
139
  <span class="micl-list-item__text">
133
140
  <span class="micl-list-item__headline">Time</span>
134
141
  </span>
142
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
135
143
  </summary>
136
144
  <div class="micl-list-item__content" style="padding-block:16px">
137
145
  <div class="micl-textfield-outlined">
@@ -149,6 +157,7 @@
149
157
  <span class="micl-list-item__headline">Headline 1</span>
150
158
  <span class="micl-list-item__supporting-text">Supporting text 1</span>
151
159
  </span>
160
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
152
161
  </summary>
153
162
  <div class="micl-list-item__content">
154
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>
@@ -161,6 +170,7 @@
161
170
  <span class="micl-list-item__headline">Headline 2</span>
162
171
  <span class="micl-list-item__supporting-text">Supporting text 2</span>
163
172
  </span>
173
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
164
174
  </summary>
165
175
  <div class="micl-list-item__content">
166
176
  <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>
@@ -175,6 +185,7 @@
175
185
  <span class="micl-list-item__headline">Headline 1</span>
176
186
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
177
187
  </span>
188
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
178
189
  </summary>
179
190
  <div class="micl-list-item__content">
180
191
  <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>
@@ -187,6 +198,7 @@
187
198
  <span class="micl-list-item__headline">Headline 2</span>
188
199
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
189
200
  </span>
201
+ <span class="material-symbols-outlined micl-list-item__icon micl-list-item__icon--expander" aria-hidden="true">keyboard_arrow_down</span>
190
202
  </summary>
191
203
  <div class="micl-list-item__content">
192
204
  <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>
@@ -253,7 +265,7 @@
253
265
  </div>
254
266
  </details>
255
267
  </div>
256
- <div class="micl-list micl-list__divider" role="listbox">
268
+ <div class="micl-list" role="listbox">
257
269
  <details name="accordion9">
258
270
  <summary class="micl-list-item-three">
259
271
  <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>
@@ -266,6 +278,7 @@
266
278
  <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
279
  </div>
268
280
  </details>
281
+ <hr class="micl-divider">
269
282
  <details name="accordion9">
270
283
  <summary class="micl-list-item-three" tabindex="-1">
271
284
  <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>
@@ -290,30 +303,31 @@
290
303
  <h2>Code example</h2>
291
304
  </div>
292
305
  <div class="micl-card__content docs-code">
293
- <pre><code>
306
+ <pre tabindex="-1"><code>
294
307
  &lt;div class="micl-list" role="listbox"&gt;
295
- &lt;details name="accordion"&gt;
308
+ &lt;details name="accordion"&gt;
296
309
  &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;
310
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;settings&lt;/span&gt;
311
+ &lt;span class="micl-list-item__text"&gt;
312
+ &lt;span class="micl-list-item__headline"&gt;Headline 1&lt;/span&gt;
313
+ &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 1&lt;/span&gt;
314
+ &lt;/span&gt;
302
315
  &lt;/summary&gt;
303
316
  &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;
317
+ &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
305
318
  &lt;/div&gt;
306
319
  &lt;/details&gt;
320
+ &lt;hr class="micl-divider"&gt;
307
321
  &lt;details name="accordion"&gt;
308
322
  &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;
323
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;person&lt;/span&gt;
324
+ &lt;span class="micl-list-item__text"&gt;
325
+ &lt;span class="micl-list-item__headline"&gt;Headline 2&lt;/span&gt;
326
+ &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 2&lt;/span&gt;
327
+ &lt;/span&gt;
314
328
  &lt;/summary&gt;
315
329
  &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;
330
+ &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
317
331
  &lt;/div&gt;
318
332
  &lt;/details&gt;
319
333
  &lt;/div&gt;
package/docs/alert.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="Demonstrating MICL Alerts">
7
7
  <title>MICL Alerts</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=award_star,check,dark_mode,error,home,question_mark&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,dark_mode,error,home,question_mark&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">
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -87,7 +87,6 @@
87
87
  <span class="micl-alert__icon material-symbols-outlined">check</span>
88
88
  <div class="micl-alert__text">
89
89
  <h4>Your file has been saved</h4>
90
- <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
91
90
  </div>
92
91
  </div>
93
92
  </div>
@@ -100,24 +99,20 @@
100
99
  </div>
101
100
  <div class="micl-card__content">
102
101
  <div class="micl-alert-tonal micl-alert--secondary" role="alert">
103
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
104
102
  <div class="micl-alert__text">
105
103
  <h4>Your efforts have been rewarded</h4>
106
104
  <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
107
105
  </div>
108
106
  </div>
109
107
  <div class="micl-alert-filled micl-alert--secondary" role="alert">
110
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
111
108
  <div class="micl-alert__text">
112
109
  <h4>Your efforts have been rewarded</h4>
113
110
  <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
114
111
  </div>
115
112
  </div>
116
113
  <div class="micl-alert-outlined micl-alert--secondary" role="alert">
117
- <span class="micl-alert__icon material-symbols-outlined">award_star</span>
118
114
  <div class="micl-alert__text">
119
115
  <h4>Your efforts have been rewarded</h4>
120
- <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
121
116
  </div>
122
117
  </div>
123
118
  </div>
@@ -161,7 +156,7 @@
161
156
  <h2>Code example</h2>
162
157
  </div>
163
158
  <div class="micl-card__content docs-code">
164
- <pre><code>
159
+ <pre tabindex="-1"><code>
165
160
  &lt;div class="micl-alert-tonal" role="alert"&gt;
166
161
  &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
167
162
  &lt;span class="micl-alert__text"&gt;
package/docs/bottomsheet.html CHANGED
@@ -57,7 +57,7 @@
57
57
  <main class="micl-body">
58
58
  <section class="micl-pane">
59
59
  <header class="micl-appbar">
60
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
60
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
61
61
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
62
62
  </a>
63
63
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -206,7 +206,7 @@
206
206
  <h2>Code example</h2>
207
207
  </div>
208
208
  <div class="micl-card__content docs-code">
209
- <pre><code>
209
+ <pre tabindex="-1"><code>
210
210
  &lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
211
211
  &lt;div class="micl-bottomsheet__headline"&gt;
212
212
  &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
package/docs/button.html CHANGED
@@ -15,7 +15,7 @@
15
15
  <main class="micl-body micl-body--stacked-to-large">
16
16
  <section class="micl-pane">
17
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">
18
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
19
19
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
20
20
  </a>
21
21
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -213,7 +213,7 @@
213
213
  <h2>Code example</h2>
214
214
  </div>
215
215
  <div class="micl-card__content docs-code">
216
- <pre><code>
216
+ <pre tabindex="-1"><code>
217
217
  &lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
218
218
 
219
219
  &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
package/docs/card.html CHANGED
@@ -32,7 +32,7 @@
32
32
  <main class="micl-body micl-body--stacked-to-large">
33
33
  <section class="micl-pane">
34
34
  <header class="micl-appbar">
35
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
35
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
36
36
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
37
37
  </a>
38
38
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -44,7 +44,7 @@
44
44
 
45
45
  <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
46
46
  <div class="micl-pane__column">
47
- <div class="micl-card-elevated" tabindex="0">
47
+ <div class="micl-card-elevated" style="margin-top:8px" tabindex="0">
48
48
  <div class="docs-icon" aria-hidden="true">A</div>
49
49
  <div class="micl-card__headline-s">
50
50
  <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
@@ -55,7 +55,7 @@
55
55
  <p class="md-sys-typescale-body-small">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>
56
56
  </div>
57
57
  </div>
58
- <div class="micl-card-filled" tabindex="0">
58
+ <div class="micl-card-filled">
59
59
  <div class="micl-card__headline-m">
60
60
  <h2>Lorem ipsum</h2>
61
61
  </div>
@@ -74,7 +74,7 @@
74
74
  </div>
75
75
  </div>
76
76
  <div class="micl-pane__column">
77
- <details class="micl-card-elevated">
77
+ <details class="micl-card-elevated" style="margin-top:8px">
78
78
  <summary>
79
79
  <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
80
80
  <span class="micl-card__headline-s">
@@ -85,8 +85,8 @@
85
85
  </summary>
86
86
  <div class="micl-card__content" style="padding-inline:0">
87
87
  <p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-sys-card-padding-inline);padding-inline:var(--md-sys-card-padding-inline)">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>
88
- <hr class="micl-divider" style="--md-sys-divider-space:16px">
89
- <button type="button" class="micl-button-text-s">Share</button>
88
+ <hr class="micl-divider" style="--md-sys-divider-space:8px">
89
+ <button type="button" class="micl-button-text-s" style="margin:8px">Share</button>
90
90
  </div>
91
91
  </details>
92
92
  <details class="micl-card-filled">
@@ -121,7 +121,7 @@
121
121
  <h2>Code example</h2>
122
122
  </div>
123
123
  <div class="micl-card__content docs-code">
124
- <pre><code>
124
+ <pre tabindex="-1"><code>
125
125
  &lt;div class="micl-card-elevated" tabindex="0"&gt;
126
126
  &lt;div class="micl-card__headline-s"&gt;
127
127
  &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/h2&gt;
package/docs/checkbox.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -129,7 +129,7 @@
129
129
  <h2>Code example</h2>
130
130
  </div>
131
131
  <div class="micl-card__content docs-code">
132
- <pre><code>
132
+ <pre tabindex="-1"><code>
133
133
  &lt;div class="micl-flex--vcenter"&gt;
134
134
  &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
135
135
  &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
package/docs/dialog.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <main class="micl-body">
21
21
  <section class="micl-pane">
22
22
  <header class="micl-appbar">
23
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
23
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
24
24
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
25
25
  </a>
26
26
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -159,7 +159,7 @@
159
159
  <h2>Code example</h2>
160
160
  </div>
161
161
  <div class="micl-card__content docs-code">
162
- <pre><code>
162
+ <pre tabindex="-1"><code>
163
163
  &lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
164
164
  &lt;div class="micl-dialog__headline"&gt;
165
165
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
package/docs/divider.html CHANGED
@@ -36,7 +36,7 @@
36
36
  <main class="micl-body micl-body--stacked-to-large">
37
37
  <section class="micl-pane">
38
38
  <header class="micl-appbar">
39
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
39
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
40
40
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
41
41
  </a>
42
42
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -55,9 +55,9 @@
55
55
  <p class="md-sys-typescale-label-large">Inset:</p>
56
56
  <hr class="micl-divider-inset">
57
57
  <p class="md-sys-typescale-label-large">Inset start:</p>
58
- <hr class="micl-divider-inset--start">
58
+ <hr class="micl-divider-inset-start">
59
59
  <p class="md-sys-typescale-label-large">Inset end:</p>
60
- <hr class="micl-divider-inset--end">
60
+ <hr class="micl-divider-inset-end">
61
61
  <p></p>
62
62
  </div>
63
63
  </div>
@@ -78,9 +78,9 @@
78
78
  <p class="md-sys-typescale-label-large">Inset:</p>
79
79
  <hr class="micl-divider-inset">
80
80
  <p class="md-sys-typescale-label-large">Inset start:</p>
81
- <hr class="micl-divider-inset--start">
81
+ <hr class="micl-divider-inset-start">
82
82
  <p class="md-sys-typescale-label-large">Inset end:</p>
83
- <hr class="micl-divider-inset--end">
83
+ <hr class="micl-divider-inset-end">
84
84
  <p></p>
85
85
  </div>
86
86
  </div>
@@ -101,9 +101,9 @@
101
101
  <p class="md-sys-typescale-label-large">Inset:</p>
102
102
  <hr class="micl-divider-inset">
103
103
  <p class="md-sys-typescale-label-large">Inset start:</p>
104
- <hr class="micl-divider-inset--start">
104
+ <hr class="micl-divider-inset-start">
105
105
  <p class="md-sys-typescale-label-large">Inset end:</p>
106
- <hr class="micl-divider-inset--end">
106
+ <hr class="micl-divider-inset-end">
107
107
  <p></p>
108
108
  </div>
109
109
  </div>
@@ -124,7 +124,7 @@
124
124
  <h2>Code example</h2>
125
125
  </div>
126
126
  <div class="micl-card__content docs-code">
127
- <pre><code>
127
+ <pre tabindex="-1"><code>
128
128
  &lt;hr class="micl-divider"&gt;
129
129
  </code></pre>
130
130
  </div>
package/docs/iconbutton.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <main class="micl-body micl-body--stacked-to-large">
23
23
  <section class="micl-pane">
24
24
  <header class="micl-appbar">
25
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
25
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
26
26
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
27
27
  </a>
28
28
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -206,7 +206,7 @@
206
206
  <h2>Code example</h2>
207
207
  </div>
208
208
  <div class="micl-card__content docs-code">
209
- <pre><code>
209
+ <pre tabindex="-1"><code>
210
210
  &lt;button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;
211
211
 
212
212
  &lt;button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel"&gt;settings&lt;/button&gt;