material-inspired-component-library 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/.editorconfig +12 -0
  2. package/.gitattributes +9 -0
  3. package/.github/ISSUE_TEMPLATE/bug_report.md +35 -0
  4. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  5. package/LICENSE +21 -0
  6. package/README.md +99 -0
  7. package/components/README.md +12 -0
  8. package/components/accordion/README.md +94 -0
  9. package/components/bottomsheet/README.md +77 -0
  10. package/components/bottomsheet/bottomsheet.scss +134 -0
  11. package/components/bottomsheet/index.ts +152 -0
  12. package/components/button/README.md +92 -0
  13. package/components/button/button.scss +515 -0
  14. package/components/button/index.ts +73 -0
  15. package/components/card/README.md +125 -0
  16. package/components/card/card.scss +261 -0
  17. package/components/checkbox/README.md +62 -0
  18. package/components/checkbox/checkbox.scss +275 -0
  19. package/components/checkbox/index.ts +48 -0
  20. package/components/dialog/README.md +133 -0
  21. package/components/dialog/dialog.scss +262 -0
  22. package/components/divider/README.md +52 -0
  23. package/components/divider/divider.scss +74 -0
  24. package/components/iconbutton/README.md +86 -0
  25. package/components/iconbutton/iconbutton.scss +461 -0
  26. package/components/iconbutton/index.ts +73 -0
  27. package/components/list/README.md +176 -0
  28. package/components/list/index.ts +108 -0
  29. package/components/list/list.scss +295 -0
  30. package/components/menu/README.md +96 -0
  31. package/components/menu/index.ts +77 -0
  32. package/components/menu/menu.scss +124 -0
  33. package/components/radio/README.md +53 -0
  34. package/components/radio/radio.scss +138 -0
  35. package/components/select/README.md +84 -0
  36. package/components/select/select.scss +122 -0
  37. package/components/sidesheet/README.md +99 -0
  38. package/components/sidesheet/sidesheet.scss +162 -0
  39. package/components/slider/README.md +69 -0
  40. package/components/slider/index.ts +114 -0
  41. package/components/slider/slider.scss +258 -0
  42. package/components/switch/README.md +49 -0
  43. package/components/switch/switch.scss +176 -0
  44. package/components/textfield/README.md +75 -0
  45. package/components/textfield/index.ts +81 -0
  46. package/components/textfield/textfield.scss +387 -0
  47. package/components.ts +169 -0
  48. package/dist/bottomsheet.css +1 -0
  49. package/dist/bottomsheet.js +0 -0
  50. package/dist/button.css +1 -0
  51. package/dist/button.js +0 -0
  52. package/dist/card.css +1 -0
  53. package/dist/card.js +0 -0
  54. package/dist/checkbox.css +1 -0
  55. package/dist/checkbox.js +0 -0
  56. package/dist/dialog.css +1 -0
  57. package/dist/dialog.js +0 -0
  58. package/dist/divider.css +1 -0
  59. package/dist/divider.js +0 -0
  60. package/dist/iconbutton.css +1 -0
  61. package/dist/iconbutton.js +0 -0
  62. package/dist/list.css +1 -0
  63. package/dist/list.js +0 -0
  64. package/dist/menu.css +1 -0
  65. package/dist/menu.js +0 -0
  66. package/dist/micl.css +1 -0
  67. package/dist/micl.js +1 -0
  68. package/dist/radio.css +1 -0
  69. package/dist/radio.js +0 -0
  70. package/dist/select.css +1 -0
  71. package/dist/select.js +0 -0
  72. package/dist/sidesheet.css +1 -0
  73. package/dist/sidesheet.js +0 -0
  74. package/dist/slider.css +1 -0
  75. package/dist/slider.js +0 -0
  76. package/dist/switch.css +1 -0
  77. package/dist/switch.js +0 -0
  78. package/dist/textfield.css +1 -0
  79. package/dist/textfield.js +0 -0
  80. package/docs/accordion.html +285 -0
  81. package/docs/bottomsheet.html +162 -0
  82. package/docs/button.html +206 -0
  83. package/docs/card-awards.webp +0 -0
  84. package/docs/card-cabinet.webp +0 -0
  85. package/docs/card-city.webp +0 -0
  86. package/docs/card-fingerprint.webp +0 -0
  87. package/docs/card-holiday.webp +0 -0
  88. package/docs/card-names.webp +0 -0
  89. package/docs/card.html +91 -0
  90. package/docs/checkbox.html +99 -0
  91. package/docs/dialog.html +153 -0
  92. package/docs/divider.html +103 -0
  93. package/docs/docs.css +34 -0
  94. package/docs/docs.js +69 -0
  95. package/docs/iconbutton.html +197 -0
  96. package/docs/index.html +319 -0
  97. package/docs/list.html +224 -0
  98. package/docs/menu.html +143 -0
  99. package/docs/micl.css +1 -0
  100. package/docs/micl.js +1 -0
  101. package/docs/radio.html +101 -0
  102. package/docs/select.html +205 -0
  103. package/docs/sidesheet.html +115 -0
  104. package/docs/slider.html +72 -0
  105. package/docs/switch.html +151 -0
  106. package/docs/textfield.html +151 -0
  107. package/docs/themes/airblue/dark-hc.css +51 -0
  108. package/docs/themes/airblue/dark-mc.css +51 -0
  109. package/docs/themes/airblue/dark.css +51 -0
  110. package/docs/themes/airblue/light-hc.css +51 -0
  111. package/docs/themes/airblue/light-mc.css +51 -0
  112. package/docs/themes/airblue/light.css +51 -0
  113. package/docs/themes/airblue/theme.css +306 -0
  114. package/docs/themes/barnred/dark-hc.css +51 -0
  115. package/docs/themes/barnred/dark-mc.css +51 -0
  116. package/docs/themes/barnred/dark.css +51 -0
  117. package/docs/themes/barnred/light-hc.css +51 -0
  118. package/docs/themes/barnred/light-mc.css +51 -0
  119. package/docs/themes/barnred/light.css +51 -0
  120. package/docs/themes/barnred/theme.css +306 -0
  121. package/docs/themes/citrine/dark-hc.css +51 -0
  122. package/docs/themes/citrine/dark-mc.css +51 -0
  123. package/docs/themes/citrine/dark.css +51 -0
  124. package/docs/themes/citrine/light-hc.css +51 -0
  125. package/docs/themes/citrine/light-mc.css +51 -0
  126. package/docs/themes/citrine/light.css +51 -0
  127. package/docs/themes/citrine/theme.css +306 -0
  128. package/docs/themes/olivegreen/dark-hc.css +51 -0
  129. package/docs/themes/olivegreen/dark-mc.css +51 -0
  130. package/docs/themes/olivegreen/dark.css +51 -0
  131. package/docs/themes/olivegreen/light-hc.css +51 -0
  132. package/docs/themes/olivegreen/light-mc.css +51 -0
  133. package/docs/themes/olivegreen/light.css +51 -0
  134. package/docs/themes/olivegreen/theme.css +306 -0
  135. package/package.json +62 -0
  136. package/styles/README.md +99 -0
  137. package/styles/elevation.scss +36 -0
  138. package/styles/motion.scss +124 -0
  139. package/styles/ripple.scss +50 -0
  140. package/styles/shapes.scss +46 -0
  141. package/styles/statelayer.scss +42 -0
  142. package/styles/typography.scss +568 -0
  143. package/styles.scss +43 -0
  144. package/themes/README.md +57 -0
  145. package/themes/airblue/dark-hc.css +51 -0
  146. package/themes/airblue/dark-mc.css +51 -0
  147. package/themes/airblue/dark.css +51 -0
  148. package/themes/airblue/light-hc.css +51 -0
  149. package/themes/airblue/light-mc.css +51 -0
  150. package/themes/airblue/light.css +51 -0
  151. package/themes/airblue/theme.css +306 -0
  152. package/themes/barnred/dark-hc.css +51 -0
  153. package/themes/barnred/dark-mc.css +51 -0
  154. package/themes/barnred/dark.css +51 -0
  155. package/themes/barnred/light-hc.css +51 -0
  156. package/themes/barnred/light-mc.css +51 -0
  157. package/themes/barnred/light.css +51 -0
  158. package/themes/barnred/theme.css +306 -0
  159. package/themes/citrine/dark-hc.css +51 -0
  160. package/themes/citrine/dark-mc.css +51 -0
  161. package/themes/citrine/dark.css +51 -0
  162. package/themes/citrine/light-hc.css +51 -0
  163. package/themes/citrine/light-mc.css +51 -0
  164. package/themes/citrine/light.css +51 -0
  165. package/themes/citrine/theme.css +306 -0
  166. package/themes/olivegreen/dark-hc.css +51 -0
  167. package/themes/olivegreen/dark-mc.css +51 -0
  168. package/themes/olivegreen/dark.css +51 -0
  169. package/themes/olivegreen/light-hc.css +51 -0
  170. package/themes/olivegreen/light-mc.css +51 -0
  171. package/themes/olivegreen/light.css +51 -0
  172. package/themes/olivegreen/theme.css +306 -0
  173. package/tsconfig.json +110 -0
  174. package/webpack.config.js +49 -0
package/docs/divider.html ADDED
@@ -0,0 +1,103 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MICL Dividers</title>
7
+ <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=dark_mode&display=block">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
+ <link rel="stylesheet" href="docs.css">
12
+ <style>
13
+ p {
14
+ color: var(--md-sys-color-on-surface);
15
+ }
16
+ .micl-card__content {
17
+ padding-inline: 0;
18
+ }
19
+ p.md-sys-typescale-label-large {
20
+ margin: 3rem 2rem 1rem;
21
+ }
22
+ .verticalbox {
23
+ display: flex;
24
+ flex-wrap: nowrap;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="light">
29
+ <div class="headline">
30
+ <h1 class="md-sys-typescale-emphasized-display-small">Dividers</h1>
31
+ <div id="settings-placeholder"></div>
32
+ </div>
33
+
34
+ <div class="cards">
35
+ <div class="micl-card-elevated">
36
+ <div class="micl-card__content">
37
+ <p class="md-sys-typescale-label-large">Full width:</p>
38
+ <hr class="micl-divider">
39
+ <p class="md-sys-typescale-label-large">Inset:</p>
40
+ <hr class="micl-divider-inset">
41
+ <p class="md-sys-typescale-label-large">Inset start:</p>
42
+ <hr class="micl-divider-inset--start">
43
+ <p class="md-sys-typescale-label-large">Inset end:</p>
44
+ <hr class="micl-divider-inset--end">
45
+ <p></p>
46
+ </div>
47
+ </div>
48
+ <div class="micl-card-filled">
49
+ <div class="micl-card__content">
50
+ <p class="md-sys-typescale-label-large">Full width:</p>
51
+ <hr class="micl-divider">
52
+ <p class="md-sys-typescale-label-large">Inset:</p>
53
+ <hr class="micl-divider-inset">
54
+ <p class="md-sys-typescale-label-large">Inset start:</p>
55
+ <hr class="micl-divider-inset--start">
56
+ <p class="md-sys-typescale-label-large">Inset end:</p>
57
+ <hr class="micl-divider-inset--end">
58
+ <p></p>
59
+ </div>
60
+ </div>
61
+ <div class="micl-card-outlined">
62
+ <div class="micl-card__content">
63
+ <p class="md-sys-typescale-label-large">Full width:</p>
64
+ <hr class="micl-divider">
65
+ <p class="md-sys-typescale-label-large">Inset:</p>
66
+ <hr class="micl-divider-inset">
67
+ <p class="md-sys-typescale-label-large">Inset start:</p>
68
+ <hr class="micl-divider-inset--start">
69
+ <p class="md-sys-typescale-label-large">Inset end:</p>
70
+ <hr class="micl-divider-inset--end">
71
+ <p></p>
72
+ </div>
73
+ </div>
74
+ <div class="micl-card-elevated">
75
+ <div class="micl-card__content">
76
+ <div class="verticalbox">
77
+ <p class="md-sys-typescale-label-large">Full height:</p>
78
+ <hr class="micl-divider-vertical">
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div class="micl-card-filled">
83
+ <div class="micl-card__content">
84
+ <div class="verticalbox">
85
+ <p class="md-sys-typescale-label-large">Full height:</p>
86
+ <hr class="micl-divider-vertical">
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <div class="micl-card-outlined">
91
+ <div class="micl-card__content">
92
+ <div class="verticalbox">
93
+ <p class="md-sys-typescale-label-large">Full height:</p>
94
+ <hr class="micl-divider-vertical">
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <script src="micl.js"></script>
101
+ <script src="docs.js"></script>
102
+ </body>
103
+ </html>
package/docs/docs.css ADDED
@@ -0,0 +1,34 @@
1
+ body {
2
+ margin: 0;
3
+ padding: 16px;
4
+ background-color: var(--md-sys-color-background);
5
+ }
6
+ .headline {
7
+ display: flex;
8
+ align-items: center;
9
+ column-gap: 16px;
10
+ }
11
+ h1 {
12
+ color: var(--md-sys-color-on-surface);
13
+ }
14
+ #settings-theme {
15
+ padding-block: 16px;
16
+
17
+ label {
18
+ color: var(--md-sys-color-on-surface);
19
+ }
20
+ }
21
+ #settings-directionality {
22
+ display: flex;
23
+ align-items: center;
24
+ column-gap: 16px;
25
+ margin-block: 24px 4px;
26
+ }
27
+ .cards {
28
+ display: flex;
29
+ flex-direction: row;
30
+ flex-wrap: wrap;
31
+ }
32
+ .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
33
+ width: 360px;
34
+ }
package/docs/docs.js ADDED
@@ -0,0 +1,69 @@
1
+ document.getElementById('settings-placeholder').innerHTML =
2
+ `<button class="micl-iconbutton-standard-m material-symbols-outlined" popovertarget="settings" popovertargetaction="toggle">dark_mode</button>
3
+ <dialog id="settings" class="micl-dialog" closedby="any" popover>
4
+ <div class="micl-dialog__headline">
5
+ <h2>Settings</h2>
6
+ </div>
7
+ <div class="micl-dialog__content">
8
+ <div class="micl-textfield-outlined">
9
+ <label for="theme">Theme</label>
10
+ <select id="theme">
11
+ <option class="micl-list-item-one" value="airblue">
12
+ <span class="micl-list-item__text">Air blue</span>
13
+ </option>
14
+ <option class="micl-list-item-one" value="barnred">
15
+ <span class="micl-list-item__text">Barn red</span>
16
+ </option>
17
+ <option class="micl-list-item-one" selected value="citrine">
18
+ <span class="micl-list-item__text">Citrine</span>
19
+ </option>
20
+ <option class="micl-list-item-one" value="olivegreen">
21
+ <span class="micl-list-item__text">Olive green</span>
22
+ </option>
23
+ </select>
24
+ </div>
25
+ <div class="micl-textfield-outlined" style="margin-block-start:24px">
26
+ <label for="mode">Mode</label>
27
+ <select id="mode">
28
+ <option class="micl-list-item-one" selected value="light">
29
+ <span class="micl-list-item__text">Light</span>
30
+ </option>
31
+ <option class="micl-list-item-one" value="light-medium-contrast">
32
+ <span class="micl-list-item__text">Light Medium Contrast</span>
33
+ </option>
34
+ <option class="micl-list-item-one" value="light-high-contrast">
35
+ <span class="micl-list-item__text">Light High Contrast</span>
36
+ </option>
37
+ <option class="micl-list-item-one" value="dark">
38
+ <span class="micl-list-item__text">Dark</span>
39
+ </option>
40
+ <option class="micl-list-item-one" value="dark-medium-contrast">
41
+ <span class="micl-list-item__text">Dark Medium Contrast</span>
42
+ </option>
43
+ <option class="micl-list-item-one" value="dark-high-contrast">
44
+ <span class="micl-list-item__text">Dark High Contrast</span>
45
+ </option>
46
+ </select>
47
+ </div>
48
+ <div id="settings-directionality">
49
+ <label for="directionality" class="md-sys-typescale-body-medium">Right to left:</label>
50
+ <input type="checkbox" class="micl-switch" id="directionality" role="switch">
51
+ </div>
52
+ </div>
53
+ <div class="micl-dialog__actions">
54
+ <button type="button" class="micl-button-text-s" popovertarget="settings">Close</button>
55
+ </div>
56
+ </dialog>`;
57
+
58
+ document.getElementById('theme').addEventListener('change', event => {
59
+ const themelink = document.getElementById('theme-link');
60
+ if (themelink) {
61
+ themelink.href = `themes/${event.target.value}/theme.css`
62
+ }
63
+ });
64
+ document.getElementById('mode').addEventListener('change', event => {
65
+ document.body.setAttribute('class', event.target.value);
66
+ });
67
+ document.getElementById('directionality').addEventListener('change', event => {
68
+ document.documentElement.setAttribute('dir', event.target.checked ? 'rtl' : 'ltr');
69
+ });
package/docs/iconbutton.html ADDED
@@ -0,0 +1,197 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MICL Icon Buttons</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,settings&display=block">
11
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
12
+ <link rel="stylesheet" href="micl.css">
13
+ <link rel="stylesheet" href="docs.css">
14
+ <style>
15
+ .micl-card__content {
16
+ padding-block: 16px;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="light">
21
+ <div class="headline">
22
+ <h1 class="md-sys-typescale-emphasized-display-small">Icon buttons</h1>
23
+ <div id="settings-placeholder"></div>
24
+ </div>
25
+
26
+ <!-- <div class="micl-card-filled"> -->
27
+ <!-- <div class="micl-card__content"> -->
28
+ <div>
29
+ <button class="micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
30
+ <button class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
31
+ <button class="micl-iconbutton-standard-m material-symbols-outlined" aria-label="Control Panel">settings</button>
32
+ <button class="micl-iconbutton-standard-l material-symbols-outlined" aria-label="Control Panel">settings</button>
33
+ <button class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
34
+ <button class="micl-iconbutton-standard-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
35
+ <button class="micl-iconbutton-standard-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
36
+ <button class="micl-iconbutton-standard-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
37
+ <button class="micl-iconbutton-standard-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
38
+ <button class="micl-iconbutton-standard-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
39
+ <button class="micl-iconbutton-standard-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
40
+ <button class="micl-iconbutton-standard-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
41
+ <button class="micl-iconbutton-standard-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
42
+ <button class="micl-iconbutton-standard-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
43
+ <button class="micl-iconbutton-standard-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
44
+ </div>
45
+ <div>
46
+ <button class="micl-iconbutton-standard-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
47
+ <button class="micl-iconbutton-standard-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
48
+ <button class="micl-iconbutton-standard-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
49
+ <button class="micl-iconbutton-standard-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
50
+ <button class="micl-iconbutton-standard-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
51
+ <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
52
+ <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
53
+ <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
54
+ <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
55
+ <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
56
+ <button class="micl-iconbutton-standard-xs micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
57
+ <button class="micl-iconbutton-standard-s micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
58
+ <button class="micl-iconbutton-standard-m micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
59
+ <button class="micl-iconbutton-standard-l micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
60
+ <button class="micl-iconbutton-standard-xl micl-button--square micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
61
+ </div>
62
+ <div>
63
+ <button class="micl-iconbutton-filled-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
64
+ <button class="micl-iconbutton-filled-s material-symbols-outlined" aria-label="Control Panel">settings</button>
65
+ <button class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
66
+ <button class="micl-iconbutton-filled-l material-symbols-outlined" aria-label="Control Panel">settings</button>
67
+ <button class="micl-iconbutton-filled-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
68
+ <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
69
+ <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
70
+ <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
71
+ <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
72
+ <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
73
+ <button class="micl-iconbutton-filled-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
74
+ <button class="micl-iconbutton-filled-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
75
+ <button class="micl-iconbutton-filled-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
76
+ <button class="micl-iconbutton-filled-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
77
+ <button class="micl-iconbutton-filled-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
78
+ </div>
79
+ <div>
80
+ <button class="micl-iconbutton-filled-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
81
+ <button class="micl-iconbutton-filled-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
82
+ <button class="micl-iconbutton-filled-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
83
+ <button class="micl-iconbutton-filled-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
84
+ <button class="micl-iconbutton-filled-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
85
+ <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
86
+ <button class="micl-iconbutton-filled-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
87
+ <button class="micl-iconbutton-filled-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
88
+ <button class="micl-iconbutton-filled-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
89
+ <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
90
+ <button class="micl-iconbutton-filled-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
91
+ <button class="micl-iconbutton-filled-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
92
+ <button class="micl-iconbutton-filled-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
93
+ <button class="micl-iconbutton-filled-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
94
+ <button class="micl-iconbutton-filled-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
95
+ </div>
96
+ <div>
97
+ <button class="micl-iconbutton-tonal-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
98
+ <button class="micl-iconbutton-tonal-s material-symbols-outlined" aria-label="Control Panel">settings</button>
99
+ <button class="micl-iconbutton-tonal-m material-symbols-outlined" aria-label="Control Panel">settings</button>
100
+ <button class="micl-iconbutton-tonal-l material-symbols-outlined" aria-label="Control Panel">settings</button>
101
+ <button class="micl-iconbutton-tonal-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
102
+ <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
103
+ <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
104
+ <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
105
+ <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
106
+ <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
107
+ <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
108
+ <button class="micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
109
+ <button class="micl-iconbutton-tonal-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
110
+ <button class="micl-iconbutton-tonal-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
111
+ <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
112
+ </div>
113
+ <div>
114
+ <button class="micl-iconbutton-tonal-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
115
+ <button class="micl-iconbutton-tonal-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
116
+ <button class="micl-iconbutton-tonal-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
117
+ <button class="micl-iconbutton-tonal-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
118
+ <button class="micl-iconbutton-tonal-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
119
+ <button class="micl-iconbutton-tonal-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
120
+ <button class="micl-iconbutton-tonal-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
121
+ <button class="micl-iconbutton-tonal-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
122
+ <button class="micl-iconbutton-tonal-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
123
+ <button class="micl-iconbutton-tonal-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
124
+ <button class="micl-iconbutton-tonal-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
125
+ <button class="micl-iconbutton-tonal-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
126
+ <button class="micl-iconbutton-tonal-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
127
+ <button class="micl-iconbutton-tonal-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
128
+ <button class="micl-iconbutton-tonal-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
129
+ </div>
130
+ <div>
131
+ <button class="micl-iconbutton-outlined-xs material-symbols-outlined" aria-label="Control Panel">settings</button>
132
+ <button class="micl-iconbutton-outlined-s material-symbols-outlined" aria-label="Control Panel">settings</button>
133
+ <button class="micl-iconbutton-outlined-m material-symbols-outlined" aria-label="Control Panel">settings</button>
134
+ <button class="micl-iconbutton-outlined-l material-symbols-outlined" aria-label="Control Panel">settings</button>
135
+ <button class="micl-iconbutton-outlined-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
136
+ <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
137
+ <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
138
+ <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
139
+ <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
140
+ <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow material-symbols-outlined" aria-label="Control Panel">settings</button>
141
+ <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
142
+ <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
143
+ <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
144
+ <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
145
+ <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" aria-label="Control Panel">settings</button>
146
+ </div>
147
+ <div>
148
+ <button class="micl-iconbutton-outlined-xs micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
149
+ <button class="micl-iconbutton-outlined-s micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
150
+ <button class="micl-iconbutton-outlined-m micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
151
+ <button class="micl-iconbutton-outlined-l micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
152
+ <button class="micl-iconbutton-outlined-xl micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
153
+ <button class="micl-iconbutton-outlined-xs micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
154
+ <button class="micl-iconbutton-outlined-s micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
155
+ <button class="micl-iconbutton-outlined-m micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
156
+ <button class="micl-iconbutton-outlined-l micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
157
+ <button class="micl-iconbutton-outlined-xl micl-iconbutton--narrow micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
158
+ <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
159
+ <button class="micl-iconbutton-outlined-s micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
160
+ <button class="micl-iconbutton-outlined-m micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
161
+ <button class="micl-iconbutton-outlined-l micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
162
+ <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide micl-button--square material-symbols-outlined" aria-label="Control Panel">settings</button>
163
+ </div>
164
+ <div>
165
+ <button class="micl-iconbutton-standard-xs material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
166
+ <button class="micl-iconbutton-standard-s material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
167
+ <button class="micl-iconbutton-standard-m material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
168
+ <button class="micl-iconbutton-standard-l material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
169
+ <button class="micl-iconbutton-standard-xl material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
170
+ <button class="micl-iconbutton-filled-xs micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
171
+ <button class="micl-iconbutton-filled-s micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
172
+ <button class="micl-iconbutton-filled-m micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
173
+ <button class="micl-iconbutton-filled-l micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
174
+ <button class="micl-iconbutton-filled-xl micl-iconbutton--narrow material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
175
+ <button class="micl-iconbutton-outlined-xs micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
176
+ <button class="micl-iconbutton-outlined-s micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
177
+ <button class="micl-iconbutton-outlined-m micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
178
+ <button class="micl-iconbutton-outlined-l micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
179
+ <button class="micl-iconbutton-outlined-xl micl-iconbutton--wide material-symbols-outlined" disabled aria-label="Control Panel">settings</button>
180
+ </div>
181
+ <div>
182
+ <button class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
183
+ <button class="micl-iconbutton-standard-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
184
+ <button class="micl-iconbutton-filled-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
185
+ <button class="micl-iconbutton-filled-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
186
+ <button class="micl-iconbutton-tonal-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
187
+ <button class="micl-iconbutton-tonal-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
188
+ <button class="micl-iconbutton-outlined-m micl-button--toggle material-symbols-outlined" aria-label="Control Panel">settings</button>
189
+ <button class="micl-iconbutton-outlined-m micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
190
+ </div>
191
+ <!-- </div> -->
192
+ <!-- </div> -->
193
+
194
+ <script src="micl.js"></script>
195
+ <script src="docs.js"></script>
196
+ </body>
197
+ </html>