material-inspired-component-library 3.0.1 → 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 (53) 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/dialog/index.scss +3 -3
  8. package/components/divider/README.md +3 -3
  9. package/components/divider/index.scss +18 -27
  10. package/components/iconbutton/index.scss +2 -2
  11. package/components/list/index.scss +2 -2
  12. package/components/navigationrail/index.scss +5 -3
  13. package/components/radio/README.md +1 -1
  14. package/components/select/index.scss +5 -2
  15. package/components/slider/index.scss +4 -4
  16. package/components/stepper/index.scss +85 -0
  17. package/components/stepper/index.ts +163 -0
  18. package/components/switch/README.md +26 -4
  19. package/components/switch/index.scss +24 -23
  20. package/components/textfield/index.scss +1 -0
  21. package/components/textfield/index.ts +54 -20
  22. package/dist/appbar.css +1 -1
  23. package/dist/badge.css +1 -1
  24. package/dist/button.css +1 -1
  25. package/dist/card.css +1 -1
  26. package/dist/components/stepper/index.d.ts +5 -0
  27. package/dist/components/textfield/index.d.ts +2 -1
  28. package/dist/dialog.css +1 -1
  29. package/dist/divider.css +1 -1
  30. package/dist/iconbutton.css +1 -1
  31. package/dist/layout.css +1 -1
  32. package/dist/list.css +1 -1
  33. package/dist/micl.css +1 -1
  34. package/dist/micl.js +1 -1
  35. package/dist/navigationrail.css +1 -1
  36. package/dist/select.css +1 -1
  37. package/dist/slider.css +1 -1
  38. package/dist/stepper.css +1 -0
  39. package/dist/stepper.js +1 -0
  40. package/dist/switch.css +1 -1
  41. package/dist/textfield.css +1 -1
  42. package/docs/card.html +25 -7
  43. package/docs/divider.html +7 -1
  44. package/docs/index.html +9 -10
  45. package/docs/micl.css +1 -1
  46. package/docs/micl.js +1 -1
  47. package/docs/navigationrail.html +2 -3
  48. package/docs/radio.html +1 -1
  49. package/docs/switch.html +41 -26
  50. package/layout/index.scss +9 -2
  51. package/micl.ts +22 -26
  52. package/package.json +2 -1
  53. package/styles.scss +1 -0
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/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">
@@ -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>