New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@spectrum-web-components/menu

Package Overview
Dependencies
Maintainers
7
Versions
338
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.42.0 to 0.42.1

23

package.json
{
"name": "@spectrum-web-components/menu",
"version": "0.42.0",
"version": "0.42.1",
"publishConfig": {

@@ -88,13 +88,14 @@ "access": "public"

"@lit-labs/observers": "^2.0.0",
"@spectrum-web-components/action-button": "^0.42.0",
"@spectrum-web-components/base": "^0.42.0",
"@spectrum-web-components/divider": "^0.42.0",
"@spectrum-web-components/icon": "^0.42.0",
"@spectrum-web-components/icons-ui": "^0.42.0",
"@spectrum-web-components/overlay": "^0.42.0",
"@spectrum-web-components/popover": "^0.42.0",
"@spectrum-web-components/shared": "^0.42.0"
"@spectrum-web-components/action-button": "^0.42.1",
"@spectrum-web-components/base": "^0.42.1",
"@spectrum-web-components/divider": "^0.42.1",
"@spectrum-web-components/icon": "^0.42.1",
"@spectrum-web-components/icons-ui": "^0.42.1",
"@spectrum-web-components/overlay": "^0.42.1",
"@spectrum-web-components/popover": "^0.42.1",
"@spectrum-web-components/reactive-controllers": "^0.42.1",
"@spectrum-web-components/shared": "^0.42.1"
},
"devDependencies": {
"@spectrum-css/menu": "^6.1.4"
"@spectrum-css/menu": "^6.1.5"
},

@@ -107,3 +108,3 @@ "types": "./src/index.d.ts",

],
"gitHead": "9b3bd55ff8e8f9438817255976e77fd456b19d72"
"gitHead": "c7ab5516e86d20194e92114afd04affa490b7248"
}

2

src/menu-item.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host([active])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}: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)))}:host([active])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host([active])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host([active])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host([active])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host([active]) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu][active]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([aria-disabled=true]) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([aria-disabled=true]:hover) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}#label{hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap));flex:auto}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*),:host([has-submenu][disabled]) .chevron{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}#button{position:absolute;inset:0}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors:active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}
.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}:host(:is(:active,[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)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}#label{hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap));flex:auto}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*),:host([has-submenu][disabled]) .chevron{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}#button{position:absolute;inset:0}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors:active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}
`;
export default styles;
//# sourceMappingURL=menu-item.css.dev.js.map

2

src/menu-item.css.js
"use strict";import{css as e}from"@spectrum-web-components/base";const o=e`
.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host([active])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}: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)))}:host([active])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host([active])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host([active])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host([active])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host([active]) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu][active]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([aria-disabled=true]) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([aria-disabled=true]:hover) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}#label{hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap));flex:auto}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*),:host([has-submenu][disabled]) .chevron{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}#button{position:absolute;inset:0}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors:active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}
.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}:host(:is(:active,[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)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}#label{hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap));flex:auto}.spectrum-Menu-itemLabel--wrapping{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*),:host([has-submenu][disabled]) .chevron{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}#button{position:absolute;inset:0}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors:active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}
`;export default o;
//# sourceMappingURL=menu-item.css.js.map

5

src/MenuItem.d.ts

@@ -45,5 +45,5 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';

static get styles(): CSSResultArray;
abortControllerPointer: AbortController;
abortControllerSubmenu: AbortController;
active: boolean;
private dependencyManager;
focused: boolean;

@@ -64,2 +64,3 @@ selected: boolean;

overlayElement: Overlay;
private submenuElement?;
get focusElement(): HTMLElement;

@@ -73,2 +74,3 @@ protected get hasIcon(): boolean;

private handleClickCapture;
private handleSlottableRequest;
private proxyFocus;

@@ -82,3 +84,2 @@ private shouldProxyClick;

}): void;
private handleRemoveActive;
private handlePointerdown;

@@ -85,0 +86,0 @@ protected firstUpdated(changes: PropertyValues): void;

60

src/MenuItem.dev.js

@@ -31,5 +31,7 @@ "use strict";

import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
import menuItemStyles from "./menu-item.css.js";
import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
import { MutationController } from "@lit-labs/observers/mutation-controller.js";
import { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
const POINTERLEAVE_TIMEOUT = 100;

@@ -66,2 +68,3 @@ export class MenuItemAddedOrUpdatedEvent extends Event {

this.active = false;
this.dependencyManager = new DependencyManagerController(this);
this.focused = false;

@@ -73,2 +76,8 @@ this.selected = false;

this.open = false;
this.handleSlottableRequest = (event) => {
var _a;
(_a = this.submenuElement) == null ? void 0 : _a.dispatchEvent(
new SlottableRequestEvent(event.name, event.data)
);
};
this.proxyFocus = () => {

@@ -104,3 +113,9 @@ this.focus();

},
callback: () => {
callback: (mutations) => {
const isSubmenu = mutations.every(
(mutation) => mutation.target.slot === "submenu"
);
if (isSubmenu) {
return;
}
this.breakItemChildrenCache();

@@ -208,2 +223,4 @@ }

}
this.dependencyManager.add("sp-overlay");
this.dependencyManager.add("sp-popover");
import("@spectrum-web-components/overlay/sp-overlay.js");

@@ -215,7 +232,8 @@ import("@spectrum-web-components/popover/sp-popover.js");

?disabled=${!this.hasSubmenu}
?open=${this.hasSubmenu && this.open}
?open=${this.hasSubmenu && this.open && this.dependencyManager.loaded}
.placement=${this.isLTR ? "right-start" : "left-start"}
.offset=${[-10, -4]}
.offset=${[-10, -5]}
.type=${"auto"}
@close=${(event) => event.stopPropagation()}
@slottable-request=${this.handleSlottableRequest}
>

@@ -265,6 +283,6 @@ <sp-popover

manageSubmenu(event) {
const assignedElements = event.target.assignedElements({
this.submenuElement = event.target.assignedElements({
flatten: true
});
this.hasSubmenu = !!assignedElements.length;
})[0];
this.hasSubmenu = !!this.submenuElement;
if (this.hasSubmenu) {

@@ -274,10 +292,3 @@ this.setAttribute("aria-haspopup", "true");

}
handleRemoveActive() {
if (this.open) {
return;
}
this.active = false;
}
handlePointerdown(event) {
this.active = true;
if (event.target === this && this.hasSubmenu && this.open) {

@@ -393,3 +404,3 @@ this.addEventListener("focus", this.handleSubmenuFocus, {

updated(changes) {
var _a, _b, _c;
var _a, _b;
super.updated(changes);

@@ -402,21 +413,2 @@ if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {

(_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
this.abortControllerPointer = new AbortController();
const options = { signal: this.abortControllerPointer.signal };
this.addEventListener(
"pointerup",
this.handleRemoveActive,
options
);
this.addEventListener(
"pointerleave",
this.handleRemoveActive,
options
);
this.addEventListener(
"pointercancel",
this.handleRemoveActive,
options
);
} else {
(_b = this.abortControllerPointer) == null ? void 0 : _b.abort();
}

@@ -456,3 +448,3 @@ }

} else {
(_c = this.abortControllerSubmenu) == null ? void 0 : _c.abort();
(_b = this.abortControllerSubmenu) == null ? void 0 : _b.abort();
}

@@ -459,0 +451,0 @@ }

19

src/MenuItem.js

@@ -1,2 +0,2 @@

"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(l,a,e,t)=>{for(var i=t>1?void 0:t?p(a,e):a,o=l.length-1,n;o>=0;o--)(n=l[o])&&(i=(t?n(a,e,i):n(i))||i);return t&&i&&c(a,e,i),i};import{html as d,nothing as h}from"@spectrum-web-components/base";import{ObserveSlotPresence as m,ObserveSlotText as v,randomID as b}from"@spectrum-web-components/shared";import{property as s,query as u}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import{LikeAnchor as f}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as E}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import S from"./menu-item.css.js";import g from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import{MutationController as C}from"@lit-labs/observers/mutation-controller.js";const A=100;export class MenuItemAddedOrUpdatedEvent extends Event{constructor(e){super("sp-menu-item-added-or-updated",{bubbles:!0,composed:!0});this.menuCascade=new WeakMap;this.clear(e)}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}get item(){return this._item}}export class MenuItem extends f(v(m(E,'[slot="icon"]'))){constructor(){super();this.active=!1;this.focused=!1;this.selected=!1;this._value="";this.hasSubmenu=!1;this.noWrap=!1;this.open=!1;this.proxyFocus=()=>{this.focus()};this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))};this.recentlyLeftChild=!1;this.willDispatchUpdate=!1;this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]};this.addEventListener("click",this.handleClickCapture,{capture:!0}),new C(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:()=>{this.breakItemChildrenCache()}})}static get styles(){return[S,g,y]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(i=>{const o=i.cloneNode(!0);return o.removeAttribute("slot"),o.classList.toggle("icon"),o}),t=this.contentSlot.assignedNodes().map(i=>i.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=d`
"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(a,s,e,t)=>{for(var n=t>1?void 0:t?p(s,e):s,i=a.length-1,d;i>=0;i--)(d=a[i])&&(n=(t?d(s,e,n):d(n))||n);return t&&n&&h(s,e,n),n};import{html as l,nothing as c}from"@spectrum-web-components/base";import{ObserveSlotPresence as m,ObserveSlotText as v,randomID as b}from"@spectrum-web-components/shared";import{property as o,query as u}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import{LikeAnchor as f}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as E}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{DependencyManagerController as S}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";import g from"./menu-item.css.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import{MutationController as M}from"@lit-labs/observers/mutation-controller.js";import{SlottableRequestEvent as T}from"@spectrum-web-components/overlay/src/slottable-request-event.js";const L=100;export class MenuItemAddedOrUpdatedEvent extends Event{constructor(e){super("sp-menu-item-added-or-updated",{bubbles:!0,composed:!0});this.menuCascade=new WeakMap;this.clear(e)}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}get item(){return this._item}}export class MenuItem extends f(v(m(E,'[slot="icon"]'))){constructor(){super();this.active=!1;this.dependencyManager=new S(this);this.focused=!1;this.selected=!1;this._value="";this.hasSubmenu=!1;this.noWrap=!1;this.open=!1;this.handleSlottableRequest=e=>{var t;(t=this.submenuElement)==null||t.dispatchEvent(new T(e.name,e.data))};this.proxyFocus=()=>{this.focus()};this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))};this.recentlyLeftChild=!1;this.willDispatchUpdate=!1;this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]};this.addEventListener("click",this.handleClickCapture,{capture:!0}),new M(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:e=>{e.every(n=>n.target.slot==="submenu")||this.breakItemChildrenCache()}})}static get styles(){return[g,C,y]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(n=>{const i=n.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),t=this.contentSlot.assignedNodes().map(n=>n.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=l`
<slot

@@ -8,11 +8,12 @@ name="submenu"

></slot>
`;return this.hasSubmenu?(import("@spectrum-web-components/overlay/sp-overlay.js"),import("@spectrum-web-components/popover/sp-popover.js"),d`
`;return this.hasSubmenu?(this.dependencyManager.add("sp-overlay"),this.dependencyManager.add("sp-popover"),import("@spectrum-web-components/overlay/sp-overlay.js"),import("@spectrum-web-components/popover/sp-popover.js"),l`
<sp-overlay
.triggerElement=${this}
?disabled=${!this.hasSubmenu}
?open=${this.hasSubmenu&&this.open}
?open=${this.hasSubmenu&&this.open&&this.dependencyManager.loaded}
.placement=${this.isLTR?"right-start":"left-start"}
.offset=${[-10,-4]}
.offset=${[-10,-5]}
.type=${"auto"}
@close=${t=>t.stopPropagation()}
@slottable-request=${this.handleSlottableRequest}
>

@@ -31,4 +32,4 @@ <sp-popover

></sp-icon-chevron100>
`):e}render(){return d`
${this.selected?d`
`):e}render(){return l`
${this.selected?l`
<sp-icon-checkmark100

@@ -41,3 +42,3 @@ id="selected"

></sp-icon-checkmark100>
`:h}
`:c}
<slot name="icon"></slot>

@@ -49,5 +50,5 @@ <div id="label">

<slot name="value"></slot>
${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):h}
${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):c}
${this.renderSubmenu()}
`}manageSubmenu(e){const t=e.target.assignedElements({flatten:!0});this.hasSubmenu=!!t.length,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handleRemoveActive(){this.open||(this.active=!1)}handlePointerdown(e){this.active=!0,e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`sp-menu-item-${b()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},A))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}async handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){this.focused=!1;const t=e.composedPath().find(i=>i!==this.overlayElement&&i.localName==="sp-overlay");this.overlayElement.parentOverlayToForceClose=t}cleanup(){this.open=!1,this.active=!1}async openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("sp-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}updated(e){var t,i,o;if(super.updated(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||typeof e.get("active")!="undefined"))if(this.active){(t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays(),this.abortControllerPointer=new AbortController;const n={signal:this.abortControllerPointer.signal};this.addEventListener("pointerup",this.handleRemoveActive,n),this.addEventListener("pointerleave",this.handleRemoveActive,n),this.addEventListener("pointercancel",this.handleRemoveActive,n)}else(i=this.abortControllerPointer)==null||i.abort();if(this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||typeof e.get("hasSubmenu")!="undefined"))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const n={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,n),this.addEventListener("pointerenter",this.handlePointerenter,n),this.addEventListener("pointerleave",this.handlePointerleave,n),this.addEventListener("sp-opened",this.handleSubmenuOpen,n)}else(o=this.abortControllerSubmenu)==null||o.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this)),this.willDispatchUpdate=!1)}}r([s({type:Boolean,reflect:!0})],MenuItem.prototype,"active",2),r([s({type:Boolean,reflect:!0})],MenuItem.prototype,"focused",2),r([s({type:Boolean,reflect:!0})],MenuItem.prototype,"selected",2),r([s({type:String})],MenuItem.prototype,"value",1),r([s({type:Boolean,reflect:!0,attribute:"has-submenu"})],MenuItem.prototype,"hasSubmenu",2),r([u("slot:not([name])")],MenuItem.prototype,"contentSlot",2),r([u('slot[name="icon"]')],MenuItem.prototype,"iconSlot",2),r([s({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],MenuItem.prototype,"noWrap",2),r([u(".anchor")],MenuItem.prototype,"anchorElement",2),r([u("sp-overlay")],MenuItem.prototype,"overlayElement",2),r([s({type:Boolean,reflect:!0})],MenuItem.prototype,"open",2);
`}manageSubmenu(e){this.submenuElement=e.target.assignedElements({flatten:!0})[0],this.hasSubmenu=!!this.submenuElement,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handlePointerdown(e){e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`sp-menu-item-${b()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},L))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}async handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){this.focused=!1;const t=e.composedPath().find(n=>n!==this.overlayElement&&n.localName==="sp-overlay");this.overlayElement.parentOverlayToForceClose=t}cleanup(){this.open=!1,this.active=!1}async openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("sp-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}updated(e){var t,n;if(super.updated(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||typeof e.get("active")!="undefined")&&this.active&&((t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays()),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||typeof e.get("hasSubmenu")!="undefined"))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const i={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,i),this.addEventListener("pointerenter",this.handlePointerenter,i),this.addEventListener("pointerleave",this.handlePointerleave,i),this.addEventListener("sp-opened",this.handleSubmenuOpen,i)}else(n=this.abortControllerSubmenu)==null||n.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this)),this.willDispatchUpdate=!1)}}r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"active",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"focused",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"selected",2),r([o({type:String})],MenuItem.prototype,"value",1),r([o({type:Boolean,reflect:!0,attribute:"has-submenu"})],MenuItem.prototype,"hasSubmenu",2),r([u("slot:not([name])")],MenuItem.prototype,"contentSlot",2),r([u('slot[name="icon"]')],MenuItem.prototype,"iconSlot",2),r([o({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],MenuItem.prototype,"noWrap",2),r([u(".anchor")],MenuItem.prototype,"anchorElement",2),r([u("sp-overlay")],MenuItem.prototype,"overlayElement",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"open",2);
//# sourceMappingURL=MenuItem.js.map

26

src/spectrum-config.js

@@ -86,3 +86,27 @@ /*

converter.classToAttribute('is-active', 'active'),
converter.pseudoToAttribute('active', 'active'),
{
find: {
type: 'pseudo-class',
kind: 'active',
},
replace: {
type: 'pseudo-class',
kind: 'is',
selectors: [
[
{
type: 'pseudo-class',
kind: 'active',
},
],
[
{
type: 'attribute',
name: 'active',
},
],
],
},
hoist: true,
},
converter.classToAttribute('is-focused', 'focused'),

@@ -89,0 +113,0 @@ converter.classToAttribute('is-selected', 'selected'),

2

src/spectrum-menu-item.css.dev.js
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host([active])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}: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)))}:host([active])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host([active])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host([active])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host([active])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host([active]) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu][active]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([aria-disabled=true]) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([aria-disabled=true]:hover) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}
::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}:host(:is(:active,[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)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}
`;
export default styles;
//# sourceMappingURL=spectrum-menu-item.css.dev.js.map

2

src/spectrum-menu-item.css.js
"use strict";import{css as e}from"@spectrum-web-components/base";const o=e`
::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host([active])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}: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)))}:host([active])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host([active])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host([active])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host([active])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host([active]) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu][active]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([aria-disabled=true]) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([aria-disabled=true]:hover) #label{color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}
::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)))}.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)));opacity:1;align-self:center}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)));line-height:var(--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height));min-block-size:var(--mod-menu-item-min-height,var(--spectrum-menu-item-min-height));padding-block-start:var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text));padding-block-end:var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text));padding-inline:var(--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content));align-items:center;margin:0;text-decoration:none;position:relative}.spectrum-Menu-itemCheckbox{--mod-checkbox-top-to-text:0;--mod-checkbox-text-to-control:0;min-block-size:0}.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box{margin-block-start:var(--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-start:var(--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action));margin-block-end:0}:host{grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;display:grid}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)));outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)))}: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)))}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)))}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)))}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)))}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)))}:host(:is(:active,[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)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)))}::slotted([slot=icon]){grid-area:iconArea;align-self:start}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{grid-area:checkmarkArea;align-self:start}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)));grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{grid-area:actionsArea;align-self:start;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}.chevron{block-size:var(--spectrum-menu-item-checkmark-height);inline-size:var(--spectrum-menu-item-checkmark-width);grid-area:chevronArea;align-self:center}.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))}.checkmark{block-size:var(--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height));inline-size:var(--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width));margin-block-start:calc(var(--mod-menu-item-top-to-checkmark,var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));margin-inline-end:var(--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control))}::slotted([slot=icon]){margin-inline-end:var(--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))}[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));hyphens:auto;overflow-wrap:break-word;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{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)));font-size:var(--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size));place-self:start end;margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--mod-menu-section-header-top-edge-to-text,var(--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)));padding-block-end:var(--mod-menu-section-header-bottom-edge-to-text,var(--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)))}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)));margin-inline-start:var(--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(--highcontrast-menu-item-selected-background-color,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:#0000}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)))}:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus,var(--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)))}: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)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)))}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)))}:host(:hover)>.chevron{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus,var(--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)))}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default,var(--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:#0000}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}}.spectrum-Menu-back{padding-inline:var(--mod-menu-back-padding-inline-start,0)var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));padding-block:var(--mod-menu-back-padding-block-start,0)var(--mod-menu-back-padding-block-end,0);flex-flow:wrap;align-items:center;display:flex}.spectrum-Menu-backButton{cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .spectrum-Menu-backButton{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.spectrum-Menu-backIcon{margin-block:var(--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin));margin-inline:var(--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default));color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default))}
`;export default o;
//# sourceMappingURL=spectrum-menu-item.css.js.map

43

test/menu-memory.test.js
"use strict";
import { expect, fixture, nextFrame } from "@open-wc/testing";
import { html, render } from "@spectrum-web-components/base";
import { fixture } from "@open-wc/testing";
import { singleSelect } from "../stories/menu.stories.js";
import { usedHeapMB } from "../../../test/testing-helpers.js";
describe("Menu memory usage", () => {
it("releases references on disconnect", async function() {
if (!window.gc || !("measureUserAgentSpecificMemory" in performance))
this.skip();
this.timeout(1e4);
const iterations = 50;
let active = false;
const el = await fixture(
html`
<div></div>
`
);
async function toggle(forced = void 0) {
active = forced != null ? forced : !active;
render(active ? singleSelect() : html``, el);
await nextFrame();
await nextFrame();
}
for (let i = 0; i < 5; i++) {
await toggle();
}
await toggle(false);
const beforeMB = await usedHeapMB();
for (let i = 0; i < iterations; i++) {
await toggle();
}
await toggle(false);
const afterMB = await usedHeapMB();
expect(
afterMB.total - beforeMB.total,
`Total | before: ${beforeMB.total}, after: ${afterMB.total}
DOM | before: ${beforeMB.dom}, after: ${afterMB.dom}
JS | before: ${beforeMB.js}, after: ${afterMB.js}
Shared | before: ${beforeMB.shared}, after: ${afterMB.shared}`
).to.be.lte(0);
});
});
import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
testForMemoryLeaks(async () => await fixture(singleSelect()));
//# sourceMappingURL=menu-memory.test.js.map

18

test/menu.test.js

@@ -9,3 +9,2 @@ "use strict";

expect,
fixture,
html,

@@ -18,2 +17,3 @@ nextFrame,

arrowUpEvent,
fixture,
tabEvent,

@@ -156,4 +156,12 @@ testForLitDevWarnings,

const otherItem = el.querySelector("#other");
otherItem.click();
otherItem.focus();
await elementUpdated(el);
await sendKeys({
press: "ArrowDown"
});
await elementUpdated(el);
await sendKeys({
press: "Enter"
});
await elementUpdated(el);
const clipboardText = await navigator.clipboard.readText();

@@ -466,7 +474,11 @@ expect(clipboardText).to.equal("Other");

);
await nextFrame();
await nextFrame();
expect(el.selected).to.deep.equal([]);
const items = [...el.querySelectorAll("[value]")];
const items = [...el.children];
await Promise.all(items.map((child) => child.updateComplete));
items[0].click();
await nextFrame();
await nextFrame();
expect(el.selected).to.deep.equal(["1"]);
items[0].click();

@@ -473,0 +485,0 @@ await nextFrame();

1318

test/submenu.test.js

@@ -20,13 +20,411 @@ "use strict";

import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
const selectsWithKeyboardData = [
{
dir: "ltr",
openKey: "ArrowRight",
closeKey: "ArrowLeft"
},
{
dir: "rtl",
openKey: "ArrowLeft",
closeKey: "ArrowRight"
}
];
describe("Submenu", () => {
it("selects - pointer", async () => {
const rootChanged = spy();
const submenuChanged = spy();
const el = await fixture(
html`
function selectWithPointer() {
it("with pointer", async function() {
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(this.rootItem.open).to.be.true;
const item2 = document.querySelector(".submenu-item-2");
const item2BoundingRect = item2.getBoundingClientRect();
const closed = oneEvent(this.rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
item2BoundingRect.left + item2BoundingRect.width / 2,
item2BoundingRect.top + item2BoundingRect.height / 2
]
}
]
});
await closed;
expect(
this.submenuChanged.withArgs("Two").calledOnce,
`submenu changed ${this.submenuChanged.callCount} times`
).to.be.true;
expect(
this.rootChanged.withArgs("Has submenu").calledOnce,
"root changed"
).to.be.true;
});
}
function selectsWithKeyboard(testData) {
it(`with keyboard: ${testData.dir}`, async function() {
var _a, _b;
this.el.parentElement.dir = testData.dir;
await elementUpdated(this.el);
expect(this.rootItem.open).to.be.false;
const input = document.createElement("input");
this.el.insertAdjacentElement("beforebegin", input);
input.focus();
await sendKeys({
press: "Tab"
});
await sendKeys({
press: "ArrowDown"
});
await elementUpdated(this.rootItem);
expect(this.rootItem.focused).to.be.true;
let opened = oneEvent(this.rootItem, "sp-opened");
await sendKeys({
press: testData.openKey
});
await opened;
let submenu = this.el.querySelector('[slot="submenu"]');
let submenuItem = this.el.querySelector(
".submenu-item-2"
);
expect(this.rootItem.open).to.be.true;
expect(
submenu === document.activeElement,
`${(_a = document.activeElement) == null ? void 0 : _a.id}`
).to.be.true;
let closed = oneEvent(this.rootItem, "sp-closed");
await sendKeys({
press: testData.closeKey
});
await closed;
expect(this.rootItem.open).to.be.false;
expect(
this.el === document.activeElement,
`${(_b = document.activeElement) == null ? void 0 : _b.id}`
).to.be.true;
opened = oneEvent(this.rootItem, "sp-opened");
await sendKeys({
press: testData.openKey
});
await opened;
submenu = this.el.querySelector('[slot="submenu"]');
submenuItem = this.el.querySelector(".submenu-item-2");
expect(this.rootItem.open).to.be.true;
await sendKeys({
press: "ArrowDown"
});
await elementUpdated(submenu);
await elementUpdated(submenuItem);
expect(submenu.getAttribute("aria-activedescendant")).to.equal(
submenuItem.id
);
closed = oneEvent(this.rootItem, "sp-closed");
await sendKeys({
press: "Enter"
});
await closed;
expect(this.submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
expect(this.rootChanged.called, "root has changed").to.be.true;
expect(
this.rootChanged.calledWith("Has submenu"),
"root specifically changed"
).to.be.true;
});
}
function returnsFocusToRootWhenClosingSubmenu() {
it("returns visible focus when submenu closed", async function() {
const input = document.createElement("input");
this.el.insertAdjacentElement("beforebegin", input);
input.focus();
await sendKeys({
press: "Tab"
});
await sendKeys({
press: "ArrowDown"
});
await elementUpdated(this.rootItem);
expect(this.rootItem.active).to.be.false;
expect(this.rootItem.focused).to.be.true;
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendKeys({
press: "ArrowRight"
});
await opened;
expect(this.rootItem.active).to.be.true;
expect(this.rootItem.focused).to.be.false;
expect(this.rootItem.open).to.be.true;
await sendKeys({
press: "ArrowDown"
});
expect(this.rootItem.active).to.be.true;
expect(this.rootItem.focused).to.be.false;
expect(this.rootItem.open).to.be.true;
const closed = oneEvent(this.rootItem, "sp-closed");
await sendKeys({
press: "ArrowLeft"
});
await closed;
expect(this.rootItem.active).to.be.false;
expect(this.rootItem.focused).to.be.true;
expect(this.rootItem.open).to.be.false;
});
}
function closesOnPointerLeave() {
it("closes on `pointerleave`", async function() {
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(this.rootItem.open).to.be.true;
const closed = oneEvent(this.rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await closed;
expect(this.rootItem.open).to.be.false;
});
}
function persistsThroughMouseLeaveAndReturn() {
it("stays open when mousing off menu item and back again", async function() {
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(this.rootItem.open).to.be.true;
const closed = oneEvent(this.rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await closed;
});
}
function doesNotOpenWhenDisabled() {
it("does not open when disabled", async function() {
this.rootItem.disabled = true;
await elementUpdated(this.rootItem);
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await new Promise((r) => setTimeout(r, 200));
expect(this.rootItem.open).to.be.false;
});
}
function persistsWhenMovingBetweenItemAndSubmenu() {
it("stays open when mousing between menu item and submenu", async function() {
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
await nextFrame();
await nextFrame();
const subItem = this.el.querySelector(
".submenu-item-2"
);
const clickSpy = spy();
subItem.addEventListener("click", () => clickSpy());
const subItemBoundingRect = subItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.true;
await sendMouse({
steps: [
{
type: "move",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
expect(this.rootItem.open).to.be.true;
await aTimeout(150);
expect(this.rootItem.open).to.be.true;
const closed = oneEvent(this.rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await closed;
expect(clickSpy.callCount).to.equal(1);
});
}
function continuesToOpenWhenMovingBetweenItemAndSubmenu() {
it("continues to open when mousing between menu item and submenu", async function() {
const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
expect(this.rootItem.open).to.be.false;
const opened = oneEvent(this.rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
const subItem = this.el.querySelector(
".submenu-item-2"
);
const clickSpy = spy();
subItem.addEventListener("click", () => clickSpy());
const subItemBoundingRect = subItem.getBoundingClientRect();
await sendMouse({
steps: [
{
type: "move",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(this.rootItem.open).to.be.true;
await aTimeout(150);
expect(this.rootItem.open).to.be.true;
const closed = oneEvent(this.rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await closed;
expect(clickSpy.callCount).to.equal(1);
});
}
const renderSubmenu = () => html`
<sp-menu-item class="submenu-item-1">One</sp-menu-item>
<sp-menu-item class="submenu-item-2">Two</sp-menu-item>
<sp-menu-item class="submenu-item-3">Three</sp-menu-item>
`;
describe("static DOM", () => {
beforeEach(async function() {
this.rootChanged = spy();
this.submenuChanged = spy();
this.el = await fixture(html`
<sp-menu
@change=${(event) => {
rootChanged(event.target.value);
this.rootChanged(event.target.value);
}}
>
<sp-menu-item>No submenu</sp-menu-item>
<sp-menu-item class="root">

@@ -37,60 +435,69 @@ Has submenu

@change=${(event) => {
submenuChanged(event.target.value);
this.submenuChanged(event.target.value);
}}
>
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
${renderSubmenu()}
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
await nextFrame();
await nextFrame();
const rootItem = el.querySelector(".root");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
const opened = oneEvent(rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
`);
await elementUpdated(this.el);
await nextFrame();
await nextFrame();
this.rootItem = this.el.querySelector(".root");
});
await opened;
expect(rootItem.open).to.be.true;
const item2 = document.querySelector(".submenu-item-2");
const item2BoundingRect = item2.getBoundingClientRect();
const closed = oneEvent(rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
item2BoundingRect.left + item2BoundingRect.width / 2,
item2BoundingRect.top + item2BoundingRect.height / 2
]
}
]
describe("selects", () => {
selectWithPointer();
selectsWithKeyboardData.map((testData) => {
selectsWithKeyboard(testData);
});
});
await closed;
expect(
submenuChanged.withArgs("Two").calledOnce,
`submenu changed ${submenuChanged.callCount} times`
).to.be.true;
expect(rootChanged.withArgs("Has submenu").calledOnce, "root changed").to.be.true;
closesOnPointerLeave();
returnsFocusToRootWhenClosingSubmenu();
persistsThroughMouseLeaveAndReturn();
doesNotOpenWhenDisabled();
persistsWhenMovingBetweenItemAndSubmenu();
continuesToOpenWhenMovingBetweenItemAndSubmenu();
});
describe("directive", () => {
beforeEach(async function() {
this.rootChanged = spy();
this.submenuChanged = spy();
this.el = await fixture(html`
<sp-menu
@change=${(event) => {
this.rootChanged(event.target.value);
}}
>
<sp-menu-item>No submenu</sp-menu-item>
<sp-menu-item class="root">
Has submenu
<sp-menu
slot="submenu"
@change=${(event) => {
this.submenuChanged(event.target.value);
}}
${slottableRequest(renderSubmenu)}
></sp-menu>
</sp-menu-item>
</sp-menu>
`);
await elementUpdated(this.el);
await nextFrame();
await nextFrame();
this.rootItem = this.el.querySelector(".root");
});
describe("selects", () => {
selectWithPointer();
selectsWithKeyboardData.map((testData) => {
selectsWithKeyboard(testData);
});
});
closesOnPointerLeave();
returnsFocusToRootWhenClosingSubmenu();
persistsThroughMouseLeaveAndReturn();
doesNotOpenWhenDisabled();
persistsWhenMovingBetweenItemAndSubmenu();
continuesToOpenWhenMovingBetweenItemAndSubmenu();
});
it("closes deep tree on selection", async function() {

@@ -197,432 +604,5 @@ const rootChanged = spy();

});
[
{
dir: "ltr",
openKey: "ArrowRight",
closeKey: "ArrowLeft"
},
{
dir: "rtl",
openKey: "ArrowLeft",
closeKey: "ArrowRight"
}
].map((testData) => {
it(`selects - keyboard: ${testData.dir}`, async function() {
var _a, _b;
const rootChanged = spy();
const submenuChanged = spy();
const el = await fixture(
html`
<sp-menu
id="base"
@change=${(event) => {
rootChanged(event.target.value);
}}
>
<sp-menu-item class="root">
Has submenu
<sp-menu
id="sub"
slot="submenu"
@change=${(event) => {
submenuChanged(event.target.value);
}}
>
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`,
testData.dir
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const submenu = el.querySelector('[slot="submenu"]');
const submenuItem = el.querySelector(".submenu-item-2");
expect(rootItem.open).to.be.false;
el.focus();
await elementUpdated(el);
let opened = oneEvent(rootItem, "sp-opened");
await sendKeys({
press: testData.openKey
});
await opened;
expect(rootItem.open).to.be.true;
expect(
submenu === document.activeElement,
`${(_a = document.activeElement) == null ? void 0 : _a.id}`
).to.be.true;
let closed = oneEvent(rootItem, "sp-closed");
await sendKeys({
press: testData.closeKey
});
await closed;
expect(rootItem.open).to.be.false;
expect(
el === document.activeElement,
`${(_b = document.activeElement) == null ? void 0 : _b.id}`
).to.be.true;
opened = oneEvent(rootItem, "sp-opened");
await sendKeys({
press: testData.openKey
});
await opened;
expect(rootItem.open).to.be.true;
await sendKeys({
press: "ArrowDown"
});
await elementUpdated(submenu);
await elementUpdated(submenuItem);
expect(submenu.getAttribute("aria-activedescendant")).to.equal(
submenuItem.id
);
closed = oneEvent(rootItem, "sp-closed");
await sendKeys({
press: "Enter"
});
await closed;
expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
expect(rootChanged.called, "root has changed").to.be.true;
expect(
rootChanged.calledWith("Has submenu"),
"root specifically changed"
).to.be.true;
});
});
it("closes on `pointerleave`", async () => {
const el = await fixture(
html`
<sp-menu>
<sp-menu-item class="root">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
const opened = oneEvent(rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(rootItem.open).to.be.true;
const closed = oneEvent(rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await closed;
expect(rootItem.open).to.be.false;
});
it("stays open when mousing off menu item and back again", async () => {
const el = await fixture(
html`
<sp-menu>
<sp-menu-item class="root">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
const opened = oneEvent(rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(rootItem.open).to.be.true;
const closed = oneEvent(rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height * 2
]
}
]
});
await closed;
});
it("continues to open when mousing between menu item and submenu", async function() {
const clickSpy = spy();
const el = await fixture(
html`
<sp-menu>
<sp-menu-item class="root">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item
class="submenu-item-2"
@click=${() => clickSpy()}
>
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const subItem = el.querySelector(".submenu-item-2");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
const opened = oneEvent(rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
const subItemBoundingRect = subItem.getBoundingClientRect();
await sendMouse({
steps: [
{
type: "move",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await opened;
expect(rootItem.open).to.be.true;
await aTimeout(150);
expect(rootItem.open).to.be.true;
const closed = oneEvent(rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await closed;
expect(clickSpy.callCount).to.equal(1);
});
it("stays open when mousing between menu item and submenu", async () => {
const clickSpy = spy();
const el = await fixture(
html`
<sp-menu>
<sp-menu-item class="root">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item
class="submenu-item-2"
@click=${() => clickSpy()}
>
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const subItem = el.querySelector(".submenu-item-2");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
const opened = oneEvent(rootItem, "sp-opened");
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await opened;
await nextFrame();
await nextFrame();
const subItemBoundingRect = subItem.getBoundingClientRect();
expect(rootItem.open).to.be.true;
await sendMouse({
steps: [
{
type: "move",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
expect(rootItem.open).to.be.true;
await aTimeout(150);
expect(rootItem.open).to.be.true;
const closed = oneEvent(rootItem, "sp-closed");
await sendMouse({
steps: [
{
type: "click",
position: [
subItemBoundingRect.left + subItemBoundingRect.width / 2,
subItemBoundingRect.top + subItemBoundingRect.height / 2
]
}
]
});
await closed;
expect(clickSpy.callCount).to.equal(1);
});
it("not opens if disabled", async () => {
const el = await fixture(
html`
<sp-menu>
<sp-menu-item disabled class="root">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu>
`
);
await elementUpdated(el);
const rootItem = el.querySelector(".root");
const rootItemBoundingRect = rootItem.getBoundingClientRect();
expect(rootItem.open).to.be.false;
await sendMouse({
steps: [
{
type: "move",
position: [
rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
rootItemBoundingRect.top + rootItemBoundingRect.height / 2
]
}
]
});
await new Promise((r) => setTimeout(r, 200));
expect(rootItem.open).to.be.false;
});
it("closes all decendent submenus when closing a ancestor menu", async () => {
const el = await fixture(html`
<sp-action-menu>
<sp-action-menu label="Closing ancestors will close submenus">
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>

@@ -695,202 +675,152 @@ <sp-menu-group role="none" id="group">

});
it("closes back to the first overlay without a `root` when clicking away", async function() {
const el = await fixture(html`
<sp-action-menu>
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
<sp-menu-group role="none">
<span slot="header">New York</span>
<sp-menu-item>Bronx</sp-menu-item>
<sp-menu-item id="submenu-item-1">
Brooklyn
<sp-menu slot="submenu">
<sp-menu-item id="submenu-item-2">
Ft. Greene
<sp-menu slot="submenu">
<sp-menu-item>S. Oxford St</sp-menu-item>
<sp-menu-item>S. Portland Ave</sp-menu-item>
<sp-menu-item>S. Elliot Pl</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item disabled>Park Slope</sp-menu-item>
<sp-menu-item>Williamsburg</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item id="submenu-item-3">
Manhattan
<sp-menu slot="submenu">
<sp-menu-item disabled>SoHo</sp-menu-item>
<sp-menu-item>
Union Square
<sp-menu slot="submenu">
<sp-menu-item>14th St</sp-menu-item>
<sp-menu-item>Broadway</sp-menu-item>
<sp-menu-item>Park Ave</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item>Upper East Side</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
`);
const rootMenu1 = el.querySelector("#submenu-item-1");
const childMenu2 = el.querySelector("#submenu-item-2");
expect(el.open).to.be.false;
let opened = oneEvent(el, "sp-opened");
el.click();
await opened;
expect(el.open).to.be.true;
opened = oneEvent(rootMenu1, "sp-opened");
rootMenu1.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
opened = oneEvent(childMenu2, "sp-opened");
childMenu2.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = Promise.all([
oneEvent(childMenu2, "sp-closed"),
oneEvent(rootMenu1, "sp-closed"),
oneEvent(el, "sp-closed")
]);
await sendMouse({
steps: [
{
type: "click",
position: [600, 5]
}
]
describe("deep tree", () => {
beforeEach(async function() {
this.el = await fixture(html`
<sp-action-menu label="Deep submenu tree">
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
<sp-menu-group role="none">
<span slot="header">New York</span>
<sp-menu-item id="no-submenu">Bronx</sp-menu-item>
<sp-menu-item id="submenu-item-1">
Brooklyn
<sp-menu slot="submenu">
<sp-menu-item id="submenu-item-2">
Ft. Greene
<sp-menu slot="submenu">
<sp-menu-item>
S. Oxford St
</sp-menu-item>
<sp-menu-item>
S. Portland Ave
</sp-menu-item>
<sp-menu-item>
S. Elliot Pl
</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item disabled>Park Slope</sp-menu-item>
<sp-menu-item id="ancestor-item">
Williamsburg
</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item id="submenu-item-3">
Manhattan
<sp-menu slot="submenu">
<sp-menu-item disabled>SoHo</sp-menu-item>
<sp-menu-item>
Union Square
<sp-menu slot="submenu">
<sp-menu-item>14th St</sp-menu-item>
<sp-menu-item>Broadway</sp-menu-item>
<sp-menu-item>Park Ave</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item>Upper East Side</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
`);
await nextFrame();
await nextFrame();
});
await closed;
});
it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered", async () => {
const el = await fixture(html`
<sp-action-menu>
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
<sp-menu-group role="none">
<span slot="header">New York</span>
<sp-menu-item id="no-submenu">Bronx</sp-menu-item>
<sp-menu-item id="submenu-item-1">
Brooklyn
<sp-menu slot="submenu">
<sp-menu-item id="submenu-item-2">
Ft. Greene
</sp-menu-item>
<sp-menu-item disabled>Park Slope</sp-menu-item>
<sp-menu-item id="ancestor-item">
Williamsburg
</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item id="submenu-item-3">
Manhattan
<sp-menu slot="submenu">
<sp-menu-item disabled>SoHo</sp-menu-item>
<sp-menu-item>Union Square</sp-menu-item>
<sp-menu-item>Upper East Side</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
`);
const rootMenu = el.querySelector("#submenu-item-1");
const noSubmenu = el.querySelector("#no-submenu");
expect(el.open).to.be.false;
let opened = oneEvent(el, "sp-opened");
el.click();
await opened;
expect(el.open).to.be.true;
opened = oneEvent(rootMenu, "sp-opened");
rootMenu.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = oneEvent(rootMenu, "sp-closed");
noSubmenu.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await closed;
});
it("closes decendent menus when Menu Item in ancestor is clicked", async function() {
const el = await fixture(html`
<sp-action-menu>
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
<sp-menu-group role="none">
<span slot="header">New York</span>
<sp-menu-item>Bronx</sp-menu-item>
<sp-menu-item id="submenu-item-1">
Brooklyn
<sp-menu slot="submenu">
<sp-menu-item id="submenu-item-2">
Ft. Greene
<sp-menu slot="submenu">
<sp-menu-item>S. Oxford St</sp-menu-item>
<sp-menu-item>S. Portland Ave</sp-menu-item>
<sp-menu-item>S. Elliot Pl</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item disabled>Park Slope</sp-menu-item>
<sp-menu-item id="ancestor-item">
Williamsburg
</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item id="submenu-item-3">
Manhattan
<sp-menu slot="submenu">
<sp-menu-item disabled>SoHo</sp-menu-item>
<sp-menu-item>
Union Square
<sp-menu slot="submenu">
<sp-menu-item>14th St</sp-menu-item>
<sp-menu-item>Broadway</sp-menu-item>
<sp-menu-item>Park Ave</sp-menu-item>
</sp-menu>
</sp-menu-item>
<sp-menu-item>Upper East Side</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
`);
await nextFrame();
await nextFrame();
const rootMenu1 = el.querySelector("#submenu-item-1");
const childMenu2 = el.querySelector("#submenu-item-2");
const ancestorItem = el.querySelector("#ancestor-item");
expect(el.open).to.be.false;
let opened = oneEvent(el, "sp-opened");
el.click();
await opened;
expect(el.open).to.be.true;
opened = oneEvent(rootMenu1, "sp-opened");
rootMenu1.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
opened = oneEvent(childMenu2, "sp-opened");
childMenu2.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = Promise.all([
oneEvent(childMenu2, "sp-closed"),
oneEvent(rootMenu1, "sp-closed"),
oneEvent(el, "sp-closed")
]);
const rect = ancestorItem.getBoundingClientRect();
await sendMouse({
steps: [
{
type: "click",
position: [
rect.left + rect.width / 2,
rect.top + rect.height / 2
]
}
]
it("closes back to the first overlay without a `root` when clicking away", async function() {
const rootMenu1 = this.el.querySelector("#submenu-item-1");
const childMenu2 = this.el.querySelector("#submenu-item-2");
expect(this.el.open).to.be.false;
let opened = oneEvent(this.el, "sp-opened");
this.el.click();
await opened;
expect(this.el.open).to.be.true;
opened = oneEvent(rootMenu1, "sp-opened");
rootMenu1.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
opened = oneEvent(childMenu2, "sp-opened");
childMenu2.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = Promise.all([
oneEvent(childMenu2, "sp-closed"),
oneEvent(rootMenu1, "sp-closed"),
oneEvent(this.el, "sp-closed")
]);
await sendMouse({
steps: [
{
type: "click",
position: [600, 5]
}
]
});
await closed;
});
await closed;
it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered", async function() {
const rootMenu = this.el.querySelector(
"#submenu-item-1"
);
const noSubmenu = this.el.querySelector("#no-submenu");
expect(this.el.open).to.be.false;
let opened = oneEvent(this.el, "sp-opened");
this.el.click();
await opened;
expect(this.el.open).to.be.true;
opened = oneEvent(rootMenu, "sp-opened");
rootMenu.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = oneEvent(rootMenu, "sp-closed");
noSubmenu.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await closed;
});
it("closes decendent menus when Menu Item in ancestor is clicked", async function() {
const rootMenu1 = this.el.querySelector(
"#submenu-item-1"
);
const childMenu2 = this.el.querySelector(
"#submenu-item-2"
);
const ancestorItem = this.el.querySelector(
"#ancestor-item"
);
expect(this.el.open).to.be.false;
let opened = oneEvent(this.el, "sp-opened");
this.el.click();
await opened;
expect(this.el.open).to.be.true;
opened = oneEvent(rootMenu1, "sp-opened");
rootMenu1.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
opened = oneEvent(childMenu2, "sp-opened");
childMenu2.dispatchEvent(
new PointerEvent("pointerenter", { bubbles: true })
);
await opened;
const closed = Promise.all([
oneEvent(childMenu2, "sp-closed"),
oneEvent(rootMenu1, "sp-closed"),
oneEvent(this.el, "sp-closed")
]);
const rect = ancestorItem.getBoundingClientRect();
await sendMouse({
steps: [
{
type: "click",
position: [
rect.left + rect.width / 2,
rect.top + rect.height / 2
]
}
]
});
await closed;
});
});

@@ -914,27 +844,7 @@ it('cleans up submenus that close before they are "open"', async () => {

Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
<sp-menu slot="submenu">${renderSubmenu()}</sp-menu>
</sp-menu-item>
<sp-menu-item class="root-2">
Has submenu
<sp-menu slot="submenu">
<sp-menu-item class="submenu-item-1">
One
</sp-menu-item>
<sp-menu-item class="submenu-item-2">
Two
</sp-menu-item>
<sp-menu-item class="submenu-item-3">
Three
</sp-menu-item>
</sp-menu>
<sp-menu slot="submenu">${renderSubmenu()}</sp-menu>
</sp-menu-item>

@@ -941,0 +851,0 @@ </sp-menu>

custom-elements.json

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is not supported yet

src/menu-item.css.js.map

Sorry, the diff of this file is not supported yet

src/MenuItem.dev.js.map

Sorry, the diff of this file is not supported yet

src/MenuItem.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

test/menu-memory.test.js.map

Sorry, the diff of this file is not supported yet

test/menu.test.js.map

Sorry, the diff of this file is not supported yet

test/submenu.test.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc