@spectrum-web-components/picker 0.41.1 → 0.41.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +38 -0
  2. package/custom-elements.json +20 -0
  3. package/package.json +16 -15
  4. package/src/Picker.d.ts +3 -1
  5. package/src/Picker.dev.js +8 -2
  6. package/src/Picker.dev.js.map +2 -2
  7. package/src/Picker.js +9 -9
  8. package/src/Picker.js.map +3 -3
  9. package/src/picker.css.dev.js +1 -512
  10. package/src/picker.css.dev.js.map +2 -2
  11. package/src/picker.css.js +1 -512
  12. package/src/picker.css.js.map +2 -2
  13. package/src/spectrum-config.js +4 -0
  14. package/src/spectrum-picker.css.dev.js +1 -506
  15. package/src/spectrum-picker.css.dev.js.map +2 -2
  16. package/src/spectrum-picker.css.js +1 -506
  17. package/src/spectrum-picker.css.js.map +2 -2
  18. package/stories/picker.stories.js +140 -2
  19. package/stories/picker.stories.js.map +2 -2
package/src/spectrum-picker.css.js CHANGED
@@ -1,509 +1,4 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
2
- #button{-webkit-appearance:button;cursor:pointer;font-family:var(
3
- --mod-button-font-family,var(
4
- --mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)
5
- )
6
- );line-height:var(
7
- --mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100))
8
- );text-transform:none;transition:background var(
9
- --mod-button-animation-duration,var(
10
- --mod-animation-duration-100,var(--spectrum-animation-duration-100)
11
- )
12
- ) ease-out,border-color var(
13
- --mod-button-animation-duration,var(
14
- --mod-animation-duration-100,var(--spectrum-animation-duration-100)
15
- )
16
- ) ease-out,color var(
17
- --mod-button-animation-duration,var(
18
- --mod-animation-duration-100,var(--spectrum-animation-duration-100)
19
- )
20
- ) ease-out,box-shadow var(
21
- --mod-button-animation-duration,var(
22
- --mod-animation-duration-100,var(--spectrum-animation-duration-100)
23
- )
24
- ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:inline-flex;justify-content:center;margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:focus{outline:none}: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(
25
- --spectrum-default-font-style
26
- );--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(
27
- --spectrum-component-top-to-text-100
28
- );--spectrum-picker-spacing-bottom-to-text:var(
29
- --spectrum-component-bottom-to-text-100
30
- );--spectrum-picker-spacing-edge-to-text:var(
31
- --spectrum-component-edge-to-text-100
32
- );--spectrum-picker-spacing-edge-to-text-quiet:var(
33
- --spectrum-field-edge-to-text-quiet
34
- );--spectrum-picker-spacing-top-to-text-side-label-quiet:var(
35
- --spectrum-component-top-to-text-100
36
- );--spectrum-picker-spacing-label-to-picker:var(
37
- --spectrum-field-label-to-component
38
- );--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
39
- --spectrum-field-text-to-alert-icon-medium
40
- );--spectrum-picker-spacing-icon-to-disclosure-icon:var(
41
- --spectrum-picker-visual-to-disclosure-icon-medium
42
- );--spectrum-picker-spacing-label-to-picker-quiet:var(
43
- --spectrum-field-label-to-component-quiet-medium
44
- );--spectrum-picker-spacing-top-to-alert-icon:var(
45
- --spectrum-field-top-to-alert-icon-medium
46
- );--spectrum-picker-spacing-top-to-progress-circle:var(
47
- --spectrum-field-top-to-progress-circle-medium
48
- );--spectrum-picker-spacing-top-to-disclosure-icon:var(
49
- --spectrum-field-top-to-disclosure-icon-100
50
- );--spectrum-picker-spacing-edge-to-disclosure-icon:var(
51
- --spectrum-field-end-edge-to-disclosure-icon-100
52
- );--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(
53
- --spectrum-picker-end-edge-to-disclousure-icon-quiet
54
- );--spectrum-picker-animation-duration:var(
55
- --spectrum-animation-duration-100
56
- );--spectrum-picker-font-color-default:var(
57
- --spectrum-neutral-content-color-default
58
- );--spectrum-picker-font-color-default-open:var(
59
- --spectrum-neutral-content-color-focus
60
- );--spectrum-picker-font-color-hover:var(
61
- --spectrum-neutral-content-color-hover
62
- );--spectrum-picker-font-color-hover-open:var(
63
- --spectrum-neutral-content-color-focus-hover
64
- );--spectrum-picker-font-color-active:var(
65
- --spectrum-neutral-content-color-down
66
- );--spectrum-picker-font-color-key-focus:var(
67
- --spectrum-neutral-content-color-key-focus
68
- );--spectrum-picker-icon-color-default:var(
69
- --spectrum-neutral-content-color-default
70
- );--spectrum-picker-icon-color-default-open:var(
71
- --spectrum-neutral-content-color-focus
72
- );--spectrum-picker-icon-color-hover:var(
73
- --spectrum-neutral-content-color-hover
74
- );--spectrum-picker-icon-color-hover-open:var(
75
- --spectrum-neutral-content-color-focus-hover
76
- );--spectrum-picker-icon-color-active:var(
77
- --spectrum-neutral-content-color-down
78
- );--spectrum-picker-icon-color-key-focus:var(
79
- --spectrum-neutral-content-color-key-focus
80
- );--spectrum-picker-border-color-error-default:var(
81
- --spectrum-negative-border-color-default
82
- );--spectrum-picker-border-color-error-default-open:var(
83
- --spectrum-negative-border-color-focus
84
- );--spectrum-picker-border-color-error-hover:var(
85
- --spectrum-negative-border-color-hover
86
- );--spectrum-picker-border-color-error-hover-open:var(
87
- --spectrum-negative-border-color-focus-hover
88
- );--spectrum-picker-border-color-error-active:var(
89
- --spectrum-negative-border-color-down
90
- );--spectrum-picker-border-color-error-key-focus:var(
91
- --spectrum-negative-border-color-key-focus
92
- );--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(
93
- --spectrum-disabled-background-color
94
- );--spectrum-picker-font-color-disabled:var(
95
- --spectrum-disabled-content-color
96
- );--spectrum-picker-icon-color-disabled:var(
97
- --spectrum-disabled-content-color
98
- );--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(
99
- --spectrum-focus-indicator-thickness
100
- );--spectrum-picker-focus-indicator-color:var(
101
- --spectrum-focus-indicator-color
102
- )}: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(
103
- --spectrum-component-top-to-text-75
104
- );--spectrum-picker-spacing-top-to-text:var(
105
- --spectrum-component-top-to-text-75
106
- );--spectrum-picker-spacing-bottom-to-text:var(
107
- --spectrum-component-bottom-to-text-75
108
- );--spectrum-picker-spacing-edge-to-text:var(
109
- --spectrum-component-edge-to-text-75
110
- );--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
111
- --spectrum-field-text-to-alert-icon-small
112
- );--spectrum-picker-spacing-icon-to-disclosure-icon:var(
113
- --spectrum-picker-visual-to-disclosure-icon-small
114
- );--spectrum-picker-spacing-label-to-picker-quiet:var(
115
- --spectrum-field-label-to-component-quiet-small
116
- );--spectrum-picker-spacing-top-to-alert-icon:var(
117
- --spectrum-field-top-to-alert-icon-small
118
- );--spectrum-picker-spacing-top-to-progress-circle:var(
119
- --spectrum-field-top-to-progress-circle-small
120
- );--spectrum-picker-spacing-top-to-disclosure-icon:var(
121
- --spectrum-field-top-to-disclosure-icon-75
122
- );--spectrum-picker-spacing-edge-to-disclosure-icon:var(
123
- --spectrum-field-end-edge-to-disclosure-icon-75
124
- )}: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(
125
- --spectrum-component-top-to-text-200
126
- );--spectrum-picker-spacing-top-to-text:var(
127
- --spectrum-component-top-to-text-200
128
- );--spectrum-picker-spacing-bottom-to-text:var(
129
- --spectrum-component-bottom-to-text-200
130
- );--spectrum-picker-spacing-edge-to-text:var(
131
- --spectrum-component-edge-to-text-200
132
- );--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
133
- --spectrum-field-text-to-alert-icon-large
134
- );--spectrum-picker-spacing-icon-to-disclosure-icon:var(
135
- --spectrum-picker-visual-to-disclosure-icon-large
136
- );--spectrum-picker-spacing-label-to-picker-quiet:var(
137
- --spectrum-field-label-to-component-quiet-large
138
- );--spectrum-picker-spacing-top-to-alert-icon:var(
139
- --spectrum-field-top-to-alert-icon-large
140
- );--spectrum-picker-spacing-top-to-progress-circle:var(
141
- --spectrum-field-top-to-progress-circle-large
142
- );--spectrum-picker-spacing-top-to-disclosure-icon:var(
143
- --spectrum-field-top-to-disclosure-icon-200
144
- );--spectrum-picker-spacing-edge-to-disclosure-icon:var(
145
- --spectrum-field-end-edge-to-disclosure-icon-200
146
- )}: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(
147
- --spectrum-component-top-to-text-300
148
- );--spectrum-picker-spacing-top-to-text:var(
149
- --spectrum-component-top-to-text-300
150
- );--spectrum-picker-spacing-bottom-to-text:var(
151
- --spectrum-component-bottom-to-text-300
152
- );--spectrum-picker-spacing-edge-to-text:var(
153
- --spectrum-component-edge-to-text-300
154
- );--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(
155
- --spectrum-field-text-to-alert-icon-extra-large
156
- );--spectrum-picker-spacing-icon-to-disclosure-icon:var(
157
- --spectrum-picker-visual-to-disclosure-icon-extra-large
158
- );--spectrum-picker-spacing-label-to-picker-quiet:var(
159
- --spectrum-field-label-to-component-quiet-extra-large
160
- );--spectrum-picker-spacing-top-to-alert-icon:var(
161
- --spectrum-field-top-to-alert-icon-extra-large
162
- );--spectrum-picker-spacing-top-to-progress-circle:var(
163
- --spectrum-field-top-to-progress-circle-extra-large
164
- );--spectrum-picker-spacing-top-to-disclosure-icon:var(
165
- --spectrum-field-top-to-disclosure-icon-300
166
- );--spectrum-picker-spacing-edge-to-disclosure-icon:var(
167
- --spectrum-field-end-edge-to-disclosure-icon-300
168
- )}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.focus-visible,#button.is-keyboardFocused{--highcontrast-picker-border-color-hover:ButtonText}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{background-color:var(
169
- --highcontrast-picker-background-color,var(
170
- --mod-picker-background-color-default,var(--spectrum-picker-background-color-default)
171
- )
172
- );block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(
173
- --highcontrast-picker-border-color-default,var(
174
- --mod-picker-border-color-default,var(--spectrum-picker-border-color-default)
175
- )
176
- );border-radius:var(
177
- --mod-picker-border-radius,var(--spectrum-picker-border-radius)
178
- );border-style:solid;border-width:var(
179
- --mod-picker-border-width,var(--spectrum-picker-border-width)
180
- );box-sizing:border-box;color:var(
181
- --highcontrast-picker-content-color-default,var(
182
- --mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
183
- )
184
- );display:flex;inline-size:var(
185
- --mod-picker-inline-size,var(--spectrum-picker-inline-size)
186
- );margin-block-start:var(
187
- --mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)
188
- );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(
189
- --mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)
190
- );padding-inline-start:var(
191
- --mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)
192
- );transition:background-color var(
193
- --mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
194
- ),box-shadow var(
195
- --mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
196
- ),border-color var(
197
- --mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
198
- ) ease-in-out}#button:after{block-size:calc(100% + var(
199
- --mod-picker-focus-indicator-gap,
200
- var(--spectrum-picker-focus-indicator-gap)
201
- )*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(
202
- --mod-picker-focus-indicator-gap,
203
- var(--spectrum-picker-focus-indicator-gap)
204
- ) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));border-style:solid;border-width:var(
205
- --mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
206
- );content:"";inline-size:calc(100% + var(
207
- --mod-picker-focus-indicator-gap,
208
- var(--spectrum-picker-focus-indicator-gap)
209
- )*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);inset-block:0;inset-inline:0;margin-block-start:calc((var(
210
- --mod-picker-focus-indicator-gap,
211
- var(--spectrum-picker-focus-indicator-gap)
212
- ) + var(
213
- --mod-picker-focus-indicator-thickness,
214
- var(--spectrum-picker-focus-indicator-thickness)
215
- ) + var(
216
- --mod-picker-border-width,
217
- var(--spectrum-picker-border-width)
218
- ))*-1);margin-inline-start:calc((var(
219
- --mod-picker-focus-indicator-gap,
220
- var(--spectrum-picker-focus-indicator-gap)
221
- ) + var(
222
- --mod-picker-focus-indicator-thickness,
223
- var(--spectrum-picker-focus-indicator-thickness)
224
- ) + var(
225
- --mod-picker-border-width,
226
- var(--spectrum-picker-border-width)
227
- ))*-1);pointer-events:none;position:absolute}#button:active{background-color:var(
228
- --highcontrast-picker-background-color,var(
229
- --mod-picker-background-color-active,var(--spectrum-picker-background-color-active)
230
- )
231
- );border-color:var(
232
- --highcontrast-picker-border-color-default,var(
233
- --mod-picker-border-active,var(--spectrum-picker-border-color-active)
234
- )
235
- )}#button:active:after{border-color:#0000}#button:active.placeholder .label{color:var(
236
- --highcontrast-picker-content-color-default,var(
237
- --mod-picker-font-color-active,var(--spectrum-picker-font-color-active)
238
- )
239
- )}#button.focus-visible,#button.is-keyboardFocused{background-color:var(
240
- --highcontrast-picker-background-color,var(
241
- --mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)
242
- )
243
- );border-color:var(
244
- --highcontrast-picker-border-color-default,var(
245
- --mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)
246
- )
247
- );color:var(
248
- --highcontrast-picker-content-color-default,var(
249
- --mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
250
- )
251
- );outline:none}#button.is-keyboardFocused,#button:focus-visible{background-color:var(
252
- --highcontrast-picker-background-color,var(
253
- --mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)
254
- )
255
- );border-color:var(
256
- --highcontrast-picker-border-color-default,var(
257
- --mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)
258
- )
259
- );color:var(
260
- --highcontrast-picker-content-color-default,var(
261
- --mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
262
- )
263
- );outline:none}#button.focus-visible:after,#button.is-keyboardFocused:after{border-color:var(
264
- --highcontrast-picker-focus-indicator-color,var(
265
- --mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
266
- )
267
- )}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(
268
- --highcontrast-picker-focus-indicator-color,var(
269
- --mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
270
- )
271
- )}#button.focus-visible.placeholder,#button.is-keyboardFocused.placeholder{color:var(
272
- --highcontrast-picker-content-color-default,var(
273
- --mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
274
- )
275
- )}#button.is-keyboardFocused.placeholder,#button:focus-visible.placeholder{color:var(
276
- --highcontrast-picker-content-color-default,var(
277
- --mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
278
- )
279
- )}#button.focus-visible .picker,#button.is-keyboardFocused .picker{color:var(
280
- --highcontrast-picker-content-color-default,var(
281
- --mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)
282
- )
283
- )}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(
284
- --highcontrast-picker-content-color-default,var(
285
- --mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)
286
- )
287
- )}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(
288
- --highcontrast-picker-border-color-default,var(
289
- --mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)
290
- )
291
- )}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(
292
- --highcontrast-picker-content-color-default,var(
293
- --mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)
294
- )
295
- )}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(
296
- --highcontrast-picker-border-color-default,var(
297
- --mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)
298
- )
299
- )}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(
300
- --highcontrast-picker-border-color-default,var(
301
- --mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)
302
- )
303
- )}:host([invalid]) #button:not(:disabled,.is-disabled).focus-visible,:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused{border-color:var(
304
- --highcontrast-picker-border-color-default,var(
305
- --mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)
306
- )
307
- )}:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused,:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(
308
- --highcontrast-picker-border-color-default,var(
309
- --mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)
310
- )
311
- )}#button.is-loading .picker{color:var(
312
- --highcontrast-picker-content-color-disabled,var(
313
- --mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)
314
- )
315
- )}#button:disabled,:host([disabled]) #button{background-color:var(
316
- --highcontrast-picker-background-color,var(
317
- --mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)
318
- )
319
- );border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(
320
- --highcontrast-picker-content-color-disabled,var(
321
- --mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)
322
- )
323
- );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(
324
- --highcontrast-picker-content-color-disabled,var(
325
- --mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)
326
- )
327
- )}#button:disabled .label.placeholder,:host([disabled]) #button .label.placeholder{color:var(
328
- --highcontrast-picker-content-color-disabled,var(
329
- --mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)
330
- )
331
- )}.icon{flex-shrink:0;margin-inline-end:var(
332
- --mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
333
- )}:host([open]) #button:not(.spectrum-Picker--quiet){background-color:var(
334
- --highcontrast-picker-background-color,var(
335
- --mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)
336
- )
337
- );border-color:var(
338
- --highcontrast-picker-border-color-default,var(
339
- --mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)
340
- )
341
- );color:var(
342
- --highcontrast-picker-content-color-default,var(
343
- --mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)
344
- )
345
- )}:host([open]) #button:not(.spectrum-Picker--quiet) .picker{color:var(
346
- --highcontrast-picker-content-color-default,var(
347
- --mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)
348
- )
349
- )}.label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(
350
- --mod-picker-font-weight,var(--spectrum-picker-font-weight)
351
- );line-height:var(
352
- --mod-picker-line-height,var(--spectrum-picker-line-height)
353
- );margin-block-end:calc(var(
354
- --mod-picker-spacing-bottom-to-text,
355
- var(--spectrum-picker-spacing-bottom-to-text)
356
- ) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(
357
- --mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)
358
- );overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}.label.placeholder{color:var(
359
- --highcontrast-picker-content-color-default,var(
360
- --mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
361
- )
362
- );font-style:var(
363
- --mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)
364
- );font-weight:var(
365
- --mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)
366
- );transition:color var(
367
- --mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
368
- ) ease-in-out}.label.placeholder:active{color:var(
369
- --highcontrast-picker-content-color-default,var(
370
- --mod-picker-font-color-active,var(--spectrum-picker-font-color-active)
371
- )
372
- )}.picker{color:var(
373
- --highcontrast-picker-content-color-default,var(
374
- --mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)
375
- )
376
- );display:inline-block;flex-shrink:0;margin-block:var(
377
- --mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon)
378
- );margin-inline-start:var(
379
- --mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon)
380
- );position:relative;transition:color var(
381
- --mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
382
- ) ease-out;vertical-align:top}.picker:active{color:var(
383
- --highcontrast-picker-content-color-default,var(
384
- --mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)
385
- )
386
- )}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(
387
- --mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)
388
- )}.validation-icon{margin-block-end:calc(var(
389
- --mod-picker-spacing-top-to-alert-icon,
390
- var(--spectrum-picker-spacing-top-to-alert-icon)
391
- ) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
392
- --mod-picker-spacing-top-to-alert-icon,
393
- var(--spectrum-picker-spacing-top-to-alert-icon)
394
- ) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(
395
- --mod-picker-spacing-top-to-progress-circle,
396
- var(--spectrum-picker-spacing-top-to-progress-circle)
397
- ) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(
398
- --mod-picker-spacing-top-to-progress-circle,
399
- var(--spectrum-picker-spacing-top-to-progress-circle)
400
- ) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(
401
- --mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
402
- )}:host([quiet]) #button{background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;color:var(
403
- --highcontrast-picker-content-color-default,var(
404
- --mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
405
- )
406
- );inline-size:auto;margin-block-start:calc(var(
407
- --mod-picker-spacing-label-to-picker-quiet,
408
- var(--spectrum-picker-spacing-label-to-picker-quiet)
409
- ) + 1px);min-inline-size:0;padding-inline:var(
410
- --mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)
411
- )}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(
412
- --mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)
413
- )}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}@media (hover:hover){#button:hover .picker{color:var(
414
- --highcontrast-picker-content-color-default,var(
415
- --mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)
416
- )
417
- )}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(
418
- --highcontrast-picker-border-color-hover,var(
419
- --mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)
420
- )
421
- )}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(
422
- --highcontrast-picker-border-color-hover,var(
423
- --mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)
424
- )
425
- )}:host([open]) #button:not(.spectrum-Picker--quiet):hover .picker{color:var(
426
- --highcontrast-picker-content-color-default,var(
427
- --mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)
428
- )
429
- )}.label.placeholder:hover{color:var(
430
- --highcontrast-picker-content-color-default,var(
431
- --mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
432
- )
433
- )}#button:hover{background-color:var(
434
- --highcontrast-picker-background-color,var(
435
- --mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)
436
- )
437
- );border-color:var(
438
- --highcontrast-picker-border-color-hover,var(
439
- --mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)
440
- )
441
- );color:var(
442
- --highcontrast-picker-content-color-default,var(
443
- --mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
444
- )
445
- )}:host([open]) #button:not(.spectrum-Picker--quiet):hover{background-color:var(
446
- --highcontrast-picker-background-color,var(
447
- --mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)
448
- )
449
- );border-color:var(
450
- --highcontrast-picker-border-color-hover,var(
451
- --mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)
452
- )
453
- );color:var(
454
- --highcontrast-picker-content-color-default,var(
455
- --mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)
456
- )
457
- )}:host([quiet]) #button:hover{background-color:var(
458
- --highcontrast-picker-background-color,transparent
459
- )}}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-keyboardFocused{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.focus-visible:after,:host([quiet]) #button.is-keyboardFocused:after{border:none;border-radius:0;box-shadow:0 var(
460
- --mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
461
- ) 0 0 var(
462
- --highcontrast-picker-focus-indicator-color,var(
463
- --mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
464
- )
465
- );margin:calc((var(
466
- --mod-picker-focus-indicator-gap,
467
- var(--spectrum-picker-focus-indicator-gap)
468
- ) + var(
469
- --mod-picker-border-width,
470
- var(--spectrum-picker-border-width)
471
- ))*-1) 0}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{border:none;border-radius:0;box-shadow:0 var(
472
- --mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
473
- ) 0 0 var(
474
- --highcontrast-picker-focus-indicator-color,var(
475
- --mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
476
- )
477
- );margin:calc((var(
478
- --mod-picker-focus-indicator-gap,
479
- var(--spectrum-picker-focus-indicator-gap)
480
- ) + var(
481
- --mod-picker-border-width,
482
- var(--spectrum-picker-border-width)
483
- ))*-1) 0}:host([quiet]) #button:active,:host([quiet]) #button:disabled,:host([quiet][disabled]) #button,:host([quiet][open]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(
484
- --system-spectrum-picker-background-color-default
485
- );--spectrum-picker-background-color-default-open:var(
486
- --system-spectrum-picker-background-color-default-open
487
- );--spectrum-picker-background-color-active:var(
488
- --system-spectrum-picker-background-color-active
489
- );--spectrum-picker-background-color-hover:var(
490
- --system-spectrum-picker-background-color-hover
491
- );--spectrum-picker-background-color-hover-open:var(
492
- --system-spectrum-picker-background-color-hover-open
493
- );--spectrum-picker-background-color-key-focus:var(
494
- --system-spectrum-picker-background-color-key-focus
495
- );--spectrum-picker-border-color-default:var(
496
- --system-spectrum-picker-border-color-default
497
- );--spectrum-picker-border-color-default-open:var(
498
- --system-spectrum-picker-border-color-default-open
499
- );--spectrum-picker-border-color-hover:var(
500
- --system-spectrum-picker-border-color-hover
501
- );--spectrum-picker-border-color-hover-open:var(
502
- --system-spectrum-picker-border-color-hover-open
503
- );--spectrum-picker-border-color-active:var(
504
- --system-spectrum-picker-border-color-active
505
- );--spectrum-picker-border-color-key-focus:var(
506
- --system-spectrum-picker-border-color-key-focus
507
- );--spectrum-picker-border-width:var(--system-spectrum-picker-border-width)}
2
+ #button{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-style:solid;justify-content:center;align-items:center;margin:0;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:focus{outline:none}#button:disabled,:host([disabled]) #button{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(--spectrum-default-font-style);--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(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-picker-spacing-edge-to-text-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-label-to-picker:var(--spectrum-field-label-to-component);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-medium);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-medium);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);--spectrum-picker-animation-duration:var(--spectrum-animation-duration-100);--spectrum-picker-font-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-font-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-font-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-font-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-font-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-font-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-icon-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-icon-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-icon-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-border-color-error-default:var(--spectrum-negative-border-color-default);--spectrum-picker-border-color-error-default-open:var(--spectrum-negative-border-color-focus);--spectrum-picker-border-color-error-hover:var(--spectrum-negative-border-color-hover);--spectrum-picker-border-color-error-hover-open:var(--spectrum-negative-border-color-focus-hover);--spectrum-picker-border-color-error-active:var(--spectrum-negative-border-color-down);--spectrum-picker-border-color-error-key-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-picker-font-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--spectrum-focus-indicator-color)}: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(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(--spectrum-field-text-to-alert-icon-small);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-small);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-small);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-small);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-75);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-75)}: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(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(--spectrum-field-text-to-alert-icon-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-200);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-200)}: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(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-extra-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-extra-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-300);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-300)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button:focus-visible,#button.is-keyboardFocused{--highcontrast-picker-border-color-hover:ButtonText}#button:after,#button .label{forced-color-adjust:none}}#button{box-sizing:border-box;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));max-inline-size:100%;margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button:active.placeholder .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button:focus-visible,#button.is-keyboardFocused{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button:focus-visible:after,#button.is-keyboardFocused:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button:focus-visible.placeholder,#button.is-keyboardFocused.placeholder{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button:focus-visible .picker,#button.is-keyboardFocused .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible,:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}#button.is-loading .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}#button:disabled,:host([disabled]) #button{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}#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(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}#button:disabled .label.placeholder,:host([disabled]) #button .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([open]) #button:not(.spectrum-Picker--quiet){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;margin-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));margin-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon,#button .spectrum-ProgressCircle{margin-inline-start:var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start))}.validation-icon{margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;inline-size:auto;min-inline-size:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{border:none;block-size:auto;inline-size:auto}@media (hover:hover){#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([quiet]) #button:hover{background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button:focus-visible,:host([quiet]) #button.is-keyboardFocused{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button:focus-visible:after,:host([quiet]) #button.is-keyboardFocused:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet]) #button:active,:host([quiet][open]) #button,:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host{--spectrum-picker-background-color-default:var(--system-spectrum-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-spectrum-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-spectrum-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-spectrum-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-spectrum-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-spectrum-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-spectrum-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-spectrum-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-spectrum-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-spectrum-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-spectrum-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-spectrum-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-spectrum-picker-border-width)}
508
3
  `;export default o;
509
4
  //# sourceMappingURL=spectrum-picker.css.js.map