@spectrum-web-components/picker 0.41.1 → 0.41.2

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

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

package/stories/picker.stories.js

@@ -1,5 +1,6 @@
 "use strict";
 import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/link/sp-link.js";
 import "@spectrum-web-components/picker/sp-picker.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
@@ -108,6 +109,35 @@ tooltip.args = {
   open: true
 };
 tooltip.decorators = [isOverlayOpen];
+export const leftSideLabel = (args) => {
+  return html`
+        <sp-field-label side-aligned="start" for="picker-1">
+            Where do you live?
+        </sp-field-label>
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            label="Select a Country with a very long label, too long, in fact"
+            ${spreadProps(args)}
+        >
+            <sp-menu-item value="option-1">Deselect</sp-menu-item>
+            <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+            <sp-menu-item value="option-3">Feather...</sp-menu-item>
+            <sp-menu-item value="option-4">Select and Mask...</sp-menu-item>
+            <sp-menu-item value="option-5">Save Selection</sp-menu-item>
+            <sp-menu-item disabled value="option-6">
+                Make Work Path
+            </sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
 export const noVisibleLabel = (args) => {
   return html`
         <sp-picker
@@ -181,6 +211,34 @@ export const quiet = (args) => {
 quiet.args = {
   quiet: true
 };
+export const quietSideLabel = (args) => {
+  return html`
+        <sp-field-label side-aligned="start" for="picker-quiet-sidelabel">
+            Where do you live?
+        </sp-field-label>
+        <sp-picker
+            ${spreadProps(args)}
+            id="picker-quiet-sidelabel"
+            @change=${handleChange(args)}
+            label="Pick an item"
+        >
+            <sp-menu-item value="1">Item 1</sp-menu-item>
+            <sp-menu-item value="2">Item 2</sp-menu-item>
+            <sp-menu-item value="3">Item 3</sp-menu-item>
+            <sp-menu-item value="4">Item 4</sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
+quietSideLabel.args = {
+  quiet: true
+};
 export const icons = (args) => {
   return html`
         <sp-field-label for="picker-quiet">
@@ -306,10 +364,87 @@ export const Open = (args) => {
                 clear: left;
                 margin-bottom: 15px;
             }
+        </style>
+        <fieldset class="backdrop-filter-test">
+            <sp-field-label for="picker-open">
+                Where do you live?
+            </sp-field-label>
+            <sp-picker
+                id="picker-open"
+                label="Open picker"
+                ${spreadProps(args)}
+                @change=${handleChange(args)}
+            >
+                <span slot="label">
+                    Select a Country with a very long label, too long, in fact
+                </span>
+                <sp-menu-item>Deselect</sp-menu-item>
+                <sp-menu-item>Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            </sp-picker>
+        </fieldset>
+        <fieldset>
+            <sp-field-label for="picker-closed">
+                Where do you live?
+            </sp-field-label>
+            <sp-picker
+                id="picker-closed"
+                label="Picker that displays below the options"
+                @change=${handleChange(args)}
+            >
+                <span slot="label">
+                    Other menu that goes behind the open one
+                </span>
+                <sp-menu-item>Not so many options...</sp-menu-item>
+            </sp-picker>
+        </fieldset>
+    `;
+};
+Open.args = {
+  open: true
+};
+Open.decorators = [isOverlayOpen];
+export const OpenShowingEdgeCase = (args) => {
+  return html`
+        <style>
+            fieldset {
+                float: left;
+                clear: left;
+                margin-bottom: 15px;
+            }
+            /* Enforce CSS stacking to test "transition-behavior: allow-discrete" */
+            /* Breaks the story in non-[popover] supporting browsers */
+            fieldset:nth-of-type(2) {
+                position: relative;
+                z-index: 2;
+            }
             .backdrop-filter-test {
                 backdrop-filter: saturate(80%);
             }
         </style>
+        <p>
+            In browser that do not support
+            <code>[popover]</code>
+            , the following "open"
+            <code>sp-picker</code>
+            will display behind both the closed
+            <code>sp-picker</code>
+            as well as the
+            <code>fieldset</code>
+            that contains it.
+        </p>
+        <p>
+            Learn more about this situation in our
+            <sp-link
+                href="https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support"
+            >
+                documentation site
+            </sp-link>
+            .
+        </p>
         <fieldset class="backdrop-filter-test">
             <sp-field-label for="picker-open">
                 Where do you live?
@@ -348,10 +483,13 @@ export const Open = (args) => {
         </fieldset>
     `;
 };
-Open.args = {
+OpenShowingEdgeCase.args = {
   open: true
 };
-Open.decorators = [isOverlayOpen];
+OpenShowingEdgeCase.decorators = [isOverlayOpen];
+OpenShowingEdgeCase.swc_vrt = {
+  skip: true
+};
 export const initialValue = (args) => {
   return html`
         <sp-field-label for="picker-initial">Where do you live?</sp-field-label>

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/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport '../../overlay/stories/index.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\nimport { argTypes } from './args.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    },\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        ...argTypes,\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</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 disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</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 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\">Where do you live?</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 icons = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-quiet\">\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\">\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\">\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\">\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            .backdrop-filter-test {\n                backdrop-filter: saturate(80%);\n            }\n        </style>\n        <fieldset class=\"backdrop-filter-test\">\n            <sp-field-label for=\"picker-open\">\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\">\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 initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\">Where do you live?</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\">\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"],
-  "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/link/sp-link.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport '../../overlay/stories/index.js';\nimport { handleChange, StoryArgs, Template } from './template.js';\nimport { argTypes } from './args.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    },\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        ...argTypes,\n    },\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</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 disabled = (args: StoryArgs): TemplateResult => Template(args);\ndisabled.args = {\n    disabled: true,\n};\n\nexport const tooltip = (args: StoryArgs): TemplateResult => {\n    const { open, ...rest } = args;\n    return html`\n        <sp-field-label for=\"picker-1\">Where do you live?</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 side-aligned=\"start\" for=\"picker-1\">\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\">Where do you live?</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 side-aligned=\"start\" for=\"picker-quiet-sidelabel\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-initial\">Where do you live?</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\">\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"],
+  "mappings": "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",
   "names": []
 }