@spectrum-web-components/picker 0.11.5 → 0.11.6-devmode.0

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

@@ -1 +1,7 @@
-{"version":3,"file":"spectrum-picker.css.js","sourceRoot":"","sources":["spectrum-picker.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwSjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;max-width:100%;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#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--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}\n`;\nexport default styles;"]}
+{
+  "version": 3,
+  "sources": ["spectrum-picker.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;max-width:100%;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#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--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}\n`;\nexport default styles;"],
+  "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAySf,eAAe;",
+  "names": []
+}

package/stories/picker-sizes.stories.js

@@ -1,27 +1,19 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '../sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
 export default {
-    title: 'Picker/Sizes',
-    component: 'sp-picker',
-    argTypes: {
-        onChange: { action: 'change' },
-    },
+  title: "Picker/Sizes",
+  component: "sp-picker",
+  argTypes: {
+    onChange: { action: "change" }
+  }
 };
-const picker = ({ onChange, size, }) => {
-    return html `
+const picker = ({
+  onChange,
+  size
+}) => {
+  return html`
         <sp-field-label for="picker-${size}" size=${size}>
             Where do you live?
         </sp-field-label>
@@ -29,9 +21,9 @@ const picker = ({ onChange, size, }) => {
             id="picker-${size}"
             size=${size}
             @change="${(event) => {
-        const picker = event.target;
-        onChange(picker.value);
-    }}"
+    const picker2 = event.target;
+    onChange(picker2.value);
+  }}"
             label="Select a Country with a very long label, too long, in fact"
         >
             <sp-menu-item>Deselect</sp-menu-item>
@@ -44,8 +36,8 @@ const picker = ({ onChange, size, }) => {
         </sp-picker>
     `;
 };
-export const s = (args) => picker(Object.assign(Object.assign({}, args), { size: 's' }));
-export const m = (args) => picker(Object.assign(Object.assign({}, args), { size: 'm' }));
-export const l = (args) => picker(Object.assign(Object.assign({}, args), { size: 'l' }));
-export const XL = (args) => picker(Object.assign(Object.assign({}, args), { size: 'xl' }));
-//# sourceMappingURL=picker-sizes.stories.js.map
+export const s = (args) => picker({ ...args, size: "s" });
+export const m = (args) => picker({ ...args, size: "m" });
+export const l = (args) => picker({ ...args, size: "l" });
+export const XL = (args) => picker({ ...args, size: "xl" });
+//# sourceMappingURL=picker-sizes.stories.js.map

package/stories/picker-sizes.stories.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"picker-sizes.stories.js","sourceRoot":"","sources":["picker-sizes.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,iBAAiB,CAAC;AAEzB,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AAEvD,eAAe;IACX,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACN,QAAQ,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;KACjC;CACJ,CAAC;AAMF,MAAM,MAAM,GAAG,CAAC,EACZ,QAAQ,EACR,IAAI,GAIP,EAAkB,EAAE;IACjB,OAAO,IAAI,CAAA;sCACuB,IAAI,UAAU,IAAI;;;;yBAI/B,IAAI;mBACV,IAAI;uBACA,CAAC,KAAY,EAAQ,EAAE;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgB,CAAC;QACtC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;;;;;;;;;;;KAWR,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,MAAM,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAEnC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,MAAM,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAEnC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,MAAM,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAe,EAAkB,EAAE,CAClD,MAAM,iCAAM,IAAI,KAAE,IAAI,EAAE,IAAI,IAAG,CAAC","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 '../sp-picker.js';\nimport { Picker } from '../';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\n\nexport default {\n    title: 'Picker/Sizes',\n    component: 'sp-picker',\n    argTypes: {\n        onChange: { action: 'change' },\n    },\n};\n\ntype StoryArgs = {\n    onChange: (val: string) => void;\n};\n\nconst picker = ({\n    onChange,\n    size,\n}: {\n    onChange: (val: string) => void;\n    size: 's' | 'm' | 'l' | 'xl';\n}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-${size}\" size=${size}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-${size}\"\n            size=${size}\n            @change=\"${(event: Event): void => {\n                const picker = event.target as Picker;\n                onChange(picker.value);\n            }}\"\n            label=\"Select a Country with a very long label, too long, in fact\"\n        >\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-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const s = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 's' });\n\nexport const m = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'm' });\n\nexport const l = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'l' });\n\nexport const XL = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'xl' });\n"]}
+{
+  "version": 3,
+  "sources": ["picker-sizes.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 { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\n\nexport default {\n    title: 'Picker/Sizes',\n    component: 'sp-picker',\n    argTypes: {\n        onChange: { action: 'change' },\n    },\n};\n\ntype StoryArgs = {\n    onChange: (val: string) => void;\n};\n\nconst picker = ({\n    onChange,\n    size,\n}: {\n    onChange: (val: string) => void;\n    size: 's' | 'm' | 'l' | 'xl';\n}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"picker-${size}\" size=${size}>\n            Where do you live?\n        </sp-field-label>\n        <sp-picker\n            id=\"picker-${size}\"\n            size=${size}\n            @change=\"${(event: Event): void => {\n                const picker = event.target as Picker;\n                onChange(picker.value);\n            }}\"\n            label=\"Select a Country with a very long label, too long, in fact\"\n        >\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-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-picker>\n    `;\n};\n\nexport const s = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 's' });\n\nexport const m = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'm' });\n\nexport const l = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'l' });\n\nexport const XL = (args: StoryArgs): TemplateResult =>\n    picker({ ...args, size: 'xl' });\n"],
+  "mappings": "AAYA;AAEA;AAEA;AACA;AAEA,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACN,UAAU,EAAE,QAAQ,SAAS;AAAA,EACjC;AACJ;AAMA,MAAM,SAAS,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,MAIkB;AAClB,SAAO;AAAA,sCAC2B,cAAc;AAAA;AAAA;AAAA;AAAA,yBAI3B;AAAA,mBACN;AAAA,uBACI,CAAC,UAAuB;AAC/B,UAAM,UAAS,MAAM;AACrB,aAAS,QAAO,KAAK;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYZ;AAEO,aAAM,IAAI,CAAC,SACd,OAAO,KAAK,MAAM,MAAM,IAAI,CAAC;AAE1B,aAAM,IAAI,CAAC,SACd,OAAO,KAAK,MAAM,MAAM,IAAI,CAAC;AAE1B,aAAM,IAAI,CAAC,SACd,OAAO,KAAK,MAAM,MAAM,IAAI,CAAC;AAE1B,aAAM,KAAK,CAAC,SACf,OAAO,KAAK,MAAM,MAAM,KAAK,CAAC;",
+  "names": []
+}

package/stories/picker.stories.js

@@ -1,88 +1,77 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '../sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
-import { states } from './states.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js";
+import { states } from "./states.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
 export default {
-    title: 'Picker',
-    component: 'sp-picker',
-    args: {
-        disabled: false,
-        invalid: false,
-        open: false,
-        quiet: false,
+  title: "Picker",
+  component: "sp-picker",
+  args: {
+    disabled: false,
+    invalid: false,
+    open: false,
+    quiet: false
+  },
+  argTypes: {
+    onChange: { action: "change" },
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
     },
-    argTypes: {
-        onChange: { action: 'change' },
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description: 'Disable this control. It will not receive focus or events.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        invalid: {
-            name: 'invalid',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the menu is open or not.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
-        quiet: {
-            name: 'quiet',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+    invalid: {
+      name: "invalid",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
     },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the menu is open or not.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: "boolean"
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
+  }
 };
 const handleChange = ({ onChange }) => (event) => {
-    const picker = event.target;
-    if (onChange)
-        onChange(picker.value);
+  const picker = event.target;
+  if (onChange)
+    onChange(picker.value);
 };
 export const Default = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-1">Where do you live?</sp-field-label>
         <sp-picker
             id="picker-1"
@@ -108,7 +97,7 @@ export const Default = (args) => {
     `;
 };
 export const quiet = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-quiet">Where do you live?</sp-field-label>
         <sp-picker
             ${spreadProps(args)}
@@ -131,10 +120,10 @@ export const quiet = (args) => {
     `;
 };
 quiet.args = {
-    quiet: true,
+  quiet: true
 };
 export const icons = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-quiet">
             Choose an action type...
         </sp-field-label>
@@ -161,7 +150,7 @@ export const icons = (args) => {
     `;
 };
 export const iconsNone = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-quiet">
             Choose an action type...
         </sp-field-label>
@@ -189,10 +178,10 @@ export const iconsNone = (args) => {
     `;
 };
 iconsNone.args = {
-    open: true,
+  open: true
 };
 export const iconValue = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-quiet">
             Choose an action type...
         </sp-field-label>
@@ -221,7 +210,7 @@ export const iconValue = (args) => {
     `;
 };
 export const iconsOnly = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-quiet">
             Choose an action type...
         </sp-field-label>
@@ -246,10 +235,10 @@ export const iconsOnly = (args) => {
     `;
 };
 iconsOnly.args = {
-    open: true,
+  open: true
 };
 export const Open = (args) => {
-    return html `
+  return html`
         <style>
             fieldset {
                 float: left;
@@ -297,10 +286,10 @@ export const Open = (args) => {
     `;
 };
 Open.args = {
-    open: true,
+  open: true
 };
 export const initialValue = (args) => {
-    return html `
+  return html`
         <sp-field-label for="picker-initial">Where do you live?</sp-field-label>
         <sp-picker
             id="picker-initial"
@@ -322,7 +311,7 @@ export const initialValue = (args) => {
     `;
 };
 export const readonly = (args) => {
-    return html `
+  return html`
         <sp-picker
             @change=${handleChange(args)}
             readonly
@@ -343,8 +332,8 @@ export const readonly = (args) => {
     `;
 };
 export const custom = (args) => {
-    const initialState = 'lb1-mo';
-    return html `
+  const initialState = "lb1-mo";
+  return html`
         <sp-field-label for="picker-state">
             What state do you live in?
         </sp-field-label>
@@ -356,7 +345,7 @@ export const custom = (args) => {
             ${spreadProps(args)}
             value=${initialState}
         >
-            ${states.map((state) => html `
+            ${states.map((state) => html`
                     <sp-menu-item
                         id=${state.id}
                         value=${state.id}
@@ -376,6 +365,6 @@ export const custom = (args) => {
     `;
 };
 custom.args = {
-    open: true,
+  open: true
 };
-//# sourceMappingURL=picker.stories.js.map
+//# sourceMappingURL=picker.stories.js.map

package/stories/picker.stories.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"picker.stories.js","sourceRoot":"","sources":["picker.stories.ts"],"names":[],"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 '../sp-picker.js';\nimport { Picker } from '../';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.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';\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        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        invalid: {\n            name: 'invalid',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        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        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ninterface StoryArgs {\n    disabled?: boolean;\n    invalid?: boolean;\n    open?: boolean;\n    quiet?: boolean;\n    showText?: boolean;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n}\n\nconst handleChange =\n    ({ onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const picker = event.target as Picker;\n        if (onChange) onChange(picker.value);\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>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-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</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};\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=\"--spectrum-picker-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=\"--spectrum-picker-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};\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>\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-divider></sp-menu-divider>\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};\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-divider></sp-menu-divider>\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-divider></sp-menu-divider>\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};\n\ncustom.args = {\n    open: true,\n};\n"]}
+{
+  "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 { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.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';\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        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        invalid: {\n            name: 'invalid',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        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        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ninterface StoryArgs {\n    disabled?: boolean;\n    invalid?: boolean;\n    open?: boolean;\n    quiet?: boolean;\n    showText?: boolean;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n}\n\nconst handleChange =\n    ({ onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const picker = event.target as Picker;\n        if (onChange) onChange(picker.value);\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>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-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</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};\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=\"--spectrum-picker-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=\"--spectrum-picker-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};\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>\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-divider></sp-menu-divider>\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};\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-divider></sp-menu-divider>\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-divider></sp-menu-divider>\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};\n\ncustom.args = {\n    open: true,\n};\n"],
+  "mappings": "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",
+  "names": []
+}