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