Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/picker

Package Overview
Dependencies
Maintainers
5
Versions
283
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/picker - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

13

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log

# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/picker@0.2.0...@spectrum-web-components/picker@0.3.0) (2021-03-04)
### Bug Fixes
- **menu:** ensure active descendant is in view when activated ([6edc351](https://github.com/adobe/spectrum-web-components/commit/6edc3518fd305cbd35b74f013546bb32aef7616b))
- **picker:** add "quick select" action to right/left arrow keys ([21895ee](https://github.com/adobe/spectrum-web-components/commit/21895eed8d194b0a570cbb2bafeaa06c9511bf27))
- **picker:** ensure that width is customizable from the outside ([702b052](https://github.com/adobe/spectrum-web-components/commit/702b052f9ea1686d2a964648d4bb1d365178160f))
- support a wider number of sizes ([ee44978](https://github.com/adobe/spectrum-web-components/commit/ee4497830da0d3bc63d4414ad5548291a39588c7))
### Features
- use latest exports specification ([a7ecf4b](https://github.com/adobe/spectrum-web-components/commit/a7ecf4b6da7996f36a8a89f62cc2384709497008))
# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/picker@0.1.0...@spectrum-web-components/picker@0.2.0) (2021-02-11)

@@ -8,0 +21,0 @@

13

custom-elements.json

@@ -43,7 +43,2 @@ {

{
"name": "selectedItemText",
"type": "string",
"default": "\"\""
},
{
"name": "size",

@@ -130,6 +125,4 @@ "type": "ElementSize"

{
"name": "selectedItemText",
"attribute": "selectedItemText",
"type": "string",
"default": "\"\""
"name": "selectedItem",
"type": "MenuItem | undefined"
},

@@ -139,3 +132,3 @@ {

"type": "(event: KeyboardEvent) => void",
"default": "\"(event: KeyboardEvent): void => {\\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\\n return;\\n }\\n event.preventDefault();\\n /* c8 ignore next 3 */\\n if (!this.optionsMenu) {\\n return;\\n }\\n this.open = true;\\n }\""
"default": "\"(event: KeyboardEvent): void => {\\n const { code } = event;\\n if (!code.startsWith('Arrow')) {\\n return;\\n }\\n event.preventDefault();\\n /* c8 ignore next 3 */\\n if (!this.optionsMenu) {\\n return;\\n }\\n if (code === 'ArrowUp' || code === 'ArrowDown') {\\n this.open = true;\\n return;\\n }\\n const selectedIndex = this.selectedItem\\n ? this.optionsMenu.menuItems.indexOf(this.selectedItem)\\n : -1;\\n // use a positive offset to find the first non-disabled item when no selection is available.\\n const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\\n let nextIndex = selectedIndex + nextOffset;\\n while (\\n this.optionsMenu.menuItems[nextIndex] &&\\n this.optionsMenu.menuItems[nextIndex].disabled\\n ) {\\n nextIndex += nextOffset;\\n }\\n nextIndex = Math.max(\\n Math.min(nextIndex, this.optionsMenu.menuItems.length),\\n 0\\n );\\n if (!this.value || nextIndex !== selectedIndex) {\\n this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);\\n }\\n }\""
},

@@ -142,0 +135,0 @@ {

@@ -21,3 +21,3 @@ {

],
"version": "0.2.0",
"version": "0.3.0",
"description": "",

@@ -30,3 +30,3 @@ "main": "src/index.js",

".": "./src/index.js",
"./src/": "./src/",
"./src/*": "./src/*",
"./custom-elements.json": "./custom-elements.json",

@@ -62,14 +62,14 @@ "./package.json": "./package.json",

"dependencies": {
"@spectrum-web-components/base": "^0.3.3",
"@spectrum-web-components/button": "^0.12.0",
"@spectrum-web-components/icon": "^0.8.3",
"@spectrum-web-components/icons-ui": "^0.5.3",
"@spectrum-web-components/icons-workflow": "^0.5.3",
"@spectrum-web-components/menu": "^0.6.3",
"@spectrum-web-components/overlay": "^0.9.0",
"@spectrum-web-components/popover": "^0.8.0",
"@spectrum-web-components/shared": "^0.10.0",
"@spectrum-web-components/base": "^0.4.0",
"@spectrum-web-components/button": "^0.13.0",
"@spectrum-web-components/icon": "^0.9.0",
"@spectrum-web-components/icons-ui": "^0.6.0",
"@spectrum-web-components/icons-workflow": "^0.6.0",
"@spectrum-web-components/menu": "^0.7.0",
"@spectrum-web-components/overlay": "^0.10.0",
"@spectrum-web-components/popover": "^0.9.0",
"@spectrum-web-components/shared": "^0.11.0",
"tslib": "^2.0.0"
},
"gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0"
"gitHead": "aec24bb12d82dea387faa1e6d36dfc7620d230f7"
}

@@ -14,9 +14,9 @@ /*

const styles = css `
#button{--spectrum-button-line-height:1.3;position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}#button{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
:host{--spectrum-button-line-height:1.3}#button{position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}:host{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
`;
export default styles;
//# sourceMappingURL=picker.css.js.map

@@ -14,8 +14,8 @@ /*

const styles = css`
#button{--spectrum-button-line-height:1.3;position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}#button{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
:host{--spectrum-button-line-height:1.3}#button{position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}:host{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
var(--spectrum-alias-border-size-thin))))}#button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-picker-m-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-picker-m-border-color,var(--spectrum-alias-border-color))}#button:hover{color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-picker-m-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-hover,var(--spectrum-alias-border-color-hover))}#button:hover .picker{color:var(--spectrum-picker-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active,:host([open]) #button{background-color:var(--spectrum-picker-m-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-picker-m-border-color-down,var(--spectrum-alias-border-color-down))}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(--spectrum-picker-m-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}#button.focus-visible,#button.focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible,#button:focus-visible,:host([focused]) #button{background-color:var(--spectrum-picker-m-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-picker-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.placeholder,#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible.placeholder,#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-picker-m-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button .validationIcon{color:var(--spectrum-picker-m-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([invalid]) #button:hover{border-color:var(--spectrum-picker-m-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(--spectrum-picker-m-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([invalid]) #button.focus-visible,:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button:disabled,:host([disabled]) #button{background-color:var(--spectrum-picker-m-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button:disabled .picker,#button:disabled .spectrum-Picker-icon,#button:disabled .validationIcon,:host([disabled]) #button .picker,:host([disabled]) #button .spectrum-Picker-icon,:host([disabled]) #button .validationIcon{color:var(--spectrum-picker-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.picker{color:var(--spectrum-picker-m-icon-color,var(--spectrum-alias-icon-color))}#label.placeholder{color:var(--spectrum-picker-m-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label.placeholder:hover{color:var(--spectrum-picker-m-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-picker-m-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color))}:host([quiet]) #button{color:var(--spectrum-picker-m-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-picker-quiet-m-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-picker-quiet-m-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button:hover{background-color:var(--spectrum-picker-quiet-m-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible,:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible.placeholder,:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button.focus-visible .picker,:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(--spectrum-picker-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-picker-quiet-m-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--spectrum-picker-quiet-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-picker-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host{display:inline-flex;vertical-align:top;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width)}:host([quiet]){width:auto;min-width:0}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{width:100%;min-width:100%;max-width:100%}sp-popover{display:none}.picker,.validationIcon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([focused]:not([quiet])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
`;
export default styles;
import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import '@spectrum-web-components/icon/sp-icon.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';

@@ -37,3 +37,3 @@ import { MenuItem, Menu } from '@spectrum-web-components/menu';

value: string;
selectedItemText: string;
selectedItem?: MenuItem;
private closeOverlay?;

@@ -72,3 +72,4 @@ private popover?;

static get styles(): CSSResultArray;
onKeydown: (event: KeyboardEvent) => void;
}
export {};

@@ -17,4 +17,3 @@ /*

import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import '@spectrum-web-components/icon/sp-icon.js';
import { Chevron100Icon } from '@spectrum-web-components/icons-ui';
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';

@@ -51,3 +50,2 @@ import '@spectrum-web-components/popover/sp-popover.js';

this.value = '';
this.selectedItemText = '';
this.listRole = 'listbox';

@@ -113,5 +111,5 @@ this.itemRole = 'option';

async setValueFromItem(item) {
const oldSelectedItemText = this.selectedItemText;
const oldSelectedItem = this.selectedItem;
const oldValue = this.value;
this.selectedItemText = item.itemText;
this.selectedItem = item;
this.value = item.value;

@@ -124,3 +122,3 @@ this.open = false;

if (!applyDefault) {
this.selectedItemText = oldSelectedItemText;
this.selectedItem = oldSelectedItem;
this.value = oldValue;

@@ -130,7 +128,4 @@ this.open = true;

}
const parentElement = item.parentElement;
const selectedItem = parentElement.querySelector('[selected]');
/* c8 ignore next 3 */
if (selectedItem) {
selectedItem.selected = false;
if (oldSelectedItem) {
oldSelectedItem.selected = false;
}

@@ -200,4 +195,4 @@ item.selected = true;

>
${this.value
? this.selectedItemText
${this.value && this.selectedItem
? this.selectedItem.itemText
: html `

@@ -212,5 +207,5 @@ <slot name="label">${this.label}</slot>

: nothing}
<sp-icon class="icon picker ${chevronClass[this.size]}">
${Chevron100Icon()}
</sp-icon>
<sp-icon-chevron100
class="icon picker ${chevronClass[this.size]}"
></sp-icon-chevron100>
`,

@@ -254,3 +249,5 @@ ];

super.updated(changedProperties);
if (changedProperties.has('value') && this.optionsMenu) {
if (changedProperties.has('value') &&
!changedProperties.has('selectedItem') &&
this.optionsMenu) {
this.manageSelection();

@@ -289,7 +286,7 @@ }

selectedItem.selected = true;
this.selectedItemText = selectedItem.itemText;
this.selectedItem = selectedItem;
}
else {
this.value = '';
this.selectedItemText = '';
this.selectedItem = undefined;
}

@@ -344,4 +341,4 @@ this.optionsMenu.updateSelectedItemIndex();

__decorate([
property({ type: String })
], PickerBase.prototype, "selectedItemText", void 0);
property({ attribute: false })
], PickerBase.prototype, "selectedItem", void 0);
__decorate([

@@ -351,2 +348,34 @@ query('sp-popover')

export class Picker extends PickerBase {
constructor() {
super(...arguments);
this.onKeydown = (event) => {
const { code } = event;
if (!code.startsWith('Arrow')) {
return;
}
event.preventDefault();
/* c8 ignore next 3 */
if (!this.optionsMenu) {
return;
}
if (code === 'ArrowUp' || code === 'ArrowDown') {
this.open = true;
return;
}
const selectedIndex = this.selectedItem
? this.optionsMenu.menuItems.indexOf(this.selectedItem)
: -1;
// use a positive offset to find the first non-disabled item when no selection is available.
const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;
let nextIndex = selectedIndex + nextOffset;
while (this.optionsMenu.menuItems[nextIndex] &&
this.optionsMenu.menuItems[nextIndex].disabled) {
nextIndex += nextOffset;
}
nextIndex = Math.max(Math.min(nextIndex, this.optionsMenu.menuItems.length), 0);
if (!this.value || nextIndex !== selectedIndex) {
this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);
}
};
}
static get styles() {

@@ -353,0 +382,0 @@ return [pickerStyles, chevronStyles];

@@ -23,2 +23,3 @@ /*

SizedMixin,
ElementSize,
} from '@spectrum-web-components/base';

@@ -30,4 +31,3 @@

import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import '@spectrum-web-components/icon/sp-icon.js';
import { Chevron100Icon } from '@spectrum-web-components/icons-ui';
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';

@@ -55,2 +55,4 @@ import {

type PickerSize = Exclude<ElementSize, 'xxl'>;
/**

@@ -112,4 +114,4 @@ * @element sp-picker

@property({ type: String })
public selectedItemText = '';
@property({ attribute: false })
public selectedItem?: MenuItem;

@@ -202,5 +204,5 @@ private closeOverlay?: () => void;

public async setValueFromItem(item: MenuItem): Promise<void> {
const oldSelectedItemText = this.selectedItemText;
const oldSelectedItem = this.selectedItem;
const oldValue = this.value;
this.selectedItemText = item.itemText;
this.selectedItem = item;
this.value = item.value;

@@ -215,3 +217,3 @@ this.open = false;

if (!applyDefault) {
this.selectedItemText = oldSelectedItemText;
this.selectedItem = oldSelectedItem;
this.value = oldValue;

@@ -221,9 +223,4 @@ this.open = true;

}
const parentElement = item.parentElement as Element;
const selectedItem = parentElement.querySelector(
'[selected]'
) as MenuItem;
/* c8 ignore next 3 */
if (selectedItem) {
selectedItem.selected = false;
if (oldSelectedItem) {
oldSelectedItem.selected = false;
}

@@ -314,4 +311,4 @@ item.selected = true;

>
${this.value
? this.selectedItemText
${this.value && this.selectedItem
? this.selectedItem.itemText
: html`

@@ -326,5 +323,5 @@ <slot name="label">${this.label}</slot>

: nothing}
<sp-icon class="icon picker ${chevronClass[this.size]}">
${Chevron100Icon()}
</sp-icon>
<sp-icon-chevron100
class="icon picker ${chevronClass[this.size as PickerSize]}"
></sp-icon-chevron100>
`,

@@ -373,3 +370,7 @@ ];

super.updated(changedProperties);
if (changedProperties.has('value') && this.optionsMenu) {
if (
changedProperties.has('value') &&
!changedProperties.has('selectedItem') &&
this.optionsMenu
) {
this.manageSelection();

@@ -411,6 +412,6 @@ }

selectedItem.selected = true;
this.selectedItemText = selectedItem.itemText;
this.selectedItem = selectedItem;
} else {
this.value = '';
this.selectedItemText = '';
this.selectedItem = undefined;
}

@@ -445,2 +446,37 @@ this.optionsMenu.updateSelectedItemIndex();

}
public onKeydown = (event: KeyboardEvent): void => {
const { code } = event;
if (!code.startsWith('Arrow')) {
return;
}
event.preventDefault();
/* c8 ignore next 3 */
if (!this.optionsMenu) {
return;
}
if (code === 'ArrowUp' || code === 'ArrowDown') {
this.open = true;
return;
}
const selectedIndex = this.selectedItem
? this.optionsMenu.menuItems.indexOf(this.selectedItem)
: -1;
// use a positive offset to find the first non-disabled item when no selection is available.
const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;
let nextIndex = selectedIndex + nextOffset;
while (
this.optionsMenu.menuItems[nextIndex] &&
this.optionsMenu.menuItems[nextIndex].disabled
) {
nextIndex += nextOffset;
}
nextIndex = Math.max(
Math.min(nextIndex, this.optionsMenu.menuItems.length),
0
);
if (!this.value || nextIndex !== selectedIndex) {
this.setValueFromItem(this.optionsMenu.menuItems[nextIndex]);
}
};
}

@@ -14,3 +14,3 @@ /*

const styles = css `
#button{--spectrum-button-line-height:1.3;position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}#button{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
:host{--spectrum-button-line-height:1.3}#button{position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}:host{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,

@@ -17,0 +17,0 @@ var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,

@@ -14,3 +14,3 @@ /*

const styles = css`
#button{--spectrum-button-line-height:1.3;position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}#button{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
:host{--spectrum-button-line-height:1.3}#button{position:relative;display:inline-flex;box-sizing:border-box;overflow:visible;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:var(--spectrum-button-line-height);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(--spectrum-picker-textonly-padding-left);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-right:var(--spectrum-picker-textonly-padding-left);padding-left:var(--spectrum-picker-textonly-padding-right)}#button{display:flex;justify-content:center;align-items:center;max-width:100%;width:var(--spectrum-picker-width);min-width:var(--spectrum-picker-min-width);height:var(--spectrum-picker-height);margin:0;padding-top:0;padding-bottom:0;border-width:var(--spectrum-picker-border-size);border-style:solid;border-radius:var(--spectrum-picker-border-radius);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)}#button:disabled,:host([disabled]) #button{border-width:var(--spectrum-picker-disabled-border-size);cursor:default}:host([dir=ltr]) #button .spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button .spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}.spectrum-Picker-icon{flex-shrink:0}:host([dir=ltr]) #button #label+.spectrum-Picker-icon{margin-left:var(--spectrum-picker-icon-gap)}:host([dir=rtl]) #button #label+.spectrum-Picker-icon{margin-right:var(--spectrum-picker-icon-gap)}:host([size=s]){--spectrum-picker-border-size:var(--spectrum-picker-s-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-s-text-size,var(--spectrum-alias-item-text-size-s));--spectrum-picker-icon-gap:var(--spectrum-picker-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s));--spectrum-picker-height:var(--spectrum-picker-s-height,var(--spectrum-alias-item-height-s));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-s-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-s-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-s-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-s-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-s-min-width,var(--spectrum-global-dimension-size-450));--spectrum-picker-popover-max-width:var(--spectrum-picker-s-popover-max-width,var(--spectrum-global-dimension-size-1800));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-s-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-s));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-s-error-icon-margin-left,var(--spectrum-global-dimension-size-100));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-s-textonly-padding-left,var(--spectrum-alias-item-padding-s));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-s-textonly-padding-right,var(--spectrum-alias-item-padding-s))}:host([size=m]){--spectrum-picker-border-size:var(--spectrum-picker-m-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-picker-height:var(--spectrum-picker-m-height,var(--spectrum-alias-item-height-m));--spectrum-picker-icon-gap:var(--spectrum-picker-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-m-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-m-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-m-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-m-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-m-min-width,var(--spectrum-global-dimension-size-600));--spectrum-picker-popover-max-width:var(--spectrum-picker-m-popover-max-width,var(--spectrum-global-dimension-size-2400));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-m-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-m));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-m-error-icon-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-m-textonly-padding-left,var(--spectrum-alias-item-padding-m));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-m-textonly-padding-right,var(--spectrum-alias-item-padding-m))}:host([size=l]){--spectrum-picker-border-size:var(--spectrum-picker-l-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-text-size:var(--spectrum-picker-l-text-size,var(--spectrum-alias-item-text-size-l));--spectrum-picker-icon-gap:var(--spectrum-picker-l-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-height:var(--spectrum-picker-l-height,var(--spectrum-alias-item-height-l));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-l-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-l-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-l-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-l-width,var(--spectrum-global-dimension-size-2000));--spectrum-picker-min-width:var(--spectrum-picker-l-min-width,var(--spectrum-global-dimension-size-750));--spectrum-picker-popover-max-width:var(--spectrum-picker-l-popover-max-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-l-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-l));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-l-error-icon-margin-left,var(--spectrum-global-dimension-size-185));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-l-textonly-padding-left,var(--spectrum-alias-item-padding-l));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-l-textonly-padding-right,var(--spectrum-alias-item-padding-l))}:host([size=xl]){--spectrum-picker-border-size:var(--spectrum-picker-xl-border-size,var(--spectrum-alias-border-size-thin));--spectrum-picker-icon-gap:var(--spectrum-picker-xl-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-l));--spectrum-picker-text-size:var(--spectrum-picker-xl-text-size,var(--spectrum-alias-item-text-size-xl));--spectrum-picker-height:var(--spectrum-picker-xl-height,var(--spectrum-alias-item-height-xl));--spectrum-picker-placeholder-text-font-style:var(--spectrum-picker-xl-placeholder-text-font-style,var(--spectrum-global-font-style-italic));--spectrum-picker-placeholder-text-font-weight:var(--spectrum-picker-xl-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-picker-border-radius:var(--spectrum-picker-xl-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-picker-width:var(--spectrum-picker-xl-width,var(--spectrum-global-dimension-size-3000));--spectrum-picker-min-width:var(--spectrum-picker-xl-min-width,var(--spectrum-global-dimension-size-900));--spectrum-picker-popover-max-width:var(--spectrum-picker-xl-popover-max-width,var(--spectrum-global-dimension-size-3600));--spectrum-picker-ui-icon-gap:var(--spectrum-picker-xl-ui-icon-gap,var(--spectrum-alias-item-ui-icon-gap-xl));--spectrum-picker-error-icon-margin-left:var(--spectrum-picker-xl-error-icon-margin-left,var(--spectrum-global-dimension-size-225));--spectrum-picker-textonly-padding-left:var(--spectrum-picker-xl-textonly-padding-left,var(--spectrum-alias-item-padding-xl));--spectrum-picker-textonly-padding-right:var(--spectrum-picker-xl-textonly-padding-right,var(--spectrum-alias-item-padding-xl))}:host{--spectrum-picker-min-width:var(--spectrum-global-dimension-size-400);--spectrum-picker-disabled-border-size:0;--spectrum-picker-popover-max-width:var(--spectrum-global-dimension-size-3000);--spectrum-picker-width:var(--spectrum-global-dimension-size-2400);--spectrum-picker-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-border-size:0;--spectrum-picker-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;width:auto;min-width:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled.focus-visible,:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button.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;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);line-height:calc(var(--spectrum-picker-height) - var(--spectrum-picker-border-size)*2);font-size:var(--spectrum-picker-text-size);text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-picker-placeholder-text-font-weight);font-style:var(--spectrum-picker-placeholder-text-font-style);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;flex-shrink:0}:host([dir=ltr]) .validationIcon{margin-left:var(--spectrum-picker-error-icon-margin-left)}:host([dir=rtl]) .validationIcon{margin-right:var(--spectrum-picker-error-icon-margin-left)}:host([dir=ltr]) #label~.picker{margin-left:var(--spectrum-picker-ui-icon-gap)}:host([dir=rtl]) #label~.picker{margin-right:var(--spectrum-picker-ui-icon-gap)}#popover{max-width:var(--spectrum-picker-popover-max-width)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,

@@ -17,0 +17,0 @@ var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1*(var(--spectrum-picker-quiet-m-popover-offset-x,

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc