@react-spectrum/list 3.7.9-nightly.4491 → 3.7.9-nightly.4502

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 (8) hide show
  1. package/dist/import.mjs +1 -1
  2. package/dist/main.css +30 -94
  3. package/dist/main.css.map +1 -1
  4. package/dist/main.js +1 -1
  5. package/dist/module.css +839 -0
  6. package/dist/module.css.map +1 -0
  7. package/dist/module.js +1 -1
  8. package/package.json +26 -26
package/dist/import.mjs CHANGED
@@ -1,4 +1,3 @@
1
- import "./main.css";
2
1
  import $a8be062dce739a7d$exports from "./ar-AE.mjs";
3
2
  import $ebee5026543c5714$exports from "./bg-BG.mjs";
4
3
  import $ec2dceffa5b2d037$exports from "./cs-CZ.mjs";
@@ -33,6 +32,7 @@ import $7af10700b945dced$exports from "./tr-TR.mjs";
33
32
  import $00a02749c6fa842b$exports from "./uk-UA.mjs";
34
33
  import $e3b2b7128a600af6$exports from "./zh-CN.mjs";
35
34
  import $8751d9847e270a98$exports from "./zh-TW.mjs";
35
+ import "./module.css";
36
36
  import {Item as $75e4a7b01832b12d$re_export$Item} from "@react-stately/collections";
37
37
  import {useGridList as $fWI2a$useGridList, useGridListItem as $fWI2a$useGridListItem, useGridListSelectionCheckbox as $fWI2a$useGridListSelectionCheckbox} from "@react-aria/gridlist";
38
38
  import {useDOMRef as $fWI2a$useDOMRef, useStyleProps as $fWI2a$useStyleProps, classNames as $fWI2a$classNames, useHasChild as $fWI2a$useHasChild, SlotProvider as $fWI2a$SlotProvider, ClearSlots as $fWI2a$ClearSlots} from "@react-spectrum/utils";
package/dist/main.css CHANGED
@@ -72,21 +72,14 @@
72
72
  forced-color-adjust: none;
73
73
  display: block;
74
74
  position: absolute;
75
- top: 0;
76
- bottom: 0;
77
- left: 0;
78
- right: 0;
75
+ inset: 0;
79
76
  }
80
77
 
81
78
  .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected {
82
79
  background-color: var(--spectrum-listview-item-background-color-selected);
83
80
  }
84
81
 
85
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-hovered {
86
- background-color: var(--spectrum-listview-item-background-color-selected-hover);
87
- }
88
-
89
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-active {
82
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-hovered, .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-active {
90
83
  background-color: var(--spectrum-listview-item-background-color-selected-hover);
91
84
  }
92
85
 
@@ -107,7 +100,7 @@
107
100
  box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);
108
101
  }
109
102
 
110
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_is-selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
103
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_is-selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
111
104
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
112
105
  border-top-right-radius: var(--spectrum-listview-item-border-radius);
113
106
  }
@@ -127,7 +120,7 @@
127
120
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
128
121
  }
129
122
 
130
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet):not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
123
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet):not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
131
124
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
132
125
  border-bottom-left-radius: var(--spectrum-listview-item-border-radius);
133
126
  }
@@ -147,7 +140,7 @@
147
140
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
148
141
  }
149
142
 
150
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_is-selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
143
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_is-selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
151
144
  border-top-right-radius: 0;
152
145
  }
153
146
 
@@ -163,7 +156,7 @@
163
156
  border-top-left-radius: 0;
164
157
  }
165
158
 
166
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible:not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
159
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible:not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
167
160
  border-bottom-right-radius: 0;
168
161
  }
169
162
 
@@ -179,7 +172,7 @@
179
172
  border-bottom-left-radius: 0;
180
173
  }
181
174
 
182
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible:not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
175
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--emphasized:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible:not(.C64cMW_react-spectrum-ListView--loadingMore) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem--isFlushBottom.C64cMW_is-selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
183
176
  border-bottom-right-radius: 0;
184
177
  border-bottom-left-radius: 0;
185
178
  }
@@ -199,12 +192,7 @@
199
192
  border-bottom-left-radius: 0;
200
193
  }
201
194
 
202
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--wrap .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-content {
203
- white-space: normal;
204
- height: auto;
205
- }
206
-
207
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--wrap .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-description {
195
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--wrap .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-content, .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--wrap .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-description {
208
196
  white-space: normal;
209
197
  height: auto;
210
198
  }
@@ -224,7 +212,7 @@
224
212
  bottom: 0;
225
213
  }
226
214
 
227
- .C64cMW_react-spectrum-ListView-row.C64cMW_focus-ring:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
215
+ .C64cMW_react-spectrum-ListView-row.C64cMW_focus-ring:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
228
216
  left: 0;
229
217
  }
230
218
 
@@ -246,7 +234,7 @@
246
234
  border-radius: 0;
247
235
  }
248
236
 
249
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops.C64cMW_focus-ring:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
237
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops.C64cMW_focus-ring:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
250
238
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
251
239
  }
252
240
 
@@ -262,7 +250,7 @@
262
250
  border-top-right-radius: var(--spectrum-listview-item-border-radius);
263
251
  }
264
252
 
265
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops > .C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
253
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops > .C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
266
254
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
267
255
  border-top-right-radius: var(--spectrum-listview-item-border-radius);
268
256
  }
@@ -282,7 +270,7 @@
282
270
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
283
271
  }
284
272
 
285
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops > .C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
273
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-tops > .C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
286
274
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
287
275
  border-top-right-radius: var(--spectrum-listview-item-border-radius);
288
276
  }
@@ -302,7 +290,7 @@
302
290
  border-top-left-radius: var(--spectrum-listview-item-border-radius);
303
291
  }
304
292
 
305
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms.C64cMW_focus-ring:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
293
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms.C64cMW_focus-ring:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
306
294
  border-bottom-left-radius: var(--spectrum-listview-item-border-radius);
307
295
  }
308
296
 
@@ -318,7 +306,7 @@
318
306
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
319
307
  }
320
308
 
321
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms > .C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
309
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms > .C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
322
310
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
323
311
  border-bottom-left-radius: var(--spectrum-listview-item-border-radius);
324
312
  }
@@ -338,7 +326,7 @@
338
326
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
339
327
  }
340
328
 
341
- .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms > .C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
329
+ .C64cMW_react-spectrum-ListView.C64cMW_react-spectrum-ListView--quiet .C64cMW_react-spectrum-ListView-row.C64cMW_round-bottoms > .C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
342
330
  border-bottom-right-radius: var(--spectrum-listview-item-border-radius);
343
331
  border-bottom-left-radius: var(--spectrum-listview-item-border-radius);
344
332
  }
@@ -375,15 +363,7 @@
375
363
  position: relative;
376
364
  }
377
365
 
378
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-hovered {
379
- background-color: var(--spectrum-listview-item-background-color-hover);
380
- }
381
-
382
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-focused {
383
- background-color: var(--spectrum-listview-item-background-color-hover);
384
- }
385
-
386
- .C64cMW_react-spectrum-ListViewItem.C64cMW_focus-ring {
366
+ .C64cMW_react-spectrum-ListViewItem.C64cMW_is-hovered, .C64cMW_react-spectrum-ListViewItem.C64cMW_is-focused, .C64cMW_react-spectrum-ListViewItem.C64cMW_focus-ring {
387
367
  background-color: var(--spectrum-listview-item-background-color-hover);
388
368
  }
389
369
 
@@ -391,15 +371,7 @@
391
371
  background-color: var(--spectrum-listview-item-background-color-down);
392
372
  }
393
373
 
394
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected {
395
- background-color: var(--spectrum-listview-item-background-color-hover);
396
- }
397
-
398
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-hovered {
399
- background-color: var(--spectrum-listview-item-background-color-hover);
400
- }
401
-
402
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-active {
374
+ .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected, .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-hovered, .C64cMW_react-spectrum-ListViewItem.C64cMW_is-selected.C64cMW_is-active {
403
375
  background-color: var(--spectrum-listview-item-background-color-hover);
404
376
  }
405
377
 
@@ -407,15 +379,7 @@
407
379
  background-color: var(--spectrum-listview-item-background-color-selected-key-focus);
408
380
  }
409
381
 
410
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled {
411
- color: var(--spectrum-listview-item-text-color-disabled);
412
- }
413
-
414
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled .C64cMW_react-spectrum-ListViewItem-content {
415
- color: var(--spectrum-listview-item-text-color-disabled);
416
- }
417
-
418
- .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled .C64cMW_react-spectrum-ListViewItem-description {
382
+ .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled, .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled .C64cMW_react-spectrum-ListViewItem-content, .C64cMW_react-spectrum-ListViewItem.C64cMW_is-disabled .C64cMW_react-spectrum-ListViewItem-description {
419
383
  color: var(--spectrum-listview-item-text-color-disabled);
420
384
  }
421
385
 
@@ -489,15 +453,7 @@
489
453
  height: 100%;
490
454
  }
491
455
 
492
- .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-content {
493
- white-space: nowrap;
494
- text-overflow: ellipsis;
495
- height: var(--spectrum-listview-item-line-height);
496
- flex-grow: 1;
497
- overflow: hidden;
498
- }
499
-
500
- .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-description {
456
+ .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-content, .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-description {
501
457
  white-space: nowrap;
502
458
  text-overflow: ellipsis;
503
459
  height: var(--spectrum-listview-item-line-height);
@@ -581,7 +537,6 @@
581
537
  .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview.C64cMW_react-spectrum-ListViewItem-dragPreview--multiple:after {
582
538
  content: "";
583
539
  z-index: -1;
584
- top: 4px;
585
540
  border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);
586
541
  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
587
542
  background-color: var(--spectrum-listview-background-color);
@@ -590,9 +545,10 @@
590
545
  height: 100%;
591
546
  display: block;
592
547
  position: absolute;
548
+ top: 4px;
593
549
  }
594
550
 
595
- .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview.C64cMW_react-spectrum-ListViewItem-dragPreview--multiple:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
551
+ .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview.C64cMW_react-spectrum-ListViewItem-dragPreview--multiple:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
596
552
  left: 4px;
597
553
  }
598
554
 
@@ -608,15 +564,11 @@
608
564
  right: 4px;
609
565
  }
610
566
 
611
- .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview .C64cMW_react-spectrum-ListViewItem-actions {
612
- display: none;
613
- }
614
-
615
- .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview .C64cMW_react-spectrum-ListViewItem-actionmenu {
567
+ .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview .C64cMW_react-spectrum-ListViewItem-actions, .C64cMW_react-spectrum-ListViewItem.C64cMW_react-spectrum-ListViewItem-dragPreview .C64cMW_react-spectrum-ListViewItem-actionmenu {
616
568
  display: none;
617
569
  }
618
570
 
619
- .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
571
+ .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
620
572
  border-top-left-radius: var(--spectrum-listview-item-start-end-border-radius);
621
573
  border-top-right-radius: var(--spectrum-listview-item-start-end-border-radius);
622
574
  }
@@ -636,7 +588,7 @@
636
588
  border-top-left-radius: var(--spectrum-listview-item-start-end-border-radius);
637
589
  }
638
590
 
639
- .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
591
+ .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet) .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
640
592
  border-bottom-right-radius: var(--spectrum-listview-item-start-end-border-radius);
641
593
  border-bottom-left-radius: var(--spectrum-listview-item-start-end-border-radius);
642
594
  }
@@ -656,7 +608,7 @@
656
608
  border-bottom-right-radius: var(--spectrum-listview-item-start-end-border-radius);
657
609
  }
658
610
 
659
- .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
611
+ .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--firstRow.C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
660
612
  border-top-right-radius: 0;
661
613
  }
662
614
 
@@ -672,7 +624,7 @@
672
624
  border-top-left-radius: 0;
673
625
  }
674
626
 
675
- .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
627
+ .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
676
628
  border-bottom-right-radius: 0;
677
629
  }
678
630
 
@@ -688,7 +640,7 @@
688
640
  border-bottom-left-radius: 0;
689
641
  }
690
642
 
691
- .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
643
+ .C64cMW_react-spectrum-ListView:not(.C64cMW_react-spectrum-ListView--quiet).C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible .C64cMW_react-spectrum-ListViewItem--lastRow.C64cMW_react-spectrum-ListViewItem:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
692
644
  border-bottom-right-radius: 0;
693
645
  border-bottom-left-radius: 0;
694
646
  }
@@ -733,7 +685,7 @@
733
685
  padding-inline-start: 0;
734
686
  }
735
687
 
736
- .C64cMW_react-spectrum-ListView--draggable .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-checkbox input:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
688
+ .C64cMW_react-spectrum-ListView--draggable .C64cMW_react-spectrum-ListViewItem .C64cMW_react-spectrum-ListViewItem-checkbox input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
737
689
  left: 0;
738
690
  }
739
691
 
@@ -784,7 +736,7 @@
784
736
  position: absolute;
785
737
  }
786
738
 
787
- .C64cMW_react-spectrum-ListViewInsertionIndicator:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
739
+ .C64cMW_react-spectrum-ListViewInsertionIndicator:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
788
740
  left: var(--spectrum-listview-dropindicator-circle-size);
789
741
  }
790
742
 
@@ -814,22 +766,7 @@
814
766
  right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);
815
767
  }
816
768
 
817
- .C64cMW_react-spectrum-ListViewInsertionIndicator.C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget:before {
818
- content: "";
819
- top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);
820
- width: var(--spectrum-listview-dropindicator-circle-size);
821
- height: var(--spectrum-listview-dropindicator-circle-size);
822
- border: var(--spectrum-listview-dropindicator-border-size) solid;
823
- box-sizing: border-box;
824
- border-color: var(--spectrum-listview-dropindicator-circle-border-color);
825
- background-color: var(--spectrum-listview-background-color);
826
- z-index: 5;
827
- forced-color-adjust: none;
828
- border-radius: 50%;
829
- position: absolute;
830
- }
831
-
832
- .C64cMW_react-spectrum-ListViewInsertionIndicator.C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget:after {
769
+ .C64cMW_react-spectrum-ListViewInsertionIndicator.C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget:before, .C64cMW_react-spectrum-ListViewInsertionIndicator.C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget:after {
833
770
  content: "";
834
771
  top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);
835
772
  width: var(--spectrum-listview-dropindicator-circle-size);
@@ -899,5 +836,4 @@
899
836
  --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;
900
837
  }
901
838
  }
902
-
903
839
  /*# sourceMappingURL=main.css.map */
package/dist/main.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;;;;AAeA;;;;AAEE;;;;AAAA;;;;AAKA;;;;AAKA;;;;;AAaE;;;;AAYA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUR;;;;;AAAA;;;;;AAQJ;;;;AAII;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAgBJ;;;;;;AAQQ;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASR;;;;AAIA;;;;;;;;;;;;;AAaE;;;;AAAA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAGE;;;;AAAA;;;;AAKA;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAAA;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAAA;;;;AAUF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAKA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAME;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUA;;;;;AAIA;;;;AAMJ;;;;;;AAMA;;;;;;AAMA;;;;AAII;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMJ;;;;;;AAYA;;;;;;;AASE;;;;AAKF;;;;;;;;AAME;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAoBJ;;;;;AAKA;;;;;AAUA;;;;;AAME;;;;;AAMF;EACE;;;;;;;;;;;;;;;;;;;EA0BM;;;;;;;EAUN;;;;EAGE","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n box-sizing: border-box;\n border-color: var(--spectrum-listview-border-color);\n border-style: solid;\n position: relative;\n border-width: var(--spectrum-listview-border-width);\n border-radius: var(--spectrum-listview-border-radius);\n overflow: auto;\n vertical-align: var(--spectrum-table-cell-vertical-alignment);\n border-collapse: separate;\n border-spacing: 0;\n transform: translate3d(0, 0, 0);\n padding: 0;\n background-color: var(--spectrum-listview-background-color);\n outline: 0;\n user-select: none;\n\n .react-spectrum-ListView-row {\n outline: none;\n }\n\n &.react-spectrum-ListView--emphasized {\n &.react-spectrum-ListView--dropTarget {\n .react-spectrum-ListViewItem:not(.is-selected) {\n /* shift bottom border inwards so it doesn't overlap the root drop target */\n &:after {\n inset-inline-start: 1px;\n inset-inline-end: 1px;\n }\n }\n }\n .react-spectrum-ListViewItem {\n /* common pseudoelement for box shadows */\n &:after {\n content: '';\n display: block;\n position: absolute;\n inset-inline-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inset-block-start: 0;\n z-index: 3;\n pointer-events: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-selected);\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-selected-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n\n /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n &:after {\n inset-block-start: -1px;\n box-shadow:\n inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n }\n }\n\n /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n &.react-spectrum-ListViewItem--firstRow {\n &.is-selected {\n &:after {\n inset-block-start: 0px;\n }\n }\n }\n }\n\n &:not(.react-spectrum-ListView--quiet) {\n .react-spectrum-ListViewItem {\n /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n &:after {\n box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n }\n }\n\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem {\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-end-radius: 0;\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-end-radius: 0;\n }\n }\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n }\n }\n }\n &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n & .react-spectrum-ListViewItem-content,\n & .react-spectrum-ListViewItem-description {\n white-space: normal;\n height: auto;\n }\n }\n}\n\n.react-spectrum-ListView-row {\n cursor: default;\n /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n &:focus-visible {\n &:before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n z-index: 4;\n background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n background-color: var(--spectrum-listview-quiet-background-color);\n border-width: 0;\n border-radius: 0;\n\n .react-spectrum-ListView-row {\n &.round-tops {\n &:focus-visible {\n &:before {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.round-bottoms {\n &:focus-visible {\n &:before {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n }\n}\n\n.react-spectrum-ListView-row[data-href] {\n cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\n box-sizing: border-box;\n font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n line-height: var(--spectrum-listview-item-line-height);\n padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n position: relative;\n /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n color: var(--spectrum-listview-item-text-color);\n outline: 0;\n min-height: var(--spectrum-global-dimension-size-500);\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-down);\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-hover);\n\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n }\n\n &.is-disabled {\n &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n color: var(--spectrum-listview-item-text-color-disabled);\n }\n }\n\n &.has-checkbox {\n /* have to eliminate vertical padding to allow proper vertical alignment */\n padding-top: 0px;\n padding-bottom: 0px;\n }\n\n .react-spectrum-ListViewItem-grid {\n display: grid;\n grid-template-columns: auto auto auto 1fr auto auto auto;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n align-items: center;\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n grid-area: draghandle;\n width: var(--spectrum-global-dimension-size-250);\n display: flex;\n align-self: stretch;\n justify-self: stretch;\n justify-content: center;\n padding: var(--spectrum-global-dimension-size-25);\n padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n .react-spectrum-ListViewItem-draghandle-button {\n width: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--spectrum-alias-border-radius-regular);\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n outline: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n }\n\n .react-spectrum-ListViewItem-checkboxWrapper {\n grid-area: checkbox;\n align-items: center;\n justify-items: center;\n transition-duration: 160ms;\n display: flex;\n }\n\n .react-spectrum-ListViewItem-checkbox {\n min-height: 0;\n height: 100%;\n\n > span {\n margin: 0;\n }\n }\n\n .react-spectrum-ListViewItem-thumbnail {\n box-sizing: content-box;\n grid-area: thumbnail;\n justify-items: center;\n padding-inline-end: var(--spectrum-global-dimension-size-100);\n display: flex;\n border-radius: var(--spectrum-global-dimension-size-25);\n width: var(--spectrum-global-dimension-size-400);\n height: var(--spectrum-global-dimension-size-400);\n align-items: center;\n justify-content: center;\n\n > img {\n width: unset;\n height: 100%;\n }\n }\n\n .react-spectrum-ListViewItem-content,\n .react-spectrum-ListViewItem-description {\n flex-grow: 1;\n\n /* truncate text with ellipsis */\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: var(--spectrum-listview-item-line-height);\n }\n\n .react-spectrum-ListViewItem-content {\n grid-area: content;\n color: var(--spectrum-listview-item-title-text-color);\n font-size: var(--spectrum-listview-item-title-text-size);\n }\n\n &:not(.react-spectrum-ListView--hasDescription) {\n .react-spectrum-ListViewItem-content {\n grid-area: content / description;\n }\n }\n\n .react-spectrum-ListViewItem-description {\n grid-area: description;\n color: var(--spectrum-listview-item-description-text-color);\n font-size: var(--spectrum-listview-item-description-text-size);\n }\n\n .react-spectrum-ListViewItem-actions {\n grid-area: actions;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n .react-spectrum-ListViewItem-actionmenu {\n grid-area: actionmenu;\n }\n\n .react-spectrum-ListViewItem-parentIndicator {\n grid-area: chevron;\n padding-inline-start: var(--spectrum-global-dimension-size-75);\n display: none;\n transition: color var(--spectrum-global-animation-duration-100);\n\n &.is-disabled {\n color: var(--spectrum-alias-icon-color-disabled);\n }\n }\n\n &.react-spectrum-ListViewItem-dragPreview {\n width: var(--spectrum-global-dimension-size-2400);\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that background-color style will render */\n forced-color-adjust: none;\n\n &.react-spectrum-ListViewItem-dragPreview--compact {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--spacious {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n }\n\n .react-spectrum-ListViewItem-grid {\n grid-template-areas:\n \"thumbnail content . badge\"\n \"thumbnail description . badge\";\n grid-template-columns: auto auto 1fr auto;\n }\n\n .react-spectrum-ListViewItem-badge {\n grid-area: badge;\n color: var(--spectrum-listview-item-badge-text-color);\n background: var(--spectrum-listview-item-badge-background-color);\n padding: 0 8px;\n border-radius: var(--spectrum-alias-border-radius-regular);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--multiple {\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n z-index: -1;\n top: 4px;\n inset-inline-start: 4px;\n width: 100%;\n height: 100%;\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n\n .react-spectrum-ListViewItem-actions,\n .react-spectrum-ListViewItem-actionmenu {\n display: none;\n }\n }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n /* give first and last items border-radius to match listview container */\n\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n\n &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n border-start-end-radius: 0;\n }\n\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-end-radius: 0;\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n}\n\n.react-spectrum-ListView {\n /* When we can use subgrid, get rid of this. */\n &.react-spectrum-ListView--hasAnyChildren {\n .react-spectrum-ListViewItem-parentIndicator {\n display: inline-block;\n visibility: hidden;\n }\n .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n visibility: visible;\n }\n }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n padding-inline-start: 0;\n\n .react-spectrum-ListViewItem-checkbox {\n input {\n inset-inline-start: 0;\n }\n }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow:\n inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n border-color: var(--spectrum-listview-border-color-key-focus);\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n forced-color-adjust: none;\n\n /* Add border to quiet ListView only when it is a drop target */\n &.react-spectrum-ListView--quiet {\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n &.react-spectrum-ListView-centeredWrapper--loadingMore {\n padding-top: var(--spectrum-global-dimension-size-50);\n }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n position: absolute;\n outline: none;\n\n &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n background: var(--spectrum-listview-dropindicator-border-color);\n border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n /* forced-color-adjust: none, so that background color\n will render border for insertion indicator. */\n forced-color-adjust: none;\n\n &:before {\n left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:after {\n right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n width: var(--spectrum-listview-dropindicator-circle-size);\n height: var(--spectrum-listview-dropindicator-circle-size);\n border-radius: 50%;\n border: var(--spectrum-listview-dropindicator-border-size) solid;\n box-sizing: border-box;\n border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n background-color: var(--spectrum-listview-background-color);\n z-index: 5;\n\n /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n opacity: 0.01;\n max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n opacity: 0.01;\n max-width: 0px;\n}\n\n.react-spectrum-ListView {\n &:focus-visible {\n border-color: var(--spectrum-listview-border-color-key-focus);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n }\n}\n\n@media (forced-colors: active) {\n .react-spectrum-ListView,\n .react-spectrum-ListViewItem {\n --spectrum-listview-background-color: Canvas;\n --spectrum-listview-item-background-color: Canvas;\n --spectrum-listview-item-background-color-selected: Canvas;\n --spectrum-listview-border-color-key-focus: Highlight;\n --spectrum-listview-item-border-color: CanvasText;\n --spectrum-listview-item-border-color-selected: Highlight;\n --spectrum-listview-item-border-color-key-focus: Highlight;\n --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n --spectrum-listview-dropindicator-border-color: Highlight;\n --spectrum-listview-dropindicator-circle-border-color: Highlight;\n --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n --spectrum-listview-item-badge-text-color: HighlightText;\n --spectrum-listview-item-badge-background-color: Highlight;\n --spectrum-listview-item-title-text-color: CanvasText;\n --spectrum-listview-item-description-text-color: CanvasText;\n }\n\n .react-spectrum-ListView-row {\n &:focus-visible {\n .react-spectrum-ListViewItem {\n /* Adds a full outline style to the focused listview item to better distinguish between\n the selected, not selected, selected + focused and selected + not focused\n states without using a background color on the row in forced-colors: active mode. */\n &:after {\n outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n top: calc(-1 * var(--spectrum-listview-border-width));\n height: calc(100% + var(--spectrum-listview-border-width));\n }\n }\n }\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n box-sizing: content-box;\n\n .react-spectrum-ListViewItem-draghandle-button {\n /* Use CanvasText, so that focus ring color on drag handle button matches\n focus ring color for other interactive elements within the listview item. */\n --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n }\n }\n\n}\n"],"names":[],"version":3,"file":"main.css.map"}
1
+ {"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;AAeA;;;;AAEE;;;;AAKA;;;;AAKA;;;;;AAaE;;;;AAYA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUR;;;;;AAQJ;;;;AAII;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAgBJ;;;;;;AAQQ;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASR;;;;AAIA;;;;;;;;;;;;;AAaE;;;;AASA;;;;AAIA;;;;AAQE;;;;AAMA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAUF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAKA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAME;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUA;;;;;AAIA;;;;AAMJ;;;;;;AAMA;;;;;;AAMA;;;;AAII;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMJ;;;;;;AAYA;;;;;;;AASE;;;;AAKF;;;;;;;;AAME;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;AAoBJ;;;;;AAKA;;;;;AAUA;;;;;AAME;;;;;AAMF;EACE;;;;;;;;;;;;;;;;;;;EA0BM;;;;;;;EAUN;;;;EAGE","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n box-sizing: border-box;\n border-color: var(--spectrum-listview-border-color);\n border-style: solid;\n position: relative;\n border-width: var(--spectrum-listview-border-width);\n border-radius: var(--spectrum-listview-border-radius);\n overflow: auto;\n vertical-align: var(--spectrum-table-cell-vertical-alignment);\n border-collapse: separate;\n border-spacing: 0;\n transform: translate3d(0, 0, 0);\n padding: 0;\n background-color: var(--spectrum-listview-background-color);\n outline: 0;\n user-select: none;\n\n .react-spectrum-ListView-row {\n outline: none;\n }\n\n &.react-spectrum-ListView--emphasized {\n &.react-spectrum-ListView--dropTarget {\n .react-spectrum-ListViewItem:not(.is-selected) {\n /* shift bottom border inwards so it doesn't overlap the root drop target */\n &:after {\n inset-inline-start: 1px;\n inset-inline-end: 1px;\n }\n }\n }\n .react-spectrum-ListViewItem {\n /* common pseudoelement for box shadows */\n &:after {\n content: '';\n display: block;\n position: absolute;\n inset-inline-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inset-block-start: 0;\n z-index: 3;\n pointer-events: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-selected);\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-selected-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n\n /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n &:after {\n inset-block-start: -1px;\n box-shadow:\n inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n }\n }\n\n /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n &.react-spectrum-ListViewItem--firstRow {\n &.is-selected {\n &:after {\n inset-block-start: 0px;\n }\n }\n }\n }\n\n &:not(.react-spectrum-ListView--quiet) {\n .react-spectrum-ListViewItem {\n /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n &:after {\n box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n }\n }\n\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem {\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-end-radius: 0;\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-end-radius: 0;\n }\n }\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n }\n }\n }\n &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n & .react-spectrum-ListViewItem-content,\n & .react-spectrum-ListViewItem-description {\n white-space: normal;\n height: auto;\n }\n }\n}\n\n.react-spectrum-ListView-row {\n cursor: default;\n /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n &:focus-visible {\n &:before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n z-index: 4;\n background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n background-color: var(--spectrum-listview-quiet-background-color);\n border-width: 0;\n border-radius: 0;\n\n .react-spectrum-ListView-row {\n &.round-tops {\n &:focus-visible {\n &:before {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.round-bottoms {\n &:focus-visible {\n &:before {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n }\n}\n\n.react-spectrum-ListView-row[data-href] {\n cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\n box-sizing: border-box;\n font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n line-height: var(--spectrum-listview-item-line-height);\n padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n position: relative;\n /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n color: var(--spectrum-listview-item-text-color);\n outline: 0;\n min-height: var(--spectrum-global-dimension-size-500);\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-down);\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-hover);\n\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n }\n\n &.is-disabled {\n &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n color: var(--spectrum-listview-item-text-color-disabled);\n }\n }\n\n &.has-checkbox {\n /* have to eliminate vertical padding to allow proper vertical alignment */\n padding-top: 0px;\n padding-bottom: 0px;\n }\n\n .react-spectrum-ListViewItem-grid {\n display: grid;\n grid-template-columns: auto auto auto 1fr auto auto auto;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n align-items: center;\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n grid-area: draghandle;\n width: var(--spectrum-global-dimension-size-250);\n display: flex;\n align-self: stretch;\n justify-self: stretch;\n justify-content: center;\n padding: var(--spectrum-global-dimension-size-25);\n padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n .react-spectrum-ListViewItem-draghandle-button {\n width: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--spectrum-alias-border-radius-regular);\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n outline: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n }\n\n .react-spectrum-ListViewItem-checkboxWrapper {\n grid-area: checkbox;\n align-items: center;\n justify-items: center;\n transition-duration: 160ms;\n display: flex;\n }\n\n .react-spectrum-ListViewItem-checkbox {\n min-height: 0;\n height: 100%;\n\n > span {\n margin: 0;\n }\n }\n\n .react-spectrum-ListViewItem-thumbnail {\n box-sizing: content-box;\n grid-area: thumbnail;\n justify-items: center;\n padding-inline-end: var(--spectrum-global-dimension-size-100);\n display: flex;\n border-radius: var(--spectrum-global-dimension-size-25);\n width: var(--spectrum-global-dimension-size-400);\n height: var(--spectrum-global-dimension-size-400);\n align-items: center;\n justify-content: center;\n\n > img {\n width: unset;\n height: 100%;\n }\n }\n\n .react-spectrum-ListViewItem-content,\n .react-spectrum-ListViewItem-description {\n flex-grow: 1;\n\n /* truncate text with ellipsis */\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: var(--spectrum-listview-item-line-height);\n }\n\n .react-spectrum-ListViewItem-content {\n grid-area: content;\n color: var(--spectrum-listview-item-title-text-color);\n font-size: var(--spectrum-listview-item-title-text-size);\n }\n\n &:not(.react-spectrum-ListView--hasDescription) {\n .react-spectrum-ListViewItem-content {\n grid-area: content / description;\n }\n }\n\n .react-spectrum-ListViewItem-description {\n grid-area: description;\n color: var(--spectrum-listview-item-description-text-color);\n font-size: var(--spectrum-listview-item-description-text-size);\n }\n\n .react-spectrum-ListViewItem-actions {\n grid-area: actions;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n .react-spectrum-ListViewItem-actionmenu {\n grid-area: actionmenu;\n }\n\n .react-spectrum-ListViewItem-parentIndicator {\n grid-area: chevron;\n padding-inline-start: var(--spectrum-global-dimension-size-75);\n display: none;\n transition: color var(--spectrum-global-animation-duration-100);\n\n &.is-disabled {\n color: var(--spectrum-alias-icon-color-disabled);\n }\n }\n\n &.react-spectrum-ListViewItem-dragPreview {\n width: var(--spectrum-global-dimension-size-2400);\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that background-color style will render */\n forced-color-adjust: none;\n\n &.react-spectrum-ListViewItem-dragPreview--compact {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--spacious {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n }\n\n .react-spectrum-ListViewItem-grid {\n grid-template-areas:\n \"thumbnail content . badge\"\n \"thumbnail description . badge\";\n grid-template-columns: auto auto 1fr auto;\n }\n\n .react-spectrum-ListViewItem-badge {\n grid-area: badge;\n color: var(--spectrum-listview-item-badge-text-color);\n background: var(--spectrum-listview-item-badge-background-color);\n padding: 0 8px;\n border-radius: var(--spectrum-alias-border-radius-regular);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--multiple {\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n z-index: -1;\n top: 4px;\n inset-inline-start: 4px;\n width: 100%;\n height: 100%;\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n\n .react-spectrum-ListViewItem-actions,\n .react-spectrum-ListViewItem-actionmenu {\n display: none;\n }\n }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n /* give first and last items border-radius to match listview container */\n\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n\n &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n border-start-end-radius: 0;\n }\n\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-end-radius: 0;\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n}\n\n.react-spectrum-ListView {\n /* When we can use subgrid, get rid of this. */\n &.react-spectrum-ListView--hasAnyChildren {\n .react-spectrum-ListViewItem-parentIndicator {\n display: inline-block;\n visibility: hidden;\n }\n .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n visibility: visible;\n }\n }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n padding-inline-start: 0;\n\n .react-spectrum-ListViewItem-checkbox {\n input {\n inset-inline-start: 0;\n }\n }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow:\n inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n border-color: var(--spectrum-listview-border-color-key-focus);\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n forced-color-adjust: none;\n\n /* Add border to quiet ListView only when it is a drop target */\n &.react-spectrum-ListView--quiet {\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n &.react-spectrum-ListView-centeredWrapper--loadingMore {\n padding-top: var(--spectrum-global-dimension-size-50);\n }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n position: absolute;\n outline: none;\n\n &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n background: var(--spectrum-listview-dropindicator-border-color);\n border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n /* forced-color-adjust: none, so that background color\n will render border for insertion indicator. */\n forced-color-adjust: none;\n\n &:before {\n left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:after {\n right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n width: var(--spectrum-listview-dropindicator-circle-size);\n height: var(--spectrum-listview-dropindicator-circle-size);\n border-radius: 50%;\n border: var(--spectrum-listview-dropindicator-border-size) solid;\n box-sizing: border-box;\n border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n background-color: var(--spectrum-listview-background-color);\n z-index: 5;\n\n /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n opacity: 0.01;\n max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n opacity: 0.01;\n max-width: 0px;\n}\n\n.react-spectrum-ListView {\n &:focus-visible {\n border-color: var(--spectrum-listview-border-color-key-focus);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n }\n}\n\n@media (forced-colors: active) {\n .react-spectrum-ListView,\n .react-spectrum-ListViewItem {\n --spectrum-listview-background-color: Canvas;\n --spectrum-listview-item-background-color: Canvas;\n --spectrum-listview-item-background-color-selected: Canvas;\n --spectrum-listview-border-color-key-focus: Highlight;\n --spectrum-listview-item-border-color: CanvasText;\n --spectrum-listview-item-border-color-selected: Highlight;\n --spectrum-listview-item-border-color-key-focus: Highlight;\n --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n --spectrum-listview-dropindicator-border-color: Highlight;\n --spectrum-listview-dropindicator-circle-border-color: Highlight;\n --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n --spectrum-listview-item-badge-text-color: HighlightText;\n --spectrum-listview-item-badge-background-color: Highlight;\n --spectrum-listview-item-title-text-color: CanvasText;\n --spectrum-listview-item-description-text-color: CanvasText;\n }\n\n .react-spectrum-ListView-row {\n &:focus-visible {\n .react-spectrum-ListViewItem {\n /* Adds a full outline style to the focused listview item to better distinguish between\n the selected, not selected, selected + focused and selected + not focused\n states without using a background color on the row in forced-colors: active mode. */\n &:after {\n outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n top: calc(-1 * var(--spectrum-listview-border-width));\n height: calc(100% + var(--spectrum-listview-border-width));\n }\n }\n }\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n box-sizing: content-box;\n\n .react-spectrum-ListViewItem-draghandle-button {\n /* Use CanvasText, so that focus ring color on drag handle button matches\n focus ring color for other interactive elements within the listview item. */\n --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n }\n }\n\n}\n"],"names":[],"version":3,"file":"main.css.map"}
package/dist/main.js CHANGED
@@ -1,4 +1,3 @@
1
- require("./main.css");
2
1
  var $1beeff0a5a0ccb2a$exports = require("./ar-AE.main.js");
3
2
  var $8d53c5c3a365f51f$exports = require("./bg-BG.main.js");
4
3
  var $99a0008efa578202$exports = require("./cs-CZ.main.js");
@@ -33,6 +32,7 @@ var $afc69bf18d2f3b1a$exports = require("./tr-TR.main.js");
33
32
  var $eda3e7326f5e4dcb$exports = require("./uk-UA.main.js");
34
33
  var $6d455ae2db499a05$exports = require("./zh-CN.main.js");
35
34
  var $0fa2d17f8a898b48$exports = require("./zh-TW.main.js");
35
+ require("./main.css");
36
36
  var $k9Du2$reactstatelycollections = require("@react-stately/collections");
37
37
  var $k9Du2$reactariagridlist = require("@react-aria/gridlist");
38
38
  var $k9Du2$reactspectrumutils = require("@react-spectrum/utils");