Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/picker
Advanced tools
@spectrum-web-components/picker - npm Package Compare versions
Comparing version 0.2.0 to 0.3.0
@@ -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 @@ |
@@ -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
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.95%
265661
- Lines of code
- increased by3.42%
2571
Dependency changes
+ Added@spectrum-web-components/action-button@0.4.70.5.9(transitive)
+ Added@spectrum-web-components/base@0.4.6(transitive)
+ Added@spectrum-web-components/button@0.13.70.14.9(transitive)
+ Added@spectrum-web-components/icon@0.9.11(transitive)
+ Added@spectrum-web-components/icons-ui@0.6.11(transitive)
+ Added@spectrum-web-components/icons-workflow@0.6.11(transitive)
+ Added@spectrum-web-components/iconset@0.5.8(transitive)
+ Added@spectrum-web-components/menu@0.7.1(transitive)
+ Added@spectrum-web-components/overlay@0.10.10.11.16(transitive)
+ Added@spectrum-web-components/popover@0.9.18(transitive)
+ Added@spectrum-web-components/shared@0.11.10.12.11(transitive)
+ Added@spectrum-web-components/styles@0.10.1(transitive)
+ Added@spectrum-web-components/theme@0.8.16(transitive)
- Removed@spectrum-web-components/action-button@0.3.0(transitive)
- Removed@spectrum-web-components/base@0.3.3(transitive)
- Removed@spectrum-web-components/button@0.12.0(transitive)
- Removed@spectrum-web-components/icon@0.8.3(transitive)
- Removed@spectrum-web-components/icons-ui@0.5.3(transitive)
- Removed@spectrum-web-components/icons-workflow@0.5.3(transitive)
- Removed@spectrum-web-components/iconset@0.4.3(transitive)
- Removed@spectrum-web-components/menu@0.6.3(transitive)
- Removed@spectrum-web-components/overlay@0.9.0(transitive)
- Removed@spectrum-web-components/popover@0.8.0(transitive)
- Removed@spectrum-web-components/shared@0.10.0(transitive)
- Removed@spectrum-web-components/styles@0.8.1(transitive)
- Removed@spectrum-web-components/theme@0.7.4(transitive)