npm - @spectrum-web-components/picker - Versions diffs - 0.8.1 → 0.9.2 - Mend

@spectrum-web-components/picker 0.8.1 → 0.9.2

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 (11) hide show

package/custom-elements.json +84 -46
package/package.json +12 -12
package/src/Picker.d.ts +9 -13
package/src/Picker.js +35 -34
package/src/Picker.js.map +1 -1
package/src/picker.css.js +19 -19
package/src/picker.css.js.map +1 -1
package/src/spectrum-picker.css.js +19 -19
package/src/spectrum-picker.css.js.map +1 -1
package/stories/picker.stories.js +7 -7
package/stories/picker.stories.js.map +1 -1

package/src/Picker.js CHANGED Viewed

@@ -9,8 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+var _a;
 import { __decorate } from "tslib";
-import { html, property, query, nothing, SizedMixin, classMap, } from '@spectrum-web-components/base';
+import { html, nothing, render, SizedMixin, } from '@spectrum-web-components/base';
+import { classMap } from '@spectrum-web-components/base/src/directives.js';
+import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
 import pickerStyles from './picker.css.js';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -157,10 +160,22 @@ export class PickerBase extends SizedMixin(Focusable) {
         }
         this.menuStateResolver();
     }
+    generatePopover(deprecatedMenu) {
+        if (this.popoverFragment)
+            return;
+        this.popoverFragment = document.createDocumentFragment();
+        render(this.renderPopover, this.popoverFragment, { host: this });
+        this.popover = this.popoverFragment.children[0];
+        this.optionsMenu = this.popover.children[1];
+        if (deprecatedMenu) {
+            console.warn(`Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`);
+        }
+    }
     async openMenu() {
         /* c8 ignore next 9 */
         let reparentableChildren = [];
         const deprecatedMenu = this.querySelector('sp-menu');
+        this.generatePopover(deprecatedMenu);
         if (deprecatedMenu) {
             reparentableChildren = Array.from(deprecatedMenu.children);
         }
@@ -181,7 +196,6 @@ export class PickerBase extends SizedMixin(Focusable) {
             };
         });
         this.sizePopover(this.popover);
-        const { popover } = this;
         this.addEventListener('sp-opened', async () => {
             this.updateMenuItems();
             await Promise.all([
@@ -190,17 +204,16 @@ export class PickerBase extends SizedMixin(Focusable) {
             ]);
             this.menuStateResolver();
         }, { once: true });
-        this.closeOverlay = await Picker.openOverlay(this, 'modal', popover, {
+        this.closeOverlay = await Picker.openOverlay(this, 'modal', this.popover, {
             placement: this.placement,
             receivesFocus: 'auto',
         });
     }
     sizePopover(popover) {
+        if (this.quiet)
+            return;
         // only use `this.offsetWidth` when Standard variant
-        const menuWidth = !this.quiet && `${this.offsetWidth}px`;
-        if (menuWidth) {
-            popover.style.setProperty('min-width', menuWidth);
-        }
+        popover.style.setProperty('min-width', `${this.offsetWidth}px`);
     }
     closeMenu() {
         if (this.closeOverlay) {
@@ -209,10 +222,10 @@ export class PickerBase extends SizedMixin(Focusable) {
         }
     }
     get selectedItemContent() {
-        if (!this._selectedItemContent && this.selectedItem) {
-            this._selectedItemContent = this.selectedItem.itemChildren;
+        if (this.selectedItem) {
+            return this.selectedItem.itemChildren;
         }
-        return this._selectedItemContent || { icon: [], content: [] };
+        return { icon: [], content: [] };
     }
     renderLabelContent(content) {
         if (this.value && this.selectedItem) {
@@ -250,7 +263,7 @@ export class PickerBase extends SizedMixin(Focusable) {
     }
     // a helper to throw focus to the button is needed because Safari
     // won't include buttons in the tab order even with tabindex="0"
-    get renderButton() {
+    render() {
         return html `
             <span
                 id="focus-helper"
@@ -274,9 +287,6 @@ export class PickerBase extends SizedMixin(Focusable) {
         `;
     }
     update(changes) {
-        if (changes.has('selectedItem')) {
-            this._selectedItemContent = undefined;
-        }
         if (this.selects) {
             // Always force `selects` to "single" when set.
             // TODO: Add support functionally and visually for "multiple"
@@ -284,11 +294,6 @@ export class PickerBase extends SizedMixin(Focusable) {
         }
         super.update(changes);
     }
-    render() {
-        return html `
-            ${this.renderButton} ${this.renderPopover}
-        `;
-    }
     get dismissHelper() {
         return html `
             <div class="visually-hidden">
@@ -305,6 +310,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             <sp-popover
                 id="popover"
                 role="dialog"
+                @sp-menu-item-added-or-updated=${this.updateMenuItems}
                 @sp-overlay-closed=${this.onOverlayClosed}
                 .overlayCloseCallback=${this.overlayCloseCallback}
             >
@@ -324,10 +330,15 @@ export class PickerBase extends SizedMixin(Focusable) {
      * direct element query or by assuming the list managed
      * by the Menu within the open options overlay.
      */
-    updateMenuItems() {
+    updateMenuItems(event) {
+        if (this.open && (event === null || event === void 0 ? void 0 : event.type) === 'sp-menu-item-removed')
+            return;
         if (this._willUpdateItems)
             return;
         this._willUpdateItems = true;
+        if ((event === null || event === void 0 ? void 0 : event.item) === this.selectedItem) {
+            this.requestUpdate();
+        }
         let resolve = () => {
             return;
         };
@@ -349,15 +360,6 @@ export class PickerBase extends SizedMixin(Focusable) {
             this._willUpdateItems = false;
         });
     }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        // Since the sp-menu gets reparented by the popover, initialize it here
-        this.optionsMenu = this.shadowRoot.querySelector('sp-menu');
-        const deprecatedMenu = this.querySelector('sp-menu');
-        if (deprecatedMenu) {
-            console.warn(`Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`);
-        }
-    }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('value') &&
@@ -402,8 +404,8 @@ export class PickerBase extends SizedMixin(Focusable) {
             });
         }
     }
-    async _getUpdateComplete() {
-        const complete = (await super._getUpdateComplete());
+    async getUpdateComplete() {
+        const complete = (await super.getUpdateComplete());
         await this.menuStatePromise;
         await this.itemsUpdated;
         return complete;
@@ -411,6 +413,7 @@ export class PickerBase extends SizedMixin(Focusable) {
     connectedCallback() {
         this.updateMenuItems();
         this.addEventListener('sp-menu-item-added-or-updated', this.updateMenuItems);
+        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);
         super.connectedCallback();
     }
     disconnectedCallback() {
@@ -418,6 +421,7 @@ export class PickerBase extends SizedMixin(Focusable) {
         super.disconnectedCallback();
     }
 }
+_a = PickerBase;
 /**
  * @private
  */
@@ -460,9 +464,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], PickerBase.prototype, "selectedItem", void 0);
-__decorate([
-    query('sp-popover')
-], PickerBase.prototype, "popover", void 0);
 export class Picker extends PickerBase {
     constructor() {
         super(...arguments);

package/src/Picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","sourceRoot":"","sources":["Picker.ts"],"names":[],"mappings":"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","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 html,\n CSSResultArray,\n TemplateResult,\n property,\n PropertyValues,\n query,\n nothing,\n SizedMixin,\n ElementSize,\n classMap,\n} from '@spectrum-web-components/base';\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 { MenuItem, Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport {\n Placement,\n openOverlay,\n TriggerInteractions,\n OverlayOptions,\n} from '@spectrum-web-components/overlay';\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\ntype PickerSize = Exclude<ElementSize, 'xxl'>;\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 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 @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 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?: () => void;\n\n @query('sp-popover')\n private popover!: 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 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 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 event.stopPropagation();\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n this.setValueFromItem(selected, event);\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 cancelable: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.selectedItem.selected = false;\n if (oldSelectedItem) {\n oldSelectedItem.selected = true;\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n oldSelectedItem.selected = false;\n }\n item.selected = !!this.selects;\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 overlayCloseCallback = (): void => {\n this.open = false;\n };\n\n protected onOverlayClosed(): void {\n this.close();\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n\n this.menuStateResolver();\n }\n\n private async openMenu(): Promise<void> {\n / c8 ignore next 9 /\n let reparentableChildren: Element[] = [];\n\n const deprecatedMenu = this.querySelector('sp-menu');\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 return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n });\n\n this.sizePopover(this.popover);\n const { popover } = this;\n this.addEventListener(\n 'sp-opened',\n async () => {\n this.updateMenuItems();\n await Promise.all([\n this.itemsUpdated,\n this.optionsMenu.updateComplete,\n ]);\n this.menuStateResolver();\n },\n { once: true }\n );\n this.closeOverlay = await Picker.openOverlay(this, 'modal', popover, {\n placement: this.placement,\n receivesFocus: 'auto',\n });\n }\n\n protected sizePopover(popover: HTMLElement): void {\n // only use `this.offsetWidth` when Standard variant\n const menuWidth = !this.quiet && `${this.offsetWidth}px`;\n if (menuWidth) {\n popover.style.setProperty('min-width', menuWidth);\n }\n }\n\n private closeMenu(): void {\n if (this.closeOverlay) {\n this.closeOverlay();\n delete this.closeOverlay;\n }\n }\n\n protected get selectedItemContent(): {\n icon: Element[];\n content: Node[];\n } {\n if (!this._selectedItemContent && this.selectedItem) {\n this._selectedItemContent = this.selectedItem.itemChildren;\n }\n return this._selectedItemContent \|\| { icon: [], content: [] };\n }\n\n private _selectedItemContent?: {\n icon: Element[];\n content: Node[];\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[this.size as PickerSize]}\"\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 get renderButton(): 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 update(changes: PropertyValues<this>): void {\n if (changes.has('selectedItem')) {\n this._selectedItemContent = undefined;\n }\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 super.update(changes);\n }\n\n protected render(): TemplateResult {\n return html`\n ${this.renderButton} ${this.renderPopover}\n `;\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 return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-overlay-closed=${this.onOverlayClosed}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\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 </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(): void {\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\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('sp-menu-item'),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n // Since the sp-menu gets reparented by the popover, initialize it here\n this.optionsMenu = this.shadowRoot.querySelector('sp-menu') as Menu;\n\n const deprecatedMenu = this.querySelector('sp-menu');\n if (deprecatedMenu) {\n console.warn(\n `Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`\n );\n }\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('value') &&\n !changedProperties.has('selectedItem')\n ) {\n this.updateMenuItems();\n }\n if (changedProperties.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (\n changedProperties.has('open') &&\n (this.open \|\| typeof changedProperties.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 }\n\n protected manageSelection(): void {\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 this.optionsMenu.updateComplete.then(() => {\n this.optionsMenu.updateSelectedItemIndex();\n });\n }\n }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\n\n protected async _getUpdateComplete(): Promise<boolean> {\n const complete = (await super._getUpdateComplete()) as boolean;\n await this.menuStatePromise;\n await this.itemsUpdated;\n return complete;\n }\n\n public connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n super.connectedCallback();\n }\n\n public disconnectedCallback(): void {\n this.open = false;\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected 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"]}
1	+ {"version":3,"file":"Picker.js","sourceRoot":"","sources":["Picker.ts"],"names":[],"mappings":"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","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/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\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\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 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 @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 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?: () => void;\n\n private popover!: 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 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 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 event.stopPropagation();\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n this.setValueFromItem(selected, event);\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 cancelable: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.selectedItem.selected = false;\n if (oldSelectedItem) {\n oldSelectedItem.selected = true;\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n oldSelectedItem.selected = false;\n }\n item.selected = !!this.selects;\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 overlayCloseCallback = (): void => {\n this.open = false;\n };\n\n protected onOverlayClosed(): void {\n this.close();\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n\n this.menuStateResolver();\n }\n\n private popoverFragment!: DocumentFragment;\n\n private generatePopover(deprecatedMenu: Menu \| null): void {\n if (this.popoverFragment) return;\n\n this.popoverFragment = document.createDocumentFragment();\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popover = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popover.children[1] as Menu;\n\n if (deprecatedMenu) {\n console.warn(\n `Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`\n );\n }\n }\n\n private async openMenu(): Promise<void> {\n / c8 ignore next 9 /\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector('sp-menu');\n\n this.generatePopover(deprecatedMenu);\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 return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n });\n\n this.sizePopover(this.popover);\n this.addEventListener(\n 'sp-opened',\n async () => {\n this.updateMenuItems();\n await Promise.all([\n this.itemsUpdated,\n this.optionsMenu.updateComplete,\n ]);\n this.menuStateResolver();\n },\n { once: true }\n );\n this.closeOverlay = await Picker.openOverlay(\n this,\n 'modal',\n this.popover,\n {\n placement: this.placement,\n receivesFocus: 'auto',\n }\n );\n }\n\n protected sizePopover(popover: HTMLElement): void {\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 private closeMenu(): void {\n if (this.closeOverlay) {\n this.closeOverlay();\n delete this.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 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 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 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 return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n @sp-overlay-closed=${this.onOverlayClosed}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\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 </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('sp-menu-item'),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('value') &&\n !changedProperties.has('selectedItem')\n ) {\n this.updateMenuItems();\n }\n if (changedProperties.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (\n changedProperties.has('open') &&\n (this.open \|\| typeof changedProperties.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 }\n\n protected manageSelection(): void {\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 this.optionsMenu.updateComplete.then(() => {\n this.optionsMenu.updateSelectedItemIndex();\n });\n }\n }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\n\n protected async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.menuStatePromise;\n await this.itemsUpdated;\n return complete;\n }\n\n public 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 disconnectedCallback(): void {\n this.open = false;\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected 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"]}

package/src/picker.css.js CHANGED Viewed

@@ -35,10 +35,10 @@ const styles = css `
 --spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-s-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-s-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -63,10 +63,10 @@ const styles = css `
 --spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -91,10 +91,10 @@ const styles = css `
 --spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-l-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-l-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -119,10 +119,10 @@ const styles = css `
 --spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-xl-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-xl-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -147,8 +147,8 @@ const styles = css `
 --spectrum-global-dimension-size-3000
 );--spectrum-picker-texticon-width:var(
 --spectrum-global-dimension-size-2400
-);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-text-font-style);font-weight:var(
---spectrum-picker-texticon-placeholder-text-font-weight
+);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(
+--spectrum-picker-texticon-placeholder-font-weight
 );transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(
 --spectrum-picker-texticon-error-icon-margin-left
 )}:host([dir=rtl]) .validation-icon{margin-right:var(
@@ -188,7 +188,7 @@ var(--spectrum-alias-border-size-thin)
 )}#button:active,:host([open]) #button{background-color:var(
 --spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)
 );border-color:var(
---spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-border-color-mouse-focus)
+--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)
 )}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(
 --spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)
 )}#button.focus-visible,:host([focused]) #button{background-color:var(

package/src/picker.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picker.css.js","sourceRoot":"","sources":["picker.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4RjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left\n);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right);padding-right:var(\n--spectrum-picker-textonly-padding-left\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button #label+.icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-text-font-style:var(\n--spectrum-picker-s-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-text-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n)}:host([size=m]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-text-font-style:var(\n--spectrum-picker-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-text-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-text-font-style:var(\n--spectrum-picker-l-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-text-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-text-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-text-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-text-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-text-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1(var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n)))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1(var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n)))}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-border-color-mouse-focus)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"]}
1	+ {"version":3,"file":"picker.css.js","sourceRoot":"","sources":["picker.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4RjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left\n);padding-right:var(--spectrum-picker-textonly-padding-right)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right);padding-right:var(\n--spectrum-picker-textonly-padding-left\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button #label+.icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n)}:host([size=m]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc(-1(var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n)))}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc(-1(var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n)))}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-quiet-key-focus)\n);box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"]}

package/src/spectrum-picker.css.js CHANGED Viewed

@@ -35,10 +35,10 @@ const styles = css `
 --spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-s-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-s-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -63,10 +63,10 @@ const styles = css `
 --spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -91,10 +91,10 @@ const styles = css `
 --spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-l-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-l-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -119,10 +119,10 @@ const styles = css `
 --spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)
 );--spectrum-picker-texticon-icon-gap:var(
 --spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)
-);--spectrum-picker-texticon-placeholder-text-font-style:var(
---spectrum-picker-xl-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)
-);--spectrum-picker-texticon-placeholder-text-font-weight:var(
---spectrum-picker-xl-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)
+);--spectrum-picker-texticon-placeholder-font-style:var(
+--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)
+);--spectrum-picker-texticon-placeholder-font-weight:var(
+--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)
 );--spectrum-picker-texticon-error-icon-margin-left:var(
 --spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)
 );--spectrum-picker-texticon-ui-icon-gap:var(
@@ -147,8 +147,8 @@ const styles = css `
 --spectrum-global-dimension-size-3000
 );--spectrum-picker-texticon-width:var(
 --spectrum-global-dimension-size-2400
-);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-text-font-style);font-weight:var(
---spectrum-picker-texticon-placeholder-text-font-weight
+);--spectrum-picker-texticon-border-size-increase-focus:1px}:host([quiet]) #button{--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(
+--spectrum-picker-texticon-placeholder-font-weight
 );transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(
 --spectrum-picker-texticon-error-icon-margin-left
 )}:host([dir=rtl]) .validation-icon{margin-right:var(
@@ -188,7 +188,7 @@ var(--spectrum-alias-border-size-thin)
 )}#button:active,:host([open]) #button{background-color:var(
 --spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)
 );border-color:var(
---spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-border-color-mouse-focus)
+--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)
 )}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(
 --spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)
 )}#button.focus-visible,:host([focused]) #button{background-color:var(