@spectrum-web-components/picker 0.10.3 → 0.10.4-express.0

package/src/spectrum-picker.css.js

@@ -0,0 +1,295 @@
+/*
+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 { css } from '@spectrum-web-components/base';
+const styles = css `
+#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(
+--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
+);line-height:var(
+--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
+);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(
+--spectrum-picker-textonly-padding-left
+);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right);padding-right:var(
+--spectrum-picker-textonly-padding-left
+)}#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(
+--spectrum-picker-texticon-disabled-border-size
+);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(
+--spectrum-picker-texticon-icon-gap
+)}:host([dir=rtl]) #button .icon{margin-left:var(
+--spectrum-picker-texticon-icon-gap
+)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:var(
+--spectrum-picker-texticon-icon-gap
+)}:host([dir=rtl]) #button #label+.icon{margin-right:var(
+--spectrum-picker-texticon-icon-gap
+)}:host([size=s]){--spectrum-picker-texticon-border-size:var(
+--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)
+);--spectrum-picker-texticon-text-size:var(
+--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)
+);--spectrum-picker-texticon-icon-gap:var(
+--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-error-icon-margin-left:var(
+--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)
+);--spectrum-picker-texticon-ui-icon-gap:var(
+--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)
+);--spectrum-picker-texticon-popover-max-width:var(
+--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)
+);--spectrum-picker-texticon-height:var(
+--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)
+);--spectrum-picker-texticon-min-width:var(
+--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)
+);--spectrum-picker-texticon-width:var(
+--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)
+);--spectrum-picker-texticon-border-radius:var(
+--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)
+);--spectrum-picker-textonly-padding-left:var(
+--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)
+);--spectrum-picker-textonly-padding-right:var(
+--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)
+)}:host([size=m]){--spectrum-picker-texticon-border-size:var(
+--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)
+);--spectrum-picker-texticon-text-size:var(
+--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)
+);--spectrum-picker-texticon-icon-gap:var(
+--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-error-icon-margin-left:var(
+--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)
+);--spectrum-picker-texticon-ui-icon-gap:var(
+--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)
+);--spectrum-picker-texticon-popover-max-width:var(
+--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)
+);--spectrum-picker-texticon-height:var(
+--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)
+);--spectrum-picker-texticon-min-width:var(
+--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)
+);--spectrum-picker-texticon-width:var(
+--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)
+);--spectrum-picker-texticon-border-radius:var(
+--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
+);--spectrum-picker-textonly-padding-left:var(
+--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)
+);--spectrum-picker-textonly-padding-right:var(
+--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)
+)}:host([size=l]){--spectrum-picker-texticon-border-size:var(
+--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)
+);--spectrum-picker-texticon-text-size:var(
+--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)
+);--spectrum-picker-texticon-icon-gap:var(
+--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-error-icon-margin-left:var(
+--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)
+);--spectrum-picker-texticon-ui-icon-gap:var(
+--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)
+);--spectrum-picker-texticon-popover-max-width:var(
+--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)
+);--spectrum-picker-texticon-height:var(
+--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)
+);--spectrum-picker-texticon-min-width:var(
+--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)
+);--spectrum-picker-texticon-width:var(
+--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)
+);--spectrum-picker-texticon-border-radius:var(
+--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)
+);--spectrum-picker-textonly-padding-left:var(
+--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)
+);--spectrum-picker-textonly-padding-right:var(
+--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)
+)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(
+--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)
+);--spectrum-picker-texticon-text-size:var(
+--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)
+);--spectrum-picker-texticon-icon-gap:var(
+--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-error-icon-margin-left:var(
+--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)
+);--spectrum-picker-texticon-ui-icon-gap:var(
+--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)
+);--spectrum-picker-texticon-popover-max-width:var(
+--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)
+);--spectrum-picker-texticon-height:var(
+--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)
+);--spectrum-picker-texticon-min-width:var(
+--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)
+);--spectrum-picker-texticon-width:var(
+--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)
+);--spectrum-picker-texticon-border-radius:var(
+--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)
+);--spectrum-picker-textonly-padding-left:var(
+--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)
+);--spectrum-picker-textonly-padding-right:var(
+--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)
+)}:host{--spectrum-picker-texticon-min-width:var(
+--spectrum-global-dimension-size-400
+);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(
+--spectrum-global-dimension-size-3000
+);--spectrum-picker-texticon-width:var(
+--spectrum-global-dimension-size-2400
+);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}: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(
+--spectrum-picker-texticon-placeholder-font-weight
+);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(
+--spectrum-picker-texticon-error-icon-margin-left
+)}:host([dir=rtl]) .validation-icon{margin-right:var(
+--spectrum-picker-texticon-error-icon-margin-left
+)}:host([dir=ltr]) #label~.picker{margin-left:var(
+--spectrum-picker-texticon-ui-icon-gap
+)}:host([dir=rtl]) #label~.picker{margin-right:var(
+--spectrum-picker-texticon-ui-icon-gap
+)}#popover{max-width:var(
+--spectrum-picker-texticon-popover-max-width
+)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(
+--spectrum-picker-m-quiet-texticon-popover-offset-x,
+var(--spectrum-global-dimension-size-150)
+) + var(
+--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)
+))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(
+--spectrum-picker-m-quiet-texticon-popover-offset-x,
+var(--spectrum-global-dimension-size-150)
+) + var(
+--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)
+))*-1)}#button{background-color:var(
+--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)
+);border-color:var(
+--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)
+);color:var(
+--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)
+)}#button:hover{background-color:var(
+--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)
+);border-color:var(
+--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)
+);color:var(
+--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
+)}#button:hover .picker{color:var(
+--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)
+)}#button:active,:host([open]) #button{background-color:var(
+--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)
+);border-color:var(
+--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)
+)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)
+)}#button.focus-visible,:host([focused]) #button{background-color:var(
+--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
+);border-color:var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+);color:var(
+--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
+)}#button:focus-visible,:host([focused]) #button{background-color:var(
+--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)
+);border-color:var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+);color:var(
+--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
+)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
+)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
+)}:host([invalid]) #button{border-color:var(
+--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)
+)}:host([invalid]) #button .validation-icon{color:var(
+--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)
+)}:host([invalid]) #button:hover{border-color:var(
+--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)
+)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(
+--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)
+)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+)}#button:disabled,:host([disabled]) #button{background-color:var(
+--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)
+);color:var(
+--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
+)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(
+--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)
+)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)
+)}.picker{color:var(
+--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)
+)}#label.placeholder{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)
+)}#label.placeholder:hover{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)
+)}#label.placeholder:active{color:var(
+--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)
+)}:host([quiet]) #button{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)
+);border-color:var(
+--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)
+);color:var(
+--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)
+)}:host([quiet]) #button:hover{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)
+);color:var(
+--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
+)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
+);box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
+);box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(
+--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
+)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(
+--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
+)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(
+--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
+)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(
+--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)
+)}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)
+);border-color:var(
+--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)
+)}: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(
+--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
+);box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-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(
+--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)
+);box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)
+)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(
+--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)
+)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(
+--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)
+);color:var(
+--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
+)}
+`;
+export default styles;
+//# sourceMappingURL=spectrum-picker.css.js.map

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRjB,CAAC;AACF,eAAe,MAAM,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*/\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\n);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right);padding-right:var(\n--spectrum-picker-textonly-padding-left\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:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button #label+.icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}: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-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-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)}:host([size=m]){--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-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)}: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-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-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)}: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-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-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)}: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}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}: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(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);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(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);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-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\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.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: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-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\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-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-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][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;"]}

package/stories/picker-sizes.stories.js

@@ -0,0 +1,51 @@
+/*
+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';
+export default {
+    title: 'Picker/Sizes',
+    component: 'sp-picker',
+    argTypes: {
+        onChange: { action: 'change' },
+    },
+};
+const picker = ({ onChange, size, }) => {
+    return html `
+        <sp-field-label for="picker-${size}" size=${size}>
+            Where do you live?
+        </sp-field-label>
+        <sp-picker
+            id="picker-${size}"
+            size=${size}
+            @change="${(event) => {
+        const picker = event.target;
+        onChange(picker.value);
+    }}"
+            label="Select a Country with a very long label, too long, in fact"
+        >
+            <sp-menu-item>Deselect</sp-menu-item>
+            <sp-menu-item>Select Inverse</sp-menu-item>
+            <sp-menu-item>Feather...</sp-menu-item>
+            <sp-menu-item>Select and Mask...</sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-item>Save Selection</sp-menu-item>
+            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+        </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

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

@@ -0,0 +1 @@
+{"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"]}