@spectrum-web-components/picker-button 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +157 -0
  3. package/custom-elements.json +106 -0
  4. package/package.json +60 -0
  5. package/sp-picker-button.d.ts +6 -0
  6. package/sp-picker-button.dev.js +4 -0
  7. package/sp-picker-button.dev.js.map +7 -0
  8. package/sp-picker-button.js +2 -0
  9. package/sp-picker-button.js.map +7 -0
  10. package/src/PickerButton.d.ts +21 -0
  11. package/src/PickerButton.dev.js +68 -0
  12. package/src/PickerButton.dev.js.map +7 -0
  13. package/src/PickerButton.js +18 -0
  14. package/src/PickerButton.js.map +7 -0
  15. package/src/index.d.ts +1 -0
  16. package/src/index.dev.js +3 -0
  17. package/src/index.dev.js.map +7 -0
  18. package/src/index.js +2 -0
  19. package/src/index.js.map +7 -0
  20. package/src/picker-button.css.d.ts +2 -0
  21. package/src/picker-button.css.dev.js +475 -0
  22. package/src/picker-button.css.dev.js.map +7 -0
  23. package/src/picker-button.css.js +472 -0
  24. package/src/picker-button.css.js.map +7 -0
  25. package/src/spectrum-config.js +123 -0
  26. package/src/spectrum-picker-button-modifier.css.d.ts +2 -0
  27. package/src/spectrum-picker-button-modifier.css.dev.js +7 -0
  28. package/src/spectrum-picker-button-modifier.css.dev.js.map +7 -0
  29. package/src/spectrum-picker-button-modifier.css.js +4 -0
  30. package/src/spectrum-picker-button-modifier.css.js.map +7 -0
  31. package/src/spectrum-picker-button.css.d.ts +2 -0
  32. package/src/spectrum-picker-button.css.dev.js +443 -0
  33. package/src/spectrum-picker-button.css.dev.js.map +7 -0
  34. package/src/spectrum-picker-button.css.js +440 -0
  35. package/src/spectrum-picker-button.css.js.map +7 -0
  36. package/stories/index.js +60 -0
  37. package/stories/index.js.map +7 -0
  38. package/stories/picker-button-sizes.stories.js +25 -0
  39. package/stories/picker-button-sizes.stories.js.map +7 -0
  40. package/stories/picker-button.stories.js +38 -0
  41. package/stories/picker-button.stories.js.map +7 -0
  42. package/test/benchmark/basic-test.js +8 -0
  43. package/test/benchmark/basic-test.js.map +7 -0
  44. package/test/picker-button-sizes.test-vrt.js +5 -0
  45. package/test/picker-button-sizes.test-vrt.js.map +7 -0
  46. package/test/picker-button.test-vrt.js +5 -0
  47. package/test/picker-button.test-vrt.js.map +7 -0
  48. package/test/picker-button.test.js +34 -0
  49. package/test/picker-button.test.js.map +7 -0
@@ -0,0 +1,18 @@
1
+ "use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(o,t,r,s)=>{for(var e=s>1?void 0:s?p(t,r):t,l=o.length-1,i;l>=0;l--)(i=o[l])&&(e=(s?i(t,r,e):i(e))||e);return s&&e&&a(t,r,e),e};import{html as m,SizedMixin as u}from"@spectrum-web-components/base";import{classMap as h}from"@spectrum-web-components/base/src/directives.js";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as d}from"@spectrum-web-components/button/src/ButtonBase.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import v from"./picker-button.css.js";export class PickerButton extends u(f(d,'[slot="label"]')){constructor(){super(...arguments);this.invalid=!1;this.position="right"}static get styles(){return[v]}get hasText(){return this.slotContentIsPresent}render(){const r={root:!0,uiicononly:!this.hasText,textuiicon:this.hasText};return m`
2
+ <div class=${h(r)}>
3
+ <div class="spectrum-PickerButton-fill">
4
+ <span
5
+ class="spectrum-PickerButton-label is-placeholder"
6
+ ?hidden=${!this.hasText}
7
+ >
8
+ <slot name="label"></slot>
9
+ </span>
10
+ <slot name="icon">
11
+ <sp-icon-chevron200
12
+ class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200"
13
+ ></sp-icon-chevron200>
14
+ </slot>
15
+ </div>
16
+ </div>
17
+ `}}n([c({type:Boolean,reflect:!0})],PickerButton.prototype,"invalid",2),n([c({reflect:!0})],PickerButton.prototype,"position",2);
18
+ //# sourceMappingURL=PickerButton.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["PickerButton.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 {\n CSSResultArray,\n html,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\n\nimport styles from './picker-button.css.js';\n\n/**\n * @element sp-picker-button\n */\nexport class PickerButton extends SizedMixin(\n ObserveSlotPresence(ButtonBase, '[slot=\"label\"]')\n) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n position: 'left' | 'right' = 'right';\n\n protected get hasText(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected override render(): TemplateResult {\n const rootClasses = {\n root: true,\n uiicononly: !this.hasText,\n textuiicon: this.hasText,\n };\n return html`\n <div class=${classMap(rootClasses)}>\n <div class=\"spectrum-PickerButton-fill\">\n <span\n class=\"spectrum-PickerButton-label is-placeholder\"\n ?hidden=${!this.hasText}\n >\n <slot name=\"label\"></slot>\n </span>\n <slot name=\"icon\">\n <sp-icon-chevron200\n class=\"spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200\"\n ></sp-icon-chevron200>\n </slot>\n </div>\n </div>\n `;\n }\n}\n"],
5
+ "mappings": "qNAWA,OAEI,QAAAA,EACA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,YAAAC,MAAgB,kDACzB,OAAS,cAAAC,MAAkB,oDAC3B,MAAO,gEACP,OAAS,uBAAAC,MAA2B,+DAEpC,OAAOC,MAAY,yBAKZ,aAAM,qBAAqBL,EAC9BI,EAAoBD,EAAY,gBAAgB,CACpD,CAAE,CAFK,kCAQH,aAAU,GAGV,cAA6B,QAR7B,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAQA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEmB,QAAyB,CACxC,MAAMC,EAAc,CAChB,KAAM,GACN,WAAY,CAAC,KAAK,QAClB,WAAY,KAAK,OACrB,EACA,OAAOP;AAAA,yBACUE,EAASK,CAAW;AAAA;AAAA;AAAA;AAAA,kCAIX,CAAC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAYpC,CACJ,CAjCIC,EAAA,CADCL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,aAQT,uBAGAK,EAAA,CADCL,EAAS,CAAE,QAAS,EAAK,CAAC,GAVlB,aAWT",
6
+ "names": ["html", "SizedMixin", "classMap", "property", "ButtonBase", "ObserveSlotPresence", "styles", "rootClasses", "__decorateClass"]
7
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './PickerButton.js';
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ export * from "./PickerButton.dev.js";
3
+ //# sourceMappingURL=index.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["index.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*/\nexport * from './PickerButton.dev.js'\n"],
5
+ "mappings": ";AAWA,cAAc;",
6
+ "names": []
7
+ }
package/src/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";export*from"./PickerButton.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["index.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*/\nexport * from './PickerButton.js';\n"],
5
+ "mappings": "aAWA,WAAc",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,475 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ .root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(
5
+ --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
6
+ );line-height:var(
7
+ --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
8
+ );margin:0;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}.root:focus{outline:none}.root::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host([disabled]) .root{cursor:default}:host([size=s]){--spectrum-PickerButton-label-padding-y:var(
9
+ --spectrum-alias-pickerbutton-label-padding-y-s,var(--spectrum-global-dimension-size-50)
10
+ );--spectrum-PickerButton-icon-margin-y:var(
11
+ --spectrum-alias-pickerbutton-icon-margin-y-s,var(--spectrum-global-dimension-size-85)
12
+ );--spectrum-PickerButton-icononly-padding-x:var(
13
+ --spectrum-alias-pickerbutton-icononly-padding-x-s,var(--spectrum-global-dimension-size-85)
14
+ )}:host([size=s]) .root{padding:var(
15
+ --spectrum-alias-infieldbutton-padding-s,0
16
+ )}:host([size=s]){--spectrum-PickerButton-Fill-size:var(
17
+ --spectrum-alias-infieldbutton-full-height-s,var(--spectrum-global-dimension-size-300)
18
+ )}:host([size=s]) .root .spectrum-PickerButton-fill{gap:var(--spectrum-global-dimension-size-75);height:var(
19
+ --spectrum-alias-infieldbutton-full-height-s,var(--spectrum-global-dimension-size-300)
20
+ );width:var(
21
+ --spectrum-alias-infieldbutton-full-height-s,var(--spectrum-global-dimension-size-300)
22
+ )}:host([size=s]) .root .spectrum-PickerButton-label{font-size:var(
23
+ --spectrum-global-dimension-font-size-75
24
+ );padding-bottom:var(
25
+ --spectrum-alias-pickerbutton-label-padding-y-s,var(--spectrum-global-dimension-size-50)
26
+ );padding-top:var(
27
+ --spectrum-alias-pickerbutton-label-padding-y-s,var(--spectrum-global-dimension-size-50)
28
+ )}:host([size=s]) .root .spectrum-PickerButton-icon{gap:var(
29
+ --spectrum-global-dimension-size-85
30
+ );height:var(--spectrum-global-dimension-size-200);margin-bottom:var(
31
+ --spectrum-alias-infieldbutton-icon-margin-y-s,var(--spectrum-global-dimension-size-50)
32
+ );margin-top:var(
33
+ --spectrum-alias-infieldbutton-icon-margin-y-s,var(--spectrum-global-dimension-size-50)
34
+ );width:var(--spectrum-global-dimension-size-200)}:host([size=s]) .root .spectrum-PickerButton-UIIcon{height:var(
35
+ --spectrum-alias-ui-icon-chevron-size-100
36
+ );margin-bottom:var(
37
+ --spectrum-alias-pickerbutton-icon-margin-y-s,var(--spectrum-global-dimension-size-85)
38
+ );margin-top:var(
39
+ --spectrum-alias-pickerbutton-icon-margin-y-s,var(--spectrum-global-dimension-size-85)
40
+ );width:var(--spectrum-alias-ui-icon-chevron-size-100)}:host([size=m]){--spectrum-PickerButton-label-padding-y:var(
41
+ --spectrum-alias-pickerbutton-label-padding-y-m,var(--spectrum-global-dimension-size-75)
42
+ );--spectrum-PickerButton-icon-margin-y:var(
43
+ --spectrum-alias-pickerbutton-icon-margin-y-m,var(--spectrum-global-dimension-size-125)
44
+ );--spectrum-PickerButton-icononly-padding-x:var(
45
+ --spectrum-alias-pickerbutton-icononly-padding-x-m,var(--spectrum-global-dimension-size-125)
46
+ )}:host([size=m]) .root{padding:var(
47
+ --spectrum-alias-infieldbutton-padding-m,0
48
+ )}:host([size=m]){--spectrum-PickerButton-Fill-size:var(
49
+ --spectrum-alias-infieldbutton-full-height-m,var(--spectrum-global-dimension-size-400)
50
+ )}:host([size=m]) .root .spectrum-PickerButton-fill{gap:var(--spectrum-global-dimension-size-85);height:var(
51
+ --spectrum-alias-infieldbutton-full-height-m,var(--spectrum-global-dimension-size-400)
52
+ );width:var(
53
+ --spectrum-alias-infieldbutton-full-height-m,var(--spectrum-global-dimension-size-400)
54
+ )}:host([size=m]) .root .spectrum-PickerButton-label{font-size:var(
55
+ --spectrum-global-dimension-font-size-100
56
+ );padding-bottom:var(
57
+ --spectrum-alias-pickerbutton-label-padding-y-m,var(--spectrum-global-dimension-size-75)
58
+ );padding-top:var(
59
+ --spectrum-alias-pickerbutton-label-padding-y-m,var(--spectrum-global-dimension-size-75)
60
+ )}:host([size=m]) .root .spectrum-PickerButton-icon{gap:var(
61
+ --spectrum-global-dimension-size-100
62
+ );height:var(--spectrum-global-dimension-size-225);margin-bottom:var(
63
+ --spectrum-alias-infieldbutton-icon-margin-y-m,var(--spectrum-global-dimension-size-85)
64
+ );margin-top:var(
65
+ --spectrum-alias-infieldbutton-icon-margin-y-m,var(--spectrum-global-dimension-size-85)
66
+ );width:var(--spectrum-global-dimension-size-225)}:host([size=m]) .root .spectrum-PickerButton-UIIcon{height:var(
67
+ --spectrum-alias-ui-icon-chevron-size-200
68
+ );margin-bottom:var(
69
+ --spectrum-alias-pickerbutton-icon-margin-y-m,var(--spectrum-global-dimension-size-125)
70
+ );margin-top:var(
71
+ --spectrum-alias-pickerbutton-icon-margin-y-m,var(--spectrum-global-dimension-size-125)
72
+ );width:var(--spectrum-alias-ui-icon-chevron-size-200)}:host([size=l]){--spectrum-PickerButton-label-padding-y:var(
73
+ --spectrum-alias-pickerbutton-label-padding-y-l,var(--spectrum-global-dimension-size-115)
74
+ );--spectrum-PickerButton-icon-margin-y:var(
75
+ --spectrum-alias-pickerbutton-icon-margin-y-l,var(--spectrum-global-dimension-size-160)
76
+ );--spectrum-PickerButton-icononly-padding-x:var(
77
+ --spectrum-alias-pickerbutton-icononly-padding-x-l,var(--spectrum-global-dimension-size-160)
78
+ )}:host([size=l]) .root{padding:var(
79
+ --spectrum-alias-infieldbutton-padding-l,0
80
+ )}:host([size=l]){--spectrum-PickerButton-Fill-size:var(
81
+ --spectrum-alias-infieldbutton-full-height-l,var(--spectrum-global-dimension-size-500)
82
+ )}:host([size=l]) .root .spectrum-PickerButton-fill{gap:var(--spectrum-global-dimension-size-65);height:var(
83
+ --spectrum-alias-infieldbutton-full-height-l,var(--spectrum-global-dimension-size-500)
84
+ );width:var(
85
+ --spectrum-alias-infieldbutton-full-height-l,var(--spectrum-global-dimension-size-500)
86
+ )}:host([size=l]) .root .spectrum-PickerButton-label{font-size:var(
87
+ --spectrum-global-dimension-font-size-200
88
+ );padding-bottom:var(
89
+ --spectrum-alias-pickerbutton-label-padding-y-l,var(--spectrum-global-dimension-size-115)
90
+ );padding-top:var(
91
+ --spectrum-alias-pickerbutton-label-padding-y-l,var(--spectrum-global-dimension-size-115)
92
+ )}:host([size=l]) .root .spectrum-PickerButton-icon{gap:var(
93
+ --spectrum-global-dimension-size-115
94
+ );margin-bottom:var(
95
+ --spectrum-alias-infieldbutton-icon-margin-y-l,var(--spectrum-global-dimension-size-125)
96
+ );margin-top:var(
97
+ --spectrum-alias-infieldbutton-icon-margin-y-l,var(--spectrum-global-dimension-size-125)
98
+ )}:host([size=l]) .root .spectrum-PickerButton-UIIcon{height:var(
99
+ --spectrum-alias-ui-icon-chevron-size-300
100
+ );margin-bottom:var(
101
+ --spectrum-alias-pickerbutton-icon-margin-y-l,var(--spectrum-global-dimension-size-160)
102
+ );margin-top:var(
103
+ --spectrum-alias-pickerbutton-icon-margin-y-l,var(--spectrum-global-dimension-size-160)
104
+ );width:var(--spectrum-alias-ui-icon-chevron-size-300)}:host([size=xl]){--spectrum-PickerButton-label-padding-y:var(
105
+ --spectrum-alias-pickerbutton-label-padding-y-xl,var(--spectrum-global-dimension-size-150)
106
+ );--spectrum-PickerButton-icon-margin-y:var(
107
+ --spectrum-alias-pickerbutton-icon-margin-y-xl,var(--spectrum-global-dimension-size-200)
108
+ );--spectrum-PickerButton-icononly-padding-x:var(
109
+ --spectrum-alias-pickerbutton-icononly-padding-x-xl,var(--spectrum-global-dimension-size-200)
110
+ )}:host([size=xl]) .root{padding:var(
111
+ --spectrum-alias-infieldbutton-padding-xl,0
112
+ )}:host([size=xl]){--spectrum-PickerButton-Fill-size:var(
113
+ --spectrum-alias-infieldbutton-full-height-xl,var(--spectrum-global-dimension-size-600)
114
+ )}:host([size=xl]) .root .spectrum-PickerButton-fill{gap:var(--spectrum-global-dimension-size-85);height:var(
115
+ --spectrum-alias-infieldbutton-full-height-xl,var(--spectrum-global-dimension-size-600)
116
+ );width:var(
117
+ --spectrum-alias-infieldbutton-full-height-xl,var(--spectrum-global-dimension-size-600)
118
+ )}:host([size=xl]) .root .spectrum-PickerButton-label{font-size:var(
119
+ --spectrum-global-dimension-font-size-300
120
+ );padding-bottom:var(
121
+ --spectrum-alias-pickerbutton-label-padding-y-xl,var(--spectrum-global-dimension-size-150)
122
+ );padding-top:var(
123
+ --spectrum-alias-pickerbutton-label-padding-y-xl,var(--spectrum-global-dimension-size-150)
124
+ )}:host([size=xl]) .root .spectrum-PickerButton-icon{gap:var(
125
+ --spectrum-global-dimension-size-125
126
+ );height:var(--spectrum-global-dimension-size-275);margin-bottom:var(
127
+ --spectrum-alias-infieldbutton-icon-margin-y-xl,var(--spectrum-global-dimension-size-160)
128
+ );margin-top:var(
129
+ --spectrum-alias-infieldbutton-icon-margin-y-xl,var(--spectrum-global-dimension-size-160)
130
+ );width:var(--spectrum-global-dimension-size-275)}:host([size=xl]) .root .spectrum-PickerButton-UIIcon{height:var(
131
+ --spectrum-alias-ui-icon-chevron-size-400
132
+ );margin-bottom:var(
133
+ --spectrum-alias-pickerbutton-icon-margin-y-xl,var(--spectrum-global-dimension-size-200)
134
+ );margin-top:var(
135
+ --spectrum-alias-pickerbutton-icon-margin-y-xl,var(--spectrum-global-dimension-size-200)
136
+ );width:var(--spectrum-alias-ui-icon-chevron-size-400)}:host([dir=ltr][position=right]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
137
+ --spectrum-alias-infieldbutton-border-radius-sided,0
138
+ )}:host([dir=rtl][position=right]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
139
+ --spectrum-alias-infieldbutton-border-radius-sided,0
140
+ )}:host([dir=ltr][position=right]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
141
+ --spectrum-alias-infieldbutton-border-radius-sided,0
142
+ )}:host([dir=rtl][position=right]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
143
+ --spectrum-alias-infieldbutton-border-radius-sided,0
144
+ )}:host([dir=ltr][position=right][rounded]) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
145
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
146
+ )}:host([dir=rtl][position=right][rounded]) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
147
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
148
+ )}:host([dir=ltr][position=right][rounded]) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
149
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
150
+ )}:host([dir=rtl][position=right][rounded]) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
151
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
152
+ )}:host([dir=ltr][position=left]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
153
+ --spectrum-alias-infieldbutton-border-radius-sided,0
154
+ )}:host([dir=rtl][position=left]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
155
+ --spectrum-alias-infieldbutton-border-radius-sided,0
156
+ )}:host([dir=ltr][position=left]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
157
+ --spectrum-alias-infieldbutton-border-radius-sided,0
158
+ )}:host([dir=rtl][position=left]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
159
+ --spectrum-alias-infieldbutton-border-radius-sided,0
160
+ )}:host([dir=ltr][position=left][rounded]) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
161
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
162
+ )}:host([dir=rtl][position=left][rounded]) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
163
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
164
+ )}:host([dir=ltr][position=left][rounded]) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
165
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
166
+ )}:host([dir=rtl][position=left][rounded]) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
167
+ --spectrum-alias-pickerbutton-border-radius-rounded-sided,0
168
+ )}:host([dir=ltr]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
169
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
170
+ )}:host([dir=rtl]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
171
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
172
+ )}:host([dir=ltr]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
173
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
174
+ )}:host([dir=rtl]:not([rounded])) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
175
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
176
+ )}:host([dir=ltr]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
177
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
178
+ )}:host([dir=rtl]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
179
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
180
+ )}:host([dir=ltr]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
181
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
182
+ )}:host([dir=rtl]:not([rounded])) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
183
+ --spectrum-alias-infieldbutton-border-radius,var(--spectrum-global-dimension-size-50)
184
+ )}:host([dir=ltr][rounded]) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
185
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
186
+ )}:host([dir=rtl][rounded]) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
187
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
188
+ )}:host([dir=ltr][rounded]) .root .spectrum-PickerButton-fill{border-bottom-left-radius:var(
189
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
190
+ )}:host([dir=rtl][rounded]) .root .spectrum-PickerButton-fill{border-bottom-right-radius:var(
191
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
192
+ )}:host([dir=ltr][rounded]) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
193
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
194
+ )}:host([dir=rtl][rounded]) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
195
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
196
+ )}:host([dir=ltr][rounded]) .root .spectrum-PickerButton-fill{border-top-left-radius:var(
197
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
198
+ )}:host([dir=rtl][rounded]) .root .spectrum-PickerButton-fill{border-top-right-radius:var(
199
+ --spectrum-alias-pickerbutton-border-radius-rounded,var(--spectrum-global-dimension-size-50)
200
+ )}:host([dir=ltr]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
201
+ --spectrum-PickerButton-icononly-padding-x
202
+ )}:host([dir=rtl]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
203
+ --spectrum-PickerButton-icononly-padding-x
204
+ )}:host([dir=ltr]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
205
+ --spectrum-PickerButton-icononly-padding-x
206
+ )}:host([dir=rtl]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
207
+ --spectrum-PickerButton-icononly-padding-x
208
+ )}.root.uiicononly .spectrum-PickerButton-fill{width:var(
209
+ --spectrum-PickerButton-Fill-size
210
+ )}:host([dir=ltr][size=s]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
211
+ --spectrum-alias-pickerbutton-icononly-padding-x-s,var(--spectrum-global-dimension-size-85)
212
+ )}:host([dir=rtl][size=s]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
213
+ --spectrum-alias-pickerbutton-icononly-padding-x-s,var(--spectrum-global-dimension-size-85)
214
+ )}:host([dir=ltr][size=s]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
215
+ --spectrum-alias-pickerbutton-icononly-padding-x-s,var(--spectrum-global-dimension-size-85)
216
+ )}:host([dir=rtl][size=s]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
217
+ --spectrum-alias-pickerbutton-icononly-padding-x-s,var(--spectrum-global-dimension-size-85)
218
+ )}:host([size=s]) .root.uiicononly .spectrum-PickerButton-fill{width:var(
219
+ --spectrum-alias-infieldbutton-full-height-s,var(--spectrum-global-dimension-size-300)
220
+ )}:host([dir=ltr][size=m]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
221
+ --spectrum-alias-pickerbutton-icononly-padding-x-m,var(--spectrum-global-dimension-size-125)
222
+ )}:host([dir=rtl][size=m]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
223
+ --spectrum-alias-pickerbutton-icononly-padding-x-m,var(--spectrum-global-dimension-size-125)
224
+ )}:host([dir=ltr][size=m]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
225
+ --spectrum-alias-pickerbutton-icononly-padding-x-m,var(--spectrum-global-dimension-size-125)
226
+ )}:host([dir=rtl][size=m]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
227
+ --spectrum-alias-pickerbutton-icononly-padding-x-m,var(--spectrum-global-dimension-size-125)
228
+ )}:host([size=m]) .root.uiicononly .spectrum-PickerButton-fill{width:var(
229
+ --spectrum-alias-infieldbutton-full-height-m,var(--spectrum-global-dimension-size-400)
230
+ )}:host([dir=ltr][size=l]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
231
+ --spectrum-alias-pickerbutton-icononly-padding-x-l,var(--spectrum-global-dimension-size-160)
232
+ )}:host([dir=rtl][size=l]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
233
+ --spectrum-alias-pickerbutton-icononly-padding-x-l,var(--spectrum-global-dimension-size-160)
234
+ )}:host([dir=ltr][size=l]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
235
+ --spectrum-alias-pickerbutton-icononly-padding-x-l,var(--spectrum-global-dimension-size-160)
236
+ )}:host([dir=rtl][size=l]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
237
+ --spectrum-alias-pickerbutton-icononly-padding-x-l,var(--spectrum-global-dimension-size-160)
238
+ )}:host([size=l]) .root.uiicononly .spectrum-PickerButton-fill{width:var(
239
+ --spectrum-alias-infieldbutton-full-height-l,var(--spectrum-global-dimension-size-500)
240
+ )}:host([dir=ltr][size=xl]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
241
+ --spectrum-alias-pickerbutton-icononly-padding-x-xl,var(--spectrum-global-dimension-size-200)
242
+ )}:host([dir=rtl][size=xl]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
243
+ --spectrum-alias-pickerbutton-icononly-padding-x-xl,var(--spectrum-global-dimension-size-200)
244
+ )}:host([dir=ltr][size=xl]) .root.uiicononly .spectrum-PickerButton-fill{padding-left:var(
245
+ --spectrum-alias-pickerbutton-icononly-padding-x-xl,var(--spectrum-global-dimension-size-200)
246
+ )}:host([dir=rtl][size=xl]) .root.uiicononly .spectrum-PickerButton-fill{padding-right:var(
247
+ --spectrum-alias-pickerbutton-icononly-padding-x-xl,var(--spectrum-global-dimension-size-200)
248
+ )}:host([size=xl]) .root.uiicononly .spectrum-PickerButton-fill{width:var(
249
+ --spectrum-alias-infieldbutton-full-height-xl,var(--spectrum-global-dimension-size-600)
250
+ )}.root.uiicononly .spectrum-PickerButton-icon,.root.uiicononly .spectrum-PickerButton-label{display:none}.root.uiicononly .spectrum-PickerButton-UIIcon{display:initial}.root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{width:var(
251
+ --spectrum-PickerButton-Fill-size
252
+ )}:host([dir=ltr][size=s]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
253
+ --spectrum-global-dimension-size-50
254
+ )}:host([dir=rtl][size=s]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
255
+ --spectrum-global-dimension-size-50
256
+ )}:host([dir=ltr][size=s]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
257
+ --spectrum-global-dimension-size-50
258
+ )}:host([dir=rtl][size=s]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
259
+ --spectrum-global-dimension-size-50
260
+ )}:host([size=s]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{width:var(
261
+ --spectrum-alias-infieldbutton-full-height-s,var(--spectrum-global-dimension-size-300)
262
+ )}:host([dir=ltr][size=m]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
263
+ --spectrum-global-dimension-size-85
264
+ )}:host([dir=rtl][size=m]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
265
+ --spectrum-global-dimension-size-85
266
+ )}:host([dir=ltr][size=m]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
267
+ --spectrum-global-dimension-size-85
268
+ )}:host([dir=rtl][size=m]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
269
+ --spectrum-global-dimension-size-85
270
+ )}:host([size=m]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{width:var(
271
+ --spectrum-alias-infieldbutton-full-height-m,var(--spectrum-global-dimension-size-400)
272
+ )}:host([dir=ltr][size=l]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
273
+ --spectrum-global-dimension-size-125
274
+ )}:host([dir=rtl][size=l]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
275
+ --spectrum-global-dimension-size-125
276
+ )}:host([dir=ltr][size=l]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
277
+ --spectrum-global-dimension-size-125
278
+ )}:host([dir=rtl][size=l]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
279
+ --spectrum-global-dimension-size-125
280
+ )}:host([size=l]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{width:var(
281
+ --spectrum-alias-infieldbutton-full-height-l,var(--spectrum-global-dimension-size-500)
282
+ )}:host([dir=ltr][size=xl]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
283
+ --spectrum-global-dimension-size-160
284
+ )}:host([dir=rtl][size=xl]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
285
+ --spectrum-global-dimension-size-160
286
+ )}:host([dir=ltr][size=xl]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-left:var(
287
+ --spectrum-global-dimension-size-160
288
+ )}:host([dir=rtl][size=xl]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{padding-right:var(
289
+ --spectrum-global-dimension-size-160
290
+ )}:host([size=xl]) .root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill{width:var(
291
+ --spectrum-alias-infieldbutton-full-height-xl,var(--spectrum-global-dimension-size-600)
292
+ )}.root.spectrum-PickerButton--icononly .spectrum-PickerButton-label{display:none}.root.spectrum-PickerButton--icononly .spectrum-PickerButton-icon{display:initial}.root.spectrum-PickerButton--icononly .spectrum-PickerButton-UIIcon{display:none}:host([size]) .root.textuiicon .spectrum-PickerButton-fill{width:auto}:host([dir=ltr][size=s]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
293
+ --spectrum-global-dimension-size-100
294
+ )}:host([dir=rtl][size=s]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
295
+ --spectrum-global-dimension-size-100
296
+ )}:host([dir=ltr][size=s]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
297
+ --spectrum-global-dimension-size-115
298
+ )}:host([dir=rtl][size=s]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
299
+ --spectrum-global-dimension-size-115
300
+ )}:host([dir=ltr][size=m]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
301
+ --spectrum-global-dimension-size-125
302
+ )}:host([dir=rtl][size=m]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
303
+ --spectrum-global-dimension-size-125
304
+ )}:host([dir=ltr][size=m]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
305
+ --spectrum-global-dimension-size-160
306
+ )}:host([dir=rtl][size=m]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
307
+ --spectrum-global-dimension-size-160
308
+ )}:host([dir=ltr][size=l]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
309
+ --spectrum-global-dimension-size-150
310
+ )}:host([dir=rtl][size=l]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
311
+ --spectrum-global-dimension-size-150
312
+ )}:host([dir=ltr][size=l]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
313
+ --spectrum-global-dimension-size-185
314
+ )}:host([dir=rtl][size=l]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
315
+ --spectrum-global-dimension-size-185
316
+ )}:host([dir=ltr][size=xl]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
317
+ --spectrum-global-dimension-size-200
318
+ )}:host([dir=rtl][size=xl]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
319
+ --spectrum-global-dimension-size-200
320
+ )}:host([dir=ltr][size=xl]) .root.textuiicon .spectrum-PickerButton-fill{padding-left:var(
321
+ --spectrum-global-dimension-size-225
322
+ )}:host([dir=rtl][size=xl]) .root.textuiicon .spectrum-PickerButton-fill{padding-right:var(
323
+ --spectrum-global-dimension-size-225
324
+ )}.root.textuiicon .spectrum-PickerButton-label{display:initial}.root.textuiicon .spectrum-PickerButton-icon{display:none}.root.textuiicon .spectrum-PickerButton-UIIcon{display:initial}:host([quiet][disabled]:not([open])) .root .spectrum-PickerButton-fill{background-color:var(
325
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled,transparent
326
+ )}:host([quiet][disabled]) .root .spectrum-PickerButton-fill{border-color:var(
327
+ --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled,transparent
328
+ )}:host([quiet]:not([disabled]):not([open])) .root .spectrum-PickerButton-fill{background-color:var(
329
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default,transparent
330
+ )}:host([quiet]:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-fill{background-color:var(
331
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover,transparent
332
+ )}:host([quiet]:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-fill{background-color:var(
333
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down,transparent
334
+ )}:host([quiet][invalid]:not([disabled])) .root .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root:hover .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])[active]) .root .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root:focus .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root.is-focused .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root.focus-visible .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root:focus-visible .spectrum-PickerButton-fill{border-color:transparent}:host([quiet]:not([invalid]):not([disabled])) .root.is-keyboardFocused .spectrum-PickerButton-fill{border-color:transparent}:host([disabled]:not([open])) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{background-color:var(
335
+ --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled,transparent
336
+ )}:host([disabled]) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{border-color:var(
337
+ --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled,transparent
338
+ )}:host(:not([disabled]):not([open])) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{background-color:var(
339
+ --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default,var(
340
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default
341
+ )
342
+ )}:host(:not([disabled]):not([open])) .root.spectrum-PickerButton--medium:hover .spectrum-PickerButton-fill{background-color:var(
343
+ --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover,var(
344
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover
345
+ )
346
+ )}:host(:not([disabled]):not([open])[active]) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{background-color:var(
347
+ --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down,var(
348
+ --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down
349
+ )
350
+ )}:host([invalid]:not([disabled])) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium:hover .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])[active]) .root.spectrum-PickerButton--medium .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium:focus .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium.is-focused .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium.focus-visible .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium:focus-visible .spectrum-PickerButton-fill{border-color:transparent}:host(:not([invalid]):not([disabled])) .root.spectrum-PickerButton--medium.is-keyboardFocused .spectrum-PickerButton-fill{border-color:transparent}:host([disabled]:not([open])) .root .spectrum-PickerButton-fill{background-color:var(
351
+ --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)
352
+ )}:host([disabled]) .root .spectrum-PickerButton-fill{border-color:var(
353
+ --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled,var(--spectrum-alias-component-background-color-disabled)
354
+ )}:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-fill{background-color:var(
355
+ --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default,var(--spectrum-alias-component-background-color-default)
356
+ )}:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-fill{background-color:var(
357
+ --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover,var(--spectrum-alias-component-background-color-hover)
358
+ )}:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-fill{background-color:var(
359
+ --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down,var(--spectrum-alias-component-background-color-down)
360
+ )}:host([invalid]:not([disabled])) .root .spectrum-PickerButton-fill{border-color:var(
361
+ --spectrum-alias-input-border-color-invalid-default,var(--spectrum-semantic-negative-color-default)
362
+ )}:host([invalid]:not([disabled])) .root:hover .spectrum-PickerButton-fill{border-color:var(
363
+ --spectrum-alias-input-border-color-invalid-hover,var(--spectrum-semantic-negative-color-hover)
364
+ )}:host([invalid]:not([disabled])[active]) .root .spectrum-PickerButton-fill{border-color:var(
365
+ --spectrum-alias-input-border-color-invalid-down,var(--spectrum-semantic-negative-color-down)
366
+ )}:host([invalid]:not([disabled])) .root:focus .spectrum-PickerButton-fill{border-color:var(
367
+ --spectrum-alias-input-border-color-invalid-mouse-focus,var(--spectrum-semantic-negative-color-hover)
368
+ )}:host([invalid]:not([disabled])) .root.is-focused .spectrum-PickerButton-fill{border-color:var(
369
+ --spectrum-alias-input-border-color-invalid-mouse-focus,var(--spectrum-semantic-negative-color-hover)
370
+ )}:host([invalid]:not([disabled])) .root.focus-visible .spectrum-PickerButton-fill{border-color:var(
371
+ --spectrum-alias-input-border-color-invalid-key-focus,var(--spectrum-alias-border-color-key-focus)
372
+ )}:host([invalid]:not([disabled])) .root:focus-visible .spectrum-PickerButton-fill{border-color:var(
373
+ --spectrum-alias-input-border-color-invalid-key-focus,var(--spectrum-alias-border-color-key-focus)
374
+ )}:host([invalid]:not([disabled])) .root.is-keyboardFocused .spectrum-PickerButton-fill{border-color:var(
375
+ --spectrum-alias-input-border-color-invalid-key-focus,var(--spectrum-alias-border-color-key-focus)
376
+ )}:host(:not([invalid]):not([disabled])) .root .spectrum-PickerButton-fill{border-color:var(
377
+ --spectrum-alias-infieldbutton-fill-border-color-default,var(--spectrum-alias-input-border-color-default)
378
+ )}:host(:not([invalid]):not([disabled])) .root:hover .spectrum-PickerButton-fill{border-color:var(
379
+ --spectrum-alias-infieldbutton-fill-border-color-hover,var(--spectrum-alias-input-border-color-hover)
380
+ )}:host(:not([invalid]):not([disabled])[active]) .root .spectrum-PickerButton-fill{border-color:var(
381
+ --spectrum-alias-infieldbutton-fill-border-color-down,var(--spectrum-alias-input-border-color-down)
382
+ )}:host(:not([invalid]):not([disabled])) .root:focus .spectrum-PickerButton-fill{border-color:var(
383
+ --spectrum-alias-infieldbutton-fill-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
384
+ )}:host(:not([invalid]):not([disabled])) .root.is-focused .spectrum-PickerButton-fill{border-color:var(
385
+ --spectrum-alias-infieldbutton-fill-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
386
+ )}:host(:not([invalid]):not([disabled])) .root.focus-visible .spectrum-PickerButton-fill{border-color:var(
387
+ --spectrum-alias-infieldbutton-fill-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
388
+ )}:host(:not([invalid]):not([disabled])) .root:focus-visible .spectrum-PickerButton-fill{border-color:var(
389
+ --spectrum-alias-infieldbutton-fill-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
390
+ )}:host(:not([invalid]):not([disabled])) .root.is-keyboardFocused .spectrum-PickerButton-fill{border-color:var(
391
+ --spectrum-alias-infieldbutton-fill-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
392
+ )}:host([open]) .root .spectrum-PickerButton-fill{background-color:var(
393
+ --spectrum-alias-component-background-color-down,var(--spectrum-global-color-gray-200)
394
+ )}:host([open]) .root .spectrum-PickerButton-label{color:var(
395
+ --spectrum-alias-component-text-color-down,var(--spectrum-global-color-gray-900)
396
+ )}:host([open]) .root .spectrum-PickerButton-icon{color:var(
397
+ --spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
398
+ )}:host([open]) .root .spectrum-PickerButton-UIIcon{color:var(
399
+ --spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
400
+ )}:host(:not([open])) .root .spectrum-PickerButton-label{color:var(
401
+ --spectrum-alias-component-text-color,var(--spectrum-alias-component-text-color-default)
402
+ )}:host(:not([open])) .root .spectrum-PickerButton-icon{color:var(
403
+ --spectrum-alias-component-icon-color,var(--spectrum-alias-component-icon-color-default)
404
+ )}:host(:not([open])) .root .spectrum-PickerButton-UIIcon{color:var(
405
+ --spectrum-alias-component-icon-color,var(--spectrum-alias-component-icon-color-default)
406
+ )}:host([disabled]:not([open])) .root .spectrum-PickerButton-label{color:var(
407
+ --spectrum-alias-component-text-color-disabled,var(--spectrum-global-color-gray-500)
408
+ )}:host([disabled]:not([open])) .root .spectrum-PickerButton-icon{color:var(
409
+ --spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
410
+ )}:host([disabled]:not([open])) .root .spectrum-PickerButton-UIIcon{color:var(
411
+ --spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
412
+ )}:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-label{color:var(
413
+ --spectrum-alias-component-text-color-default,var(--spectrum-global-color-gray-800)
414
+ )}:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-label{color:var(
415
+ --spectrum-alias-component-text-color-hover,var(--spectrum-global-color-gray-900)
416
+ )}:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-icon{color:var(
417
+ --spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
418
+ )}:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-UIIcon{color:var(
419
+ --spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
420
+ )}:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-label{color:var(
421
+ --spectrum-alias-component-text-color-down,var(--spectrum-global-color-gray-900)
422
+ )}:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-icon{color:var(
423
+ --spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
424
+ )}:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-UIIcon{color:var(
425
+ --spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
426
+ )}:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-icon{color:var(
427
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
428
+ )}:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-UIIcon{color:var(
429
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
430
+ )}:host(:not([disabled]):not([open])) .root.spectrum-PickerButton--error .spectrum-PickerButton-label{color:var(
431
+ --spectrum-alias-component-text-color-error-default,var(--spectrum-semantic-negative-text-color-small)
432
+ )}:host(:not([disabled]):not([open])) .root.spectrum-PickerButton--error:hover .spectrum-PickerButton-label{color:var(
433
+ --spectrum-alias-component-text-color-error-hover,var(--spectrum-semantic-negative-text-color-small-hover)
434
+ )}:host(:not([disabled]):not([open])[active]) .root.spectrum-PickerButton--error .spectrum-PickerButton-label{color:var(
435
+ --spectrum-alias-component-text-color-error-down,var(--spectrum-semantic-negative-text-color-small-down)
436
+ )}.spectrum-PickerButton-fill{border-style:solid;border-width:var(
437
+ --spectrum-alias-infieldbutton-border-size,var(--spectrum-global-dimension-static-size-10)
438
+ );flex-direction:row}.spectrum-PickerButton-label{font-family:var(--spectrum-global-font-body-text-font-family);font-style:var(--spectrum-global-font-style-regular,normal);font-weight:var(--spectrum-global-font-body-text-font-weight);letter-spacing:var(--spectrum-global-font-letter-spacing-none,0);line-height:var(--spectrum-global-font-component-text-line-height);padding-bottom:var(--spectrum-PickerButton-label-padding-y);padding-top:var(--spectrum-PickerButton-label-padding-y);text-transform:none}.spectrum-PickerButton-UIIcon{margin-bottom:var(
439
+ --spectrum-PickerButton-icon-margin-y
440
+ );margin-top:var(--spectrum-PickerButton-icon-margin-y);transform:rotate(90deg)}:host{--spectrum-infieldbutton-border-color-override:initial}.root{align-items:center;background-color:transparent;border-style:none;display:flex;justify-content:center}.spectrum-PickerButton-label{flex:1 1 auto;overflow:hidden;white-space:nowrap}.spectrum-PickerButton-fill{align-items:center;border-color:var(--spectrum-infieldbutton-border-color-override);box-sizing:border-box;display:flex;justify-content:center;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.uiicononly .spectrum-PickerButton-fill{padding:0!important}.spectrum-PickerButton-UIIcon{margin:0!important}.spectrum-PickerButton-icon{flex-shrink:0;margin:0!important}:host{display:inline-flex}.root{display:contents}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
441
+ --spectrum-alias-workflow-icon-size-s
442
+ );--spectrum-icon-tshirt-size-width:var(
443
+ --spectrum-alias-workflow-icon-size-s
444
+ );--spectrum-ui-icon-tshirt-size-height:var(
445
+ --spectrum-alias-ui-icon-cornertriangle-size-75
446
+ );--spectrum-ui-icon-tshirt-size-width:var(
447
+ --spectrum-alias-ui-icon-cornertriangle-size-75
448
+ )}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
449
+ --spectrum-alias-workflow-icon-size-m
450
+ );--spectrum-icon-tshirt-size-width:var(
451
+ --spectrum-alias-workflow-icon-size-m
452
+ );--spectrum-ui-icon-tshirt-size-height:var(
453
+ --spectrum-alias-ui-icon-cornertriangle-size-100
454
+ );--spectrum-ui-icon-tshirt-size-width:var(
455
+ --spectrum-alias-ui-icon-cornertriangle-size-100
456
+ )}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
457
+ --spectrum-alias-workflow-icon-size-l
458
+ );--spectrum-icon-tshirt-size-width:var(
459
+ --spectrum-alias-workflow-icon-size-l
460
+ );--spectrum-ui-icon-tshirt-size-height:var(
461
+ --spectrum-alias-ui-icon-cornertriangle-size-200
462
+ );--spectrum-ui-icon-tshirt-size-width:var(
463
+ --spectrum-alias-ui-icon-cornertriangle-size-200
464
+ )}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
465
+ --spectrum-alias-workflow-icon-size-xl
466
+ );--spectrum-icon-tshirt-size-width:var(
467
+ --spectrum-alias-workflow-icon-size-xl
468
+ );--spectrum-ui-icon-tshirt-size-height:var(
469
+ --spectrum-alias-ui-icon-cornertriangle-size-300
470
+ );--spectrum-ui-icon-tshirt-size-width:var(
471
+ --spectrum-alias-ui-icon-cornertriangle-size-300
472
+ )}
473
+ `;
474
+ export default styles;
475
+ //# sourceMappingURL=picker-button.css.dev.js.map