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/menu.html ADDED
@@ -0,0 +1,143 @@
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 Menus</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=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&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
+ .micl-list-item-three:has(.micl-checkbox) .micl-list-item__icon {
14
+ visibility: hidden;
15
+ }
16
+ .micl-list-item-three:has(.micl-checkbox:checked) .micl-list-item__icon {
17
+ visibility: visible;
18
+ }
19
+ .micl-card__content {
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: flex-start;
23
+ padding-block: 32px;
24
+ row-gap: 32px;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="light">
29
+ <div class="headline">
30
+ <h1 class="md-sys-typescale-emphasized-display-small">Menus</h1>
31
+ <div id="settings-placeholder"></div>
32
+ </div>
33
+
34
+ <div class="cards">
35
+ <div class="micl-card-outlined">
36
+ <div class="micl-card__content">
37
+ <div style="position:relative">
38
+ <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu1">Open Basic Menu</button>
39
+ <nav id="mymenu1" class="micl-menu" popover>
40
+ <ul class="micl-list">
41
+ <li class="micl-list-item-one" tabindex="0">
42
+ <span class="micl-list-item__text">
43
+ <span class="micl-list-item__headline">Home</span>
44
+ </span>
45
+ </li>
46
+ <li class="micl-list-item-one">
47
+ <span class="micl-list-item__text">
48
+ <span class="micl-list-item__headline">About</span>
49
+ </span>
50
+ </li>
51
+ <li class="micl-list-item-one micl-list-item--disabled">
52
+ <span class="micl-list-item__text">
53
+ <span class="micl-list-item__headline">Contact</span>
54
+ </span>
55
+ </li>
56
+ </ul>
57
+ </nav>
58
+ </div>
59
+
60
+ <div style="position:relative">
61
+ <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu2">Open Menu</button>
62
+ <nav id="mymenu2" class="micl-menu" popover>
63
+ <ul class="micl-list">
64
+ <li class="micl-list-item-two" tabindex="0">
65
+ <span class="micl-list-item__icon material-symbols-outlined">home</span>
66
+ <span class="micl-list-item__text">
67
+ <span class="micl-list-item__headline">Home</span>
68
+ <span class="micl-list-item__supporting-text">Click here to go home</span>
69
+ </span>
70
+ </li>
71
+ <li class="micl-list-item-two">
72
+ <span class="micl-list-item__icon material-symbols-outlined">person</span>
73
+ <label for="cb1" class="micl-list-item__text">
74
+ <span class="micl-list-item__headline">Person</span>
75
+ <span class="micl-list-item__supporting-text">Are you an administrator?</span>
76
+ </label>
77
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
78
+ </li>
79
+ <li class="micl-list-item-two">
80
+ <span class="micl-list-item__icon material-symbols-outlined">settings</span>
81
+ <span class="micl-list-item__text">
82
+ <span class="micl-list-item__headline">About</span>
83
+ <span class="micl-list-item__supporting-text">Change everything in the system</span>
84
+ </span>
85
+ </li>
86
+ <li class="micl-list-item-two micl-list-item__divider">
87
+ <span class="micl-list-item__icon material-symbols-outlined">confirmation_number</span>
88
+ <span class="micl-list-item__text">
89
+ <span class="micl-list-item__headline">Contact</span>
90
+ <span class="micl-list-item__supporting-text">Call me!</span>
91
+ </span>
92
+ </li>
93
+ </ul>
94
+ </nav>
95
+ </div>
96
+
97
+ <div style="position:relative">
98
+ <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu3">Open Big Menu</button>
99
+ <nav id="mymenu3" class="micl-menu" popover>
100
+ <ul class="micl-list">
101
+ <li class="micl-list-item-three" tabindex="0">
102
+ <span class="micl-list-item__icon material-symbols-outlined">group</span>
103
+ <span class="micl-list-item__text">
104
+ <span class="micl-list-item__headline">Number of employees</span>
105
+ <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
106
+ </span>
107
+ <span class="micl-list-item__trailing-text">381</span>
108
+ </li>
109
+ <li class="micl-list-item-three">
110
+ <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>
111
+ <span class="micl-list-item__text">
112
+ <span class="micl-list-item__headline">Company cars</span>
113
+ <span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
114
+ </span>
115
+ </li>
116
+ <li class="micl-list-item-three">
117
+ <a href="https://www.nytimes.com" tabindex="-1">
118
+ <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
119
+ <span class="micl-list-item__text">
120
+ <span class="micl-list-item__headline">The New York Times</span>
121
+ <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
122
+ </span>
123
+ </a>
124
+ </li>
125
+ <li class="micl-list-item-three">
126
+ <span class="micl-list-item__icon material-symbols-outlined">check</span>
127
+ <label for="cb2" class="micl-list-item__text">
128
+ <span class="micl-list-item__headline">Select or Unselect</span>
129
+ <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
130
+ </label>
131
+ <input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2" tabindex="-1">
132
+ </li>
133
+ </ul>
134
+ </nav>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <script src="micl.js"></script>
141
+ <script src="docs.js"></script>
142
+ </body>
143
+ </html>