material-inspired-component-library 6.0.7 → 7.0.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 (55) hide show
  1. package/README.md +11 -2
  2. package/components/accordion/README.md +4 -6
  3. package/components/appbar/index.scss +4 -4
  4. package/components/button/README.md +16 -1
  5. package/components/button/index.scss +6 -0
  6. package/components/button/index.ts +17 -0
  7. package/components/card/README.md +84 -11
  8. package/components/card/index.scss +178 -209
  9. package/components/checkbox/index.scss +4 -0
  10. package/components/datepicker/README.md +3 -2
  11. package/components/datepicker/index.ts +0 -8
  12. package/components/dialog/README.md +7 -7
  13. package/components/iconbutton/README.md +11 -0
  14. package/components/iconbutton/index.scss +12 -0
  15. package/components/iconbutton/index.ts +15 -0
  16. package/components/navigationrail/README.md +64 -59
  17. package/components/navigationrail/index.scss +197 -300
  18. package/components/navigationrail/index.ts +55 -38
  19. package/components/radio/index.scss +4 -0
  20. package/components/select/index.scss +14 -14
  21. package/components/snackbar/README.md +126 -0
  22. package/components/snackbar/index.scss +94 -73
  23. package/components/snackbar/index.ts +90 -28
  24. package/components/textfield/index.scss +6 -0
  25. package/components/timepicker/README.md +2 -1
  26. package/components/timepicker/index.ts +0 -3
  27. package/dist/appbar.css +1 -1
  28. package/dist/button.css +1 -1
  29. package/dist/card.css +1 -1
  30. package/dist/checkbox.css +1 -1
  31. package/dist/components/navigationrail/index.d.ts +2 -1
  32. package/dist/components/snackbar/index.d.ts +1 -0
  33. package/dist/iconbutton.css +1 -1
  34. package/dist/micl.css +1 -1
  35. package/dist/micl.js +1 -1
  36. package/dist/navigationrail.css +1 -1
  37. package/dist/radio.css +1 -1
  38. package/dist/select.css +1 -1
  39. package/dist/snackbar.css +1 -1
  40. package/dist/textfield.css +1 -1
  41. package/docs/accordion.html +10 -10
  42. package/docs/button.html +43 -15
  43. package/docs/card.html +6 -5
  44. package/docs/datepicker.html +4 -4
  45. package/docs/dialog.html +17 -19
  46. package/docs/iconbutton.html +22 -8
  47. package/docs/index.html +31 -18
  48. package/docs/micl.css +1 -1
  49. package/docs/micl.js +1 -1
  50. package/docs/navigationrail.html +76 -22
  51. package/docs/snackbar.html +31 -14
  52. package/docs/timepicker.html +12 -3
  53. package/package.json +4 -4
  54. package/docs/snackbar1.html +0 -159
  55. package/docs/snackbar2.html +0 -159
package/docs/snackbar1.html DELETED
@@ -1,159 +0,0 @@
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/snackbar2.html DELETED
@@ -1,159 +0,0 @@
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>