@spectrum-web-components/picker 1.8.0 → 1.9.0

package/custom-elements.json

@@ -1081,7 +1081,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n        ...SpectrumElement.shadowRootOptions,\n        delegatesFocus: true,\n    }"
+              "default": "{ ...SpectrumElement.shadowRootOptions, delegatesFocus: true, }"
             },
             {
               "kind": "field",
@@ -1335,15 +1335,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "pendingStateController",
-              "type": {
-                "text": "PendingStateController<this>"
-              },
-              "privacy": "public",
-              "default": "new PendingStateController(this)"
-            },
             {
               "kind": "field",
               "name": "_selectedItem",
@@ -1657,6 +1648,16 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "renderLoader",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "buttonContent",
@@ -2099,7 +2100,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n        ...SpectrumElement.shadowRootOptions,\n        delegatesFocus: true,\n    }",
+              "default": "{ ...SpectrumElement.shadowRootOptions, delegatesFocus: true, }",
               "inheritedFrom": {
                 "name": "PickerBase",
                 "module": "src/Picker.js"
@@ -2465,19 +2466,6 @@
                 "module": "src/Picker.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "pendingStateController",
-              "type": {
-                "text": "PendingStateController<this>"
-              },
-              "privacy": "public",
-              "default": "new PendingStateController(this)",
-              "inheritedFrom": {
-                "name": "PickerBase",
-                "module": "src/Picker.js"
-              }
-            },
             {
               "kind": "field",
               "name": "_selectedItem",
@@ -2873,6 +2861,20 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderLoader",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "field",
               "name": "buttonContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/picker",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "publishConfig": {
         "access": "public"
     },
@@ -88,20 +88,20 @@
         "css"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "1.8.0",
-        "@spectrum-web-components/button": "1.8.0",
-        "@spectrum-web-components/field-label": "1.8.0",
-        "@spectrum-web-components/icon": "1.8.0",
-        "@spectrum-web-components/icons-ui": "1.8.0",
-        "@spectrum-web-components/icons-workflow": "1.8.0",
-        "@spectrum-web-components/menu": "1.8.0",
-        "@spectrum-web-components/overlay": "1.8.0",
-        "@spectrum-web-components/popover": "1.8.0",
-        "@spectrum-web-components/progress-circle": "1.8.0",
-        "@spectrum-web-components/reactive-controllers": "1.8.0",
-        "@spectrum-web-components/shared": "1.8.0",
-        "@spectrum-web-components/tooltip": "1.8.0",
-        "@spectrum-web-components/tray": "1.8.0"
+        "@spectrum-web-components/base": "1.9.0",
+        "@spectrum-web-components/button": "1.9.0",
+        "@spectrum-web-components/field-label": "1.9.0",
+        "@spectrum-web-components/icon": "1.9.0",
+        "@spectrum-web-components/icons-ui": "1.9.0",
+        "@spectrum-web-components/icons-workflow": "1.9.0",
+        "@spectrum-web-components/menu": "1.9.0",
+        "@spectrum-web-components/overlay": "1.9.0",
+        "@spectrum-web-components/popover": "1.9.0",
+        "@spectrum-web-components/progress-circle": "1.9.0",
+        "@spectrum-web-components/reactive-controllers": "1.9.0",
+        "@spectrum-web-components/shared": "1.9.0",
+        "@spectrum-web-components/tooltip": "1.9.0",
+        "@spectrum-web-components/tray": "1.9.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

package/src/InteractionController.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import { ReactiveController, TemplateResult } from '@spectrum-web-components/base';
-import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';
+import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';
 import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
 import { PickerBase } from './Picker.js';
 export declare enum InteractionTypes {

package/src/InteractionController.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["InteractionController.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    ReactiveController,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.dev.js'\n\nexport enum InteractionTypes {\n    'desktop',\n    'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n    abortController!: AbortController;\n\n    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    public pointerdownState = false;\n    public enterKeydownOn: EventTarget | null = null;\n\n    public container!: TemplateResult;\n\n    get activelyOpening(): boolean {\n        return false;\n    }\n\n    private _open = false;\n\n    public get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Set `open`\n     */\n    public set open(open: boolean) {\n        if (this._open === open) return;\n        this._open = open;\n\n        if (this.overlay) {\n            this.host.open = open;\n            return;\n        }\n\n        // When there is no Overlay and `open` is moving to `true`, lazily import/create\n        // an Overlay and apply that state to it.\n        customElements\n            .whenDefined('sp-overlay')\n            .then(async (): Promise<void> => {\n                const { Overlay } = await import(\n                    '@spectrum-web-components/overlay/src/Overlay.js'\n                );\n                this.overlay = new Overlay();\n                this.host.open = true;\n                this.host.requestUpdate();\n            });\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n    }\n\n    private _overlay!: AbstractOverlay;\n\n    public get overlay(): AbstractOverlay {\n        return this._overlay;\n    }\n\n    public set overlay(overlay: AbstractOverlay | undefined) {\n        if (!overlay) return;\n        if (this.overlay === overlay) return;\n        this._overlay = overlay;\n        this.initOverlay();\n    }\n\n    type!: InteractionTypes;\n\n    constructor(\n        public target: HTMLElement,\n        public host: PickerBase\n    ) {\n        this.target = target;\n        this.host = host;\n        this.host.addController(this);\n        this.init();\n    }\n\n    releaseDescription(): void {}\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.overlay?.manuallyKeepOpen();\n            }\n        }\n        if (!this.open) {\n            this.host.optionsMenu.updateSelectedItemIndex();\n            this.host.optionsMenu.closeDescendentOverlays();\n        }\n    }\n\n    initOverlay(): void {\n        if (this.overlay) {\n            this.overlay.addEventListener('beforetoggle', (event: Event) => {\n                this.handleBeforetoggle(\n                    event as Event & {\n                        target: Overlay;\n                        newState: 'open' | 'closed';\n                    }\n                );\n            });\n            this.overlay.type =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? 'modal'\n                    : 'auto';\n            this.overlay.triggerElement = this.host as HTMLElement;\n            this.overlay.placement =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? undefined\n                    : this.host.placement;\n            // We should not be applying open is set programmatically via the picker's open.property.\n            // Focus should only be applied if a user action causes the menu to open. Otherwise,\n            // we could be pulling focus from a user when an picker with an open menu loads.\n            this.overlay.receivesFocus = 'false';\n            this.overlay.willPreventClose =\n                this.preventNextToggle !== 'no' && this.open;\n            this.overlay.addEventListener(\n                'slottable-request',\n                this.host.handleSlottableRequest\n            );\n        }\n    }\n\n    public handlePointerdown(_event: PointerEvent): void {}\n\n    public 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.host.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n        if (this.preventNextToggle === 'no') this.host.close();\n    }\n\n    public handleActivate(_event: Event): void {}\n\n    /* c8 ignore next 3 */\n    init(): void {}\n\n    abort(): void {\n        this.releaseDescription();\n        this.abortController?.abort();\n    }\n\n    hostConnected(): void {\n        this.init();\n        this.host.addEventListener('sp-opened', () => {\n            /**\n             * set shouldSupportDragAndSelect to false for mobile\n             * to prevent click event being captured behind the menu-tray\n             * we do this here because the menu gets reinitialized on overlay open\n             */\n            this.host.optionsMenu.shouldSupportDragAndSelect =\n                !this.host.isMobile.matches;\n        });\n        this.host.addEventListener('sp-closed', () => {\n            if (\n                !this.open &&\n                this.host.optionsMenu.matches(':focus-within') &&\n                !this.host.button.matches(':focus')\n            ) {\n                this.host.button.focus();\n            }\n        });\n    }\n\n    hostDisconnected(): void {\n        this.abortController?.abort();\n    }\n\n    public hostUpdated(): void {\n        if (\n            this.overlay &&\n            this.host.dependencyManager.loaded &&\n            this.host.open !== this.overlay.open\n        ) {\n            this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n            this.overlay.open = this.host.open;\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    ReactiveController,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.dev.js'\n\nexport enum InteractionTypes {\n    'desktop',\n    'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n    abortController!: AbortController;\n\n    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    public pointerdownState = false;\n    public enterKeydownOn: EventTarget | null = null;\n\n    public container!: TemplateResult;\n\n    get activelyOpening(): boolean {\n        return false;\n    }\n\n    private _open = false;\n\n    public get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Set `open`\n     */\n    public set open(open: boolean) {\n        if (this._open === open) return;\n        this._open = open;\n\n        if (this.overlay) {\n            this.host.open = open;\n            return;\n        }\n\n        // When there is no Overlay and `open` is moving to `true`, lazily import/create\n        // an Overlay and apply that state to it.\n        customElements\n            .whenDefined('sp-overlay')\n            .then(async (): Promise<void> => {\n                const { Overlay } = await import(\n                    '@spectrum-web-components/overlay/src/Overlay.js'\n                );\n                this.overlay = new Overlay();\n                this.host.open = true;\n                this.host.requestUpdate();\n            });\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n    }\n\n    private _overlay!: AbstractOverlay;\n\n    public get overlay(): AbstractOverlay {\n        return this._overlay;\n    }\n\n    public set overlay(overlay: AbstractOverlay | undefined) {\n        if (!overlay) return;\n        if (this.overlay === overlay) return;\n        this._overlay = overlay;\n        this.initOverlay();\n    }\n\n    type!: InteractionTypes;\n\n    constructor(\n        public target: HTMLElement,\n        public host: PickerBase\n    ) {\n        this.target = target;\n        this.host = host;\n        this.host.addController(this);\n        this.init();\n    }\n\n    releaseDescription(): void {}\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.overlay?.manuallyKeepOpen();\n            }\n        }\n        if (!this.open) {\n            this.host.optionsMenu.updateSelectedItemIndex();\n            this.host.optionsMenu.closeDescendentOverlays();\n        }\n    }\n\n    initOverlay(): void {\n        if (this.overlay) {\n            this.overlay.addEventListener('beforetoggle', (event: Event) => {\n                this.handleBeforetoggle(\n                    event as Event & {\n                        target: Overlay;\n                        newState: 'open' | 'closed';\n                    }\n                );\n            });\n            this.overlay.type =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? 'modal'\n                    : 'auto';\n            this.overlay.triggerElement = this.host as HTMLElement;\n            this.overlay.placement =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? undefined\n                    : this.host.placement;\n            // We should not be applying open is set programmatically via the picker's open.property.\n            // Focus should only be applied if a user action causes the menu to open. Otherwise,\n            // we could be pulling focus from a user when an picker with an open menu loads.\n            this.overlay.receivesFocus = 'false';\n            this.overlay.willPreventClose =\n                this.preventNextToggle !== 'no' && this.open;\n            this.overlay.addEventListener(\n                'slottable-request',\n                this.host.handleSlottableRequest\n            );\n        }\n    }\n\n    public handlePointerdown(_event: PointerEvent): void {}\n\n    public 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.host.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n        if (this.preventNextToggle === 'no') this.host.close();\n    }\n\n    public handleActivate(_event: Event): void {}\n\n    /* c8 ignore next 3 */\n    init(): void {}\n\n    abort(): void {\n        this.releaseDescription();\n        this.abortController?.abort();\n    }\n\n    hostConnected(): void {\n        this.init();\n        this.host.addEventListener('sp-opened', () => {\n            /**\n             * set shouldSupportDragAndSelect to false for mobile\n             * to prevent click event being captured behind the menu-tray\n             * we do this here because the menu gets reinitialized on overlay open\n             */\n            this.host.optionsMenu.shouldSupportDragAndSelect =\n                !this.host.isMobile.matches;\n        });\n        this.host.addEventListener('sp-closed', () => {\n            if (\n                !this.open &&\n                this.host.optionsMenu.matches(':focus-within') &&\n                !this.host.button.matches(':focus')\n            ) {\n                this.host.button.focus();\n            }\n        });\n    }\n\n    hostDisconnected(): void {\n        this.abortController?.abort();\n    }\n\n    public hostUpdated(): void {\n        if (\n            this.overlay &&\n            this.host.dependencyManager.loaded &&\n            this.host.open !== this.overlay.open\n        ) {\n            this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n            this.overlay.open = this.host.open;\n        }\n    }\n}\n"],
   "mappings": "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",
   "names": ["InteractionTypes", "Overlay"]
 }

package/src/InteractionController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["InteractionController.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    ReactiveController,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.js';\n\nexport enum InteractionTypes {\n    'desktop',\n    'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n    abortController!: AbortController;\n\n    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    public pointerdownState = false;\n    public enterKeydownOn: EventTarget | null = null;\n\n    public container!: TemplateResult;\n\n    get activelyOpening(): boolean {\n        return false;\n    }\n\n    private _open = false;\n\n    public get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Set `open`\n     */\n    public set open(open: boolean) {\n        if (this._open === open) return;\n        this._open = open;\n\n        if (this.overlay) {\n            this.host.open = open;\n            return;\n        }\n\n        // When there is no Overlay and `open` is moving to `true`, lazily import/create\n        // an Overlay and apply that state to it.\n        customElements\n            .whenDefined('sp-overlay')\n            .then(async (): Promise<void> => {\n                const { Overlay } = await import(\n                    '@spectrum-web-components/overlay/src/Overlay.js'\n                );\n                this.overlay = new Overlay();\n                this.host.open = true;\n                this.host.requestUpdate();\n            });\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n    }\n\n    private _overlay!: AbstractOverlay;\n\n    public get overlay(): AbstractOverlay {\n        return this._overlay;\n    }\n\n    public set overlay(overlay: AbstractOverlay | undefined) {\n        if (!overlay) return;\n        if (this.overlay === overlay) return;\n        this._overlay = overlay;\n        this.initOverlay();\n    }\n\n    type!: InteractionTypes;\n\n    constructor(\n        public target: HTMLElement,\n        public host: PickerBase\n    ) {\n        this.target = target;\n        this.host = host;\n        this.host.addController(this);\n        this.init();\n    }\n\n    releaseDescription(): void {}\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.overlay?.manuallyKeepOpen();\n            }\n        }\n        if (!this.open) {\n            this.host.optionsMenu.updateSelectedItemIndex();\n            this.host.optionsMenu.closeDescendentOverlays();\n        }\n    }\n\n    initOverlay(): void {\n        if (this.overlay) {\n            this.overlay.addEventListener('beforetoggle', (event: Event) => {\n                this.handleBeforetoggle(\n                    event as Event & {\n                        target: Overlay;\n                        newState: 'open' | 'closed';\n                    }\n                );\n            });\n            this.overlay.type =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? 'modal'\n                    : 'auto';\n            this.overlay.triggerElement = this.host as HTMLElement;\n            this.overlay.placement =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? undefined\n                    : this.host.placement;\n            // We should not be applying open is set programmatically via the picker's open.property.\n            // Focus should only be applied if a user action causes the menu to open. Otherwise,\n            // we could be pulling focus from a user when an picker with an open menu loads.\n            this.overlay.receivesFocus = 'false';\n            this.overlay.willPreventClose =\n                this.preventNextToggle !== 'no' && this.open;\n            this.overlay.addEventListener(\n                'slottable-request',\n                this.host.handleSlottableRequest\n            );\n        }\n    }\n\n    public handlePointerdown(_event: PointerEvent): void {}\n\n    public 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.host.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n        if (this.preventNextToggle === 'no') this.host.close();\n    }\n\n    public handleActivate(_event: Event): void {}\n\n    /* c8 ignore next 3 */\n    init(): void {}\n\n    abort(): void {\n        this.releaseDescription();\n        this.abortController?.abort();\n    }\n\n    hostConnected(): void {\n        this.init();\n        this.host.addEventListener('sp-opened', () => {\n            /**\n             * set shouldSupportDragAndSelect to false for mobile\n             * to prevent click event being captured behind the menu-tray\n             * we do this here because the menu gets reinitialized on overlay open\n             */\n            this.host.optionsMenu.shouldSupportDragAndSelect =\n                !this.host.isMobile.matches;\n        });\n        this.host.addEventListener('sp-closed', () => {\n            if (\n                !this.open &&\n                this.host.optionsMenu.matches(':focus-within') &&\n                !this.host.button.matches(':focus')\n            ) {\n                this.host.button.focus();\n            }\n        });\n    }\n\n    hostDisconnected(): void {\n        this.abortController?.abort();\n    }\n\n    public hostUpdated(): void {\n        if (\n            this.overlay &&\n            this.host.dependencyManager.loaded &&\n            this.host.open !== this.overlay.open\n        ) {\n            this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n            this.overlay.open = this.host.open;\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    ReactiveController,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.js';\n\nexport enum InteractionTypes {\n    'desktop',\n    'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n    abortController!: AbortController;\n\n    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n    public pointerdownState = false;\n    public enterKeydownOn: EventTarget | null = null;\n\n    public container!: TemplateResult;\n\n    get activelyOpening(): boolean {\n        return false;\n    }\n\n    private _open = false;\n\n    public get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Set `open`\n     */\n    public set open(open: boolean) {\n        if (this._open === open) return;\n        this._open = open;\n\n        if (this.overlay) {\n            this.host.open = open;\n            return;\n        }\n\n        // When there is no Overlay and `open` is moving to `true`, lazily import/create\n        // an Overlay and apply that state to it.\n        customElements\n            .whenDefined('sp-overlay')\n            .then(async (): Promise<void> => {\n                const { Overlay } = await import(\n                    '@spectrum-web-components/overlay/src/Overlay.js'\n                );\n                this.overlay = new Overlay();\n                this.host.open = true;\n                this.host.requestUpdate();\n            });\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n    }\n\n    private _overlay!: AbstractOverlay;\n\n    public get overlay(): AbstractOverlay {\n        return this._overlay;\n    }\n\n    public set overlay(overlay: AbstractOverlay | undefined) {\n        if (!overlay) return;\n        if (this.overlay === overlay) return;\n        this._overlay = overlay;\n        this.initOverlay();\n    }\n\n    type!: InteractionTypes;\n\n    constructor(\n        public target: HTMLElement,\n        public host: PickerBase\n    ) {\n        this.target = target;\n        this.host = host;\n        this.host.addController(this);\n        this.init();\n    }\n\n    releaseDescription(): void {}\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.overlay?.manuallyKeepOpen();\n            }\n        }\n        if (!this.open) {\n            this.host.optionsMenu.updateSelectedItemIndex();\n            this.host.optionsMenu.closeDescendentOverlays();\n        }\n    }\n\n    initOverlay(): void {\n        if (this.overlay) {\n            this.overlay.addEventListener('beforetoggle', (event: Event) => {\n                this.handleBeforetoggle(\n                    event as Event & {\n                        target: Overlay;\n                        newState: 'open' | 'closed';\n                    }\n                );\n            });\n            this.overlay.type =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? 'modal'\n                    : 'auto';\n            this.overlay.triggerElement = this.host as HTMLElement;\n            this.overlay.placement =\n                this.host.isMobile.matches && !this.host.forcePopover\n                    ? undefined\n                    : this.host.placement;\n            // We should not be applying open is set programmatically via the picker's open.property.\n            // Focus should only be applied if a user action causes the menu to open. Otherwise,\n            // we could be pulling focus from a user when an picker with an open menu loads.\n            this.overlay.receivesFocus = 'false';\n            this.overlay.willPreventClose =\n                this.preventNextToggle !== 'no' && this.open;\n            this.overlay.addEventListener(\n                'slottable-request',\n                this.host.handleSlottableRequest\n            );\n        }\n    }\n\n    public handlePointerdown(_event: PointerEvent): void {}\n\n    public 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.host.optionsMenu\n        ) {\n            this.preventNextToggle = 'yes';\n        }\n        if (this.preventNextToggle === 'no') this.host.close();\n    }\n\n    public handleActivate(_event: Event): void {}\n\n    /* c8 ignore next 3 */\n    init(): void {}\n\n    abort(): void {\n        this.releaseDescription();\n        this.abortController?.abort();\n    }\n\n    hostConnected(): void {\n        this.init();\n        this.host.addEventListener('sp-opened', () => {\n            /**\n             * set shouldSupportDragAndSelect to false for mobile\n             * to prevent click event being captured behind the menu-tray\n             * we do this here because the menu gets reinitialized on overlay open\n             */\n            this.host.optionsMenu.shouldSupportDragAndSelect =\n                !this.host.isMobile.matches;\n        });\n        this.host.addEventListener('sp-closed', () => {\n            if (\n                !this.open &&\n                this.host.optionsMenu.matches(':focus-within') &&\n                !this.host.button.matches(':focus')\n            ) {\n                this.host.button.focus();\n            }\n        });\n    }\n\n    hostDisconnected(): void {\n        this.abortController?.abort();\n    }\n\n    public hostUpdated(): void {\n        if (\n            this.overlay &&\n            this.host.dependencyManager.loaded &&\n            this.host.open !== this.overlay.open\n        ) {\n            this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n            this.overlay.open = this.host.open;\n        }\n    }\n}\n"],
   "mappings": "aAoBO,WAAK,kBAAAA,IACRA,IAAA,qBACAA,IAAA,mBAFQA,IAAA,sBAIL,aAAM,wBAA0B,gCAEhC,aAAM,qBAAoD,CA6D7D,YACWC,EACAC,EACT,CAFS,YAAAD,EACA,UAAAC,EA5DX,KAAO,kBAA4C,KACnD,KAAO,iBAAmB,GAC1B,KAAO,eAAqC,KAQ5C,KAAQ,MAAQ,GAoDZ,KAAK,OAASD,EACd,KAAK,KAAOC,EACZ,KAAK,KAAK,cAAc,IAAI,EAC5B,KAAK,KAAK,CACd,CA5DA,IAAI,iBAA2B,CAC3B,MAAO,EACX,CAIA,IAAW,MAAgB,CACvB,OAAO,KAAK,KAChB,CAKA,IAAW,KAAKC,EAAe,CAC3B,GAAI,KAAK,QAAUA,EAGnB,IAFA,KAAK,MAAQA,EAET,KAAK,QAAS,CACd,KAAK,KAAK,KAAOA,EACjB,MACJ,CAIA,eACK,YAAY,YAAY,EACxB,KAAK,SAA2B,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAI,KAAM,QACtB,iDACJ,EACA,KAAK,QAAU,IAAIA,EACnB,KAAK,KAAK,KAAO,GACjB,KAAK,KAAK,cAAc,CAC5B,CAAC,EACL,OAAO,gDAAgD,EAC3D,CAIA,IAAW,SAA2B,CAClC,OAAO,KAAK,QAChB,CAEA,IAAW,QAAQC,EAAsC,CAChDA,GACD,KAAK,UAAYA,IACrB,KAAK,SAAWA,EAChB,KAAK,YAAY,EACrB,CAcA,oBAA2B,CAAC,CAElB,mBACNC,EAII,CAxGZ,IAAAC,EAyGYD,EAAM,aAAa,EAAE,CAAC,IAAMA,EAAM,SAGlCA,EAAM,WAAa,WACf,KAAK,oBAAsB,KAC3B,KAAK,KAAO,GACJ,KAAK,mBAGbC,EAAA,KAAK,UAAL,MAAAA,EAAc,oBAGjB,KAAK,OACN,KAAK,KAAK,YAAY,wBAAwB,EAC9C,KAAK,KAAK,YAAY,wBAAwB,GAEtD,CAEA,aAAoB,CACZ,KAAK,UACL,KAAK,QAAQ,iBAAiB,eAAiBD,GAAiB,CAC5D,KAAK,mBACDA,CAIJ,CACJ,CAAC,EACD,KAAK,QAAQ,KACT,KAAK,KAAK,SAAS,SAAW,CAAC,KAAK,KAAK,aACnC,QACA,OACV,KAAK,QAAQ,eAAiB,KAAK,KACnC,KAAK,QAAQ,UACT,KAAK,KAAK,SAAS,SAAW,CAAC,KAAK,KAAK,aACnC,OACA,KAAK,KAAK,UAIpB,KAAK,QAAQ,cAAgB,QAC7B,KAAK,QAAQ,iBACT,KAAK,oBAAsB,MAAQ,KAAK,KAC5C,KAAK,QAAQ,iBACT,oBACA,KAAK,KAAK,sBACd,EAER,CAEO,kBAAkBE,EAA4B,CAAC,CAE/C,kBAAkBF,EAAyB,CAI1C,KAAK,oBAAsB,SAC3BA,EAAM,gBAAkB,KAAK,KAAK,cAElC,KAAK,kBAAoB,OAEzB,KAAK,oBAAsB,MAAM,KAAK,KAAK,MAAM,CACzD,CAEO,eAAeE,EAAqB,CAAC,CAG5C,MAAa,CAAC,CAEd,OAAc,CA9KlB,IAAAD,EA+KQ,KAAK,mBAAmB,GACxBA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEA,eAAsB,CAClB,KAAK,KAAK,EACV,KAAK,KAAK,iBAAiB,YAAa,IAAM,CAM1C,KAAK,KAAK,YAAY,2BAClB,CAAC,KAAK,KAAK,SAAS,OAC5B,CAAC,EACD,KAAK,KAAK,iBAAiB,YAAa,IAAM,CAEtC,CAAC,KAAK,MACN,KAAK,KAAK,YAAY,QAAQ,eAAe,GAC7C,CAAC,KAAK,KAAK,OAAO,QAAQ,QAAQ,GAElC,KAAK,KAAK,OAAO,MAAM,CAE/B,CAAC,CACL,CAEA,kBAAyB,CAzM7B,IAAAA,GA0MQA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEO,aAAoB,CAEnB,KAAK,SACL,KAAK,KAAK,kBAAkB,QAC5B,KAAK,KAAK,OAAS,KAAK,QAAQ,OAEhC,KAAK,QAAQ,iBAAmB,KAAK,oBAAsB,KAC3D,KAAK,QAAQ,KAAO,KAAK,KAAK,KAEtC,CACJ",
   "names": ["InteractionTypes", "target", "host", "open", "Overlay", "overlay", "event", "_a", "_event"]
 }

package/src/Picker.d.ts

@@ -11,19 +11,17 @@
  */
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import { StyleInfo } from '@spectrum-web-components/base/src/directives.js';
-import type { Tooltip } from '@spectrum-web-components/tooltip';
+import type { FieldLabel } from '@spectrum-web-components/field-label';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+import type { Menu, MenuItem, MenuItemChildren, MenuItemKeydownEvent } from '@spectrum-web-components/menu';
 import '@spectrum-web-components/menu/sp-menu.js';
-import type { Menu, MenuItem, MenuItemChildren } from '@spectrum-web-components/menu';
-import type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';
 import { Placement } from '@spectrum-web-components/overlay';
-import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
-import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
-import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
 import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
 import type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
-import type { FieldLabel } from '@spectrum-web-components/field-label';
+import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
+import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
+import type { Tooltip } from '@spectrum-web-components/tooltip';
 import { DesktopController } from './DesktopController.js';
 import { MobileController } from './MobileController.js';
 export declare const DESCRIPTION_ID = "option-picker";
@@ -87,12 +85,6 @@ export declare class PickerBase extends PickerBase_base {
     quiet: boolean;
     value: string;
     get selectedItem(): MenuItem | undefined;
-    pendingStateController: PendingStateController<this>;
-    /**
-     * Initializes the `PendingStateController` for the Picker component.
-     * The `PendingStateController` manages the pending state of the Picker.
-     */
-    constructor();
     set selectedItem(selectedItem: MenuItem | undefined);
     _selectedItem?: MenuItem;
     protected listRole: 'listbox' | 'menu';
@@ -126,6 +118,7 @@ export declare class PickerBase extends PickerBase_base {
     }): void;
     handleSlottableRequest: (_event: SlottableRequestEvent) => void;
     protected renderLabelContent(content: Node[]): TemplateResult | Node[];
+    protected renderLoader(): TemplateResult;
     protected get buttonContent(): TemplateResult[];
     applyFocusElementLabel: (value: string, labelElement: FieldLabel) => void;
     protected hasAccessibleLabel(): boolean;

package/src/Picker.dev.js

@@ -16,27 +16,26 @@ import {
   SizedMixin,
   SpectrumElement
 } from "@spectrum-web-components/base";
-import {
-  classMap,
-  ifDefined,
-  styleMap
-} from "@spectrum-web-components/base/src/directives.js";
 import {
   property,
   query,
   state
 } from "@spectrum-web-components/base/src/decorators.js";
-import pickerStyles from "./picker.css.js";
+import {
+  classMap,
+  ifDefined,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
 import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.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 { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
 import {
   IS_MOBILE,
   MatchMediaController
 } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
-import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
-import { PendingStateController } from "@spectrum-web-components/reactive-controllers/src/PendingState.js";
+import pickerStyles from "./picker.css.js";
 import { strategies } from "./strategies.dev.js";
 const chevronClass = {
   s: "spectrum-UIIcon-ChevronDown75",
@@ -48,12 +47,8 @@ export const DESCRIPTION_ID = "option-picker";
 export class PickerBase extends SizedMixin(SpectrumElement, {
   noDefaultSize: true
 }) {
-  /**
-   * Initializes the `PendingStateController` for the Picker component.
-   * The `PendingStateController` manages the pending state of the Picker.
-   */
   constructor() {
-    super();
+    super(...arguments);
     this.isMobile = new MatchMediaController(this, IS_MOBILE);
     this.dependencyManager = new DependencyManagerController(this);
     this.deprecatedMenu = null;
@@ -132,7 +127,6 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
         { once: true }
       );
     };
-    this.pendingStateController = new PendingStateController(this);
   }
   get menuItems() {
     return this.optionsMenu.childItems;
@@ -315,7 +309,16 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
     this.requestUpdate("selectedItemContent", oldContent);
   }
   handleTooltipSlotchange(event) {
+    var _a;
     this.tooltipEl = event.target.assignedElements()[0];
+    if ((_a = this.tooltipEl) == null ? void 0 : _a.selfManaged) {
+      this.updateComplete.then(() => {
+        var _a2;
+        if (((_a2 = this.tooltipEl) == null ? void 0 : _a2.overlayElement) && this.button) {
+          this.tooltipEl.overlayElement.triggerElement = this.button;
+        }
+      });
+    }
   }
   renderLabelContent(content) {
     if (this.value && this.selectedItem) {
@@ -333,6 +336,17 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
             </slot>
         `;
   }
+  renderLoader() {
+    import("@spectrum-web-components/progress-circle/sp-progress-circle.js");
+    return html`
+            <sp-progress-circle
+                size="s"
+                indeterminate
+                role="presentation"
+                class="progress-circle"
+            ></sp-progress-circle>
+        `;
+  }
   get buttonContent() {
     const labelClasses = {
       "visually-hidden": this.icons === "only" && !!this.value,
@@ -370,7 +384,16 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                               class="validation-icon"
                           ></sp-icon-alert>
                       ` : nothing}
-                ${this.pendingStateController.renderPendingState()}
+                ${this.pending ? html`
+                          ${this.renderLoader()}
+                          <span
+                              aria-hidden="true"
+                              class="visually-hidden"
+                              id="pending-label"
+                          >
+                              ${this.pendingLabel}
+                          </span>
+                      ` : nothing}
                 <sp-icon-chevron100
                     class="picker ${chevronClass[this.size]}"
                 ></sp-icon-chevron100>
@@ -428,7 +451,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                 aria-describedby="tooltip ${DESCRIPTION_ID}"
                 aria-expanded=${this.open ? "true" : "false"}
                 aria-haspopup="true"
-                aria-labelledby="loader icon label applied-label"
+                aria-labelledby="icon label applied-label pending-label"
                 id="button"
                 class=${ifDefined(
       this.labelAlignment ? `label-${this.labelAlignment}` : void 0