@spectrum-web-components/picker 0.11.4 → 0.11.6-devmode.7

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 (51) hide show
  1. package/package.json +39 -22
  2. package/sp-picker.dev.js +3 -0
  3. package/sp-picker.dev.js.map +7 -0
  4. package/sp-picker.js +3 -14
  5. package/sp-picker.js.map +7 -1
  6. package/src/Picker.dev.js +501 -0
  7. package/src/Picker.dev.js.map +7 -0
  8. package/src/Picker.js +405 -434
  9. package/src/Picker.js.map +7 -1
  10. package/src/index.dev.js +2 -0
  11. package/src/index.dev.js.map +7 -0
  12. package/src/index.js +2 -13
  13. package/src/index.js.map +7 -1
  14. package/src/picker.css.dev.js +304 -0
  15. package/src/picker.css.dev.js.map +7 -0
  16. package/src/picker.css.js +17 -38
  17. package/src/picker.css.js.map +7 -1
  18. package/src/spectrum-picker.css.dev.js +300 -0
  19. package/src/spectrum-picker.css.dev.js.map +7 -0
  20. package/src/spectrum-picker.css.js +17 -38
  21. package/src/spectrum-picker.css.js.map +7 -1
  22. package/stories/picker-sizes.stories.js +22 -30
  23. package/stories/picker-sizes.stories.js.map +7 -1
  24. package/stories/picker.stories.js +84 -95
  25. package/stories/picker.stories.js.map +7 -1
  26. package/stories/states.js +225 -236
  27. package/stories/states.js.map +7 -1
  28. package/sync/index.dev.js +8 -0
  29. package/sync/index.dev.js.map +7 -0
  30. package/sync/index.js +6 -15
  31. package/sync/index.js.map +7 -1
  32. package/sync/sp-picker.dev.js +3 -0
  33. package/sync/sp-picker.dev.js.map +7 -0
  34. package/sync/sp-picker.js +3 -14
  35. package/sync/sp-picker.js.map +7 -1
  36. package/test/benchmark/basic-test.js +256 -267
  37. package/test/benchmark/basic-test.js.map +7 -1
  38. package/test/index.js +830 -844
  39. package/test/index.js.map +7 -1
  40. package/test/picker-reparenting.test.js +71 -76
  41. package/test/picker-reparenting.test.js.map +7 -1
  42. package/test/picker-responsive.test.js +41 -53
  43. package/test/picker-responsive.test.js.map +7 -1
  44. package/test/picker-sizes.test-vrt.js +4 -15
  45. package/test/picker-sizes.test-vrt.js.map +7 -1
  46. package/test/picker-sync.test.js +5 -16
  47. package/test/picker-sync.test.js.map +7 -1
  48. package/test/picker.test-vrt.js +4 -15
  49. package/test/picker.test-vrt.js.map +7 -1
  50. package/test/picker.test.js +5 -16
  51. package/test/picker.test.js.map +7 -1
package/src/picker.css.js CHANGED
@@ -1,16 +1,5 @@
1
- /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
14
3
  #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(
15
4
  --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
5
  );line-height:var(
@@ -173,7 +162,9 @@ const styles = css `
173
162
  --spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)
174
163
  );--spectrum-picker-focus-ring-color:var(
175
164
  --spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)
176
- )}#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!important}#button:focus-visible{box-shadow:none!important}#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}: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([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(
165
+ )}#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)}: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(
166
+ --spectrum-global-color-blue-400
167
+ )}: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([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(
177
168
  --spectrum-picker-texticon-placeholder-font-weight
178
169
  );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(
179
170
  --spectrum-picker-texticon-error-icon-margin-left
@@ -221,17 +212,13 @@ var(--spectrum-alias-border-size-thin)
221
212
  --spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
222
213
  );border-color:var(
223
214
  --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
224
- );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
225
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
226
- );color:var(
215
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(
227
216
  --spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
228
217
  )}#button:focus-visible,:host([focused]) #button{background-color:var(
229
218
  --spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
230
219
  );border-color:var(
231
220
  --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
232
- );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
233
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
234
- );color:var(
221
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(
235
222
  --spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
236
223
  )}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(
237
224
  --spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
@@ -280,14 +267,10 @@ var(--spectrum-alias-border-size-thin)
280
267
  );color:var(
281
268
  --spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
282
269
  )}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(
283
- --spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
284
- );box-shadow:0 2px 0 0 var(
285
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
286
- )}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(
287
- --spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
288
- );box-shadow:0 2px 0 0 var(
289
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
290
- )}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(
270
+ --spectrum-picker-quiet-background-color-key-focus
271
+ );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(
272
+ --spectrum-picker-quiet-background-color-key-focus
273
+ );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(
291
274
  --spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
292
275
  )}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(
293
276
  --spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
@@ -295,19 +278,15 @@ var(--spectrum-alias-border-size-thin)
295
278
  --spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
296
279
  )}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(
297
280
  --spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
298
- )}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(
281
+ )}: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(
299
282
  --spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)
300
283
  );border-color:var(
301
284
  --spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)
302
285
  )}: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(
303
- --spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
304
- );box-shadow:0 2px 0 0 var(
305
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
306
- )}: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-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
308
- );box-shadow:0 2px 0 0 var(
309
- --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
310
- )}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(
286
+ --spectrum-picker-quiet-background-color-key-focus
287
+ );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(
288
+ --spectrum-picker-quiet-background-color-key-focus
289
+ );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
290
  --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
312
291
  )}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(
313
292
  --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
@@ -322,4 +301,4 @@ var(--spectrum-alias-border-size-thin)
322
301
  )}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}
323
302
  `;
324
303
  export default styles;
325
- //# sourceMappingURL=picker.css.js.map
304
+ //# sourceMappingURL=picker.css.js.map
package/src/picker.css.js.map CHANGED
@@ -1 +1,7 @@
1
- {"version":3,"file":"picker.css.js","sourceRoot":"","sources":["picker.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsTjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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(\n--spectrum-picker-textonly-padding-left-adjusted\n);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(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#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(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.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(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--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(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#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!important}#button:focus-visible{box-shadow:none!important}#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}: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([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(\n--spectrum-picker-texticon-placeholder-font-weight\n);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(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}: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(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}: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(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}: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(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["picker.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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(\n--spectrum-picker-textonly-padding-left-adjusted\n);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(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#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(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.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(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--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(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#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)}: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(\n--spectrum-global-color-blue-400\n)}: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([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(\n--spectrum-picker-texticon-placeholder-font-weight\n);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(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);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(\n--spectrum-picker-quiet-background-color-key-focus\n);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(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}: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(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}: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(\n--spectrum-picker-quiet-background-color-key-focus\n);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(\n--spectrum-picker-quiet-background-color-key-focus\n);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(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}: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(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"],
5
+ "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6Sf,eAAe;",
6
+ "names": []
7
+ }
package/src/spectrum-picker.css.dev.js ADDED
@@ -0,0 +1,300 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ #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(
4
+ --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
5
+ );line-height:var(
6
+ --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
7
+ );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(
8
+ --spectrum-picker-textonly-padding-left-adjusted
9
+ );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(
10
+ --spectrum-picker-textonly-padding-left-adjusted
11
+ )}#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;max-width:100%;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(
12
+ --spectrum-picker-texticon-disabled-border-size
13
+ );cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(
14
+ --spectrum-picker-texticon-icon-gap
15
+ )}:host([dir=rtl]) #button .icon{margin-left:var(
16
+ --spectrum-picker-texticon-icon-gap
17
+ )}.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(
18
+ --spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)
19
+ );--spectrum-picker-texticon-text-size:var(
20
+ --spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)
21
+ );--spectrum-picker-texticon-icon-gap:var(
22
+ --spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)
23
+ );--spectrum-picker-texticon-placeholder-font-style:var(
24
+ --spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
25
+ );--spectrum-picker-texticon-placeholder-font-weight:var(
26
+ --spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
27
+ );--spectrum-picker-texticon-error-icon-margin-left:var(
28
+ --spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)
29
+ );--spectrum-picker-texticon-ui-icon-gap:var(
30
+ --spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)
31
+ );--spectrum-picker-texticon-popover-max-width:var(
32
+ --spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)
33
+ );--spectrum-picker-texticon-padding-left:var(
34
+ --spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)
35
+ );--spectrum-picker-texticon-height:var(
36
+ --spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)
37
+ );--spectrum-picker-texticon-min-width:var(
38
+ --spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)
39
+ );--spectrum-picker-texticon-width:var(
40
+ --spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)
41
+ );--spectrum-picker-texticon-border-radius:var(
42
+ --spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)
43
+ );--spectrum-picker-textonly-border-size:var(
44
+ --spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)
45
+ );--spectrum-picker-textonly-padding-left:var(
46
+ --spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)
47
+ );--spectrum-picker-textonly-padding-right:var(
48
+ --spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)
49
+ );--spectrum-picker-textonly-border-radius:var(
50
+ --spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)
51
+ )}:host([size=m]){--spectrum-picker-texticon-padding-left:var(
52
+ --spectrum-picker-m-texticon-padding-left
53
+ );--spectrum-picker-texticon-border-size:var(
54
+ --spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)
55
+ );--spectrum-picker-texticon-text-size:var(
56
+ --spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)
57
+ );--spectrum-picker-texticon-icon-gap:var(
58
+ --spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)
59
+ );--spectrum-picker-texticon-placeholder-font-style:var(
60
+ --spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
61
+ );--spectrum-picker-texticon-placeholder-font-weight:var(
62
+ --spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
63
+ );--spectrum-picker-texticon-error-icon-margin-left:var(
64
+ --spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)
65
+ );--spectrum-picker-texticon-ui-icon-gap:var(
66
+ --spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)
67
+ );--spectrum-picker-texticon-popover-max-width:var(
68
+ --spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)
69
+ );--spectrum-picker-texticon-height:var(
70
+ --spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)
71
+ );--spectrum-picker-texticon-min-width:var(
72
+ --spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)
73
+ );--spectrum-picker-texticon-width:var(
74
+ --spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)
75
+ );--spectrum-picker-texticon-border-radius:var(
76
+ --spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
77
+ );--spectrum-picker-textonly-border-size:var(
78
+ --spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)
79
+ );--spectrum-picker-textonly-padding-left:var(
80
+ --spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)
81
+ );--spectrum-picker-textonly-padding-right:var(
82
+ --spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)
83
+ );--spectrum-picker-textonly-border-radius:var(
84
+ --spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)
85
+ )}:host([size=l]){--spectrum-picker-texticon-border-size:var(
86
+ --spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)
87
+ );--spectrum-picker-texticon-text-size:var(
88
+ --spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)
89
+ );--spectrum-picker-texticon-icon-gap:var(
90
+ --spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)
91
+ );--spectrum-picker-texticon-placeholder-font-style:var(
92
+ --spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
93
+ );--spectrum-picker-texticon-placeholder-font-weight:var(
94
+ --spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
95
+ );--spectrum-picker-texticon-error-icon-margin-left:var(
96
+ --spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)
97
+ );--spectrum-picker-texticon-ui-icon-gap:var(
98
+ --spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)
99
+ );--spectrum-picker-texticon-popover-max-width:var(
100
+ --spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)
101
+ );--spectrum-picker-texticon-padding-left:var(
102
+ --spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)
103
+ );--spectrum-picker-texticon-height:var(
104
+ --spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)
105
+ );--spectrum-picker-texticon-min-width:var(
106
+ --spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)
107
+ );--spectrum-picker-texticon-width:var(
108
+ --spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)
109
+ );--spectrum-picker-texticon-border-radius:var(
110
+ --spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)
111
+ );--spectrum-picker-textonly-border-size:var(
112
+ --spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)
113
+ );--spectrum-picker-textonly-padding-left:var(
114
+ --spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)
115
+ );--spectrum-picker-textonly-padding-right:var(
116
+ --spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)
117
+ );--spectrum-picker-textonly-border-radius:var(
118
+ --spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)
119
+ )}:host([size=xl]){--spectrum-picker-texticon-border-size:var(
120
+ --spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)
121
+ );--spectrum-picker-texticon-text-size:var(
122
+ --spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)
123
+ );--spectrum-picker-texticon-icon-gap:var(
124
+ --spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)
125
+ );--spectrum-picker-texticon-placeholder-font-style:var(
126
+ --spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
127
+ );--spectrum-picker-texticon-placeholder-font-weight:var(
128
+ --spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
129
+ );--spectrum-picker-texticon-error-icon-margin-left:var(
130
+ --spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)
131
+ );--spectrum-picker-texticon-ui-icon-gap:var(
132
+ --spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)
133
+ );--spectrum-picker-texticon-popover-max-width:var(
134
+ --spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)
135
+ );--spectrum-picker-texticon-padding-left:var(
136
+ --spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)
137
+ );--spectrum-picker-texticon-height:var(
138
+ --spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)
139
+ );--spectrum-picker-texticon-min-width:var(
140
+ --spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)
141
+ );--spectrum-picker-texticon-width:var(
142
+ --spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)
143
+ );--spectrum-picker-texticon-border-radius:var(
144
+ --spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)
145
+ );--spectrum-picker-textonly-border-size:var(
146
+ --spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)
147
+ );--spectrum-picker-textonly-padding-left:var(
148
+ --spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)
149
+ );--spectrum-picker-textonly-padding-right:var(
150
+ --spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)
151
+ );--spectrum-picker-textonly-border-radius:var(
152
+ --spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)
153
+ )}:host{--spectrum-picker-texticon-min-width:var(
154
+ --spectrum-global-dimension-size-400
155
+ );--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(
156
+ --spectrum-global-dimension-size-3000
157
+ );--spectrum-picker-texticon-width:var(
158
+ --spectrum-global-dimension-size-2400
159
+ );--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(
160
+ --spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)
161
+ );--spectrum-picker-focus-ring-size:var(
162
+ --spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)
163
+ );--spectrum-picker-focus-ring-color:var(
164
+ --spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)
165
+ )}#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)}: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(
166
+ --spectrum-global-color-blue-400
167
+ )}: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([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(
168
+ --spectrum-picker-texticon-placeholder-font-weight
169
+ );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(
170
+ --spectrum-picker-texticon-error-icon-margin-left
171
+ )}:host([dir=rtl]) .validation-icon{margin-right:var(
172
+ --spectrum-picker-texticon-error-icon-margin-left
173
+ )}:host([dir=ltr]) #label~.picker{margin-left:var(
174
+ --spectrum-picker-texticon-ui-icon-gap
175
+ )}:host([dir=rtl]) #label~.picker{margin-right:var(
176
+ --spectrum-picker-texticon-ui-icon-gap
177
+ )}#popover{max-width:var(
178
+ --spectrum-picker-texticon-popover-max-width
179
+ )}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(
180
+ --spectrum-picker-m-quiet-texticon-popover-offset-x,
181
+ var(--spectrum-global-dimension-size-150)
182
+ ) + var(
183
+ --spectrum-popover-border-size,
184
+ var(--spectrum-alias-border-size-thin)
185
+ ))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(
186
+ --spectrum-picker-m-quiet-texticon-popover-offset-x,
187
+ var(--spectrum-global-dimension-size-150)
188
+ ) + var(
189
+ --spectrum-popover-border-size,
190
+ var(--spectrum-alias-border-size-thin)
191
+ ))*-1)}#button{background-color:var(
192
+ --spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)
193
+ );border-color:var(
194
+ --spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)
195
+ );color:var(
196
+ --spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)
197
+ )}#button:hover{background-color:var(
198
+ --spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)
199
+ );border-color:var(
200
+ --spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)
201
+ );color:var(
202
+ --spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
203
+ )}#button:hover .picker{color:var(
204
+ --spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)
205
+ )}#button:active,:host([open]) #button{background-color:var(
206
+ --spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)
207
+ );border-color:var(
208
+ --spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)
209
+ )}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(
210
+ --spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)
211
+ )}#button.focus-visible,:host([focused]) #button{background-color:var(
212
+ --spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
213
+ );border-color:var(
214
+ --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
215
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(
216
+ --spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
217
+ )}#button:focus-visible,:host([focused]) #button{background-color:var(
218
+ --spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
219
+ );border-color:var(
220
+ --spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
221
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(
222
+ --spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
223
+ )}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(
224
+ --spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
225
+ )}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(
226
+ --spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
227
+ )}:host([invalid]) #button{border-color:var(
228
+ --spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)
229
+ )}:host([invalid]) #button .validation-icon{color:var(
230
+ --spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)
231
+ )}:host([invalid]) #button:hover{border-color:var(
232
+ --spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)
233
+ )}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(
234
+ --spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)
235
+ )}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(
236
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
237
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
238
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
239
+ )}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(
240
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
241
+ );box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
242
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
243
+ )}#button:disabled,:host([disabled]) #button{background-color:var(
244
+ --spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)
245
+ );color:var(
246
+ --spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
247
+ )}#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(
248
+ --spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)
249
+ )}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(
250
+ --spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)
251
+ )}.picker{color:var(
252
+ --spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)
253
+ )}#label.placeholder{color:var(
254
+ --spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)
255
+ )}#label.placeholder:hover{color:var(
256
+ --spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)
257
+ )}#label.placeholder:active{color:var(
258
+ --spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)
259
+ )}:host([quiet]) #button{background-color:var(
260
+ --spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)
261
+ );border-color:var(
262
+ --spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)
263
+ );color:var(
264
+ --spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)
265
+ )}:host([quiet]) #button:hover{background-color:var(
266
+ --spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)
267
+ );color:var(
268
+ --spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
269
+ )}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(
270
+ --spectrum-picker-quiet-background-color-key-focus
271
+ );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(
272
+ --spectrum-picker-quiet-background-color-key-focus
273
+ );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(
274
+ --spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
275
+ )}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(
276
+ --spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
277
+ )}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(
278
+ --spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
279
+ )}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(
280
+ --spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
281
+ )}: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(
282
+ --spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)
283
+ );border-color:var(
284
+ --spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)
285
+ )}: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(
286
+ --spectrum-picker-quiet-background-color-key-focus
287
+ );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(
288
+ --spectrum-picker-quiet-background-color-key-focus
289
+ );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(
290
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
291
+ )}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(
292
+ --spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
293
+ )}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(
294
+ --spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)
295
+ );color:var(
296
+ --spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
297
+ )}
298
+ `;
299
+ export default styles;
300
+ //# sourceMappingURL=spectrum-picker.css.dev.js.map