@spectrum-web-components/dropdown - npm Package Compare versions

Comparing version 0.7.2-alpha.1 to 0.7.2-alpha.44

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.7.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/dropdown@0.7.1...@spectrum-web-components/dropdown@0.7.2) (2020-08-19)
+
+**Note:** Version bump only for package @spectrum-web-components/dropdown
+
 ## [0.7.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/dropdown@0.7.0...@spectrum-web-components/dropdown@0.7.1) (2020-08-13)
@@ -8,0 +12,0 @@

custom-elements.json

@@ -69,5 +69,9 @@ {
           "name": "button",
-          "type": "HTMLButtonElement | undefined"
+          "type": "HTMLButtonElement"
         },
         {
+          "name": "target",
+          "type": "HTMLButtonElement | this"
+        },
+        {
           "name": "invalid",
@@ -118,3 +122,5 @@ "attribute": "invalid",
         {
-          "name": "onKeydown"
+          "name": "onKeydown",
+          "type": "(event: KeyboardEvent) => void",
+          "default": "\"(event: KeyboardEvent): void => {\\n        if (event.code !== 'ArrowDown') {\\n            return;\\n        }\\n        event.preventDefault();\\n        /* istanbul ignore if */\\n        if (!this.optionsMenu) {\\n            return;\\n        }\\n        this.open = true;\\n    }\""
         },
@@ -145,2 +151,6 @@ {
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -147,0 +157,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.7.2-alpha.1+1f7f36f5",
+    "version": "0.7.2-alpha.44+1e82c26e",
     "description": "",
@@ -56,17 +56,16 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/dropdown": "^2.1.5"
+        "@spectrum-css/dropdown": "^3.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "^0.8.4-alpha.28+1f7f36f5",
-        "@spectrum-web-components/icon": "^0.5.2-alpha.34+1f7f36f5",
-        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.34+1f7f36f5",
-        "@spectrum-web-components/menu": "^0.3.2-alpha.3+1f7f36f5",
-        "@spectrum-web-components/overlay": "^0.5.2-alpha.1+1f7f36f5",
-        "@spectrum-web-components/popover": "^0.4.6-alpha.1+1f7f36f5",
-        "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.2-alpha.1038+1e82c26e",
+        "@spectrum-web-components/button": "^0.8.4-alpha.71+1e82c26e",
+        "@spectrum-web-components/icon": "^0.5.2-alpha.77+1e82c26e",
+        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.77+1e82c26e",
+        "@spectrum-web-components/menu": "^0.3.2-alpha.46+1e82c26e",
+        "@spectrum-web-components/overlay": "^0.5.2-alpha.44+1e82c26e",
+        "@spectrum-web-components/popover": "^0.4.6-alpha.44+1e82c26e",
+        "@spectrum-web-components/shared": "^0.6.1-alpha.71+1e82c26e",
         "tslib": "^2.0.0"
     },
-    "gitHead": "1f7f36f5bc1bd448f5a5eeb72a72414712e849ff"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

src/dropdown.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/dropdown.css.js

@@ -12,10 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}select+.dropdown{position:absolute;right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
-var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
+:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}:host([dir=ltr]) select+.dropdown{right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) select+.dropdown{left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}select+.dropdown{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
+var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
 var(--spectrum-alias-border-size-thin))*2);line-height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
-var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis;text-align:left}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label+.dropdown,#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
+var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}:host([dir=ltr]) #label+.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label+.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) #label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label~.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
@@ -32,7 +32,9 @@ var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-icon-chevron-down-medium-height,
 var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-dropdown-icon-size,
-var(--spectrum-alias-workflow-icon-size)))/2)}#button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}.spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-alias-workflow-icon-size)))/2)}:host([dir=ltr]) #button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #button #label+.icon:not(.dropdown){margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+.dropdown{margin-right:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}:host([dir=ltr]) .spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}sp-popover{display:none}#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}
+var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Dropdown-popover--quiet{margin-right:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}sp-popover{display:none}
 `;
 export default styles;
 //# sourceMappingURL=dropdown.css.js.map

src/dropdown.css.ts

@@ -12,10 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}select+.dropdown{position:absolute;right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
-var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
+:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}:host([dir=ltr]) select+.dropdown{right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) select+.dropdown{left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}select+.dropdown{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
+var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
 var(--spectrum-alias-border-size-thin))*2);line-height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
-var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis;text-align:left}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label+.dropdown,#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
+var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}:host([dir=ltr]) #label+.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label+.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) #label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label~.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
@@ -32,6 +32,8 @@ var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-icon-chevron-down-medium-height,
 var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-dropdown-icon-size,
-var(--spectrum-alias-workflow-icon-size)))/2)}#button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}.spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-alias-workflow-icon-size)))/2)}:host([dir=ltr]) #button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #button #label+.icon:not(.dropdown){margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+.dropdown{margin-right:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}:host([dir=ltr]) .spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}sp-popover{display:none}#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}
+var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Dropdown-popover--quiet{margin-right:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}sp-popover{display:none}
 `;
 export default styles;

src/Dropdown.d.ts

@@ -1,2 +0,2 @@
-import { PropertyValues, CSSResultArray, TemplateResult } from 'lit-element';
+import { PropertyValues, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -14,3 +14,4 @@ import '@spectrum-web-components/icon/sp-icon.js';
     static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
-    button?: HTMLButtonElement;
+    button: HTMLButtonElement;
+    get target(): HTMLButtonElement | this;
     disabled: boolean;
@@ -41,8 +42,9 @@ invalid: boolean;
     onClick(event: Event): void;
-    onKeydown(event: KeyboardEvent): void;
+    onKeydown: (event: KeyboardEvent) => void;
     setValueFromItem(item: MenuItem): void;
     toggle(): void;
     close(): void;
-    private onOverlayClosed;
+    protected onOverlayClosed(): void;
     private openMenu;
+    protected sizePopover(popover: HTMLElement): void;
     private closeMenu;
@@ -53,2 +55,3 @@ protected get buttonContent(): TemplateResult[];
     protected updated(changedProperties: PropertyValues): void;
+    private manageSelection;
     private menuStatePromise;
@@ -55,0 +58,0 @@ private menuStateResolver;

src/Dropdown.js

@@ -13,4 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, property, query, } from 'lit-element';
-import { nothing } from 'lit-html';
+import { html, property, query, nothing, } from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -48,2 +47,13 @@ import dropdownStyles from './dropdown.css.js';
         this.itemRole = 'option';
+        this.onKeydown = (event) => {
+            if (event.code !== 'ArrowDown') {
+                return;
+            }
+            event.preventDefault();
+            /* istanbul ignore if */
+            if (!this.optionsMenu) {
+                return;
+            }
+            this.open = true;
+        };
         this.menuStatePromise = Promise.resolve();
@@ -70,7 +80,6 @@ this.onKeydown = this.onKeydown.bind(this);
     }
+    get target() {
+        return this.button;
+    }
     get focusElement() {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return this;
-        }
         if (this.open && this.optionsMenu) {
@@ -85,7 +94,3 @@ return this.optionsMenu;
     onButtonBlur() {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return;
-        }
-        this.button.removeEventListener('keydown', this.onKeydown);
+        this.target.removeEventListener('keydown', this.onKeydown);
     }
@@ -96,7 +101,3 @@ onButtonClick() {
     onButtonFocus() {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return;
-        }
-        this.button.addEventListener('keydown', this.onKeydown);
+        this.target.addEventListener('keydown', this.onKeydown);
     }
@@ -114,13 +115,2 @@ onClick(event) {
     }
-    onKeydown(event) {
-        if (event.code !== 'ArrowDown') {
-            return;
-        }
-        event.preventDefault();
-        /* istanbul ignore if */
-        if (!this.optionsMenu) {
-            return;
-        }
-        this.open = true;
-    }
     setValueFromItem(item) {
@@ -159,2 +149,3 @@ const oldSelectedItemText = this.selectedItemText;
             const parentElement = this.placeholder.parentElement ||
+                /* istanbul ignore next */
                 this.placeholder.getRootNode();
@@ -171,3 +162,2 @@ /* istanbul ignore else */
         if (!this.popover ||
-            !this.button ||
             !this.optionsMenu ||
@@ -179,3 +169,4 @@ this.optionsMenu.children.length === 0) {
         this.placeholder = document.createComment('placeholder for optionsMenu');
-        const parentElement = this.optionsMenu.parentElement || this.optionsMenu.getRootNode();
+        const parentElement = this.optionsMenu.parentElement ||
+            /* istanbul ignore next */ this.optionsMenu.getRootNode();
         /* istanbul ignore else */
@@ -186,7 +177,3 @@ if (parentElement) {
         this.popover.append(this.optionsMenu);
-        // only use `this.offsetWidth` when Standard variant
-        const menuWidth = !this.quiet && `${this.offsetWidth}px`;
-        if (menuWidth) {
-            this.popover.style.setProperty('width', menuWidth);
-        }
+        this.sizePopover(this.popover);
         const { button, popover } = this;
@@ -199,2 +186,9 @@ this.closeOverlay = await Dropdown.openOverlay(button, 'inline', popover, {
     }
+    sizePopover(popover) {
+        // only use `this.offsetWidth` when Standard variant
+        const menuWidth = !this.quiet && `${this.offsetWidth}px`;
+        if (menuWidth) {
+            popover.style.setProperty('width', menuWidth);
+        }
+    }
     closeMenu() {
@@ -239,2 +233,3 @@ if (this.closeOverlay) {
                 id="button"
+                class="button"
                 @blur=${this.onButtonBlur}
@@ -262,7 +257,25 @@ @click=${this.onButtonClick}
         if (changedProperties.has('value') && this.optionsMenu) {
-            const items = [
-                ...this.optionsMenu.querySelectorAll(`[role=${this.optionsMenu.childRole}]`),
-            ];
+            this.manageSelection();
+        }
+        if (changedProperties.has('disabled') && this.disabled) {
+            this.open = false;
+        }
+        if (changedProperties.has('open')) {
+            this.menuStatePromise = new Promise((res) => (this.menuStateResolver = res));
+            if (this.open) {
+                this.openMenu();
+            }
+            else {
+                this.closeMenu();
+            }
+        }
+    }
+    async manageSelection() {
+        /* istanbul ignore if */
+        if (!this.optionsMenu) {
+            return;
+        }
+        if (this.optionsMenu.menuItems.length) {
             let selectedItem;
-            items.map((item) => {
+            this.optionsMenu.menuItems.map((item) => {
                 if (this.value === item.value && !item.disabled) {
@@ -284,15 +297,9 @@ selectedItem = item;
             this.optionsMenu.updateSelectedItemIndex();
+            return;
         }
-        if (changedProperties.has('disabled') && this.disabled) {
-            this.open = false;
+        await this.optionsMenu.updateComplete;
+        /* istanbul ignore else */
+        if (this.optionsMenu.menuItems.length) {
+            this.manageSelection();
         }
-        if (changedProperties.has('open')) {
-            this.menuStatePromise = new Promise((res) => (this.menuStateResolver = res));
-            if (this.open) {
-                this.openMenu();
-            }
-            else {
-                this.closeMenu();
-            }
-        }
     }
@@ -299,0 +306,0 @@ async _getUpdateComplete() {

src/Dropdown.ts

@@ -20,4 +20,4 @@ /*
     query,
-} from 'lit-element';
-import { nothing } from 'lit-html';
+    nothing,
+} from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -78,4 +78,8 @@
     @query('#button')
-    public button?: HTMLButtonElement;
+    public button!: HTMLButtonElement;
 
+    public get target(): HTMLButtonElement | this {
+        return this.button;
+    }
+
     @property({ type: Boolean, reflect: true })
@@ -141,6 +145,2 @@ public disabled = false;
     public get focusElement(): HTMLElement {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return this;
-        }
         if (this.open && this.optionsMenu) {
@@ -157,7 +157,6 @@ return this.optionsMenu;
     public onButtonBlur(): void {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return;
-        }
-        this.button.removeEventListener('keydown', this.onKeydown);
+        (this.target as HTMLButtonElement).removeEventListener(
+            'keydown',
+            this.onKeydown
+        );
     }
@@ -170,7 +169,6 @@
     public onButtonFocus(): void {
-        /* istanbul ignore if */
-        if (typeof this.button === 'undefined') {
-            return;
-        }
-        this.button.addEventListener('keydown', this.onKeydown);
+        (this.target as HTMLButtonElement).addEventListener(
+            'keydown',
+            this.onKeydown
+        );
     }
@@ -190,3 +188,3 @@
 
-    public onKeydown(event: KeyboardEvent): void {
+    public onKeydown = (event: KeyboardEvent): void => {
         if (event.code !== 'ArrowDown') {
@@ -201,3 +199,3 @@ return;
         this.open = true;
-    }
+    };
 
@@ -239,3 +237,3 @@ public setValueFromItem(item: MenuItem): void {
 
-    private onOverlayClosed(): void {
+    protected onOverlayClosed(): void {
         this.close();
@@ -246,2 +244,4 @@ /* istanbul ignore else */
                 this.placeholder.parentElement ||
+                /* istanbul ignore next */
+
                 this.placeholder.getRootNode();
@@ -262,3 +262,2 @@
             !this.popover ||
-            !this.button ||
             !this.optionsMenu ||
@@ -276,3 +275,4 @@ this.optionsMenu.children.length === 0
         const parentElement =
-            this.optionsMenu.parentElement || this.optionsMenu.getRootNode();
+            this.optionsMenu.parentElement ||
+            /* istanbul ignore next */ this.optionsMenu.getRootNode();
 
@@ -285,8 +285,3 @@ /* istanbul ignore else */
         this.popover.append(this.optionsMenu);
-
-        // only use `this.offsetWidth` when Standard variant
-        const menuWidth = !this.quiet && `${this.offsetWidth}px`;
-        if (menuWidth) {
-            this.popover.style.setProperty('width', menuWidth);
-        }
+        this.sizePopover(this.popover);
         const { button, popover } = this;
@@ -305,2 +300,10 @@ this.closeOverlay = await Dropdown.openOverlay(
 
+    protected sizePopover(popover: HTMLElement): void {
+        // only use `this.offsetWidth` when Standard variant
+        const menuWidth = !this.quiet && `${this.offsetWidth}px`;
+        if (menuWidth) {
+            popover.style.setProperty('width', menuWidth);
+        }
+    }
+
     private closeMenu(): void {
@@ -348,2 +351,3 @@ if (this.closeOverlay) {
                 id="button"
+                class="button"
                 @blur=${this.onButtonBlur}
@@ -374,9 +378,27 @@ @click=${this.onButtonClick}
         if (changedProperties.has('value') && this.optionsMenu) {
-            const items = [
-                ...this.optionsMenu.querySelectorAll(
-                    `[role=${this.optionsMenu.childRole}]`
-                ),
-            ] as MenuItem[];
+            this.manageSelection();
+        }
+        if (changedProperties.has('disabled') && this.disabled) {
+            this.open = false;
+        }
+        if (changedProperties.has('open')) {
+            this.menuStatePromise = new Promise(
+                (res) => (this.menuStateResolver = res)
+            );
+            if (this.open) {
+                this.openMenu();
+            } else {
+                this.closeMenu();
+            }
+        }
+    }
+
+    private async manageSelection(): Promise<void> {
+        /* istanbul ignore if */
+        if (!this.optionsMenu) {
+            return;
+        }
+        if (this.optionsMenu.menuItems.length) {
             let selectedItem: MenuItem | undefined;
-            items.map((item) => {
+            this.optionsMenu.menuItems.map((item) => {
                 if (this.value === item.value && !item.disabled) {
@@ -396,16 +418,9 @@ selectedItem = item;
             this.optionsMenu.updateSelectedItemIndex();
+            return;
         }
-        if (changedProperties.has('disabled') && this.disabled) {
-            this.open = false;
+        await this.optionsMenu.updateComplete;
+        /* istanbul ignore else */
+        if (this.optionsMenu.menuItems.length) {
+            this.manageSelection();
         }
-        if (changedProperties.has('open')) {
-            this.menuStatePromise = new Promise(
-                (res) => (this.menuStateResolver = res)
-            );
-            if (this.open) {
-                this.openMenu();
-            } else {
-                this.closeMenu();
-            }
-        }
     }
@@ -412,0 +427,0 @@

src/spectrum-dropdown.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-dropdown.css.js

@@ -12,10 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}select+.dropdown{position:absolute;right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
-var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
+:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}:host([dir=ltr]) select+.dropdown{right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) select+.dropdown{left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}select+.dropdown{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
+var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
 var(--spectrum-alias-border-size-thin))*2);line-height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
-var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis;text-align:left}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label+.dropdown,#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
+var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}:host([dir=ltr]) #label+.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label+.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) #label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label~.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
@@ -32,4 +32,6 @@ var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-icon-chevron-down-medium-height,
 var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-dropdown-icon-size,
-var(--spectrum-alias-workflow-icon-size)))/2)}#button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}.spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-alias-workflow-icon-size)))/2)}:host([dir=ltr]) #button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #button #label+.icon:not(.dropdown){margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+.dropdown{margin-right:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}:host([dir=ltr]) .spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Dropdown-popover--quiet{margin-right:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
 var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
@@ -36,0 +38,0 @@ `;

src/spectrum-dropdown.css.ts

@@ -12,10 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}select+.dropdown{position:absolute;right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
-var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
+:host{position:relative;display:inline-block;max-width:100%;width:var(--spectrum-global-dimension-size-2400);min-width:var(--spectrum-dropdown-min-width,var(--spectrum-global-dimension-size-600))}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-appearance:none}select::-ms-expand{display:none}select::-ms-value{background-color:initial}:host([dir=ltr]) select+.dropdown{right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) select+.dropdown{left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150))}select+.dropdown{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-chevron-down-medium-height,
+var(--spectrum-global-dimension-size-75))/-2)}#button{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;white-space:nowrap;overflow:hidden;height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
 var(--spectrum-alias-border-size-thin))*2);line-height:calc(var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
-var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis;text-align:left}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#label+.dropdown,#label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
+var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));text-overflow:ellipsis}#label.placeholder{font-weight:var(--spectrum-dropdown-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-dropdown-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-dropdown-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}:host([dir=ltr]) #label+.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label+.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) #label~.dropdown{margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #label~.dropdown{margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}.dropdown{display:inline-block;position:relative;vertical-align:top;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;margin-top:calc((var(--spectrum-dropdown-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-dropdown-border-size,
@@ -32,6 +32,8 @@ var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-icon-chevron-down-medium-height,
 var(--spectrum-alias-border-size-thin))*2 - var(--spectrum-dropdown-icon-size,
-var(--spectrum-alias-workflow-icon-size)))/2)}#button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}.spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-alias-workflow-icon-size)))/2)}:host([dir=ltr]) #button #label+.icon:not(.dropdown){margin-left:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #button #label+.icon:not(.dropdown){margin-right:var(--spectrum-dropdown-icon-margin-left,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .icon+.dropdown{margin-left:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .icon+.dropdown{margin-right:var(--spectrum-dropdown-icon-gap,var(--spectrum-global-dimension-size-100))}:host([quiet]){width:auto;min-width:var(--spectrum-dropdown-quiet-min-width,var(--spectrum-global-dimension-size-600))}#popover{max-width:var(--spectrum-global-dimension-size-3000)}:host([dir=ltr]) .spectrum-Dropdown-popover--quiet{margin-left:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
 var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin))))}:host([dir=rtl]) .spectrum-Dropdown-popover--quiet{margin-right:calc(-1*(var(--spectrum-dropdown-quiet-popover-offset-x,
+var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size,
 var(--spectrum-alias-border-size-thin))))}#button:hover .dropdown{color:var(--spectrum-dropdown-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.is-selected .placeholder{color:var(--spectrum-dropdown-placeholder-text-color-down,var(--spectrum-global-color-gray-900))}:host([invalid]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-validation-icon-color-error,var(--spectrum-semantic-negative-color-icon))}:host([disabled]) #button:hover .dropdown,:host([disabled]) .dropdown,:host([invalid][disabled]) .icon,:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark){color:var(--spectrum-dropdown-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#label.placeholder:hover{color:var(--spectrum-dropdown-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#label.placeholder:active{color:var(--spectrum-dropdown-placeholder-text-color-mouse-focus,var(--spectrum-global-color-gray-900))}#button.focus-visible #label.placeholder{color:var(--spectrum-dropdown-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#button.focus-visible .dropdown{color:var(--spectrum-dropdown-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}
 `;
 export default styles;

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210423

increased by6.95%

Dependency count

9

decreased by-10%

Lines of code

2184

increased by6.59%

Dependency changes

• + Added@spectrum-web-components/base@^0.0.2-alpha.1038+1e82c26e

• + Added@spectrum-web-components/base@0.0.2-alpha.1038(transitive)

• + Added@spectrum-web-components/shared@0.6.1-alpha.71(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

• Updated@spectrum-web-components/button@^0.8.4-alpha.71+1e82c26e

• Updated@spectrum-web-components/icon@^0.5.2-alpha.77+1e82c26e

• Updated@spectrum-web-components/icons-ui@^0.2.2-alpha.77+1e82c26e

• Updated@spectrum-web-components/menu@^0.3.2-alpha.46+1e82c26e

• Updated@spectrum-web-components/overlay@^0.5.2-alpha.44+1e82c26e

• Updated@spectrum-web-components/popover@^0.4.6-alpha.44+1e82c26e

• Updated@spectrum-web-components/shared@^0.6.1-alpha.71+1e82c26e