material-inspired-component-library 3.0.0 → 3.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 (67) hide show
  1. package/README.md +2 -2
  2. package/components/appbar/index.scss +2 -2
  3. package/components/badge/index.scss +22 -7
  4. package/components/button/index.scss +2 -2
  5. package/components/card/README.md +9 -5
  6. package/components/card/index.scss +49 -22
  7. package/components/checkbox/README.md +9 -0
  8. package/components/dialog/index.scss +3 -3
  9. package/components/divider/README.md +3 -3
  10. package/components/divider/index.scss +20 -29
  11. package/components/iconbutton/index.scss +2 -2
  12. package/components/list/README.md +4 -4
  13. package/components/list/index.scss +5 -5
  14. package/components/navigationrail/index.scss +5 -3
  15. package/components/radio/README.md +13 -4
  16. package/components/radio/index.scss +6 -4
  17. package/components/select/README.md +28 -6
  18. package/components/select/index.scss +60 -11
  19. package/components/slider/index.scss +4 -4
  20. package/components/stepper/index.scss +85 -0
  21. package/components/stepper/index.ts +163 -0
  22. package/components/switch/README.md +26 -4
  23. package/components/switch/index.scss +24 -23
  24. package/components/textfield/index.scss +4 -9
  25. package/components/textfield/index.ts +71 -30
  26. package/dist/appbar.css +1 -1
  27. package/dist/badge.css +1 -1
  28. package/dist/bottomsheet.css +1 -1
  29. package/dist/button.css +1 -1
  30. package/dist/card.css +1 -1
  31. package/dist/components/stepper/index.d.ts +5 -0
  32. package/dist/components/textfield/index.d.ts +3 -2
  33. package/dist/dialog.css +1 -1
  34. package/dist/divider.css +1 -1
  35. package/dist/iconbutton.css +1 -1
  36. package/dist/layout.css +1 -0
  37. package/dist/layout.js +1 -0
  38. package/dist/list.css +1 -1
  39. package/dist/menu.css +1 -1
  40. package/dist/micl.css +1 -1
  41. package/dist/micl.js +1 -1
  42. package/dist/navigationrail.css +1 -1
  43. package/dist/radio.css +1 -1
  44. package/dist/select.css +1 -1
  45. package/dist/sidesheet.css +1 -1
  46. package/dist/slider.css +1 -1
  47. package/dist/stepper.css +1 -0
  48. package/dist/stepper.js +1 -0
  49. package/dist/switch.css +1 -1
  50. package/dist/textfield.css +1 -1
  51. package/docs/card.html +25 -7
  52. package/docs/checkbox.html +12 -16
  53. package/docs/divider.html +7 -1
  54. package/docs/index.html +14 -15
  55. package/docs/list.html +6 -6
  56. package/docs/micl.css +1 -1
  57. package/docs/micl.js +1 -1
  58. package/docs/navigationrail.html +2 -3
  59. package/docs/radio.html +13 -17
  60. package/docs/select.html +46 -6
  61. package/docs/switch.html +41 -26
  62. package/layout/index.scss +37 -29
  63. package/micl.ts +23 -27
  64. package/package.json +5 -1
  65. package/styles/shapes.scss +0 -2
  66. package/styles.scss +1 -0
  67. package/webpack.config.js +1 -1
package/docs/card.html CHANGED
@@ -10,6 +10,23 @@
10
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
11
  <link rel="stylesheet" href="micl.css">
12
12
  <link rel="stylesheet" href="docs.css">
13
+ <style>
14
+ .micl-card__content:not(.docs-code) p {
15
+ margin: 0;
16
+ color: var(--md-sys-color-on-surface);
17
+ }
18
+ .docs-icon {
19
+ inline-size: 32px;
20
+ block-size: 32px;
21
+ margin: var(--md-sys-card-padding-inline);
22
+ border-radius: 16px;
23
+ background-color: var(--md-sys-color-primary);
24
+ color: var(--md-sys-color-on-primary);
25
+ font-size: 16px;
26
+ line-height: 32px;
27
+ text-align: center;
28
+ }
29
+ </style>
13
30
  </head>
14
31
  <body class="micl-window light">
15
32
  <main class="micl-body micl-body--stacked-to-large">
@@ -28,6 +45,7 @@
28
45
  <div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-expanded">
29
46
  <div class="micl-pane__column">
30
47
  <div class="micl-card-elevated" tabindex="0">
48
+ <div class="docs-icon" aria-hidden="true">A</div>
31
49
  <div class="micl-card__headline-s">
32
50
  <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
33
51
  </div>
@@ -46,7 +64,7 @@
46
64
  <p class="md-sys-typescale-body-medium">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>
47
65
  </div>
48
66
  </div>
49
- <div class="micl-card-outlined">
67
+ <div class="micl-card-outlined" tabindex="0">
50
68
  <div class="micl-card__headline-l">
51
69
  <h2>Lorem</h2>
52
70
  </div>
@@ -65,15 +83,15 @@
65
83
  <span class="micl-card__subhead">Dummy or placeholder text</span>
66
84
  <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
67
85
  </summary>
68
- <div class="micl-card__content" style="padding:0">
69
- <p class="md-sys-typescale-body-small" style="margin:16px">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>
70
- <hr class="micl-divider">
86
+ <div class="micl-card__content" style="padding-inline:0">
87
+ <p class="md-sys-typescale-body-small" style="padding-block-end:var(--md-sys-card-padding-inline);padding-inline:var(--md-sys-card-padding-inline)">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>
88
+ <hr class="micl-divider" style="--md-sys-divider-space:16px">
71
89
  <button type="button" class="micl-button-text-s">Share</button>
72
90
  </div>
73
91
  </details>
74
92
  <details class="micl-card-filled">
75
- <summary>
76
- <img alt="cabinet" class="micl-card__image" src="card-cabinet.webp">
93
+ <summary class="micl-card--compact">
94
+ <span class="micl-card__image" style="background-image:url(card-cabinet.webp);aspect-ratio:820/340"></span>
77
95
  <span class="micl-card__headline-m">
78
96
  <span class="micl-heading">Lorem ipsum</span>
79
97
  </span>
@@ -85,7 +103,7 @@
85
103
  </details>
86
104
  <details class="micl-card-outlined">
87
105
  <summary>
88
- <img alt="city" class="micl-card__image" src="card-city.webp">
106
+ <span class="micl-card__image" style="background-image:url(card-city.webp);aspect-ratio:820/340"></span>
89
107
  <span class="micl-card__headline-l">
90
108
  <span class="micl-heading">Lorem</span>
91
109
  </span>
package/docs/checkbox.html CHANGED
@@ -16,10 +16,6 @@
16
16
  flex-direction: column;
17
17
  align-items: flex-end;
18
18
  }
19
- .checkbox {
20
- display: flex;
21
- align-items: center;
22
- }
23
19
  </style>
24
20
  </head>
25
21
  <body class="micl-window light">
@@ -40,19 +36,19 @@
40
36
  <div class="micl-pane__column">
41
37
  <div class="micl-card-elevated">
42
38
  <div class="micl-card__content">
43
- <div class="checkbox">
39
+ <div class="micl-flex--vcenter">
44
40
  <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1">
45
41
  <label for="mycheckbox1" class="md-sys-typescale-body-medium">First Choice</label>
46
42
  </div>
47
- <div class="checkbox">
43
+ <div class="micl-flex--vcenter">
48
44
  <input type="checkbox" id="mycheckbox2" class="micl-checkbox" checked value="c2">
49
45
  <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second Choice</label>
50
46
  </div>
51
- <div class="checkbox">
47
+ <div class="micl-flex--vcenter">
52
48
  <input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
53
49
  <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice</label>
54
50
  </div>
55
- <div class="checkbox">
51
+ <div class="micl-flex--vcenter">
56
52
  <input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
57
53
  <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice</label>
58
54
  </div>
@@ -60,19 +56,19 @@
60
56
  </div>
61
57
  <div class="micl-card-filled">
62
58
  <div class="micl-card__content">
63
- <div class="checkbox">
59
+ <div class="micl-flex--vcenter">
64
60
  <label for="mycheckbox21" class="md-sys-typescale-body-medium">First Choice</label>
65
61
  <input type="checkbox" id="mycheckbox21" class="micl-checkbox" value="c1">
66
62
  </div>
67
- <div class="checkbox">
63
+ <div class="micl-flex--vcenter">
68
64
  <label for="mycheckbox22" class="md-sys-typescale-body-medium">Second Choice</label>
69
65
  <input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
70
66
  </div>
71
- <div class="checkbox">
67
+ <div class="micl-flex--vcenter">
72
68
  <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice</label>
73
69
  <input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
74
70
  </div>
75
- <div class="checkbox">
71
+ <div class="micl-flex--vcenter">
76
72
  <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice</label>
77
73
  <input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
78
74
  </div>
@@ -82,19 +78,19 @@
82
78
  <div class="micl-pane__column">
83
79
  <div class="micl-card-outlined">
84
80
  <div class="micl-card__content">
85
- <div class="checkbox">
81
+ <div class="micl-flex--vcenter">
86
82
  <input type="checkbox" id="mycheckbox11" class="micl-checkbox micl-checkbox--error" value="c1">
87
83
  <label for="mycheckbox11" class="md-sys-typescale-body-medium">First Choice</label>
88
84
  </div>
89
- <div class="checkbox">
85
+ <div class="micl-flex--vcenter">
90
86
  <input type="checkbox" id="mycheckbox12" class="micl-checkbox micl-checkbox--error" checked value="c2">
91
87
  <label for="mycheckbox12" class="md-sys-typescale-body-medium">Second Choice</label>
92
88
  </div>
93
- <div class="checkbox">
89
+ <div class="micl-flex--vcenter">
94
90
  <input type="checkbox" id="mycheckbox13" class="micl-checkbox micl-checkbox--error" disabled value="c3">
95
91
  <label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice</label>
96
92
  </div>
97
- <div class="checkbox">
93
+ <div class="micl-flex--vcenter">
98
94
  <input type="checkbox" id="mycheckbox14" class="micl-checkbox micl-checkbox--error" disabled checked value="c4">
99
95
  <label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice</label>
100
96
  </div>
package/docs/divider.html CHANGED
@@ -14,8 +14,14 @@
14
14
  p {
15
15
  color: var(--md-sys-color-on-surface);
16
16
  }
17
+ section:first-child .micl-pane__column > :last-child {
18
+ padding-block-end: 0;
19
+ }
17
20
  section:first-child .micl-card__content {
18
- padding-inline: 0;
21
+ padding: 0;
22
+ }
23
+ section:first-child .micl-card-filled {
24
+ --md-sys-divider-color: var(--md-sys-color-primary);
19
25
  }
20
26
  p.md-sys-typescale-label-large {
21
27
  margin: 3rem 2rem 1rem;
package/docs/index.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <label for="item1" class="micl-navigationrail__item" tabindex="0">
30
30
  <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
31
31
  <span class="micl-navigationrail__text">Inbox</span>
32
+ <span class="micl-badge" style="position-anchor:--inbox">97</span>
32
33
  </label>
33
34
  <input type="radio" id="item2" name="navitem" value="email_outbox">
34
35
  <label for="item2" class="micl-navigationrail__item" tabindex="0">
@@ -39,6 +40,7 @@
39
40
  <label for="item3" class="micl-navigationrail__item" tabindex="0">
40
41
  <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites">favorite</span>
41
42
  <span class="micl-navigationrail__text">Favorites</span>
43
+ <span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
42
44
  </label>
43
45
  <input type="radio" id="item4" name="navitem" value="email_trash">
44
46
  <label for="item4" class="micl-navigationrail__item" tabindex="0">
@@ -46,9 +48,6 @@
46
48
  <span class="micl-navigationrail__text">Trash</span>
47
49
  </label>
48
50
  </div>
49
-
50
- <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
51
- <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
52
51
  </dialog>
53
52
 
54
53
  <main class="micl-body">
@@ -67,7 +66,7 @@
67
66
  <div class="micl-card__headline-s">
68
67
  <h2>Data entry</h2>
69
68
  </div>
70
- <div class="micl-card__content" style="display:flex;flex-direction:column;row-gap:16px;padding-block:16px">
69
+ <div class="micl-card__content" style="display:flex;flex-direction:column;row-gap:16px;padding-block-start:16px">
71
70
  <div class="micl-textfield-outlined">
72
71
  <label for="mytextfield1">Text field</label>
73
72
  <input type="text" id="mytextfield1">
@@ -96,26 +95,26 @@
96
95
  </select>
97
96
  </div>
98
97
  <div>
99
- <div style="display:flex;align-items:center">
98
+ <div class="micl-flex--vcenter">
100
99
  <input type="radio" id="myradio1" class="micl-radio" name="foo" value="bar" checked>
101
100
  <label for="myradio1" class="md-sys-typescale-body-medium">First radio button</label>
102
101
  </div>
103
- <div style="display:flex;align-items:center">
102
+ <div class="micl-flex--vcenter">
104
103
  <input type="radio" id="myradio2" class="micl-radio" name="foo" value="baz">
105
104
  <label for="myradio2" class="md-sys-typescale-body-medium">Second radio button</label>
106
105
  </div>
107
106
  </div>
108
107
  <div>
109
- <div style="display:flex;align-items:center">
108
+ <div class="micl-flex--vcenter">
110
109
  <input type="checkbox" id="mycheckbox1" class="micl-checkbox" checked>
111
110
  <label for="mycheckbox1" class="md-sys-typescale-body-medium">First checkbox</label>
112
111
  </div>
113
- <div style="display:flex;align-items:center">
112
+ <div class="micl-flex--vcenter">
114
113
  <input type="checkbox" id="mycheckbox2" class="micl-checkbox">
115
114
  <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second checkbox</label>
116
115
  </div>
117
116
  </div>
118
- <div style="display:flex;align-items:center;column-gap:16px">
117
+ <div class="micl-flex--vcenter" style="column-gap:16px">
119
118
  <input type="checkbox" class="micl-switch" id="myswitch" checked value="c1" role="switch">
120
119
  <label for="myswitch" class="md-sys-typescale-body-medium">First switch</label>
121
120
  </div>
@@ -129,8 +128,8 @@
129
128
  <h2>Card</h2>
130
129
  </div>
131
130
  <span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
132
- <div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block:16px">
133
- <button type="button" class="micl-button-filled-s">Button</button>
131
+ <div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block-start:16px">
132
+ <button type="button" class="micl-button-filled-s">Action</button>
134
133
  <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
135
134
  <nav id="mymenu" class="micl-menu" popover>
136
135
  <ul class="micl-list">
@@ -202,7 +201,7 @@
202
201
  <span class="micl-list-item__supporting-text">Click to open</span>
203
202
  </span>
204
203
  </summary>
205
- <div class="micl-list-item__content" style="padding-block:16px">
204
+ <div class="micl-list-item__content" style="padding-block-start:16px">
206
205
  <div class="micl-textfield-filled">
207
206
  <label for="tf1">Name</label>
208
207
  <input type="text" id="tf1" value="Filled text field">
@@ -216,7 +215,7 @@
216
215
  <span class="micl-list-item__supporting-text">Click to open</span>
217
216
  </span>
218
217
  </summary>
219
- <div class="micl-list-item__content" style="padding-block:16px">
218
+ <div class="micl-list-item__content" style="padding-block-start:16px">
220
219
  <div class="micl-textfield-filled">
221
220
  <label for="tf2">Date</label>
222
221
  <input type="date" id="tf2" value="">
@@ -231,7 +230,7 @@
231
230
  <div class="micl-card__headline-s">
232
231
  <h2>Button actions</h2>
233
232
  </div>
234
- <div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block:16px">
233
+ <div class="micl-card__content" style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;padding-block-start:16px">
235
234
  <dialog id="mydialog" class="micl-dialog" closedby="none" popover>
236
235
  <form method="dialog" class="micl-dialog__headline">
237
236
  <span class="micl-dialog__icon material-symbols-outlined">person</span>
@@ -331,7 +330,7 @@
331
330
  <div class="micl-card__headline-l">
332
331
  <h2>Demos</h2>
333
332
  </div>
334
- <div class="micl-card__content" style="column-count:2;padding-block:16px">
333
+ <div class="micl-card__content" style="column-count:2;padding-block-start:16px">
335
334
  <p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
336
335
  <p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
337
336
  <p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
package/docs/list.html CHANGED
@@ -196,10 +196,10 @@
196
196
  <label>
197
197
  <span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
198
198
  <span class="micl-list-item__text">
199
- <span class="micl-list-item__headline">Headline</span>
199
+ <span id="hd1" class="micl-list-item__headline">Headline</span>
200
200
  <span class="micl-list-item__supporting-text">Supporting text</span>
201
201
  </span>
202
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
202
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1" aria-labelledby="hd1">
203
203
  </label>
204
204
  </li>
205
205
  </ul>
@@ -223,19 +223,19 @@
223
223
  <li class="micl-list-item-three" tabindex="0">
224
224
  <label>
225
225
  <span class="micl-list-item__text">
226
- <span class="micl-list-item__headline">Headline 1</span>
226
+ <span id="hd2" class="micl-list-item__headline">Headline 1</span>
227
227
  <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>
228
228
  </span>
229
- <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
229
+ <input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1" aria-labelledby="hd2">
230
230
  </label>
231
231
  </li>
232
232
  <li class="micl-list-item-three">
233
233
  <label>
234
234
  <span class="micl-list-item__text">
235
- <span class="micl-list-item__headline">Headline 2</span>
235
+ <span id="hd3" class="micl-list-item__headline">Headline 2</span>
236
236
  <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>
237
237
  </span>
238
- <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
238
+ <input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1" aria-labelledby="hd3">
239
239
  </label>
240
240
  </li>
241
241
  </ul>