material-inspired-component-library 6.0.2 → 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.
- package/components/select/index.scss +3 -0
- package/components/snackbar/index.scss +78 -0
- package/components/snackbar/index.ts +56 -0
- package/components/stepper/README.md +1 -1
- package/components/stepper/index.ts +6 -2
- package/components/textfield/index.scss +1 -1
- package/dist/components/snackbar/index.d.ts +5 -0
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/select.css +1 -1
- package/dist/snackbar.css +1 -0
- package/dist/snackbar.js +1 -0
- package/dist/textfield.css +1 -1
- package/docs/accordion.html +5 -6
- package/docs/alert.html +5 -6
- package/docs/bottomsheet.html +23 -24
- package/docs/button.html +7 -8
- package/docs/card.html +5 -6
- package/docs/checkbox.html +5 -6
- package/docs/datepicker.html +5 -6
- package/docs/dialog.html +4 -5
- package/docs/divider.html +4 -5
- package/docs/docs.css +1 -0
- package/docs/docs.js +4 -0
- package/docs/iconbutton.html +10 -11
- package/docs/list.html +5 -6
- package/docs/menu.html +21 -22
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/radio.html +5 -6
- package/docs/select.html +5 -6
- package/docs/sidesheet.html +11 -12
- package/docs/slider.html +5 -6
- package/docs/snackbar.html +76 -0
- package/docs/snackbar1.html +159 -0
- package/docs/snackbar2.html +159 -0
- package/docs/stepper.html +5 -6
- package/docs/switch.html +5 -6
- package/docs/textfield.html +5 -6
- package/docs/timepicker.html +5 -6
- package/micl.ts +2 -0
- package/package.json +1 -1
- package/styles.scss +1 -0
|
@@ -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
|
-
<div class="micl-stepper" role="tablist" aria-label="My stepper">
|
|
286
|
+
<pre tabindex="-1"><code><div class="micl-stepper" role="tablist" aria-label="My stepper">
|
|
287
287
|
<div class="micl-stepper__steps">
|
|
288
288
|
<div class="micl-stepper__step" role="tabpanel" aria-current="step">
|
|
289
289
|
<h2>First step</h2>
|
|
@@ -307,8 +307,7 @@
|
|
|
307
307
|
<button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
|
|
308
308
|
</div>
|
|
309
309
|
</div>
|
|
310
|
-
</div>
|
|
311
|
-
</code></pre>
|
|
310
|
+
</div></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
|
-
<div class="micl-flex--vcenter" style="column-gap:16px">
|
|
184
|
+
<pre tabindex="-1"><code><div class="micl-flex--vcenter" style="column-gap:16px">
|
|
185
185
|
<input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch">
|
|
186
186
|
<label for="id0" class="md-sys-typescale-body-medium">First Choice</label>
|
|
187
|
-
</div>
|
|
188
|
-
</code></pre>
|
|
187
|
+
</div></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">
|
|
@@ -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
|
-
<div class="micl-textfield-outlined">
|
|
183
|
+
<pre tabindex="-1"><code><div class="micl-textfield-outlined">
|
|
184
184
|
<label for="id0">Label text</label>
|
|
185
185
|
<input type="text" id="id0">
|
|
186
186
|
</div>
|
|
@@ -196,8 +196,7 @@
|
|
|
196
196
|
<input type="text" id="id2" disabled value="Paris">
|
|
197
197
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
198
198
|
<span class="micl-textfield__supporting-text">Disabled field</span>
|
|
199
|
-
</div>
|
|
200
|
-
</code></pre>
|
|
199
|
+
</div></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">
|
|
@@ -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
|
-
<dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0">
|
|
120
|
+
<pre tabindex="-1"><code><dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0">
|
|
121
121
|
<form method="dialog">
|
|
122
122
|
<div class="micl-dialog__headline">
|
|
123
123
|
<h2 id="id0">Enter time</h2>
|
|
@@ -139,8 +139,7 @@
|
|
|
139
139
|
</div>
|
|
140
140
|
</div>
|
|
141
141
|
</form>
|
|
142
|
-
</dialog>
|
|
143
|
-
</code></pre>
|
|
142
|
+
</dialog></code></pre>
|
|
144
143
|
</div>
|
|
145
144
|
</div>
|
|
146
145
|
</section>
|
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.
|
|
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",
|