@crispy-seed/data-table 0.6.0 → 0.8.0

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 (9) hide show
  1. package/dist/index.cjs +504 -153
  2. package/dist/index.d.ts +98 -39
  3. package/dist/index.js +504 -153
  4. package/dist/{record-panel-recipe.css → record-preview-recipe.css} +35 -35
  5. package/dist/{record-panel-recipe.layered.css → record-preview-recipe.layered.css} +35 -35
  6. package/dist/resizable-panel-recipe.css +62 -22
  7. package/dist/resizable-panel-recipe.layered.css +55 -21
  8. package/dist/styles.css +90 -56
  9. package/package.json +5 -4
package/dist/{record-panel-recipe.css → record-preview-recipe.css} RENAMED
@@ -1,4 +1,4 @@
1
- .seed-record-panel__root {
1
+ .seed-record-preview__root {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  height: 100%;
@@ -6,7 +6,7 @@
6
6
  background: var(--seed-color-bg-layer-default);
7
7
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
8
8
  }
9
- .seed-record-panel__toolbar {
9
+ .seed-record-preview__toolbar {
10
10
  display: flex;
11
11
  align-items: center;
12
12
  height: 49px;
@@ -14,16 +14,16 @@
14
14
  padding: 8px 10px;
15
15
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
16
16
  }
17
- .seed-record-panel__toolbarSpacer {
17
+ .seed-record-preview__toolbarSpacer {
18
18
  flex: 1;
19
19
  }
20
- .seed-record-panel__pager {
20
+ .seed-record-preview__pager {
21
21
  display: flex;
22
22
  align-items: center;
23
23
  gap: 6px;
24
24
  margin-inline-start: 12px;
25
25
  }
26
- .seed-record-panel__counter {
26
+ .seed-record-preview__counter {
27
27
  margin-inline-start: 12px;
28
28
  font-size: 12px;
29
29
  font-weight: 500;
@@ -32,7 +32,7 @@
32
32
  overflow: hidden;
33
33
  text-overflow: ellipsis;
34
34
  }
35
- .seed-record-panel__iconbtn {
35
+ .seed-record-preview__iconbtn {
36
36
  display: inline-flex;
37
37
  align-items: center;
38
38
  justify-content: center;
@@ -48,11 +48,11 @@
48
48
  cursor: pointer;
49
49
  transition: background-color .12s;
50
50
  }
51
- .seed-record-panel__iconbtn:hover {
51
+ .seed-record-preview__iconbtn:hover {
52
52
  background: var(--seed-color-bg-layer-fill);
53
53
  color: var(--seed-color-fg-neutral);
54
54
  }
55
- .seed-record-panel__navbtn {
55
+ .seed-record-preview__navbtn {
56
56
  display: inline-flex;
57
57
  align-items: center;
58
58
  justify-content: center;
@@ -68,14 +68,14 @@
68
68
  font-family: inherit;
69
69
  cursor: pointer;
70
70
  }
71
- .seed-record-panel__navbtn:hover:not(:disabled) {
71
+ .seed-record-preview__navbtn:hover:not(:disabled) {
72
72
  background: var(--seed-color-bg-layer-fill);
73
73
  }
74
- .seed-record-panel__navbtn:disabled {
74
+ .seed-record-preview__navbtn:disabled {
75
75
  opacity: 0.4;
76
76
  cursor: not-allowed;
77
77
  }
78
- .seed-record-panel__header {
78
+ .seed-record-preview__header {
79
79
  display: flex;
80
80
  align-items: center;
81
81
  gap: 8px;
@@ -83,7 +83,7 @@
83
83
  flex-shrink: 0;
84
84
  padding: 0 12px;
85
85
  }
86
- .seed-record-panel__fav {
86
+ .seed-record-preview__fav {
87
87
  width: 22px;
88
88
  height: 22px;
89
89
  border-radius: 4px;
@@ -91,7 +91,7 @@
91
91
  object-fit: cover;
92
92
  background: var(--seed-color-bg-layer-fill);
93
93
  }
94
- .seed-record-panel__title {
94
+ .seed-record-preview__title {
95
95
  flex: 1;
96
96
  min-width: 0;
97
97
  font-size: 16px;
@@ -102,16 +102,16 @@
102
102
  text-overflow: ellipsis;
103
103
  white-space: nowrap;
104
104
  }
105
- .seed-record-panel__body {
105
+ .seed-record-preview__body {
106
106
  flex: 1;
107
107
  min-height: 0;
108
108
  overflow-y: auto;
109
109
  padding: 8px 12px;
110
110
  }
111
- .seed-record-panel__section {
111
+ .seed-record-preview__section {
112
112
  padding: 8px 4px 0;
113
113
  }
114
- .seed-record-panel__sectionHead {
114
+ .seed-record-preview__sectionHead {
115
115
  display: flex;
116
116
  align-items: center;
117
117
  justify-content: space-between;
@@ -119,12 +119,12 @@
119
119
  height: 20px;
120
120
  margin-bottom: 8px;
121
121
  }
122
- .seed-record-panel__sectionLabel {
122
+ .seed-record-preview__sectionLabel {
123
123
  font-size: 14px;
124
124
  font-weight: 500;
125
125
  color: var(--seed-color-fg-neutral-subtle);
126
126
  }
127
- .seed-record-panel__sectionAction {
127
+ .seed-record-preview__sectionAction {
128
128
  border: none;
129
129
  background: none;
130
130
  padding: 0;
@@ -134,21 +134,21 @@
134
134
  color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
135
135
  cursor: pointer;
136
136
  }
137
- .seed-record-panel__sectionAction:hover {
137
+ .seed-record-preview__sectionAction:hover {
138
138
  color: var(--seed-color-fg-neutral);
139
139
  }
140
- .seed-record-panel__highlights {
140
+ .seed-record-preview__highlights {
141
141
  display: grid;
142
142
  grid-template-columns: 1fr 1fr;
143
143
  gap: 8px;
144
144
  }
145
- .seed-record-panel__highlight {
145
+ .seed-record-preview__highlight {
146
146
  display: flex;
147
147
  flex-direction: column;
148
148
  gap: 6px;
149
149
  min-width: 0;
150
150
  }
151
- .seed-record-panel__highlightLabel {
151
+ .seed-record-preview__highlightLabel {
152
152
  display: flex;
153
153
  align-items: center;
154
154
  gap: 4px;
@@ -156,31 +156,31 @@
156
156
  font-weight: 500;
157
157
  color: var(--seed-color-fg-neutral-subtle);
158
158
  }
159
- .seed-record-panel__highlightLabel span {
159
+ .seed-record-preview__highlightLabel span {
160
160
  overflow: hidden;
161
161
  text-overflow: ellipsis;
162
162
  white-space: nowrap;
163
163
  }
164
- .seed-record-panel__highlightLabel svg {
164
+ .seed-record-preview__highlightLabel svg {
165
165
  flex-shrink: 0;
166
166
  color: var(--seed-color-fg-neutral-subtle);
167
167
  }
168
- .seed-record-panel__highlightValue {
168
+ .seed-record-preview__highlightValue {
169
169
  font-size: 14px;
170
170
  font-weight: 500;
171
171
  color: var(--seed-color-fg-neutral);
172
172
  overflow: hidden;
173
173
  text-overflow: ellipsis;
174
174
  }
175
- .seed-record-panel__activity {
175
+ .seed-record-preview__activity {
176
176
  font-size: 14px;
177
177
  }
178
- .seed-record-panel__sections {
178
+ .seed-record-preview__sections {
179
179
  display: flex;
180
180
  flex-direction: column;
181
181
  padding-top: 8px;
182
182
  }
183
- .seed-record-panel__sectionTrigger {
183
+ .seed-record-preview__sectionTrigger {
184
184
  display: flex;
185
185
  align-items: center;
186
186
  gap: 4px;
@@ -193,31 +193,31 @@
193
193
  text-align: start;
194
194
  cursor: pointer;
195
195
  }
196
- .seed-record-panel__sectionTrigger[data-inert] {
196
+ .seed-record-preview__sectionTrigger[data-inert] {
197
197
  cursor: default;
198
198
  }
199
- .seed-record-panel__sectionRowLabel {
199
+ .seed-record-preview__sectionRowLabel {
200
200
  font-size: 14px;
201
201
  font-weight: 500;
202
202
  color: var(--seed-color-fg-neutral);
203
203
  }
204
- .seed-record-panel__sectionRowCount {
204
+ .seed-record-preview__sectionRowCount {
205
205
  font-size: 14px;
206
206
  color: var(--seed-color-fg-neutral-subtle);
207
207
  }
208
- .seed-record-panel__sectionChevron {
208
+ .seed-record-preview__sectionChevron {
209
209
  margin-inline-start: auto;
210
210
  flex-shrink: 0;
211
211
  color: var(--seed-color-fg-neutral-subtle);
212
212
  transition: transform .15s ease;
213
213
  }
214
- .seed-record-panel__sectionChevron[data-open] {
214
+ .seed-record-preview__sectionChevron[data-open] {
215
215
  transform: rotate(180deg);
216
216
  }
217
- .seed-record-panel__sectionContent {
217
+ .seed-record-preview__sectionContent {
218
218
  padding: 8px 8px 8px 12px;
219
219
  }
220
- .seed-record-panel__footer {
220
+ .seed-record-preview__footer {
221
221
  flex-shrink: 0;
222
222
  display: flex;
223
223
  align-items: center;
package/dist/{record-panel-recipe.layered.css → record-preview-recipe.layered.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  @layer seed-components {
2
- .seed-record-panel__root {
2
+ .seed-record-preview__root {
3
3
  background: var(--seed-color-bg-layer-default);
4
4
  flex-direction: column;
5
5
  height: 100%;
@@ -8,7 +8,7 @@
8
8
  overflow: hidden;
9
9
  }
10
10
 
11
- .seed-record-panel__toolbar {
11
+ .seed-record-preview__toolbar {
12
12
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
13
13
  flex-shrink: 0;
14
14
  align-items: center;
@@ -17,18 +17,18 @@
17
17
  display: flex;
18
18
  }
19
19
 
20
- .seed-record-panel__toolbarSpacer {
20
+ .seed-record-preview__toolbarSpacer {
21
21
  flex: 1;
22
22
  }
23
23
 
24
- .seed-record-panel__pager {
24
+ .seed-record-preview__pager {
25
25
  align-items: center;
26
26
  gap: 6px;
27
27
  margin-inline-start: 12px;
28
28
  display: flex;
29
29
  }
30
30
 
31
- .seed-record-panel__counter {
31
+ .seed-record-preview__counter {
32
32
  color: var(--seed-color-fg-neutral-subtle);
33
33
  white-space: nowrap;
34
34
  text-overflow: ellipsis;
@@ -38,7 +38,7 @@
38
38
  overflow: hidden;
39
39
  }
40
40
 
41
- .seed-record-panel__iconbtn {
41
+ .seed-record-preview__iconbtn {
42
42
  width: 28px;
43
43
  height: 28px;
44
44
  color: var(--seed-color-fg-neutral-subtle);
@@ -55,12 +55,12 @@
55
55
  display: inline-flex;
56
56
  }
57
57
 
58
- .seed-record-panel__iconbtn:hover {
58
+ .seed-record-preview__iconbtn:hover {
59
59
  background: var(--seed-color-bg-layer-fill);
60
60
  color: var(--seed-color-fg-neutral);
61
61
  }
62
62
 
63
- .seed-record-panel__navbtn {
63
+ .seed-record-preview__navbtn {
64
64
  background: var(--seed-color-bg-layer-default);
65
65
  width: 28px;
66
66
  height: 28px;
@@ -77,16 +77,16 @@
77
77
  box-shadow: inset 0 0 0 1px #0000000f, 0 0 2px #1c28402e, 0 1px 3px #0000000a;
78
78
  }
79
79
 
80
- .seed-record-panel__navbtn:hover:not(:disabled) {
80
+ .seed-record-preview__navbtn:hover:not(:disabled) {
81
81
  background: var(--seed-color-bg-layer-fill);
82
82
  }
83
83
 
84
- .seed-record-panel__navbtn:disabled {
84
+ .seed-record-preview__navbtn:disabled {
85
85
  opacity: .4;
86
86
  cursor: not-allowed;
87
87
  }
88
88
 
89
- .seed-record-panel__header {
89
+ .seed-record-preview__header {
90
90
  flex-shrink: 0;
91
91
  align-items: center;
92
92
  gap: 8px;
@@ -95,7 +95,7 @@
95
95
  display: flex;
96
96
  }
97
97
 
98
- .seed-record-panel__fav {
98
+ .seed-record-preview__fav {
99
99
  object-fit: cover;
100
100
  background: var(--seed-color-bg-layer-fill);
101
101
  border-radius: 4px;
@@ -104,7 +104,7 @@
104
104
  height: 22px;
105
105
  }
106
106
 
107
- .seed-record-panel__title {
107
+ .seed-record-preview__title {
108
108
  letter-spacing: -.2px;
109
109
  min-width: 0;
110
110
  color: var(--seed-color-fg-neutral);
@@ -116,18 +116,18 @@
116
116
  overflow: hidden;
117
117
  }
118
118
 
119
- .seed-record-panel__body {
119
+ .seed-record-preview__body {
120
120
  flex: 1;
121
121
  min-height: 0;
122
122
  padding: 8px 12px;
123
123
  overflow-y: auto;
124
124
  }
125
125
 
126
- .seed-record-panel__section {
126
+ .seed-record-preview__section {
127
127
  padding: 8px 4px 0;
128
128
  }
129
129
 
130
- .seed-record-panel__sectionHead {
130
+ .seed-record-preview__sectionHead {
131
131
  justify-content: space-between;
132
132
  align-items: center;
133
133
  gap: 8px;
@@ -136,13 +136,13 @@
136
136
  display: flex;
137
137
  }
138
138
 
139
- .seed-record-panel__sectionLabel {
139
+ .seed-record-preview__sectionLabel {
140
140
  color: var(--seed-color-fg-neutral-subtle);
141
141
  font-size: 14px;
142
142
  font-weight: 500;
143
143
  }
144
144
 
145
- .seed-record-panel__sectionAction {
145
+ .seed-record-preview__sectionAction {
146
146
  color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
147
147
  cursor: pointer;
148
148
  background: none;
@@ -153,24 +153,24 @@
153
153
  font-weight: 400;
154
154
  }
155
155
 
156
- .seed-record-panel__sectionAction:hover {
156
+ .seed-record-preview__sectionAction:hover {
157
157
  color: var(--seed-color-fg-neutral);
158
158
  }
159
159
 
160
- .seed-record-panel__highlights {
160
+ .seed-record-preview__highlights {
161
161
  grid-template-columns: 1fr 1fr;
162
162
  gap: 8px;
163
163
  display: grid;
164
164
  }
165
165
 
166
- .seed-record-panel__highlight {
166
+ .seed-record-preview__highlight {
167
167
  flex-direction: column;
168
168
  gap: 6px;
169
169
  min-width: 0;
170
170
  display: flex;
171
171
  }
172
172
 
173
- .seed-record-panel__highlightLabel {
173
+ .seed-record-preview__highlightLabel {
174
174
  color: var(--seed-color-fg-neutral-subtle);
175
175
  align-items: center;
176
176
  gap: 4px;
@@ -179,18 +179,18 @@
179
179
  display: flex;
180
180
  }
181
181
 
182
- .seed-record-panel__highlightLabel span {
182
+ .seed-record-preview__highlightLabel span {
183
183
  text-overflow: ellipsis;
184
184
  white-space: nowrap;
185
185
  overflow: hidden;
186
186
  }
187
187
 
188
- .seed-record-panel__highlightLabel svg {
188
+ .seed-record-preview__highlightLabel svg {
189
189
  color: var(--seed-color-fg-neutral-subtle);
190
190
  flex-shrink: 0;
191
191
  }
192
192
 
193
- .seed-record-panel__highlightValue {
193
+ .seed-record-preview__highlightValue {
194
194
  color: var(--seed-color-fg-neutral);
195
195
  text-overflow: ellipsis;
196
196
  font-size: 14px;
@@ -198,17 +198,17 @@
198
198
  overflow: hidden;
199
199
  }
200
200
 
201
- .seed-record-panel__activity {
201
+ .seed-record-preview__activity {
202
202
  font-size: 14px;
203
203
  }
204
204
 
205
- .seed-record-panel__sections {
205
+ .seed-record-preview__sections {
206
206
  flex-direction: column;
207
207
  padding-top: 8px;
208
208
  display: flex;
209
209
  }
210
210
 
211
- .seed-record-panel__sectionTrigger {
211
+ .seed-record-preview__sectionTrigger {
212
212
  text-align: start;
213
213
  cursor: pointer;
214
214
  background: none;
@@ -222,37 +222,37 @@
222
222
  display: flex;
223
223
  }
224
224
 
225
- .seed-record-panel__sectionTrigger[data-inert] {
225
+ .seed-record-preview__sectionTrigger[data-inert] {
226
226
  cursor: default;
227
227
  }
228
228
 
229
- .seed-record-panel__sectionRowLabel {
229
+ .seed-record-preview__sectionRowLabel {
230
230
  color: var(--seed-color-fg-neutral);
231
231
  font-size: 14px;
232
232
  font-weight: 500;
233
233
  }
234
234
 
235
- .seed-record-panel__sectionRowCount {
235
+ .seed-record-preview__sectionRowCount {
236
236
  color: var(--seed-color-fg-neutral-subtle);
237
237
  font-size: 14px;
238
238
  }
239
239
 
240
- .seed-record-panel__sectionChevron {
240
+ .seed-record-preview__sectionChevron {
241
241
  color: var(--seed-color-fg-neutral-subtle);
242
242
  flex-shrink: 0;
243
243
  margin-inline-start: auto;
244
244
  transition: transform .15s;
245
245
  }
246
246
 
247
- .seed-record-panel__sectionChevron[data-open] {
247
+ .seed-record-preview__sectionChevron[data-open] {
248
248
  transform: rotate(180deg);
249
249
  }
250
250
 
251
- .seed-record-panel__sectionContent {
251
+ .seed-record-preview__sectionContent {
252
252
  padding: 8px 8px 8px 12px;
253
253
  }
254
254
 
255
- .seed-record-panel__footer {
255
+ .seed-record-preview__footer {
256
256
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
257
257
  flex-shrink: 0;
258
258
  align-items: center;
package/dist/resizable-panel-recipe.css CHANGED
@@ -33,43 +33,83 @@
33
33
  border-inline-start: 1px solid var(--seed-color-stroke-neutral-muted);
34
34
  }
35
35
  .seed-resizable-panel__panel[data-floating='true'] {
36
- position: fixed;
36
+ position: absolute;
37
37
  top: 8px;
38
38
  bottom: 8px;
39
+ z-index: 20;
39
40
  border-inline-end: none;
40
41
  border-inline-start: none;
41
- border-radius: 10px;
42
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0), 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16);
42
+ border-radius: 12px;
43
+ box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16);
43
44
  transform: none;
44
- transition: transform 0.14s, padding 0.14s;
45
+ opacity: 1;
45
46
  }
46
47
  .seed-resizable-panel__panel[data-floating='true'][data-side='left'] {
47
- padding: 8px 0 8px 8px;
48
+ left: 8px;
48
49
  }
49
- @starting-style {
50
- .seed-resizable-panel__panel[data-floating='true'][data-side='left'] {
51
- transform: translateX(calc(-100% - 8px));
50
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
51
+ right: 8px;
52
+ }
53
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='open'] {
54
+ animation: seed-enter;
55
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
56
+ animation-duration: 0.18s;
57
+ --seed-enter-translate-x: calc(-100% - 8px);
58
+ --seed-enter-translate-y: 0;
59
+ --seed-enter-opacity: 0;
60
+ --seed-enter-scale: 1;
61
+ }
62
+ @media (prefers-reduced-motion: reduce) {
63
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='open'] {
64
+ --seed-enter-translate-x: 0;
52
65
  }
53
66
  }
54
- .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
55
- padding: 8px 8px 8px 0;
67
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='closed'] {
68
+ animation: seed-exit;
69
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
70
+ animation-duration: 0.14s;
71
+ animation-fill-mode: forwards;
72
+ --seed-exit-translate-x: calc(-100% - 8px);
73
+ --seed-exit-translate-y: 0;
74
+ --seed-exit-opacity: 0;
75
+ --seed-exit-scale: 1;
76
+ }
77
+ @media (prefers-reduced-motion: reduce) {
78
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='closed'] {
79
+ --seed-exit-translate-x: 0;
80
+ }
56
81
  }
57
- @starting-style {
58
- .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
59
- transform: translateX(calc(100% + 8px));
82
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='open'] {
83
+ animation: seed-enter;
84
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
85
+ animation-duration: 0.18s;
86
+ --seed-enter-translate-x: calc(100% + 8px);
87
+ --seed-enter-translate-y: 0;
88
+ --seed-enter-opacity: 0;
89
+ --seed-enter-scale: 1;
90
+ }
91
+ @media (prefers-reduced-motion: reduce) {
92
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='open'] {
93
+ --seed-enter-translate-x: 0;
94
+ }
95
+ }
96
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='closed'] {
97
+ animation: seed-exit;
98
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
99
+ animation-duration: 0.14s;
100
+ animation-fill-mode: forwards;
101
+ --seed-exit-translate-x: calc(100% + 8px);
102
+ --seed-exit-translate-y: 0;
103
+ --seed-exit-opacity: 0;
104
+ --seed-exit-scale: 1;
105
+ }
106
+ @media (prefers-reduced-motion: reduce) {
107
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='closed'] {
108
+ --seed-exit-translate-x: 0;
60
109
  }
61
110
  }
62
111
  .seed-resizable-panel__inner {
63
112
  height: 100%;
64
- opacity: 1;
65
- }
66
- [data-floating='true'] > .seed-resizable-panel__inner {
67
- transition: opacity 0.14s;
68
- }
69
- @starting-style {
70
- [data-floating='true'] > .seed-resizable-panel__inner {
71
- opacity: 0;
72
- }
73
113
  }
74
114
  .seed-resizable-panel__handle {
75
115
  position: absolute;
package/dist/resizable-panel-recipe.layered.css CHANGED
@@ -42,51 +42,85 @@
42
42
  }
43
43
 
44
44
  .seed-resizable-panel__panel[data-floating="true"] {
45
+ z-index: 20;
46
+ opacity: 1;
45
47
  border-inline: none;
46
- border-radius: 10px;
47
- transition: transform .14s, padding .14s;
48
- position: fixed;
48
+ border-radius: 12px;
49
+ position: absolute;
49
50
  top: 8px;
50
51
  bottom: 8px;
51
52
  transform: none;
52
- box-shadow: inset 0 0 0 1px #0000, 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
53
+ box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
53
54
  }
54
55
 
55
56
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
56
- padding: 8px 0 8px 8px;
57
+ left: 8px;
58
+ }
59
+
60
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
61
+ right: 8px;
57
62
  }
58
63
 
59
- @starting-style {
60
- .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
61
- transform: translateX(calc(-100% - 8px));
64
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
65
+ --seed-enter-translate-x: calc(-100% - 8px);
66
+ --seed-enter-translate-y: 0;
67
+ --seed-enter-opacity: 0;
68
+ --seed-enter-scale: 1;
69
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
70
+ }
71
+
72
+ @media (prefers-reduced-motion: reduce) {
73
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
74
+ --seed-enter-translate-x: 0;
62
75
  }
63
76
  }
64
77
 
65
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
66
- padding: 8px 8px 8px 0;
78
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
79
+ --seed-exit-translate-x: calc(-100% - 8px);
80
+ --seed-exit-translate-y: 0;
81
+ --seed-exit-opacity: 0;
82
+ --seed-exit-scale: 1;
83
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
67
84
  }
68
85
 
69
- @starting-style {
70
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
71
- transform: translateX(calc(100% + 8px));
86
+ @media (prefers-reduced-motion: reduce) {
87
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
88
+ --seed-exit-translate-x: 0;
72
89
  }
73
90
  }
74
91
 
75
- .seed-resizable-panel__inner {
76
- opacity: 1;
77
- height: 100%;
92
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
93
+ --seed-enter-translate-x: calc(100% + 8px);
94
+ --seed-enter-translate-y: 0;
95
+ --seed-enter-opacity: 0;
96
+ --seed-enter-scale: 1;
97
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
98
+ }
99
+
100
+ @media (prefers-reduced-motion: reduce) {
101
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
102
+ --seed-enter-translate-x: 0;
103
+ }
78
104
  }
79
105
 
80
- [data-floating="true"] > .seed-resizable-panel__inner {
81
- transition: opacity .14s;
106
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
107
+ --seed-exit-translate-x: calc(100% + 8px);
108
+ --seed-exit-translate-y: 0;
109
+ --seed-exit-opacity: 0;
110
+ --seed-exit-scale: 1;
111
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
82
112
  }
83
113
 
84
- @starting-style {
85
- [data-floating="true"] > .seed-resizable-panel__inner {
86
- opacity: 0;
114
+ @media (prefers-reduced-motion: reduce) {
115
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
116
+ --seed-exit-translate-x: 0;
87
117
  }
88
118
  }
89
119
 
120
+ .seed-resizable-panel__inner {
121
+ height: 100%;
122
+ }
123
+
90
124
  .seed-resizable-panel__handle {
91
125
  z-index: 2;
92
126
  cursor: col-resize;