npm - @spectrum-web-components/picker - Versions diffs - 0.31.1-react.21 → 0.32.0 - Mend

@spectrum-web-components/picker 0.31.1-react.21 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/src/Picker.dev.js.map CHANGED Viewed

@@ -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    render,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\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    MenuItemAddedOrUpdatedEvent,\n    MenuItemChildren,\n    MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n    openOverlay,\n    OverlayOptions,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\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 class PickerBase extends SizedMixin(Focusable) {\n    /**\n     * @private\n     */\n    public static openOverlay = async (\n        target: HTMLElement,\n        interaction: TriggerInteractions,\n        content: HTMLElement,\n        options: OverlayOptions\n    ): Promise<() => void> => {\n        return await openOverlay(target, interaction, content, options);\n    };\n\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    public get target(): HTMLButtonElement | this {\n        return this.button;\n    }\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    public menuItems: MenuItem[] = [];\n    private restoreChildren?: () => void;\n\n    public optionsMenu!: Menu;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n    private closeOverlay?: Promise<() => void>;\n\n    private popoverEl!: Popover;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public constructor() {\n        super();\n        this.onKeydown = this.onKeydown.bind(this);\n    }\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        this.focused = true;\n    }\n\n    public onButtonBlur(): void {\n        this.focused = false;\n        (this.target as HTMLButtonElement).removeEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    protected onButtonClick(): void {\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 onHelperFocus(): void {\n        // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public onButtonFocus(): void {\n        (this.target as HTMLButtonElement).addEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    public handleChange(event: Event): void {\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        if (event.cancelable) {\n            event.stopPropagation();\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 onKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    public async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n        this.selectedItem = item;\n        this.value = item.value;\n        this.open = false;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem, 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        }\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    public overlayOpenCallback = async (): Promise<void> => {\n        this.updateMenuItems();\n        await this.itemsUpdated;\n        await this.optionsMenu.updateComplete;\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    public overlayCloseCallback = async (): Promise<void> => {\n        if (this.restoreChildren) {\n            this.restoreChildren();\n            this.restoreChildren = undefined;\n        }\n        this.close();\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    private popoverFragment!: DocumentFragment;\n\n    private async generatePopover(): Promise<void> {\n        if (!this.popoverFragment) {\n            this.popoverFragment = document.createDocumentFragment();\n        }\n        render(this.renderPopover, this.popoverFragment, { host: this });\n        this.popoverEl = this.popoverFragment.children[0] as Popover;\n        this.optionsMenu = this.popoverEl.children[1] as Menu;\n    }\n\n    private async openMenu(): Promise<void> {\n        /* c8 ignore next 9 */\n        let reparentableChildren: Element[] = [];\n        const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n        await this.generatePopover();\n        if (deprecatedMenu) {\n            reparentableChildren = Array.from(deprecatedMenu.children);\n        } else {\n            reparentableChildren = Array.from(this.children).filter(\n                (element) => {\n                    return !element.hasAttribute('slot');\n                }\n            );\n        }\n\n        if (reparentableChildren.length === 0) {\n            this.menuStateResolver();\n            return;\n        }\n\n        this.restoreChildren = reparentChildren<\n            Element & { focused?: boolean }\n        >(reparentableChildren, this.optionsMenu, {\n            position: 'beforeend',\n            prepareCallback: (\n                el: Element & {\n                    focused?: boolean | undefined;\n                    value?: string;\n                    selected?: boolean;\n                }\n            ) => {\n                if (this.value === el.value) {\n                    this.setMenuItemSelected(el as MenuItem, true);\n                }\n                return (el) => {\n                    if (typeof el.focused !== 'undefined') {\n                        el.focused = false;\n                    }\n                };\n            },\n        });\n\n        this.sizePopover(this.popoverEl);\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = true;\n        }\n        this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n            placement: this.isMobile.matches ? 'none' : this.placement,\n            receivesFocus: 'auto',\n        });\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = false;\n        }\n    }\n\n    protected sizePopover(popover: HTMLElement): void {\n        if (this.isMobile.matches) {\n            popover.style.setProperty('--swc-menu-width', `100%`);\n            return;\n        }\n    }\n\n    private async closeMenu(): Promise<void> {\n        if (this.closeOverlay) {\n            const closeOverlay = this.closeOverlay;\n            delete this.closeOverlay;\n            (await closeOverlay)();\n        }\n    }\n\n    protected get selectedItemContent(): MenuItemChildren {\n        if (this.selectedItem) {\n            return this.selectedItem.itemChildren;\n        }\n        return { icon: [], content: [] };\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\">${this.label}</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        };\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span id=\"label\" class=${classMap(labelClasses)}>\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\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            `,\n        ];\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        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused ? '-1' : '0'}\"\n                @focus=${this.onHelperFocus}\n            ></span>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-labelledby=\"button icon label\"\n                id=\"button\"\n                class=\"button\"\n                @blur=${this.onButtonBlur}\n                @click=${this.onButtonClick}\n                @focus=${this.onButtonFocus}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\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 (\n            changes.has('open') &&\n            (this.open || typeof changes.get('open') !== 'undefined')\n        ) {\n            this.menuStatePromise = new Promise(\n                (res) => (this.menuStateResolver = res)\n            );\n            if (this.open) {\n                this.openMenu();\n            } else {\n                this.closeMenu();\n            }\n        }\n        if (changes.has('value') && !changes.has('selectedItem')) {\n            this.updateMenuItems();\n        }\n        if (window.__swc.DEBUG) {\n            if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n        return html`\n            <div class=\"visually-hidden\">\n                <button\n                    tabindex=\"-1\"\n                    arial-label=\"Dismiss\"\n                    @click=${this.close}\n                ></button>\n            </div>\n        `;\n    }\n\n    protected get renderPopover(): TemplateResult {\n        const content = html`\n            ${this.dismissHelper}\n            <sp-menu\n                id=\"menu\"\n                role=\"${this.listRole}\"\n                @change=${this.handleChange}\n                .selects=${this.selects}\n            ></sp-menu>\n            ${this.dismissHelper}\n        `;\n        if (this.isMobile.matches) {\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"dialog\"\n                    @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                    .overlayOpenCallback=${this.overlayOpenCallback}\n                    .overlayCloseCallback=${this.overlayCloseCallback}\n                >\n                    ${content}\n                </sp-tray>\n            `;\n        }\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"dialog\"\n                @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                .overlayOpenCallback=${this.overlayOpenCallback}\n                .overlayCloseCallback=${this.overlayCloseCallback}\n            >\n                ${content}\n            </sp-popover>\n        `;\n    }\n\n    private _willUpdateItems = false;\n    protected itemsUpdated: Promise<void> = Promise.resolve();\n\n    /**\n     * Acquire the available MenuItems in the Picker by\n     * direct element query or by assuming the list managed\n     * by the Menu within the open options overlay.\n     */\n    protected updateMenuItems(\n        event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n    ): void {\n        if (this.open && event?.type === 'sp-menu-item-removed') return;\n        if (this._willUpdateItems) return;\n        this._willUpdateItems = true;\n        if (event?.item === this.selectedItem) {\n            this.requestUpdate();\n        }\n\n        let resolve = (): void => {\n            return;\n        };\n        this.itemsUpdated = new Promise((res) => (resolve = res));\n        // Debounce the update so we only update once\n        // if multiple items have changed\n        window.requestAnimationFrame(async () => {\n            if (this.open) {\n                await this.optionsMenu.updateComplete;\n                this.menuItems = this.optionsMenu.childItems;\n            } else {\n                this.menuItems = [\n                    ...this.querySelectorAll(\n                        'sp-menu-item:not([slot=\"submenu\"] *)'\n                    ),\n                ] as MenuItem[];\n            }\n            this.manageSelection();\n            resolve();\n            this._willUpdateItems = false;\n        });\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        await this.menuStatePromise;\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\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    }\n\n    private menuStatePromise = Promise.resolve();\n    private menuStateResolver!: () => void;\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.menuStatePromise;\n        await this.itemsUpdated;\n        await this.selectionPromise;\n        return complete;\n    }\n\n    public override connectedCallback(): void {\n        this.updateMenuItems();\n        this.addEventListener(\n            'sp-menu-item-added-or-updated',\n            this.updateMenuItems\n        );\n        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n        super.connectedCallback();\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 - 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 sizePopover(popover: HTMLElement): void {\n        super.sizePopover(popover);\n\n        if (this.quiet) return;\n        // only use `this.offsetWidth` when Standard variant\n        popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n    }\n\n    protected override onKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly) {\n            return;\n        }\n        event.preventDefault();\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            return;\n        }\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 = !this.value || 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"],
+  "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    render,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\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    MenuItemAddedOrUpdatedEvent,\n    MenuItemChildren,\n    MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n    openOverlay,\n    OverlayOptions,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\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 class PickerBase extends SizedMixin(Focusable) {\n    /**\n     * @private\n     */\n    public static openOverlay = async (\n        target: HTMLElement,\n        interaction: TriggerInteractions,\n        content: HTMLElement,\n        options: OverlayOptions\n    ): Promise<() => void> => {\n        return await openOverlay(target, interaction, content, options);\n    };\n\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    public get target(): HTMLButtonElement | this {\n        return this.button;\n    }\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    public menuItems: MenuItem[] = [];\n    private restoreChildren?: () => void;\n\n    public optionsMenu!: Menu;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n    private closeOverlay?: Promise<() => void>;\n\n    private popoverEl!: Popover;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public constructor() {\n        super();\n        this.onKeydown = this.onKeydown.bind(this);\n    }\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        this.focused = true;\n    }\n\n    public onButtonBlur(): void {\n        this.focused = false;\n        (this.target as HTMLButtonElement).removeEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    protected onButtonClick(): void {\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 onHelperFocus(): void {\n        // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public onButtonFocus(): void {\n        (this.target as HTMLButtonElement).addEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    public handleChange(event: Event): void {\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        if (event.cancelable) {\n            event.stopPropagation();\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 onKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    public async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n        this.selectedItem = item;\n        this.value = item.value;\n        this.open = false;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem, 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        }\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    public overlayOpenCallback = async (): Promise<void> => {\n        this.updateMenuItems();\n        await this.itemsUpdated;\n        await this.optionsMenu.updateComplete;\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    public overlayCloseCallback = async (): Promise<void> => {\n        if (this.restoreChildren) {\n            this.restoreChildren();\n            this.restoreChildren = undefined;\n        }\n        this.close();\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    private popoverFragment!: DocumentFragment;\n\n    private async generatePopover(): Promise<void> {\n        if (!this.popoverFragment) {\n            this.popoverFragment = document.createDocumentFragment();\n        }\n        render(this.renderPopover, this.popoverFragment, { host: this });\n        this.popoverEl = this.popoverFragment.children[0] as Popover;\n        this.optionsMenu = this.popoverEl.children[1] as Menu;\n    }\n\n    private async openMenu(): Promise<void> {\n        /* c8 ignore next 9 */\n        let reparentableChildren: Element[] = [];\n        const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n        await this.generatePopover();\n        if (deprecatedMenu) {\n            reparentableChildren = Array.from(deprecatedMenu.children);\n        } else {\n            reparentableChildren = Array.from(this.children).filter(\n                (element) => {\n                    return !element.hasAttribute('slot');\n                }\n            );\n        }\n\n        if (reparentableChildren.length === 0) {\n            this.menuStateResolver();\n            return;\n        }\n\n        this.restoreChildren = reparentChildren<\n            Element & { focused?: boolean }\n        >(reparentableChildren, this.optionsMenu, {\n            position: 'beforeend',\n            prepareCallback: (\n                el: Element & {\n                    focused?: boolean | undefined;\n                    value?: string;\n                    selected?: boolean;\n                }\n            ) => {\n                if (this.value === el.value) {\n                    this.setMenuItemSelected(el as MenuItem, true);\n                }\n                return (el) => {\n                    if (typeof el.focused !== 'undefined') {\n                        el.focused = false;\n                    }\n                };\n            },\n        });\n\n        this.sizePopover(this.popoverEl);\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = true;\n        }\n        this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n            placement: this.isMobile.matches ? 'none' : this.placement,\n            receivesFocus: 'auto',\n        });\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = false;\n        }\n    }\n\n    protected sizePopover(popover: HTMLElement): void {\n        if (this.isMobile.matches) {\n            popover.style.setProperty('--swc-menu-width', `100%`);\n            return;\n        }\n    }\n\n    private async closeMenu(): Promise<void> {\n        if (this.closeOverlay) {\n            const closeOverlay = this.closeOverlay;\n            delete this.closeOverlay;\n            (await closeOverlay)();\n        }\n    }\n\n    protected get selectedItemContent(): MenuItemChildren {\n        if (this.selectedItem) {\n            return this.selectedItem.itemChildren;\n        }\n        return { icon: [], content: [] };\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\">${this.label}</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        };\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span id=\"label\" class=${classMap(labelClasses)}>\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\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            `,\n        ];\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        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused ? '-1' : '0'}\"\n                @focus=${this.onHelperFocus}\n            ></span>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-labelledby=\"button icon label\"\n                id=\"button\"\n                class=\"button\"\n                @blur=${this.onButtonBlur}\n                @click=${this.onButtonClick}\n                @focus=${this.onButtonFocus}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\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 (\n            changes.has('open') &&\n            (this.open || typeof changes.get('open') !== 'undefined')\n        ) {\n            this.menuStatePromise = new Promise(\n                (res) => (this.menuStateResolver = res)\n            );\n            if (this.open) {\n                this.openMenu();\n            } else {\n                this.closeMenu();\n            }\n        }\n        if (changes.has('value') && !changes.has('selectedItem')) {\n            this.updateMenuItems();\n        }\n        if (window.__swc.DEBUG) {\n            if (!this.hasUpdated && this.querySelector('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 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 get renderPopover(): TemplateResult {\n        const content = html`\n            ${this.dismissHelper}\n            <sp-menu\n                id=\"menu\"\n                role=\"${this.listRole}\"\n                @change=${this.handleChange}\n                .selects=${this.selects}\n            ></sp-menu>\n            ${this.dismissHelper}\n        `;\n        if (this.isMobile.matches) {\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"dialog\"\n                    @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                    .overlayOpenCallback=${this.overlayOpenCallback}\n                    .overlayCloseCallback=${this.overlayCloseCallback}\n                >\n                    ${content}\n                </sp-tray>\n            `;\n        }\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"dialog\"\n                @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                .overlayOpenCallback=${this.overlayOpenCallback}\n                .overlayCloseCallback=${this.overlayCloseCallback}\n            >\n                ${content}\n            </sp-popover>\n        `;\n    }\n\n    private _willUpdateItems = false;\n    protected itemsUpdated: Promise<void> = Promise.resolve();\n\n    /**\n     * Acquire the available MenuItems in the Picker by\n     * direct element query or by assuming the list managed\n     * by the Menu within the open options overlay.\n     */\n    protected updateMenuItems(\n        event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n    ): void {\n        if (this.open && event?.type === 'sp-menu-item-removed') return;\n        if (this._willUpdateItems) return;\n        this._willUpdateItems = true;\n        if (event?.item === this.selectedItem) {\n            this.requestUpdate();\n        }\n\n        let resolve = (): void => {\n            return;\n        };\n        this.itemsUpdated = new Promise((res) => (resolve = res));\n        // Debounce the update so we only update once\n        // if multiple items have changed\n        window.requestAnimationFrame(async () => {\n            if (this.open) {\n                await this.optionsMenu.updateComplete;\n                this.menuItems = this.optionsMenu.childItems;\n            } else {\n                this.menuItems = [\n                    ...this.querySelectorAll(\n                        'sp-menu-item:not([slot=\"submenu\"] *)'\n                    ),\n                ] as MenuItem[];\n            }\n            this.manageSelection();\n            resolve();\n            this._willUpdateItems = false;\n        });\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        await this.menuStatePromise;\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\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    }\n\n    private menuStatePromise = Promise.resolve();\n    private menuStateResolver!: () => void;\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.menuStatePromise;\n        await this.itemsUpdated;\n        await this.selectionPromise;\n        return complete;\n    }\n\n    public override connectedCallback(): void {\n        this.updateMenuItems();\n        this.addEventListener(\n            'sp-menu-item-added-or-updated',\n            this.updateMenuItems\n        );\n        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n        super.connectedCallback();\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 - 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 sizePopover(popover: HTMLElement): void {\n        super.sizePopover(popover);\n\n        if (this.quiet) return;\n        // only use `this.offsetWidth` when Standard variant\n        popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n    }\n\n    protected override onKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly) {\n            return;\n        }\n        event.preventDefault();\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            return;\n        }\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 = !this.value || 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": ["el"]
 }

package/src/Picker.js CHANGED Viewed

@@ -39,7 +39,7 @@
             <div class="visually-hidden">
                 <button
                     tabindex="-1"
-                    arial-label="Dismiss"
+                    aria-label="Dismiss"
                     @click=${this.close}
                 ></button>
             </div>

package/src/Picker.js.map CHANGED Viewed

@@ -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    render,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\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    MenuItemAddedOrUpdatedEvent,\n    MenuItemChildren,\n    MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n    openOverlay,\n    OverlayOptions,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\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 class PickerBase extends SizedMixin(Focusable) {\n    /**\n     * @private\n     */\n    public static openOverlay = async (\n        target: HTMLElement,\n        interaction: TriggerInteractions,\n        content: HTMLElement,\n        options: OverlayOptions\n    ): Promise<() => void> => {\n        return await openOverlay(target, interaction, content, options);\n    };\n\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    public get target(): HTMLButtonElement | this {\n        return this.button;\n    }\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    public menuItems: MenuItem[] = [];\n    private restoreChildren?: () => void;\n\n    public optionsMenu!: Menu;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n    private closeOverlay?: Promise<() => void>;\n\n    private popoverEl!: Popover;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public constructor() {\n        super();\n        this.onKeydown = this.onKeydown.bind(this);\n    }\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        this.focused = true;\n    }\n\n    public onButtonBlur(): void {\n        this.focused = false;\n        (this.target as HTMLButtonElement).removeEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    protected onButtonClick(): void {\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 onHelperFocus(): void {\n        // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public onButtonFocus(): void {\n        (this.target as HTMLButtonElement).addEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    public handleChange(event: Event): void {\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        if (event.cancelable) {\n            event.stopPropagation();\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 onKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    public async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n        this.selectedItem = item;\n        this.value = item.value;\n        this.open = false;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem, 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        }\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    public overlayOpenCallback = async (): Promise<void> => {\n        this.updateMenuItems();\n        await this.itemsUpdated;\n        await this.optionsMenu.updateComplete;\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    public overlayCloseCallback = async (): Promise<void> => {\n        if (this.restoreChildren) {\n            this.restoreChildren();\n            this.restoreChildren = undefined;\n        }\n        this.close();\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    private popoverFragment!: DocumentFragment;\n\n    private async generatePopover(): Promise<void> {\n        if (!this.popoverFragment) {\n            this.popoverFragment = document.createDocumentFragment();\n        }\n        render(this.renderPopover, this.popoverFragment, { host: this });\n        this.popoverEl = this.popoverFragment.children[0] as Popover;\n        this.optionsMenu = this.popoverEl.children[1] as Menu;\n    }\n\n    private async openMenu(): Promise<void> {\n        /* c8 ignore next 9 */\n        let reparentableChildren: Element[] = [];\n        const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n        await this.generatePopover();\n        if (deprecatedMenu) {\n            reparentableChildren = Array.from(deprecatedMenu.children);\n        } else {\n            reparentableChildren = Array.from(this.children).filter(\n                (element) => {\n                    return !element.hasAttribute('slot');\n                }\n            );\n        }\n\n        if (reparentableChildren.length === 0) {\n            this.menuStateResolver();\n            return;\n        }\n\n        this.restoreChildren = reparentChildren<\n            Element & { focused?: boolean }\n        >(reparentableChildren, this.optionsMenu, {\n            position: 'beforeend',\n            prepareCallback: (\n                el: Element & {\n                    focused?: boolean | undefined;\n                    value?: string;\n                    selected?: boolean;\n                }\n            ) => {\n                if (this.value === el.value) {\n                    this.setMenuItemSelected(el as MenuItem, true);\n                }\n                return (el) => {\n                    if (typeof el.focused !== 'undefined') {\n                        el.focused = false;\n                    }\n                };\n            },\n        });\n\n        this.sizePopover(this.popoverEl);\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = true;\n        }\n        this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n            placement: this.isMobile.matches ? 'none' : this.placement,\n            receivesFocus: 'auto',\n        });\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = false;\n        }\n    }\n\n    protected sizePopover(popover: HTMLElement): void {\n        if (this.isMobile.matches) {\n            popover.style.setProperty('--swc-menu-width', `100%`);\n            return;\n        }\n    }\n\n    private async closeMenu(): Promise<void> {\n        if (this.closeOverlay) {\n            const closeOverlay = this.closeOverlay;\n            delete this.closeOverlay;\n            (await closeOverlay)();\n        }\n    }\n\n    protected get selectedItemContent(): MenuItemChildren {\n        if (this.selectedItem) {\n            return this.selectedItem.itemChildren;\n        }\n        return { icon: [], content: [] };\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\">${this.label}</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        };\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span id=\"label\" class=${classMap(labelClasses)}>\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\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            `,\n        ];\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        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused ? '-1' : '0'}\"\n                @focus=${this.onHelperFocus}\n            ></span>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-labelledby=\"button icon label\"\n                id=\"button\"\n                class=\"button\"\n                @blur=${this.onButtonBlur}\n                @click=${this.onButtonClick}\n                @focus=${this.onButtonFocus}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\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 (\n            changes.has('open') &&\n            (this.open || typeof changes.get('open') !== 'undefined')\n        ) {\n            this.menuStatePromise = new Promise(\n                (res) => (this.menuStateResolver = res)\n            );\n            if (this.open) {\n                this.openMenu();\n            } else {\n                this.closeMenu();\n            }\n        }\n        if (changes.has('value') && !changes.has('selectedItem')) {\n            this.updateMenuItems();\n        }\n        if (window.__swc.DEBUG) {\n            if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n        return html`\n            <div class=\"visually-hidden\">\n                <button\n                    tabindex=\"-1\"\n                    arial-label=\"Dismiss\"\n                    @click=${this.close}\n                ></button>\n            </div>\n        `;\n    }\n\n    protected get renderPopover(): TemplateResult {\n        const content = html`\n            ${this.dismissHelper}\n            <sp-menu\n                id=\"menu\"\n                role=\"${this.listRole}\"\n                @change=${this.handleChange}\n                .selects=${this.selects}\n            ></sp-menu>\n            ${this.dismissHelper}\n        `;\n        if (this.isMobile.matches) {\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"dialog\"\n                    @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                    .overlayOpenCallback=${this.overlayOpenCallback}\n                    .overlayCloseCallback=${this.overlayCloseCallback}\n                >\n                    ${content}\n                </sp-tray>\n            `;\n        }\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"dialog\"\n                @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                .overlayOpenCallback=${this.overlayOpenCallback}\n                .overlayCloseCallback=${this.overlayCloseCallback}\n            >\n                ${content}\n            </sp-popover>\n        `;\n    }\n\n    private _willUpdateItems = false;\n    protected itemsUpdated: Promise<void> = Promise.resolve();\n\n    /**\n     * Acquire the available MenuItems in the Picker by\n     * direct element query or by assuming the list managed\n     * by the Menu within the open options overlay.\n     */\n    protected updateMenuItems(\n        event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n    ): void {\n        if (this.open && event?.type === 'sp-menu-item-removed') return;\n        if (this._willUpdateItems) return;\n        this._willUpdateItems = true;\n        if (event?.item === this.selectedItem) {\n            this.requestUpdate();\n        }\n\n        let resolve = (): void => {\n            return;\n        };\n        this.itemsUpdated = new Promise((res) => (resolve = res));\n        // Debounce the update so we only update once\n        // if multiple items have changed\n        window.requestAnimationFrame(async () => {\n            if (this.open) {\n                await this.optionsMenu.updateComplete;\n                this.menuItems = this.optionsMenu.childItems;\n            } else {\n                this.menuItems = [\n                    ...this.querySelectorAll(\n                        'sp-menu-item:not([slot=\"submenu\"] *)'\n                    ),\n                ] as MenuItem[];\n            }\n            this.manageSelection();\n            resolve();\n            this._willUpdateItems = false;\n        });\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        await this.menuStatePromise;\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\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    }\n\n    private menuStatePromise = Promise.resolve();\n    private menuStateResolver!: () => void;\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.menuStatePromise;\n        await this.itemsUpdated;\n        await this.selectionPromise;\n        return complete;\n    }\n\n    public override connectedCallback(): void {\n        this.updateMenuItems();\n        this.addEventListener(\n            'sp-menu-item-added-or-updated',\n            this.updateMenuItems\n        );\n        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n        super.connectedCallback();\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 - 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 sizePopover(popover: HTMLElement): void {\n        super.sizePopover(popover);\n\n        if (this.quiet) return;\n        // only use `this.offsetWidth` when Standard variant\n        popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n    }\n\n    protected override onKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly) {\n            return;\n        }\n        event.preventDefault();\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            return;\n        }\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 = !this.value || 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"],
+  "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    render,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\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    MenuItemAddedOrUpdatedEvent,\n    MenuItemChildren,\n    MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n    openOverlay,\n    OverlayOptions,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n    IS_MOBILE,\n    MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\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 class PickerBase extends SizedMixin(Focusable) {\n    /**\n     * @private\n     */\n    public static openOverlay = async (\n        target: HTMLElement,\n        interaction: TriggerInteractions,\n        content: HTMLElement,\n        options: OverlayOptions\n    ): Promise<() => void> => {\n        return await openOverlay(target, interaction, content, options);\n    };\n\n    protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n    @query('#button')\n    public button!: HTMLButtonElement;\n\n    public get target(): HTMLButtonElement | this {\n        return this.button;\n    }\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    public menuItems: MenuItem[] = [];\n    private restoreChildren?: () => void;\n\n    public optionsMenu!: Menu;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n    private closeOverlay?: Promise<() => void>;\n\n    private popoverEl!: Popover;\n\n    protected listRole: 'listbox' | 'menu' = 'listbox';\n    protected itemRole = 'option';\n\n    public constructor() {\n        super();\n        this.onKeydown = this.onKeydown.bind(this);\n    }\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        this.focused = true;\n    }\n\n    public onButtonBlur(): void {\n        this.focused = false;\n        (this.target as HTMLButtonElement).removeEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    protected onButtonClick(): void {\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 onHelperFocus(): void {\n        // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n        this.focused = true;\n        this.button.focus();\n    }\n\n    public onButtonFocus(): void {\n        (this.target as HTMLButtonElement).addEventListener(\n            'keydown',\n            this.onKeydown\n        );\n    }\n\n    public handleChange(event: Event): void {\n        const target = event.target as Menu;\n        const [selected] = target.selectedItems;\n        if (event.cancelable) {\n            event.stopPropagation();\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 onKeydown = (event: KeyboardEvent): void => {\n        this.focused = true;\n        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n            return;\n        }\n        event.preventDefault();\n        this.toggle(true);\n    };\n\n    public async setValueFromItem(\n        item: MenuItem,\n        menuChangeEvent?: Event\n    ): Promise<void> {\n        const oldSelectedItem = this.selectedItem;\n        const oldValue = this.value;\n        this.selectedItem = item;\n        this.value = item.value;\n        this.open = false;\n        await this.updateComplete;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            if (menuChangeEvent) {\n                menuChangeEvent.preventDefault();\n            }\n            this.setMenuItemSelected(this.selectedItem, 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        }\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    public overlayOpenCallback = async (): Promise<void> => {\n        this.updateMenuItems();\n        await this.itemsUpdated;\n        await this.optionsMenu.updateComplete;\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    public overlayCloseCallback = async (): Promise<void> => {\n        if (this.restoreChildren) {\n            this.restoreChildren();\n            this.restoreChildren = undefined;\n        }\n        this.close();\n        requestAnimationFrame(() => this.menuStateResolver());\n    };\n\n    private popoverFragment!: DocumentFragment;\n\n    private async generatePopover(): Promise<void> {\n        if (!this.popoverFragment) {\n            this.popoverFragment = document.createDocumentFragment();\n        }\n        render(this.renderPopover, this.popoverFragment, { host: this });\n        this.popoverEl = this.popoverFragment.children[0] as Popover;\n        this.optionsMenu = this.popoverEl.children[1] as Menu;\n    }\n\n    private async openMenu(): Promise<void> {\n        /* c8 ignore next 9 */\n        let reparentableChildren: Element[] = [];\n        const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n        await this.generatePopover();\n        if (deprecatedMenu) {\n            reparentableChildren = Array.from(deprecatedMenu.children);\n        } else {\n            reparentableChildren = Array.from(this.children).filter(\n                (element) => {\n                    return !element.hasAttribute('slot');\n                }\n            );\n        }\n\n        if (reparentableChildren.length === 0) {\n            this.menuStateResolver();\n            return;\n        }\n\n        this.restoreChildren = reparentChildren<\n            Element & { focused?: boolean }\n        >(reparentableChildren, this.optionsMenu, {\n            position: 'beforeend',\n            prepareCallback: (\n                el: Element & {\n                    focused?: boolean | undefined;\n                    value?: string;\n                    selected?: boolean;\n                }\n            ) => {\n                if (this.value === el.value) {\n                    this.setMenuItemSelected(el as MenuItem, true);\n                }\n                return (el) => {\n                    if (typeof el.focused !== 'undefined') {\n                        el.focused = false;\n                    }\n                };\n            },\n        });\n\n        this.sizePopover(this.popoverEl);\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = true;\n        }\n        this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n            placement: this.isMobile.matches ? 'none' : this.placement,\n            receivesFocus: 'auto',\n        });\n        if (window.__swc.DEBUG) {\n            window.__swc.ignoreWarningLevels.deprecation = false;\n        }\n    }\n\n    protected sizePopover(popover: HTMLElement): void {\n        if (this.isMobile.matches) {\n            popover.style.setProperty('--swc-menu-width', `100%`);\n            return;\n        }\n    }\n\n    private async closeMenu(): Promise<void> {\n        if (this.closeOverlay) {\n            const closeOverlay = this.closeOverlay;\n            delete this.closeOverlay;\n            (await closeOverlay)();\n        }\n    }\n\n    protected get selectedItemContent(): MenuItemChildren {\n        if (this.selectedItem) {\n            return this.selectedItem.itemChildren;\n        }\n        return { icon: [], content: [] };\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\">${this.label}</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        };\n        return [\n            html`\n                <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n                    ${this.selectedItemContent.icon}\n                </span>\n                <span id=\"label\" class=${classMap(labelClasses)}>\n                    ${this.renderLabelContent(this.selectedItemContent.content)}\n                </span>\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            `,\n        ];\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        return html`\n            <span\n                id=\"focus-helper\"\n                tabindex=\"${this.focused ? '-1' : '0'}\"\n                @focus=${this.onHelperFocus}\n            ></span>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-labelledby=\"button icon label\"\n                id=\"button\"\n                class=\"button\"\n                @blur=${this.onButtonBlur}\n                @click=${this.onButtonClick}\n                @focus=${this.onButtonFocus}\n                ?disabled=${this.disabled}\n                tabindex=\"-1\"\n            >\n                ${this.buttonContent}\n            </button>\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 (\n            changes.has('open') &&\n            (this.open || typeof changes.get('open') !== 'undefined')\n        ) {\n            this.menuStatePromise = new Promise(\n                (res) => (this.menuStateResolver = res)\n            );\n            if (this.open) {\n                this.openMenu();\n            } else {\n                this.closeMenu();\n            }\n        }\n        if (changes.has('value') && !changes.has('selectedItem')) {\n            this.updateMenuItems();\n        }\n        if (window.__swc.DEBUG) {\n            if (!this.hasUpdated && this.querySelector('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 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 get renderPopover(): TemplateResult {\n        const content = html`\n            ${this.dismissHelper}\n            <sp-menu\n                id=\"menu\"\n                role=\"${this.listRole}\"\n                @change=${this.handleChange}\n                .selects=${this.selects}\n            ></sp-menu>\n            ${this.dismissHelper}\n        `;\n        if (this.isMobile.matches) {\n            return html`\n                <sp-tray\n                    id=\"popover\"\n                    role=\"dialog\"\n                    @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                    .overlayOpenCallback=${this.overlayOpenCallback}\n                    .overlayCloseCallback=${this.overlayCloseCallback}\n                >\n                    ${content}\n                </sp-tray>\n            `;\n        }\n        return html`\n            <sp-popover\n                id=\"popover\"\n                role=\"dialog\"\n                @sp-menu-item-added-or-updated=${this.updateMenuItems}\n                .overlayOpenCallback=${this.overlayOpenCallback}\n                .overlayCloseCallback=${this.overlayCloseCallback}\n            >\n                ${content}\n            </sp-popover>\n        `;\n    }\n\n    private _willUpdateItems = false;\n    protected itemsUpdated: Promise<void> = Promise.resolve();\n\n    /**\n     * Acquire the available MenuItems in the Picker by\n     * direct element query or by assuming the list managed\n     * by the Menu within the open options overlay.\n     */\n    protected updateMenuItems(\n        event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n    ): void {\n        if (this.open && event?.type === 'sp-menu-item-removed') return;\n        if (this._willUpdateItems) return;\n        this._willUpdateItems = true;\n        if (event?.item === this.selectedItem) {\n            this.requestUpdate();\n        }\n\n        let resolve = (): void => {\n            return;\n        };\n        this.itemsUpdated = new Promise((res) => (resolve = res));\n        // Debounce the update so we only update once\n        // if multiple items have changed\n        window.requestAnimationFrame(async () => {\n            if (this.open) {\n                await this.optionsMenu.updateComplete;\n                this.menuItems = this.optionsMenu.childItems;\n            } else {\n                this.menuItems = [\n                    ...this.querySelectorAll(\n                        'sp-menu-item:not([slot=\"submenu\"] *)'\n                    ),\n                ] as MenuItem[];\n            }\n            this.manageSelection();\n            resolve();\n            this._willUpdateItems = false;\n        });\n    }\n\n    protected async manageSelection(): Promise<void> {\n        if (this.selects == null) return;\n\n        await this.menuStatePromise;\n        this.selectionPromise = new Promise(\n            (res) => (this.selectionResolver = res)\n        );\n        let selectedItem: MenuItem | undefined;\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    }\n\n    private menuStatePromise = Promise.resolve();\n    private menuStateResolver!: () => void;\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.menuStatePromise;\n        await this.itemsUpdated;\n        await this.selectionPromise;\n        return complete;\n    }\n\n    public override connectedCallback(): void {\n        this.updateMenuItems();\n        this.addEventListener(\n            'sp-menu-item-added-or-updated',\n            this.updateMenuItems\n        );\n        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n        super.connectedCallback();\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 - 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 sizePopover(popover: HTMLElement): void {\n        super.sizePopover(popover);\n\n        if (this.quiet) return;\n        // only use `this.offsetWidth` when Standard variant\n        popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n    }\n\n    protected override onKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        this.focused = true;\n        if (!code.startsWith('Arrow') || this.readonly) {\n            return;\n        }\n        event.preventDefault();\n        if (code === 'ArrowUp' || code === 'ArrowDown') {\n            this.toggle(true);\n            return;\n        }\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 = !this.value || 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": "qNAYA,OAGI,QAAAA,EACA,WAAAC,EAEA,UAAAC,EACA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAOC,MAAmB,iEAE1B,OAAS,aAAAC,MAAiB,mDAC1B,OAAS,oBAAAC,MAAwB,2DACjC,MAAO,gEACP,MAAO,iEACP,MAAO,2CAQP,MAAO,2CACP,MAAO,iDAEP,OACI,eAAAC,MAIG,mCACP,OACI,aAAAC,EACA,wBAAAC,MACG,kEAEP,MAAMC,EAAe,CACjB,EAAG,gCACH,EAAG,iCACH,EAAG,iCACH,GAAI,gCACR,EAEO,aAAM,mBAAmBX,EAAWM,CAAS,CAAE,CA0E3C,aAAc,CACjB,MAAM,EA9DV,KAAU,SAAW,IAAII,EAAqB,KAAMD,CAAS,EAU7D,KAAgB,SAAW,GAG3B,KAAO,QAAU,GAMjB,KAAO,QAAU,GAMjB,KAAO,KAAO,GAGd,KAAO,SAAW,GAElB,KAAO,QAAgC,SAEvC,KAAO,UAAwB,CAAC,EAWhC,KAAO,UAAuB,eAG9B,KAAO,MAAQ,GAGf,KAAO,MAAQ,GASf,KAAU,SAA+B,UACzC,KAAU,SAAW,SAgErB,KAAU,UAAaG,GAA+B,CAClD,KAAK,QAAU,GACX,EAAAA,EAAM,OAAS,aAAeA,EAAM,OAAS,aAGjDA,EAAM,eAAe,EACrB,KAAK,OAAO,EAAI,EACpB,EA0DA,KAAO,oBAAsB,SAA2B,CACpD,KAAK,gBAAgB,EACrB,MAAM,KAAK,aACX,MAAM,KAAK,YAAY,eACvB,sBAAsB,IAAM,KAAK,kBAAkB,CAAC,CACxD,EAEA,KAAO,qBAAuB,SAA2B,CACjD,KAAK,kBACL,KAAK,gBAAgB,EACrB,KAAK,gBAAkB,QAE3B,KAAK,MAAM,EACX,sBAAsB,IAAM,KAAK,kBAAkB,CAAC,CACxD,EAmPA,KAAQ,iBAAmB,GAC3B,KAAU,aAA8B,QAAQ,QAAQ,EAqExD,KAAQ,iBAAmB,QAAQ,QAAQ,EAE3C,KAAQ,iBAAmB,QAAQ,QAAQ,EAtcvC,KAAK,UAAY,KAAK,UAAU,KAAK,IAAI,CAC7C,CA3DA,IAAW,QAAmC,CAC1C,OAAO,KAAK,MAChB,CA2DA,IAAoB,cAA4B,CAC5C,OAAI,KAAK,KACE,KAAK,YAET,KAAK,MAChB,CAEO,mBAA0B,CAC7B,KAAK,QAAU,EACnB,CAEO,cAAqB,CACxB,KAAK,QAAU,GACd,KAAK,OAA6B,oBAC/B,UACA,KAAK,SACT,CACJ,CAEU,eAAsB,CAC5B,KAAK,OAAO,CAChB,CAEgB,MAAMC,EAA8B,CAChD,MAAM,MAAMA,CAAO,EAEf,CAAC,KAAK,UAAY,KAAK,eACvB,KAAK,QAAU,KAAK,sBAAsB,EAElD,CAEO,eAAsB,CAEzB,KAAK,QAAU,GACf,KAAK,OAAO,MAAM,CACtB,CAEO,eAAsB,CACxB,KAAK,OAA6B,iBAC/B,UACA,KAAK,SACT,CACJ,CAEO,aAAaD,EAAoB,CACpC,MAAME,EAASF,EAAM,OACf,CAACG,CAAQ,EAAID,EAAO,cACtBF,EAAM,YACNA,EAAM,gBAAgB,EACtB,KAAK,iBAAiBG,EAAUH,CAAK,GAIrC,KAAK,KAAO,EAEpB,CAWA,MAAa,iBACTI,EACAC,EACa,CACb,MAAMC,EAAkB,KAAK,aACvBC,EAAW,KAAK,MAYtB,GAXA,KAAK,aAAeH,EACpB,KAAK,MAAQA,EAAK,MAClB,KAAK,KAAO,GACZ,MAAM,KAAK,eAQP,CAPiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,CACL,EACmB,CACXC,GACAA,EAAgB,eAAe,EAEnC,KAAK,oBAAoB,KAAK,aAAc,EAAK,EAC7CC,GACA,KAAK,oBAAoBA,EAAiB,EAAI,EAElD,KAAK,aAAeA,EACpB,KAAK,MAAQC,EACb,KAAK,KAAO,GACZ,OAEAD,GACA,KAAK,oBAAoBA,EAAiB,EAAK,EAEnD,KAAK,oBAAoBF,EAAM,CAAC,CAAC,KAAK,OAAO,CACjD,CAEU,oBAAoBA,EAAgBI,EAAsB,CAE5D,KAAK,SAAW,OACpBJ,EAAK,SAAWI,EACpB,CAEO,OAAON,EAAwB,CAC9B,KAAK,WAGT,KAAK,KAAO,OAAOA,GAAW,YAAcA,EAAS,CAAC,KAAK,KAC/D,CAEO,OAAc,CACb,KAAK,WAGT,KAAK,KAAO,GAChB,CAoBA,MAAc,iBAAiC,CACtC,KAAK,kBACN,KAAK,gBAAkB,SAAS,uBAAuB,GAE3Df,EAAO,KAAK,cAAe,KAAK,gBAAiB,CAAE,KAAM,IAAK,CAAC,EAC/D,KAAK,UAAY,KAAK,gBAAgB,SAAS,CAAC,EAChD,KAAK,YAAc,KAAK,UAAU,SAAS,CAAC,CAChD,CAEA,MAAc,UAA0B,CAEpC,IAAIsB,EAAkC,CAAC,EACvC,MAAMC,EAAiB,KAAK,cAAc,kBAAkB,EAa5D,GAXA,MAAM,KAAK,gBAAgB,EACvBA,EACAD,EAAuB,MAAM,KAAKC,EAAe,QAAQ,EAEzDD,EAAuB,MAAM,KAAK,KAAK,QAAQ,EAAE,OAC5CE,GACU,CAACA,EAAQ,aAAa,MAAM,CAE3C,EAGAF,EAAqB,SAAW,EAAG,CACnC,KAAK,kBAAkB,EACvB,OAGJ,KAAK,gBAAkBd,EAErBc,EAAsB,KAAK,YAAa,CACtC,SAAU,YACV,gBACIG,IAMI,KAAK,QAAUA,EAAG,OAClB,KAAK,oBAAoBA,EAAgB,EAAI,EAEzCA,GAAO,CACP,OAAOA,EAAG,SAAY,cACtBA,EAAG,QAAU,GAErB,EAER,CAAC,EAED,KAAK,YAAY,KAAK,SAAS,EAI/B,KAAK,aAAe,OAAO,YAAY,KAAM,QAAS,KAAK,UAAW,CAClE,UAAW,KAAK,SAAS,QAAU,OAAS,KAAK,UACjD,cAAe,MACnB,CAAC,CAIL,CAEU,YAAYC,EAA4B,CAC9C,GAAI,KAAK,SAAS,QAAS,CACvBA,EAAQ,MAAM,YAAY,mBAAoB,MAAM,EACpD,OAER,CAEA,MAAc,WAA2B,CACrC,GAAI,KAAK,aAAc,CACnB,MAAMC,EAAe,KAAK,aAC1B,OAAO,KAAK,cACX,MAAMA,GAAc,EAE7B,CAEA,IAAc,qBAAwC,CAClD,OAAI,KAAK,aACE,KAAK,aAAa,aAEtB,CAAE,KAAM,CAAC,EAAG,QAAS,CAAC,CAAE,CACnC,CAEU,mBAAmBC,EAA0C,CACnE,OAAI,KAAK,OAAS,KAAK,aACZA,EAEJ9B;AAAA,iCACkB,KAAK;AAAA,SAElC,CAEA,IAAc,eAAkC,CAC5C,MAAM+B,EAAe,CACjB,kBAAmB,KAAK,QAAU,QAAU,CAAC,CAAC,KAAK,MACnD,YAAa,CAAC,KAAK,KACvB,EACA,MAAO,CACH/B;AAAA,0CAC8B,KAAK,QAAU;AAAA,sBACnC,KAAK,oBAAoB;AAAA;AAAA,yCAENI,EAAS2B,CAAY;AAAA,sBACxC,KAAK,mBAAmB,KAAK,oBAAoB,OAAO;AAAA;AAAA,kBAE5D,KAAK,QACD/B;AAAA;AAAA;AAAA;AAAA,wBAKAC;AAAA;AAAA,oCAEca,EACZ,KAAK,IACT;AAAA;AAAA,aAGZ,CACJ,CAImB,QAAyB,CACxC,OAAOd;AAAA;AAAA;AAAA,4BAGa,KAAK,QAAU,KAAO;AAAA,yBACzB,KAAK;AAAA;AAAA;AAAA;AAAA,gCAIE,KAAK,KAAO,OAAS;AAAA;AAAA;AAAA;AAAA,wBAI7B,KAAK;AAAA,yBACJ,KAAK;AAAA,yBACL,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA;AAAA,kBAGf,KAAK;AAAA;AAAA,SAGnB,CAEmB,OAAOgC,EAAqC,CACvD,KAAK,UAGL,KAAK,QAAU,UAEfA,EAAQ,IAAI,UAAU,GAAK,KAAK,WAChC,KAAK,KAAO,IAGZA,EAAQ,IAAI,MAAM,IACjB,KAAK,MAAQ,OAAOA,EAAQ,IAAI,MAAM,GAAM,eAE7C,KAAK,iBAAmB,IAAI,QACvBC,GAAS,KAAK,kBAAoBA,CACvC,EACI,KAAK,KACL,KAAK,SAAS,EAEd,KAAK,UAAU,GAGnBD,EAAQ,IAAI,OAAO,GAAK,CAACA,EAAQ,IAAI,cAAc,GACnD,KAAK,gBAAgB,EAazB,MAAM,OAAOA,CAAO,CACxB,CAEA,IAAc,eAAgC,CAC1C,OAAOhC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKc,KAAK;AAAA;AAAA;AAAA,SAI9B,CAEA,IAAc,eAAgC,CAC1C,MAAM8B,EAAU9B;AAAA,cACV,KAAK;AAAA;AAAA;AAAA,wBAGK,KAAK;AAAA,0BACH,KAAK;AAAA,2BACJ,KAAK;AAAA;AAAA,cAElB,KAAK;AAAA,UAEX,OAAI,KAAK,SAAS,QACPA;AAAA;AAAA;AAAA;AAAA,qDAIkC,KAAK;AAAA,2CACf,KAAK;AAAA,4CACJ,KAAK;AAAA;AAAA,sBAE3B8B;AAAA;AAAA,cAIP9B;AAAA;AAAA;AAAA;AAAA,iDAIkC,KAAK;AAAA,uCACf,KAAK;AAAA,wCACJ,KAAK;AAAA;AAAA,kBAE3B8B;AAAA;AAAA,SAGd,CAUU,gBACNf,EACI,CAEJ,GADI,KAAK,OAAQA,GAAA,YAAAA,EAAO,QAAS,wBAC7B,KAAK,iBAAkB,OAC3B,KAAK,iBAAmB,IACpBA,GAAA,YAAAA,EAAO,QAAS,KAAK,cACrB,KAAK,cAAc,EAGvB,IAAImB,EAAU,IAAY,CAE1B,EACA,KAAK,aAAe,IAAI,QAASD,GAASC,EAAUD,CAAI,EAGxD,OAAO,sBAAsB,SAAY,CACjC,KAAK,MACL,MAAM,KAAK,YAAY,eACvB,KAAK,UAAY,KAAK,YAAY,YAElC,KAAK,UAAY,CACb,GAAG,KAAK,iBACJ,sCACJ,CACJ,EAEJ,KAAK,gBAAgB,EACrBC,EAAQ,EACR,KAAK,iBAAmB,EAC5B,CAAC,CACL,CAEA,MAAgB,iBAAiC,CAC7C,GAAI,KAAK,SAAW,KAAM,OAE1B,MAAM,KAAK,iBACX,KAAK,iBAAmB,IAAI,QACvBD,GAAS,KAAK,kBAAoBA,CACvC,EACA,IAAIE,EACJ,KAAK,UAAU,QAAShB,GAAS,CACzB,KAAK,QAAUA,EAAK,OAAS,CAACA,EAAK,SACnCgB,EAAehB,EAEfA,EAAK,SAAW,EAExB,CAAC,EACGgB,GACAA,EAAa,SAAW,CAAC,CAAC,KAAK,QAC/B,KAAK,aAAeA,IAEpB,KAAK,MAAQ,GACb,KAAK,aAAe,QAEpB,KAAK,OACL,MAAM,KAAK,YAAY,eACvB,KAAK,YAAY,wBAAwB,GAE7C,KAAK,kBAAkB,CAC3B,CAOA,MAAyB,mBAAsC,CAC3D,MAAMC,EAAY,MAAM,MAAM,kBAAkB,EAChD,aAAM,KAAK,iBACX,MAAM,KAAK,aACX,MAAM,KAAK,iBACJA,CACX,CAEgB,mBAA0B,CACtC,KAAK,gBAAgB,EACrB,KAAK,iBACD,gCACA,KAAK,eACT,EACA,KAAK,iBAAiB,uBAAwB,KAAK,eAAe,EAClE,MAAM,kBAAkB,CAC5B,CAEgB,sBAA6B,CACzC,KAAK,MAAM,EAEX,MAAM,qBAAqB,CAC/B,CACJ,CA5iBa,WAIK,YAAc,MACxBnB,EACAoB,EACAP,EACAd,IAEO,MAAML,EAAYM,EAAQoB,EAAaP,EAASd,CAAO,EAM3DsB,EAAA,CADNhC,EAAM,SAAS,GAfP,WAgBF,sBAOSgC,EAAA,CADfjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtBjC,WAuBO,wBAGTiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAzBjC,WA0BF,uBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA5BhC,WA6BF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA/BjC,WAgCF,uBAGAiC,EAAA,CADNjC,EAAS,GAlCD,WAmCF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GArCjC,WAsCF,oBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxCjC,WAyCF,wBAeAiC,EAAA,CADNjC,EAAS,GAvDD,WAwDF,yBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1DjC,WA2DF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,MAAO,CAAC,GA7DjB,WA8DF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,UAAW,EAAM,CAAC,GAhErB,WAiEF,4BAsfJ,aAAM,eAAe,UAAW,CAAhC,kCAaH,KAAmB,UAAaU,GAA+B,CAC3D,KAAM,CAAE,KAAAwB,CAAK,EAAIxB,EAEjB,GADA,KAAK,QAAU,GACX,CAACwB,EAAK,WAAW,OAAO,GAAK,KAAK,SAClC,OAGJ,GADAxB,EAAM,eAAe,EACjBwB,IAAS,WAAaA,IAAS,YAAa,CAC5C,KAAK,OAAO,EAAI,EAChB,OAEJ,MAAMC,EAAgB,KAAK,aACrB,KAAK,UAAU,QAAQ,KAAK,YAAY,EACxC,GAEAC,EAAa,CAAC,KAAK,OAASF,IAAS,aAAe,EAAI,GAC9D,IAAIG,EAAYF,EAAgBC,EAChC,KACI,KAAK,UAAUC,CAAS,GACxB,KAAK,UAAUA,CAAS,EAAE,UAE1BA,GAAaD,EAEb,CAAC,KAAK,UAAUC,CAAS,GAAK,KAAK,UAAUA,CAAS,EAAE,WAGxD,CAAC,KAAK,OAASA,IAAcF,IAC7B,KAAK,iBAAiB,KAAK,UAAUE,CAAS,CAAC,CAEvD,EAzCA,WAA2B,QAAyB,CAChD,MAAO,CAACnC,EAAcC,CAAa,CACvC,CAEmB,YAAYoB,EAA4B,CACvD,MAAM,YAAYA,CAAO,EAErB,MAAK,OAETA,EAAQ,MAAM,YAAY,YAAa,GAAG,KAAK,eAAe,CAClE,CAgCJ",
   "names": ["html", "nothing", "render", "SizedMixin", "classMap", "property", "query", "pickerStyles", "chevronStyles", "Focusable", "reparentChildren", "openOverlay", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "options", "target", "selected", "item", "menuChangeEvent", "oldSelectedItem", "oldValue", "value", "reparentableChildren", "deprecatedMenu", "element", "el", "popover", "closeOverlay", "content", "labelClasses", "changes", "res", "resolve", "selectedItem", "complete", "interaction", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex"]
 }

package/test/index.js CHANGED Viewed

@@ -77,6 +77,9 @@ export function runPickerTests() {
       await expect(el).to.be.accessible();
     });
     it("closes accessibly", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
@@ -84,10 +87,17 @@ export function runPickerTests() {
       const accessibleCloseButton = document.querySelector(
         ".visually-hidden button"
       );
+      expect(accessibleCloseButton).to.have.attribute(
+        "aria-label",
+        "Dismiss"
+      );
       const closed = oneEvent(el, "sp-closed");
       accessibleCloseButton.click();
       await closed;
+      await elementUpdated(el);
       expect(el.open).to.be.false;
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
+      expect(document.activeElement).to.eq(el);
     });
     it("accepts new selected item content", async () => {
       const option2 = el.querySelector('[value="option-2"');