material-inspired-component-library 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +4 -0
  2. package/components/list/README.md +51 -21
  3. package/components/list/index.scss +115 -53
  4. package/components/list/index.ts +1 -1
  5. package/components/menu/index.scss +2 -2
  6. package/components/select/index.scss +1 -1
  7. package/components/slider/README.md +8 -0
  8. package/components/slider/index.scss +140 -51
  9. package/components/slider/index.ts +67 -31
  10. package/dist/list.css +1 -1
  11. package/dist/menu.css +1 -1
  12. package/dist/micl.css +1 -1
  13. package/dist/micl.js +1 -1
  14. package/dist/select.css +1 -1
  15. package/dist/slider.css +1 -1
  16. package/docs/accordion.html +1 -1
  17. package/docs/bottomsheet.html +2 -2
  18. package/docs/button.html +1 -1
  19. package/docs/card.html +1 -1
  20. package/docs/checkbox.html +1 -1
  21. package/docs/dialog.html +2 -2
  22. package/docs/divider.html +1 -1
  23. package/docs/iconbutton.html +1 -1
  24. package/docs/index.html +2 -2
  25. package/docs/list.html +51 -34
  26. package/docs/menu.html +15 -11
  27. package/docs/micl.css +1 -1
  28. package/docs/micl.js +1 -1
  29. package/docs/radio.html +1 -1
  30. package/docs/select.html +11 -9
  31. package/docs/sidesheet.html +1 -1
  32. package/docs/slider.html +57 -21
  33. package/docs/switch.html +1 -1
  34. package/docs/textfield.html +1 -1
  35. package/micl.ts +5 -1
  36. package/package.json +1 -1
  37. package/styles/layout.scss +74 -0
package/docs/list.html CHANGED
@@ -5,8 +5,8 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
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
- <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">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
9
+ <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
10
  <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
@@ -16,6 +16,10 @@
16
16
  row-gap: 8px;
17
17
  padding-block: 16px;
18
18
  }
19
+ input[type=checkbox].micl-switch {
20
+ --md-sys-switch-selected-icon: "";
21
+ --md-sys-switch-unselected-icon: "";
22
+ }
19
23
  </style>
20
24
  </head>
21
25
  <body class="light">
@@ -62,6 +66,7 @@
62
66
  <span class="micl-list-item__text">
63
67
  <span class="micl-list-item__headline">Headline</span>
64
68
  </span>
69
+ <span class="material-symbols-outlined micl-list-item__icon">more_horiz</span>
65
70
  </li>
66
71
  </ul>
67
72
  <ul class="micl-list" role="listbox">
@@ -71,6 +76,7 @@
71
76
  <span class="micl-list-item__headline">Headline</span>
72
77
  <span class="micl-list-item__supporting-text">Supporting text</span>
73
78
  </span>
79
+ <span class="material-symbols-outlined micl-list-item__icon">keyboard_arrow_right</span>
74
80
  </li>
75
81
  </ul>
76
82
  <ul class="micl-list" role="listbox">
@@ -95,7 +101,7 @@
95
101
  <div class="micl-card__content">
96
102
  <ul class="micl-list" role="listbox">
97
103
  <li class="micl-list-item-one" tabindex="0">
98
- <span class="material-symbols-outlined micl-list-item__avatar">settings</span>
104
+ <span class="micl-list-item__avatar">3</span>
99
105
  <span class="micl-list-item__text">
100
106
  <span class="micl-list-item__headline">Headline</span>
101
107
  </span>
@@ -103,7 +109,7 @@
103
109
  </ul>
104
110
  <ul class="micl-list" role="listbox">
105
111
  <li class="micl-list-item-two" tabindex="0">
106
- <span class="material-symbols-outlined micl-list-item__avatar">person</span>
112
+ <span class="micl-list-item__avatar">17</span>
107
113
  <span class="micl-list-item__text">
108
114
  <span class="micl-list-item__headline">Headline</span>
109
115
  <span class="micl-list-item__supporting-text">Supporting text</span>
@@ -112,14 +118,16 @@
112
118
  </ul>
113
119
  <ul class="micl-list" role="listbox">
114
120
  <li class="micl-list-item-three" tabindex="0">
115
- <span class="material-symbols-outlined micl-list-item__avatar">search</span>
116
- <span class="micl-list-item__text">
117
- <span class="micl-list-item__headline">Headline 1</span>
118
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
119
- </span>
121
+ <a href="https://www.thetimes.com/" tabindex="-1">
122
+ <span class="micl-list-item__avatar">T</span>
123
+ <span class="micl-list-item__text">
124
+ <span class="micl-list-item__headline">The Times</span>
125
+ <span class="micl-list-item__supporting-text">Selecting this item opens the front page of The Times.</span>
126
+ </span>
127
+ </a>
120
128
  </li>
121
129
  <li class="micl-list-item-three micl-list-item--disabled">
122
- <span class="material-symbols-outlined micl-list-item__avatar">confirmation_number</span>
130
+ <span class="micl-list-item__avatar">H</span>
123
131
  <span class="micl-list-item__text">
124
132
  <span class="micl-list-item__headline">Headline 2</span>
125
133
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
@@ -128,7 +136,7 @@
128
136
  </ul>
129
137
  <ul class="micl-list" role="listbox">
130
138
  <li class="micl-list-item-one" tabindex="0">
131
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
139
+ <span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
132
140
  <span class="micl-list-item__text">
133
141
  <span class="micl-list-item__headline">Headline</span>
134
142
  </span>
@@ -137,23 +145,26 @@
137
145
  </ul>
138
146
  <ul class="micl-list" role="listbox">
139
147
  <li class="micl-list-item-two" tabindex="0">
140
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg)"></span>
141
- <span class="micl-list-item__text">
142
- <span class="micl-list-item__headline">Headline</span>
143
- <span class="micl-list-item__supporting-text">Supporting text</span>
144
- </span>
148
+ <label>
149
+ <span class="micl-list-item__image" style="background-image:url(card-holiday.webp)"></span>
150
+ <span class="micl-list-item__text">
151
+ <span class="micl-list-item__headline">Headline</span>
152
+ <span class="micl-list-item__supporting-text">Supporting text</span>
153
+ </span>
154
+ <input type="checkbox" class="micl-switch" id="myswitch" value="c1" tabindex="-1">
155
+ </label>
145
156
  </li>
146
157
  </ul>
147
158
  <ul class="micl-list" role="listbox">
148
159
  <li class="micl-list-item-three" tabindex="0">
149
- <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>
160
+ <span class="micl-list-item__image" style="background-image:url(card-cabinet.webp)"></span>
150
161
  <span class="micl-list-item__text">
151
162
  <span class="micl-list-item__headline">Headline 1</span>
152
163
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
153
164
  </span>
154
165
  </li>
155
166
  <li class="micl-list-item-three">
156
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg/330px-Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg)"></span>
167
+ <span class="micl-list-item__image" style="background-image:url(card-awards.webp)"></span>
157
168
  <span class="micl-list-item__text">
158
169
  <span class="micl-list-item__headline">Headline 2</span>
159
170
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
@@ -166,7 +177,7 @@
166
177
  <div class="micl-card__content">
167
178
  <ul class="micl-list" role="listbox">
168
179
  <li class="micl-list-item-one" tabindex="0">
169
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
180
+ <span class="micl-list-item__thumbnail" style="background-image:url(card-city.webp)"></span>
170
181
  <span class="micl-list-item__text">
171
182
  <span class="micl-list-item__headline">Headline</span>
172
183
  </span>
@@ -174,24 +185,26 @@
174
185
  </ul>
175
186
  <ul class="micl-list" role="listbox">
176
187
  <li class="micl-list-item-two" tabindex="0">
177
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg)"></span>
178
- <label for="cb1" class="micl-list-item__text">
179
- <span class="micl-list-item__headline">Headline</span>
180
- <span class="micl-list-item__supporting-text">Supporting text</span>
188
+ <label>
189
+ <span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
190
+ <span class="micl-list-item__text">
191
+ <span class="micl-list-item__headline">Headline</span>
192
+ <span class="micl-list-item__supporting-text">Supporting text</span>
193
+ </span>
194
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
181
195
  </label>
182
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
183
196
  </li>
184
197
  </ul>
185
198
  <ul class="micl-list micl-list__divider" role="listbox">
186
199
  <li class="micl-list-item-three" tabindex="0">
187
- <span class="micl-list-item__thumbnail" 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>
200
+ <span class="micl-list-item__thumbnail" style="background-image:url(card-cabinet.webp)"></span>
188
201
  <span class="micl-list-item__text">
189
202
  <span class="micl-list-item__headline">Headline 1</span>
190
203
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
191
204
  </span>
192
205
  </li>
193
206
  <li class="micl-list-item-three">
194
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg/330px-Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg)"></span>
207
+ <span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
195
208
  <span class="micl-list-item__text">
196
209
  <span class="micl-list-item__headline">Headline 2</span>
197
210
  <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
@@ -200,18 +213,22 @@
200
213
  </ul>
201
214
  <ul class="micl-list micl-list__divider" role="listbox">
202
215
  <li class="micl-list-item-three" tabindex="0">
203
- <label for="cb2" class="micl-list-item__text">
204
- <span class="micl-list-item__headline">Headline 1</span>
205
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
216
+ <label>
217
+ <span class="micl-list-item__text">
218
+ <span class="micl-list-item__headline">Headline 1</span>
219
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
220
+ </span>
221
+ <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
206
222
  </label>
207
- <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
208
223
  </li>
209
224
  <li class="micl-list-item-three">
210
- <label for="cb3" class="micl-list-item__text">
211
- <span class="micl-list-item__headline">Headline 2</span>
212
- <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
225
+ <label>
226
+ <span class="micl-list-item__text">
227
+ <span class="micl-list-item__headline">Headline 2</span>
228
+ <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
229
+ </span>
230
+ <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
213
231
  </label>
214
- <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
215
232
  </li>
216
233
  </ul>
217
234
  </div>
package/docs/menu.html CHANGED
@@ -6,7 +6,7 @@
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">
9
+ <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
10
  <link rel="stylesheet" href="micl.css">
11
11
  <link rel="stylesheet" href="docs.css">
12
12
  <style>
@@ -69,12 +69,14 @@
69
69
  </span>
70
70
  </li>
71
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>
72
+ <label>
73
+ <span class="micl-list-item__icon material-symbols-outlined">person</span>
74
+ <span class="micl-list-item__text">
75
+ <span class="micl-list-item__headline">Person</span>
76
+ <span class="micl-list-item__supporting-text">Are you an administrator?</span>
77
+ </span>
78
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
76
79
  </label>
77
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
78
80
  </li>
79
81
  <li class="micl-list-item-two">
80
82
  <span class="micl-list-item__icon material-symbols-outlined">settings</span>
@@ -123,12 +125,14 @@
123
125
  </a>
124
126
  </li>
125
127
  <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>
128
+ <label>
129
+ <span class="micl-list-item__icon material-symbols-outlined">check</span>
130
+ <span class="micl-list-item__text">
131
+ <span class="micl-list-item__headline">Select or Unselect</span>
132
+ <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
133
+ </span>
134
+ <input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2" tabindex="-1">
130
135
  </label>
131
- <input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2" tabindex="-1">
132
136
  </li>
133
137
  </ul>
134
138
  </nav>