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

Comparing version 0.3.2-alpha.3 to 0.3.2-alpha.46

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [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)
+
+**Note:** Version bump only for package @spectrum-web-components/menu
+
 ## [0.3.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.3.0...@spectrum-web-components/menu@0.3.1) (2020-08-13)
@@ -8,0 +12,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-alpha.3+1f7f36f5",
+    "version": "0.3.2-alpha.46+1e82c26e",
     "description": "",
@@ -63,14 +63,13 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/menu": "^2.1.5"
+        "@spectrum-css/menu": "^3.0.0-beta.2"
     },
     "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/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/shared": "^0.6.1-alpha.71+1e82c26e",
         "tslib": "^2.0.0"
     },
-    "gitHead": "1f7f36f5bc1bd448f5a5eeb72a72414712e849ff"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

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() {
@@ -175,6 +175,3 @@ super();
     disconnectedCallback() {
-        /* istanbul ignore else */
-        if (this.observer) {
-            this.observer.disconnect();
-        }
+        this.observer.disconnect();
         super.disconnectedCallback();
@@ -181,0 +178,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;
@@ -176,3 +176,3 @@ public focusInItemIndex = 0;
             ...this.querySelectorAll(`[role="${this.childRole}"]`),
-        ];
+        ] as MenuItem[];
         if (!this.menuItems || this.menuItems.length === 0) {
@@ -217,10 +217,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;
 }
@@ -227,0 +224,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';
@@ -16,0 +16,0 @@ import { CheckmarkMediumIcon } from '@spectrum-web-components/icons-ui';

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';
 
@@ -16,0 +21,0 @@ import '@spectrum-web-components/icon/sp-icon.js';

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)",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

203854

increased by30.61%

Dependency count

6

decreased by-14.29%

Lines of code

2428

increased by23.88%

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/shared@^0.6.1-alpha.71+1e82c26e