@spectrum-web-components/picker 0.37.0 → 0.39.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.
- package/custom-elements.json +8 -4
- package/package.json +14 -14
- package/src/Picker.d.ts +3 -2
- package/src/Picker.dev.js +12 -14
- package/src/Picker.dev.js.map +2 -2
- package/src/Picker.js +7 -5
- package/src/Picker.js.map +2 -2
- package/src/picker.css.dev.js +88 -25
- package/src/picker.css.dev.js.map +2 -2
- package/src/picker.css.js +88 -25
- package/src/picker.css.js.map +2 -2
- package/src/spectrum-config.js +2 -1
- package/src/spectrum-picker.css.dev.js +85 -24
- package/src/spectrum-picker.css.dev.js.map +2 -2
- package/src/spectrum-picker.css.js +85 -24
- package/src/spectrum-picker.css.js.map +2 -2
- package/stories/picker.stories.js +40 -0
- package/stories/picker.stories.js.map +2 -2
- package/test/index.js +87 -15
- package/test/index.js.map +2 -2
package/src/picker.css.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
|
|
2
|
-
#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;
|
|
2
|
+
#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(
|
|
3
3
|
--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)
|
|
4
4
|
);justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(
|
|
5
5
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
@@ -9,22 +9,34 @@
|
|
|
9
9
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
10
10
|
) ease-out,box-shadow var(
|
|
11
11
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
12
|
-
) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}
|
|
12
|
+
) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(
|
|
13
13
|
--spectrum-default-font-style
|
|
14
|
-
);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-
|
|
14
|
+
);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(
|
|
15
|
+
--spectrum-component-top-to-text-100
|
|
16
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
17
|
+
--spectrum-component-bottom-to-text-100
|
|
18
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
15
19
|
--spectrum-component-edge-to-text-100
|
|
16
20
|
);--spectrum-picker-spacing-edge-to-text-quiet:var(
|
|
17
21
|
--spectrum-field-edge-to-text-quiet
|
|
22
|
+
);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
23
|
+
--spectrum-field-label-top-margin-medium
|
|
24
|
+
);--spectrum-picker-spacing-label-to-picker:var(
|
|
25
|
+
--spectrum-field-label-to-component
|
|
18
26
|
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
19
27
|
--spectrum-field-text-to-alert-icon-medium
|
|
20
28
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
21
29
|
--spectrum-picker-visual-to-disclosure-icon-medium
|
|
22
30
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
23
31
|
--spectrum-field-label-to-component-quiet-medium
|
|
32
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
33
|
+
--spectrum-field-top-to-alert-icon-medium
|
|
34
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
35
|
+
--spectrum-field-top-to-progress-circle-medium
|
|
24
36
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
25
37
|
--spectrum-field-top-to-disclosure-icon-100
|
|
26
38
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
27
|
-
--spectrum-field-
|
|
39
|
+
--spectrum-field-end-edge-to-disclosure-icon-100
|
|
28
40
|
);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(
|
|
29
41
|
--spectrum-picker-end-edge-to-disclousure-icon-quiet
|
|
30
42
|
);--spectrum-picker-animation-duration:var(
|
|
@@ -75,42 +87,68 @@
|
|
|
75
87
|
--spectrum-focus-indicator-thickness
|
|
76
88
|
);--spectrum-picker-focus-indicator-color:var(
|
|
77
89
|
--spectrum-focus-indicator-color
|
|
78
|
-
)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-
|
|
90
|
+
)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
91
|
+
--spectrum-field-label-top-margin-small
|
|
92
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
93
|
+
--spectrum-component-top-to-text-75
|
|
94
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
95
|
+
--spectrum-component-bottom-to-text-75
|
|
96
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
97
|
+
--spectrum-component-edge-to-text-75
|
|
98
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
79
99
|
--spectrum-field-text-to-alert-icon-small
|
|
80
100
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
81
101
|
--spectrum-picker-visual-to-disclosure-icon-small
|
|
82
102
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
83
103
|
--spectrum-field-label-to-component-quiet-small
|
|
104
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
105
|
+
--spectrum-field-top-to-alert-icon-small
|
|
106
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
107
|
+
--spectrum-field-top-to-progress-circle-small
|
|
84
108
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
85
109
|
--spectrum-field-top-to-disclosure-icon-75
|
|
86
110
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
87
111
|
--spectrum-field-end-edge-to-disclosure-icon-75
|
|
88
|
-
)}:host([size=
|
|
89
|
-
--spectrum-field-
|
|
90
|
-
);--spectrum-picker-spacing-
|
|
91
|
-
--spectrum-
|
|
92
|
-
);--spectrum-picker-spacing-
|
|
93
|
-
--spectrum-
|
|
94
|
-
);--spectrum-picker-spacing-
|
|
95
|
-
--spectrum-
|
|
96
|
-
);--spectrum-picker-spacing-
|
|
97
|
-
--spectrum-field-end-edge-to-disclosure-icon-100
|
|
98
|
-
)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
112
|
+
)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
113
|
+
--spectrum-field-label-top-margin-large
|
|
114
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
115
|
+
--spectrum-component-top-to-text-200
|
|
116
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
117
|
+
--spectrum-component-bottom-to-text-200
|
|
118
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
119
|
+
--spectrum-component-edge-to-text-200
|
|
120
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
99
121
|
--spectrum-field-text-to-alert-icon-large
|
|
100
122
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
101
123
|
--spectrum-picker-visual-to-disclosure-icon-large
|
|
102
124
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
103
125
|
--spectrum-field-label-to-component-quiet-large
|
|
126
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
127
|
+
--spectrum-field-top-to-alert-icon-large
|
|
128
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
129
|
+
--spectrum-field-top-to-progress-circle-large
|
|
104
130
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
105
131
|
--spectrum-field-top-to-disclosure-icon-200
|
|
106
132
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
107
133
|
--spectrum-field-end-edge-to-disclosure-icon-200
|
|
108
|
-
)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-
|
|
134
|
+
)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
135
|
+
--spectrum-field-label-top-margin-extra-large
|
|
136
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
137
|
+
--spectrum-component-top-to-text-300
|
|
138
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
139
|
+
--spectrum-component-bottom-to-text-300
|
|
140
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
141
|
+
--spectrum-component-edge-to-text-300
|
|
142
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
109
143
|
--spectrum-field-text-to-alert-icon-extra-large
|
|
110
144
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
111
145
|
--spectrum-picker-visual-to-disclosure-icon-extra-large
|
|
112
146
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
113
147
|
--spectrum-field-label-to-component-quiet-extra-large
|
|
148
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
149
|
+
--spectrum-field-top-to-alert-icon-extra-large
|
|
150
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
151
|
+
--spectrum-field-top-to-progress-circle-extra-large
|
|
114
152
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
115
153
|
--spectrum-field-top-to-disclosure-icon-300
|
|
116
154
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
@@ -129,11 +167,15 @@
|
|
|
129
167
|
--mod-picker-border-radius,var(--spectrum-picker-border-radius)
|
|
130
168
|
);border-style:solid;border-width:var(
|
|
131
169
|
--mod-picker-border-width,var(--spectrum-picker-border-width)
|
|
132
|
-
);color:var(
|
|
170
|
+
);box-sizing:border-box;color:var(
|
|
133
171
|
--highcontrast-picker-font-color-default,var(
|
|
134
172
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
135
173
|
)
|
|
136
|
-
);display:flex;
|
|
174
|
+
);display:flex;inline-size:var(
|
|
175
|
+
--mod-picker-inline-size,var(--spectrum-picker-inline-size)
|
|
176
|
+
);margin-block-start:var(
|
|
177
|
+
--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)
|
|
178
|
+
);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(
|
|
137
179
|
--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)
|
|
138
180
|
);padding-inline-start:var(
|
|
139
181
|
--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)
|
|
@@ -370,8 +412,15 @@ var(--spectrum-picker-border-width)
|
|
|
370
412
|
)
|
|
371
413
|
)}.icon{flex-shrink:0;margin-inline-end:var(
|
|
372
414
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
373
|
-
)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));
|
|
415
|
+
)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(
|
|
416
|
+
--mod-picker-font-weight,var(--spectrum-picker-font-weight)
|
|
417
|
+
);line-height:var(
|
|
374
418
|
--mod-picker-line-height,var(--spectrum-picker-line-height)
|
|
419
|
+
);margin-block-end:calc(var(
|
|
420
|
+
--mod-picker-spacing-bottom-to-text,
|
|
421
|
+
var(--spectrum-picker-spacing-bottom-to-text)
|
|
422
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(
|
|
423
|
+
--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)
|
|
375
424
|
);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{color:var(
|
|
376
425
|
--highcontrast-picker-font-color-default,var(
|
|
377
426
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
@@ -379,7 +428,7 @@ var(--spectrum-picker-border-width)
|
|
|
379
428
|
);font-style:var(
|
|
380
429
|
--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)
|
|
381
430
|
);font-weight:var(
|
|
382
|
-
--mod-picker-font-weight,var(--spectrum-picker-font-weight)
|
|
431
|
+
--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)
|
|
383
432
|
);transition:color var(
|
|
384
433
|
--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
|
|
385
434
|
) ease-in-out}#label.placeholder:hover{color:var(
|
|
@@ -406,7 +455,19 @@ var(--spectrum-picker-border-width)
|
|
|
406
455
|
)
|
|
407
456
|
)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(
|
|
408
457
|
--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)
|
|
409
|
-
)}
|
|
458
|
+
)}.validation-icon{margin-block-end:calc(var(
|
|
459
|
+
--mod-picker-spacing-top-to-alert-icon,
|
|
460
|
+
var(--spectrum-picker-spacing-top-to-alert-icon)
|
|
461
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
|
|
462
|
+
--mod-picker-spacing-top-to-alert-icon,
|
|
463
|
+
var(--spectrum-picker-spacing-top-to-alert-icon)
|
|
464
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(
|
|
465
|
+
--mod-picker-spacing-top-to-progress-circle,
|
|
466
|
+
var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
467
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
|
|
468
|
+
--mod-picker-spacing-top-to-progress-circle,
|
|
469
|
+
var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
470
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#label~.picker{margin-inline-start:var(
|
|
410
471
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
411
472
|
)}:host([quiet]) #button{background-color:#0000;border:none;border-radius:0;color:var(
|
|
412
473
|
--highcontrast-picker-font-color-default,var(
|
|
@@ -417,7 +478,7 @@ var(--spectrum-picker-border-width)
|
|
|
417
478
|
var(--spectrum-picker-spacing-label-to-picker-quiet)
|
|
418
479
|
) + 1px);padding-inline:var(
|
|
419
480
|
--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)
|
|
420
|
-
)}:host([quiet]) #button .picker{margin-inline-end:var(
|
|
481
|
+
)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(
|
|
421
482
|
--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)
|
|
422
483
|
)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}:host([quiet]) #button:hover{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(
|
|
423
484
|
--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
|
|
@@ -455,7 +516,7 @@ var(--spectrum-picker-focus-indicator-gap)
|
|
|
455
516
|
) + var(
|
|
456
517
|
--mod-picker-border-width,
|
|
457
518
|
var(--spectrum-picker-border-width)
|
|
458
|
-
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}:host{--spectrum-picker-background-color-default:var(
|
|
519
|
+
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(
|
|
459
520
|
--system-spectrum-picker-background-color-default
|
|
460
521
|
);--spectrum-picker-background-color-default-open:var(
|
|
461
522
|
--system-spectrum-picker-background-color-default-open
|
|
@@ -479,7 +540,9 @@ var(--spectrum-picker-border-width)
|
|
|
479
540
|
--system-spectrum-picker-border-color-active
|
|
480
541
|
);--spectrum-picker-border-color-key-focus:var(
|
|
481
542
|
--system-spectrum-picker-border-color-key-focus
|
|
482
|
-
)}:host{display:inline-flex;
|
|
543
|
+
)}:host{display:inline-flex;inline-size:var(
|
|
544
|
+
--spectrum-picker-width,var(--spectrum-global-dimension-size-2400)
|
|
545
|
+
);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));vertical-align:top}:host([quiet]){min-width:0;width:auto}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
483
546
|
--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
|
|
484
547
|
)}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet])) #button .picker{color:var(
|
|
485
548
|
--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)
|
package/src/picker.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)\n);justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,border-color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}.spectrum--medium{--spectrum-picker-popover-quiet-offset-x:12px}.spectrum--large{--spectrum-picker-popover-quiet-offset-x:14px}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(\n--spectrum-default-font-style\n);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-picker-spacing-edge-to-text-quiet:var(\n--spectrum-field-edge-to-text-quiet\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-medium\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-medium\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-medium\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(\n--spectrum-picker-end-edge-to-disclousure-icon-quiet\n);--spectrum-picker-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-picker-font-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-font-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-font-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-font-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-icon-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-icon-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-icon-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-border-color-error-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-picker-border-color-error-default-open:var(\n--spectrum-negative-border-color-focus\n);--spectrum-picker-border-color-error-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-picker-border-color-error-hover-open:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-picker-border-color-error-active:var(\n--spectrum-negative-border-color-down\n);--spectrum-picker-border-color-error-key-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-picker-font-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-picker-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-small\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-small\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-small\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-75\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-75\n)}:host([size=m]){--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-medium\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-medium\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-medium\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-100\n)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-200\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-200\n)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-extra-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-extra-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-extra-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-300\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-300\n)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:CanvasText;--highcontrast-picker-border-color-default:ButtonText;--highcontrast-picker-border-color-active:ButtonText;--highcontrast-picker-border-color-key-focus:Highlight;--highcontrast-picker-border-color-error-default-open:ButtonText;--highcontrast-picker-border-color-error-hover:ButtonText;--highcontrast-picker-border-color-error-active:ButtonText;--highcontrast-picker-font-color-default:ButtonText;--highcontrast-picker-font-color-default-open:ButtonText;--highcontrast-picker-font-color-key-focus:ButtonText;--highcontrast-picker-font-color-disabled:GrayText;--highcontrast-picker-background-color-default:Background;--highcontrast-picker-background-color-disabled:Background;--highcontrast-picker-icon-color-default:ButtonText;--highcontrast-picker-icon-color-default-open:ButtonText;--highcontrast-picker-icon-color-hover:ButtonText;--highcontrast-picker-icon-color-hover-open:ButtonText;--highcontrast-picker-icon-color-key-focus:Highlight;--highcontrast-picker-icon-color-error-default:ButtonText}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}}#button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)\n)\n);block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)\n)\n);border-radius:var(\n--mod-picker-border-radius,var(--spectrum-picker-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);display:flex;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)\n);padding-inline-start:var(\n--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)\n);transition:background-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),box-shadow var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),border-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#button:after{block-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);border-color:#0000;border-radius:calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));border-style:solid;border-width:var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n);content:\"\";inline-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);inset-block:0;inset-inline:0;margin-block-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);margin-inline-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);pointer-events:none;position:absolute}#button:hover{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover,var(\n--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)\n)\n)}#button:active{background-color:var(\n--highcontrast-picker-background-active,var(\n--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)\n)\n);border-color:var(\n--highcontrast-picker-border-color-active,var(\n--mod-picker-border-active,var(--spectrum-picker-border-color-active)\n)\n)}#button:active:after{border-color:#0000}#button:active.placeholder #label{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button:focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button:focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button.focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button:focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}:host([open]) #button{background-color:var(\n--highcontrast-picker-background-default-open,var(\n--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default-open,var(\n--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default-open,var(\n--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)\n)\n)}:host([open]) #button:hover{background-color:var(\n--highcontrast-picker-background-color-hover-open,var(\n--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-hover-open,var(\n--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)\n)\n)}:host([open]) #button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover-open,var(\n--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)\n)\n)}:host([open]) #button .picker{color:var(\n--highcontrast-picker-icon-color-default-open,var(\n--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)\n)\n)}:host([invalid]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)\n)\n)}:host([invalid]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-error-default,var(\n--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)\n)\n)}:host([invalid]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover,var(\n--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)\n)\n)}:host([invalid]) #button:active{border-color:var(\n--highcontrast-picker-border-color-error-active,var(\n--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)\n)\n)}:host([invalid][open]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default-open,var(\n--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)\n)\n)}:host([invalid][open]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover-open,var(\n--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)\n)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}#button.is-loading .picker{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--highcontrast-picker-background-color-disabled,var(\n--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)\n)\n);border-color:#0000;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n);cursor:default}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n)}.icon{flex-shrink:0;margin-inline-end:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:calc(var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);line-height:var(\n--mod-picker-line-height,var(--spectrum-picker-line-height)\n);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);font-style:var(\n--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)\n);font-weight:var(\n--mod-picker-font-weight,var(--spectrum-picker-font-weight)\n);transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#label.placeholder:hover{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#label.placeholder:active{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}.picker{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)\n)\n);display:inline-block;flex-shrink:0;margin-block:var(\n--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon)\n);margin-inline-start:var(\n--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon)\n);position:relative;transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-out;vertical-align:top}.picker:active{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)\n)\n)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(\n--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)\n)}#label~.picker{margin-inline-start:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{background-color:#0000;border:none;border-radius:0;color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);margin-block-start:calc(var(\n--mod-picker-spacing-label-to-picker-quiet,\nvar(--spectrum-picker-spacing-label-to-picker-quiet)\n) + 1px);padding-inline:var(\n--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)\n)}:host([quiet]) #button .picker{margin-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)\n)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}:host([quiet]) #button:hover{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}:host{--spectrum-picker-background-color-default:var(\n--system-spectrum-picker-background-color-default\n);--spectrum-picker-background-color-default-open:var(\n--system-spectrum-picker-background-color-default-open\n);--spectrum-picker-background-color-active:var(\n--system-spectrum-picker-background-color-active\n);--spectrum-picker-background-color-hover:var(\n--system-spectrum-picker-background-color-hover\n);--spectrum-picker-background-color-hover-open:var(\n--system-spectrum-picker-background-color-hover-open\n);--spectrum-picker-background-color-key-focus:var(\n--system-spectrum-picker-background-color-key-focus\n);--spectrum-picker-border-color-default:var(\n--system-spectrum-picker-border-color-default\n);--spectrum-picker-border-color-default-open:var(\n--system-spectrum-picker-border-color-default-open\n);--spectrum-picker-border-color-hover:var(\n--system-spectrum-picker-border-color-hover\n);--spectrum-picker-border-color-hover-open:var(\n--system-spectrum-picker-border-color-hover-open\n);--spectrum-picker-border-color-active:var(\n--system-spectrum-picker-border-color-active\n);--spectrum-picker-border-color-key-focus:var(\n--system-spectrum-picker-border-color-key-focus\n)}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(\n--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)\n);justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,border-color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(\n--spectrum-default-font-style\n);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-picker-spacing-edge-to-text-quiet:var(\n--spectrum-field-edge-to-text-quiet\n);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-medium\n);--spectrum-picker-spacing-label-to-picker:var(\n--spectrum-field-label-to-component\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-medium\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-medium\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-medium\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-medium\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-medium\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(\n--spectrum-picker-end-edge-to-disclousure-icon-quiet\n);--spectrum-picker-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-picker-font-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-font-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-font-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-font-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-icon-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-icon-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-icon-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-border-color-error-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-picker-border-color-error-default-open:var(\n--spectrum-negative-border-color-focus\n);--spectrum-picker-border-color-error-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-picker-border-color-error-hover-open:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-picker-border-color-error-active:var(\n--spectrum-negative-border-color-down\n);--spectrum-picker-border-color-error-key-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-picker-font-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-picker-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-small\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-small\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-small\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-small\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-small\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-small\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-75\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-75\n)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-200\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-200\n)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-extra-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-300\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-extra-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-extra-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-extra-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-extra-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-extra-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-300\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-300\n)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:CanvasText;--highcontrast-picker-border-color-default:ButtonText;--highcontrast-picker-border-color-active:ButtonText;--highcontrast-picker-border-color-key-focus:Highlight;--highcontrast-picker-border-color-error-default-open:ButtonText;--highcontrast-picker-border-color-error-hover:ButtonText;--highcontrast-picker-border-color-error-active:ButtonText;--highcontrast-picker-font-color-default:ButtonText;--highcontrast-picker-font-color-default-open:ButtonText;--highcontrast-picker-font-color-key-focus:ButtonText;--highcontrast-picker-font-color-disabled:GrayText;--highcontrast-picker-background-color-default:Background;--highcontrast-picker-background-color-disabled:Background;--highcontrast-picker-icon-color-default:ButtonText;--highcontrast-picker-icon-color-default-open:ButtonText;--highcontrast-picker-icon-color-hover:ButtonText;--highcontrast-picker-icon-color-hover-open:ButtonText;--highcontrast-picker-icon-color-key-focus:Highlight;--highcontrast-picker-icon-color-error-default:ButtonText}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}}#button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)\n)\n);block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)\n)\n);border-radius:var(\n--mod-picker-border-radius,var(--spectrum-picker-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);box-sizing:border-box;color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);display:flex;inline-size:var(\n--mod-picker-inline-size,var(--spectrum-picker-inline-size)\n);margin-block-start:var(\n--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)\n);padding-inline-start:var(\n--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)\n);transition:background-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),box-shadow var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),border-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#button:after{block-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);border-color:#0000;border-radius:calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));border-style:solid;border-width:var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n);content:\"\";inline-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);inset-block:0;inset-inline:0;margin-block-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);margin-inline-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);pointer-events:none;position:absolute}#button:hover{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover,var(\n--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)\n)\n)}#button:active{background-color:var(\n--highcontrast-picker-background-active,var(\n--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)\n)\n);border-color:var(\n--highcontrast-picker-border-color-active,var(\n--mod-picker-border-active,var(--spectrum-picker-border-color-active)\n)\n)}#button:active:after{border-color:#0000}#button:active.placeholder #label{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button:focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button:focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button.focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button:focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}:host([open]) #button{background-color:var(\n--highcontrast-picker-background-default-open,var(\n--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default-open,var(\n--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default-open,var(\n--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)\n)\n)}:host([open]) #button:hover{background-color:var(\n--highcontrast-picker-background-color-hover-open,var(\n--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-hover-open,var(\n--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)\n)\n)}:host([open]) #button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover-open,var(\n--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)\n)\n)}:host([open]) #button .picker{color:var(\n--highcontrast-picker-icon-color-default-open,var(\n--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)\n)\n)}:host([invalid]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)\n)\n)}:host([invalid]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-error-default,var(\n--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)\n)\n)}:host([invalid]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover,var(\n--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)\n)\n)}:host([invalid]) #button:active{border-color:var(\n--highcontrast-picker-border-color-error-active,var(\n--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)\n)\n)}:host([invalid][open]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default-open,var(\n--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)\n)\n)}:host([invalid][open]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover-open,var(\n--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)\n)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}#button.is-loading .picker{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--highcontrast-picker-background-color-disabled,var(\n--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)\n)\n);border-color:#0000;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n);cursor:default}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n)}.icon{flex-shrink:0;margin-inline-end:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(\n--mod-picker-font-weight,var(--spectrum-picker-font-weight)\n);line-height:var(\n--mod-picker-line-height,var(--spectrum-picker-line-height)\n);margin-block-end:calc(var(\n--mod-picker-spacing-bottom-to-text,\nvar(--spectrum-picker-spacing-bottom-to-text)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(\n--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)\n);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);font-style:var(\n--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)\n);font-weight:var(\n--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)\n);transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#label.placeholder:hover{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#label.placeholder:active{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}.picker{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)\n)\n);display:inline-block;flex-shrink:0;margin-block:var(\n--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon)\n);margin-inline-start:var(\n--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon)\n);position:relative;transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-out;vertical-align:top}.picker:active{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)\n)\n)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(\n--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)\n)}.validation-icon{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#label~.picker{margin-inline-start:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{background-color:#0000;border:none;border-radius:0;color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);margin-block-start:calc(var(\n--mod-picker-spacing-label-to-picker-quiet,\nvar(--spectrum-picker-spacing-label-to-picker-quiet)\n) + 1px);padding-inline:var(\n--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)\n)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)\n)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}:host([quiet]) #button:hover{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(\n--system-spectrum-picker-background-color-default\n);--spectrum-picker-background-color-default-open:var(\n--system-spectrum-picker-background-color-default-open\n);--spectrum-picker-background-color-active:var(\n--system-spectrum-picker-background-color-active\n);--spectrum-picker-background-color-hover:var(\n--system-spectrum-picker-background-color-hover\n);--spectrum-picker-background-color-hover-open:var(\n--system-spectrum-picker-background-color-hover-open\n);--spectrum-picker-background-color-key-focus:var(\n--system-spectrum-picker-background-color-key-focus\n);--spectrum-picker-border-color-default:var(\n--system-spectrum-picker-border-color-default\n);--spectrum-picker-border-color-default-open:var(\n--system-spectrum-picker-border-color-default-open\n);--spectrum-picker-border-color-hover:var(\n--system-spectrum-picker-border-color-hover\n);--spectrum-picker-border-color-hover-open:var(\n--system-spectrum-picker-border-color-hover-open\n);--spectrum-picker-border-color-active:var(\n--system-spectrum-picker-border-color-active\n);--spectrum-picker-border-color-key-focus:var(\n--system-spectrum-picker-border-color-key-focus\n)}:host{display:inline-flex;inline-size:var(\n--spectrum-picker-width,var(--spectrum-global-dimension-size-2400)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));vertical-align:top}:host([quiet]){min-width:0;width:auto}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsiBf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -35,10 +35,11 @@ const config = {
|
|
|
35
35
|
converter.classToAttribute('is-invalid', 'invalid'),
|
|
36
36
|
converter.classToAttribute('is-open', 'open'),
|
|
37
37
|
converter.classToAttribute('is-focused', 'focused'),
|
|
38
|
+
// Default to `size='m'` without needing the attribute
|
|
39
|
+
converter.classToHost('spectrum-Picker--sizeM'),
|
|
38
40
|
...converter.enumerateAttributes(
|
|
39
41
|
[
|
|
40
42
|
['spectrum-Picker--sizeS', 's'],
|
|
41
|
-
['spectrum-Picker--sizeM', 'm'],
|
|
42
43
|
['spectrum-Picker--sizeL', 'l'],
|
|
43
44
|
['spectrum-Picker--sizeXL', 'xl'],
|
|
44
45
|
],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;
|
|
4
|
+
#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(
|
|
5
5
|
--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)
|
|
6
6
|
);justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(
|
|
7
7
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
@@ -11,22 +11,34 @@ const styles = css`
|
|
|
11
11
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
12
12
|
) ease-out,box-shadow var(
|
|
13
13
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
14
|
-
) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}
|
|
14
|
+
) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(
|
|
15
15
|
--spectrum-default-font-style
|
|
16
|
-
);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-
|
|
16
|
+
);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(
|
|
17
|
+
--spectrum-component-top-to-text-100
|
|
18
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
19
|
+
--spectrum-component-bottom-to-text-100
|
|
20
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
17
21
|
--spectrum-component-edge-to-text-100
|
|
18
22
|
);--spectrum-picker-spacing-edge-to-text-quiet:var(
|
|
19
23
|
--spectrum-field-edge-to-text-quiet
|
|
24
|
+
);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
25
|
+
--spectrum-field-label-top-margin-medium
|
|
26
|
+
);--spectrum-picker-spacing-label-to-picker:var(
|
|
27
|
+
--spectrum-field-label-to-component
|
|
20
28
|
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
21
29
|
--spectrum-field-text-to-alert-icon-medium
|
|
22
30
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
23
31
|
--spectrum-picker-visual-to-disclosure-icon-medium
|
|
24
32
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
25
33
|
--spectrum-field-label-to-component-quiet-medium
|
|
34
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
35
|
+
--spectrum-field-top-to-alert-icon-medium
|
|
36
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
37
|
+
--spectrum-field-top-to-progress-circle-medium
|
|
26
38
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
27
39
|
--spectrum-field-top-to-disclosure-icon-100
|
|
28
40
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
29
|
-
--spectrum-field-
|
|
41
|
+
--spectrum-field-end-edge-to-disclosure-icon-100
|
|
30
42
|
);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(
|
|
31
43
|
--spectrum-picker-end-edge-to-disclousure-icon-quiet
|
|
32
44
|
);--spectrum-picker-animation-duration:var(
|
|
@@ -77,42 +89,68 @@ const styles = css`
|
|
|
77
89
|
--spectrum-focus-indicator-thickness
|
|
78
90
|
);--spectrum-picker-focus-indicator-color:var(
|
|
79
91
|
--spectrum-focus-indicator-color
|
|
80
|
-
)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-
|
|
92
|
+
)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
93
|
+
--spectrum-field-label-top-margin-small
|
|
94
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
95
|
+
--spectrum-component-top-to-text-75
|
|
96
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
97
|
+
--spectrum-component-bottom-to-text-75
|
|
98
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
99
|
+
--spectrum-component-edge-to-text-75
|
|
100
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
81
101
|
--spectrum-field-text-to-alert-icon-small
|
|
82
102
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
83
103
|
--spectrum-picker-visual-to-disclosure-icon-small
|
|
84
104
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
85
105
|
--spectrum-field-label-to-component-quiet-small
|
|
106
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
107
|
+
--spectrum-field-top-to-alert-icon-small
|
|
108
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
109
|
+
--spectrum-field-top-to-progress-circle-small
|
|
86
110
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
87
111
|
--spectrum-field-top-to-disclosure-icon-75
|
|
88
112
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
89
113
|
--spectrum-field-end-edge-to-disclosure-icon-75
|
|
90
|
-
)}:host([size=
|
|
91
|
-
--spectrum-field-
|
|
92
|
-
);--spectrum-picker-spacing-
|
|
93
|
-
--spectrum-
|
|
94
|
-
);--spectrum-picker-spacing-
|
|
95
|
-
--spectrum-
|
|
96
|
-
);--spectrum-picker-spacing-
|
|
97
|
-
--spectrum-
|
|
98
|
-
);--spectrum-picker-spacing-
|
|
99
|
-
--spectrum-field-end-edge-to-disclosure-icon-100
|
|
100
|
-
)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
114
|
+
)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
115
|
+
--spectrum-field-label-top-margin-large
|
|
116
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
117
|
+
--spectrum-component-top-to-text-200
|
|
118
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
119
|
+
--spectrum-component-bottom-to-text-200
|
|
120
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
121
|
+
--spectrum-component-edge-to-text-200
|
|
122
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
101
123
|
--spectrum-field-text-to-alert-icon-large
|
|
102
124
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
103
125
|
--spectrum-picker-visual-to-disclosure-icon-large
|
|
104
126
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
105
127
|
--spectrum-field-label-to-component-quiet-large
|
|
128
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
129
|
+
--spectrum-field-top-to-alert-icon-large
|
|
130
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
131
|
+
--spectrum-field-top-to-progress-circle-large
|
|
106
132
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
107
133
|
--spectrum-field-top-to-disclosure-icon-200
|
|
108
134
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
109
135
|
--spectrum-field-end-edge-to-disclosure-icon-200
|
|
110
|
-
)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-
|
|
136
|
+
)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
|
|
137
|
+
--spectrum-field-label-top-margin-extra-large
|
|
138
|
+
);--spectrum-picker-spacing-top-to-text:var(
|
|
139
|
+
--spectrum-component-top-to-text-300
|
|
140
|
+
);--spectrum-picker-spacing-bottom-to-text:var(
|
|
141
|
+
--spectrum-component-bottom-to-text-300
|
|
142
|
+
);--spectrum-picker-spacing-edge-to-text:var(
|
|
143
|
+
--spectrum-component-edge-to-text-300
|
|
144
|
+
);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
|
|
111
145
|
--spectrum-field-text-to-alert-icon-extra-large
|
|
112
146
|
);--spectrum-picker-spacing-icon-to-disclosure-icon:var(
|
|
113
147
|
--spectrum-picker-visual-to-disclosure-icon-extra-large
|
|
114
148
|
);--spectrum-picker-spacing-label-to-picker-quiet:var(
|
|
115
149
|
--spectrum-field-label-to-component-quiet-extra-large
|
|
150
|
+
);--spectrum-picker-spacing-top-to-alert-icon:var(
|
|
151
|
+
--spectrum-field-top-to-alert-icon-extra-large
|
|
152
|
+
);--spectrum-picker-spacing-top-to-progress-circle:var(
|
|
153
|
+
--spectrum-field-top-to-progress-circle-extra-large
|
|
116
154
|
);--spectrum-picker-spacing-top-to-disclosure-icon:var(
|
|
117
155
|
--spectrum-field-top-to-disclosure-icon-300
|
|
118
156
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
@@ -131,11 +169,15 @@ const styles = css`
|
|
|
131
169
|
--mod-picker-border-radius,var(--spectrum-picker-border-radius)
|
|
132
170
|
);border-style:solid;border-width:var(
|
|
133
171
|
--mod-picker-border-width,var(--spectrum-picker-border-width)
|
|
134
|
-
);color:var(
|
|
172
|
+
);box-sizing:border-box;color:var(
|
|
135
173
|
--highcontrast-picker-font-color-default,var(
|
|
136
174
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
137
175
|
)
|
|
138
|
-
);display:flex;
|
|
176
|
+
);display:flex;inline-size:var(
|
|
177
|
+
--mod-picker-inline-size,var(--spectrum-picker-inline-size)
|
|
178
|
+
);margin-block-start:var(
|
|
179
|
+
--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)
|
|
180
|
+
);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(
|
|
139
181
|
--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)
|
|
140
182
|
);padding-inline-start:var(
|
|
141
183
|
--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)
|
|
@@ -372,8 +414,15 @@ var(--spectrum-picker-border-width)
|
|
|
372
414
|
)
|
|
373
415
|
)}.icon{flex-shrink:0;margin-inline-end:var(
|
|
374
416
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
375
|
-
)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));
|
|
417
|
+
)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}#label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(
|
|
418
|
+
--mod-picker-font-weight,var(--spectrum-picker-font-weight)
|
|
419
|
+
);line-height:var(
|
|
376
420
|
--mod-picker-line-height,var(--spectrum-picker-line-height)
|
|
421
|
+
);margin-block-end:calc(var(
|
|
422
|
+
--mod-picker-spacing-bottom-to-text,
|
|
423
|
+
var(--spectrum-picker-spacing-bottom-to-text)
|
|
424
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(
|
|
425
|
+
--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)
|
|
377
426
|
);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{color:var(
|
|
378
427
|
--highcontrast-picker-font-color-default,var(
|
|
379
428
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
@@ -381,7 +430,7 @@ var(--spectrum-picker-border-width)
|
|
|
381
430
|
);font-style:var(
|
|
382
431
|
--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)
|
|
383
432
|
);font-weight:var(
|
|
384
|
-
--mod-picker-font-weight,var(--spectrum-picker-font-weight)
|
|
433
|
+
--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)
|
|
385
434
|
);transition:color var(
|
|
386
435
|
--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
|
|
387
436
|
) ease-in-out}#label.placeholder:hover{color:var(
|
|
@@ -408,7 +457,19 @@ var(--spectrum-picker-border-width)
|
|
|
408
457
|
)
|
|
409
458
|
)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(
|
|
410
459
|
--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)
|
|
411
|
-
)}
|
|
460
|
+
)}.validation-icon{margin-block-end:calc(var(
|
|
461
|
+
--mod-picker-spacing-top-to-alert-icon,
|
|
462
|
+
var(--spectrum-picker-spacing-top-to-alert-icon)
|
|
463
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
|
|
464
|
+
--mod-picker-spacing-top-to-alert-icon,
|
|
465
|
+
var(--spectrum-picker-spacing-top-to-alert-icon)
|
|
466
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(
|
|
467
|
+
--mod-picker-spacing-top-to-progress-circle,
|
|
468
|
+
var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
469
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
|
|
470
|
+
--mod-picker-spacing-top-to-progress-circle,
|
|
471
|
+
var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
472
|
+
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#label~.picker{margin-inline-start:var(
|
|
412
473
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
413
474
|
)}:host([quiet]) #button{background-color:#0000;border:none;border-radius:0;color:var(
|
|
414
475
|
--highcontrast-picker-font-color-default,var(
|
|
@@ -419,7 +480,7 @@ var(--spectrum-picker-border-width)
|
|
|
419
480
|
var(--spectrum-picker-spacing-label-to-picker-quiet)
|
|
420
481
|
) + 1px);padding-inline:var(
|
|
421
482
|
--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)
|
|
422
|
-
)}:host([quiet]) #button .picker{margin-inline-end:var(
|
|
483
|
+
)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(
|
|
423
484
|
--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)
|
|
424
485
|
)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}:host([quiet]) #button:hover{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(
|
|
425
486
|
--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
|
|
@@ -457,7 +518,7 @@ var(--spectrum-picker-focus-indicator-gap)
|
|
|
457
518
|
) + var(
|
|
458
519
|
--mod-picker-border-width,
|
|
459
520
|
var(--spectrum-picker-border-width)
|
|
460
|
-
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}:host{--spectrum-picker-background-color-default:var(
|
|
521
|
+
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(
|
|
461
522
|
--system-spectrum-picker-background-color-default
|
|
462
523
|
);--spectrum-picker-background-color-default-open:var(
|
|
463
524
|
--system-spectrum-picker-background-color-default-open
|