@spectrum-web-components/picker 0.13.12-react.50 → 0.14.1

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