@magic-spells/cart-panel 0.3.1 → 1.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 (18) hide show
  1. package/README.md +269 -521
  2. package/dist/cart-panel.cjs.css +216 -193
  3. package/dist/cart-panel.cjs.js +692 -508
  4. package/dist/cart-panel.cjs.js.map +1 -1
  5. package/dist/cart-panel.css +216 -193
  6. package/dist/cart-panel.esm.css +216 -193
  7. package/dist/cart-panel.esm.js +686 -500
  8. package/dist/cart-panel.esm.js.map +1 -1
  9. package/dist/cart-panel.js +1054 -1716
  10. package/dist/cart-panel.js.map +1 -1
  11. package/dist/cart-panel.min.css +1 -1
  12. package/dist/cart-panel.min.js +1 -1
  13. package/package.json +12 -8
  14. package/src/cart-item.js +448 -0
  15. package/src/cart-panel.css +231 -0
  16. package/src/cart-panel.js +258 -517
  17. package/dist/cart-panel.scss +0 -107
  18. package/src/cart-panel.scss +0 -107
package/dist/cart-panel.esm.css CHANGED
@@ -1,208 +1,231 @@
1
+ /* =============================================================================
2
+ Cart Panel Component
3
+ ============================================================================= */
4
+
5
+ cart-panel {
6
+ display: block;
7
+ height: 100%;
8
+ overflow-y: auto;
9
+ overflow-x: hidden;
10
+ }
11
+
12
+ /* =============================================================================
13
+ Cart Item Component
14
+ ============================================================================= */
15
+
1
16
  cart-item {
2
- --cart-item-processing-duration: 250ms;
3
- --cart-item-destroying-duration: 600ms;
4
- --cart-item-appearing-duration: 400ms;
5
- --cart-item-shadow-color: rgba(0, 0, 0, 0.15);
6
- --cart-item-shadow-color-strong: rgba(0, 0, 0, 0.5);
7
- --cart-item-destroying-bg: rgba(0, 0, 0, 0.1);
8
- --cart-item-processing-scale: 0.98;
9
- --cart-item-destroying-scale: 0.85;
10
- --cart-item-appearing-scale: 0.9;
11
- --cart-item-processing-blur: 1px;
12
- --cart-item-destroying-blur: 10px;
13
- --cart-item-appearing-blur: 2px;
14
- --cart-item-destroying-opacity: 0.2;
15
- --cart-item-appearing-opacity: 0.5;
16
- --cart-item-destroying-brightness: 0.6;
17
- --cart-item-destroying-saturate: 0.3;
18
- display: block;
19
- position: relative;
20
- overflow: hidden;
21
- padding: 0px;
22
- box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
23
- transition: filter var(--cart-item-processing-duration) ease-out, background-color var(--cart-item-processing-duration) ease-out, box-shadow var(--cart-item-processing-duration) ease-out;
17
+ /* CSS Custom Properties for customization */
18
+ --cart-item-processing-duration: 250ms;
19
+ --cart-item-destroying-duration: 600ms;
20
+ --cart-item-appearing-duration: 400ms;
21
+ --cart-item-shadow-color: rgba(0, 0, 0, 0.15);
22
+ --cart-item-shadow-color-strong: rgba(0, 0, 0, 0.5);
23
+ --cart-item-destroying-bg: rgba(0, 0, 0, 0.1);
24
+ --cart-item-processing-scale: 0.98;
25
+ --cart-item-destroying-scale: 0.85;
26
+ --cart-item-appearing-scale: 0.9;
27
+ --cart-item-processing-blur: 1px;
28
+ --cart-item-destroying-blur: 10px;
29
+ --cart-item-appearing-blur: 2px;
30
+ --cart-item-destroying-opacity: 0.2;
31
+ --cart-item-appearing-opacity: 0.5;
32
+ --cart-item-destroying-brightness: 0.6;
33
+ --cart-item-destroying-saturate: 0.3;
34
+
35
+ display: block;
36
+ position: relative;
37
+ overflow: hidden;
38
+ padding: 0px;
39
+ box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
40
+ transition:
41
+ filter var(--cart-item-processing-duration) ease-out,
42
+ background-color var(--cart-item-processing-duration) ease-out,
43
+ box-shadow var(--cart-item-processing-duration) ease-out;
24
44
  }
45
+
25
46
  cart-item::after {
26
- content: "";
27
- display: block;
28
- position: absolute;
29
- background: rgba(0, 0, 0, 0);
30
- width: 100%;
31
- pointer-events: none;
32
- height: 100%;
33
- top: 0px;
34
- left: 0px;
35
- transition: background-color var(--cart-item-processing-duration) ease;
36
- }
37
- cart-item[state=ready] {
38
- transition: filter var(--cart-item-processing-duration) ease-out, background-color var(--cart-item-processing-duration) ease-out, box-shadow var(--cart-item-processing-duration) ease-out, height var(--cart-item-appearing-duration) ease-out;
39
- }
40
- cart-item[state=ready] cart-item-content {
41
- transform: scale(1);
42
- filter: blur(0px);
43
- opacity: 1;
44
- transition: transform var(--cart-item-appearing-duration) ease-out, filter var(--cart-item-appearing-duration) ease-out, opacity var(--cart-item-appearing-duration) ease-out;
45
- }
46
- cart-item[state=ready] cart-item-processing {
47
- opacity: 0;
48
- visibility: hidden;
49
- }
50
- cart-item[state=processing] {
51
- box-shadow: inset 0px 2px 10px var(--cart-item-shadow-color);
52
- }
53
- cart-item[state=processing]::after {
54
- background: rgba(0, 0, 0, 0.15);
55
- }
56
- cart-item[state=processing] cart-item-content {
57
- transform: scale(var(--cart-item-processing-scale));
58
- filter: blur(var(--cart-item-processing-blur));
59
- opacity: 0.9;
60
- pointer-events: none;
61
- transition: transform var(--cart-item-processing-duration) ease-out, filter var(--cart-item-processing-duration) ease-out, opacity var(--cart-item-processing-duration) ease-out;
62
- }
63
- cart-item[state=processing] cart-item-processing {
64
- opacity: 1;
65
- visibility: visible;
66
- }
67
- cart-item[state=destroying] {
68
- background-color: var(--cart-item-destroying-bg);
69
- box-shadow: inset 0px 2px 20px var(--cart-item-shadow-color-strong);
70
- margin-top: 0px;
71
- margin-bottom: 0px;
72
- transition: filter var(--cart-item-destroying-duration) ease, background-color var(--cart-item-destroying-duration) ease, box-shadow var(--cart-item-destroying-duration) ease, margin var(--cart-item-destroying-duration) ease;
73
- }
74
- cart-item[state=destroying]::after {
75
- background: rgba(0, 0, 0, 0.9);
76
- transition: background-color var(--cart-item-destroying-duration) ease;
77
- }
78
- cart-item[state=destroying] cart-item-content {
79
- transition: transform var(--cart-item-destroying-duration) ease, filter var(--cart-item-destroying-duration) ease, opacity var(--cart-item-destroying-duration) ease;
80
- transform: scale(var(--cart-item-destroying-scale));
81
- filter: blur(var(--cart-item-destroying-blur)) saturate(var(--cart-item-destroying-saturate));
82
- opacity: var(--cart-item-destroying-opacity);
83
- pointer-events: none;
84
- }
85
- cart-item[state=destroying] cart-item-processing {
86
- opacity: 0;
87
- transition: opacity var(--cart-item-processing-duration) ease;
88
- }
89
- cart-item[state=appearing] {
90
- height: 0px;
91
- overflow: hidden;
92
- transition: height var(--cart-item-appearing-duration) ease-out, filter var(--cart-item-appearing-duration) ease-out, opacity var(--cart-item-appearing-duration) ease-out;
93
- }
94
- cart-item[state=appearing] cart-item-content {
95
- transform: scale(var(--cart-item-appearing-scale));
96
- filter: blur(var(--cart-item-appearing-blur));
97
- opacity: var(--cart-item-appearing-opacity);
98
- transition: transform var(--cart-item-appearing-duration) ease-out, filter var(--cart-item-appearing-duration) ease-out, opacity var(--cart-item-appearing-duration) ease-out;
99
- }
100
- cart-item[state=appearing] cart-item-processing {
101
- opacity: 0;
102
- visibility: hidden;
47
+ content: '';
48
+ display: block;
49
+ position: absolute;
50
+ background: rgba(0, 0, 0, 0);
51
+ width: 100%;
52
+ pointer-events: none;
53
+ height: 100%;
54
+ top: 0px;
55
+ left: 0px;
56
+ transition: background-color var(--cart-item-processing-duration) ease;
57
+ }
58
+
59
+ /* Ready state (default) */
60
+ cart-item[state='ready'] {
61
+ transition:
62
+ filter var(--cart-item-processing-duration) ease-out,
63
+ background-color var(--cart-item-processing-duration) ease-out,
64
+ box-shadow var(--cart-item-processing-duration) ease-out,
65
+ height var(--cart-item-appearing-duration) ease-out;
66
+ }
67
+
68
+ cart-item[state='ready'] cart-item-content {
69
+ transform: scale(1);
70
+ filter: blur(0px);
71
+ opacity: 1;
72
+ transition:
73
+ transform var(--cart-item-appearing-duration) ease-out,
74
+ filter var(--cart-item-appearing-duration) ease-out,
75
+ opacity var(--cart-item-appearing-duration) ease-out;
76
+ }
77
+
78
+ cart-item[state='ready'] cart-item-processing {
79
+ opacity: 0;
80
+ visibility: hidden;
81
+ }
82
+
83
+ /* Processing state - content slightly scaled and blurred, processing overlay visible */
84
+ cart-item[state='processing'] {
85
+ box-shadow: inset 0px 2px 10px var(--cart-item-shadow-color);
103
86
  }
104
87
 
88
+ cart-item[state='processing']::after {
89
+ background: rgba(0, 0, 0, 0.15);
90
+ }
91
+
92
+ cart-item[state='processing'] cart-item-content {
93
+ transform: scale(var(--cart-item-processing-scale));
94
+ filter: blur(var(--cart-item-processing-blur));
95
+ opacity: 0.9;
96
+ pointer-events: none;
97
+ transition:
98
+ transform var(--cart-item-processing-duration) ease-out,
99
+ filter var(--cart-item-processing-duration) ease-out,
100
+ opacity var(--cart-item-processing-duration) ease-out;
101
+ }
102
+
103
+ cart-item[state='processing'] cart-item-processing {
104
+ opacity: 1;
105
+ visibility: visible;
106
+ }
107
+
108
+ /* Destroying state - heavy effects on content, darker background */
109
+ cart-item[state='destroying'] {
110
+ background-color: var(--cart-item-destroying-bg);
111
+ box-shadow: inset 0px 2px 20px var(--cart-item-shadow-color-strong);
112
+ margin-top: 0px;
113
+ margin-bottom: 0px;
114
+ transition:
115
+ filter var(--cart-item-destroying-duration) ease,
116
+ background-color var(--cart-item-destroying-duration) ease,
117
+ box-shadow var(--cart-item-destroying-duration) ease,
118
+ margin var(--cart-item-destroying-duration) ease;
119
+ }
120
+
121
+ cart-item[state='destroying']::after {
122
+ background: rgba(0, 0, 0, 0.9);
123
+ transition: background-color var(--cart-item-destroying-duration) ease;
124
+ }
125
+
126
+ cart-item[state='destroying'] cart-item-content {
127
+ transition:
128
+ transform var(--cart-item-destroying-duration) ease,
129
+ filter var(--cart-item-destroying-duration) ease,
130
+ opacity var(--cart-item-destroying-duration) ease;
131
+ transform: scale(var(--cart-item-destroying-scale));
132
+ filter: blur(var(--cart-item-destroying-blur)) saturate(var(--cart-item-destroying-saturate));
133
+ opacity: var(--cart-item-destroying-opacity);
134
+ pointer-events: none;
135
+ }
136
+
137
+ cart-item[state='destroying'] cart-item-processing {
138
+ opacity: 0;
139
+ transition: opacity var(--cart-item-processing-duration) ease;
140
+ }
141
+
142
+ /* Appearing state - reverse of destroying for smooth entry animation */
143
+ cart-item[state='appearing'] {
144
+ height: 0px;
145
+ overflow: hidden;
146
+ transition:
147
+ height var(--cart-item-appearing-duration) ease-out,
148
+ filter var(--cart-item-appearing-duration) ease-out,
149
+ opacity var(--cart-item-appearing-duration) ease-out;
150
+ }
151
+
152
+ cart-item[state='appearing'] cart-item-content {
153
+ transform: scale(var(--cart-item-appearing-scale));
154
+ filter: blur(var(--cart-item-appearing-blur));
155
+ opacity: var(--cart-item-appearing-opacity);
156
+ transition:
157
+ transform var(--cart-item-appearing-duration) ease-out,
158
+ filter var(--cart-item-appearing-duration) ease-out,
159
+ opacity var(--cart-item-appearing-duration) ease-out;
160
+ }
161
+
162
+ cart-item[state='appearing'] cart-item-processing {
163
+ opacity: 0;
164
+ visibility: hidden;
165
+ }
166
+
167
+ /* =============================================================================
168
+ Cart Item Child Components
169
+ ============================================================================= */
170
+
105
171
  cart-item-content {
106
- display: block;
172
+ display: block;
107
173
  }
108
174
 
109
175
  cart-item-processing {
110
- position: absolute;
111
- top: 0;
112
- left: 0;
113
- right: 0;
114
- bottom: 0;
115
- display: flex;
116
- align-items: center;
117
- justify-content: center;
118
- background: transparent;
119
- opacity: 0;
120
- visibility: hidden;
121
- transition: opacity var(--cart-item-processing-duration) ease-out, visibility var(--cart-item-processing-duration) ease-out;
122
- z-index: 10;
176
+ position: absolute;
177
+ top: 0;
178
+ left: 0;
179
+ right: 0;
180
+ bottom: 0;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ background: transparent;
185
+ opacity: 0;
186
+ visibility: hidden;
187
+ transition:
188
+ opacity var(--cart-item-processing-duration) ease-out,
189
+ visibility var(--cart-item-processing-duration) ease-out;
190
+ z-index: 10;
123
191
  }
192
+
193
+ /* Default loader animation */
124
194
  cart-item-processing .cart-item-loader {
125
- width: 60px;
126
- aspect-ratio: 2;
127
- --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
128
- background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
129
- background-size: 33.3333333333% 50%;
130
- animation: cart-item-loader 1s infinite linear;
195
+ width: 60px;
196
+ aspect-ratio: 2;
197
+ --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
198
+ background:
199
+ var(--_g) 0% 50%,
200
+ var(--_g) 50% 50%,
201
+ var(--_g) 100% 50%;
202
+ background-size: calc(100% / 3) 50%;
203
+ animation: cart-item-loader 1s infinite linear;
131
204
  }
132
205
 
133
206
  @keyframes cart-item-loader {
134
- 20% {
135
- background-position: 0% 0%, 50% 50%, 100% 50%;
136
- }
137
- 40% {
138
- background-position: 0% 100%, 50% 0%, 100% 50%;
139
- }
140
- 60% {
141
- background-position: 0% 50%, 50% 100%, 100% 0%;
142
- }
143
- 80% {
144
- background-position: 0% 50%, 50% 50%, 100% 100%;
145
- }
146
- }
147
- :root {
148
- --cart-dialog-z-index: 1000;
149
- --cart-overlay-z-index: 1000;
150
- --cart-panel-z-index: 1001;
151
- --cart-panel-width: min(400px, 90vw);
152
- --cart-overlay-background: rgba(0, 0, 0, 0.15);
153
- --cart-overlay-backdrop-filter: blur(4px);
154
- --cart-panel-background: #ffffff;
155
- --cart-panel-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
156
- --cart-panel-border-radius: 0;
157
- --cart-transition-duration: 350ms;
158
- --cart-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
159
- }
160
-
161
- cart-dialog {
162
- display: contents;
163
- }
164
- cart-dialog[aria-hidden=false] cart-overlay,
165
- cart-dialog[aria-hidden=false] cart-panel {
166
- pointer-events: auto;
167
- opacity: 1;
168
- }
169
- cart-dialog[aria-hidden=false] cart-panel {
170
- transform: translateX(0);
171
- }
172
-
173
- cart-overlay {
174
- position: fixed;
175
- top: 0;
176
- left: 0;
177
- width: 100vw;
178
- height: 100vh;
179
- opacity: 0;
180
- pointer-events: none;
181
- z-index: var(--cart-overlay-z-index);
182
- background-color: var(--cart-overlay-background);
183
- backdrop-filter: var(--cart-overlay-backdrop-filter);
184
- transition: opacity var(--cart-transition-duration) var(--cart-transition-timing), backdrop-filter var(--cart-transition-duration) var(--cart-transition-timing);
207
+ 20% {
208
+ background-position:
209
+ 0% 0%,
210
+ 50% 50%,
211
+ 100% 50%;
212
+ }
213
+ 40% {
214
+ background-position:
215
+ 0% 100%,
216
+ 50% 0%,
217
+ 100% 50%;
218
+ }
219
+ 60% {
220
+ background-position:
221
+ 0% 50%,
222
+ 50% 100%,
223
+ 100% 0%;
224
+ }
225
+ 80% {
226
+ background-position:
227
+ 0% 50%,
228
+ 50% 50%,
229
+ 100% 100%;
230
+ }
185
231
  }
186
-
187
- cart-panel {
188
- position: fixed;
189
- top: 0;
190
- right: 0;
191
- width: var(--cart-panel-width);
192
- height: 100dvh;
193
- transform: translateX(100%);
194
- pointer-events: none;
195
- z-index: var(--cart-panel-z-index);
196
- background: var(--cart-panel-background);
197
- box-shadow: var(--cart-panel-shadow);
198
- border-radius: var(--cart-panel-border-radius);
199
- overflow: hidden;
200
- transition: transform var(--cart-transition-duration) var(--cart-transition-timing);
201
- }
202
- cart-panel.hidden {
203
- display: none;
204
- }
205
-
206
- body.overflow-hidden {
207
- overflow: hidden;
208
- }