@spectrum-web-components/picker 0.41.2 → 0.42.1

package/src/Picker.js

@@ -1,22 +1,22 @@
-"use strict";var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var s=(d,a,e,t)=>{for(var i=t>1?void 0:t?b(a,e):a,o=d.length-1,l;o>=0;o--)(l=d[o])&&(i=(t?l(a,e,i):l(i))||i);return t&&i&&m(a,e,i),i};import{html as n,nothing as f,SizedMixin as v}from"@spectrum-web-components/base";import{classMap as y,ifDefined as c,styleMap as h}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as p,state as u}from"@spectrum-web-components/base/src/decorators.js";import g from"./picker.css.js";import w from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as I}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/menu/sp-menu.js";import{IS_MOBILE as M,MatchMediaController as S}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";const $={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export const DESCRIPTION_ID="option-picker";export class PickerBase extends v(I,{noDefaultSize:!0}){constructor(){super(...arguments);this.isMobile=new S(this,M);this.deprecatedMenu=null;this.disabled=!1;this.focused=!1;this.invalid=!1;this.open=!1;this.readonly=!1;this.selects="single";this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.preventNextToggle="no";this.pointerdownState=!1;this.handleKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.stopPropagation(),e.preventDefault(),this.toggle(!0))};this.applyFocusElementLabel=(e,t)=>{this.appliedLabel=e,this.labelAlignment=t.sideAligned?"inline":void 0};this.dependenciesLoaded=!1;this.dependenciesToLoad={};this.hasRenderedOverlay=!1;this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.recentlyConnected=!1;this.enterKeydownOn=null;this.handleEnterKeydown=e=>{if(e.code==="Enter"){if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener("keyup",async t=>{t.code==="Enter"&&(this.enterKeydownOn=null)},{once:!0})}}}get menuItems(){return this.optionsMenu.childItems}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.disabled||(this.focused=!0)}click(){this.disabled||this.toggle()}handleButtonBlur(){this.focused=!1}handleButtonPointerdown(e){if(e.button!==0)return;this.pointerdownState=this.open,this.preventNextToggle="maybe";const t=()=>{document.removeEventListener("pointerup",t),document.removeEventListener("pointercancel",t),requestAnimationFrame(()=>{this.preventNextToggle="no"})};document.addEventListener("pointerup",t),document.addEventListener("pointercancel",t),this.handleActivate()}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.optionsMenu&&(this.preventNextToggle="yes")}handleActivate(e){this.enterKeydownOn&&this.enterKeydownOn!==this.button||this.preventNextToggle!=="yes"&&((e==null?void 0:e.type)==="click"&&this.open!==this.pointerdownState||this.toggle())}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleHelperFocus(){this.focused=!0,this.button.focus()}handleChange(e){const t=e.target,[i]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(i,e):this.open=!1}async setValueFromItem(e,t){this.open=!1;const i=this.selectedItem,o=this.value;if(this.selectedItem=e,this.value=e.value,await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),i&&this.setMenuItemSelected(i,!0),this.selectedItem=i,this.value=o,this.open=!0;return}else if(!this.selects){this.selectedItem=i,this.value=o;return}i&&this.setMenuItemSelected(i,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){this.readonly||(this.open=typeof e!="undefined"?e:!this.open)}close(){this.readonly||(this.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}renderLabelContent(e){return this.value&&this.selectedItem?e:n`
+"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=(d,a,e,t)=>{for(var i=t>1?void 0:t?f(a,e):a,r=d.length-1,o;r>=0;r--)(o=d[r])&&(i=(t?o(a,e,i):o(i))||i);return t&&i&&m(a,e,i),i};import{html as s,nothing as b,SizedMixin as v}from"@spectrum-web-components/base";import{classMap as y,ifDefined as p,styleMap as h,when as g}from"@spectrum-web-components/base/src/directives.js";import{property as l,query as c,state as u}from"@spectrum-web-components/base/src/decorators.js";import w from"./picker.css.js";import I from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as M}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/menu/sp-menu.js";import{IS_MOBILE as S,MatchMediaController as $}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import{DependencyManagerController as E}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";const C={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export const DESCRIPTION_ID="option-picker";export class PickerBase extends v(M,{noDefaultSize:!0}){constructor(){super(...arguments);this.isMobile=new $(this,S);this.dependencyManager=new E(this);this.deprecatedMenu=null;this.disabled=!1;this.focused=!1;this.invalid=!1;this.pending=!1;this.pendingLabel="Pending";this.open=!1;this.readonly=!1;this.selects="single";this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.preventNextToggle="no";this.pointerdownState=!1;this.handleKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.stopPropagation(),e.preventDefault(),this.toggle(!0))};this.applyFocusElementLabel=(e,t)=>{this.appliedLabel=e,this.labelAlignment=t.sideAligned?"inline":void 0};this.hasRenderedOverlay=!1;this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.recentlyConnected=!1;this.enterKeydownOn=null;this.handleEnterKeydown=e=>{if(e.code==="Enter"){if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener("keyup",async t=>{t.code==="Enter"&&(this.enterKeydownOn=null)},{once:!0})}}}get menuItems(){return this.optionsMenu.childItems}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.disabled||(this.focused=!0)}click(){this.disabled||this.toggle()}handleButtonBlur(){this.focused=!1}handleButtonPointerdown(e){if(e.button!==0)return;this.pointerdownState=this.open,this.preventNextToggle="maybe";let t=0;const i=()=>{cancelAnimationFrame(t),t=requestAnimationFrame(async()=>{document.removeEventListener("pointerup",i),document.removeEventListener("pointercancel",i),this.button.removeEventListener("click",i),requestAnimationFrame(()=>{this.preventNextToggle="no"})})};document.addEventListener("pointerup",i),document.addEventListener("pointercancel",i),this.button.addEventListener("click",i),this.handleActivate()}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.optionsMenu&&(this.preventNextToggle="yes")}handleActivate(e){this.enterKeydownOn&&this.enterKeydownOn!==this.button||this.preventNextToggle!=="yes"&&((e==null?void 0:e.type)==="click"&&this.open!==this.pointerdownState||this.toggle())}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleHelperFocus(){this.focused=!0,this.button.focus()}handleChange(e){this.preventNextToggle="no";const t=e.target,[i]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(i,e):this.open=!1}async setValueFromItem(e,t){this.open=!1;const i=this.selectedItem,r=this.value;if(this.selectedItem=e,this.value=e.value,await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),i&&this.setMenuItemSelected(i,!0),this.selectedItem=i,this.value=r,this.open=!0;return}else if(!this.selects){this.selectedItem=i,this.value=r;return}i&&this.setMenuItemSelected(i,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){this.readonly||this.pending||(this.open=typeof e!="undefined"?e:!this.open)}close(){this.readonly||(this.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}handleBeforetoggle(e){e.composedPath()[0]===e.target&&(e.newState==="closed"&&(this.preventNextToggle==="no"?this.open=!1:this.pointerdownState||this.overlayElement.manuallyKeepOpen()),this.open||(this.optionsMenu.updateSelectedItemIndex(),this.optionsMenu.closeDescendentOverlays()))}renderLabelContent(e){return this.value&&this.selectedItem?e:s`
             <slot name="label" id="label">
                 <span
-                    aria-hidden=${c(this.appliedLabel?void 0:"true")}
+                    aria-hidden=${p(this.appliedLabel?void 0:"true")}
                 >
                     ${this.label}
                 </span>
             </slot>
-        `}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value,label:!0},t=this.appliedLabel||this.label;return[n`
+        `}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value,label:!0},t=this.appliedLabel||this.label;return[s`
                 <span id="icon" ?hidden=${this.icons==="none"}>
                     ${this.selectedItemContent.icon}
                 </span>
                 <span
-                    id=${c(this.value&&this.selectedItem?"label":void 0)}
+                    id=${p(this.value&&this.selectedItem?"label":void 0)}
                     class=${y(e)}
                 >
                     ${this.renderLabelContent(this.selectedItemContent.content)}
                 </span>
-                ${this.value&&this.selectedItem?n`
+                ${this.value&&this.selectedItem?s`
                           <span
                               aria-hidden="true"
                               class="visually-hidden"
@@ -25,16 +25,25 @@
                               ${t}
                               <slot name="label"></slot>
                           </span>
-                      `:n`
+                      `:s`
                           <span hidden id="applied-label">${t}</span>
                       `}
-                ${this.invalid?n`
+                ${this.invalid&&!this.pending?s`
                           <sp-icon-alert
                               class="validation-icon"
                           ></sp-icon-alert>
-                      `:f}
+                      `:b}
+                ${g(this.pending,()=>(import("@spectrum-web-components/progress-circle/sp-progress-circle.js"),s`
+                        <sp-progress-circle
+                            id="loader"
+                            size="s"
+                            indeterminate
+                            aria-valuetext=${this.pendingLabel}
+                            class="progress-circle"
+                        ></sp-progress-circle>
+                    `))}
                 <sp-icon-chevron100
-                    class="picker ${$[this.size]}"
+                    class="picker ${C[this.size]}"
                 ></sp-icon-chevron100>
                 <slot
                     aria-hidden="true"
@@ -42,24 +51,24 @@
                     id="tooltip"
                     @slotchange=${this.handleTooltipSlotchange}
                 ></slot>
-            `]}renderOverlay(e){const t=this.renderContainer(e);return this.trackDependency("sp-overlay"),import("@spectrum-web-components/overlay/sp-overlay.js"),n`
+            `]}renderOverlay(e){const t=this.renderContainer(e);return this.dependencyManager.add("sp-overlay"),import("@spectrum-web-components/overlay/sp-overlay.js"),s`
             <sp-overlay
                 .triggerElement=${this}
                 .offset=${0}
-                ?open=${this.open&&this.dependenciesLoaded}
+                ?open=${this.open&&this.dependencyManager.loaded}
                 .placement=${this.isMobile.matches?void 0:this.placement}
                 .type=${this.isMobile.matches?"modal":"auto"}
                 .receivesFocus=${"true"}
-                .willPreventClose=${this.preventNextToggle!=="no"&&this.open&&this.dependenciesLoaded}
-                @beforetoggle=${i=>{i.composedPath()[0]===i.target&&(i.newState==="closed"&&(this.open=!1),this.open||(this.optionsMenu.updateSelectedItemIndex(),this.optionsMenu.closeDescendentOverlays()))}}
+                .willPreventClose=${this.preventNextToggle!=="no"&&this.open&&this.dependencyManager.loaded}
+                @beforetoggle=${this.handleBeforetoggle}
             >
                 ${t}
             </sp-overlay>
-        `}get renderDescriptionSlot(){return n`
+        `}get renderDescriptionSlot(){return s`
             <div id=${DESCRIPTION_ID}>
                 <slot name="description"></slot>
             </div>
-        `}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),n`
+        `}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),s`
             <span
                 id="focus-helper"
                 tabindex="${this.focused||this.open?"-1":"0"}"
@@ -67,13 +76,13 @@
                 aria-describedby=${DESCRIPTION_ID}
             ></span>
             <button
-                aria-controls=${c(this.open?"menu":void 0)}
+                aria-controls=${p(this.open?"menu":void 0)}
                 aria-describedby="tooltip"
                 aria-expanded=${this.open?"true":"false"}
                 aria-haspopup="true"
-                aria-labelledby="icon label applied-label"
+                aria-labelledby="loader icon label applied-label"
                 id="button"
-                class=${c(this.labelAlignment?`label-${this.labelAlignment}`:void 0)}
+                class=${p(this.labelAlignment?`label-${this.labelAlignment}`:void 0)}
                 @blur=${this.handleButtonBlur}
                 @click=${this.handleActivate}
                 @pointerdown=${this.handleButtonPointerdown}
@@ -85,7 +94,7 @@
                 ${this.buttonContent}
             </button>
             ${this.renderMenu} ${this.renderDescriptionSlot}
-        `}update(e){var t,i;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(i=this.deprecatedMenu)==null||i.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener()}get dismissHelper(){return n`
+        `}update(e){var t,i;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("pending")&&this.pending&&(this.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(i=this.deprecatedMenu)==null||i.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener()}get dismissHelper(){return s`
             <div class="visually-hidden">
                 <button
                     tabindex="-1"
@@ -93,9 +102,9 @@
                     @click=${this.close}
                 ></button>
             </div>
-        `}trackDependency(e,t){const i=!!customElements.get(e)||this.dependenciesToLoad[e]||!!t;i||customElements.whenDefined(e).then(()=>{this.trackDependency(e,!0)}),this.dependenciesToLoad={...this.dependenciesToLoad,[e]:i},this.dependenciesLoaded=Object.values(this.dependenciesToLoad).every(o=>o)}renderContainer(e){const t=n`
+        `}renderContainer(e){const t=s`
             ${this.dismissHelper} ${e} ${this.dismissHelper}
-        `;return this.isMobile.matches?(this.trackDependency("sp-tray"),import("@spectrum-web-components/tray/sp-tray.js"),n`
+        `;return this.isMobile.matches?(this.dependencyManager.add("sp-tray"),import("@spectrum-web-components/tray/sp-tray.js"),s`
                 <sp-tray
                     id="popover"
                     role="presentation"
@@ -103,7 +112,7 @@
                 >
                     ${t}
                 </sp-tray>
-            `):(this.trackDependency("sp-popover"),import("@spectrum-web-components/popover/sp-popover.js"),n`
+            `):(this.dependencyManager.add("sp-popover"),import("@spectrum-web-components/popover/sp-popover.js"),s`
             <sp-popover
                 id="popover"
                 role="presentation"
@@ -112,7 +121,7 @@
             >
                 ${t}
             </sp-popover>
-        `)}get renderMenu(){const e=n`
+        `)}get renderMenu(){const e=s`
             <sp-menu
                 aria-labelledby="applied-label"
                 @change=${this.handleChange}
@@ -126,5 +135,5 @@
             >
                 <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
             </sp-menu>
-        `;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?this.renderOverlay(e):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,this.overlayElement&&await this.overlayElement.updateComplete,e}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){this.close(),super.disconnectedCallback()}}s([u()],PickerBase.prototype,"appliedLabel",2),s([p("#button")],PickerBase.prototype,"button",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),s([r({type:String,reflect:!0})],PickerBase.prototype,"icons",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),s([r()],PickerBase.prototype,"label",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),s([u()],PickerBase.prototype,"labelAlignment",2),s([p("sp-menu")],PickerBase.prototype,"optionsMenu",2),s([p("sp-overlay")],PickerBase.prototype,"overlayElement",2),s([r()],PickerBase.prototype,"placement",2),s([r({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),s([r({type:String})],PickerBase.prototype,"value",2),s([r({attribute:!1})],PickerBase.prototype,"selectedItem",1),s([r({attribute:!1})],PickerBase.prototype,"selectedItemContent",1),s([u()],PickerBase.prototype,"dependenciesLoaded",2);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0),e.preventDefault();return}e.preventDefault();const i=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,o=i<0||t==="ArrowRight"?1:-1;let l=i+o;for(;this.menuItems[l]&&this.menuItems[l].disabled;)l+=o;!this.menuItems[l]||this.menuItems[l].disabled||(!this.value||l!==i)&&this.setValueFromItem(this.menuItems[l])}}static get styles(){return[g,w]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
+        `;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?this.renderOverlay(e):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,this.overlayElement&&await this.overlayElement.updateComplete,e}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){this.close(),super.disconnectedCallback()}}n([u()],PickerBase.prototype,"appliedLabel",2),n([c("#button")],PickerBase.prototype,"button",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),n([l({type:String,reflect:!0})],PickerBase.prototype,"icons",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"pending",2),n([l({type:String,attribute:"pending-label"})],PickerBase.prototype,"pendingLabel",2),n([l()],PickerBase.prototype,"label",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),n([u()],PickerBase.prototype,"labelAlignment",2),n([c("sp-menu")],PickerBase.prototype,"optionsMenu",2),n([c("sp-overlay")],PickerBase.prototype,"overlayElement",2),n([l()],PickerBase.prototype,"placement",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),n([l({type:String})],PickerBase.prototype,"value",2),n([l({attribute:!1})],PickerBase.prototype,"selectedItem",1),n([u()],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly||this.pending)return;if(t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0),e.preventDefault();return}e.preventDefault();const i=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,r=i<0||t==="ArrowRight"?1:-1;let o=i+r;for(;this.menuItems[o]&&this.menuItems[o].disabled;)o+=r;!this.menuItems[o]||this.menuItems[o].disabled||(!this.value||o!==i)&&this.setValueFromItem(this.menuItems[o])}}static get styles(){return[w,I]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
 //# sourceMappingURL=Picker.js.map

package/src/Picker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Picker.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    classMap,\n    ifDefined,\n    StyleInfo,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n    Menu,\n    MenuItem,\n    MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nconst chevronClass = {\n    s: 'spectrum-UIIcon-ChevronDown75',\n    m: 'spectrum-UIIcon-ChevronDown100',\n    l: 'spectrum-UIIcon-ChevronDown200',\n    xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @state()\n    appliedLabel?: string;\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    private deprecatedMenu: Menu | null = null;\n\n    @property({ type: Boolean, reflect: true })\n    public override disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, reflect: true })\n    public icons?: 'only' | 'none';\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property()\n    public label?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    public selects: undefined | 'single' = 'single';\n\n    @state()\n    public labelAlignment?: 'inline';\n\n    protected get menuItems(): MenuItem[] {\n        return this.optionsMenu.childItems;\n    }\n\n    @query('sp-menu')\n    protected optionsMenu!: Menu;\n\n    @query('sp-overlay')\n    protected overlayElement!: Overlay;\n\n    protected tooltipEl?: Tooltip;\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n\n    @property()\n    public placement: Placement = 'bottom-start';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: String })\n    public value = '';\n\n    @property({ attribute: false })\n    public get selectedItem(): MenuItem | undefined {\n        return this._selectedItem;\n    }\n\n    public set selectedItem(selectedItem: MenuItem | undefined) {\n        this.selectedItemContent = selectedItem\n            ? selectedItem.itemChildren\n            : undefined;\n\n        if (selectedItem === this.selectedItem) return;\n        const oldSelectedItem = this.selectedItem;\n        this._selectedItem = selectedItem;\n        this.requestUpdate('selectedItem', oldSelectedItem);\n    }\n\n    _selectedItem?: MenuItem;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public override get focusElement(): HTMLElement {\n        if (this.open) {\n            return this.optionsMenu;\n        }\n        return this.button;\n    }\n\n    public forceFocusVisible(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.focused = true;\n    }\n\n    public override click(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.toggle();\n    }\n\n    public handleButtonBlur(): void {\n        this.focused = false;\n    }\n\n    protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    private pointerdownState = false;\n\n    protected handleButtonPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        this.pointerdownState = this.open;\n        this.preventNextToggle = 'maybe';\n        const cleanup = (): void => {\n            document.removeEventListener('pointerup', cleanup);\n            document.removeEventListener('pointercancel', cleanup);\n            requestAnimationFrame(() => {\n                // Complete cleanup on the animation frame so that `click` can go first.\n                this.preventNextToggle = 'no';\n            });\n        };\n        // Ensure that however the pointer goes up we do `cleanup()`.\n        document.addEventListener('pointerup', cleanup);\n        document.addEventListener('pointercancel', cleanup);\n        this.handleActivate();\n    }\n\n    protected handleButtonFocus(event: FocusEvent): void {\n        // When focus comes from a pointer event, and the related target is the Menu,\n        // we don't want to reopen the Menu.\n        if (\n            this.preventNextToggle === 'maybe' &&\n            event.relatedTarget === this.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n    }\n\n    protected handleActivate(event?: Event): void {\n        if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n            return;\n        }\n        if (this.preventNextToggle === 'yes') {\n            return;\n        }\n        if (event?.type === 'click' && this.open !== this.pointerdownState) {\n            // When activation comes from a `click` event ensure that the `pointerup`\n            // event didn't already toggle the Picker state before doing so.\n            return;\n        }\n        this.toggle();\n    }\n\n    public override focus(options?: FocusOptions): void {\n        super.focus(options);\n\n        if (!this.disabled && this.focusElement) {\n            this.focused = this.hasVisibleFocusInTree();\n        }\n    }\n\n    public handleHelperFocus(): void {\n        // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public handleChange(event: Event): void {\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        event.stopPropagation();\n        if (event.cancelable) {\n            this.setValueFromItem(selected, event);\n        } else {\n            // Non-cancelable \"change\" events announce a selection with no value\n            // change that should close the Picker element.\n            this.open = false;\n        }\n    }\n\n    protected handleKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    protected async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        // should always close when \"setting\" a value.\n        this.open = false;\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n\n        // Set a value.\n        this.selectedItem = item;\n        this.value = item.value;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                // Allow it to be prevented.\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault && this.selects) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n            if (oldSelectedItem) {\n                this.setMenuItemSelected(oldSelectedItem, true);\n            }\n            this.selectedItem = oldSelectedItem;\n            this.value = oldValue;\n            this.open = true;\n            return;\n        } else if (!this.selects) {\n            // Unset the value if not carrying a selection\n            this.selectedItem = oldSelectedItem;\n            this.value = oldValue;\n            return;\n        }\n        if (oldSelectedItem) {\n            this.setMenuItemSelected(oldSelectedItem, false);\n        }\n        this.setMenuItemSelected(item, !!this.selects);\n    }\n\n    protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n        // matches null | undefined\n        if (this.selects == null) return;\n        item.selected = value;\n    }\n\n    public toggle(target?: boolean): void {\n        if (this.readonly) {\n            return;\n        }\n        this.open = typeof target !== 'undefined' ? target : !this.open;\n    }\n\n    public close(): void {\n        if (this.readonly) {\n            return;\n        }\n        this.open = false;\n    }\n\n    protected get containerStyles(): StyleInfo {\n        // @todo: test in mobile\n        /* c8 ignore next 5 */\n        if (this.isMobile.matches) {\n            return {\n                '--swc-menu-width': '100%',\n            };\n        }\n        return {};\n    }\n\n    @property({ attribute: false })\n    protected get selectedItemContent(): MenuItemChildren {\n        return this._selectedItemContent || { icon: [], content: [] };\n    }\n\n    protected set selectedItemContent(\n        selectedItemContent: MenuItemChildren | undefined\n    ) {\n        if (selectedItemContent === this.selectedItemContent) return;\n\n        const oldContent = this.selectedItemContent;\n        this._selectedItemContent = selectedItemContent;\n        this.requestUpdate('selectedItemContent', oldContent);\n    }\n\n    _selectedItemContent?: MenuItemChildren;\n\n    protected handleTooltipSlotchange(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.tooltipEl = event.target.assignedElements()[0] as\n            | Tooltip\n            | undefined;\n    }\n\n    protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n        if (this.value && this.selectedItem) {\n            return content;\n        }\n        return html`\n            <slot name=\"label\" id=\"label\">\n                <span\n                    aria-hidden=${ifDefined(\n                        this.appliedLabel ? undefined : 'true'\n                    )}\n                >\n                    ${this.label}\n                </span>\n            </slot>\n        `;\n    }\n\n    protected get buttonContent(): TemplateResult[] {\n        const labelClasses = {\n            'visually-hidden': this.icons === 'only' && !!this.value,\n            placeholder: !this.value,\n            label: true,\n        };\n        const appliedLabel = this.appliedLabel || this.label;\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span\n                    id=${ifDefined(\n                        this.value && this.selectedItem ? 'label' : undefined\n                    )}\n                    class=${classMap(labelClasses)}\n                >\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\n                ${this.value && this.selectedItem\n                    ? html`\n                          <span\n                              aria-hidden=\"true\"\n                              class=\"visually-hidden\"\n                              id=\"applied-label\"\n                          >\n                              ${appliedLabel}\n                              <slot name=\"label\"></slot>\n                          </span>\n                      `\n                    : html`\n                          <span hidden id=\"applied-label\">${appliedLabel}</span>\n                      `}\n                ${this.invalid\n                    ? html`\n                          <sp-icon-alert\n                              class=\"validation-icon\"\n                          ></sp-icon-alert>\n                      `\n                    : nothing}\n                <sp-icon-chevron100\n                    class=\"picker ${chevronClass[\n                        this.size as DefaultElementSize\n                    ]}\"\n                ></sp-icon-chevron100>\n                <slot\n                    aria-hidden=\"true\"\n                    name=\"tooltip\"\n                    id=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    applyFocusElementLabel = (\n        value: string,\n        labelElement: FieldLabel\n    ): void => {\n        this.appliedLabel = value;\n        this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n    };\n\n    protected renderOverlay(menu: TemplateResult): TemplateResult {\n        const container = this.renderContainer(menu);\n        this.trackDependency('sp-overlay');\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        return html`\n            <sp-overlay\n                .triggerElement=${this as HTMLElement}\n                .offset=${0}\n                ?open=${this.open && this.dependenciesLoaded}\n                .placement=${this.isMobile.matches ? undefined : this.placement}\n                .type=${this.isMobile.matches ? 'modal' : 'auto'}\n                .receivesFocus=${'true'}\n                .willPreventClose=${this.preventNextToggle !== 'no' &&\n                this.open &&\n                this.dependenciesLoaded}\n                @beforetoggle=${(\n                    event: Event & {\n                        target: Overlay;\n                        newState: 'open' | 'closed';\n                    }\n                ) => {\n                    if (event.composedPath()[0] !== event.target) {\n                        return;\n                    }\n                    if (event.newState === 'closed') {\n                        this.open = false;\n                    }\n                    if (!this.open) {\n                        this.optionsMenu.updateSelectedItemIndex();\n                        this.optionsMenu.closeDescendentOverlays();\n                    }\n                }}\n            >\n                ${container}\n            </sp-overlay>\n        `;\n    }\n\n    protected get renderDescriptionSlot(): TemplateResult {\n        return html`\n            <div id=${DESCRIPTION_ID}>\n                <slot name=\"description\"></slot>\n            </div>\n        `;\n    }\n    // a helper to throw focus to the button is needed because Safari\n    // won't include buttons in the tab order even with tabindex=\"0\"\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n                @focus=${this.handleHelperFocus}\n                aria-describedby=${DESCRIPTION_ID}\n            ></span>\n            <button\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-describedby=\"tooltip\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-haspopup=\"true\"\n                aria-labelledby=\"icon label applied-label\"\n                id=\"button\"\n                class=${ifDefined(\n                    this.labelAlignment\n                        ? `label-${this.labelAlignment}`\n                        : undefined\n                )}\n                @blur=${this.handleButtonBlur}\n                @click=${this.handleActivate}\n                @pointerdown=${this.handleButtonPointerdown}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changes: PropertyValues<this>): void {\n        if (this.selects) {\n            // Always force `selects` to \"single\" when set.\n            // TODO: Add support functionally and visually for \"multiple\"\n            this.selects = 'single';\n        }\n        if (changes.has('disabled') && this.disabled) {\n            this.open = false;\n        }\n        if (changes.has('value')) {\n            // MenuItems update a frame late for <slot> management,\n            // await the same here.\n            this.shouldScheduleManageSelection();\n        }\n        // Maybe it's finally time to remove this support?\n        if (!this.hasUpdated) {\n            this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n            this.deprecatedMenu?.toggleAttribute('ignore', true);\n            this.deprecatedMenu?.setAttribute('selects', 'inherit');\n        }\n        if (window.__swc.DEBUG) {\n            if (\n                !this.label &&\n                !this.getAttribute('aria-label') &&\n                !this.getAttribute('aria-labelledby') &&\n                !this.appliedLabel\n            ) {\n                window.__swc.warn(\n                    this,\n                    '<sp-picker> needs one of the following to be accessible:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n                    {\n                        type: 'accessibility',\n                        issues: [\n                            'an <sp-field-label> element with a `for` attribute referencing the `id` of the `<sp-picker>`, or',\n                            'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n                            'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n                        ],\n                    }\n                );\n            }\n            if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n                const { localName } = this;\n                window.__swc.warn(\n                    this,\n                    `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n                    { level: 'deprecation' }\n                );\n            }\n        }\n        super.update(changes);\n    }\n\n    protected bindButtonKeydownListener(): void {\n        this.button.addEventListener('keydown', this.handleKeydown);\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        this.bindButtonKeydownListener();\n    }\n\n    protected get dismissHelper(): TemplateResult {\n        return html`\n            <div class=\"visually-hidden\">\n                <button\n                    tabindex=\"-1\"\n                    aria-label=\"Dismiss\"\n                    @click=${this.close}\n                ></button>\n            </div>\n        `;\n    }\n\n    @state()\n    private dependenciesLoaded = false;\n    private dependenciesToLoad: Record<string, boolean> = {};\n\n    private trackDependency(dependency: string, flag?: boolean): void {\n        const loaded =\n            !!customElements.get(dependency) ||\n            this.dependenciesToLoad[dependency] ||\n            !!flag;\n        if (!loaded) {\n            customElements.whenDefined(dependency).then(() => {\n                this.trackDependency(dependency, true);\n            });\n        }\n        this.dependenciesToLoad = {\n            ...this.dependenciesToLoad,\n            [dependency]: loaded,\n        };\n        this.dependenciesLoaded = Object.values(this.dependenciesToLoad).every(\n            (loaded) => loaded\n        );\n    }\n\n    protected renderContainer(menu: TemplateResult): TemplateResult {\n        const accessibleMenu = html`\n            ${this.dismissHelper} ${menu} ${this.dismissHelper}\n        `;\n        // @todo: test in mobile\n        /* c8 ignore next 11 */\n        if (this.isMobile.matches) {\n            this.trackDependency('sp-tray');\n            import('@spectrum-web-components/tray/sp-tray.js');\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"presentation\"\n                    style=${styleMap(this.containerStyles)}\n                >\n                    ${accessibleMenu}\n                </sp-tray>\n            `;\n        }\n        this.trackDependency('sp-popover');\n        import('@spectrum-web-components/popover/sp-popover.js');\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"presentation\"\n                style=${styleMap(this.containerStyles)}\n                placement=${this.placement}\n            >\n                ${accessibleMenu}\n            </sp-popover>\n        `;\n    }\n\n    protected hasRenderedOverlay = false;\n\n    protected get renderMenu(): TemplateResult {\n        const menu = html`\n            <sp-menu\n                aria-labelledby=\"applied-label\"\n                @change=${this.handleChange}\n                id=\"menu\"\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                role=${this.listRole}\n                .selects=${this.selects}\n                .selected=${this.value ? [this.value] : []}\n                size=${this.size}\n                @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n            >\n                <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n            </sp-menu>\n        `;\n        this.hasRenderedOverlay =\n            this.hasRenderedOverlay ||\n            this.focused ||\n            this.open ||\n            !!this.deprecatedMenu;\n        if (this.hasRenderedOverlay) {\n            return this.renderOverlay(menu);\n        }\n        return menu;\n    }\n\n    private willManageSelection = false;\n\n    protected shouldScheduleManageSelection(event?: Event): void {\n        if (\n            !this.willManageSelection &&\n            (!event ||\n                ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n                    .host === this)\n        ) {\n            this.willManageSelection = true;\n            requestAnimationFrame(() => {\n                requestAnimationFrame(() => {\n                    this.manageSelection();\n                });\n            });\n        }\n    }\n\n    protected shouldManageSelection(): void {\n        if (this.willManageSelection) {\n            return;\n        }\n        this.willManageSelection = true;\n        this.manageSelection();\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\n        await this.optionsMenu.updateComplete;\n        if (this.recentlyConnected) {\n            // Work around for attach timing differences in Safari and Firefox.\n            // Remove when refactoring to Menu passthrough wrapper.\n            await new Promise((res) => requestAnimationFrame(() => res(true)));\n            this.recentlyConnected = false;\n        }\n        this.menuItems.forEach((item) => {\n            if (this.value === item.value && !item.disabled) {\n                selectedItem = item;\n            } else {\n                item.selected = false;\n            }\n        });\n        if (selectedItem) {\n            selectedItem.selected = !!this.selects;\n            this.selectedItem = selectedItem;\n        } else {\n            this.value = '';\n            this.selectedItem = undefined;\n        }\n        if (this.open) {\n            await this.optionsMenu.updateComplete;\n            this.optionsMenu.updateSelectedItemIndex();\n        }\n        this.selectionResolver();\n        this.willManageSelection = false;\n    }\n\n    private selectionPromise = Promise.resolve();\n    private selectionResolver!: () => void;\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this.selectionPromise;\n        if (this.overlayElement) {\n            await this.overlayElement.updateComplete;\n        }\n        return complete;\n    }\n\n    private recentlyConnected = false;\n\n    private enterKeydownOn: EventTarget | null = null;\n\n    protected handleEnterKeydown = (event: KeyboardEvent): void => {\n        if (event.code !== 'Enter') {\n            return;\n        }\n\n        if (this.enterKeydownOn) {\n            event.preventDefault();\n            return;\n        }\n        this.enterKeydownOn = event.target;\n        this.addEventListener(\n            'keyup',\n            async (keyupEvent: KeyboardEvent) => {\n                if (keyupEvent.code !== 'Enter') {\n                    return;\n                }\n                this.enterKeydownOn = null;\n            },\n            { once: true }\n        );\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.recentlyConnected = this.hasUpdated;\n    }\n\n    public override disconnectedCallback(): void {\n        this.close();\n\n        super.disconnectedCallback();\n    }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n    public static override get styles(): CSSResultArray {\n        return [pickerStyles, chevronStyles];\n    }\n\n    protected override get containerStyles(): StyleInfo {\n        const styles = super.containerStyles;\n        if (!this.quiet) {\n            styles['min-width'] = `${this.offsetWidth}px`;\n        }\n        return styles;\n    }\n\n    protected override handleKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly) {\n            return;\n        }\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            event.preventDefault();\n            return;\n        }\n        event.preventDefault();\n        const selectedIndex = this.selectedItem\n            ? this.menuItems.indexOf(this.selectedItem)\n            : -1;\n        // use a positive offset to find the first non-disabled item when no selection is available.\n        const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n        let nextIndex = selectedIndex + nextOffset;\n        while (\n            this.menuItems[nextIndex] &&\n            this.menuItems[nextIndex].disabled\n        ) {\n            nextIndex += nextOffset;\n        }\n        if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n            return;\n        }\n        if (!this.value || nextIndex !== selectedIndex) {\n            this.setValueFromItem(this.menuItems[nextIndex]);\n        }\n    };\n}\n"],
-  "mappings": "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",
-  "names": ["html", "nothing", "SizedMixin", "classMap", "ifDefined", "styleMap", "property", "query", "state", "pickerStyles", "chevronStyles", "Focusable", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "value", "labelElement", "keyupEvent", "selectedItem", "oldSelectedItem", "cleanup", "options", "target", "selected", "item", "menuChangeEvent", "oldValue", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "menu", "container", "changes", "_a", "_b", "dependency", "flag", "loaded", "accessibleMenu", "res", "complete", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex", "styles"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    classMap,\n    ifDefined,\n    StyleInfo,\n    styleMap,\n    when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n    Menu,\n    MenuItem,\n    MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nconst chevronClass = {\n    s: 'spectrum-UIIcon-ChevronDown75',\n    m: 'spectrum-UIIcon-ChevronDown100',\n    l: 'spectrum-UIIcon-ChevronDown200',\n    xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @state()\n    appliedLabel?: string;\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    private dependencyManager = new DependencyManagerController(this);\n\n    private deprecatedMenu: Menu | null = null;\n\n    @property({ type: Boolean, reflect: true })\n    public override disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, reflect: true })\n    public icons?: 'only' | 'none';\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    /** Whether the items are currently loading. */\n    @property({ type: Boolean, reflect: true })\n    public pending = false;\n\n    /** Defines a string value that labels the Picker while it is in pending state. */\n    @property({ type: String, attribute: 'pending-label' })\n    public pendingLabel = 'Pending';\n\n    @property()\n    public label?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    public selects: undefined | 'single' = 'single';\n\n    @state()\n    public labelAlignment?: 'inline';\n\n    protected get menuItems(): MenuItem[] {\n        return this.optionsMenu.childItems;\n    }\n\n    @query('sp-menu')\n    protected optionsMenu!: Menu;\n\n    @query('sp-overlay')\n    protected overlayElement!: Overlay;\n\n    protected tooltipEl?: Tooltip;\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     * @attr\n     */\n\n    @property()\n    public placement: Placement = 'bottom-start';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: String })\n    public value = '';\n\n    @property({ attribute: false })\n    public get selectedItem(): MenuItem | undefined {\n        return this._selectedItem;\n    }\n\n    public set selectedItem(selectedItem: MenuItem | undefined) {\n        this.selectedItemContent = selectedItem\n            ? selectedItem.itemChildren\n            : undefined;\n\n        if (selectedItem === this.selectedItem) return;\n        const oldSelectedItem = this.selectedItem;\n        this._selectedItem = selectedItem;\n        this.requestUpdate('selectedItem', oldSelectedItem);\n    }\n\n    _selectedItem?: MenuItem;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public override get focusElement(): HTMLElement {\n        if (this.open) {\n            return this.optionsMenu;\n        }\n        return this.button;\n    }\n\n    public forceFocusVisible(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.focused = true;\n    }\n\n    public override click(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.toggle();\n    }\n\n    public handleButtonBlur(): void {\n        this.focused = false;\n    }\n\n    protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    private pointerdownState = false;\n\n    protected handleButtonPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        this.pointerdownState = this.open;\n        this.preventNextToggle = 'maybe';\n        let cleanupAction = 0;\n        const cleanup = (): void => {\n            cancelAnimationFrame(cleanupAction);\n            cleanupAction = requestAnimationFrame(async () => {\n                document.removeEventListener('pointerup', cleanup);\n                document.removeEventListener('pointercancel', cleanup);\n                this.button.removeEventListener('click', cleanup);\n                requestAnimationFrame(() => {\n                    // Complete cleanup on the second animation frame so that `click` can go first.\n                    this.preventNextToggle = 'no';\n                });\n            });\n        };\n        // Ensure that however the pointer goes up we do `cleanup()`.\n        document.addEventListener('pointerup', cleanup);\n        document.addEventListener('pointercancel', cleanup);\n        this.button.addEventListener('click', cleanup);\n        this.handleActivate();\n    }\n\n    protected handleButtonFocus(event: FocusEvent): void {\n        // When focus comes from a pointer event, and the related target is the Menu,\n        // we don't want to reopen the Menu.\n        if (\n            this.preventNextToggle === 'maybe' &&\n            event.relatedTarget === this.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n    }\n\n    protected handleActivate(event?: Event): void {\n        if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n            return;\n        }\n        if (this.preventNextToggle === 'yes') {\n            return;\n        }\n        if (event?.type === 'click' && this.open !== this.pointerdownState) {\n            // When activation comes from a `click` event ensure that the `pointerup`\n            // event didn't already toggle the Picker state before doing so.\n            return;\n        }\n        this.toggle();\n    }\n\n    public override focus(options?: FocusOptions): void {\n        super.focus(options);\n\n        if (!this.disabled && this.focusElement) {\n            this.focused = this.hasVisibleFocusInTree();\n        }\n    }\n\n    public handleHelperFocus(): void {\n        // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public handleChange(event: Event): void {\n        this.preventNextToggle = 'no';\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        event.stopPropagation();\n        if (event.cancelable) {\n            this.setValueFromItem(selected, event);\n        } else {\n            // Non-cancelable \"change\" events announce a selection with no value\n            // change that should close the Picker element.\n            this.open = false;\n        }\n    }\n\n    protected handleKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    protected async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        // should always close when \"setting\" a value.\n        this.open = false;\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n\n        // Set a value.\n        this.selectedItem = item;\n        this.value = item.value;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                // Allow it to be prevented.\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault && this.selects) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n            if (oldSelectedItem) {\n                this.setMenuItemSelected(oldSelectedItem, true);\n            }\n            this.selectedItem = oldSelectedItem;\n            this.value = oldValue;\n            this.open = true;\n            return;\n        } else if (!this.selects) {\n            // Unset the value if not carrying a selection\n            this.selectedItem = oldSelectedItem;\n            this.value = oldValue;\n            return;\n        }\n        if (oldSelectedItem) {\n            this.setMenuItemSelected(oldSelectedItem, false);\n        }\n        this.setMenuItemSelected(item, !!this.selects);\n    }\n\n    protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n        // matches null | undefined\n        if (this.selects == null) return;\n        item.selected = value;\n    }\n\n    public toggle(target?: boolean): void {\n        if (this.readonly || this.pending) {\n            return;\n        }\n        this.open = typeof target !== 'undefined' ? target : !this.open;\n    }\n\n    public close(): void {\n        if (this.readonly) {\n            return;\n        }\n        this.open = false;\n    }\n\n    protected get containerStyles(): StyleInfo {\n        // @todo: test in mobile\n        /* c8 ignore next 5 */\n        if (this.isMobile.matches) {\n            return {\n                '--swc-menu-width': '100%',\n            };\n        }\n        return {};\n    }\n\n    @state()\n    protected get selectedItemContent(): MenuItemChildren {\n        return this._selectedItemContent || { icon: [], content: [] };\n    }\n\n    protected set selectedItemContent(\n        selectedItemContent: MenuItemChildren | undefined\n    ) {\n        if (selectedItemContent === this.selectedItemContent) return;\n\n        const oldContent = this.selectedItemContent;\n        this._selectedItemContent = selectedItemContent;\n        this.requestUpdate('selectedItemContent', oldContent);\n    }\n\n    _selectedItemContent?: MenuItemChildren;\n\n    protected handleTooltipSlotchange(\n        event: Event & { target: HTMLSlotElement }\n    ): void {\n        this.tooltipEl = event.target.assignedElements()[0] as\n            | Tooltip\n            | undefined;\n    }\n\n    protected handleBeforetoggle(\n        event: Event & {\n            target: Overlay;\n            newState: 'open' | 'closed';\n        }\n    ): void {\n        if (event.composedPath()[0] !== event.target) {\n            return;\n        }\n        if (event.newState === 'closed') {\n            if (this.preventNextToggle === 'no') {\n                this.open = false;\n            } else if (!this.pointerdownState) {\n                // Prevent browser driven closure while opening the Picker\n                // and the expected event series has not completed.\n                this.overlayElement.manuallyKeepOpen();\n            }\n        }\n        if (!this.open) {\n            this.optionsMenu.updateSelectedItemIndex();\n            this.optionsMenu.closeDescendentOverlays();\n        }\n    }\n\n    protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n        if (this.value && this.selectedItem) {\n            return content;\n        }\n        return html`\n            <slot name=\"label\" id=\"label\">\n                <span\n                    aria-hidden=${ifDefined(\n                        this.appliedLabel ? undefined : 'true'\n                    )}\n                >\n                    ${this.label}\n                </span>\n            </slot>\n        `;\n    }\n\n    protected get buttonContent(): TemplateResult[] {\n        const labelClasses = {\n            'visually-hidden': this.icons === 'only' && !!this.value,\n            placeholder: !this.value,\n            label: true,\n        };\n        const appliedLabel = this.appliedLabel || this.label;\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span\n                    id=${ifDefined(\n                        this.value && this.selectedItem ? 'label' : undefined\n                    )}\n                    class=${classMap(labelClasses)}\n                >\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\n                ${this.value && this.selectedItem\n                    ? html`\n                          <span\n                              aria-hidden=\"true\"\n                              class=\"visually-hidden\"\n                              id=\"applied-label\"\n                          >\n                              ${appliedLabel}\n                              <slot name=\"label\"></slot>\n                          </span>\n                      `\n                    : html`\n                          <span hidden id=\"applied-label\">${appliedLabel}</span>\n                      `}\n                ${this.invalid && !this.pending\n                    ? html`\n                          <sp-icon-alert\n                              class=\"validation-icon\"\n                          ></sp-icon-alert>\n                      `\n                    : nothing}\n                ${when(this.pending, () => {\n                    import(\n                        '@spectrum-web-components/progress-circle/sp-progress-circle.js'\n                    );\n                    // aria-valuetext is a workaround for aria-valuenow being applied in Firefox even in indeterminate mode.\n                    return html`\n                        <sp-progress-circle\n                            id=\"loader\"\n                            size=\"s\"\n                            indeterminate\n                            aria-valuetext=${this.pendingLabel}\n                            class=\"progress-circle\"\n                        ></sp-progress-circle>\n                    `;\n                })}\n                <sp-icon-chevron100\n                    class=\"picker ${chevronClass[\n                        this.size as DefaultElementSize\n                    ]}\"\n                ></sp-icon-chevron100>\n                <slot\n                    aria-hidden=\"true\"\n                    name=\"tooltip\"\n                    id=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    applyFocusElementLabel = (\n        value: string,\n        labelElement: FieldLabel\n    ): void => {\n        this.appliedLabel = value;\n        this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n    };\n\n    protected renderOverlay(menu: TemplateResult): TemplateResult {\n        const container = this.renderContainer(menu);\n        this.dependencyManager.add('sp-overlay');\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        return html`\n            <sp-overlay\n                .triggerElement=${this as HTMLElement}\n                .offset=${0}\n                ?open=${this.open && this.dependencyManager.loaded}\n                .placement=${this.isMobile.matches ? undefined : this.placement}\n                .type=${this.isMobile.matches ? 'modal' : 'auto'}\n                .receivesFocus=${'true'}\n                .willPreventClose=${this.preventNextToggle !== 'no' &&\n                this.open &&\n                this.dependencyManager.loaded}\n                @beforetoggle=${this.handleBeforetoggle}\n            >\n                ${container}\n            </sp-overlay>\n        `;\n    }\n\n    protected get renderDescriptionSlot(): TemplateResult {\n        return html`\n            <div id=${DESCRIPTION_ID}>\n                <slot name=\"description\"></slot>\n            </div>\n        `;\n    }\n    // a helper to throw focus to the button is needed because Safari\n    // won't include buttons in the tab order even with tabindex=\"0\"\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n                @focus=${this.handleHelperFocus}\n                aria-describedby=${DESCRIPTION_ID}\n            ></span>\n            <button\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-describedby=\"tooltip\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-haspopup=\"true\"\n                aria-labelledby=\"loader icon label applied-label\"\n                id=\"button\"\n                class=${ifDefined(\n                    this.labelAlignment\n                        ? `label-${this.labelAlignment}`\n                        : undefined\n                )}\n                @blur=${this.handleButtonBlur}\n                @click=${this.handleActivate}\n                @pointerdown=${this.handleButtonPointerdown}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changes: PropertyValues<this>): void {\n        if (this.selects) {\n            // Always force `selects` to \"single\" when set.\n            // TODO: Add support functionally and visually for \"multiple\"\n            this.selects = 'single';\n        }\n        if (changes.has('disabled') && this.disabled) {\n            this.open = false;\n        }\n        if (changes.has('pending') && this.pending) {\n            this.open = false;\n        }\n        if (changes.has('value')) {\n            // MenuItems update a frame late for <slot> management,\n            // await the same here.\n            this.shouldScheduleManageSelection();\n        }\n        // Maybe it's finally time to remove this support?\n        if (!this.hasUpdated) {\n            this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n            this.deprecatedMenu?.toggleAttribute('ignore', true);\n            this.deprecatedMenu?.setAttribute('selects', 'inherit');\n        }\n        if (window.__swc.DEBUG) {\n            if (\n                !this.label &&\n                !this.getAttribute('aria-label') &&\n                !this.getAttribute('aria-labelledby') &&\n                !this.appliedLabel\n            ) {\n                window.__swc.warn(\n                    this,\n                    '<sp-picker> needs one of the following to be accessible:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n                    {\n                        type: 'accessibility',\n                        issues: [\n                            'an <sp-field-label> element with a `for` attribute referencing the `id` of the `<sp-picker>`, or',\n                            'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n                            'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n                        ],\n                    }\n                );\n            }\n            if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n                const { localName } = this;\n                window.__swc.warn(\n                    this,\n                    `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n                    { level: 'deprecation' }\n                );\n            }\n        }\n        super.update(changes);\n    }\n\n    protected bindButtonKeydownListener(): void {\n        this.button.addEventListener('keydown', this.handleKeydown);\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        this.bindButtonKeydownListener();\n    }\n\n    protected get dismissHelper(): TemplateResult {\n        return html`\n            <div class=\"visually-hidden\">\n                <button\n                    tabindex=\"-1\"\n                    aria-label=\"Dismiss\"\n                    @click=${this.close}\n                ></button>\n            </div>\n        `;\n    }\n\n    protected renderContainer(menu: TemplateResult): TemplateResult {\n        const accessibleMenu = html`\n            ${this.dismissHelper} ${menu} ${this.dismissHelper}\n        `;\n        // @todo: test in mobile\n        /* c8 ignore next 11 */\n        if (this.isMobile.matches) {\n            this.dependencyManager.add('sp-tray');\n            import('@spectrum-web-components/tray/sp-tray.js');\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"presentation\"\n                    style=${styleMap(this.containerStyles)}\n                >\n                    ${accessibleMenu}\n                </sp-tray>\n            `;\n        }\n        this.dependencyManager.add('sp-popover');\n        import('@spectrum-web-components/popover/sp-popover.js');\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"presentation\"\n                style=${styleMap(this.containerStyles)}\n                placement=${this.placement}\n            >\n                ${accessibleMenu}\n            </sp-popover>\n        `;\n    }\n\n    protected hasRenderedOverlay = false;\n\n    protected get renderMenu(): TemplateResult {\n        const menu = html`\n            <sp-menu\n                aria-labelledby=\"applied-label\"\n                @change=${this.handleChange}\n                id=\"menu\"\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                role=${this.listRole}\n                .selects=${this.selects}\n                .selected=${this.value ? [this.value] : []}\n                size=${this.size}\n                @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n            >\n                <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n            </sp-menu>\n        `;\n        this.hasRenderedOverlay =\n            this.hasRenderedOverlay ||\n            this.focused ||\n            this.open ||\n            !!this.deprecatedMenu;\n        if (this.hasRenderedOverlay) {\n            return this.renderOverlay(menu);\n        }\n        return menu;\n    }\n\n    private willManageSelection = false;\n\n    protected shouldScheduleManageSelection(event?: Event): void {\n        if (\n            !this.willManageSelection &&\n            (!event ||\n                ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n                    .host === this)\n        ) {\n            this.willManageSelection = true;\n            requestAnimationFrame(() => {\n                requestAnimationFrame(() => {\n                    this.manageSelection();\n                });\n            });\n        }\n    }\n\n    protected shouldManageSelection(): void {\n        if (this.willManageSelection) {\n            return;\n        }\n        this.willManageSelection = true;\n        this.manageSelection();\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\n        await this.optionsMenu.updateComplete;\n        if (this.recentlyConnected) {\n            // Work around for attach timing differences in Safari and Firefox.\n            // Remove when refactoring to Menu passthrough wrapper.\n            await new Promise((res) => requestAnimationFrame(() => res(true)));\n            this.recentlyConnected = false;\n        }\n        this.menuItems.forEach((item) => {\n            if (this.value === item.value && !item.disabled) {\n                selectedItem = item;\n            } else {\n                item.selected = false;\n            }\n        });\n        if (selectedItem) {\n            selectedItem.selected = !!this.selects;\n            this.selectedItem = selectedItem;\n        } else {\n            this.value = '';\n            this.selectedItem = undefined;\n        }\n        if (this.open) {\n            await this.optionsMenu.updateComplete;\n            this.optionsMenu.updateSelectedItemIndex();\n        }\n        this.selectionResolver();\n        this.willManageSelection = false;\n    }\n\n    private selectionPromise = Promise.resolve();\n    private selectionResolver!: () => void;\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this.selectionPromise;\n        if (this.overlayElement) {\n            await this.overlayElement.updateComplete;\n        }\n        return complete;\n    }\n\n    private recentlyConnected = false;\n\n    private enterKeydownOn: EventTarget | null = null;\n\n    protected handleEnterKeydown = (event: KeyboardEvent): void => {\n        if (event.code !== 'Enter') {\n            return;\n        }\n\n        if (this.enterKeydownOn) {\n            event.preventDefault();\n            return;\n        }\n        this.enterKeydownOn = event.target;\n        this.addEventListener(\n            'keyup',\n            async (keyupEvent: KeyboardEvent) => {\n                if (keyupEvent.code !== 'Enter') {\n                    return;\n                }\n                this.enterKeydownOn = null;\n            },\n            { once: true }\n        );\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.recentlyConnected = this.hasUpdated;\n    }\n\n    public override disconnectedCallback(): void {\n        this.close();\n\n        super.disconnectedCallback();\n    }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n    public static override get styles(): CSSResultArray {\n        return [pickerStyles, chevronStyles];\n    }\n\n    protected override get containerStyles(): StyleInfo {\n        const styles = super.containerStyles;\n        if (!this.quiet) {\n            styles['min-width'] = `${this.offsetWidth}px`;\n        }\n        return styles;\n    }\n\n    protected override handleKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly || this.pending) {\n            return;\n        }\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            event.preventDefault();\n            return;\n        }\n        event.preventDefault();\n        const selectedIndex = this.selectedItem\n            ? this.menuItems.indexOf(this.selectedItem)\n            : -1;\n        // use a positive offset to find the first non-disabled item when no selection is available.\n        const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n        let nextIndex = selectedIndex + nextOffset;\n        while (\n            this.menuItems[nextIndex] &&\n            this.menuItems[nextIndex].disabled\n        ) {\n            nextIndex += nextOffset;\n        }\n        if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n            return;\n        }\n        if (!this.value || nextIndex !== selectedIndex) {\n            this.setValueFromItem(this.menuItems[nextIndex]);\n        }\n    };\n}\n"],
+  "mappings": "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",
+  "names": ["html", "nothing", "SizedMixin", "classMap", "ifDefined", "styleMap", "when", "property", "query", "state", "pickerStyles", "chevronStyles", "Focusable", "IS_MOBILE", "MatchMediaController", "DependencyManagerController", "chevronClass", "event", "value", "labelElement", "keyupEvent", "selectedItem", "oldSelectedItem", "cleanupAction", "cleanup", "options", "target", "selected", "item", "menuChangeEvent", "oldValue", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "menu", "container", "changes", "_a", "_b", "accessibleMenu", "res", "complete", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex", "styles"]
 }

package/src/picker.css.dev.js

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