@spectrum-web-components/menu 0.41.0 → 0.41.2

package/src/spectrum-menu.css.js

@@ -1,226 +1,4 @@
 "use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
-:host{--spectrum-menu-item-min-height:var(--spectrum-component-height-100);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-100);--spectrum-menu-item-label-text-to-visual:var(
---spectrum-text-to-visual-100
-);--spectrum-menu-item-label-inline-edge-to-content:var(
---spectrum-component-edge-to-text-100
-);--spectrum-menu-item-top-edge-to-text:var(
---spectrum-component-top-to-text-100
-);--spectrum-menu-item-bottom-edge-to-text:var(
---spectrum-component-bottom-to-text-100
-);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-100);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-min-width:var(
---spectrum-component-height-100
-);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(
---spectrum-menu-item-selectable-edge-to-text-not-selected-medium
-);--spectrum-menu-item-checkmark-height:var(
---spectrum-menu-item-checkmark-height-medium
-);--spectrum-menu-item-checkmark-width:var(
---spectrum-menu-item-checkmark-width-medium
-);--spectrum-menu-item-top-to-checkmark:var(
---spectrum-menu-item-top-to-selected-icon-medium
-);--spectrum-menu-item-top-to-action:var(--spectrum-spacing-50);--spectrum-menu-item-top-to-checkbox:var(--spectrum-spacing-50);--spectrum-menu-item-label-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-label-line-height-cjk:var(
---spectrum-cjk-line-height-100
-);--spectrum-menu-item-label-to-description-spacing:var(
---spectrum-menu-item-label-to-description
-);--spectrum-menu-item-focus-indicator-width:var(
---spectrum-border-width-200
-);--spectrum-menu-item-focus-indicator-color:var(--spectrum-blue-800);--spectrum-menu-item-label-to-value-area-min-spacing:var(
---spectrum-spacing-100
-);--spectrum-menu-item-label-content-color-default:var(
---spectrum-neutral-content-color-default
-);--spectrum-menu-item-label-content-color-hover:var(
---spectrum-neutral-content-color-hover
-);--spectrum-menu-item-label-content-color-down:var(
---spectrum-neutral-content-color-down
-);--spectrum-menu-item-label-content-color-focus:var(
---spectrum-neutral-content-color-key-focus
-);--spectrum-menu-item-label-icon-color-default:var(
---spectrum-neutral-content-color-default
-);--spectrum-menu-item-label-icon-color-hover:var(
---spectrum-neutral-content-color-hover
-);--spectrum-menu-item-label-icon-color-down:var(
---spectrum-neutral-content-color-down
-);--spectrum-menu-item-label-icon-color-focus:var(
---spectrum-neutral-content-color-key-focus
-);--spectrum-menu-item-label-content-color-disabled:var(
---spectrum-disabled-content-color
-);--spectrum-menu-item-label-icon-color-disabled:var(
---spectrum-disabled-content-color
-);--spectrum-menu-item-description-line-height:var(
---spectrum-line-height-100
-);--spectrum-menu-item-description-line-height-cjk:var(
---spectrum-cjk-line-height-100
-);--spectrum-menu-item-description-color-default:var(
---spectrum-neutral-subdued-content-color-default
-);--spectrum-menu-item-description-color-hover:var(
---spectrum-neutral-subdued-content-color-hover
-);--spectrum-menu-item-description-color-down:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-menu-item-description-color-focus:var(
---spectrum-neutral-subdued-content-color-key-focus
-);--spectrum-menu-item-description-color-disabled:var(
---spectrum-disabled-content-color
-);--spectrum-menu-section-header-line-height:var(--spectrum-line-height-100);--spectrum-menu-section-header-line-height-cjk:var(
---spectrum-cjk-line-height-100
-);--spectrum-menu-section-header-font-weight:var(
---spectrum-bold-font-weight
-);--spectrum-menu-section-header-color:var(--spectrum-gray-900);--spectrum-menu-collapsible-icon-color:var(--spectrum-gray-900);--spectrum-menu-checkmark-icon-color-default:var(
---spectrum-accent-color-900
-);--spectrum-menu-checkmark-icon-color-hover:var(
---spectrum-accent-color-1000
-);--spectrum-menu-checkmark-icon-color-down:var(
---spectrum-accent-color-1100
-);--spectrum-menu-checkmark-icon-color-focus:var(
---spectrum-accent-color-1000
-);--spectrum-menu-drillin-icon-color-default:var(
---spectrum-neutral-subdued-content-color-default
-);--spectrum-menu-drillin-icon-color-hover:var(
---spectrum-neutral-subdued-content-color-hover
-);--spectrum-menu-drillin-icon-color-down:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-menu-drillin-icon-color-focus:var(
---spectrum-neutral-subdued-content-color-key-focus
-);--spectrum-menu-item-value-color-default:var(
---spectrum-neutral-subdued-content-color-default
-);--spectrum-menu-item-value-color-hover:var(
---spectrum-neutral-subdued-content-color-hover
-);--spectrum-menu-item-value-color-down:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-menu-item-value-color-focus:var(
---spectrum-neutral-subdued-content-color-key-focus
-);--spectrum-menu-checkmark-display-hidden:none;--spectrum-menu-checkmark-display-shown:block;--spectrum-menu-checkmark-display:var(
---spectrum-menu-checkmark-display-shown
-);--spectrum-menu-back-icon-margin:var(
---spectrum-navigational-indicator-top-to-back-icon-medium
-);--spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width));--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))}:host([size=s]){--spectrum-menu-item-min-height:var(--spectrum-component-height-75);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-75);--spectrum-menu-item-label-text-to-visual:var(
---spectrum-text-to-visual-75
-);--spectrum-menu-item-label-inline-edge-to-content:var(
---spectrum-component-edge-to-text-75
-);--spectrum-menu-item-top-edge-to-text:var(
---spectrum-component-top-to-text-75
-);--spectrum-menu-item-bottom-edge-to-text:var(
---spectrum-component-bottom-to-text-75
-);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-75);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-50);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-min-width:var(
---spectrum-component-height-75
-);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(
---spectrum-menu-item-selectable-edge-to-text-not-selected-small
-);--spectrum-menu-item-checkmark-height:var(
---spectrum-menu-item-checkmark-height-small
-);--spectrum-menu-item-checkmark-width:var(
---spectrum-menu-item-checkmark-width-small
-);--spectrum-menu-item-top-to-checkmark:var(
---spectrum-menu-item-top-to-selected-icon-small
-);--spectrum-menu-back-icon-margin:var(
---spectrum-navigational-indicator-top-to-back-icon-small
-)}:host([size=l]){--spectrum-menu-item-min-height:var(--spectrum-component-height-200);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-200);--spectrum-menu-item-label-text-to-visual:var(
---spectrum-text-to-visual-200
-);--spectrum-menu-item-label-inline-edge-to-content:var(
---spectrum-component-edge-to-text-200
-);--spectrum-menu-item-top-edge-to-text:var(
---spectrum-component-top-to-text-200
-);--spectrum-menu-item-bottom-edge-to-text:var(
---spectrum-component-bottom-to-text-200
-);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-200);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-min-width:var(
---spectrum-component-height-200
-);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(
---spectrum-menu-item-selectable-edge-to-text-not-selected-large
-);--spectrum-menu-item-checkmark-height:var(
---spectrum-menu-item-checkmark-height-large
-);--spectrum-menu-item-checkmark-width:var(
---spectrum-menu-item-checkmark-width-large
-);--spectrum-menu-item-top-to-checkmark:var(
---spectrum-menu-item-top-to-selected-icon-large
-);--spectrum-menu-back-icon-margin:var(
---spectrum-navigational-indicator-top-to-back-icon-large
-)}:host([size=xl]){--spectrum-menu-item-min-height:var(--spectrum-component-height-300);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-300);--spectrum-menu-item-label-text-to-visual:var(
---spectrum-text-to-visual-300
-);--spectrum-menu-item-label-inline-edge-to-content:var(
---spectrum-component-edge-to-text-300
-);--spectrum-menu-item-top-edge-to-text:var(
---spectrum-component-top-to-text-300
-);--spectrum-menu-item-bottom-edge-to-text:var(
---spectrum-component-bottom-to-text-300
-);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-300);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-300);--spectrum-menu-section-header-min-width:var(
---spectrum-component-height-300
-);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(
---spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large
-);--spectrum-menu-item-checkmark-height:var(
---spectrum-menu-item-checkmark-height-extra-large
-);--spectrum-menu-item-checkmark-width:var(
---spectrum-menu-item-checkmark-width-extra-large
-);--spectrum-menu-item-top-to-checkmark:var(
---spectrum-menu-item-top-to-selected-icon-extra-large
-);--spectrum-menu-back-icon-margin:var(
---spectrum-navigational-indicator-top-to-back-icon-extra-large
-)}@media (forced-colors:active){:host{--highcontrast-menu-item-background-color-default:ButtonFace;--highcontrast-menu-item-color-default:ButtonText;--highcontrast-menu-item-background-color-focus:Highlight;--highcontrast-menu-item-color-focus:HighlightText;--highcontrast-menu-checkmark-icon-color-default:Highlight;--highcontrast-menu-item-color-disabled:GrayText;--highcontrast-menu-item-focus-indicator-color:Highlight;--highcontrast-menu-item-selected-background-color:Highlight;--highcontrast-menu-item-selected-color:HighlightText}@supports (color:SelectedItem){:host{--highcontrast-menu-item-selected-background-color:SelectedItem;--highcontrast-menu-item-selected-color:SelectedItemText}}}:host{box-sizing:border-box;display:inline-block;inline-size:var(--mod-menu-inline-size,auto);list-style-type:none;margin:0;overflow:auto;padding:0}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-menu-item-label-line-height:var(
---mod-menu-item-label-line-height-cjk,var(--spectrum-menu-item-label-line-height-cjk)
-);--spectrum-menu-item-description-line-height:var(
---mod-menu-item-description-line-height-cjk,var(--spectrum-menu-item-description-line-height-cjk)
-);--spectrum-menu-section-header-line-height:var(
---mod-menu-section-header-line-height-cjk,var(--spectrum-menu-section-header-line-height-cjk)
-)}:host([selects]) ::slotted(sp-menu-item){--spectrum-menu-checkmark-display:var(
---spectrum-menu-checkmark-display-hidden
-);padding-inline-start:var(
---mod-menu-item-selectable-edge-to-text-not-selected,var(--spectrum-menu-item-selectable-edge-to-text-not-selected)
-)}:host([selects]) ::slotted(sp-menu-item[selected]){--spectrum-menu-checkmark-display:var(
---spectrum-menu-checkmark-display-shown
-);padding-inline-start:var(
---mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)
-)}li:not(::slotted(sp-menu-item),.menu-divider){box-sizing:border-box;display:block;margin:0;padding:0;position:relative}.spectrum-Menu-back.focus-visible{box-shadow:inset calc(var(
---mod-menu-item-focus-indicator-width,
-var(--spectrum-menu-item-focus-indicator-width)
-)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(
---highcontrast-menu-item-focus-indicator-color,var(
---mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)
-)
-)}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(
---mod-menu-item-focus-indicator-width,
-var(--spectrum-menu-item-focus-indicator-width)
-)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(
---highcontrast-menu-item-focus-indicator-color,var(
---mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)
-)
-)}.spectrum-Menu-sectionHeading{color:var(
---highcontrast-menu-item-color-default,var(
---mod-menu-section-header-color,var(--spectrum-menu-section-header-color)
-)
-);display:block;font-size:var(
---mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)
-);font-weight:var(
---mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)
-);grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;line-height:var(
---mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)
-);min-inline-size:var(
---mod-menu-section-header-min-width,var(--spectrum-menu-section-header-min-width)
-);padding-block-end:var(
---mod-menu-section-header-bottom-edge-to-text,var(
---mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)
-)
-);padding-block-start:var(
---mod-menu-section-header-top-edge-to-text,var(
---mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)
-)
-);padding-inline:var(
---mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)
-)}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(
---mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)
-)}.spectrum-Menu-back .spectrum-Menu-sectionHeading{padding:0}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}.spectrum-Menu-backButton.focus-visible{outline:var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(
---highcontrast-menu-item-color-default,var(
---mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)
-)
-);display:block;font-size:var(
---mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)
-);font-weight:var(
---mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)
-);line-height:var(
---mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)
-)}.spectrum-Menu-backIcon{margin-block:var(
---mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)
-);margin-inline:var(
---mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)
-);fill:var(
---highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)
-);color:var(
---highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)
-)}
+    :host{--spectrum-menu-item-min-height:var(--spectrum-component-height-100);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-100);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-100);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-100);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-100);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-100);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-100);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-medium);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-medium);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-medium);--spectrum-menu-item-top-to-action:var(--spectrum-spacing-50);--spectrum-menu-item-top-to-checkbox:var(--spectrum-spacing-50);--spectrum-menu-item-label-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-label-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-item-label-to-description-spacing:var(--spectrum-menu-item-label-to-description);--spectrum-menu-item-focus-indicator-width:var(--spectrum-border-width-200);--spectrum-menu-item-focus-indicator-color:var(--spectrum-blue-800);--spectrum-menu-item-label-to-value-area-min-spacing:var(--spectrum-spacing-100);--spectrum-menu-item-label-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-menu-item-label-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-menu-item-label-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-menu-item-label-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-menu-item-label-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-menu-item-label-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-menu-item-label-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-menu-item-label-icon-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-menu-item-label-content-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-item-label-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-item-description-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-description-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-item-description-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-item-description-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-item-description-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-item-description-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-item-description-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-section-header-line-height:var(--spectrum-line-height-100);--spectrum-menu-section-header-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-section-header-font-weight:var(--spectrum-bold-font-weight);--spectrum-menu-section-header-color:var(--spectrum-gray-900);--spectrum-menu-collapsible-icon-color:var(--spectrum-gray-900);--spectrum-menu-checkmark-icon-color-default:var(--spectrum-accent-color-900);--spectrum-menu-checkmark-icon-color-hover:var(--spectrum-accent-color-1000);--spectrum-menu-checkmark-icon-color-down:var(--spectrum-accent-color-1100);--spectrum-menu-checkmark-icon-color-focus:var(--spectrum-accent-color-1000);--spectrum-menu-drillin-icon-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-drillin-icon-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-drillin-icon-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-drillin-icon-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-item-value-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-item-value-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-item-value-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-item-value-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-checkmark-display-hidden:none;--spectrum-menu-checkmark-display-shown:block;--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-shown);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-medium);--spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width));--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))}:host([size=s]){--spectrum-menu-item-min-height:var(--spectrum-component-height-75);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-75);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-75);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-75);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-75);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-50);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-75);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-small);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-small);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-small);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-small)}:host([size=l]){--spectrum-menu-item-min-height:var(--spectrum-component-height-200);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-200);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-200);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-200);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-200);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-200);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-200);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-large);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-large);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-large);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-large)}:host([size=xl]){--spectrum-menu-item-min-height:var(--spectrum-component-height-300);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-300);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-300);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-300);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-300);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-300);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-300);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-300);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-extra-large);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-extra-large);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-extra-large);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-extra-large)}@media (forced-colors:active){:host{--highcontrast-menu-item-background-color-default:ButtonFace;--highcontrast-menu-item-color-default:ButtonText;--highcontrast-menu-item-background-color-focus:Highlight;--highcontrast-menu-item-color-focus:HighlightText;--highcontrast-menu-checkmark-icon-color-default:Highlight;--highcontrast-menu-item-color-disabled:GrayText;--highcontrast-menu-item-focus-indicator-color:Highlight;--highcontrast-menu-item-selected-background-color:Highlight;--highcontrast-menu-item-selected-color:HighlightText}@supports (color:SelectedItem){:host{--highcontrast-menu-item-selected-background-color:SelectedItem;--highcontrast-menu-item-selected-color:SelectedItemText}}}:host{inline-size:var(--mod-menu-inline-size,auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(zh),:host:lang(ko){--spectrum-menu-item-label-line-height:var(--mod-menu-item-label-line-height-cjk,var(--spectrum-menu-item-label-line-height-cjk));--spectrum-menu-item-description-line-height:var(--mod-menu-item-description-line-height-cjk,var(--spectrum-menu-item-description-line-height-cjk));--spectrum-menu-section-header-line-height:var(--mod-menu-section-header-line-height-cjk,var(--spectrum-menu-section-header-line-height-cjk))}:host([selects]) ::slotted(sp-menu-item){--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-hidden);padding-inline-start:var(--mod-menu-item-selectable-edge-to-text-not-selected,var(--spectrum-menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(sp-menu-item[selected]){--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-shown);padding-inline-start:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-section-header-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));min-inline-size:var(--mod-menu-section-header-min-width,var(--spectrum-menu-section-header-min-width));padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-back .spectrum-Menu-sectionHeading{padding:0}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}
 `;export default t;
 //# sourceMappingURL=spectrum-menu.css.js.map

package/src/spectrum-menu.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-menu.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-item-min-height:var(--spectrum-component-height-100);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-100);--spectrum-menu-item-label-text-to-visual:var(\n--spectrum-text-to-visual-100\n);--spectrum-menu-item-label-inline-edge-to-content:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-menu-item-top-edge-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-menu-item-bottom-edge-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-100);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-min-width:var(\n--spectrum-component-height-100\n);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(\n--spectrum-menu-item-selectable-edge-to-text-not-selected-medium\n);--spectrum-menu-item-checkmark-height:var(\n--spectrum-menu-item-checkmark-height-medium\n);--spectrum-menu-item-checkmark-width:var(\n--spectrum-menu-item-checkmark-width-medium\n);--spectrum-menu-item-top-to-checkmark:var(\n--spectrum-menu-item-top-to-selected-icon-medium\n);--spectrum-menu-item-top-to-action:var(--spectrum-spacing-50);--spectrum-menu-item-top-to-checkbox:var(--spectrum-spacing-50);--spectrum-menu-item-label-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-label-line-height-cjk:var(\n--spectrum-cjk-line-height-100\n);--spectrum-menu-item-label-to-description-spacing:var(\n--spectrum-menu-item-label-to-description\n);--spectrum-menu-item-focus-indicator-width:var(\n--spectrum-border-width-200\n);--spectrum-menu-item-focus-indicator-color:var(--spectrum-blue-800);--spectrum-menu-item-label-to-value-area-min-spacing:var(\n--spectrum-spacing-100\n);--spectrum-menu-item-label-content-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-menu-item-label-content-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-menu-item-label-content-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-menu-item-label-content-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-menu-item-label-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-menu-item-label-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-menu-item-label-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-menu-item-label-icon-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-menu-item-label-content-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-menu-item-label-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-menu-item-description-line-height:var(\n--spectrum-line-height-100\n);--spectrum-menu-item-description-line-height-cjk:var(\n--spectrum-cjk-line-height-100\n);--spectrum-menu-item-description-color-default:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-menu-item-description-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-menu-item-description-color-down:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-menu-item-description-color-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-menu-item-description-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-menu-section-header-line-height:var(--spectrum-line-height-100);--spectrum-menu-section-header-line-height-cjk:var(\n--spectrum-cjk-line-height-100\n);--spectrum-menu-section-header-font-weight:var(\n--spectrum-bold-font-weight\n);--spectrum-menu-section-header-color:var(--spectrum-gray-900);--spectrum-menu-collapsible-icon-color:var(--spectrum-gray-900);--spectrum-menu-checkmark-icon-color-default:var(\n--spectrum-accent-color-900\n);--spectrum-menu-checkmark-icon-color-hover:var(\n--spectrum-accent-color-1000\n);--spectrum-menu-checkmark-icon-color-down:var(\n--spectrum-accent-color-1100\n);--spectrum-menu-checkmark-icon-color-focus:var(\n--spectrum-accent-color-1000\n);--spectrum-menu-drillin-icon-color-default:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-menu-drillin-icon-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-menu-drillin-icon-color-down:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-menu-drillin-icon-color-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-menu-item-value-color-default:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-menu-item-value-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-menu-item-value-color-down:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-menu-item-value-color-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-menu-checkmark-display-hidden:none;--spectrum-menu-checkmark-display-shown:block;--spectrum-menu-checkmark-display:var(\n--spectrum-menu-checkmark-display-shown\n);--spectrum-menu-back-icon-margin:var(\n--spectrum-navigational-indicator-top-to-back-icon-medium\n);--spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width));--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))}:host([size=s]){--spectrum-menu-item-min-height:var(--spectrum-component-height-75);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-75);--spectrum-menu-item-label-text-to-visual:var(\n--spectrum-text-to-visual-75\n);--spectrum-menu-item-label-inline-edge-to-content:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-menu-item-top-edge-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-menu-item-bottom-edge-to-text:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-75);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-50);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-min-width:var(\n--spectrum-component-height-75\n);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(\n--spectrum-menu-item-selectable-edge-to-text-not-selected-small\n);--spectrum-menu-item-checkmark-height:var(\n--spectrum-menu-item-checkmark-height-small\n);--spectrum-menu-item-checkmark-width:var(\n--spectrum-menu-item-checkmark-width-small\n);--spectrum-menu-item-top-to-checkmark:var(\n--spectrum-menu-item-top-to-selected-icon-small\n);--spectrum-menu-back-icon-margin:var(\n--spectrum-navigational-indicator-top-to-back-icon-small\n)}:host([size=l]){--spectrum-menu-item-min-height:var(--spectrum-component-height-200);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-200);--spectrum-menu-item-label-text-to-visual:var(\n--spectrum-text-to-visual-200\n);--spectrum-menu-item-label-inline-edge-to-content:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-menu-item-top-edge-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-menu-item-bottom-edge-to-text:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-200);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-min-width:var(\n--spectrum-component-height-200\n);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(\n--spectrum-menu-item-selectable-edge-to-text-not-selected-large\n);--spectrum-menu-item-checkmark-height:var(\n--spectrum-menu-item-checkmark-height-large\n);--spectrum-menu-item-checkmark-width:var(\n--spectrum-menu-item-checkmark-width-large\n);--spectrum-menu-item-top-to-checkmark:var(\n--spectrum-menu-item-top-to-selected-icon-large\n);--spectrum-menu-back-icon-margin:var(\n--spectrum-navigational-indicator-top-to-back-icon-large\n)}:host([size=xl]){--spectrum-menu-item-min-height:var(--spectrum-component-height-300);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-300);--spectrum-menu-item-label-text-to-visual:var(\n--spectrum-text-to-visual-300\n);--spectrum-menu-item-label-inline-edge-to-content:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-menu-item-top-edge-to-text:var(\n--spectrum-component-top-to-text-300\n);--spectrum-menu-item-bottom-edge-to-text:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-300);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-300);--spectrum-menu-section-header-min-width:var(\n--spectrum-component-height-300\n);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(\n--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large\n);--spectrum-menu-item-checkmark-height:var(\n--spectrum-menu-item-checkmark-height-extra-large\n);--spectrum-menu-item-checkmark-width:var(\n--spectrum-menu-item-checkmark-width-extra-large\n);--spectrum-menu-item-top-to-checkmark:var(\n--spectrum-menu-item-top-to-selected-icon-extra-large\n);--spectrum-menu-back-icon-margin:var(\n--spectrum-navigational-indicator-top-to-back-icon-extra-large\n)}@media (forced-colors:active){:host{--highcontrast-menu-item-background-color-default:ButtonFace;--highcontrast-menu-item-color-default:ButtonText;--highcontrast-menu-item-background-color-focus:Highlight;--highcontrast-menu-item-color-focus:HighlightText;--highcontrast-menu-checkmark-icon-color-default:Highlight;--highcontrast-menu-item-color-disabled:GrayText;--highcontrast-menu-item-focus-indicator-color:Highlight;--highcontrast-menu-item-selected-background-color:Highlight;--highcontrast-menu-item-selected-color:HighlightText}@supports (color:SelectedItem){:host{--highcontrast-menu-item-selected-background-color:SelectedItem;--highcontrast-menu-item-selected-color:SelectedItemText}}}:host{box-sizing:border-box;display:inline-block;inline-size:var(--mod-menu-inline-size,auto);list-style-type:none;margin:0;overflow:auto;padding:0}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-menu-item-label-line-height:var(\n--mod-menu-item-label-line-height-cjk,var(--spectrum-menu-item-label-line-height-cjk)\n);--spectrum-menu-item-description-line-height:var(\n--mod-menu-item-description-line-height-cjk,var(--spectrum-menu-item-description-line-height-cjk)\n);--spectrum-menu-section-header-line-height:var(\n--mod-menu-section-header-line-height-cjk,var(--spectrum-menu-section-header-line-height-cjk)\n)}:host([selects]) ::slotted(sp-menu-item){--spectrum-menu-checkmark-display:var(\n--spectrum-menu-checkmark-display-hidden\n);padding-inline-start:var(\n--mod-menu-item-selectable-edge-to-text-not-selected,var(--spectrum-menu-item-selectable-edge-to-text-not-selected)\n)}:host([selects]) ::slotted(sp-menu-item[selected]){--spectrum-menu-checkmark-display:var(\n--spectrum-menu-checkmark-display-shown\n);padding-inline-start:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}li:not(::slotted(sp-menu-item),.menu-divider){box-sizing:border-box;display:block;margin:0;padding:0;position:relative}.spectrum-Menu-back.focus-visible{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}.spectrum-Menu-sectionHeading{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-section-header-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n);min-inline-size:var(\n--mod-menu-section-header-min-width,var(--spectrum-menu-section-header-min-width)\n);padding-block-end:var(\n--mod-menu-section-header-bottom-edge-to-text,var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n)\n);padding-block-start:var(\n--mod-menu-section-header-top-edge-to-text,var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(\n--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-back .spectrum-Menu-sectionHeading{padding:0}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}.spectrum-Menu-backButton.focus-visible{outline:var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n)}.spectrum-Menu-backIcon{margin-block:var(\n--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)\n);margin-inline:var(\n--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)\n);fill:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n);color:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n)}\n`;\nexport default styles;"],
-  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiOf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-menu-item-min-height:var(--spectrum-component-height-100);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-100);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-100);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-100);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-100);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-100);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-100);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-100);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-medium);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-medium);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-medium);--spectrum-menu-item-top-to-action:var(--spectrum-spacing-50);--spectrum-menu-item-top-to-checkbox:var(--spectrum-spacing-50);--spectrum-menu-item-label-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-label-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-item-label-to-description-spacing:var(--spectrum-menu-item-label-to-description);--spectrum-menu-item-focus-indicator-width:var(--spectrum-border-width-200);--spectrum-menu-item-focus-indicator-color:var(--spectrum-blue-800);--spectrum-menu-item-label-to-value-area-min-spacing:var(--spectrum-spacing-100);--spectrum-menu-item-label-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-menu-item-label-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-menu-item-label-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-menu-item-label-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-menu-item-label-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-menu-item-label-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-menu-item-label-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-menu-item-label-icon-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-menu-item-label-content-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-item-label-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-item-description-line-height:var(--spectrum-line-height-100);--spectrum-menu-item-description-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-item-description-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-item-description-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-item-description-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-item-description-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-item-description-color-disabled:var(--spectrum-disabled-content-color);--spectrum-menu-section-header-line-height:var(--spectrum-line-height-100);--spectrum-menu-section-header-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-menu-section-header-font-weight:var(--spectrum-bold-font-weight);--spectrum-menu-section-header-color:var(--spectrum-gray-900);--spectrum-menu-collapsible-icon-color:var(--spectrum-gray-900);--spectrum-menu-checkmark-icon-color-default:var(--spectrum-accent-color-900);--spectrum-menu-checkmark-icon-color-hover:var(--spectrum-accent-color-1000);--spectrum-menu-checkmark-icon-color-down:var(--spectrum-accent-color-1100);--spectrum-menu-checkmark-icon-color-focus:var(--spectrum-accent-color-1000);--spectrum-menu-drillin-icon-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-drillin-icon-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-drillin-icon-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-drillin-icon-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-item-value-color-default:var(--spectrum-neutral-subdued-content-color-default);--spectrum-menu-item-value-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-menu-item-value-color-down:var(--spectrum-neutral-subdued-content-color-down);--spectrum-menu-item-value-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-menu-checkmark-display-hidden:none;--spectrum-menu-checkmark-display-shown:block;--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-shown);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-medium);--spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width));--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start:calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))}:host([size=s]){--spectrum-menu-item-min-height:var(--spectrum-component-height-75);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-75);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-75);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-75);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-75);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-75);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-50);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-75);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-75);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-small);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-small);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-small);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-small)}:host([size=l]){--spectrum-menu-item-min-height:var(--spectrum-component-height-200);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-200);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-200);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-200);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-200);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-200);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-200);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-100);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-200);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-large);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-large);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-large);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-large)}:host([size=xl]){--spectrum-menu-item-min-height:var(--spectrum-component-height-300);--spectrum-menu-item-icon-height:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-icon-width:var(--spectrum-workflow-icon-size-300);--spectrum-menu-item-label-font-size:var(--spectrum-font-size-300);--spectrum-menu-item-label-text-to-visual:var(--spectrum-text-to-visual-300);--spectrum-menu-item-label-inline-edge-to-content:var(--spectrum-component-edge-to-text-300);--spectrum-menu-item-top-edge-to-text:var(--spectrum-component-top-to-text-300);--spectrum-menu-item-bottom-edge-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-menu-item-text-to-control:var(--spectrum-text-to-control-300);--spectrum-menu-item-description-font-size:var(--spectrum-font-size-200);--spectrum-menu-section-header-font-size:var(--spectrum-font-size-300);--spectrum-menu-section-header-min-width:var(--spectrum-component-height-300);--spectrum-menu-item-selectable-edge-to-text-not-selected:var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);--spectrum-menu-item-checkmark-height:var(--spectrum-menu-item-checkmark-height-extra-large);--spectrum-menu-item-checkmark-width:var(--spectrum-menu-item-checkmark-width-extra-large);--spectrum-menu-item-top-to-checkmark:var(--spectrum-menu-item-top-to-selected-icon-extra-large);--spectrum-menu-back-icon-margin:var(--spectrum-navigational-indicator-top-to-back-icon-extra-large)}@media (forced-colors:active){:host{--highcontrast-menu-item-background-color-default:ButtonFace;--highcontrast-menu-item-color-default:ButtonText;--highcontrast-menu-item-background-color-focus:Highlight;--highcontrast-menu-item-color-focus:HighlightText;--highcontrast-menu-checkmark-icon-color-default:Highlight;--highcontrast-menu-item-color-disabled:GrayText;--highcontrast-menu-item-focus-indicator-color:Highlight;--highcontrast-menu-item-selected-background-color:Highlight;--highcontrast-menu-item-selected-color:HighlightText}@supports (color:SelectedItem){:host{--highcontrast-menu-item-selected-background-color:SelectedItem;--highcontrast-menu-item-selected-color:SelectedItemText}}}:host{inline-size:var(--mod-menu-inline-size,auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(zh),:host:lang(ko){--spectrum-menu-item-label-line-height:var(--mod-menu-item-label-line-height-cjk,var(--spectrum-menu-item-label-line-height-cjk));--spectrum-menu-item-description-line-height:var(--mod-menu-item-description-line-height-cjk,var(--spectrum-menu-item-description-line-height-cjk));--spectrum-menu-section-header-line-height:var(--mod-menu-section-header-line-height-cjk,var(--spectrum-menu-section-header-line-height-cjk))}:host([selects]) ::slotted(sp-menu-item){--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-hidden);padding-inline-start:var(--mod-menu-item-selectable-edge-to-text-not-selected,var(--spectrum-menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(sp-menu-item[selected]){--spectrum-menu-checkmark-display:var(--spectrum-menu-checkmark-display-shown);padding-inline-start:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-section-header-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));min-inline-size:var(--mod-menu-section-header-min-width,var(--spectrum-menu-section-header-min-width));padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-back .spectrum-Menu-sectionHeading{padding:0}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/menu.stories.js

@@ -150,7 +150,7 @@ export const menuItemWithDescription = () => {
                 Open a copy
                 <span slot="description">Illustrator for iPad</span>
             </sp-menu-item>
-            <sp-menu-item>
+            <sp-menu-item disabled>
                 <sp-icon-share slot="icon"></sp-icon-share>
                 Share link
                 <span slot="description">Enable comments and download</span>
@@ -348,4 +348,56 @@ export const MenuGroupSelectsMultiple = () => {
         </sp-popover>
     `;
 };
+export const menuWithValueSlots = () => {
+  return html`
+        <sp-menu style="width: 150px">
+            <sp-menu-item>
+                Undo
+                <span slot="value">⌘​Z</span>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Redo
+                <span slot="value">⇧⌘​Z</span>
+            </sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-item>
+                Cut
+                <span slot="value">⌘​X</span>
+            </sp-menu-item>
+            <sp-menu-item>
+                Copy
+                <span slot="value">⌘​S</span>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Paste
+                <span slot="value">⌘​P</span>
+            </sp-menu-item>
+        </sp-menu>
+        <sp-popover open style="width: 150px">
+            <sp-menu>
+                <sp-menu-item>
+                    Undo
+                    <span slot="value">⌘​Z</span>
+                </sp-menu-item>
+                <sp-menu-item disabled>
+                    Redo
+                    <span slot="value">⇧⌘​Z</span>
+                </sp-menu-item>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item>
+                    Cut
+                    <span slot="value">⌘​X</span>
+                </sp-menu-item>
+                <sp-menu-item>
+                    Copy
+                    <span slot="value">⌘​S</span>
+                </sp-menu-item>
+                <sp-menu-item disabled>
+                    Paste
+                    <span slot="value">⌘​P</span>
+                </sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
 //# sourceMappingURL=menu.stories.js.map

package/stories/menu.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["menu.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n    return html`\n        <sp-menu\n            selects=\"single\"\n            @change=${({\n                target: { value },\n            }: Event & { target: Menu }): void => {\n                navigator.clipboard.writeText(value);\n            }}\n        >\n            <sp-menu-item selected>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu\n                selects=\"single\"\n                @change=${({\n                    target: { value },\n                }: Event & { target: Menu }): void => {\n                    navigator.clipboard.writeText(value);\n                }}\n            >\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item selected>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n    return html`\n        <sp-menu selects=\"multiple\">\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item selected>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item selected>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu selects=\"multiple\">\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item selected>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item selected>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const controlled = (): TemplateResult => {\n    const forceSelection = (event: Event & { target: Menu }): void => {\n        event.target.updateComplete.then(() => {\n            event.target.selected = ['Select and Mask...'];\n        });\n    };\n    return html`\n        <p>\n            This Menu will default to a\n            <code>selected</code>\n            value of\n            <code>[ 'Feather...', 'Save Selection' ]</code>\n            but then on any subsequent interaction be forced to a\n            <code>selected</code>\n            value of\n            <code>[ 'Select and Mask...' ]</code>\n            .\n        </p>\n        <sp-menu selects=\"multiple\" @change=${forceSelection}>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item selected>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item selected>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n    `;\n};\ncontrolled.swc_vrt = {\n    skip: true,\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>\n                <sp-icon-export slot=\"icon\"></sp-icon-export>\n                Quick export\n                <span slot=\"description\">Share a snapshot</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n                Open a copy\n                <span slot=\"description\">Illustrator for iPad</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                <sp-icon-share slot=\"icon\"></sp-icon-share>\n                Share link\n                <span slot=\"description\">Enable comments and download</span>\n            </sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu selects=\"multiple\">\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item selected>\n                    Select Inverse\n                    <span slot=\"description\">Enable inverse selection</span>\n                </sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item selected>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>\n                    Make Work Path\n                    <span slot=\"description\">Create a reusable work path</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n    return html`\n        <sp-popover open>\n            <sp-menu selects=\"single\">\n                <sp-menu-item>\n                    <sp-icon-export slot=\"icon\"></sp-icon-export>\n                    Quick export\n                </sp-menu-item>\n                <sp-menu-item selected>\n                    <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n                    Open a copy\n                </sp-menu-item>\n                <sp-menu-item>\n                    <sp-icon-share slot=\"icon\"></sp-icon-share>\n                    Share link\n                    <span slot=\"description\">Enable comments and download</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n    return html`\n        <sp-popover open>\n            <sp-menu selects=\"single\">\n                <sp-menu-group>\n                    <span slot=\"header\">Section Heading</span>\n                    <sp-menu-item>Action 1</sp-menu-item>\n                    <sp-menu-item>Action 2</sp-menu-item>\n                    <sp-menu-item>Action 3</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group>\n                    <span slot=\"header\">Section Heading</span>\n                    <sp-menu-item>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Save\n                    </sp-menu-item>\n                    <sp-menu-item disabled>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Download\n                    </sp-menu-item>\n                    <sp-menu-item disabled>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Share link\n                        <span slot=\"description\">Enable comments</span>\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">San Francisco</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item>South of Market</sp-menu-item>\n                    <sp-menu-item>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">Oakland</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu selects=\"single\">\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>Camden</sp-menu-item>\n                    <sp-menu-item>Cedar Riverside</sp-menu-item>\n                    <sp-menu-item>Downtown</sp-menu-item>\n                    <sp-menu-item>Northeast Arts District</sp-menu-item>\n                    <sp-menu-item selected>Uptown</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">Or of these</span>\n                    <sp-menu-item>Lowertown</sp-menu-item>\n                    <sp-menu-item>Grand Ave</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"multiple\">\n                    <span slot=\"header\">Many of these</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item selected>South of Market</sp-menu-item>\n                    <sp-menu-item selected>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n    return html`\n        <p style=\"height: 100vh; padding-bottom: 50px;\">\n            In this example the \\`&lt;sp-menu-item selected&gt;\\` element is off\n            the visible page by default, but does not alter the page scroll on\n            load.\n        </p>\n        <sp-menu>\n            <sp-menu-item selected style=\"padding-bottom: 50px;\">\n                My best friend's mom's house in the burbs just off Silverado\n                street\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu selects=\"multiple\">\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">Many of these</span>\n                    <sp-menu-item>Camden</sp-menu-item>\n                    <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n                    <sp-menu-item selected>Downtown</sp-menu-item>\n                    <sp-menu-item>Northeast Arts District</sp-menu-item>\n                    <sp-menu-item>Uptown</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">And these, too</span>\n                    <sp-menu-item>Lowertown</sp-menu-item>\n                    <sp-menu-item selected>Grand Ave</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <span slot=\"header\">None of these</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item>South of Market</sp-menu-item>\n                    <sp-menu-item>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport type { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n    return html`\n        <sp-menu\n            selects=\"single\"\n            @change=${({\n                target: { value },\n            }: Event & { target: Menu }): void => {\n                navigator.clipboard.writeText(value);\n            }}\n        >\n            <sp-menu-item selected>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu\n                selects=\"single\"\n                @change=${({\n                    target: { value },\n                }: Event & { target: Menu }): void => {\n                    navigator.clipboard.writeText(value);\n                }}\n            >\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item selected>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n    return html`\n        <sp-menu selects=\"multiple\">\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item selected>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item selected>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu selects=\"multiple\">\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item selected>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item selected>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const controlled = (): TemplateResult => {\n    const forceSelection = (event: Event & { target: Menu }): void => {\n        event.target.updateComplete.then(() => {\n            event.target.selected = ['Select and Mask...'];\n        });\n    };\n    return html`\n        <p>\n            This Menu will default to a\n            <code>selected</code>\n            value of\n            <code>[ 'Feather...', 'Save Selection' ]</code>\n            but then on any subsequent interaction be forced to a\n            <code>selected</code>\n            value of\n            <code>[ 'Select and Mask...' ]</code>\n            .\n        </p>\n        <sp-menu selects=\"multiple\" @change=${forceSelection}>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item selected>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item selected>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n    `;\n};\ncontrolled.swc_vrt = {\n    skip: true,\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>\n                <sp-icon-export slot=\"icon\"></sp-icon-export>\n                Quick export\n                <span slot=\"description\">Share a snapshot</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n                Open a copy\n                <span slot=\"description\">Illustrator for iPad</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                <sp-icon-share slot=\"icon\"></sp-icon-share>\n                Share link\n                <span slot=\"description\">Enable comments and download</span>\n            </sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu selects=\"multiple\">\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item selected>\n                    Select Inverse\n                    <span slot=\"description\">Enable inverse selection</span>\n                </sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item selected>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>\n                    Make Work Path\n                    <span slot=\"description\">Create a reusable work path</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n    return html`\n        <sp-popover open>\n            <sp-menu selects=\"single\">\n                <sp-menu-item>\n                    <sp-icon-export slot=\"icon\"></sp-icon-export>\n                    Quick export\n                </sp-menu-item>\n                <sp-menu-item selected>\n                    <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n                    Open a copy\n                </sp-menu-item>\n                <sp-menu-item>\n                    <sp-icon-share slot=\"icon\"></sp-icon-share>\n                    Share link\n                    <span slot=\"description\">Enable comments and download</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n    return html`\n        <sp-popover open>\n            <sp-menu selects=\"single\">\n                <sp-menu-group>\n                    <span slot=\"header\">Section Heading</span>\n                    <sp-menu-item>Action 1</sp-menu-item>\n                    <sp-menu-item>Action 2</sp-menu-item>\n                    <sp-menu-item>Action 3</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group>\n                    <span slot=\"header\">Section Heading</span>\n                    <sp-menu-item>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Save\n                    </sp-menu-item>\n                    <sp-menu-item disabled>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Download\n                    </sp-menu-item>\n                    <sp-menu-item disabled>\n                        <sp-icon-checkmark-circle\n                            slot=\"icon\"\n                        ></sp-icon-checkmark-circle>\n                        Share link\n                        <span slot=\"description\">Enable comments</span>\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu>\n                <sp-menu-group>\n                    <span slot=\"header\">San Francisco</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item>South of Market</sp-menu-item>\n                    <sp-menu-item>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">Oakland</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu selects=\"single\">\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>Camden</sp-menu-item>\n                    <sp-menu-item>Cedar Riverside</sp-menu-item>\n                    <sp-menu-item>Downtown</sp-menu-item>\n                    <sp-menu-item>Northeast Arts District</sp-menu-item>\n                    <sp-menu-item selected>Uptown</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">Or of these</span>\n                    <sp-menu-item>Lowertown</sp-menu-item>\n                    <sp-menu-item>Grand Ave</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"multiple\">\n                    <span slot=\"header\">Many of these</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item selected>South of Market</sp-menu-item>\n                    <sp-menu-item selected>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n    return html`\n        <p style=\"height: 100vh; padding-bottom: 50px;\">\n            In this example the \\`&lt;sp-menu-item selected&gt;\\` element is off\n            the visible page by default, but does not alter the page scroll on\n            load.\n        </p>\n        <sp-menu>\n            <sp-menu-item selected style=\"padding-bottom: 50px;\">\n                My best friend's mom's house in the burbs just off Silverado\n                street\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n    return html`\n        <sp-popover open style=\"width: 200px;\">\n            <sp-menu selects=\"multiple\">\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">Many of these</span>\n                    <sp-menu-item>Camden</sp-menu-item>\n                    <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n                    <sp-menu-item selected>Downtown</sp-menu-item>\n                    <sp-menu-item>Northeast Arts District</sp-menu-item>\n                    <sp-menu-item>Uptown</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group selects=\"inherit\">\n                    <span slot=\"header\">And these, too</span>\n                    <sp-menu-item>Lowertown</sp-menu-item>\n                    <sp-menu-item selected>Grand Ave</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <span slot=\"header\">None of these</span>\n                    <sp-menu-item>Financial District</sp-menu-item>\n                    <sp-menu-item>South of Market</sp-menu-item>\n                    <sp-menu-item>North Beach</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group selects=\"single\">\n                    <span slot=\"header\">One of these</span>\n                    <sp-menu-item>City Center</sp-menu-item>\n                    <sp-menu-item disabled>Jack London Square</sp-menu-item>\n                    <sp-menu-item selected>\n                        My best friend's mom's house in the burbs just off\n                        Silverado street\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const menuWithValueSlots = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px\">\n            <sp-menu-item>\n                Undo\n                <span slot=\"value\">\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Redo\n                <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>\n                Cut\n                <span slot=\"value\">\u2318\u200BX</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                Copy\n                <span slot=\"value\">\u2318\u200BS</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Paste\n                <span slot=\"value\">\u2318\u200BP</span>\n            </sp-menu-item>\n        </sp-menu>\n        <sp-popover open style=\"width: 150px\">\n            <sp-menu>\n                <sp-menu-item>\n                    Undo\n                    <span slot=\"value\">\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Redo\n                    <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>\n                    Cut\n                    <span slot=\"value\">\u2318\u200BX</span>\n                </sp-menu-item>\n                <sp-menu-item>\n                    Copy\n                    <span slot=\"value\">\u2318\u200BS</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Paste\n                    <span slot=\"value\">\u2318\u200BP</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AAGrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA,sBAGW,CAAC;AAAA,IACP,QAAQ,EAAE,MAAM;AAAA,EACpB,MAAsC;AAClC,cAAU,UAAU,UAAU,KAAK;AAAA,EACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAca,CAAC;AAAA,IACP,QAAQ,EAAE,MAAM;AAAA,EACpB,MAAsC;AAClC,cAAU,UAAU,UAAU,KAAK;AAAA,EACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjB;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,aAAa,MAAsB;AAC5C,QAAM,iBAAiB,CAAC,UAA0C;AAC9D,UAAM,OAAO,eAAe,KAAK,MAAM;AACnC,YAAM,OAAO,WAAW,CAAC,oBAAoB;AAAA,IACjD,CAAC;AAAA,EACL;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8CAYmC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5D;AACA,WAAW,UAAU;AAAA,EACjB,MAAM;AACV;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEA,gBAAgB,YAAY;AAErB,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDX;",
   "names": []
 }

package/stories/submenu.stories.js

@@ -164,6 +164,16 @@ export const submenu = () => {
                         <sp-menu-item>Upper East Side</sp-menu-item>
                     </sp-menu>
                 </sp-menu-item>
+                <sp-menu-item disabled>
+                    Queens
+                    <sp-menu slot="submenu">
+                        <sp-menu-item>
+                            You shouldn't be able to see this!
+                        </sp-menu-item>
+                        <sp-menu-item>Forest Hills</sp-menu-item>
+                        <sp-menu-item>Jamaica</sp-menu-item>
+                    </sp-menu>
+                </sp-menu-item>
             </sp-menu-group>
         </sp-action-menu>
         <div>