material-inspired-component-library 1.0.2 → 1.0.3

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 (91) hide show
  1. package/README.md +8 -8
  2. package/components/accordion/README.md +5 -2
  3. package/components/bottomsheet/README.md +5 -2
  4. package/components/button/README.md +5 -2
  5. package/components/card/README.md +4 -1
  6. package/components/checkbox/README.md +5 -2
  7. package/components/dialog/README.md +4 -1
  8. package/components/divider/README.md +4 -1
  9. package/components/iconbutton/README.md +5 -2
  10. package/components/list/README.md +5 -2
  11. package/components/menu/README.md +4 -4
  12. package/components/radio/README.md +4 -1
  13. package/components/select/README.md +5 -5
  14. package/components/sidesheet/README.md +4 -1
  15. package/components/slider/README.md +5 -2
  16. package/components/switch/README.md +4 -1
  17. package/components/textfield/README.md +5 -2
  18. package/docs/accordion.html +3 -3
  19. package/docs/bottomsheet.html +11 -11
  20. package/docs/button.html +3 -3
  21. package/docs/card-awards.webp +0 -0
  22. package/docs/card-cabinet.webp +0 -0
  23. package/docs/card-city.webp +0 -0
  24. package/docs/card-fingerprint.webp +0 -0
  25. package/docs/card-holiday.webp +0 -0
  26. package/docs/card-names.webp +0 -0
  27. package/docs/card.html +6 -6
  28. package/docs/checkbox.html +3 -3
  29. package/docs/dialog.html +3 -3
  30. package/docs/divider.html +3 -3
  31. package/docs/docs.js +1 -1
  32. package/docs/iconbutton.html +3 -3
  33. package/docs/index.html +5 -5
  34. package/docs/list.html +3 -3
  35. package/docs/menu.html +3 -3
  36. package/docs/micl.css +1 -0
  37. package/docs/micl.js +1 -0
  38. package/docs/radio.html +3 -3
  39. package/docs/select.html +3 -3
  40. package/docs/sidesheet.html +3 -3
  41. package/docs/slider.html +3 -3
  42. package/docs/switch.html +3 -3
  43. package/docs/textfield.html +3 -3
  44. package/docs/themes/airblue/dark-hc.css +51 -0
  45. package/docs/themes/airblue/dark-mc.css +51 -0
  46. package/docs/themes/airblue/dark.css +51 -0
  47. package/docs/themes/airblue/light-hc.css +51 -0
  48. package/docs/themes/airblue/light-mc.css +51 -0
  49. package/docs/themes/airblue/light.css +51 -0
  50. package/docs/themes/airblue/theme.css +306 -0
  51. package/docs/themes/barnred/dark-hc.css +51 -0
  52. package/docs/themes/barnred/dark-mc.css +51 -0
  53. package/docs/themes/barnred/dark.css +51 -0
  54. package/docs/themes/barnred/light-hc.css +51 -0
  55. package/docs/themes/barnred/light-mc.css +51 -0
  56. package/docs/themes/barnred/light.css +51 -0
  57. package/docs/themes/barnred/theme.css +306 -0
  58. package/docs/themes/citrine/dark-hc.css +51 -0
  59. package/docs/themes/citrine/dark-mc.css +51 -0
  60. package/docs/themes/citrine/dark.css +51 -0
  61. package/docs/themes/citrine/light-hc.css +51 -0
  62. package/docs/themes/citrine/light-mc.css +51 -0
  63. package/docs/themes/citrine/light.css +51 -0
  64. package/docs/themes/citrine/theme.css +306 -0
  65. package/docs/themes/olivegreen/dark-hc.css +51 -0
  66. package/docs/themes/olivegreen/dark-mc.css +51 -0
  67. package/docs/themes/olivegreen/dark.css +51 -0
  68. package/docs/themes/olivegreen/light-hc.css +51 -0
  69. package/docs/themes/olivegreen/light-mc.css +51 -0
  70. package/docs/themes/olivegreen/light.css +51 -0
  71. package/docs/themes/olivegreen/theme.css +306 -0
  72. package/package.json +2 -2
  73. package/styles/README.md +5 -5
  74. package/styles.scss +15 -15
  75. package/themes/README.md +1 -1
  76. package/webpack.config.js +1 -1
  77. /package/components/bottomsheet/{bottomsheet.scss → index.scss} +0 -0
  78. /package/components/button/{button.scss → index.scss} +0 -0
  79. /package/components/card/{card.scss → index.scss} +0 -0
  80. /package/components/checkbox/{checkbox.scss → index.scss} +0 -0
  81. /package/components/dialog/{dialog.scss → index.scss} +0 -0
  82. /package/components/divider/{divider.scss → index.scss} +0 -0
  83. /package/components/iconbutton/{iconbutton.scss → index.scss} +0 -0
  84. /package/components/list/{list.scss → index.scss} +0 -0
  85. /package/components/menu/{menu.scss → index.scss} +0 -0
  86. /package/components/radio/{radio.scss → index.scss} +0 -0
  87. /package/components/select/{select.scss → index.scss} +0 -0
  88. /package/components/sidesheet/{sidesheet.scss → index.scss} +0 -0
  89. /package/components/slider/{slider.scss → index.scss} +0 -0
  90. /package/components/switch/{switch.scss → index.scss} +0 -0
  91. /package/components/textfield/{textfield.scss → index.scss} +0 -0
package/docs/divider.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <title>MICL Dividers</title>
7
7
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
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="../dist/micl.css">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
13
13
  p {
@@ -97,7 +97,7 @@
97
97
  </div>
98
98
  </div>
99
99
 
100
- <script src="../dist/micl.js"></script>
100
+ <script src="micl.js"></script>
101
101
  <script src="docs.js"></script>
102
102
  </body>
103
103
  </html>
package/docs/docs.js CHANGED
@@ -58,7 +58,7 @@ document.getElementById('settings-placeholder').innerHTML =
58
58
  document.getElementById('theme').addEventListener('change', event => {
59
59
  const themelink = document.getElementById('theme-link');
60
60
  if (themelink) {
61
- themelink.href = `../themes/${event.target.value}/theme.css`
61
+ themelink.href = `themes/${event.target.value}/theme.css`
62
62
  }
63
63
  });
64
64
  document.getElementById('mode').addEventListener('change', event => {
package/docs/iconbutton.html CHANGED
@@ -8,8 +8,8 @@
8
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
9
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
10
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="../dist/micl.css">
11
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
12
+ <link rel="stylesheet" href="micl.css">
13
13
  <link rel="stylesheet" href="docs.css">
14
14
  <style>
15
15
  .micl-card__content {
@@ -191,7 +191,7 @@
191
191
  <!-- </div> -->
192
192
  <!-- </div> -->
193
193
 
194
- <script src="../dist/micl.js"></script>
194
+ <script src="micl.js"></script>
195
195
  <script src="docs.js"></script>
196
196
  </body>
197
197
  </html>
package/docs/index.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <title>MICL Showcase</title>
7
7
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,globe,link,more_vert,newspaper,person,share&display=block">
9
- <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
10
- <link rel="stylesheet" href="../dist/micl.css">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
13
13
  a {
@@ -86,7 +86,7 @@
86
86
  </div>
87
87
 
88
88
  <div class="micl-card-outlined">
89
- <a title="Alexander Gerst, CC BY-SA 2.0 &lt;https://creativecommons.org/licenses/by-sa/2.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Atmosphere_-_2.jpg"><img class="micl-card__image" alt="atmosphere" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715"></a>
89
+ <img class="micl-card__image" alt="city" src="card-city.webp">
90
90
  <div class="micl-card__headline-l">
91
91
  <h2>Card</h2>
92
92
  </div>
@@ -147,7 +147,7 @@
147
147
  </span>
148
148
  </li>
149
149
  <li class="micl-list-item-three" tabindex="0">
150
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
150
+ <span class="micl-list-item__image" style="background-image:url(card-names.webp);background-position:center"></span>
151
151
  <span class="micl-list-item__text">
152
152
  <span class="micl-list-item__headline">Three-line list item</span>
153
153
  <span class="micl-list-item__supporting-text">Supporting text</span>
@@ -313,7 +313,7 @@
313
313
  </div>
314
314
  </div>
315
315
 
316
- <script src="../dist/micl.js"></script>
316
+ <script src="micl.js"></script>
317
317
  <script src="docs.js"></script>
318
318
  </body>
319
319
  </html>
package/docs/list.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <title>MICL Lists</title>
7
7
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,person,search,settings&display=block">
9
- <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
10
- <link rel="stylesheet" href="../dist/micl.css">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
13
13
  .micl-card__content {
@@ -218,7 +218,7 @@
218
218
  </div>
219
219
  </div>
220
220
 
221
- <script src="../dist/micl.js"></script>
221
+ <script src="micl.js"></script>
222
222
  <script src="docs.js"></script>
223
223
  </body>
224
224
  </html>
package/docs/menu.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <title>MICL Menus</title>
7
7
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
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="../dist/micl.css">
9
+ <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
10
+ <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
13
13
  .micl-list-item-three:has(.micl-checkbox) .micl-list-item__icon {
@@ -137,7 +137,7 @@
137
137
  </div>
138
138
  </div>
139
139
 
140
- <script src="../dist/micl.js"></script>
140
+ <script src="micl.js"></script>
141
141
  <script src="docs.js"></script>
142
142
  </body>
143
143
  </html>