material-inspired-component-library 5.0.1 → 6.0.2

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 (162) hide show
  1. package/README.md +6 -2
  2. package/components/alert/README.md +1 -1
  3. package/components/appbar/README.md +1 -1
  4. package/components/badge/README.md +1 -1
  5. package/components/button/README.md +9 -1
  6. package/components/button/index.ts +21 -37
  7. package/components/datepicker/README.md +146 -0
  8. package/components/datepicker/index.scss +2 -1
  9. package/components/datepicker/index.ts +210 -109
  10. package/components/iconbutton/README.md +10 -1
  11. package/components/iconbutton/index.ts +21 -37
  12. package/components/list/README.md +22 -7
  13. package/components/sidesheet/README.md +3 -3
  14. package/components/textfield/README.md +2 -2
  15. package/components/textfield/index.ts +56 -0
  16. package/components/timepicker/README.md +8 -9
  17. package/components/timepicker/index.ts +5 -5
  18. package/dist/alert.css +1 -1
  19. package/dist/appbar.css +1 -1
  20. package/dist/badge.css +1 -1
  21. package/dist/bottomsheet.css +1 -1
  22. package/dist/button.css +1 -1
  23. package/dist/card.css +1 -1
  24. package/dist/checkbox.css +1 -1
  25. package/dist/components/button/index.d.ts +2 -1
  26. package/dist/components/iconbutton/index.d.ts +2 -1
  27. package/dist/datepicker.css +1 -1
  28. package/dist/dialog.css +1 -1
  29. package/dist/divider.css +1 -1
  30. package/dist/foundations.css +1 -1
  31. package/dist/iconbutton.css +1 -1
  32. package/dist/list.css +1 -1
  33. package/dist/menu.css +1 -1
  34. package/dist/micl.css +1 -1
  35. package/dist/micl.js +1 -1
  36. package/dist/navigationrail.css +1 -1
  37. package/dist/radio.css +1 -1
  38. package/dist/select.css +1 -1
  39. package/dist/sidesheet.css +1 -1
  40. package/dist/slider.css +1 -1
  41. package/dist/stepper.css +1 -1
  42. package/dist/switch.css +1 -1
  43. package/dist/textfield.css +1 -1
  44. package/dist/timepicker.css +1 -1
  45. package/docs/accordion.html +20 -20
  46. package/docs/alert.html +10 -10
  47. package/docs/bottomsheet.html +9 -9
  48. package/docs/button.html +16 -16
  49. package/docs/datepicker.html +133 -9
  50. package/docs/dialog.html +5 -5
  51. package/docs/docs.js +22 -1
  52. package/docs/iconbutton.html +8 -8
  53. package/docs/index.html +18 -17
  54. package/docs/list.html +14 -14
  55. package/docs/menu.html +12 -12
  56. package/docs/micl.css +1 -1
  57. package/docs/micl.js +1 -1
  58. package/docs/navigationrail.html +2 -2
  59. package/docs/sidesheet.html +4 -4
  60. package/docs/slider.html +2 -2
  61. package/docs/textfield.html +24 -24
  62. package/docs/themes/gray/dark-hc.css +51 -0
  63. package/docs/themes/gray/dark-mc.css +51 -0
  64. package/docs/themes/gray/dark.css +51 -0
  65. package/docs/themes/gray/light-hc.css +51 -0
  66. package/docs/themes/gray/light-mc.css +51 -0
  67. package/docs/themes/gray/light.css +51 -0
  68. package/docs/themes/gray/theme.css +306 -0
  69. package/docs/themes/greenery/dark-hc.css +51 -0
  70. package/docs/themes/greenery/dark-mc.css +51 -0
  71. package/docs/themes/greenery/dark.css +51 -0
  72. package/docs/themes/greenery/light-hc.css +51 -0
  73. package/docs/themes/greenery/light-mc.css +51 -0
  74. package/docs/themes/greenery/light.css +51 -0
  75. package/docs/themes/greenery/theme.css +306 -0
  76. package/docs/themes/hermana/dark-hc.css +51 -0
  77. package/docs/themes/hermana/dark-mc.css +51 -0
  78. package/docs/themes/hermana/dark.css +51 -0
  79. package/docs/themes/hermana/light-hc.css +51 -0
  80. package/docs/themes/hermana/light-mc.css +51 -0
  81. package/docs/themes/hermana/light.css +51 -0
  82. package/docs/themes/hermana/theme.css +306 -0
  83. package/docs/themes/illuminating/dark-hc.css +51 -0
  84. package/docs/themes/illuminating/dark-mc.css +51 -0
  85. package/docs/themes/illuminating/dark.css +51 -0
  86. package/docs/themes/illuminating/light-hc.css +51 -0
  87. package/docs/themes/illuminating/light-mc.css +51 -0
  88. package/docs/themes/illuminating/light.css +51 -0
  89. package/docs/themes/illuminating/theme.css +306 -0
  90. package/docs/themes/magenta/dark-hc.css +51 -0
  91. package/docs/themes/magenta/dark-mc.css +51 -0
  92. package/docs/themes/magenta/dark.css +51 -0
  93. package/docs/themes/magenta/light-hc.css +51 -0
  94. package/docs/themes/magenta/light-mc.css +51 -0
  95. package/docs/themes/magenta/light.css +51 -0
  96. package/docs/themes/magenta/theme.css +306 -0
  97. package/docs/themes/mocha/dark-hc.css +51 -0
  98. package/docs/themes/mocha/dark-mc.css +51 -0
  99. package/docs/themes/mocha/dark.css +51 -0
  100. package/docs/themes/mocha/light-hc.css +51 -0
  101. package/docs/themes/mocha/light-mc.css +51 -0
  102. package/docs/themes/mocha/light.css +51 -0
  103. package/docs/themes/mocha/theme.css +306 -0
  104. package/docs/themes/peri/dark-hc.css +51 -0
  105. package/docs/themes/peri/dark-mc.css +51 -0
  106. package/docs/themes/peri/dark.css +51 -0
  107. package/docs/themes/peri/light-hc.css +51 -0
  108. package/docs/themes/peri/light-mc.css +51 -0
  109. package/docs/themes/peri/light.css +51 -0
  110. package/docs/themes/peri/theme.css +306 -0
  111. package/docs/timepicker.html +1 -1
  112. package/foundations/index.scss +4 -1
  113. package/package.json +1 -1
  114. package/themes/gray/dark-hc.css +51 -0
  115. package/themes/gray/dark-mc.css +51 -0
  116. package/themes/gray/dark.css +51 -0
  117. package/themes/gray/light-hc.css +51 -0
  118. package/themes/gray/light-mc.css +51 -0
  119. package/themes/gray/light.css +51 -0
  120. package/themes/gray/theme.css +306 -0
  121. package/themes/greenery/dark-hc.css +51 -0
  122. package/themes/greenery/dark-mc.css +51 -0
  123. package/themes/greenery/dark.css +51 -0
  124. package/themes/greenery/light-hc.css +51 -0
  125. package/themes/greenery/light-mc.css +51 -0
  126. package/themes/greenery/light.css +51 -0
  127. package/themes/greenery/theme.css +306 -0
  128. package/themes/hermana/dark-hc.css +51 -0
  129. package/themes/hermana/dark-mc.css +51 -0
  130. package/themes/hermana/dark.css +51 -0
  131. package/themes/hermana/light-hc.css +51 -0
  132. package/themes/hermana/light-mc.css +51 -0
  133. package/themes/hermana/light.css +51 -0
  134. package/themes/hermana/theme.css +306 -0
  135. package/themes/illuminating/dark-hc.css +51 -0
  136. package/themes/illuminating/dark-mc.css +51 -0
  137. package/themes/illuminating/dark.css +51 -0
  138. package/themes/illuminating/light-hc.css +51 -0
  139. package/themes/illuminating/light-mc.css +51 -0
  140. package/themes/illuminating/light.css +51 -0
  141. package/themes/illuminating/theme.css +306 -0
  142. package/themes/magenta/dark-hc.css +51 -0
  143. package/themes/magenta/dark-mc.css +51 -0
  144. package/themes/magenta/dark.css +51 -0
  145. package/themes/magenta/light-hc.css +51 -0
  146. package/themes/magenta/light-mc.css +51 -0
  147. package/themes/magenta/light.css +51 -0
  148. package/themes/magenta/theme.css +306 -0
  149. package/themes/mocha/dark-hc.css +51 -0
  150. package/themes/mocha/dark-mc.css +51 -0
  151. package/themes/mocha/dark.css +51 -0
  152. package/themes/mocha/light-hc.css +51 -0
  153. package/themes/mocha/light-mc.css +51 -0
  154. package/themes/mocha/light.css +51 -0
  155. package/themes/mocha/theme.css +306 -0
  156. package/themes/peri/dark-hc.css +51 -0
  157. package/themes/peri/dark-mc.css +51 -0
  158. package/themes/peri/dark.css +51 -0
  159. package/themes/peri/light-hc.css +51 -0
  160. package/themes/peri/light-mc.css +51 -0
  161. package/themes/peri/light.css +51 -0
  162. package/themes/peri/theme.css +306 -0
package/docs/accordion.html CHANGED
@@ -37,7 +37,7 @@
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -48,7 +48,7 @@
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-hidden="true">keyboard_arrow_down</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>
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-hidden="true">keyboard_arrow_down</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>
66
66
  </summary>
67
67
  <div class="micl-list-item__content" style="padding-block:16px">
68
68
  <div class="micl-textfield-filled">
@@ -77,7 +77,7 @@
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-hidden="true">keyboard_arrow_down</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>
81
81
  </summary>
82
82
  <div class="micl-list-item__content" style="padding-block:16px">
83
83
  <div class="micl-textfield-filled">
@@ -94,7 +94,7 @@
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -106,7 +106,7 @@
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -122,11 +122,11 @@
122
122
  <div class="micl-list" role="listbox">
123
123
  <details name="accordion4">
124
124
  <summary class="micl-list-item-one">
125
- <span class="material-symbols-outlined micl-list-item__icon">search</span>
125
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
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-hidden="true">keyboard_arrow_down</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>
130
130
  </summary>
131
131
  <div class="micl-list-item__content" style="padding-block:16px">
132
132
  <div class="micl-textfield-outlined">
@@ -137,11 +137,11 @@
137
137
  </details>
138
138
  <details name="accordion4">
139
139
  <summary class="micl-list-item-one" tabindex="-1">
140
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
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-hidden="true">keyboard_arrow_down</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>
145
145
  </summary>
146
146
  <div class="micl-list-item__content" style="padding-block:16px">
147
147
  <div class="micl-textfield-outlined">
@@ -154,12 +154,12 @@
154
154
  <div class="micl-list" role="listbox">
155
155
  <details name="accordion5">
156
156
  <summary class="micl-list-item-two">
157
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
157
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
158
158
  <span class="micl-list-item__text">
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -167,12 +167,12 @@
167
167
  </details>
168
168
  <details name="accordion5">
169
169
  <summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
170
- <span class="material-symbols-outlined micl-list-item__icon">person</span>
170
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
171
171
  <span class="micl-list-item__text">
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -182,12 +182,12 @@
182
182
  <div class="micl-list" role="listbox">
183
183
  <details name="accordion6">
184
184
  <summary class="micl-list-item-three">
185
- <span class="material-symbols-outlined micl-list-item__icon">settings</span>
185
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
186
186
  <span class="micl-list-item__text">
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -195,12 +195,12 @@
195
195
  </details>
196
196
  <details name="accordion6">
197
197
  <summary class="micl-list-item-three" tabindex="-1">
198
- <span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
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-hidden="true">keyboard_arrow_down</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>
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>
@@ -309,7 +309,7 @@
309
309
  &lt;div class="micl-list" role="listbox"&gt;
310
310
  &lt;details name="accordion"&gt;
311
311
  &lt;summary class="micl-list-item-two"&gt;
312
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;settings&lt;/span&gt;
312
+ &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;settings&lt;/span&gt;
313
313
  &lt;span class="micl-list-item__text"&gt;
314
314
  &lt;span class="micl-list-item__headline"&gt;Headline 1&lt;/span&gt;
315
315
  &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 1&lt;/span&gt;
@@ -322,7 +322,7 @@
322
322
  &lt;hr class="micl-divider"&gt;
323
323
  &lt;details name="accordion"&gt;
324
324
  &lt;summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1"&gt;
325
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;person&lt;/span&gt;
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;
328
328
  &lt;span class="micl-list-item__supporting-text"&gt;Supporting text 2&lt;/span&gt;
package/docs/alert.html CHANGED
@@ -42,21 +42,21 @@
42
42
  </div>
43
43
  <div class="micl-card__content">
44
44
  <div class="micl-alert-tonal" role="alert">
45
- <span class="micl-alert__icon material-symbols-outlined">error</span>
45
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
46
46
  <div class="micl-alert__text">
47
47
  <h4>An error has occurred</h4>
48
48
  <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
49
49
  </div>
50
50
  </div>
51
51
  <div class="micl-alert-filled" role="alert">
52
- <span class="micl-alert__icon material-symbols-outlined">error</span>
52
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
53
53
  <div class="micl-alert__text">
54
54
  <h4>An error has occurred</h4>
55
55
  <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
56
56
  </div>
57
57
  </div>
58
58
  <div class="micl-alert-outlined" role="alert">
59
- <span class="micl-alert__icon material-symbols-outlined">error</span>
59
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error</span>
60
60
  <div class="micl-alert__text">
61
61
  <h4>An error has occurred</h4>
62
62
  <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
@@ -72,21 +72,21 @@
72
72
  </div>
73
73
  <div class="micl-card__content">
74
74
  <div class="micl-alert-tonal micl-alert--primary" role="alert">
75
- <span class="micl-alert__icon material-symbols-outlined">check</span>
75
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
76
76
  <div class="micl-alert__text">
77
77
  <h4>Your file has been saved</h4>
78
78
  <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
79
79
  </div>
80
80
  </div>
81
81
  <div class="micl-alert-filled micl-alert--primary" role="alert">
82
- <span class="micl-alert__icon material-symbols-outlined">check</span>
82
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
83
83
  <div class="micl-alert__text">
84
84
  <h4>Your file has been saved</h4>
85
85
  <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
86
86
  </div>
87
87
  </div>
88
88
  <div class="micl-alert-outlined micl-alert--primary" role="alert">
89
- <span class="micl-alert__icon material-symbols-outlined">check</span>
89
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">check</span>
90
90
  <div class="micl-alert__text">
91
91
  <h4>Your file has been saved</h4>
92
92
  </div>
@@ -127,21 +127,21 @@
127
127
  </div>
128
128
  <div class="micl-card__content">
129
129
  <div class="micl-alert-tonal micl-alert--tertiary" role="alert">
130
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
130
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
131
131
  <div class="micl-alert__text">
132
132
  <h4>Checking your progress</h4>
133
133
  <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
134
134
  </div>
135
135
  </div>
136
136
  <div class="micl-alert-filled micl-alert--tertiary" role="alert">
137
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
137
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
138
138
  <div class="micl-alert__text">
139
139
  <h4>Checking your progress</h4>
140
140
  <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
141
141
  </div>
142
142
  </div>
143
143
  <div class="micl-alert-outlined micl-alert--tertiary" role="alert">
144
- <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
144
+ <span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">question_mark</span>
145
145
  <div class="micl-alert__text">
146
146
  <h4>Checking your progress</h4>
147
147
  <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
@@ -160,7 +160,7 @@
160
160
  <div class="micl-card__content docs-code">
161
161
  <pre tabindex="-1"><code>
162
162
  &lt;div class="micl-alert-tonal" role="alert"&gt;
163
- &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
163
+ &lt;span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error&lt;/span&gt;
164
164
  &lt;span class="micl-alert__text"&gt;
165
165
  &lt;h4&gt;An error has occurred&lt;/h4&gt;
166
166
  &lt;span class="micl-alert__supporting-text"&gt;Something unexplainable has happened.&lt;/span&gt;
package/docs/bottomsheet.html CHANGED
@@ -126,19 +126,19 @@
126
126
  <div class="micl-bottomsheet__content">
127
127
  <ul class="micl-list" role="listbox">
128
128
  <li class="micl-list-item-one" tabindex="0">
129
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
129
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
130
130
  <span class="micl-list-item__text">
131
131
  <span class="micl-list-item__headline">Share</span>
132
132
  </span>
133
133
  </li>
134
134
  <li class="micl-list-item-one" tabindex="0">
135
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
135
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
136
136
  <span class="micl-list-item__text">
137
137
  <span class="micl-list-item__headline">Get link</span>
138
138
  </span>
139
139
  </li>
140
140
  <li class="micl-list-item-one" tabindex="0">
141
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
141
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
142
142
  <span class="micl-list-item__text">
143
143
  <span class="micl-list-item__headline">Edit name</span>
144
144
  </span>
@@ -148,32 +148,32 @@
148
148
  </dialog>
149
149
  <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet3">Open Resizable Sheet</button>
150
150
 
151
- <dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="any">
151
+ <dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="closerequest">
152
152
  <div class="micl-bottomsheet__headline">
153
153
  <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
154
154
  </div>
155
155
  <div class="micl-bottomsheet__content">
156
156
  <ul class="micl-list" role="listbox" style="display:flex">
157
157
  <li class="micl-list-item-one" tabindex="0">
158
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
158
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
159
159
  <span class="micl-list-item__text">
160
160
  <span class="micl-list-item__headline">Share</span>
161
161
  </span>
162
162
  </li>
163
163
  <li class="micl-list-item-one" tabindex="0">
164
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
164
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
165
165
  <span class="micl-list-item__text">
166
166
  <span class="micl-list-item__headline">Get link</span>
167
167
  </span>
168
168
  </li>
169
169
  <li class="micl-list-item-one" tabindex="0">
170
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
170
+ <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
171
171
  <span class="micl-list-item__text">
172
172
  <span class="micl-list-item__headline">Edit name</span>
173
173
  </span>
174
174
  </li>
175
175
  <li class="micl-list-item-one" tabindex="0">
176
- <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" popovertarget="mybottomsheet4">close</button>
176
+ <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" command="close" commandfor="mybottomsheet4">close</button>
177
177
  </li>
178
178
  </ul>
179
179
  <hr class="micl-divider">
@@ -198,7 +198,7 @@
198
198
  </div>
199
199
  </div>
200
200
  </dialog>
201
- <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet4">Open Modal Sheet</button>
201
+ <button type="button" class="micl-button-outlined-m" command="show-modal" commandfor="mybottomsheet4">Open Modal Sheet</button>
202
202
  </div>
203
203
  </div>
204
204
  </div>
package/docs/button.html CHANGED
@@ -198,40 +198,40 @@
198
198
  </div>
199
199
  <div class="micl-card__content">
200
200
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
201
- <button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
202
- <button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
203
- <button type="button" class="micl-button-elevated-m micl-button--square micl-button--toggle">Click</button>
204
- <button type="button" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
201
+ <button type="button" id="btn1" class="micl-button-elevated-m micl-button--toggle" commandfor="btn1" command="--micl-toggle">Click</button>
202
+ <button type="button" id="btn2" class="micl-button-elevated-m micl-button--toggle micl-button--selected" commandfor="btn2" command="--micl-toggle">Click</button>
203
+ <button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">Click</button>
204
+ <button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">Click</button>
205
205
  </div>
206
206
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
207
- <button type="button" class="micl-button-filled-m micl-button--toggle">
207
+ <button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">
208
208
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
209
209
  Click
210
210
  </button>
211
- <button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">
211
+ <button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle micl-button--selected" commandfor="btn6" command="--micl-toggle">
212
212
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
213
213
  Click
214
214
  </button>
215
- <button type="button" class="micl-button-filled-m micl-button--square micl-button--toggle">
215
+ <button type="button" id="btn7" class="micl-button-filled-m micl-button--square micl-button--toggle" commandfor="btn7" command="--micl-toggle">
216
216
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
217
217
  Click
218
218
  </button>
219
- <button type="button" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected">
219
+ <button type="button" id="btn8" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn8" command="--micl-toggle">
220
220
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
221
221
  Click
222
222
  </button>
223
223
  </div>
224
224
  <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
225
- <button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
226
- <button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
227
- <button type="button" class="micl-button-tonal-m micl-button--square micl-button--toggle">Click</button>
228
- <button type="button" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
225
+ <button type="button" id="btn9" class="micl-button-tonal-m micl-button--toggle" commandfor="btn9" command="--micl-toggle">Click</button>
226
+ <button type="button" id="btn10" class="micl-button-tonal-m micl-button--toggle micl-button--selected" commandfor="btn10" command="--micl-toggle">Click</button>
227
+ <button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">Click</button>
228
+ <button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn12" command="--micl-toggle">Click</button>
229
229
  </div>
230
230
  <div style="display:flex;flex-wrap:wrap;gap:8px">
231
- <button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
232
- <button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
233
- <button type="button" class="micl-button-outlined-m micl-button--square micl-button--toggle">Click</button>
234
- <button type="button" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected">Click</button>
231
+ <button type="button" id="btn13" class="micl-button-outlined-m micl-button--toggle" commandfor="btn13" command="--micl-toggle">Click</button>
232
+ <button type="button" id="btn14" class="micl-button-outlined-m micl-button--toggle micl-button--selected" commandfor="btn14" command="--micl-toggle">Click</button>
233
+ <button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">Click</button>
234
+ <button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn16" command="--micl-toggle">Click</button>
235
235
  </div>
236
236
  </div>
237
237
  </div>
package/docs/datepicker.html CHANGED
@@ -49,12 +49,56 @@
49
49
  <label for="mytextfield0">Select date</label>
50
50
  <input type="date" id="mytextfield0" value="2026-01-10">
51
51
  </div>
52
+
52
53
  <p class="md-sys-typescale-body-medium">MICL date textfield component with the MICL date picker component</p>
53
- <div class="micl-textfield-outlined" style="width:fit-content;anchor-name:--myanchor">
54
+ <div class="micl-textfield-outlined" style="width:fit-content">
54
55
  <label for="mytextfield1">Start date</label>
55
- <input type="date" id="mytextfield1" min="2025-10-01" max="2026-04-30" data-datepicker="mydatepicker1" value="2025-12-02">
56
+ <input type="date" id="mytextfield1" data-datepicker="mydatepicker1" value="2025-12-02">
57
+ </div>
58
+ <dialog id="mydatepicker1" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle1">
59
+ <form method="dialog">
60
+ <div class="micl-dialog__headline">
61
+ <h2 id="mytitle1">Enter dates</h2>
62
+ <span class="micl-dialog__supporting-text">Select date</span>
63
+ <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
64
+ <hr class="micl-divider">
65
+ <div class="micl-datepicker__month-selector">
66
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
67
+ <button type="button" class="micl-datepicker__month micl-button-text-xs">
68
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
69
+ </button>
70
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
71
+ </div>
72
+ <div class="micl-datepicker__year-selector">
73
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
74
+ <button type="button" class="micl-datepicker__year micl-button-text-xs">
75
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
76
+ </button>
77
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
78
+ </div>
79
+ </div>
80
+ <div class="micl-dialog__content">
81
+ <div class="micl-datepicker__calendars"></div>
82
+ <div class="micl-datepicker__years"></div>
83
+ <div class="micl-datepicker__months"></div>
84
+ <div class="micl-datepicker__input micl-textfield-outlined">
85
+ <label for="mydate1">Date</label>
86
+ <input type="text" id="mydate1">
87
+ </div>
88
+ </div>
89
+ <div class="micl-dialog__actions">
90
+ <button class="micl-button-text-s" value="">Cancel</button>
91
+ <button class="micl-button-text-s" value="OK">OK</button>
92
+ </div>
93
+ </form>
94
+ </dialog>
95
+
96
+ <p class="md-sys-typescale-body-medium">MICL date textfield component with a docked MICL date picker component</p>
97
+ <div class="micl-textfield-outlined" style="width:fit-content;anchor-name:--myanchor">
98
+ <label for="mytextfield2">Start date</label>
99
+ <input type="date" id="mytextfield2" data-datepicker="mydatepicker2" value="2025-12-02">
56
100
  </div>
57
- <dialog id="mydatepicker1" class="micl-dialog micl-dialog--docked micl-datepicker" style="position-anchor:--myanchor" popover closedby="closerequest" aria-labelledby="mytitle1">
101
+ <dialog id="mydatepicker2" class="micl-dialog micl-dialog--docked micl-datepicker" style="position-anchor:--myanchor" popover closedby="closerequest">
58
102
  <form method="dialog">
59
103
  <div class="micl-dialog__headline">
60
104
  <span class="micl-dialog__supporting-text">Enter date</span>
@@ -85,17 +129,60 @@
85
129
  </form>
86
130
  </dialog>
87
131
 
132
+ <p class="md-sys-typescale-body-medium">MICL date textfield component with limited date range</p>
133
+ <div class="micl-textfield-outlined" style="width:fit-content">
134
+ <label for="mytextfield1">Start date</label>
135
+ <input type="date" id="mytextfield3" min="2025-10-01" max="2026-04-30" data-datepicker="mydatepicker3" value="2025-12-02">
136
+ </div>
137
+ <dialog id="mydatepicker3" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle3">
138
+ <form method="dialog">
139
+ <div class="micl-dialog__headline">
140
+ <h2 id="mytitle3">Enter dates</h2>
141
+ <span class="micl-dialog__supporting-text">Select date</span>
142
+ <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
143
+ <hr class="micl-divider">
144
+ <div class="micl-datepicker__month-selector">
145
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
146
+ <button type="button" class="micl-datepicker__month micl-button-text-xs">
147
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
148
+ </button>
149
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
150
+ </div>
151
+ <div class="micl-datepicker__year-selector">
152
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
153
+ <button type="button" class="micl-datepicker__year micl-button-text-xs">
154
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
155
+ </button>
156
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
157
+ </div>
158
+ </div>
159
+ <div class="micl-dialog__content">
160
+ <div class="micl-datepicker__calendars"></div>
161
+ <div class="micl-datepicker__years"></div>
162
+ <div class="micl-datepicker__months"></div>
163
+ <div class="micl-datepicker__input micl-textfield-outlined">
164
+ <label for="mydate2">Date</label>
165
+ <input type="text" id="mydate2">
166
+ </div>
167
+ </div>
168
+ <div class="micl-dialog__actions">
169
+ <button class="micl-button-text-s" value="">Cancel</button>
170
+ <button class="micl-button-text-s" value="OK">OK</button>
171
+ </div>
172
+ </form>
173
+ </dialog>
174
+
88
175
  <p class="md-sys-typescale-body-medium">Date input using a MICL button component that opens the MICL date picker</p>
89
176
  <div class="micl-flex--vcenter" style="column-gap:8px">
90
177
  <label for="mydate" class="md-sys-typescale-body-large">Start date:</label>
91
- <button type="button" id="mydate" class="micl-button-text-m" popovertarget="mydatepicker2" value="2026-01-23">23.01.2026</button>
178
+ <button type="button" id="mydate" class="micl-button-text-m" command="show-modal" commandfor="mydatepicker4" value="2026-01-23">23.01.2026</button>
92
179
  </div>
93
- <dialog id="mydatepicker2" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle2">
180
+ <dialog id="mydatepicker4" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="mytitle4">
94
181
  <form method="dialog">
95
182
  <div class="micl-dialog__headline">
96
- <h2 id="mytitle2">Enter dates</h2>
183
+ <h2 id="mytitle4">Enter dates</h2>
97
184
  <span class="micl-dialog__supporting-text">Select date</span>
98
- <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-alticon="calendar_today">edit</button>
185
+ <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
99
186
  <hr class="micl-divider">
100
187
  <div class="micl-datepicker__month-selector">
101
188
  <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
@@ -117,8 +204,8 @@
117
204
  <div class="micl-datepicker__years"></div>
118
205
  <div class="micl-datepicker__months"></div>
119
206
  <div class="micl-datepicker__input micl-textfield-outlined">
120
- <label for="mydate2">Date</label>
121
- <input type="date" id="mydate2">
207
+ <label for="mydate3">Date</label>
208
+ <input type="text" id="mydate3">
122
209
  </div>
123
210
  </div>
124
211
  <div class="micl-dialog__actions">
@@ -139,6 +226,43 @@
139
226
  </div>
140
227
  <div class="micl-card__content docs-code">
141
228
  <pre tabindex="-1"><code>
229
+ &lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
230
+ &lt;form method="dialog"&gt;
231
+ &lt;div class="micl-dialog__headline"&gt;
232
+ &lt;h2 id="id1"&gt;Enter dates&lt;/h2&gt;
233
+ &lt;span class="micl-dialog__supporting-text"&gt;Select date&lt;/span&gt;
234
+ &lt;button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today"&gt;edit&lt;/button&gt;
235
+ &lt;hr class="micl-divider"&gt;
236
+ &lt;div class="micl-datepicker__month-selector"&gt;
237
+ &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month"&gt;chevron_left&lt;/button&gt;
238
+ &lt;button type="button" class="micl-datepicker__month micl-button-text-xs"&gt;
239
+ &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
240
+ &lt;/button&gt;
241
+ &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month"&gt;chevron_right&lt;/button&gt;
242
+ &lt;/div&gt;
243
+ &lt;div class="micl-datepicker__year-selector"&gt;
244
+ &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year"&gt;chevron_left&lt;/button&gt;
245
+ &lt;button type="button" class="micl-datepicker__year micl-button-text-xs"&gt;
246
+ &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
247
+ &lt;/button&gt;
248
+ &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year"&gt;chevron_right&lt;/button&gt;
249
+ &lt;/div&gt;
250
+ &lt;/div&gt;
251
+ &lt;div class="micl-dialog__content"&gt;
252
+ &lt;div class="micl-datepicker__calendars"&gt;&lt;/div&gt;
253
+ &lt;div class="micl-datepicker__years"&gt;&lt;/div&gt;
254
+ &lt;div class="micl-datepicker__months"&gt;&lt;/div&gt;
255
+ &lt;div class="micl-datepicker__input micl-textfield-outlined"&gt;
256
+ &lt;label for="mydate1"&gt;Date&lt;/label&gt;
257
+ &lt;input type="text" id="mydate1"&gt;
258
+ &lt;/div&gt;
259
+ &lt;/div&gt;
260
+ &lt;div class="micl-dialog__actions"&gt;
261
+ &lt;button class="micl-button-text-s" value=""&gt;Cancel&lt;/button&gt;
262
+ &lt;button class="micl-button-text-s" value="OK"&gt;OK&lt;/button&gt;
263
+ &lt;/div&gt;
264
+ &lt;/form&gt;
265
+ &lt;/dialog&gt;
142
266
  </code></pre>
143
267
  </div>
144
268
  </div>