@spectrum-web-components/picker 1.2.0-beta.0 → 1.2.0-beta.2

package/src/spectrum-picker.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-picker.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:\"\";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(--spectrum-default-font-style);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-picker-spacing-edge-to-text-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--spectrum-field-label-to-component);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-medium);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-medium);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);--spectrum-picker-animation-duration:var(--spectrum-animation-duration-100);--spectrum-picker-font-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-font-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-font-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-font-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-font-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-font-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-icon-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-icon-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-icon-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-border-color-error-default:var(--spectrum-negative-border-color-default);--spectrum-picker-border-color-error-default-open:var(--spectrum-negative-border-color-focus);--spectrum-picker-border-color-error-hover:var(--spectrum-negative-border-color-hover);--spectrum-picker-border-color-error-hover-open:var(--spectrum-negative-border-color-focus-hover);--spectrum-picker-border-color-error-active:var(--spectrum-negative-border-color-down);--spectrum-picker-border-color-error-key-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-picker-font-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--spectrum-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-small);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-small);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-small);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-small);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-75);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-75)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-200);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-200)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-extra-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-extra-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-300);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-300)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:\"\";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{flex-shrink:0;margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:var(--highcontrast-picker-border-color-disabled,var(--spectrum-picker-border-color-disabled));color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/spectrum-picker.css.js

@@ -1,4 +1,4 @@
 "use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
-    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}
+    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(--spectrum-default-font-style);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-picker-spacing-edge-to-text-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--spectrum-field-label-to-component);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-medium);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-medium);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);--spectrum-picker-animation-duration:var(--spectrum-animation-duration-100);--spectrum-picker-font-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-font-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-font-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-font-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-font-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-font-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-icon-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-icon-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-icon-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-border-color-error-default:var(--spectrum-negative-border-color-default);--spectrum-picker-border-color-error-default-open:var(--spectrum-negative-border-color-focus);--spectrum-picker-border-color-error-hover:var(--spectrum-negative-border-color-hover);--spectrum-picker-border-color-error-hover-open:var(--spectrum-negative-border-color-focus-hover);--spectrum-picker-border-color-error-active:var(--spectrum-negative-border-color-down);--spectrum-picker-border-color-error-key-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-picker-font-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--spectrum-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-small);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-small);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-small);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-small);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-75);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-75)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-200);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-200)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-extra-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-extra-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-300);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-300)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{flex-shrink:0;margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:var(--highcontrast-picker-border-color-disabled,var(--spectrum-picker-border-color-disabled));color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}
 `;export default o;
 //# sourceMappingURL=spectrum-picker.css.js.map

package/src/spectrum-picker.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-picker.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:\"\";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(--spectrum-default-font-style);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-picker-spacing-edge-to-text-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--spectrum-field-label-to-component);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-medium);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-medium);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);--spectrum-picker-animation-duration:var(--spectrum-animation-duration-100);--spectrum-picker-font-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-font-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-font-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-font-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-font-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-font-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-icon-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-icon-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-icon-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-border-color-error-default:var(--spectrum-negative-border-color-default);--spectrum-picker-border-color-error-default-open:var(--spectrum-negative-border-color-focus);--spectrum-picker-border-color-error-hover:var(--spectrum-negative-border-color-hover);--spectrum-picker-border-color-error-hover-open:var(--spectrum-negative-border-color-focus-hover);--spectrum-picker-border-color-error-active:var(--spectrum-negative-border-color-down);--spectrum-picker-border-color-error-key-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-picker-font-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--spectrum-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-small);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-small);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-small);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-small);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-75);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-75)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-200);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-200)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-extra-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-extra-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-300);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-300)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:\"\";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{flex-shrink:0;margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:var(--highcontrast-picker-border-color-disabled,var(--spectrum-picker-border-color-disabled));color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/picker.stories.js

@@ -83,54 +83,59 @@ export const Default = (args) => {
 };
 export const forcePopoverOnMobile = (args) => {
   return html`
-        <h1>Force Popover on Mobile</h1>
-        <p>
-            The forcePopover attribute overrides the mobile device functionality
-            of rendering a tray so that a popover will always render no matter
-            the device.
-        </p>
-        <ol>
-            <li>Open Chrome DevTools (or equivalent).</li>
-            <li>Toggle the Device Toolbar (the phone/tablet icon).</li>
-            <li>Select a device preset (e.g. iPhone 12).</li>
-            <li>
-                Chrome will set user-agent strings, simulate touch, and adjust
-                DPI.
-            </li>
-            <li>Reload the page</li>
-            <li>Click the Picker 1 and see a tray</li>
-            <li>Click the Picker 2 and see a popover</li>
-        </ol>
-        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
-            Do you want to see a tray menu?
-        </sp-field-label>
-        <sp-picker
-            id="picker-1"
-            @change=${handleChange(args)}
-            label="Select an option"
-        >
-            <sp-menu-item value="option-1">Yes</sp-menu-item>
-            <sp-menu-item value="option-2">No</sp-menu-item>
-        </sp-picker>
-        <sp-field-label for="picker-2" size=${ifDefined(args.size)}>
-            Do you want to see a popover menu?
-        </sp-field-label>
-        <sp-picker
-            id="picker-2"
-            forcePopover
-            @change=${handleChange(args)}
-            label="Select an option"
-        >
-            <sp-menu-item value="option-1">Yes</sp-menu-item>
-            <sp-menu-item value="option-2">No</sp-menu-item>
-        </sp-picker>
-        <div>
+        <div style="padding: 40px">
+            <h1>Force Popover on Mobile</h1>
             <p>
-                This button should't be clickable if a popover is open over it.
+                The forcePopover attribute overrides the mobile device
+                functionality of rendering a tray so that a popover will always
+                render no matter the device.
             </p>
-            <sp-button @click=${() => console.log("Whoops! I was clicked.")}>
-                Shouldn't be clickable
-            </sp-button>
+            <ol>
+                <li>Open Chrome DevTools (or equivalent).</li>
+                <li>Toggle the Device Toolbar (the phone/tablet icon).</li>
+                <li>Select a device preset (e.g. iPhone 12).</li>
+                <li>
+                    Chrome will set user-agent strings, simulate touch, and
+                    adjust DPI.
+                </li>
+                <li>Reload the page</li>
+                <li>Click the Picker 1 and see a tray</li>
+                <li>Click the Picker 2 and see a popover</li>
+            </ol>
+            <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+                Do you want to see a tray menu?
+            </sp-field-label>
+            <sp-picker
+                id="picker-1"
+                @change=${handleChange(args)}
+                label="Select an option"
+            >
+                <sp-menu-item value="option-1">Yes</sp-menu-item>
+                <sp-menu-item value="option-2">No</sp-menu-item>
+            </sp-picker>
+            <sp-field-label for="picker-2" size=${ifDefined(args.size)}>
+                Do you want to see a popover menu?
+            </sp-field-label>
+            <sp-picker
+                id="picker-2"
+                forcePopover
+                @change=${handleChange(args)}
+                label="Select an option"
+            >
+                <sp-menu-item value="option-1">Yes</sp-menu-item>
+                <sp-menu-item value="option-2">No</sp-menu-item>
+            </sp-picker>
+            <div>
+                <p>
+                    This button should't be clickable if a popover is open over
+                    it.
+                </p>
+                <sp-button
+                    @click=${() => console.log("Whoops! I was clicked.")}
+                >
+                    Shouldn't be clickable
+                </sp-button>
+            </div>
         </div>
     `;
 };

package/stories/picker.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["picker.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport '../../overlay/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport { argTypes } from './args.js';\nimport { states } from './states.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\n\nexport default {\n    title: 'Picker',\n    component: 'sp-picker',\n    args: {\n        disabled: false,\n        invalid: false,\n        open: false,\n        quiet: false,\n        pending: false,\n    },\n    argTypes: {\n        ...argTypes,\n        onChange: { action: 'change' },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        pending: {\n            name: 'pending',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {\n    return html`\n        <h1>Force Popover on Mobile</h1>\n        <p>\n            The forcePopover attribute overrides the mobile device functionality\n            of rendering a tray so that a popover will always render no matter\n            the device.\n        </p>\n        <ol>\n            <li>Open Chrome DevTools (or equivalent).</li>\n            <li>Toggle the Device Toolbar (the phone/tablet icon).</li>\n            <li>Select a device preset (e.g. iPhone 12).</li>\n            <li>\n                Chrome will set user-agent strings, simulate touch, and adjust\n                DPI.\n            </li>\n            <li>Reload the page</li>\n            <li>Click the Picker 1 and see a tray</li>\n            <li>Click the Picker 2 and see a popover</li>\n        </ol>\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Do you want to see a tray menu?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select an option\"\n        >\n            <sp-menu-item value=\"option-1\">Yes</sp-menu-item>\n            <sp-menu-item value=\"option-2\">No</sp-menu-item>\n        </sp-picker>\n        <sp-field-label for=\"picker-2\" size=${ifDefined(args.size)}>\n            Do you want to see a popover menu?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-2\"\n            forcePopover\n            @change=${handleChange(args)}\n            label=\"Select an option\"\n        >\n            <sp-menu-item value=\"option-1\">Yes</sp-menu-item>\n            <sp-menu-item value=\"option-2\">No</sp-menu-item>\n        </sp-picker>\n        <div>\n            <p>\n                This button should't be clickable if a popover is open over it.\n            </p>\n            <sp-button @click=${() => console.log('Whoops! I was clicked.')}>\n                Shouldn't be clickable\n            </sp-button>\n        </div>\n    `;\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const invalid = (args: StoryArgs): TemplateResult => Template(args);\ninvalid.args = {\n    invalid: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(rest)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n            <sp-tooltip\n                slot=\"tooltip\"\n                ?open=${open}\n                self-managed\n                placement=\"right\"\n            >\n                This Picker wants to know where you live.\n            </sp-tooltip>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ntooltip.args = {\n    open: true,\n};\ntooltip.decorators = [isOverlayOpen];\n\nexport const leftSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-1\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            label=\"Where do you live?\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const slottedLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n            <span slot=\"label\">Where do you live?</span>\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquiet.args = {\n    quiet: true,\n};\n\nexport const quietSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-quiet-sidelabel\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet-sidelabel\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquietSideLabel.args = {\n    quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n            icons=\"none\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsNone.args = {\n    open: true,\n};\niconsNone.decorators = [isOverlayOpen];\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            icons=\"only\"\n            style=\"width: 100px\"\n            value=\"2\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            style=\"width: 100px\"\n            value=\"3\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsOnly.args = {\n    open: true,\n};\niconsOnly.decorators = [isOverlayOpen];\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n        </style>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpen.args = {\n    open: true,\n};\nOpen.decorators = [isOverlayOpen];\n\nexport const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n            /* Enforce CSS stacking to test \"transition-behavior: allow-discrete\" */\n            /* Breaks the story in non-[popover] supporting browsers */\n            fieldset:nth-of-type(2) {\n                position: relative;\n                z-index: 2;\n            }\n            .backdrop-filter-test {\n                backdrop-filter: saturate(80%);\n            }\n        </style>\n        <p>\n            In browser that do not support\n            <code>[popover]</code>\n            , the following \"open\"\n            <code>sp-picker</code>\n            will display behind both the closed\n            <code>sp-picker</code>\n            as well as the\n            <code>fieldset</code>\n            that contains it.\n        </p>\n        <p>\n            Learn more about this situation in our\n            <sp-link\n                href=\"https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support\"\n            >\n                documentation site\n            </sp-link>\n            .\n        </p>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpenShowingEdgeCase.args = {\n    open: true,\n};\nOpenShowingEdgeCase.decorators = [isOverlayOpen];\nOpenShowingEdgeCase.swc_vrt = {\n    skip: true,\n};\n\nOpenShowingEdgeCase.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-initial\"\n            @change=${handleChange(args)}\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            readonly\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n    const initialState = 'lb1-mo';\n    return html`\n        <sp-field-label for=\"picker-state\" size=${ifDefined(args.size)}>\n            What state do you live in?\n        </sp-field-label>\n        <sp-picker\n            style=\"width: 400px;\"\n            @change=${handleChange(args)}\n            id=\"picker-state\"\n            label=\"Pick a state\"\n            ${spreadProps(args)}\n            value=${initialState}\n        >\n            ${states.map(\n                (state) => html`\n                    <sp-menu-item\n                        id=${state.id}\n                        value=${state.id}\n                        ?selected=${state.id === initialState}\n                    >\n                        ${state.label}\n                    </sp-menu-item>\n                `\n            )}\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ncustom.args = {\n    open: true,\n};\ncustom.decorators = [isOverlayOpen];\n\nexport const BackgroundClickTest = (): TemplateResult => {\n    return html`\n        <div style=\"display: flex; flex-direction: column;\">\n            <sp-picker size=\"l\">\n                <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n                <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            </sp-picker>\n            <div style=\"position: absolute; bottom: 50px;\">\n                <sp-button\n                    @click=${() => {\n                        console.log(\n                            'this button should not have been clicked...'\n                        );\n                    }}\n                    size=\"l\"\n                >\n                    I shall not be clicked\n                </sp-button>\n            </div>\n        </div>\n    `;\n};\nBackgroundClickTest.swc_vrt = {\n    skip: true,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/link/sp-link.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport '../../overlay/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport { argTypes } from './args.js';\nimport { states } from './states.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\n\nexport default {\n    title: 'Picker',\n    component: 'sp-picker',\n    args: {\n        disabled: false,\n        invalid: false,\n        open: false,\n        quiet: false,\n        pending: false,\n    },\n    argTypes: {\n        ...argTypes,\n        onChange: { action: 'change' },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        pending: {\n            name: 'pending',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {\n    return html`\n        <div style=\"padding: 40px\">\n            <h1>Force Popover on Mobile</h1>\n            <p>\n                The forcePopover attribute overrides the mobile device\n                functionality of rendering a tray so that a popover will always\n                render no matter the device.\n            </p>\n            <ol>\n                <li>Open Chrome DevTools (or equivalent).</li>\n                <li>Toggle the Device Toolbar (the phone/tablet icon).</li>\n                <li>Select a device preset (e.g. iPhone 12).</li>\n                <li>\n                    Chrome will set user-agent strings, simulate touch, and\n                    adjust DPI.\n                </li>\n                <li>Reload the page</li>\n                <li>Click the Picker 1 and see a tray</li>\n                <li>Click the Picker 2 and see a popover</li>\n            </ol>\n            <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n                Do you want to see a tray menu?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-1\"\n                @change=${handleChange(args)}\n                label=\"Select an option\"\n            >\n                <sp-menu-item value=\"option-1\">Yes</sp-menu-item>\n                <sp-menu-item value=\"option-2\">No</sp-menu-item>\n            </sp-picker>\n            <sp-field-label for=\"picker-2\" size=${ifDefined(args.size)}>\n                Do you want to see a popover menu?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-2\"\n                forcePopover\n                @change=${handleChange(args)}\n                label=\"Select an option\"\n            >\n                <sp-menu-item value=\"option-1\">Yes</sp-menu-item>\n                <sp-menu-item value=\"option-2\">No</sp-menu-item>\n            </sp-picker>\n            <div>\n                <p>\n                    This button should't be clickable if a popover is open over\n                    it.\n                </p>\n                <sp-button\n                    @click=${() => console.log('Whoops! I was clicked.')}\n                >\n                    Shouldn't be clickable\n                </sp-button>\n            </div>\n        </div>\n    `;\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const invalid = (args: StoryArgs): TemplateResult => Template(args);\ninvalid.args = {\n    invalid: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(rest)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n            <sp-tooltip\n                slot=\"tooltip\"\n                ?open=${open}\n                self-managed\n                placement=\"right\"\n            >\n                This Picker wants to know where you live.\n            </sp-tooltip>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ntooltip.args = {\n    open: true,\n};\ntooltip.decorators = [isOverlayOpen];\n\nexport const leftSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-1\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-1\"\n            @change=${handleChange(args)}\n            label=\"Select a Country with a very long label, too long, in fact\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            label=\"Where do you live?\"\n            ${spreadProps(args)}\n        >\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const slottedLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n            <span slot=\"label\">Where do you live?</span>\n            <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"option-6\">\n                Make Work Path\n            </sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquiet.args = {\n    quiet: true,\n};\n\nexport const quietSideLabel = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label\n            side-aligned=\"start\"\n            for=\"picker-quiet-sidelabel\"\n            size=${ifDefined(args.size)}\n        >\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet-sidelabel\"\n            @change=${handleChange(args)}\n            label=\"Pick an item\"\n        >\n            <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n            <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n            <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n            <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\nquietSideLabel.args = {\n    quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            value=\"1\"\n            icons=\"none\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsNone.args = {\n    open: true,\n};\niconsNone.decorators = [isOverlayOpen];\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            icons=\"only\"\n            style=\"width: 100px\"\n            value=\"2\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n                Copy\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n                Delete\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\" size=${ifDefined(args.size)}>\n            Choose an action type...\n        </sp-field-label>\n        <sp-picker\n            ${spreadProps(args)}\n            id=\"picker-quiet\"\n            @change=${handleChange(args)}\n            label=\"Pick an action\"\n            style=\"width: 100px\"\n            value=\"3\"\n        >\n            <sp-menu-item value=\"1\">\n                <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n            </sp-menu-item>\n            <sp-menu-item value=\"2\">\n                <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n            </sp-menu-item>\n            <sp-menu-item value=\"3\">\n                <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n            </sp-menu-item>\n        </sp-picker>\n    `;\n};\niconsOnly.args = {\n    open: true,\n};\niconsOnly.decorators = [isOverlayOpen];\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n        </style>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpen.args = {\n    open: true,\n};\nOpen.decorators = [isOverlayOpen];\n\nexport const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {\n    return html`\n        <style>\n            fieldset {\n                float: left;\n                clear: left;\n                margin-bottom: 15px;\n            }\n            /* Enforce CSS stacking to test \"transition-behavior: allow-discrete\" */\n            /* Breaks the story in non-[popover] supporting browsers */\n            fieldset:nth-of-type(2) {\n                position: relative;\n                z-index: 2;\n            }\n            .backdrop-filter-test {\n                backdrop-filter: saturate(80%);\n            }\n        </style>\n        <p>\n            In browser that do not support\n            <code>[popover]</code>\n            , the following \"open\"\n            <code>sp-picker</code>\n            will display behind both the closed\n            <code>sp-picker</code>\n            as well as the\n            <code>fieldset</code>\n            that contains it.\n        </p>\n        <p>\n            Learn more about this situation in our\n            <sp-link\n                href=\"https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support\"\n            >\n                documentation site\n            </sp-link>\n            .\n        </p>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-open\"\n                label=\"Open picker\"\n                ${spreadProps(args)}\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Select a Country with a very long label, too long, in fact\n                </span>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n        <fieldset>\n            <sp-field-label for=\"picker-closed\" size=${ifDefined(args.size)}>\n                Where do you live?\n            </sp-field-label>\n            <sp-picker\n                id=\"picker-closed\"\n                label=\"Picker that displays below the options\"\n                @change=${handleChange(args)}\n            >\n                <span slot=\"label\">\n                    Other menu that goes behind the open one\n                </span>\n                <sp-menu-item>Not so many options...</sp-menu-item>\n            </sp-picker>\n        </fieldset>\n    `;\n};\nOpenShowingEdgeCase.args = {\n    open: true,\n};\nOpenShowingEdgeCase.decorators = [isOverlayOpen];\nOpenShowingEdgeCase.swc_vrt = {\n    skip: true,\n};\n\nOpenShowingEdgeCase.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\" size=${ifDefined(args.size)}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-initial\"\n            @change=${handleChange(args)}\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-picker\n            @change=${handleChange(args)}\n            readonly\n            value=\"item-2\"\n            ${spreadProps(args)}\n        >\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n            <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n            <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n            <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n            <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n            <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n            <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n    const initialState = 'lb1-mo';\n    return html`\n        <sp-field-label for=\"picker-state\" size=${ifDefined(args.size)}>\n            What state do you live in?\n        </sp-field-label>\n        <sp-picker\n            style=\"width: 400px;\"\n            @change=${handleChange(args)}\n            id=\"picker-state\"\n            label=\"Pick a state\"\n            ${spreadProps(args)}\n            value=${initialState}\n        >\n            ${states.map(\n                (state) => html`\n                    <sp-menu-item\n                        id=${state.id}\n                        value=${state.id}\n                        ?selected=${state.id === initialState}\n                    >\n                        ${state.label}\n                    </sp-menu-item>\n                `\n            )}\n        </sp-picker>\n        <p>This is some text.</p>\n        <p>This is some text.</p>\n        <p>\n            This is a\n            <a href=\"#anchor\">link</a>\n            .\n        </p>\n    `;\n};\ncustom.args = {\n    open: true,\n};\ncustom.decorators = [isOverlayOpen];\n\nexport const BackgroundClickTest = (): TemplateResult => {\n    return html`\n        <div style=\"display: flex; flex-direction: column;\">\n            <sp-picker size=\"l\">\n                <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n                <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n            </sp-picker>\n            <div style=\"position: absolute; bottom: 50px;\">\n                <sp-button\n                    @click=${() => {\n                        console.log(\n                            'this button should not have been clicked...'\n                        );\n                    }}\n                    size=\"l\"\n                >\n                    I shall not be clicked\n                </sp-button>\n            </div>\n        </div>\n    `;\n};\nBackgroundClickTest.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
   "names": []
 }