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

Comparing version 0.6.2 to 0.6.3

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.6.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.6.2...@spectrum-web-components/menu@0.6.3) (2021-02-11)
+
+### Bug Fixes
+
+-   update to latest spectrum-css packages ([a5ca19f](https://github.com/adobe/spectrum-web-components/commit/a5ca19f67d5b3f0951667c4441d4d977bf1e0937))
+
 ## [0.6.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.6.1...@spectrum-web-components/menu@0.6.2) (2021-02-02)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -47,2 +47,7 @@ {
         {
+          "name": "no-wrap",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "emphasized",
@@ -141,2 +146,8 @@ "type": "boolean",
         {
+          "name": "noWrap",
+          "attribute": "no-wrap",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "emphasized",
@@ -266,3 +277,4 @@ "attribute": "emphasized",
         {
-          "name": "keydown"
+          "name": "longpress",
+          "description": "Synthesizes a \"longpress\" interaction that signifies a\n`pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`\nwhile `altKey===true`."
         }
@@ -275,4 +287,17 @@ ]
       "description": "Spectrum Menu Component",
+      "attributes": [
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
       "properties": [
         {
+          "name": "selectable",
+          "attribute": "selectable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "menuItems",
@@ -279,0 +304,0 @@ "type": "MenuItem[]",

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.6.2",
+    "version": "0.6.3",
     "description": "",
@@ -59,13 +59,13 @@ "main": "./src/index.js",
     "devDependencies": {
-        "@spectrum-css/menu": "^3.0.0-beta.5"
+        "@spectrum-css/menu": "^3.0.0"
     },
     "dependencies": {
-        "@spectrum-web-components/action-button": "^0.2.2",
-        "@spectrum-web-components/base": "^0.3.2",
-        "@spectrum-web-components/icon": "^0.8.2",
-        "@spectrum-web-components/icons-ui": "^0.5.2",
-        "@spectrum-web-components/shared": "^0.9.0",
+        "@spectrum-web-components/action-button": "^0.3.0",
+        "@spectrum-web-components/base": "^0.3.3",
+        "@spectrum-web-components/icon": "^0.8.3",
+        "@spectrum-web-components/icons-ui": "^0.5.3",
+        "@spectrum-web-components/shared": "^0.10.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "7783ce454deb5a97b3d274ee1b54a24c09065ce4"
+    "gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0"
 }

src/menu-divider.css.js

@@ -14,9 +14,5 @@ /*
 const styles = css `
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-listitem-padding-right) - 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-listitem-icon-gap)}: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-listitem-icon-gap)}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-global-dimension-size-85);padding:0;border:none}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item.focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item:focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item.focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item:focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host{background-color:var(--spectrum-alias-border-color-extralight,var(--spectrum-global-color-gray-100));display:block}
+:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-listitem-padding-y);padding:0;border:none;background-color:var(--spectrum-listitem-m-divider-color,var(--spectrum-alias-border-color-extralight));display:block}
 `;
 export default styles;
 //# sourceMappingURL=menu-divider.css.js.map

src/menu-divider.css.ts

@@ -14,8 +14,4 @@ /*
 const styles = css`
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-listitem-padding-right) - 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-listitem-icon-gap)}: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-listitem-icon-gap)}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-global-dimension-size-85);padding:0;border:none}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item.focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item:focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item.focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item:focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host{background-color:var(--spectrum-alias-border-color-extralight,var(--spectrum-global-color-gray-100));display:block}
+:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-listitem-padding-y);padding:0;border:none;background-color:var(--spectrum-listitem-m-divider-color,var(--spectrum-alias-border-color-extralight));display:block}
 `;
 export default styles;

src/menu-group.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-.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-body-text-line-height,var(--spectrum-global-font-line-height-medium));text-transform:uppercase;letter-spacing:.06em;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)}
+.header{display:block;margin:var(--spectrum-listitem-heading-margin);padding:var(--spectrum-listitem-heading-padding);font-size:var(--spectrum-listitem-heading-text-size);font-weight:var(--spectrum-listitem-heading-text-font-weight);line-height:var(--spectrum-listitem-heading-line-height);text-transform:var(--spectrum-listitem-heading-text-transform);letter-spacing:var(--spectrum-listitem-heading-letter-spacing);color:var(--spectrum-listheading-text-color)}: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)}sp-menu{display:block}
 `;
 export default styles;
 //# sourceMappingURL=menu-group.css.js.map

src/menu-group.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-.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-body-text-line-height,var(--spectrum-global-font-line-height-medium));text-transform:uppercase;letter-spacing:.06em;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)}
+.header{display:block;margin:var(--spectrum-listitem-heading-margin);padding:var(--spectrum-listitem-heading-padding);font-size:var(--spectrum-listitem-heading-text-size);font-weight:var(--spectrum-listitem-heading-text-font-weight);line-height:var(--spectrum-listitem-heading-line-height);text-transform:var(--spectrum-listitem-heading-text-transform);letter-spacing:var(--spectrum-listitem-heading-letter-spacing);color:var(--spectrum-listheading-text-color)}: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)}sp-menu{display:block}
 `;
 export default styles;

src/menu-item.css.js

@@ -14,10 +14,8 @@ /*
 const styles = css `
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1}:host([dir=ltr]) #button{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-listitem-focus-indicator-size) 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-listitem-padding-right) var(--spectrum-global-dimension-size-85) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block}.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-listitem-icon-gap)}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
-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-listitem-icon-gap))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}#button{background-color:var(--spectrum-alias-background-color-transparent,transparent);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button:focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button:focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button.focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button:focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button #selected{color:var(--spectrum-alias-icon-color-selected,var(--spectrum-global-color-blue-500))}#button:active,.is-active{background-color:var(--spectrum-alias-background-color-hover-overlay)}:host([disabled]) #button{background-color:var(--spectrum-alias-background-color-transparent,transparent);background-image:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500));cursor:default}:host{display:block}#selected{flex-shrink:0}::slotted(sp-menu){display:block}
+#selected{transform:scale(1);opacity:1}:host([dir=ltr]){border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-right) var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #selected{display:block}.icon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
+var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
 `;
 export default styles;
 //# sourceMappingURL=menu-item.css.js.map

src/menu-item.css.ts

@@ -14,9 +14,7 @@ /*
 const styles = css`
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1}:host([dir=ltr]) #button{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-listitem-focus-indicator-size) 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-listitem-padding-right) var(--spectrum-global-dimension-size-85) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block}.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-listitem-icon-gap)}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
-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-listitem-icon-gap))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}#button{background-color:var(--spectrum-alias-background-color-transparent,transparent);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button:focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button:focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button.focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button:focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button #selected{color:var(--spectrum-alias-icon-color-selected,var(--spectrum-global-color-blue-500))}#button:active,.is-active{background-color:var(--spectrum-alias-background-color-hover-overlay)}:host([disabled]) #button{background-color:var(--spectrum-alias-background-color-transparent,transparent);background-image:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500));cursor:default}:host{display:block}#selected{flex-shrink:0}::slotted(sp-menu){display:block}
+#selected{transform:scale(1);opacity:1}:host([dir=ltr]){border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-right) var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #selected{display:block}.icon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
+var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
 `;
 export default styles;

src/menu.css.js

@@ -14,5 +14,7 @@ /*
 const styles = css `
-:host{--spectrum-listitem-divider-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-divider-padding:3px;--spectrum-listitem-focus-indicator-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-listitem-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-listitem-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-listitem-icon-gap:var(--spectrum-alias-item-workflow-icon-gap-m,var(--spectrum-global-dimension-size-100));--spectrum-listitem-padding-left:var(--spectrum-alias-item-workflow-padding-left-m);--spectrum-listitem-padding-right:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));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}::slotted(sp-menu){display:block}:host{background-color:var(--spectrum-alias-background-color-transparent,transparent);display:inline-block}:host(:focus){outline:none}:host sp-menu{display:block}
+:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-heading-text-size:var(--spectrum-global-dimension-font-size-50);--spectrum-listitem-heading-text-font-weight:400;--spectrum-listitem-heading-text-transform:uppercase;--spectrum-listitem-heading-letter-spacing:0.06em;--spectrum-listitem-heading-margin:var(--spectrum-global-dimension-size-75) 0 0 0;--spectrum-listitem-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-listitem-icon-margin-top:var(--spectrum-global-dimension-size-50);--spectrum-listitem-label-line-height:1.3;--spectrum-listitem-heading-line-height:var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium));--spectrum-listitem-divider-size:var(--spectrum-listitem-m-divider-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-divider-padding:var(--spectrum-listitem-m-divider-padding,3px);--spectrum-listitem-focus-indicator-size:var(--spectrum-listitem-m-focus-indicator-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-text-font-weight:var(--spectrum-listitem-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-listitem-text-size:var(--spectrum-listitem-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-listitem-height:var(--spectrum-listitem-m-height,var(--spectrum-alias-item-height-m));--spectrum-listitem-icon-gap:var(--spectrum-listitem-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-listitem-padding-left:var(--spectrum-listitem-m-padding-left,var(--spectrum-alias-item-workflow-padding-left-m));--spectrum-listitem-padding-right:var(--spectrum-listitem-m-padding-right,var(--spectrum-alias-item-padding-m));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-listitem-m-thumbnail-padding-left,var(--spectrum-alias-item-padding-m));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}:host([dir=ltr][selectable]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-selectable-padding-right)}:host([dir=rtl][selectable]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-selectable-padding-right)}:host([dir=ltr][selectable]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selectable]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700);background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap))}:host(:focus){outline:none}:host sp-menu{display:block}
 `;
 export default styles;
 //# sourceMappingURL=menu.css.js.map

src/menu.css.ts

@@ -14,4 +14,6 @@ /*
 const styles = css`
-:host{--spectrum-listitem-divider-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-divider-padding:3px;--spectrum-listitem-focus-indicator-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-listitem-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-listitem-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-listitem-icon-gap:var(--spectrum-alias-item-workflow-icon-gap-m,var(--spectrum-global-dimension-size-100));--spectrum-listitem-padding-left:var(--spectrum-alias-item-workflow-padding-left-m);--spectrum-listitem-padding-right:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));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}::slotted(sp-menu){display:block}:host{background-color:var(--spectrum-alias-background-color-transparent,transparent);display:inline-block}:host(:focus){outline:none}:host sp-menu{display:block}
+:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-heading-text-size:var(--spectrum-global-dimension-font-size-50);--spectrum-listitem-heading-text-font-weight:400;--spectrum-listitem-heading-text-transform:uppercase;--spectrum-listitem-heading-letter-spacing:0.06em;--spectrum-listitem-heading-margin:var(--spectrum-global-dimension-size-75) 0 0 0;--spectrum-listitem-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-listitem-icon-margin-top:var(--spectrum-global-dimension-size-50);--spectrum-listitem-label-line-height:1.3;--spectrum-listitem-heading-line-height:var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium));--spectrum-listitem-divider-size:var(--spectrum-listitem-m-divider-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-divider-padding:var(--spectrum-listitem-m-divider-padding,3px);--spectrum-listitem-focus-indicator-size:var(--spectrum-listitem-m-focus-indicator-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-text-font-weight:var(--spectrum-listitem-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-listitem-text-size:var(--spectrum-listitem-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-listitem-height:var(--spectrum-listitem-m-height,var(--spectrum-alias-item-height-m));--spectrum-listitem-icon-gap:var(--spectrum-listitem-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-listitem-padding-left:var(--spectrum-listitem-m-padding-left,var(--spectrum-alias-item-workflow-padding-left-m));--spectrum-listitem-padding-right:var(--spectrum-listitem-m-padding-right,var(--spectrum-alias-item-padding-m));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-listitem-m-thumbnail-padding-left,var(--spectrum-alias-item-padding-m));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}:host([dir=ltr][selectable]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-selectable-padding-right)}:host([dir=rtl][selectable]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-selectable-padding-right)}:host([dir=ltr][selectable]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selectable]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700);background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap))}:host(:focus){outline:none}:host sp-menu{display:block}
 `;
 export default styles;

src/Menu.d.ts

@@ -1,2 +0,2 @@
-import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import { SpectrumElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import { MenuItem } from './MenuItem.js';
@@ -13,2 +13,3 @@ export interface MenuQueryRoleEventDetail {
     static get styles(): CSSResultArray;
+    selectable: boolean;
     menuItems: MenuItem[];
@@ -37,3 +38,3 @@ focusedItemIndex: number;
     render(): TemplateResult;
-    protected firstUpdated(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;
@@ -40,0 +41,0 @@ disconnectedCallback(): void;

src/Menu.js

@@ -12,3 +12,4 @@ /*
 */
-import { html, SpectrumElement, } from '@spectrum-web-components/base';
+import { __decorate } from "tslib";
+import { html, SpectrumElement, property, } from '@spectrum-web-components/base';
 import menuStyles from './menu.css.js';
@@ -23,2 +24,3 @@ /**
         super();
+        this.selectable = false;
         this.menuItems = [];
@@ -85,2 +87,12 @@ this.focusedItemIndex = 0;
     startListeningToKeyboard() {
+        const activeElement = this.getRootNode().activeElement;
+        if (activeElement !== this) {
+            this.focus();
+            if (activeElement && this.focusedItemIndex === 0) {
+                const offset = this.menuItems.indexOf(activeElement);
+                if (offset > 0) {
+                    this.focusMenuItemByOffset(offset);
+                }
+            }
+        }
         this.addEventListener('keydown', this.handleKeydown);
@@ -181,4 +193,7 @@ this.addEventListener('focusout', this.handleFocusout);
     }
-    firstUpdated() {
-        this.tabIndex = 0;
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        if (this.getAttribute('role') !== 'presentation') {
+            this.tabIndex = 0;
+        }
     }
@@ -209,2 +224,5 @@ connectedCallback() {
 }
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Menu.prototype, "selectable", void 0);
 //# sourceMappingURL=Menu.js.map

src/Menu.ts

@@ -18,2 +18,4 @@ /*
     TemplateResult,
+    property,
+    PropertyValues,
 } from '@spectrum-web-components/base';
@@ -38,2 +40,5 @@
 
+    @property({ type: Boolean, reflect: true })
+    public selectable = false;
+
     public menuItems = [] as MenuItem[];
@@ -94,2 +99,16 @@ public focusedItemIndex = 0;
     public startListeningToKeyboard(): void {
+        const activeElement = (this.getRootNode() as Document).activeElement as
+            | MenuItem
+            | Menu;
+        if (activeElement !== this) {
+            this.focus();
+            if (activeElement && this.focusedItemIndex === 0) {
+                const offset = this.menuItems.indexOf(
+                    activeElement as MenuItem
+                );
+                if (offset > 0) {
+                    this.focusMenuItemByOffset(offset);
+                }
+            }
+        }
         this.addEventListener('keydown', this.handleKeydown);
@@ -223,4 +242,7 @@ this.addEventListener('focusout', this.handleFocusout);
 
-    protected firstUpdated(): void {
-        this.tabIndex = 0;
+    protected firstUpdated(changed: PropertyValues): void {
+        super.firstUpdated(changed);
+        if (this.getAttribute('role') !== 'presentation') {
+            this.tabIndex = 0;
+        }
     }
@@ -227,0 +249,0 @@

src/MenuGroup.d.ts

 import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import '../sp-menu.js';
 /**
@@ -3,0 +4,0 @@ * Spectrum Menu Group Component

src/MenuGroup.js

@@ -13,2 +13,3 @@ /*
 import { html, SpectrumElement, } from '@spectrum-web-components/base';
+import '../sp-menu.js';
 import menuGroupStyles from './menu-group.css.js';
@@ -37,5 +38,5 @@ /**
             </span>
-            <div role="presentation">
+            <sp-menu role="presentation">
                 <slot></slot>
-            </div>
+            </sp-menu>
         `;
@@ -42,0 +43,0 @@ }

src/MenuGroup.ts

@@ -20,2 +20,3 @@ /*
 
+import '../sp-menu.js';
 import menuGroupStyles from './menu-group.css.js';
@@ -50,5 +51,5 @@
             </span>
-            <div role="presentation">
+            <sp-menu role="presentation">
                 <slot></slot>
-            </div>
+            </sp-menu>
         `;
@@ -55,0 +56,0 @@ }

src/MenuItem.d.ts

@@ -15,2 +15,3 @@ import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
     focused: boolean;
+    noWrap: boolean;
     /**
@@ -17,0 +18,0 @@ * Hide this getter from web-component-analyzer until

src/MenuItem.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, property, ifDefined, } from '@spectrum-web-components/base';
+import { html, property, } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icon/sp-icon.js';
@@ -28,2 +28,3 @@ import { Checkmark100Icon } from '@spectrum-web-components/icons-ui';
         this.focused = false;
+        this.noWrap = false;
     }
@@ -49,4 +50,3 @@ static get styles() {
                     id="selected"
-                    slot="icon"
-                    class="spectrum-UIIcon-Checkmark100"
+                    class="spectrum-UIIcon-Checkmark100 icon"
                 >
@@ -61,5 +61,3 @@ ${Checkmark100Icon()}
         return html `
-            <div id="button" class="button" aria-label=${ifDefined(this.label)}>
-                ${this.buttonContent}
-            </div>
+            ${this.buttonContent}
         `;
@@ -98,2 +96,12 @@ }
 ], MenuItem.prototype, "focused", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-wrap',
+        hasChanged() {
+            return false;
+        },
+    })
+], MenuItem.prototype, "noWrap", void 0);
 //# sourceMappingURL=MenuItem.js.map

src/MenuItem.ts

@@ -19,3 +19,2 @@ /*
     PropertyValues,
-    ifDefined,
 } from '@spectrum-web-components/base';
@@ -48,2 +47,12 @@
 
+    @property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-wrap',
+        hasChanged() {
+            return false;
+        },
+    })
+    public noWrap = false;
+
     /**
@@ -66,4 +75,3 @@ * Hide this getter from web-component-analyzer until
                     id="selected"
-                    slot="icon"
-                    class="spectrum-UIIcon-Checkmark100"
+                    class="spectrum-UIIcon-Checkmark100 icon"
                 >
@@ -79,5 +87,3 @@ ${Checkmark100Icon()}
         return html`
-            <div id="button" class="button" aria-label=${ifDefined(this.label)}>
-                ${this.buttonContent}
-            </div>
+            ${this.buttonContent}
         `;
@@ -84,0 +90,0 @@ }

src/spectrum-config.js

@@ -29,4 +29,19 @@ /*
             },
+            attributes: [
+                {
+                    selector: '.is-selectable',
+                    type: 'boolean',
+                    name: 'selectable',
+                },
+            ],
+            slots: [
+                {
+                    selector: '.spectrum-Menu-item',
+                    contents: 'sp-menu-item',
+                },
+            ],
             exclude: [
-                /\.spectrum-Menu-item/,
+                /^\.spectrum-Menu-item/,
+                /\.spectrum-Menu-item\s/,
+                /\]\s\.spectrum-Menu-item/,
                 /\.spectrum-Menu-divider/,
@@ -42,2 +57,14 @@ /\.spectrum-Menu-sectionHeading/,
                 },
+                {
+                    replacement:
+                        ':host([dir="ltr"][selectable]) ::slotted(sp-menu-item[selected])',
+                    selector:
+                        '.spectrum-Menu[dir=ltr].is-selectable .spectrum-Menu-item.is-selected',
+                },
+                {
+                    replacement:
+                        ':host([dir="rtl"][selectable]) ::slotted(sp-menu-item[selected])',
+                    selector:
+                        '.spectrum-Menu[dir=rtl].is-selectable .spectrum-Menu-item.is-selected',
+                },
             ],
@@ -49,3 +76,2 @@ },
                 selector: '.spectrum-Menu-item',
-                shadowSelector: '#button',
             },
@@ -60,9 +86,9 @@ attributes: [
                     type: 'boolean',
-                    selector: '.is-selected',
-                    name: 'selected',
+                    selector: '.is-focused',
+                    name: 'focused',
                 },
                 {
                     type: 'boolean',
-                    selector: '.is-focused',
-                    name: 'focused',
+                    selector: '.is-selected',
+                    name: 'selected',
                 },
@@ -80,2 +106,12 @@ ],
             ],
+            classes: [
+                {
+                    selector: '.spectrum-Menu-itemIcon',
+                    name: 'icon',
+                },
+                {
+                    selector: '.spectrum-Menu-chevron',
+                    name: 'chevron',
+                },
+            ],
             slots: [
@@ -87,2 +123,9 @@ {
             ],
+            exclude: [/\.spectrum-Menu(?!-[itemLabel|item|checkmark|chevron])/],
+            complexSelectors: [
+                {
+                    replacement: ':host([no-wrap]) #label',
+                    selector: '.spectrum-Menu-itemLabel--wrapping',
+                },
+            ],
         },
@@ -94,9 +137,3 @@ {
             },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: '.spectrum-Menu-divider',
-                    name: 'divider',
-                },
-            ],
+            exclude: [/\.spectrum-Menu(?!-divider)/],
         },
@@ -103,0 +140,0 @@ ],

src/spectrum-menu-divider.css.js

@@ -14,9 +14,5 @@ /*
 const styles = css `
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-listitem-padding-right) - 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-listitem-icon-gap)}: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-listitem-icon-gap)}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-global-dimension-size-85);padding:0;border:none}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item.focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item:focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item.focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item:focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host{background-color:var(--spectrum-alias-border-color-extralight,var(--spectrum-global-color-gray-100))}
+:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-listitem-padding-y);padding:0;border:none;background-color:var(--spectrum-listitem-m-divider-color,var(--spectrum-alias-border-color-extralight))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu-divider.css.js.map

src/spectrum-menu-divider.css.ts

@@ -14,8 +14,4 @@ /*
 const styles = css`
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr]) .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=ltr]) .spectrum-Menu-item{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) .spectrum-Menu-item{border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=ltr]) .spectrum-Menu-item.is-selected{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl]) .spectrum-Menu-item.is-selected{padding-left:calc(var(--spectrum-listitem-padding-right) - 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-listitem-icon-gap)}: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-listitem-icon-gap)}:host([dir=ltr]) .spectrum-Menu-checkmark,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-checkmark,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-global-dimension-size-85);padding:0;border:none}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item.focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) .spectrum-Menu-item.focus-visible,:host([dir=ltr]) .spectrum-Menu-item.is-focused,:host([dir=ltr]) .spectrum-Menu-item:focus-visible{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item.focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) .spectrum-Menu-item.focus-visible,:host([dir=rtl]) .spectrum-Menu-item.is-focused,:host([dir=rtl]) .spectrum-Menu-item:focus-visible{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host{background-color:var(--spectrum-alias-border-color-extralight,var(--spectrum-global-color-gray-100))}
+:host{box-sizing:initial;overflow:visible;height:var(--spectrum-listitem-divider-size);margin:calc(var(--spectrum-listitem-divider-padding)/2) var(--spectrum-listitem-padding-y);padding:0;border:none;background-color:var(--spectrum-listitem-m-divider-color,var(--spectrum-alias-border-color-extralight))}
 `;
 export default styles;

src/spectrum-menu-item.css.js

@@ -14,10 +14,8 @@ /*
 const styles = css `
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1}:host([dir=ltr]) #button{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-listitem-focus-indicator-size) 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-listitem-padding-right) var(--spectrum-global-dimension-size-85) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block}.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-listitem-icon-gap)}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
-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-listitem-icon-gap))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}#button{background-color:var(--spectrum-alias-background-color-transparent,transparent);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button:focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button:focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button.focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button:focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button #selected{color:var(--spectrum-alias-icon-color-selected,var(--spectrum-global-color-blue-500))}#button:active,.is-active{background-color:var(--spectrum-alias-background-color-hover-overlay)}:host([disabled]) #button{background-color:var(--spectrum-alias-background-color-transparent,transparent);background-image:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500));cursor:default}
+#selected{transform:scale(1);opacity:1}:host([dir=ltr]){border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-right) var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #selected{display:block}.icon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
+var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-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

@@ -14,9 +14,7 @@ /*
 const styles = css`
-: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-listitem-icon-gap))}: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-listitem-icon-gap))}:host([dir=ltr][selected]) .spectrum-Menu.is-selectable #button{padding-right:calc(var(--spectrum-listitem-padding-right) - 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-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}#selected{transform:scale(1);opacity:1}:host([dir=ltr]) #button{border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]) #button{border-right:var(--spectrum-listitem-focus-indicator-size) 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-listitem-padding-right) var(--spectrum-global-dimension-size-85) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}#button:focus{outline:none}:host([dir=ltr][selected]) #button{padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]) #button{padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([selected]) #button #selected{display:block}.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-listitem-icon-gap)}:host([dir=rtl]) #button .spectrum-Menu-itemIcon+#label,:host([dir=rtl]) #button slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.spectrum-Menu-itemIcon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
-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-listitem-icon-gap))}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .spectrum-Menu-chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .spectrum-Menu-chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-global-dimension-size-50)}:host([dir=rtl]) .spectrum-Menu-chevron{transform:matrix(-1,0,0,1,0,0)}#button{background-color:var(--spectrum-alias-background-color-transparent,transparent);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button.focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=ltr]) #button.focus-visible,:host([dir=ltr]) #button:focus-visible,:host([dir=ltr][focused]) #button{border-left-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button.focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}:host([dir=rtl]) #button.focus-visible,:host([dir=rtl]) #button:focus-visible,:host([dir=rtl][focused]) #button{border-right-color:var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button.focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#button.focus-visible,#button.is-highlighted,#button.is-open,#button:focus,#button:focus-visible,#button:hover,:host([focused]) #button{background-color:var(--spectrum-alias-background-color-hover-overlay);color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([selected]) #button #selected{color:var(--spectrum-alias-icon-color-selected,var(--spectrum-global-color-blue-500))}#button:active,.is-active{background-color:var(--spectrum-alias-background-color-hover-overlay)}:host([disabled]) #button{background-color:var(--spectrum-alias-background-color-transparent,transparent);background-image:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500));cursor:default}
+#selected{transform:scale(1);opacity:1}:host([dir=ltr]){border-left:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-focus-indicator-size) solid transparent}:host{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;padding:var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-right) var(--spectrum-listitem-padding-y) var(--spectrum-listitem-padding-left);margin:0;min-height:var(--spectrum-listitem-height);font-size:var(--spectrum-listitem-text-size);font-weight:var(--spectrum-listitem-text-font-weight);font-style:normal;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([selected]) #selected{display:block}.icon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
+var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}
 `;
 export default styles;

src/spectrum-menu-sectionHeading.css.js

@@ -14,5 +14,5 @@ /*
 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-body-text-line-height,var(--spectrum-global-font-line-height-medium));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-global-color-gray-700)}
+.header{display:block;margin:var(--spectrum-listitem-heading-margin);padding:var(--spectrum-listitem-heading-padding);font-size:var(--spectrum-listitem-heading-text-size);font-weight:var(--spectrum-listitem-heading-text-font-weight);line-height:var(--spectrum-listitem-heading-line-height);text-transform:var(--spectrum-listitem-heading-text-transform);letter-spacing:var(--spectrum-listitem-heading-letter-spacing);color:var(--spectrum-listheading-text-color)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu-sectionHeading.css.js.map

src/spectrum-menu-sectionHeading.css.ts

@@ -14,4 +14,4 @@ /*
 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-body-text-line-height,var(--spectrum-global-font-line-height-medium));text-transform:uppercase;letter-spacing:.06em;color:var(--spectrum-global-color-gray-700)}
+.header{display:block;margin:var(--spectrum-listitem-heading-margin);padding:var(--spectrum-listitem-heading-padding);font-size:var(--spectrum-listitem-heading-text-size);font-weight:var(--spectrum-listitem-heading-text-font-weight);line-height:var(--spectrum-listitem-heading-line-height);text-transform:var(--spectrum-listitem-heading-text-transform);letter-spacing:var(--spectrum-listitem-heading-letter-spacing);color:var(--spectrum-listheading-text-color)}
 `;
 export default styles;

src/spectrum-menu.css.js

@@ -14,5 +14,7 @@ /*
 const styles = css `
-:host{--spectrum-listitem-divider-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-divider-padding:3px;--spectrum-listitem-focus-indicator-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-listitem-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-listitem-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-listitem-icon-gap:var(--spectrum-alias-item-workflow-icon-gap-m,var(--spectrum-global-dimension-size-100));--spectrum-listitem-padding-left:var(--spectrum-alias-item-workflow-padding-left-m);--spectrum-listitem-padding-right:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));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}::slotted(sp-menu){display:block}:host{background-color:var(--spectrum-alias-background-color-transparent,transparent)}
+:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-heading-text-size:var(--spectrum-global-dimension-font-size-50);--spectrum-listitem-heading-text-font-weight:400;--spectrum-listitem-heading-text-transform:uppercase;--spectrum-listitem-heading-letter-spacing:0.06em;--spectrum-listitem-heading-margin:var(--spectrum-global-dimension-size-75) 0 0 0;--spectrum-listitem-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-listitem-icon-margin-top:var(--spectrum-global-dimension-size-50);--spectrum-listitem-label-line-height:1.3;--spectrum-listitem-heading-line-height:var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium));--spectrum-listitem-divider-size:var(--spectrum-listitem-m-divider-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-divider-padding:var(--spectrum-listitem-m-divider-padding,3px);--spectrum-listitem-focus-indicator-size:var(--spectrum-listitem-m-focus-indicator-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-text-font-weight:var(--spectrum-listitem-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-listitem-text-size:var(--spectrum-listitem-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-listitem-height:var(--spectrum-listitem-m-height,var(--spectrum-alias-item-height-m));--spectrum-listitem-icon-gap:var(--spectrum-listitem-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-listitem-padding-left:var(--spectrum-listitem-m-padding-left,var(--spectrum-alias-item-workflow-padding-left-m));--spectrum-listitem-padding-right:var(--spectrum-listitem-m-padding-right,var(--spectrum-alias-item-padding-m));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-listitem-m-thumbnail-padding-left,var(--spectrum-alias-item-padding-m));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}:host([dir=ltr][selectable]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-selectable-padding-right)}:host([dir=rtl][selectable]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-selectable-padding-right)}:host([dir=ltr][selectable]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selectable]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700);background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-menu.css.js.map

src/spectrum-menu.css.ts

@@ -14,4 +14,6 @@ /*
 const styles = css`
-:host{--spectrum-listitem-divider-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-divider-padding:3px;--spectrum-listitem-focus-indicator-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-listitem-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-listitem-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-listitem-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-listitem-icon-gap:var(--spectrum-alias-item-workflow-icon-gap-m,var(--spectrum-global-dimension-size-100));--spectrum-listitem-padding-left:var(--spectrum-alias-item-workflow-padding-left-m);--spectrum-listitem-padding-right:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-alias-item-padding-m,var(--spectrum-global-dimension-size-150));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}::slotted(sp-menu){display:block}:host{background-color:var(--spectrum-alias-background-color-transparent,transparent)}
+:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-heading-text-size:var(--spectrum-global-dimension-font-size-50);--spectrum-listitem-heading-text-font-weight:400;--spectrum-listitem-heading-text-transform:uppercase;--spectrum-listitem-heading-letter-spacing:0.06em;--spectrum-listitem-heading-margin:var(--spectrum-global-dimension-size-75) 0 0 0;--spectrum-listitem-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-listitem-icon-margin-top:var(--spectrum-global-dimension-size-50);--spectrum-listitem-label-line-height:1.3;--spectrum-listitem-heading-line-height:var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium));--spectrum-listitem-divider-size:var(--spectrum-listitem-m-divider-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-divider-padding:var(--spectrum-listitem-m-divider-padding,3px);--spectrum-listitem-focus-indicator-size:var(--spectrum-listitem-m-focus-indicator-size,var(--spectrum-alias-border-size-thick));--spectrum-listitem-text-font-weight:var(--spectrum-listitem-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-listitem-text-size:var(--spectrum-listitem-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-listitem-height:var(--spectrum-listitem-m-height,var(--spectrum-alias-item-height-m));--spectrum-listitem-icon-gap:var(--spectrum-listitem-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-listitem-padding-left:var(--spectrum-listitem-m-padding-left,var(--spectrum-alias-item-workflow-padding-left-m));--spectrum-listitem-padding-right:var(--spectrum-listitem-m-padding-right,var(--spectrum-alias-item-padding-m));--spectrum-listitem-thumbnail-padding-left:var(--spectrum-listitem-m-thumbnail-padding-left,var(--spectrum-alias-item-padding-m));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}:host([dir=ltr][selectable]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-selectable-padding-right)}:host([dir=rtl][selectable]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-selectable-padding-right)}:host([dir=ltr][selectable]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([dir=rtl][selectable]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-padding-right) - var(--spectrum-popover-border-size,
+var(--spectrum-alias-border-size-thin)))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700);background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent))}
 `;
 export default styles;

src/spectrum-vars.json

 {
   "custom-properties": {
-    "--spectrum-alias-border-size-thick": "var(--spectrum-global-dimension-static-size-25)",
-    "--spectrum-alias-body-text-font-weight": "var(--spectrum-global-font-weight-regular)",
-    "--spectrum-alias-item-text-size-m": "var(--spectrum-global-dimension-font-size-100)",
-    "--spectrum-alias-item-height-m": "var(--spectrum-global-dimension-size-400)",
-    "--spectrum-alias-item-workflow-icon-gap-m": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-alias-item-workflow-padding-left-m": "undefined",
-    "--spectrum-alias-item-padding-m": "var(--spectrum-global-dimension-size-150)",
+    "--spectrum-alias-body-text-line-height": "var(--spectrum-global-font-line-height-medium)",
+    "--spectrum-listitem-m-divider-size": "var(--spectrum-alias-border-size-thick)",
+    "--spectrum-listitem-m-divider-padding": "3px",
+    "--spectrum-listitem-m-focus-indicator-size": "var(--spectrum-alias-border-size-thick)",
+    "--spectrum-listitem-m-text-font-weight": "var(--spectrum-alias-body-text-font-weight)",
+    "--spectrum-listitem-m-text-size": "var(--spectrum-alias-item-text-size-m)",
+    "--spectrum-listitem-m-height": "var(--spectrum-alias-item-height-m)",
+    "--spectrum-listitem-m-icon-gap": "var(--spectrum-alias-item-workflow-icon-gap-m)",
+    "--spectrum-listitem-m-padding-left": "var(--spectrum-alias-item-workflow-padding-left-m)",
+    "--spectrum-listitem-m-padding-right": "var(--spectrum-alias-item-padding-m)",
+    "--spectrum-listitem-m-thumbnail-padding-left": "var(--spectrum-alias-item-padding-m)",
     "--spectrum-popover-padding-y": "var(--spectrum-global-dimension-size-50)",
+    "--spectrum-popover-border-size": "var(--spectrum-alias-border-size-thin)",
     "--spectrum-icon-checkmark-medium-width": "undefined",
-    "--spectrum-popover-border-size": "var(--spectrum-alias-border-size-thin)",
     "--spectrum-alias-workflow-icon-size-m": "var(--spectrum-global-dimension-size-225)",
-    "--spectrum-alias-body-text-line-height": "var(--spectrum-global-font-line-height-medium)",
-    "--spectrum-alias-background-color-transparent": "transparent",
-    "--spectrum-alias-text-color": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-alias-border-color-focus": "var(--spectrum-global-color-blue-400)",
-    "--spectrum-alias-background-color-hover-overlay": "undefined",
-    "--spectrum-alias-icon-color-selected": "var(--spectrum-global-color-blue-500)",
-    "--spectrum-alias-text-color-disabled": "var(--spectrum-global-color-gray-500)",
-    "--spectrum-alias-border-color-extralight": "var(--spectrum-global-color-gray-100)"
+    "--spectrum-listitem-m-background-color": "var(--spectrum-alias-background-color-transparent)",
+    "--spectrum-listitem-m-text-color": "var(--spectrum-alias-text-color)",
+    "--spectrum-listitem-m-focus-indicator-color": "var(--spectrum-alias-border-color-focus)",
+    "--spectrum-listitem-m-background-color-key-focus": "var(--spectrum-alias-background-color-hover-overlay)",
+    "--spectrum-listitem-m-text-color-key-focus": "var(--spectrum-alias-text-color)",
+    "--spectrum-listitem-m-background-color-hover": "var(--spectrum-alias-background-color-hover-overlay)",
+    "--spectrum-listitem-m-text-color-hover": "var(--spectrum-alias-text-color)",
+    "--spectrum-listitem-m-text-color-selected": "var(--spectrum-alias-text-color)",
+    "--spectrum-listitem-m-icon-color-selected": "var(--spectrum-alias-icon-color-selected)",
+    "--spectrum-listitem-m-background-color-down": "var(--spectrum-alias-background-color-hover-overlay)",
+    "--spectrum-listitem-m-background-color-disabled": "var(--spectrum-alias-background-color-transparent)",
+    "--spectrum-listitem-m-text-color-disabled": "var(--spectrum-alias-text-color-disabled)",
+    "--spectrum-listitem-m-divider-color": "var(--spectrum-alias-border-color-extralight)"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

204268

decreased by-4.26%

Lines of code

2444

decreased by-0.37%

Dependency changes

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

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

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

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

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

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

• Updated@spectrum-web-components/action-button@^0.3.0

• Updated@spectrum-web-components/base@^0.3.3

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

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

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