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

Comparing version 0.3.2 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.3.2...@spectrum-web-components/menu@0.4.0) (2020-08-31)
+
+### Features
+
+-   allow dir management by sp-theme elements ([2d10158](https://github.com/adobe/spectrum-web-components/commit/2d1015883bc0c3a03862c0de8b4d996cd954291f))
+-   update to Spectrum CSS v3.0.0 ([e8b3d8f](https://github.com/adobe/spectrum-web-components/commit/e8b3d8f75c77c04b4d7af126b91b0f6ad2a40742))
+-   **split-button:** add split-button pattern ([4833a59](https://github.com/adobe/spectrum-web-components/commit/4833a598bb3da3552d194586350a3888dba79543))
+
 ## [0.3.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.3.1...@spectrum-web-components/menu@0.3.2) (2020-08-19)
@@ -8,0 +16,0 @@

custom-elements.json

@@ -7,3 +7,9 @@ {
       "path": "./sp-menu-divider.d.ts",
-      "description": "Spectrum Menu Divider Component"
+      "description": "Spectrum Menu Divider Component",
+      "properties": [
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
+        }
+      ]
     },
@@ -14,2 +20,8 @@ {
       "description": "Spectrum Menu Group Component",
+      "properties": [
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
+        }
+      ],
       "slots": [
@@ -155,2 +167,12 @@ {
         {
+          "name": "managePresenceObservedSlot",
+          "type": "() => void",
+          "default": "\"(): void => {\\n            this.slotContentIsPresent = !!this.querySelector(lightDomSelector);\\n        }\""
+        },
+        {
+          "name": "slotContentIsPresent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "disabled",
@@ -179,2 +201,6 @@ "attribute": "disabled",
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -187,2 +213,6 @@ ],
         {
+          "name": "change",
+          "description": "Announces a change in the `selected` property of an action button"
+        },
+        {
           "name": "keydown"
@@ -199,3 +229,3 @@ }
           "name": "menuItems",
-          "type": "Element[]",
+          "type": "MenuItem[]",
           "default": "[]"
@@ -224,2 +254,6 @@ },
           "name": "onClick"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -226,0 +260,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.2",
+    "version": "0.4.0",
     "description": "",
@@ -58,3 +58,3 @@ "main": "src/index.js",
     "scripts": {
-        "test": "karma start --coverage"
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
     },
@@ -64,14 +64,13 @@ "author": "",
     "devDependencies": {
-        "@spectrum-css/menu": "^2.1.5"
+        "@spectrum-css/menu": "^3.0.0-beta.2"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "^0.8.4",
-        "@spectrum-web-components/icon": "^0.5.2",
-        "@spectrum-web-components/icons-ui": "^0.2.2",
-        "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.1.0",
+        "@spectrum-web-components/button": "^0.9.0",
+        "@spectrum-web-components/icon": "^0.6.0",
+        "@spectrum-web-components/icons-ui": "^0.3.0",
+        "@spectrum-web-components/shared": "^0.7.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "61d6daa63fedca757761095d1e1ed6919d8a1673"
+    "gitHead": "51706b5f7aeec990c6323501aa22f8aee5827e31"
 }

src/menu-divider.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/menu-divider.css.js

@@ -12,7 +12,17 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight));display:block}
+:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=ltr]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=rtl]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host{display:block}
 `;
 export default styles;
 //# sourceMappingURL=menu-divider.css.js.map

src/menu-divider.css.ts

@@ -12,6 +12,16 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight));display:block}
+:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=ltr]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=rtl]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host{display:block}
 `;
 export default styles;

src/menu-group.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/menu-group.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-.header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}
+.header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}.header,:host([dir=ltr]) .header{padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150)}:host([dir=rtl]) .header{padding:0 var(--spectrum-global-dimension-size-150) 0 var(--spectrum-global-dimension-size-450)}
 `;
 export default styles;
 //# sourceMappingURL=menu-group.css.js.map

src/menu-group.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-.header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}
+.header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}.header,:host([dir=ltr]) .header{padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150)}:host([dir=rtl]) .header{padding:0 var(--spectrum-global-dimension-size-150) 0 var(--spectrum-global-dimension-size-450)}
 `;
 export default styles;

src/menu-item.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/menu-item.css.js

@@ -12,15 +12,23 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150));margin-top:var(--spectrum-global-dimension-size-50)}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
+:host([dir=ltr]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=ltr]) #button{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-selectlist-border-size-key-focus,
-var(--spectrum-global-dimension-static-size-25)));margin:0;border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-25)));margin:0;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)));color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100));width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) #button .spectrum-Menu-itemIcon+#label,:host([dir=ltr]) #button slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-selectlist-thumbnail-image-padding-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-alias-workflow-icon-size,
 var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:1.3;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
-var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color));border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{width:100%}button{border:0;background:0;padding:0;margin:0;display:inherit;font:inherit;color:inherit;text-align:inherit}#selected{flex-shrink:0}
+var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]) #button{color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{width:100%}button{border:0;background:0;padding:0;margin:0;display:inherit;font:inherit;color:inherit;text-align:inherit}#selected{flex-shrink:0}
 `;
 export default styles;
 //# sourceMappingURL=menu-item.css.js.map

src/menu-item.css.ts

@@ -12,14 +12,22 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150));margin-top:var(--spectrum-global-dimension-size-50)}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
+:host([dir=ltr]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=ltr]) #button{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-selectlist-border-size-key-focus,
-var(--spectrum-global-dimension-static-size-25)));margin:0;border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-25)));margin:0;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)));color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100));width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) #button .spectrum-Menu-itemIcon+#label,:host([dir=ltr]) #button slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-selectlist-thumbnail-image-padding-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-alias-workflow-icon-size,
 var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:1.3;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
-var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color));border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{width:100%}button{border:0;background:0;padding:0;margin:0;display:inherit;font:inherit;color:inherit;text-align:inherit}#selected{flex-shrink:0}
+var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]) #button{color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{width:100%}button{border:0;background:0;padding:0;margin:0;display:inherit;font:inherit;color:inherit;text-align:inherit}#selected{flex-shrink:0}
 `;
 export default styles;

src/menu.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/menu.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{box-sizing:border-box;margin:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)) 0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent));display:inline-block}:host sp-menu{display:block}
+:host{box-sizing:border-box;margin-top:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-bottom:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-left:0;margin-right:0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent));display:inline-block}:host sp-menu{display:block}
 `;
 export default styles;
 //# sourceMappingURL=menu.css.js.map

src/menu.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{box-sizing:border-box;margin:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)) 0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent));display:inline-block}:host sp-menu{display:block}
+:host{box-sizing:border-box;margin-top:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-bottom:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-left:0;margin-right:0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent));display:inline-block}:host sp-menu{display:block}
 `;
 export default styles;

src/Menu.d.ts

@@ -1,2 +0,3 @@
-import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import { MenuItem } from './MenuItem.js';
 export interface MenuQueryRoleEventDetail {
@@ -10,5 +11,5 @@ role: string;
  */
-export declare class Menu extends LitElement {
+export declare class Menu extends SpectrumElement {
     static get styles(): CSSResultArray;
-    menuItems: Element[];
+    menuItems: MenuItem[];
     focusedItemIndex: number;
@@ -38,3 +39,3 @@ focusInItemIndex: number;
     disconnectedCallback(): void;
-    private observer?;
+    private observer;
 }
@@ -41,0 +42,0 @@ declare global {

src/Menu.js

@@ -12,3 +12,3 @@ /*
 */
-import { html, LitElement } from 'lit-element';
+import { html, SpectrumElement, } from '@spectrum-web-components/base';
 import menuStyles from './menu.css.js';
@@ -20,3 +20,3 @@ /**
  */
-export class Menu extends LitElement {
+export class Menu extends SpectrumElement {
     constructor() {
@@ -70,3 +70,3 @@ super();
         const target = path.find((el) => {
-            /* istanbul ignore if */
+            /* c8 ignore next 3 */
             if (!(el instanceof Element)) {
@@ -77,3 +77,3 @@ return false;
         });
-        /* istanbul ignore if */
+        /* c8 ignore next 3 */
         if (!target) {
@@ -124,3 +124,3 @@ return;
             requestAnimationFrame(() => {
-                /* istanbul ignore if */
+                /* c8 ignore next 3 */
                 if (this.menuItems.length === 0) {
@@ -178,6 +178,3 @@ return;
     disconnectedCallback() {
-        /* istanbul ignore else */
-        if (this.observer) {
-            this.observer.disconnect();
-        }
+        this.observer.disconnect();
         super.disconnectedCallback();
@@ -184,0 +181,0 @@ }

src/Menu.ts

@@ -13,12 +13,12 @@ /*
 
-import { html, LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import {
+    html,
+    SpectrumElement,
+    CSSResultArray,
+    TemplateResult,
+} from '@spectrum-web-components/base';
 
+import { MenuItem } from './MenuItem.js';
 import menuStyles from './menu.css.js';
 
-interface MenuItem extends HTMLElement {
-    disabled: boolean;
-    selected: boolean;
-    tabIndex: number;
-}
-
 export interface MenuQueryRoleEventDetail {
@@ -33,3 +33,3 @@ role: string;
  */
-export class Menu extends LitElement {
+export class Menu extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -39,3 +39,3 @@ return [menuStyles];
 
-    public menuItems = [] as Element[];
+    public menuItems = [] as MenuItem[];
     public focusedItemIndex = 0;
@@ -81,3 +81,3 @@ public focusInItemIndex = 0;
         const target = path.find((el) => {
-            /* istanbul ignore if */
+            /* c8 ignore next 3 */
             if (!(el instanceof Element)) {
@@ -88,3 +88,3 @@ return false;
         }) as MenuItem;
-        /* istanbul ignore if */
+        /* c8 ignore next 3 */
         if (!target) {
@@ -142,3 +142,3 @@ return;
                 requestAnimationFrame(() => {
-                    /* istanbul ignore if */
+                    /* c8 ignore next 3 */
                     if (this.menuItems.length === 0) {
@@ -179,3 +179,3 @@ return;
             ...this.querySelectorAll(`[role="${this.childRole}"]`),
-        ];
+        ] as MenuItem[];
         if (!this.menuItems || this.menuItems.length === 0) {
@@ -220,10 +220,7 @@ return;
     public disconnectedCallback(): void {
-        /* istanbul ignore else */
-        if (this.observer) {
-            this.observer.disconnect();
-        }
+        this.observer.disconnect();
         super.disconnectedCallback();
     }
 
-    private observer?: MutationObserver;
+    private observer!: MutationObserver;
 }
@@ -230,0 +227,0 @@

src/MenuDivider.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray, LitElement } from 'lit-element';
+import { CSSResultArray, SpectrumElement } from '@spectrum-web-components/base';
 /**
@@ -7,5 +7,5 @@ * Spectrum Menu Divider Component
  */
-export declare class MenuDivider extends LitElement {
+export declare class MenuDivider extends SpectrumElement {
     static get styles(): CSSResultArray;
     protected firstUpdated(): void;
 }

src/MenuDivider.js

@@ -12,3 +12,3 @@ /*
 */
-import { LitElement } from 'lit-element';
+import { SpectrumElement } from '@spectrum-web-components/base';
 import menuDividerStyles from './menu-divider.css.js';
@@ -20,3 +20,3 @@ /**
  */
-export class MenuDivider extends LitElement {
+export class MenuDivider extends SpectrumElement {
     static get styles() {
@@ -23,0 +23,0 @@ return [menuDividerStyles];

src/MenuDivider.ts

@@ -13,3 +13,3 @@ /*
 
-import { CSSResultArray, LitElement } from 'lit-element';
+import { CSSResultArray, SpectrumElement } from '@spectrum-web-components/base';
 
@@ -23,3 +23,3 @@ import menuDividerStyles from './menu-divider.css.js';
  */
-export class MenuDivider extends LitElement {
+export class MenuDivider extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -26,0 +26,0 @@ return [menuDividerStyles];

src/MenuGroup.d.ts

@@ -1,2 +0,2 @@
-import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 /**
@@ -9,3 +9,3 @@ * Spectrum Menu Group Component
  */
-export declare class MenuGroup extends LitElement {
+export declare class MenuGroup extends SpectrumElement {
     static get styles(): CSSResultArray;
@@ -12,0 +12,0 @@ private instanceCount;

src/MenuGroup.js

@@ -12,3 +12,3 @@ /*
 */
-import { html, LitElement } from 'lit-element';
+import { html, SpectrumElement, } from '@spectrum-web-components/base';
 import menuGroupStyles from './menu-group.css.js';
@@ -22,3 +22,3 @@ /**
  */
-export class MenuGroup extends LitElement {
+export class MenuGroup extends SpectrumElement {
     constructor() {
@@ -25,0 +25,0 @@ super();

src/MenuGroup.ts

@@ -13,3 +13,8 @@ /*
 
-import { html, LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import {
+    html,
+    SpectrumElement,
+    CSSResultArray,
+    TemplateResult,
+} from '@spectrum-web-components/base';
 
@@ -25,3 +30,3 @@ import menuGroupStyles from './menu-group.css.js';
  */
-export class MenuGroup extends LitElement {
+export class MenuGroup extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -28,0 +33,0 @@ return [menuGroupStyles];

src/MenuItem.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icon/sp-icon.js';
@@ -3,0 +3,0 @@ import { ActionButton } from '@spectrum-web-components/button';

src/MenuItem.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, property } from 'lit-element';
+import { html, property, } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icon/sp-icon.js';
@@ -57,3 +57,3 @@ import { CheckmarkMediumIcon } from '@spectrum-web-components/icons-ui';
     get itemText() {
-        return (this.textContent || /* istanbul ignore next */ '').trim();
+        return (this.textContent || /* c8 ignore next */ '').trim();
     }
@@ -60,0 +60,0 @@ get buttonContent() {

src/MenuItem.ts

@@ -13,3 +13,8 @@ /*
 
-import { html, property, CSSResultArray, TemplateResult } from 'lit-element';
+import {
+    html,
+    property,
+    CSSResultArray,
+    TemplateResult,
+} from '@spectrum-web-components/base';
 
@@ -66,3 +71,3 @@ import '@spectrum-web-components/icon/sp-icon.js';
     public get itemText(): string {
-        return (this.textContent || /* istanbul ignore next */ '').trim();
+        return (this.textContent || /* c8 ignore next */ '').trim();
     }
@@ -69,0 +74,0 @@

src/spectrum-config.js

@@ -22,2 +22,3 @@ /*
             },
+            exclude: [/\.spectrum-Menu(?!-sectionHeading)/],
         },
@@ -24,0 +25,0 @@ {

src/spectrum-menu-divider.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-menu-divider.css.js

@@ -12,7 +12,17 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}
+:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=ltr]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=rtl]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu-divider.css.js.map

src/spectrum-menu-divider.css.ts

@@ -12,6 +12,16 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}
+:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=ltr]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel,:host([dir=rtl]) .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-selectlist-divider-size,var(--spectrum-alias-border-size-thick));margin:calc(var(--spectrum-selectlist-divider-padding, 3px)/2) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150));padding:0;border:none;background-color:var(--spectrum-selectlist-divider-color,var(--spectrum-alias-border-color-extralight))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}
 `;
 export default styles;

src/spectrum-menu-item.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-menu-item.css.js

@@ -12,15 +12,23 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150));margin-top:var(--spectrum-global-dimension-size-50)}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
+:host([dir=ltr]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=ltr]) #button{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-selectlist-border-size-key-focus,
-var(--spectrum-global-dimension-static-size-25)));margin:0;border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-25)));margin:0;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)));color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100));width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) #button .spectrum-Menu-itemIcon+#label,:host([dir=ltr]) #button slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-selectlist-thumbnail-image-padding-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-alias-workflow-icon-size,
 var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:1.3;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
-var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color));border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
+var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]) #button{color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu-item.css.js.map

src/spectrum-menu-item.css.ts

@@ -12,14 +12,22 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150));margin-top:var(--spectrum-global-dimension-size-50)}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
+:host([dir=ltr]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=rtl]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-global-dimension-size-150)))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) .spectrum-Menu.is-selectable #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1;display:none;align-self:flex-start;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=ltr]) #button{border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent}#button{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-85) var(--spectrum-selectlist-option-padding,var(--spectrum-global-dimension-static-size-150)) var(--spectrum-global-dimension-size-85) calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-selectlist-border-size-key-focus,
-var(--spectrum-global-dimension-static-size-25)));margin:0;border-left:var(--spectrum-selectlist-border-size-key-focus,var(--spectrum-global-dimension-static-size-25)) solid transparent;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-25)));margin:0;min-height:var(--spectrum-selectlist-option-height);font-size:var(--spectrum-selectlist-option-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-selectlist-option-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:normal;text-decoration:none;background-color:var(--spectrum-selectlist-option-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-selectlist-option-text-color,var(--spectrum-alias-text-color))}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-selectlist-option-padding,
 var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)));color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100));width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-selectlist-option-padding,
+var(--spectrum-global-dimension-static-size-150)) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block;color:var(--spectrum-selectlist-option-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.spectrum-Menu-itemIcon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) #button .spectrum-Menu-itemIcon+#label,:host([dir=ltr]) #button slot[name=icon]+#label{margin-left:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-selectlist-thumbnail-image-padding-x,var(--spectrum-global-dimension-size-100))}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-selectlist-thumbnail-image-padding-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-alias-workflow-icon-size,
 var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:1.3;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-selectlist-option-icon-padding-x,
-var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color));border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
+var(--spectrum-global-dimension-size-150)))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-selectlist-option-icon-padding-x,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.is-focused{border-left-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.is-focused{border-right-color:var(--spectrum-selectlist-option-focus-indicator-color,var(--spectrum-alias-border-color-focus))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-selectlist-option-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-key-focus,var(--spectrum-alias-text-color))}#button.is-highlighted,#button.is-open,#button:focus,#button:hover{background-color:var(--spectrum-selectlist-option-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-selectlist-option-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]) #button{color:var(--spectrum-selectlist-option-text-color-selected,var(--spectrum-alias-text-color))}#button:active,.is-active{background-color:var(--spectrum-selectlist-option-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]) #button{background-color:var(--spectrum-selectlist-option-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-selectlist-option-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
 `;
 export default styles;

src/spectrum-menu-sectionHeading.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-menu-sectionHeading.css.js

@@ -12,3 +12,3 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
@@ -15,0 +15,0 @@ .header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}

src/spectrum-menu-sectionHeading.css.ts

@@ -12,3 +12,3 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
@@ -15,0 +15,0 @@ .header{display:block;margin:var(--spectrum-global-dimension-size-75) 0 0 0;padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);font-size:var(--spectrum-global-dimension-font-size-50);font-weight:400;line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-heading-subtitle3-text-color,var(--spectrum-global-color-gray-700))}

src/spectrum-menu.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-menu.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{display:inline-block;box-sizing:border-box;margin:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)) 0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent))}
+:host{display:inline-block;box-sizing:border-box;margin-top:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-bottom:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-left:0;margin-right:0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu.css.js.map

src/spectrum-menu.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{display:inline-block;box-sizing:border-box;margin:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)) 0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent))}
+:host{display:inline-block;box-sizing:border-box;margin-top:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-bottom:var(--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50));margin-left:0;margin-right:0;padding:0;list-style-type:none;overflow:auto;display:block;background-color:var(--spectrum-selectlist-background-color,var(--spectrum-alias-background-color-transparent))}
 `;
 export default styles;

src/spectrum-vars.json

@@ -20,5 +20,5 @@ {
     "--spectrum-selectlist-option-text-color": "var(--spectrum-alias-text-color)",
+    "--spectrum-selectlist-option-focus-indicator-color": "var(--spectrum-alias-border-color-focus)",
     "--spectrum-selectlist-option-background-color-key-focus": "var(--spectrum-alias-background-color-hover-overlay)",
     "--spectrum-selectlist-option-text-color-key-focus": "var(--spectrum-alias-text-color)",
-    "--spectrum-selectlist-option-focus-indicator-color": "var(--spectrum-alias-border-color-focus)",
     "--spectrum-selectlist-option-background-color-hover": "var(--spectrum-alias-background-color-hover-overlay)",
@@ -25,0 +25,0 @@ "--spectrum-selectlist-option-text-color-hover": "var(--spectrum-alias-text-color)",

No alert changes

Improved metrics

Total package byte prevSize

204370

increased by30.81%

Dependency count

6

decreased by-14.29%

Lines of code

2428

increased by23.88%

Dependency changes

• + Added@spectrum-web-components/base@^0.1.0

• + Added@spectrum-web-components/button@0.9.4(transitive)

• + Added@spectrum-web-components/icon@0.6.3(transitive)

• + Added@spectrum-web-components/icons-ui@0.3.3(transitive)

• + Added@spectrum-web-components/shared@0.7.4(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

• - Removed@spectrum-web-components/button@0.8.4(transitive)

• - Removed@spectrum-web-components/icon@0.5.2(transitive)

• - Removed@spectrum-web-components/icons-ui@0.2.2(transitive)

• - Removed@spectrum-web-components/shared@0.6.0(transitive)

• Updated@spectrum-web-components/button@^0.9.0

• Updated@spectrum-web-components/icon@^0.6.0

• Updated@spectrum-web-components/icons-ui@^0.3.0

• Updated@spectrum-web-components/shared@^0.7.0