@spectrum-web-components/picker 0.40.4 → 0.40.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +15 -15
- package/src/picker.css.dev.js +124 -118
- package/src/picker.css.dev.js.map +2 -2
- package/src/picker.css.js +124 -118
- package/src/picker.css.js.map +2 -2
- package/src/spectrum-picker.css.dev.js +124 -118
- package/src/spectrum-picker.css.dev.js.map +2 -2
- package/src/spectrum-picker.css.js +124 -118
- package/src/spectrum-picker.css.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(\n--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)\n);justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,border-color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:disabled{cursor:default}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(\n--spectrum-default-font-style\n);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-picker-spacing-edge-to-text-quiet:var(\n--spectrum-field-edge-to-text-quiet\n);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-medium\n);--spectrum-picker-spacing-label-to-picker:var(\n--spectrum-field-label-to-component\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-medium\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-medium\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-medium\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-medium\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-medium\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(\n--spectrum-picker-end-edge-to-disclousure-icon-quiet\n);--spectrum-picker-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-picker-font-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-font-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-font-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-font-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-icon-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-icon-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-icon-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-border-color-error-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-picker-border-color-error-default-open:var(\n--spectrum-negative-border-color-focus\n);--spectrum-picker-border-color-error-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-picker-border-color-error-hover-open:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-picker-border-color-error-active:var(\n--spectrum-negative-border-color-down\n);--spectrum-picker-border-color-error-key-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-picker-font-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-picker-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-small\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-small\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-small\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-small\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-small\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-small\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-75\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-75\n)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-200\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-200\n)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-extra-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-300\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-extra-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-extra-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-extra-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-extra-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-extra-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-300\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-300\n)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:CanvasText;--highcontrast-picker-border-color-default:ButtonText;--highcontrast-picker-border-color-active:ButtonText;--highcontrast-picker-border-color-key-focus:Highlight;--highcontrast-picker-border-color-error-default-open:ButtonText;--highcontrast-picker-border-color-error-hover:ButtonText;--highcontrast-picker-border-color-error-active:ButtonText;--highcontrast-picker-font-color-default:ButtonText;--highcontrast-picker-font-color-default-open:ButtonText;--highcontrast-picker-font-color-key-focus:ButtonText;--highcontrast-picker-font-color-disabled:GrayText;--highcontrast-picker-background-color-default:Background;--highcontrast-picker-background-color-disabled:Background;--highcontrast-picker-icon-color-default:ButtonText;--highcontrast-picker-icon-color-default-open:ButtonText;--highcontrast-picker-icon-color-hover:ButtonText;--highcontrast-picker-icon-color-hover-open:ButtonText;--highcontrast-picker-icon-color-key-focus:Highlight;--highcontrast-picker-icon-color-error-default:ButtonText}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}}#button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)\n)\n);block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)\n)\n);border-radius:var(\n--mod-picker-border-radius,var(--spectrum-picker-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);box-sizing:border-box;color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);display:flex;inline-size:var(\n--mod-picker-inline-size,var(--spectrum-picker-inline-size)\n);margin-block-start:var(\n--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)\n);padding-inline-start:var(\n--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)\n);transition:background-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),box-shadow var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),border-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#button:after{block-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);border-color:#0000;border-radius:calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));border-style:solid;border-width:var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n);content:\"\";inline-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);inset-block:0;inset-inline:0;margin-block-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);margin-inline-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);pointer-events:none;position:absolute}#button:hover{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover,var(\n--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)\n)\n)}#button:active{background-color:var(\n--highcontrast-picker-background-active,var(\n--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)\n)\n);border-color:var(\n--highcontrast-picker-border-color-active,var(\n--mod-picker-border-active,var(--spectrum-picker-border-color-active)\n)\n)}#button:active:after{border-color:#0000}#button:active.placeholder .label{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button:focus-visible,:host([focused]) #button{background-color:var(\n--highcontrast-picker-background-color-default,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-key-focus,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button:focus-visible:after,:host([focused]) #button:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--highcontrast-picker-font-color-key-focus,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button:focus-visible .picker,:host([focused]) #button .picker{color:var(\n--highcontrast-picker-icon-color-key-focus,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}:host([invalid]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)\n)\n)}:host([invalid]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-error-default,var(\n--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)\n)\n)}:host([invalid]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover,var(\n--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)\n)\n)}:host([invalid]) #button:active{border-color:var(\n--highcontrast-picker-border-color-error-active,var(\n--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)\n)\n)}:host([invalid][open]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default-open,var(\n--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)\n)\n)}:host([invalid][open]) #button:hover{border-color:var(\n--highcontrast-picker-border-color-error-hover-open,var(\n--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)\n)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--highcontrast-picker-border-color-error-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}#button.is-loading .picker{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--highcontrast-picker-background-color-disabled,var(\n--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)\n)\n);border-color:#0000;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n);cursor:default}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--highcontrast-picker-icon-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled .label.placeholder,:host([disabled]) #button .label.placeholder{color:var(\n--highcontrast-picker-font-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n)}.icon{flex-shrink:0;margin-inline-end:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([open]) #button{background-color:var(\n--highcontrast-picker-background-default-open,var(\n--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default-open,var(\n--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default-open,var(\n--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)\n)\n)}:host([open]) #button:hover{background-color:var(\n--highcontrast-picker-background-color-hover-open,var(\n--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-hover-open,var(\n--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)\n)\n);color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)\n)\n)}:host([open]) #button:hover .picker{color:var(\n--highcontrast-picker-icon-color-hover-open,var(\n--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)\n)\n)}:host([open]) #button .picker{color:var(\n--highcontrast-picker-icon-color-default-open,var(\n--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)\n)\n)}:host([quiet]) #button{inline-size:auto;min-inline-size:0}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{border-color:#0000}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{border-color:#0000}.label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(\n--mod-picker-font-weight,var(--spectrum-picker-font-weight)\n);line-height:var(\n--mod-picker-line-height,var(--spectrum-picker-line-height)\n);margin-block-end:calc(var(\n--mod-picker-spacing-bottom-to-text,\nvar(--spectrum-picker-spacing-bottom-to-text)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(\n--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)\n);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}.label.placeholder{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);font-style:var(\n--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)\n);font-weight:var(\n--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)\n);transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}.label.placeholder:hover{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}.label.placeholder:active{color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}.picker{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)\n)\n);display:inline-block;flex-shrink:0;margin-block:var(\n--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon)\n);margin-inline-start:var(\n--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon)\n);position:relative;transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-out;vertical-align:top}.picker:active{color:var(\n--highcontrast-picker-icon-color-default,var(\n--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)\n)\n)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(\n--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)\n)}.validation-icon{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{background-color:#0000;border:none;border-radius:0;color:var(\n--highcontrast-picker-font-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);margin-block-start:calc(var(\n--mod-picker-spacing-label-to-picker-quiet,\nvar(--spectrum-picker-spacing-label-to-picker-quiet)\n) + 1px);padding-inline:var(\n--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)\n)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)\n)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}:host([quiet]) #button:hover{background-color:#0000}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:#0000}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:#0000}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:#0000}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(\n--system-spectrum-picker-background-color-default\n);--spectrum-picker-background-color-default-open:var(\n--system-spectrum-picker-background-color-default-open\n);--spectrum-picker-background-color-active:var(\n--system-spectrum-picker-background-color-active\n);--spectrum-picker-background-color-hover:var(\n--system-spectrum-picker-background-color-hover\n);--spectrum-picker-background-color-hover-open:var(\n--system-spectrum-picker-background-color-hover-open\n);--spectrum-picker-background-color-key-focus:var(\n--system-spectrum-picker-background-color-key-focus\n);--spectrum-picker-border-color-default:var(\n--system-spectrum-picker-border-color-default\n);--spectrum-picker-border-color-default-open:var(\n--system-spectrum-picker-border-color-default-open\n);--spectrum-picker-border-color-hover:var(\n--system-spectrum-picker-border-color-hover\n);--spectrum-picker-border-color-hover-open:var(\n--system-spectrum-picker-border-color-hover-open\n);--spectrum-picker-border-color-active:var(\n--system-spectrum-picker-border-color-active\n);--spectrum-picker-border-color-key-focus:var(\n--system-spectrum-picker-border-color-key-focus\n)}:host{display:inline-flex;inline-size:var(\n--spectrum-picker-width,var(--spectrum-global-dimension-size-2400)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));vertical-align:top}:host([quiet]){min-width:0;width:auto}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}sp-overlay:not(:defined){display:none}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(\n--mod-button-font-family,var(\n--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)\n)\n);justify-content:center;line-height:var(\n--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100))\n);margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(\n--mod-button-animation-duration,var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n)\n) ease-out,border-color var(\n--mod-button-animation-duration,var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n)\n) ease-out,color var(\n--mod-button-animation-duration,var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n)\n) ease-out,box-shadow var(\n--mod-button-animation-duration,var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n)\n) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(\n--spectrum-default-font-style\n);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-picker-spacing-edge-to-text-quiet:var(\n--spectrum-field-edge-to-text-quiet\n);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-medium\n);--spectrum-picker-spacing-label-to-picker:var(\n--spectrum-field-label-to-component\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-medium\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-medium\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-medium\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-medium\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-medium\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-100\n);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(\n--spectrum-picker-end-edge-to-disclousure-icon-quiet\n)}:host{--spectrum-picker-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-picker-font-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-font-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-font-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-font-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-font-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-font-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-picker-icon-color-default-open:var(\n--spectrum-neutral-content-color-focus\n);--spectrum-picker-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-picker-icon-color-hover-open:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-picker-icon-color-active:var(\n--spectrum-neutral-content-color-down\n);--spectrum-picker-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-picker-border-color-error-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-picker-border-color-error-default-open:var(\n--spectrum-negative-border-color-focus\n);--spectrum-picker-border-color-error-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-picker-border-color-error-hover-open:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-picker-border-color-error-active:var(\n--spectrum-negative-border-color-down\n);--spectrum-picker-border-color-error-key-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-picker-font-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-picker-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-small\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-small\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-small\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-small\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-small\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-small\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-75\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-75\n)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-200\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-200\n)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text-side-label-quiet:var(\n--spectrum-field-label-top-margin-extra-large\n);--spectrum-picker-spacing-top-to-text:var(\n--spectrum-component-top-to-text-300\n);--spectrum-picker-spacing-bottom-to-text:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-picker-spacing-edge-to-text:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-alert-icon-inline-start:var(\n--spectrum-field-text-to-alert-icon-extra-large\n);--spectrum-picker-spacing-icon-to-disclosure-icon:var(\n--spectrum-picker-visual-to-disclosure-icon-extra-large\n);--spectrum-picker-spacing-label-to-picker-quiet:var(\n--spectrum-field-label-to-component-quiet-extra-large\n);--spectrum-picker-spacing-top-to-alert-icon:var(\n--spectrum-field-top-to-alert-icon-extra-large\n);--spectrum-picker-spacing-top-to-progress-circle:var(\n--spectrum-field-top-to-progress-circle-extra-large\n);--spectrum-picker-spacing-top-to-disclosure-icon:var(\n--spectrum-field-top-to-disclosure-icon-300\n);--spectrum-picker-spacing-edge-to-disclosure-icon:var(\n--spectrum-field-end-edge-to-disclosure-icon-300\n)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.focus-visible,#button.is-keyboardFocused{--highcontrast-picker-border-color-hover:ButtonText}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button:after{forced-color-adjust:none}#button .label{forced-color-adjust:none}}#button{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)\n)\n);block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)\n)\n);border-radius:var(\n--mod-picker-border-radius,var(--spectrum-picker-border-radius)\n);border-style:solid;border-width:var(\n--mod-picker-border-width,var(--spectrum-picker-border-width)\n);box-sizing:border-box;color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);display:flex;inline-size:var(\n--mod-picker-inline-size,var(--spectrum-picker-inline-size)\n);margin-block-start:var(\n--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));padding-block:0;padding-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon)\n);padding-inline-start:var(\n--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text)\n);transition:background-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),box-shadow var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n),border-color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}#button:after{block-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);border-color:#0000;border-radius:calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));border-style:solid;border-width:var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n);content:\"\";inline-size:calc(100% + var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n)*2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width))*2);inset-block:0;inset-inline:0;margin-block-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);margin-inline-start:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-focus-indicator-thickness,\nvar(--spectrum-picker-focus-indicator-thickness)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1);pointer-events:none;position:absolute}#button:active{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-active,var(--spectrum-picker-border-color-active)\n)\n)}#button:active:after{border-color:#0000}#button:active.placeholder .label{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}#button.focus-visible,#button.is-keyboardFocused{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.is-keyboardFocused,#button:focus-visible{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)\n)\n);color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n);outline:none}#button.focus-visible:after,#button.is-keyboardFocused:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n)}#button.focus-visible.placeholder,#button.is-keyboardFocused.placeholder{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.is-keyboardFocused.placeholder,#button:focus-visible.placeholder{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)\n)\n)}#button.focus-visible .picker,#button.is-keyboardFocused .picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)\n)\n)}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled).focus-visible,:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused{border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused,:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)\n)\n)}#button.is-loading .picker{color:var(\n--highcontrast-picker-content-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)\n)\n);border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(\n--highcontrast-picker-content-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n);cursor:default}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--highcontrast-picker-content-color-disabled,var(\n--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)\n)\n)}#button:disabled .label.placeholder,:host([disabled]) #button .label.placeholder{color:var(\n--highcontrast-picker-content-color-disabled,var(\n--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)\n)\n)}.icon{flex-shrink:0;margin-inline-end:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([open]) #button:not(.spectrum-Picker--quiet){background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-default,var(\n--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)\n)\n);color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)\n)\n)}:host([open]) #button:not(.spectrum-Picker--quiet) .picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)\n)\n)}.label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(\n--mod-picker-font-weight,var(--spectrum-picker-font-weight)\n);line-height:var(\n--mod-picker-line-height,var(--spectrum-picker-line-height)\n);margin-block-end:calc(var(\n--mod-picker-spacing-bottom-to-text,\nvar(--spectrum-picker-spacing-bottom-to-text)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(\n--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)\n);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}.label.placeholder{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);font-style:var(\n--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style)\n);font-weight:var(\n--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)\n);transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-in-out}.label.placeholder:active{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)\n)\n)}.picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)\n)\n);display:inline-block;flex-shrink:0;margin-block:var(\n--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon)\n);margin-inline-start:var(\n--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon)\n);position:relative;transition:color var(\n--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)\n) ease-out;vertical-align:top}.picker:active{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)\n)\n)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(\n--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-alert-icon-inline-start)\n)}.validation-icon{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-alert-icon,\nvar(--spectrum-picker-spacing-top-to-alert-icon)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}#button .spectrum-ProgressCircle{margin-block-end:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:calc(var(\n--mod-picker-spacing-top-to-progress-circle,\nvar(--spectrum-picker-spacing-top-to-progress-circle)\n) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(\n--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)\n)}:host([quiet]) #button{background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)\n)\n);inline-size:auto;margin-block-start:calc(var(\n--mod-picker-spacing-label-to-picker-quiet,\nvar(--spectrum-picker-spacing-label-to-picker-quiet)\n) + 1px);min-inline-size:0;padding-inline:var(\n--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)\n)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(\n--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)\n)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}@media (hover:hover){#button:hover .picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)\n)\n)}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(\n--highcontrast-picker-border-color-hover,var(\n--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)\n)\n)}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(\n--highcontrast-picker-border-color-hover,var(\n--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)\n)\n)}:host([open]) #button:not(.spectrum-Picker--quiet):hover .picker{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)\n)\n)}.label.placeholder:hover{color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}#button:hover{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)\n)\n);border-color:var(\n--highcontrast-picker-border-color-hover,var(\n--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)\n)\n);color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)\n)\n)}:host([open]) #button:not(.spectrum-Picker--quiet):hover{background-color:var(\n--highcontrast-picker-background-color,var(\n--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)\n)\n);border-color:var(\n--highcontrast-picker-border-color-hover,var(\n--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)\n)\n);color:var(\n--highcontrast-picker-content-color-default,var(\n--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)\n)\n)}:host([quiet]) #button:hover{background-color:var(\n--highcontrast-picker-background-color,transparent\n)}}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-keyboardFocused{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.focus-visible:after,:host([quiet]) #button.is-keyboardFocused:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{border:none;border-radius:0;box-shadow:0 var(\n--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)\n) 0 0 var(\n--highcontrast-picker-focus-indicator-color,var(\n--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)\n)\n);margin:calc((var(\n--mod-picker-focus-indicator-gap,\nvar(--spectrum-picker-focus-indicator-gap)\n) + var(\n--mod-picker-border-width,\nvar(--spectrum-picker-border-width)\n))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(\n--system-spectrum-picker-background-color-default\n);--spectrum-picker-background-color-default-open:var(\n--system-spectrum-picker-background-color-default-open\n);--spectrum-picker-background-color-active:var(\n--system-spectrum-picker-background-color-active\n);--spectrum-picker-background-color-hover:var(\n--system-spectrum-picker-background-color-hover\n);--spectrum-picker-background-color-hover-open:var(\n--system-spectrum-picker-background-color-hover-open\n);--spectrum-picker-background-color-key-focus:var(\n--system-spectrum-picker-background-color-key-focus\n);--spectrum-picker-border-color-default:var(\n--system-spectrum-picker-border-color-default\n);--spectrum-picker-border-color-default-open:var(\n--system-spectrum-picker-border-color-default-open\n);--spectrum-picker-border-color-hover:var(\n--system-spectrum-picker-border-color-hover\n);--spectrum-picker-border-color-hover-open:var(\n--system-spectrum-picker-border-color-hover-open\n);--spectrum-picker-border-color-active:var(\n--system-spectrum-picker-border-color-active\n);--spectrum-picker-border-color-key-focus:var(\n--system-spectrum-picker-border-color-key-focus\n);--spectrum-picker-border-width:var(--system-spectrum-picker-border-width)}:host{display:inline-flex;inline-size:var(\n--spectrum-picker-width,var(--spectrum-global-dimension-size-2400)\n);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));vertical-align:top}:host([quiet]){min-width:0;width:auto}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}sp-overlay:not(:defined){display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkgBf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/picker.css.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
"use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
|
|
2
2
|
#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;cursor:pointer;display:inline-flex;font-family:var(
|
|
3
|
+
--mod-button-font-family,var(
|
|
3
4
|
--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)
|
|
4
|
-
)
|
|
5
|
+
)
|
|
6
|
+
);justify-content:center;line-height:var(
|
|
7
|
+
--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100))
|
|
8
|
+
);margin:0;overflow:visible;position:relative;-webkit-text-decoration:none;text-decoration:none;text-transform:none;transition:background var(
|
|
9
|
+
--mod-button-animation-duration,var(
|
|
5
10
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
11
|
+
)
|
|
6
12
|
) ease-out,border-color var(
|
|
13
|
+
--mod-button-animation-duration,var(
|
|
7
14
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
15
|
+
)
|
|
8
16
|
) ease-out,color var(
|
|
17
|
+
--mod-button-animation-duration,var(
|
|
9
18
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
19
|
+
)
|
|
10
20
|
) ease-out,box-shadow var(
|
|
21
|
+
--mod-button-animation-duration,var(
|
|
11
22
|
--mod-animation-duration-100,var(--spectrum-animation-duration-100)
|
|
12
|
-
)
|
|
23
|
+
)
|
|
24
|
+
) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}#button::-moz-focus-inner{border:0;margin-block:-2px;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(
|
|
13
25
|
--spectrum-default-font-style
|
|
14
26
|
);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(
|
|
15
27
|
--spectrum-component-top-to-text-100
|
|
@@ -39,7 +51,7 @@
|
|
|
39
51
|
--spectrum-field-end-edge-to-disclosure-icon-100
|
|
40
52
|
);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(
|
|
41
53
|
--spectrum-picker-end-edge-to-disclousure-icon-quiet
|
|
42
|
-
)
|
|
54
|
+
)}:host{--spectrum-picker-animation-duration:var(
|
|
43
55
|
--spectrum-animation-duration-100
|
|
44
56
|
);--spectrum-picker-font-color-default:var(
|
|
45
57
|
--spectrum-neutral-content-color-default
|
|
@@ -153,10 +165,8 @@
|
|
|
153
165
|
--spectrum-field-top-to-disclosure-icon-300
|
|
154
166
|
);--spectrum-picker-spacing-edge-to-disclosure-icon:var(
|
|
155
167
|
--spectrum-field-end-edge-to-disclosure-icon-300
|
|
156
|
-
)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:
|
|
157
|
-
--
|
|
158
|
-
)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{forced-color-adjust:none;outline:0}}#button{background-color:var(
|
|
159
|
-
--highcontrast-picker-background-color-default,var(
|
|
168
|
+
)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.focus-visible,#button.is-keyboardFocused{--highcontrast-picker-border-color-hover:ButtonText}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button:after{forced-color-adjust:none}#button .label{forced-color-adjust:none}}#button{background-color:var(
|
|
169
|
+
--highcontrast-picker-background-color,var(
|
|
160
170
|
--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)
|
|
161
171
|
)
|
|
162
172
|
);block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-color:var(
|
|
@@ -168,7 +178,7 @@
|
|
|
168
178
|
);border-style:solid;border-width:var(
|
|
169
179
|
--mod-picker-border-width,var(--spectrum-picker-border-width)
|
|
170
180
|
);box-sizing:border-box;color:var(
|
|
171
|
-
--highcontrast-picker-
|
|
181
|
+
--highcontrast-picker-content-color-default,var(
|
|
172
182
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
173
183
|
)
|
|
174
184
|
);display:flex;inline-size:var(
|
|
@@ -214,175 +224,129 @@ var(--spectrum-picker-focus-indicator-thickness)
|
|
|
214
224
|
) + var(
|
|
215
225
|
--mod-picker-border-width,
|
|
216
226
|
var(--spectrum-picker-border-width)
|
|
217
|
-
))*-1);pointer-events:none;position:absolute}#button:
|
|
218
|
-
--highcontrast-picker-background-color
|
|
219
|
-
--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)
|
|
220
|
-
)
|
|
221
|
-
);border-color:var(
|
|
222
|
-
--highcontrast-picker-border-color-default,var(
|
|
223
|
-
--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)
|
|
224
|
-
)
|
|
225
|
-
);color:var(
|
|
226
|
-
--highcontrast-picker-font-color-default,var(
|
|
227
|
-
--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
|
|
228
|
-
)
|
|
229
|
-
)}#button:hover .picker{color:var(
|
|
230
|
-
--highcontrast-picker-icon-color-hover,var(
|
|
231
|
-
--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)
|
|
232
|
-
)
|
|
233
|
-
)}#button:active{background-color:var(
|
|
234
|
-
--highcontrast-picker-background-active,var(
|
|
227
|
+
))*-1);pointer-events:none;position:absolute}#button:active{background-color:var(
|
|
228
|
+
--highcontrast-picker-background-color,var(
|
|
235
229
|
--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)
|
|
236
230
|
)
|
|
237
231
|
);border-color:var(
|
|
238
|
-
--highcontrast-picker-border-color-
|
|
232
|
+
--highcontrast-picker-border-color-default,var(
|
|
239
233
|
--mod-picker-border-active,var(--spectrum-picker-border-color-active)
|
|
240
234
|
)
|
|
241
235
|
)}#button:active:after{border-color:#0000}#button:active.placeholder .label{color:var(
|
|
242
|
-
--highcontrast-picker-
|
|
236
|
+
--highcontrast-picker-content-color-default,var(
|
|
243
237
|
--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)
|
|
244
238
|
)
|
|
245
|
-
)}#button.focus-visible
|
|
246
|
-
--highcontrast-picker-background-color
|
|
239
|
+
)}#button.focus-visible,#button.is-keyboardFocused{background-color:var(
|
|
240
|
+
--highcontrast-picker-background-color,var(
|
|
247
241
|
--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)
|
|
248
242
|
)
|
|
249
243
|
);border-color:var(
|
|
250
|
-
--highcontrast-picker-border-color-
|
|
244
|
+
--highcontrast-picker-border-color-default,var(
|
|
251
245
|
--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)
|
|
252
246
|
)
|
|
253
|
-
);border-width:var(
|
|
254
|
-
--mod-picker-border-width,var(--spectrum-picker-border-width)
|
|
255
247
|
);color:var(
|
|
256
|
-
--highcontrast-picker-
|
|
248
|
+
--highcontrast-picker-content-color-default,var(
|
|
257
249
|
--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
|
|
258
250
|
)
|
|
259
|
-
);outline:none}#button:focus-visible
|
|
260
|
-
--highcontrast-picker-background-color
|
|
251
|
+
);outline:none}#button.is-keyboardFocused,#button:focus-visible{background-color:var(
|
|
252
|
+
--highcontrast-picker-background-color,var(
|
|
261
253
|
--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)
|
|
262
254
|
)
|
|
263
255
|
);border-color:var(
|
|
264
|
-
--highcontrast-picker-border-color-
|
|
256
|
+
--highcontrast-picker-border-color-default,var(
|
|
265
257
|
--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)
|
|
266
258
|
)
|
|
267
|
-
);border-width:var(
|
|
268
|
-
--mod-picker-border-width,var(--spectrum-picker-border-width)
|
|
269
259
|
);color:var(
|
|
270
|
-
--highcontrast-picker-
|
|
260
|
+
--highcontrast-picker-content-color-default,var(
|
|
271
261
|
--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
|
|
272
262
|
)
|
|
273
|
-
);outline:none}#button.focus-visible:after
|
|
263
|
+
);outline:none}#button.focus-visible:after,#button.is-keyboardFocused:after{border-color:var(
|
|
274
264
|
--highcontrast-picker-focus-indicator-color,var(
|
|
275
265
|
--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
|
|
276
266
|
)
|
|
277
|
-
)}#button:focus-visible:after
|
|
267
|
+
)}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(
|
|
278
268
|
--highcontrast-picker-focus-indicator-color,var(
|
|
279
269
|
--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)
|
|
280
270
|
)
|
|
281
|
-
)}#button.focus-visible.placeholder
|
|
282
|
-
--highcontrast-picker-
|
|
271
|
+
)}#button.focus-visible.placeholder,#button.is-keyboardFocused.placeholder{color:var(
|
|
272
|
+
--highcontrast-picker-content-color-default,var(
|
|
283
273
|
--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
|
|
284
274
|
)
|
|
285
|
-
)}#button:focus-visible.placeholder
|
|
286
|
-
--highcontrast-picker-
|
|
275
|
+
)}#button.is-keyboardFocused.placeholder,#button:focus-visible.placeholder{color:var(
|
|
276
|
+
--highcontrast-picker-content-color-default,var(
|
|
287
277
|
--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)
|
|
288
278
|
)
|
|
289
|
-
)}#button.focus-visible .picker
|
|
290
|
-
--highcontrast-picker-
|
|
279
|
+
)}#button.focus-visible .picker,#button.is-keyboardFocused .picker{color:var(
|
|
280
|
+
--highcontrast-picker-content-color-default,var(
|
|
291
281
|
--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)
|
|
292
282
|
)
|
|
293
|
-
)}#button
|
|
294
|
-
--highcontrast-picker-
|
|
283
|
+
)}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(
|
|
284
|
+
--highcontrast-picker-content-color-default,var(
|
|
295
285
|
--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)
|
|
296
286
|
)
|
|
297
|
-
)}:host([invalid]) #button{border-color:var(
|
|
298
|
-
--highcontrast-picker-border-color-
|
|
287
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(
|
|
288
|
+
--highcontrast-picker-border-color-default,var(
|
|
299
289
|
--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)
|
|
300
290
|
)
|
|
301
|
-
)}:host([invalid]) #button .validation-icon{color:var(
|
|
302
|
-
--highcontrast-picker-
|
|
291
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(
|
|
292
|
+
--highcontrast-picker-content-color-default,var(
|
|
303
293
|
--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)
|
|
304
294
|
)
|
|
305
|
-
)}:host([invalid]) #button:
|
|
306
|
-
--highcontrast-picker-border-color-
|
|
307
|
-
--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)
|
|
308
|
-
)
|
|
309
|
-
)}:host([invalid]) #button:active{border-color:var(
|
|
310
|
-
--highcontrast-picker-border-color-error-active,var(
|
|
295
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(
|
|
296
|
+
--highcontrast-picker-border-color-default,var(
|
|
311
297
|
--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)
|
|
312
298
|
)
|
|
313
|
-
)}:host([invalid][open]) #button{border-color:var(
|
|
314
|
-
--highcontrast-picker-border-color-
|
|
299
|
+
)}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(
|
|
300
|
+
--highcontrast-picker-border-color-default,var(
|
|
315
301
|
--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)
|
|
316
302
|
)
|
|
317
|
-
)}:host([invalid][
|
|
318
|
-
--highcontrast-picker-border-color-
|
|
319
|
-
--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)
|
|
320
|
-
)
|
|
321
|
-
)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(
|
|
322
|
-
--highcontrast-picker-border-color-error-default,var(
|
|
303
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled).focus-visible,:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused{border-color:var(
|
|
304
|
+
--highcontrast-picker-border-color-default,var(
|
|
323
305
|
--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)
|
|
324
306
|
)
|
|
325
|
-
)}:host([invalid]) #button:
|
|
326
|
-
--highcontrast-picker-border-color-
|
|
307
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled).is-keyboardFocused,:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(
|
|
308
|
+
--highcontrast-picker-border-color-default,var(
|
|
327
309
|
--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)
|
|
328
310
|
)
|
|
329
311
|
)}#button.is-loading .picker{color:var(
|
|
330
|
-
--highcontrast-picker-
|
|
312
|
+
--highcontrast-picker-content-color-disabled,var(
|
|
331
313
|
--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)
|
|
332
314
|
)
|
|
333
315
|
)}#button:disabled,:host([disabled]) #button{background-color:var(
|
|
334
|
-
--highcontrast-picker-background-color
|
|
316
|
+
--highcontrast-picker-background-color,var(
|
|
335
317
|
--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)
|
|
336
318
|
)
|
|
337
|
-
);border-color
|
|
338
|
-
--
|
|
339
|
-
);color:var(
|
|
340
|
-
--highcontrast-picker-font-color-disabled,var(
|
|
319
|
+
);border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(
|
|
320
|
+
--highcontrast-picker-content-color-disabled,var(
|
|
341
321
|
--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)
|
|
342
322
|
)
|
|
343
323
|
);cursor:default}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(
|
|
344
|
-
--highcontrast-picker-
|
|
324
|
+
--highcontrast-picker-content-color-disabled,var(
|
|
345
325
|
--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)
|
|
346
326
|
)
|
|
347
327
|
)}#button:disabled .label.placeholder,:host([disabled]) #button .label.placeholder{color:var(
|
|
348
|
-
--highcontrast-picker-
|
|
328
|
+
--highcontrast-picker-content-color-disabled,var(
|
|
349
329
|
--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)
|
|
350
330
|
)
|
|
351
331
|
)}.icon{flex-shrink:0;margin-inline-end:var(
|
|
352
332
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
353
|
-
)}:host([open]) #button{background-color:var(
|
|
354
|
-
--highcontrast-picker-background-
|
|
333
|
+
)}:host([open]) #button:not(.spectrum-Picker--quiet){background-color:var(
|
|
334
|
+
--highcontrast-picker-background-color,var(
|
|
355
335
|
--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)
|
|
356
336
|
)
|
|
357
337
|
);border-color:var(
|
|
358
|
-
--highcontrast-picker-border-color-default
|
|
338
|
+
--highcontrast-picker-border-color-default,var(
|
|
359
339
|
--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)
|
|
360
340
|
)
|
|
361
341
|
);color:var(
|
|
362
|
-
--highcontrast-picker-
|
|
342
|
+
--highcontrast-picker-content-color-default,var(
|
|
363
343
|
--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)
|
|
364
344
|
)
|
|
365
|
-
)}:host([open]) #button:
|
|
366
|
-
--highcontrast-picker-
|
|
367
|
-
--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)
|
|
368
|
-
)
|
|
369
|
-
);border-color:var(
|
|
370
|
-
--highcontrast-picker-border-color-hover-open,var(
|
|
371
|
-
--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)
|
|
372
|
-
)
|
|
373
|
-
);color:var(
|
|
374
|
-
--highcontrast-picker-font-color-default,var(
|
|
375
|
-
--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)
|
|
376
|
-
)
|
|
377
|
-
)}:host([open]) #button:hover .picker{color:var(
|
|
378
|
-
--highcontrast-picker-icon-color-hover-open,var(
|
|
379
|
-
--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)
|
|
380
|
-
)
|
|
381
|
-
)}:host([open]) #button .picker{color:var(
|
|
382
|
-
--highcontrast-picker-icon-color-default-open,var(
|
|
345
|
+
)}:host([open]) #button:not(.spectrum-Picker--quiet) .picker{color:var(
|
|
346
|
+
--highcontrast-picker-content-color-default,var(
|
|
383
347
|
--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)
|
|
384
348
|
)
|
|
385
|
-
)}
|
|
349
|
+
)}.label{flex:auto;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));font-weight:var(
|
|
386
350
|
--mod-picker-font-weight,var(--spectrum-picker-font-weight)
|
|
387
351
|
);line-height:var(
|
|
388
352
|
--mod-picker-line-height,var(--spectrum-picker-line-height)
|
|
@@ -392,7 +356,7 @@ var(--spectrum-picker-spacing-bottom-to-text)
|
|
|
392
356
|
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));margin-block-start:var(
|
|
393
357
|
--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text)
|
|
394
358
|
);overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap}.label.placeholder{color:var(
|
|
395
|
-
--highcontrast-picker-
|
|
359
|
+
--highcontrast-picker-content-color-default,var(
|
|
396
360
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
397
361
|
)
|
|
398
362
|
);font-style:var(
|
|
@@ -401,16 +365,12 @@ var(--spectrum-picker-spacing-bottom-to-text)
|
|
|
401
365
|
--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight)
|
|
402
366
|
);transition:color var(
|
|
403
367
|
--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
|
|
404
|
-
) ease-in-out}.label.placeholder:
|
|
405
|
-
--highcontrast-picker-
|
|
406
|
-
--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
|
|
407
|
-
)
|
|
408
|
-
)}.label.placeholder:active{color:var(
|
|
409
|
-
--highcontrast-picker-font-color-default,var(
|
|
368
|
+
) ease-in-out}.label.placeholder:active{color:var(
|
|
369
|
+
--highcontrast-picker-content-color-default,var(
|
|
410
370
|
--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)
|
|
411
371
|
)
|
|
412
372
|
)}.picker{color:var(
|
|
413
|
-
--highcontrast-picker-
|
|
373
|
+
--highcontrast-picker-content-color-default,var(
|
|
414
374
|
--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)
|
|
415
375
|
)
|
|
416
376
|
);display:inline-block;flex-shrink:0;margin-block:var(
|
|
@@ -420,7 +380,7 @@ var(--spectrum-picker-spacing-bottom-to-text)
|
|
|
420
380
|
);position:relative;transition:color var(
|
|
421
381
|
--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)
|
|
422
382
|
) ease-out;vertical-align:top}.picker:active{color:var(
|
|
423
|
-
--highcontrast-picker-
|
|
383
|
+
--highcontrast-picker-content-color-default,var(
|
|
424
384
|
--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)
|
|
425
385
|
)
|
|
426
386
|
)}#button .spectrum-ProgressCircle,.validation-icon{margin-inline-start:var(
|
|
@@ -439,18 +399,64 @@ var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
|
439
399
|
var(--spectrum-picker-spacing-top-to-progress-circle)
|
|
440
400
|
) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(
|
|
441
401
|
--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon)
|
|
442
|
-
)}:host([quiet]) #button{background-color
|
|
443
|
-
--highcontrast-picker-
|
|
402
|
+
)}:host([quiet]) #button{background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;color:var(
|
|
403
|
+
--highcontrast-picker-content-color-default,var(
|
|
444
404
|
--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)
|
|
445
405
|
)
|
|
446
|
-
);margin-block-start:calc(var(
|
|
406
|
+
);inline-size:auto;margin-block-start:calc(var(
|
|
447
407
|
--mod-picker-spacing-label-to-picker-quiet,
|
|
448
408
|
var(--spectrum-picker-spacing-label-to-picker-quiet)
|
|
449
|
-
) + 1px);padding-inline:var(
|
|
409
|
+
) + 1px);min-inline-size:0;padding-inline:var(
|
|
450
410
|
--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet)
|
|
451
411
|
)}:host([quiet]) #button.spectrum-Picker--sideLabel{margin-block-start:calc(var(--spectrum-picker-spacing-top-to-text-side-label-quiet)*-1)}:host([quiet]) #button .picker{margin-inline-end:var(
|
|
452
412
|
--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)
|
|
453
|
-
)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}
|
|
413
|
+
)}:host([quiet]) #button:after{block-size:auto;border:none;inline-size:auto}@media (hover:hover){#button:hover .picker{color:var(
|
|
414
|
+
--highcontrast-picker-content-color-default,var(
|
|
415
|
+
--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)
|
|
416
|
+
)
|
|
417
|
+
)}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(
|
|
418
|
+
--highcontrast-picker-border-color-hover,var(
|
|
419
|
+
--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)
|
|
420
|
+
)
|
|
421
|
+
)}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(
|
|
422
|
+
--highcontrast-picker-border-color-hover,var(
|
|
423
|
+
--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)
|
|
424
|
+
)
|
|
425
|
+
)}:host([open]) #button:not(.spectrum-Picker--quiet):hover .picker{color:var(
|
|
426
|
+
--highcontrast-picker-content-color-default,var(
|
|
427
|
+
--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)
|
|
428
|
+
)
|
|
429
|
+
)}.label.placeholder:hover{color:var(
|
|
430
|
+
--highcontrast-picker-content-color-default,var(
|
|
431
|
+
--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
|
|
432
|
+
)
|
|
433
|
+
)}#button:hover{background-color:var(
|
|
434
|
+
--highcontrast-picker-background-color,var(
|
|
435
|
+
--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)
|
|
436
|
+
)
|
|
437
|
+
);border-color:var(
|
|
438
|
+
--highcontrast-picker-border-color-hover,var(
|
|
439
|
+
--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)
|
|
440
|
+
)
|
|
441
|
+
);color:var(
|
|
442
|
+
--highcontrast-picker-content-color-default,var(
|
|
443
|
+
--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)
|
|
444
|
+
)
|
|
445
|
+
)}:host([open]) #button:not(.spectrum-Picker--quiet):hover{background-color:var(
|
|
446
|
+
--highcontrast-picker-background-color,var(
|
|
447
|
+
--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)
|
|
448
|
+
)
|
|
449
|
+
);border-color:var(
|
|
450
|
+
--highcontrast-picker-border-color-hover,var(
|
|
451
|
+
--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)
|
|
452
|
+
)
|
|
453
|
+
);color:var(
|
|
454
|
+
--highcontrast-picker-content-color-default,var(
|
|
455
|
+
--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)
|
|
456
|
+
)
|
|
457
|
+
)}:host([quiet]) #button:hover{background-color:var(
|
|
458
|
+
--highcontrast-picker-background-color,transparent
|
|
459
|
+
)}}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-keyboardFocused{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.focus-visible:after,:host([quiet]) #button.is-keyboardFocused:after{border:none;border-radius:0;box-shadow:0 var(
|
|
454
460
|
--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
|
|
455
461
|
) 0 0 var(
|
|
456
462
|
--highcontrast-picker-focus-indicator-color,var(
|
|
@@ -462,7 +468,7 @@ var(--spectrum-picker-focus-indicator-gap)
|
|
|
462
468
|
) + var(
|
|
463
469
|
--mod-picker-border-width,
|
|
464
470
|
var(--spectrum-picker-border-width)
|
|
465
|
-
))*-1) 0}:host([quiet]) #button
|
|
471
|
+
))*-1) 0}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{border:none;border-radius:0;box-shadow:0 var(
|
|
466
472
|
--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)
|
|
467
473
|
) 0 0 var(
|
|
468
474
|
--highcontrast-picker-focus-indicator-color,var(
|
|
@@ -474,7 +480,7 @@ var(--spectrum-picker-focus-indicator-gap)
|
|
|
474
480
|
) + var(
|
|
475
481
|
--mod-picker-border-width,
|
|
476
482
|
var(--spectrum-picker-border-width)
|
|
477
|
-
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color
|
|
483
|
+
))*-1) 0}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(--highcontrast-picker-background-color,transparent)}.spectrum-Picker--sideLabel{display:inline-flex;vertical-align:top}:host{--spectrum-picker-background-color-default:var(
|
|
478
484
|
--system-spectrum-picker-background-color-default
|
|
479
485
|
);--spectrum-picker-background-color-default-open:var(
|
|
480
486
|
--system-spectrum-picker-background-color-default-open
|
|
@@ -498,7 +504,7 @@ var(--spectrum-picker-border-width)
|
|
|
498
504
|
--system-spectrum-picker-border-color-active
|
|
499
505
|
);--spectrum-picker-border-color-key-focus:var(
|
|
500
506
|
--system-spectrum-picker-border-color-key-focus
|
|
501
|
-
)}:host{display:inline-flex;inline-size:var(
|
|
507
|
+
);--spectrum-picker-border-width:var(--system-spectrum-picker-border-width)}:host{display:inline-flex;inline-size:var(
|
|
502
508
|
--spectrum-picker-width,var(--spectrum-global-dimension-size-2400)
|
|
503
509
|
);max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size, var(--spectrum-picker-block-size)));vertical-align:top}:host([quiet]){min-width:0;width:auto}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:auto}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
504
510
|
--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
|