@spectrum-web-components/menu 0.36.0 → 0.38.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-menu-item.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}:host{display:grid;grid-template:\". chevronAreaCollapsible . iconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>.spectrum-Menu-itemDescription,:host([focused])>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]){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)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host:active{background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host:active>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host:active>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host:active>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host:active>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host:active>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host:active>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) .spectrum-Menu-itemDescription,:host([disabled]) .spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){cursor:default}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}.spectrum-Menu-itemDescription{grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n)}#label,.spectrum-Menu-itemDescription{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);justify-self:end;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:active,.spectrum-Menu-item--collapsible.is-open:focus,.spectrum-Menu-item--collapsible.is-open:hover,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){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)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu]):active .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}:host{display:grid;grid-template:\". chevronAreaCollapsible . iconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]){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)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host:active{background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host:active>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host:active>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host:active>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host:active>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host:active>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host:active>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){cursor:default}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);-webkit-hyphens:auto;hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);justify-self:end;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:active,.spectrum-Menu-item--collapsible.is-open:focus,.spectrum-Menu-item--collapsible.is-open:hover,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){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)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu]):active .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgTf,eAAe;",
   "names": []
 }

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

@@ -39,7 +39,7 @@
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)
 )
-)}:host(:focus)>.spectrum-Menu-itemDescription,:host([focused])>.spectrum-Menu-itemDescription{color:var(
+)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)
 )
@@ -86,7 +86,7 @@ var(--spectrum-menu-item-focus-indicator-width)
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)
 )
-)}:host(:hover)>.spectrum-Menu-itemDescription{color:var(
+)}:host(:hover)>[name=description]::slotted(*){color:var(
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)
 )
@@ -126,7 +126,7 @@ var(--spectrum-menu-item-focus-indicator-width)
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)
 )
-)}:host:active>.spectrum-Menu-itemDescription{color:var(
+)}:host:active>[name=description]::slotted(*){color:var(
 --highcontrast-menu-item-color-focus,var(
 --mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)
 )
@@ -162,7 +162,7 @@ var(--spectrum-menu-item-focus-indicator-width)
 --highcontrast-menu-item-color-disabled,var(
 --mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)
 )
-)}:host([aria-disabled=true]) .spectrum-Menu-itemDescription,:host([disabled]) .spectrum-Menu-itemDescription{color:var(
+)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(
 --highcontrast-menu-item-color-disabled,var(
 --mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)
 )
@@ -188,7 +188,7 @@ var(--spectrum-menu-item-focus-indicator-width)
 )
 );font-size:var(
 --mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)
-);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}.spectrum-Menu-itemDescription{grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(
+);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(
 --mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)
 );inline-size:var(
 --mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)
@@ -208,17 +208,17 @@ var(--spectrum-menu-item-top-edge-to-text)
 --mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)
 )}.chevron{margin-inline-end:var(
 --mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)
-)}.spectrum-Menu-itemDescription{color:var(
+)}[name=description]::slotted(*){color:var(
 --highcontrast-menu-item-color-default,var(
 --mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)
 )
 );font-size:var(
 --mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)
-);line-height:var(
+);-webkit-hyphens:auto;hyphens:auto;line-height:var(
 --mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)
 );margin-block-start:var(
 --mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)
-)}#label,.spectrum-Menu-itemDescription{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(
+);overflow-wrap:break-word}#label{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(
 --highcontrast-menu-item-color-default,var(
 --mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)
 )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-menu-item.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}:host{display:grid;grid-template:\". chevronAreaCollapsible . iconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>.spectrum-Menu-itemDescription,:host([focused])>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]){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)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host:active{background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host:active>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host:active>.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host:active>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host:active>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host:active>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host:active>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) .spectrum-Menu-itemDescription,:host([disabled]) .spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){cursor:default}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}.spectrum-Menu-itemDescription{grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemDescription{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n)}#label,.spectrum-Menu-itemDescription{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);justify-self:end;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:active,.spectrum-Menu-item--collapsible.is-open:focus,.spectrum-Menu-item--collapsible.is-open:hover,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){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)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu]):active .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}:host{display:grid;grid-template:\". chevronAreaCollapsible . iconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]){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)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host:active{background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host:active>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host:active>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host:active>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host:active>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host:active>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host:active>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){cursor:default}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;height:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);width:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);-webkit-hyphens:auto;hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);justify-self:end;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:active,.spectrum-Menu-item--collapsible.is-open:focus,.spectrum-Menu-item--collapsible.is-open:hover,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){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)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu]):active .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgTf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/index.js

@@ -1,5 +1,9 @@
 "use strict";
 import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/popover/sp-popover.js";
 export const MenuMarkup = ({
   size = "m"
 } = {}) => {

package/stories/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport const MenuMarkup = ({\n    size = 'm' as 's' | 'm' | 'l' | 'xl',\n} = {}): TemplateResult => {\n    return html`\n        <sp-menu size=${size}>\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 size=${size}>\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"],
-  "mappings": ";AAYA,SAAS,YAA4B;AAE9B,aAAM,aAAa,CAAC;AAAA,EACvB,OAAO;AACX,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA,wBACa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC;",
+  "sourcesContent": ["/*\nCopyright 2023 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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\n\nexport const MenuMarkup = ({\n    size = 'm' as 's' | 'm' | 'l' | 'xl',\n} = {}): TemplateResult => {\n    return html`\n        <sp-menu size=${size}>\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 size=${size}>\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"],
+  "mappings": ";AAYA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEA,aAAM,aAAa,CAAC;AAAA,EACvB,OAAO;AACX,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA,wBACa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC;",
   "names": []
 }

package/stories/menu-item.stories.js

@@ -24,6 +24,16 @@ export const noWrap = () => {
         </sp-menu>
     `;
 };
+export const descriptionSlot = () => {
+  return html`
+        <sp-menu>
+            <sp-menu-item>
+                Quick export
+                <span slot="description">Share a snapshot</span>
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
 export const valueSlot = () => {
   return html`
         <style>

package/stories/menu-item.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["menu-item.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';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n    component: 'sp-menu-item',\n    title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>Menu Item</sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const noWrap = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item no-wrap>\n                Select a Country with a very long label, too long, in fact\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n    /**\n     * This story featurs zero width spaces between the characters in the `<kbd>` element.\n     * While their absence has not caused issues in the local Storybook, the visual regression\n     * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n     * without the intevening zero width space character. When reviewing in the future,\n     * `font-variant-ligatures: none` was also not enough to address this situation.\n     */\n    //\n    //\n    return html`\n        <style>\n            kbd {\n                font-family: var(--spectrum-alias-body-text-font-family);\n                white-space: nowrap;\n            }\n        </style>\n        <sp-menu style=\"width: 150px;\" selects=\"single\">\n            <sp-menu-item>\n                Save\n                <kbd slot=\"value\">\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item selected>\n                Save As...\n                <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Save All\n                <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const href = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item\n                href=\"https://opensource.adobe.com/spectrum-web-components\"\n            >\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit the Documentation Site\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n"],
-  "mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,YAAY,MAAsB;AAU3C,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,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
+  "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';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n    component: 'sp-menu-item',\n    title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>Menu Item</sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const noWrap = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item no-wrap>\n                Select a Country with a very long label, too long, in fact\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const descriptionSlot = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>\n                Quick export\n                <span slot=\"description\">Share a snapshot</span>\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n    /**\n     * This story featurs zero width spaces between the characters in the `<kbd>` element.\n     * While their absence has not caused issues in the local Storybook, the visual regression\n     * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n     * without the intevening zero width space character. When reviewing in the future,\n     * `font-variant-ligatures: none` was also not enough to address this situation.\n     */\n    //\n    //\n    return html`\n        <style>\n            kbd {\n                font-family: var(--spectrum-alias-body-text-font-family);\n                white-space: nowrap;\n            }\n        </style>\n        <sp-menu style=\"width: 150px;\" selects=\"single\">\n            <sp-menu-item>\n                Save\n                <kbd slot=\"value\">\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item selected>\n                Save As...\n                <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Save All\n                <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const href = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item\n                href=\"https://opensource.adobe.com/spectrum-web-components\"\n            >\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit the Documentation Site\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEO,aAAM,YAAY,MAAsB;AAU3C,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,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
   "names": []
 }

package/stories/menu.stories.js

@@ -91,6 +91,45 @@ export const multipleSelect = () => {
         </sp-popover>
     `;
 };
+export const menuItemWithDescription = () => {
+  return html`
+        <sp-menu>
+            <sp-menu-item>
+                <sp-icon-export slot="icon"></sp-icon-export>
+                Quick export
+                <span slot="description">Share a snapshot</span>
+            </sp-menu-item>
+            <sp-menu-item>
+                <sp-icon-folder-open slot="icon"></sp-icon-folder-open>
+                Open a copy
+                <span slot="description">Illustrator for iPad</span>
+            </sp-menu-item>
+            <sp-menu-item>
+                <sp-icon-share slot="icon"></sp-icon-share>
+                Share link
+                <span slot="description">Enable comments and download</span>
+            </sp-menu-item>
+        </sp-menu>
+
+        <sp-popover open>
+            <sp-menu selects="multiple">
+                <sp-menu-item>Deselect</sp-menu-item>
+                <sp-menu-item selected>
+                    Select Inverse
+                    <span slot="description">Enable inverse selection</span>
+                </sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item selected>Select and Mask...</sp-menu-item>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-item disabled>
+                    Make Work Path
+                    <span slot="description">Create a reusable work path</span>
+                </sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
 export const selectsWithIcons = () => {
   return html`
         <sp-popover open>
@@ -106,6 +145,7 @@ export const selectsWithIcons = () => {
                 <sp-menu-item>
                     <sp-icon-share slot="icon"></sp-icon-share>
                     Share link
+                    <span slot="description">Enable comments and download</span>
                 </sp-menu-item>
             </sp-menu>
         </sp-popover>
@@ -136,6 +176,13 @@ export const headersAndIcons = () => {
                         ></sp-icon-checkmark-circle>
                         Download
                     </sp-menu-item>
+                    <sp-menu-item disabled>
+                        <sp-icon-checkmark-circle
+                            slot="icon"
+                        ></sp-icon-checkmark-circle>
+                        Share link
+                        <span slot="description">Enable comments</span>
+                    </sp-menu-item>
                 </sp-menu-group>
             </sp-menu>
         </sp-popover>

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 '@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 selects=\"single\">\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 selects=\"single\">\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 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                </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-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": ";AAWA,SAAS,YAA4B;AAErC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;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,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX;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;AA4BX;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;",
+  "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 '@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 selects=\"single\">\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 selects=\"single\">\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 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": ";AAWA,SAAS,YAA4B;AAErC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;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,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;",
   "names": []
 }