material-inspired-component-library 6.0.0 → 6.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 (72) hide show
  1. package/components/alert/README.md +1 -1
  2. package/components/appbar/README.md +1 -1
  3. package/components/badge/README.md +1 -1
  4. package/components/list/README.md +22 -7
  5. package/components/select/index.scss +3 -0
  6. package/components/sidesheet/README.md +3 -3
  7. package/components/snackbar/index.scss +78 -0
  8. package/components/snackbar/index.ts +56 -0
  9. package/components/stepper/README.md +1 -1
  10. package/components/stepper/index.ts +6 -2
  11. package/components/textfield/README.md +2 -2
  12. package/components/textfield/index.scss +1 -1
  13. package/dist/alert.css +1 -1
  14. package/dist/appbar.css +1 -1
  15. package/dist/badge.css +1 -1
  16. package/dist/bottomsheet.css +1 -1
  17. package/dist/button.css +1 -1
  18. package/dist/card.css +1 -1
  19. package/dist/checkbox.css +1 -1
  20. package/dist/components/snackbar/index.d.ts +5 -0
  21. package/dist/datepicker.css +1 -1
  22. package/dist/dialog.css +1 -1
  23. package/dist/divider.css +1 -1
  24. package/dist/foundations.css +1 -1
  25. package/dist/iconbutton.css +1 -1
  26. package/dist/list.css +1 -1
  27. package/dist/menu.css +1 -1
  28. package/dist/micl.css +1 -1
  29. package/dist/micl.js +1 -1
  30. package/dist/navigationrail.css +1 -1
  31. package/dist/radio.css +1 -1
  32. package/dist/select.css +1 -1
  33. package/dist/sidesheet.css +1 -1
  34. package/dist/slider.css +1 -1
  35. package/dist/snackbar.css +1 -0
  36. package/dist/snackbar.js +1 -0
  37. package/dist/stepper.css +1 -1
  38. package/dist/switch.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/timepicker.css +1 -1
  41. package/docs/accordion.html +25 -26
  42. package/docs/alert.html +15 -16
  43. package/docs/bottomsheet.html +29 -30
  44. package/docs/button.html +7 -8
  45. package/docs/card.html +5 -6
  46. package/docs/checkbox.html +5 -6
  47. package/docs/datepicker.html +5 -6
  48. package/docs/dialog.html +4 -5
  49. package/docs/divider.html +4 -5
  50. package/docs/docs.css +1 -0
  51. package/docs/docs.js +4 -0
  52. package/docs/iconbutton.html +10 -11
  53. package/docs/index.html +15 -15
  54. package/docs/list.html +19 -20
  55. package/docs/menu.html +33 -34
  56. package/docs/micl.css +1 -1
  57. package/docs/micl.js +1 -1
  58. package/docs/radio.html +5 -6
  59. package/docs/select.html +5 -6
  60. package/docs/sidesheet.html +12 -13
  61. package/docs/slider.html +7 -8
  62. package/docs/snackbar.html +76 -0
  63. package/docs/snackbar1.html +159 -0
  64. package/docs/snackbar2.html +159 -0
  65. package/docs/stepper.html +5 -6
  66. package/docs/switch.html +5 -6
  67. package/docs/textfield.html +29 -30
  68. package/docs/timepicker.html +6 -7
  69. package/foundations/index.scss +4 -1
  70. package/micl.ts +2 -0
  71. package/package.json +1 -1
  72. package/styles.scss +1 -0
package/docs/snackbar2.html ADDED
@@ -0,0 +1,159 @@
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
+ <style>
7
+ /* Page Layout */
8
+ body {
9
+ font-family: -apple-system, system-ui, sans-serif;
10
+ height: 100vh;
11
+ margin: 0;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ background-color: #f4f4f9;
16
+ }
17
+
18
+ /* --- SNACKBAR CONTAINER --- */
19
+ #snackbar {
20
+ /* 1. POSITIONING */
21
+ position: fixed;
22
+ /* Reset defaults */
23
+ inset: auto;
24
+ margin: 0;
25
+ border: none;
26
+ padding: 0;
27
+
28
+ /* Anchor to bottom center */
29
+ bottom: 24px;
30
+ bottom: calc(24px + env(safe-area-inset-bottom));
31
+ left: 50%;
32
+ translate: -50% 0;
33
+
34
+ /* 2. LAYOUT ENGINE (The User's Fix) */
35
+ display: grid;
36
+ /* This forces the grid track to anchor to the bottom line */
37
+ align-content: flex-end;
38
+
39
+ /* 3. ANIMATION STATES */
40
+
41
+ /* Default (Closed/Exiting) State */
42
+ grid-template-rows: 0fr; /* Height is collapsed */
43
+ opacity: 0; /* Invisible */
44
+
45
+ /* EXIT TRANSITION:
46
+ Fade out opacity immediately.
47
+ DELAY the height collapse so it doesn't shrink while fading.
48
+ */
49
+ transition:
50
+ opacity 0.3s ease-out,
51
+ grid-template-rows 0s linear 0.3s, /* Delayed snap to 0 */
52
+ display 0.3s allow-discrete,
53
+ overlay 0.3s allow-discrete;
54
+
55
+ /* Ensure shadow isn't cut off */
56
+ background: transparent;
57
+ overflow: visible;
58
+ }
59
+
60
+ /* --- OPEN STATE --- */
61
+ #snackbar:popover-open {
62
+ grid-template-rows: 1fr; /* Full height */
63
+ opacity: 1;
64
+
65
+ /* ENTER TRANSITION:
66
+ Animate Height ("Grow up") and Opacity together.
67
+ */
68
+ transition:
69
+ grid-template-rows 0.3s cubic-bezier(0.2, 0, 0, 1),
70
+ opacity 0.3s ease-out;
71
+ }
72
+
73
+ /* --- STARTING STATE (Entry Frame) --- */
74
+ @starting-style {
75
+ #snackbar:popover-open {
76
+ grid-template-rows: 0fr;
77
+ opacity: 0;
78
+ }
79
+ }
80
+
81
+ /* --- INNER CONTENT --- */
82
+ .snackbar-inner {
83
+ min-height: 0;
84
+ overflow: hidden; /* Important for the height animation */
85
+
86
+ background: #1e1e1e;
87
+ color: white;
88
+ border-radius: 8px;
89
+ box-shadow: 0 4px 10px rgba(0,0,0,0.15);
90
+ width: 300px; /* Or min-width */
91
+ }
92
+
93
+ .snackbar-content {
94
+ padding: 14px 16px;
95
+ display: flex;
96
+ justify-content: space-between;
97
+ align-items: center;
98
+ }
99
+
100
+ /* Button Styles */
101
+ .action-btn {
102
+ background: transparent;
103
+ border: none;
104
+ color: #8ab4f8;
105
+ font-weight: 700;
106
+ cursor: pointer;
107
+ margin-left: 16px;
108
+ font-size: 0.85rem;
109
+ }
110
+ .action-btn:hover { background: rgba(138, 180, 248, 0.1); border-radius: 4px; }
111
+
112
+ /* Trigger Button */
113
+ .trigger {
114
+ padding: 12px 24px;
115
+ background: #0056b3;
116
+ color: white;
117
+ border: none;
118
+ border-radius: 6px;
119
+ cursor: pointer;
120
+ font-size: 1rem;
121
+ }
122
+ </style>
123
+ </head>
124
+ <body>
125
+
126
+ <button class="trigger" onclick="showSnackbar()">Trigger Snackbar</button>
127
+
128
+ <div id="snackbar" popover="manual">
129
+ <div class="snackbar-inner">
130
+ <div class="snackbar-content">
131
+ <span>Message sent.</span>
132
+ <button class="action-btn" onclick="hideSnackbar()">UNDO</button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <script>
138
+ const snackbar = document.getElementById('snackbar');
139
+ let timer;
140
+
141
+ function showSnackbar() {
142
+ // 1. Show Popover
143
+ snackbar.showPopover();
144
+
145
+ // 2. Reset Timer
146
+ clearTimeout(timer);
147
+ timer = setTimeout(() => {
148
+ hideSnackbar();
149
+ }, 4000);
150
+ }
151
+
152
+ function hideSnackbar() {
153
+ // 3. Hide Popover (Triggers the delayed exit transition)
154
+ snackbar.hidePopover();
155
+ }
156
+ </script>
157
+
158
+ </body>
159
+ </html>
package/docs/stepper.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -277,13 +277,13 @@
277
277
  </div>
278
278
  </section>
279
279
  <section class="micl-pane" style="flex-shrink:0.5">
280
- <div class="micl-card-filled">
280
+ <div class="micl-card-filled" style="margin-top:8px">
281
281
  <div class="micl-card__headline-s">
282
282
  <h2>Code example</h2>
283
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
283
284
  </div>
284
285
  <div class="micl-card__content docs-code">
285
- <pre tabindex="-1"><code>
286
- &lt;div class="micl-stepper" role="tablist" aria-label="My stepper"&gt;
286
+ <pre tabindex="-1"><code>&lt;div class="micl-stepper" role="tablist" aria-label="My stepper"&gt;
287
287
  &lt;div class="micl-stepper__steps"&gt;
288
288
  &lt;div class="micl-stepper__step" role="tabpanel" aria-current="step"&gt;
289
289
  &lt;h2&gt;First step&lt;/h2&gt;
@@ -307,8 +307,7 @@
307
307
  &lt;button type="button" class="micl-button-text-m micl-stepper__action-next"&gt;Next&lt;/button&gt;
308
308
  &lt;/div&gt;
309
309
  &lt;/div&gt;
310
- &lt;/div&gt;
311
- </code></pre>
310
+ &lt;/div&gt;</code></pre>
312
311
  </div>
313
312
  </div>
314
313
  </section>
package/docs/switch.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -175,17 +175,16 @@
175
175
  </div>
176
176
  </section>
177
177
  <section class="micl-pane">
178
- <div class="micl-card-filled">
178
+ <div class="micl-card-filled" style="margin-top:8px">
179
179
  <div class="micl-card__headline-s">
180
180
  <h2>Code example</h2>
181
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
181
182
  </div>
182
183
  <div class="micl-card__content docs-code">
183
- <pre tabindex="-1"><code>
184
- &lt;div class="micl-flex--vcenter" style="column-gap:16px"&gt;
184
+ <pre tabindex="-1"><code>&lt;div class="micl-flex--vcenter" style="column-gap:16px"&gt;
185
185
  &lt;input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch"&gt;
186
186
  &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
187
- &lt;/div&gt;
188
- </code></pre>
187
+ &lt;/div&gt;</code></pre>
189
188
  </div>
190
189
  </div>
191
190
  </section>
package/docs/textfield.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,home,search&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,content_copy,credit_card,dark_mode,error,home,search&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -41,36 +41,36 @@
41
41
  <input type="text" id="mytextfield1">
42
42
  </div>
43
43
  <div class="micl-textfield-outlined">
44
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
44
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
45
45
  <label for="mytextfield2">Name</label>
46
46
  <input type="text" id="mytextfield2" value="Marie Curie">
47
47
  </div>
48
48
  <div class="micl-textfield-outlined">
49
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
49
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
50
50
  <label for="mytextfield3">Label text</label>
51
51
  <input type="text" id="mytextfield3">
52
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
52
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
53
53
  </div>
54
54
  <div class="micl-textfield-outlined">
55
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
55
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
56
56
  <label for="mytextfield4">City</label>
57
57
  <input type="text" id="mytextfield4" disabled value="Paris">
58
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
58
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
59
59
  </div>
60
60
  <div class="micl-textfield-outlined">
61
61
  <label for="mytextfield5">Multiline text field</label>
62
62
  <textarea id="mytextfield5"></textarea>
63
63
  </div>
64
64
  <div class="micl-textfield-outlined micl-textfield--error">
65
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
65
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
66
66
  <label for="mytextfield6">Label text</label>
67
67
  <input type="text" id="mytextfield6">
68
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
68
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
69
69
  </div>
70
70
  <div class="micl-textfield-outlined micl-textfield--error">
71
71
  <label for="mytextfield7">Password</label>
72
72
  <input type="password" id="mytextfield7" value="foobar">
73
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
73
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
74
74
  <span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
75
75
  </div>
76
76
  </div>
@@ -81,7 +81,7 @@
81
81
  <input type="text" name="myname">
82
82
  </div>
83
83
  <div class="micl-textfield-outlined">
84
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
84
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
85
85
  <label for="mytextfield12">Text field</label>
86
86
  <input type="text" id="mytextfield12" value="Outlined">
87
87
  <span class="micl-textfield__supporting-text">Supporting text</span>
@@ -90,13 +90,13 @@
90
90
  <span class="micl-textfield__prefix" aria-label="Euro">€</span>
91
91
  <label for="mytextfield13">Amount</label>
92
92
  <input type="text" id="mytextfield13" value="299.89">
93
- <span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
93
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">credit_card</span>
94
94
  </div>
95
95
  <div class="micl-textfield-outlined">
96
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
96
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
97
97
  <label for="mytextfield14">City</label>
98
98
  <input type="text" id="mytextfield14" disabled value="Paris">
99
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
99
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
100
100
  <span class="micl-textfield__supporting-text">This input field is disabled</span>
101
101
  </div>
102
102
  <div class="micl-textfield-outlined">
@@ -104,16 +104,16 @@
104
104
  <textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
105
105
  </div>
106
106
  <div class="micl-textfield-outlined micl-textfield--error">
107
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
107
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
108
108
  <label for="mytextfield16">Label text</label>
109
109
  <input type="text" id="mytextfield16">
110
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
110
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
111
111
  </div>
112
112
  <div class="micl-textfield-outlined micl-textfield--error">
113
113
  <label for="mytextfield17">Weight</label>
114
114
  <input type="number" id="mytextfield17" value="17800">
115
115
  <span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
116
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
116
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
117
117
  <span class="micl-textfield__supporting-text">Too heavy</span>
118
118
  </div>
119
119
  </div>
@@ -127,7 +127,7 @@
127
127
  <input type="datetime-local" id="mytextfield21">
128
128
  </div>
129
129
  <div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
130
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
130
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
131
131
  <span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
132
132
  <label for="mytextfield22">Amount*</label>
133
133
  <input type="text" id="mytextfield22" required value="">
@@ -137,16 +137,16 @@
137
137
  <span class="micl-textfield__character-counter"></span>
138
138
  <span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
139
139
  <span class="micl-textfield__prefix" aria-label="Euro">€</span>
140
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
140
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
141
141
  <input type="text" id="mytextfield23" maxlength="24">
142
142
  <label for="mytextfield23">Label text</label>
143
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
143
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
144
144
  </div>
145
145
  <div class="micl-textfield-filled">
146
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
146
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
147
147
  <label for="mytextfield24">City</label>
148
148
  <input type="text" id="mytextfield24" disabled value="Paris">
149
- <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
149
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" aria-hidden="true">cancel</span>
150
150
  <span class="micl-textfield__supporting-text">This input field is disabled</span>
151
151
  </div>
152
152
  <div class="micl-textfield-filled">
@@ -155,16 +155,16 @@
155
155
  <span class="micl-textfield__character-counter"></span>
156
156
  </div>
157
157
  <div class="micl-textfield-filled micl-textfield--error">
158
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
158
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
159
159
  <label for="mytextfield26">Label text</label>
160
160
  <input type="text" id="mytextfield26">
161
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
161
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
162
162
  </div>
163
163
  <div class="micl-textfield-filled micl-textfield--error">
164
- <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
164
+ <span class="micl-textfield__icon-leading material-symbols-outlined" aria-hidden="true">search</span>
165
165
  <label for="mytextfield27">City</label>
166
166
  <input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
167
- <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
167
+ <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1" aria-hidden="true">error</span>
168
168
  <span class="micl-textfield__supporting-text">Incorrect spelling</span>
169
169
  <span class="micl-textfield__character-counter"></span>
170
170
  </div>
@@ -174,13 +174,13 @@
174
174
  </div>
175
175
  </section>
176
176
  <section class="micl-pane">
177
- <div class="micl-card-filled">
177
+ <div class="micl-card-filled" style="margin-top:8px">
178
178
  <div class="micl-card__headline-s">
179
179
  <h2>Code example</h2>
180
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
180
181
  </div>
181
182
  <div class="micl-card__content docs-code">
182
- <pre tabindex="-1"><code>
183
- &lt;div class="micl-textfield-outlined"&gt;
183
+ <pre tabindex="-1"><code>&lt;div class="micl-textfield-outlined"&gt;
184
184
  &lt;label for="id0">Label text&lt;/label&gt;
185
185
  &lt;input type="text" id="id0"&gt;
186
186
  &lt;/div&gt;
@@ -196,8 +196,7 @@
196
196
  &lt;input type="text" id="id2" disabled value="Paris"&gt;
197
197
  &lt;span class="micl-textfield__icon-trailing material-symbols-outlined"&gt;cancel&lt;/span&gt;
198
198
  &lt;span class="micl-textfield__supporting-text"&gt;Disabled field&lt;/span&gt;
199
- &lt;/div&gt;
200
- </code></pre>
199
+ &lt;/div&gt;</code></pre>
201
200
  </div>
202
201
  </div>
203
202
  </section>
package/docs/timepicker.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,keyboard,schedule&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home,keyboard,schedule&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -99,7 +99,7 @@
99
99
  <div class="micl-dialog__actions">
100
100
  <button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-alticon="keyboard">schedule</button>
101
101
  <div>
102
- <button class="micl-button-text-s" value="" command="close" commandfor="mytimepicker2">Cancel</button>
102
+ <button class="micl-button-text-s" value="">Cancel</button>
103
103
  <button class="micl-button-text-s" value="OK">OK</button>
104
104
  </div>
105
105
  </div>
@@ -111,13 +111,13 @@
111
111
  </div>
112
112
  </section>
113
113
  <section class="micl-pane">
114
- <div class="micl-card-filled">
114
+ <div class="micl-card-filled" style="margin-top:8px">
115
115
  <div class="micl-card__headline-s">
116
116
  <h2>Code example</h2>
117
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
117
118
  </div>
118
119
  <div class="micl-card__content docs-code">
119
- <pre tabindex="-1"><code>
120
- &lt;dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0"&gt;
120
+ <pre tabindex="-1"><code>&lt;dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0"&gt;
121
121
  &lt;form method="dialog"&gt;
122
122
  &lt;div class="micl-dialog__headline"&gt;
123
123
  &lt;h2 id="id0"&gt;Enter time&lt;/h2&gt;
@@ -139,8 +139,7 @@
139
139
  &lt;/div&gt;
140
140
  &lt;/div&gt;
141
141
  &lt;/form&gt;
142
- &lt;/dialog&gt;
143
- </code></pre>
142
+ &lt;/dialog&gt;</code></pre>
144
143
  </div>
145
144
  </div>
146
145
  </section>
package/foundations/index.scss CHANGED
@@ -53,13 +53,16 @@ $md-sys-padding-xxl: 28px;
53
53
  align-items: center;
54
54
  }
55
55
 
56
+ .micl-grid-field,
56
57
  .micl-grid-iconfield {
57
58
  box-sizing: border-box;
58
59
  display: grid;
59
- grid-template-columns: 48px 1fr;
60
60
  row-gap: var(--md-sys-padding-xl, 24px);
61
61
  background-color: inherit;
62
62
  }
63
+ .micl-grid-iconfield {
64
+ grid-template-columns: 48px 1fr;
65
+ }
63
66
  .micl-grid-iconfield__icon {
64
67
  grid-column: 1;
65
68
  margin-block-start: 0.6rem;
package/micl.ts CHANGED
@@ -27,6 +27,7 @@ import _list, { listSelector } from './components/list';
27
27
  import _menu, { menuSelector } from './components/menu';
28
28
  import _navigationrail, { navigationrailSelector } from './components/navigationrail';
29
29
  import _slider, { sliderSelector } from './components/slider';
30
+ import _snackbar, { snackbarSelector } from './components/snackbar';
30
31
  import _stepper, { stepperSelector } from './components/stepper';
31
32
  import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
32
33
  import _timepicker, { timepickerSelector } from './components/timepicker';
@@ -54,6 +55,7 @@ export default (() =>
54
55
  [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
55
56
  [selectSelector] : { component: _textfield, type: HTMLSelectElement },
56
57
  [sliderSelector] : { component: _slider, type: HTMLInputElement },
58
+ [snackbarSelector] : { component: _snackbar, type: HTMLElement },
57
59
  [stepperSelector] : { component: _stepper, type: HTMLElement },
58
60
  [textareaSelector] : { component: _textfield, type: HTMLTextAreaElement },
59
61
  [textfieldSelector] : { component: _textfield, type: HTMLInputElement },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "material-inspired-component-library",
3
- "version": "6.0.0",
3
+ "version": "6.0.3",
4
4
  "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
5
5
  "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
6
6
  "license": "MIT",
package/styles.scss CHANGED
@@ -43,6 +43,7 @@
43
43
  @use 'components/select';
44
44
  @use 'components/card';
45
45
  @use 'components/dialog';
46
+ @use 'components/snackbar';
46
47
  @use 'components/badge';
47
48
  @use 'components/appbar';
48
49
  @use 'components/sidesheet';