@spectrum-web-components/menu 1.2.0-beta.4 → 1.2.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +11 -11
- package/src/menu-item.css.dev.js +1 -1
- package/src/menu-item.css.dev.js.map +1 -1
- package/src/menu-item.css.js +1 -1
- package/src/menu-item.css.js.map +1 -1
- package/stories/submenu.stories.js +69 -0
- package/stories/submenu.stories.js.map +2 -2
- package/test/submenu.test.js +32 -0
- package/test/submenu.test.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/menu",
|
|
3
|
-
"version": "1.2.0-beta.
|
|
3
|
+
"version": "1.2.0-beta.5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -90,15 +90,15 @@
|
|
|
90
90
|
],
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"@lit-labs/observers": "^2.0.2",
|
|
93
|
-
"@spectrum-web-components/action-button": "^1.2.0-beta.
|
|
94
|
-
"@spectrum-web-components/base": "^1.2.0-beta.
|
|
95
|
-
"@spectrum-web-components/divider": "^1.2.0-beta.
|
|
96
|
-
"@spectrum-web-components/icon": "^1.2.0-beta.
|
|
97
|
-
"@spectrum-web-components/icons-ui": "^1.2.0-beta.
|
|
98
|
-
"@spectrum-web-components/overlay": "^1.2.0-beta.
|
|
99
|
-
"@spectrum-web-components/popover": "^1.2.0-beta.
|
|
100
|
-
"@spectrum-web-components/reactive-controllers": "^1.2.0-beta.
|
|
101
|
-
"@spectrum-web-components/shared": "^1.2.0-beta.
|
|
93
|
+
"@spectrum-web-components/action-button": "^1.2.0-beta.5",
|
|
94
|
+
"@spectrum-web-components/base": "^1.2.0-beta.5",
|
|
95
|
+
"@spectrum-web-components/divider": "^1.2.0-beta.5",
|
|
96
|
+
"@spectrum-web-components/icon": "^1.2.0-beta.5",
|
|
97
|
+
"@spectrum-web-components/icons-ui": "^1.2.0-beta.5",
|
|
98
|
+
"@spectrum-web-components/overlay": "^1.2.0-beta.5",
|
|
99
|
+
"@spectrum-web-components/popover": "^1.2.0-beta.5",
|
|
100
|
+
"@spectrum-web-components/reactive-controllers": "^1.2.0-beta.5",
|
|
101
|
+
"@spectrum-web-components/shared": "^1.2.0-beta.5"
|
|
102
102
|
},
|
|
103
103
|
"devDependencies": {
|
|
104
104
|
"@spectrum-css/menu": "8.0.0-s2-foundations.17"
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"./sp-*.js",
|
|
110
110
|
"./**/*.dev.js"
|
|
111
111
|
],
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "344e1fbac943063f6f221f283f546c76a21bdd8f"
|
|
113
113
|
}
|
package/src/menu-item.css.dev.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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}
|
|
4
|
+
.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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%;overflow-y:auto}:host([no-wrap]) #label{display:block}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=menu-item.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:\".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . .\"1fr\"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\"\". . . .descriptionArea. . .\"\". . . .submenuArea. . .\"/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:\".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . .\"1fr\"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\"\". . . .descriptionArea. . .\"\". . . .submenuArea. . .\"/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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%;overflow-y:auto}:host([no-wrap]) #label{display:block}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/menu-item.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as e}from"@spectrum-web-components/base";const o=e`
|
|
2
|
-
.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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}
|
|
2
|
+
.checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . ."1fr"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"". . . .descriptionArea. . ."". . . .submenuArea. . ."/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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%;overflow-y:auto}:host([no-wrap]) #label{display:block}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=menu-item.css.js.map
|
package/src/menu-item.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:\".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . .\"1fr\"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\"\". . . .descriptionArea. . .\"\". . . .submenuArea. . .\"/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .checkmark{display:var(--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display));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));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;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))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}.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-back:focus-visible{box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*var(--spectrum-menu-item-focus-indicator-direction-scalar,1))0 0 0 var(--highcontrast-menu-item-focus-indicator-color,var(--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}.spectrum-Menu-backButton:focus-visible{outline:var(--spectrum-focus-indicator-thickness)solid var(--spectrum-focus-indicator-color);outline-offset:calc((var(--spectrum-focus-indicator-thickness) + 1px)*-1)}.spectrum-Menu-backHeading{color:var(--highcontrast-menu-item-color-default,var(--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)));font-size:var(--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size));font-weight:var(--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight));line-height:var(--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height));display:block}::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)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual))}: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));grid-template:\".chevronAreaCollapsible.headingIconArea sectionHeadingArea. . .\"1fr\"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\"\". . . .descriptionArea. . .\"\". . . .submenuArea. . .\"/auto auto auto auto 1fr auto auto auto;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;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}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){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([focused])>#label,:host(:focus)>#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([focused])>[name=description]::slotted(*),:host(:focus)>[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([focused])>::slotted([slot=value]),:host(:focus)>::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([focused])>.icon:not(.chevron,.checkmark),:host(:focus)>.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([focused])>.chevron,:host(:focus)>.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([focused])>.checkmark,:host(:focus)>.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:dir(rtl),: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)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}:host([focused]) .spectrum-Menu-back,:host([focused]){box-shadow:inset calc(var(--mod-menu-item-focus-indicator-width,var(--spectrum-menu-item-focus-indicator-width))*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)));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 .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{--mod-switch-control-label-spacing:0;--mod-switch-spacing-top-to-label:0;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)));hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}::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));grid-area:valueArea;justify-self:end}.spectrum-Menu-itemActions,::slotted([slot=value]){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))}.spectrum-Menu-itemActions{grid-area:actionsArea}[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));grid-area:descriptionArea;margin-block-start:var(--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-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([focused]) .spectrum-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .spectrum-Menu-item--collapsible.is-open,.spectrum-Menu-item--collapsible.is-open:focus{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]){grid-area:headingIconArea}.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)))}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}: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)));grid-area:chevronAreaDrillIn;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)))}@media (hover: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)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}: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]){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}.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([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([has-submenu][focused]) .chevron,:host([has-submenu]:focus) .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)))}.spectrum-Menu-back{padding-inline:0 var(--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content));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:0;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}:host{text-align:initial}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--highcontrast-menu-item-color-disabled,var(--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)))}: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%;overflow-y:auto}:host([no-wrap]) #label{display:block}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -340,6 +340,75 @@ export const customRootSubmenu = () => {
|
|
|
340
340
|
</sp-action-menu>
|
|
341
341
|
`;
|
|
342
342
|
};
|
|
343
|
+
export const customRootSubmenuWithScroll = () => {
|
|
344
|
+
return html`
|
|
345
|
+
<sp-action-menu label="More Actions">
|
|
346
|
+
<sp-menu-item>Bronx</sp-menu-item>
|
|
347
|
+
<sp-menu-item id="submenu-item-1">
|
|
348
|
+
Brooklyn
|
|
349
|
+
<div role="menuitem" slot="submenu" style="padding: 12px">
|
|
350
|
+
<sp-menu-item>Additional options</sp-menu-item>
|
|
351
|
+
<sp-menu-item>Available on request</sp-menu-item>
|
|
352
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
353
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
354
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
355
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
356
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
357
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
358
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
359
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
360
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
361
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
362
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
363
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
364
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
365
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
366
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
367
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
368
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
369
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
370
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
371
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
372
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
373
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
374
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
375
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
376
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
377
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
378
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
379
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
380
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
381
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
382
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
383
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
384
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
385
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
386
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
387
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
388
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
389
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
390
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
391
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
392
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
393
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
394
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
395
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
396
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
397
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
398
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
399
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
400
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
401
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
402
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
403
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
404
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
405
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
406
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
407
|
+
</div>
|
|
408
|
+
</sp-menu-item>
|
|
409
|
+
</sp-action-menu>
|
|
410
|
+
`;
|
|
411
|
+
};
|
|
343
412
|
customRootSubmenu.swc_vrt = {
|
|
344
413
|
skip: true
|
|
345
414
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["submenu.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.addEventListener(\n 'sp-closed',\n () => {\n this.menu.removeEventListener(\n 'sp-opened',\n this.handleMenuOpened\n );\n },\n { once: true }\n );\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${handleRootChange}\n @sp-opened=${clearValues}\n >\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>\n Queens\n <sp-menu slot=\"submenu\">\n <sp-menu-item>\n You shouldn't be able to see this!\n </sp-menu-item>\n <sp-menu-item>Forest Hills</sp-menu-item>\n <sp-menu-item>Jamaica</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const overlay = document.querySelector('sp-overlay') as Overlay;\n clearValues();\n overlay.triggerElement = virtualTrigger;\n overlay.willPreventClose = true;\n overlay.type = 'auto';\n overlay.placement = 'right-start';\n overlay.open = true;\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${contextmenu}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n <sp-overlay>\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const customRootSubmenu = (): TemplateResult => {\n return html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <div role=\"menuitem\" slot=\"submenu\" style=\"padding: 12px\">\n <img\n src=\"https://placekitten.com/200/200\"\n alt=\"Kitten\"\n style=\"width: 100%; height: auto; border-radius: 4px\"\n />\n <p>I am an arbitrary content in submenu</p>\n </div>\n </sp-menu-item>\n </sp-action-menu>\n `;\n};\n\ncustomRootSubmenu.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.addEventListener(\n 'sp-closed',\n () => {\n this.menu.removeEventListener(\n 'sp-opened',\n this.handleMenuOpened\n );\n },\n { once: true }\n );\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${handleRootChange}\n @sp-opened=${clearValues}\n >\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>\n Queens\n <sp-menu slot=\"submenu\">\n <sp-menu-item>\n You shouldn't be able to see this!\n </sp-menu-item>\n <sp-menu-item>Forest Hills</sp-menu-item>\n <sp-menu-item>Jamaica</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const overlay = document.querySelector('sp-overlay') as Overlay;\n clearValues();\n overlay.triggerElement = virtualTrigger;\n overlay.willPreventClose = true;\n overlay.type = 'auto';\n overlay.placement = 'right-start';\n overlay.open = true;\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${contextmenu}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n <sp-overlay>\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const customRootSubmenu = (): TemplateResult => {\n return html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <div role=\"menuitem\" slot=\"submenu\" style=\"padding: 12px\">\n <img\n src=\"https://placekitten.com/200/200\"\n alt=\"Kitten\"\n style=\"width: 100%; height: auto; border-radius: 4px\"\n />\n <p>I am an arbitrary content in submenu</p>\n </div>\n </sp-menu-item>\n </sp-action-menu>\n `;\n};\n\nexport const customRootSubmenuWithScroll = (): TemplateResult => {\n return html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <div role=\"menuitem\" slot=\"submenu\" style=\"padding: 12px\">\n <sp-menu-item>Additional options</sp-menu-item>\n <sp-menu-item>Available on request</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and mask...</sp-menu-item>\n <sp-menu-item value=\"item-5\">Save selection</sp-menu-item>\n </div>\n </sp-menu-item>\n </sp-action-menu>\n `;\n};\n\ncustomRootSubmenu.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAkB,sBAAsB;AACxC,OAAO;AACP,OAAO;AAIP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEA,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,qBAAqB,YAAY;AAAA,EAGnC,cAAc;AACV,UAAM;AA6BV,4BAAmB,OAAO,UAAgC;AACtD,WAAK,KAAK,oBAAoB,aAAa,KAAK,gBAAgB;AAChE,YAAM,UAAU;AAChB,YAAO,MAAM,OAAsB;AAEnC,WAAK,UAAU,SAAS,cAAc,iBAAiB;AACvD,UAAI,CAAC,KAAK,SAAS;AACf;AAAA,MACJ;AAEA,WAAK,QAAQ,iBAAiB,aAAa,KAAK,mBAAmB;AACnE,WAAK,QAAQ,MAAM;AAAA,IACvB;AAEA,+BAAsB,OAAO,UAAgC;AACzD,WAAK,QAAQ,oBAAoB,aAAa,KAAK,mBAAmB;AACtE,YAAM,UAAU;AAChB,YAAO,MAAM,OAAoB;AAEjC,WAAK,eAAe,SAAS;AAAA,QACzB;AAAA,MACJ;AACA,UAAI,CAAC,KAAK,cAAc;AACpB;AAAA,MACJ;AACA,WAAK,aAAa;AAAA,QACd;AAAA,QACA,KAAK;AAAA,MACT;AACA,WAAK,aAAa,MAAM;AAAA,IAC5B;AAEA,oCAA2B,OAAO,UAAgC;AAC9D,WAAK,aAAa;AAAA,QACd;AAAA,QACA,KAAK;AAAA,MACT;AACA,YAAM,UAAU;AAChB,YAAO,MAAM,OAAoB;AAEjC,WAAK,MAAM,IAAI;AAAA,IACnB;AAEA,SAAQ,eAAiC,QAAQ,QAAQ,KAAK;AAvE1D,SAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ;AACrC,WAAK,QAAQ;AACb,WAAK,MAAM;AAAA,IACf,CAAC;AAAA,EACL;AAAA,EAMA,MAAM,QAAuB;AACzB,UAAM,UAAU;AAEhB,SAAK,OAAO,SAAS,cAAc,gBAAgB;AACnD,SAAK,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;AAC7D,SAAK,KAAK;AAAA,MACN;AAAA,MACA,MAAM;AACF,aAAK,KAAK;AAAA,UACN;AAAA,UACA,KAAK;AAAA,QACT;AAAA,MACJ;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACjB;AACA,SAAK,KAAK,OAAO;AAAA,EACrB;AAAA,EA+CA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,iBAAiB,YAAY;AAEnD,MAAM,mBAAmB,CAAC,UAAgD;AACtE,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;AAEO,aAAM,UAAU,MAAsB;AACzC,QAAM,cAAc,MAIf;AACD,WAAO;AAAA,MACH,MAAM,SAAS,cAAc,aAAa;AAAA,MAC1C,OAAO,SAAS,cAAc,cAAc;AAAA,MAC5C,QAAQ,SAAS,cAAc,eAAe;AAAA,IAClD;AAAA,EACJ;AACA,QAAM,cAAc,MAAY;AAC5B,UAAM,WAAW,YAAY;AAC7B,aAAS,KAAK,cAAc;AAC5B,aAAS,MAAM,cAAc;AAC7B,aAAS,OAAO,cAAc;AAAA,EAClC;AACA,QAAM,mBAAmB,CAAC,UAAgD;AACtE,UAAM,WAAW,YAAY;AAC7B,aAAS,KAAK,cAAc,MAAM,OAAO;AAAA,EAC7C;AACA,QAAM,8BAA8B,CAChC,UACO;AACP,UAAM,WAAW,YAAY;AAC7B,aAAS,MAAM,cAAc,MAAM,OAAO,SAAS,CAAC,KAAK;AAAA,EAC7D;AACA,QAAM,+BAA+B,CACjC,UACO;AACP,UAAM,WAAW,YAAY;AAC7B,aAAS,OAAO,cAAc,MAAM,OAAO,SAAS,CAAC,KAAK;AAAA,EAC9D;AACA,SAAO;AAAA;AAAA;AAAA,sBAGW,gBAAgB;AAAA,yBACb,WAAW;AAAA;AAAA;AAAA;AAAA,0BAIV,MAAM,QAAQ,IAAI,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCASzB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAMnB,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAepC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAOnB,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCtE;AAEA,QAAQ,aAAa,CAAC,gBAAgB;AAE/B,aAAM,cAAc,MAAsB;AAC7C,QAAM,cAAc,OAAO,UAAuC;AAC9D,UAAM,eAAe;AACrB,UAAM,iBAAiB,IAAI,eAAe,MAAM,SAAS,MAAM,OAAO;AACtE,UAAM,UAAU,SAAS,cAAc,YAAY;AACnD,gBAAY;AACZ,YAAQ,iBAAiB;AACzB,YAAQ,mBAAmB;AAC3B,YAAQ,OAAO;AACf,YAAQ,YAAY;AACpB,YAAQ,OAAO;AAAA,EACnB;AACA,QAAM,cAAc,MAAiD;AACjE,WAAO;AAAA,MACH,MAAM,SAAS,cAAc,aAAa;AAAA,MAC1C,OAAO,SAAS,cAAc,cAAc;AAAA,IAChD;AAAA,EACJ;AACA,QAAM,cAAc,MAAY;AAC5B,UAAM,WAAW,YAAY;AAC7B,aAAS,KAAK,cAAc;AAC5B,aAAS,MAAM,cAAc;AAAA,EACjC;AACA,QAAM,mBAAmB,CAAC,UAAgD;AA1Q9E;AA2QQ,UAAM,WAAW,YAAY;AAC7B,aAAS,KAAK,cAAc,MAAM,OAAO;AACzC,gBAAM,OAAO,kBAAb,mBAA4B;AAAA,MACxB,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA;AAAA,EAE5C;AACA,QAAM,8BAA8B,CAChC,UACO;AACP,UAAM,WAAW,YAAY;AAC7B,aAAS,MAAM,cAAc,MAAM,OAAO,SAAS,CAAC,KAAK;AAAA,EAC7D;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6CAUkC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAa/B,CAAC,UAAc;AA9SxC;AA+SoB,uBAAM,WAAN,mBAAc;AAAA,MACV,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA;AAAA,GACvC;AAAA;AAAA,mCAEc,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAqBT,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCrE;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,8BAA8B,MAAsB;AAC7D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmEX;AAEA,kBAAkB,UAAU;AAAA,EACxB,MAAM;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/submenu.test.js
CHANGED
|
@@ -966,5 +966,37 @@ describe("Submenu", () => {
|
|
|
966
966
|
]
|
|
967
967
|
});
|
|
968
968
|
});
|
|
969
|
+
it("should make submenu scrollable when content exceeds max height", async () => {
|
|
970
|
+
const el = await fixture(html`
|
|
971
|
+
<sp-menu>
|
|
972
|
+
<sp-menu-item>
|
|
973
|
+
Parent Item
|
|
974
|
+
<div role="menu" slot="submenu">
|
|
975
|
+
${Array(20).fill(0).map((_, i) => html`
|
|
976
|
+
<sp-menu-item>Submenu Item ${i + 1}</sp-menu-item>
|
|
977
|
+
`)}
|
|
978
|
+
</div>
|
|
979
|
+
</sp-menu-item>
|
|
980
|
+
</sp-menu>
|
|
981
|
+
`);
|
|
982
|
+
await elementUpdated(el);
|
|
983
|
+
const menuItem = el.querySelector("sp-menu-item");
|
|
984
|
+
const submenu = menuItem.querySelector('[slot="submenu"]');
|
|
985
|
+
const opened = oneEvent(menuItem, "sp-opened");
|
|
986
|
+
menuItem.dispatchEvent(
|
|
987
|
+
new PointerEvent("pointerenter", { bubbles: true })
|
|
988
|
+
);
|
|
989
|
+
await opened;
|
|
990
|
+
submenu.style.maxHeight = "200px";
|
|
991
|
+
await elementUpdated(submenu);
|
|
992
|
+
const computedStyle = window.getComputedStyle(submenu);
|
|
993
|
+
expect(computedStyle.overflowY).to.equal("auto");
|
|
994
|
+
expect(submenu.scrollHeight).to.be.greaterThan(submenu.clientHeight);
|
|
995
|
+
const initialScrollTop = submenu.scrollTop;
|
|
996
|
+
submenu.scrollTop = 50;
|
|
997
|
+
await elementUpdated(submenu);
|
|
998
|
+
expect(submenu.scrollTop).to.equal(50);
|
|
999
|
+
expect(submenu.scrollTop).to.not.equal(initialScrollTop);
|
|
1000
|
+
});
|
|
969
1001
|
});
|
|
970
1002
|
//# sourceMappingURL=submenu.test.js.map
|
package/test/submenu.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["submenu.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport { TemplateResult } from 'lit-html';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\n\ntype SelectsWithKeyboardTest = {\n dir: 'ltr' | 'rtl' | 'auto';\n openKey: 'ArrowRight' | 'ArrowLeft';\n closeKey: 'ArrowRight' | 'ArrowLeft';\n};\n\nconst selectsWithKeyboardData = [\n {\n dir: 'ltr',\n openKey: 'ArrowRight',\n closeKey: 'ArrowLeft',\n },\n {\n dir: 'rtl',\n openKey: 'ArrowLeft',\n closeKey: 'ArrowRight',\n },\n] as SelectsWithKeyboardTest[];\n\ndescribe('Submenu', () => {\n function selectWithPointer(): void {\n it('with pointer', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const item2 = document.querySelector('.submenu-item-2') as MenuItem;\n const item2BoundingRect = item2.getBoundingClientRect();\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n item2BoundingRect.left +\n item2BoundingRect.width / 2,\n item2BoundingRect.top +\n item2BoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(\n this.submenuChanged.withArgs('Two').calledOnce,\n `submenu changed ${this.submenuChanged.callCount} times`\n ).to.be.true;\n expect(\n this.rootChanged.withArgs('Has submenu').calledOnce,\n 'root changed'\n ).to.be.true;\n });\n }\n function selectsWithKeyboard(testData: SelectsWithKeyboardTest): void {\n it(`with keyboard: ${testData.dir}`, async function () {\n this.el.parentElement.dir = testData.dir;\n\n await elementUpdated(this.el);\n expect(this.rootItem.open).to.be.false;\n const input = document.createElement('input');\n this.el.insertAdjacentElement('beforebegin', input);\n input.focus();\n await sendKeys({\n press: 'Tab',\n });\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(this.rootItem);\n\n expect(this.rootItem.focused).to.be.true;\n\n let opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: testData.openKey,\n });\n await opened;\n\n let submenu = this.el.querySelector('[slot=\"submenu\"]') as Menu;\n let submenuItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n\n expect(this.rootItem.open).to.be.true;\n expect(\n submenu === document.activeElement,\n `${document.activeElement?.id}`\n ).to.be.true;\n\n let closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: testData.closeKey,\n });\n await closed;\n\n expect(this.rootItem.open).to.be.false;\n expect(\n this.el === document.activeElement,\n `${document.activeElement?.id}`\n ).to.be.true;\n\n opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: testData.openKey,\n });\n await opened;\n\n submenu = this.el.querySelector('[slot=\"submenu\"]') as Menu;\n submenuItem = this.el.querySelector('.submenu-item-2') as MenuItem;\n\n expect(this.rootItem.open).to.be.true;\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(submenu);\n await elementUpdated(submenuItem);\n\n expect(submenu.getAttribute('aria-activedescendant')).to.equal(\n submenuItem.id\n );\n\n closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: 'Enter',\n });\n await closed;\n\n expect(this.submenuChanged.calledWith('Two'), 'submenu changed').to\n .be.true;\n expect(this.rootChanged.called, 'root has changed').to.be.true;\n expect(\n this.rootChanged.calledWith('Has submenu'),\n 'root specifically changed'\n ).to.be.true;\n });\n }\n function returnsFocusToRootWhenClosingSubmenu(): void {\n it('returns visible focus when submenu closed', async function () {\n const input = document.createElement('input');\n this.el.insertAdjacentElement('beforebegin', input);\n input.focus();\n await sendKeys({\n press: 'Tab',\n });\n await elementUpdated(this.el);\n await nextFrame();\n await nextFrame();\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(this.el);\n await nextFrame();\n await nextFrame();\n expect(this.rootItem.active, 'not active').to.be.false;\n expect(\n this.rootItem.focused,\n `focused: ${document.activeElement?.localName}`\n ).to.be.true;\n expect(this.rootItem.open, 'not open').to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: 'ArrowRight',\n });\n await opened;\n\n expect(this.rootItem.active).to.be.true;\n expect(this.rootItem.focused).to.be.false;\n expect(this.rootItem.open).to.be.true;\n\n await sendKeys({\n press: 'ArrowDown',\n });\n\n expect(this.rootItem.active).to.be.true;\n expect(this.rootItem.focused).to.be.false;\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: 'ArrowLeft',\n });\n await closed;\n\n expect(this.rootItem.active).to.be.false;\n expect(this.rootItem.focused).to.be.true;\n expect(this.rootItem.open).to.be.false;\n });\n }\n function closesOnPointerLeave(): void {\n it('closes on `pointerleave`', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(this.rootItem.open).to.be.false;\n });\n }\n function persistsThroughMouseLeaveAndReturn(): void {\n it('stays open when mousing off menu item and back again', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await closed;\n });\n }\n function doesNotOpenWhenDisabled(): void {\n it('does not open when disabled', async function () {\n this.rootItem.disabled = true;\n await elementUpdated(this.rootItem);\n\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n // wait 200ms for open\n await new Promise((r) => setTimeout(r, 200));\n\n expect(this.rootItem.open).to.be.false;\n });\n }\n function persistsWhenMovingBetweenItemAndSubmenu(): void {\n it('stays open when mousing between menu item and submenu', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n await nextFrame();\n await nextFrame();\n\n const subItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n const clickSpy = spy();\n subItem.addEventListener('click', () => clickSpy());\n const subItemBoundingRect = subItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.true;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n expect(this.rootItem.open).to.be.true;\n // Ensure it _doesn't_ get closed.\n await aTimeout(150);\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(clickSpy.callCount).to.equal(1);\n });\n }\n function continuesToOpenWhenMovingBetweenItemAndSubmenu(): void {\n it('continues to open when mousing between menu item and submenu', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n // Wait for the overlay system to position the submenu before measuring it's position and moving to it.\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n const subItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n const clickSpy = spy();\n subItem.addEventListener('click', () => clickSpy());\n const subItemBoundingRect = subItem.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n expect(this.rootItem.open).to.be.true;\n // Ensure it _doesn't_ get closed.\n await aTimeout(150);\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(clickSpy.callCount).to.equal(1);\n });\n }\n const renderSubmenu = (): TemplateResult => html`\n <sp-menu-item class=\"submenu-item-1\">One</sp-menu-item>\n <sp-menu-item class=\"submenu-item-2\">Two</sp-menu-item>\n <sp-menu-item class=\"submenu-item-3\">Three</sp-menu-item>\n `;\n describe('static DOM', () => {\n beforeEach(async function () {\n this.rootChanged = spy();\n this.submenuChanged = spy();\n this.el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n this.rootChanged(event.target.value);\n }}\n >\n <sp-menu-item>No submenu</sp-menu-item>\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n this.submenuChanged(event.target.value);\n }}\n >\n ${renderSubmenu()}\n </sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(this.el);\n this.rootItem = this.el.querySelector('.root') as MenuItem;\n await elementUpdated(this.rootItem);\n });\n describe.skip('selects', () => {\n selectWithPointer();\n selectsWithKeyboardData.map((testData) => {\n selectsWithKeyboard(testData);\n });\n });\n closesOnPointerLeave();\n returnsFocusToRootWhenClosingSubmenu();\n persistsThroughMouseLeaveAndReturn();\n doesNotOpenWhenDisabled();\n persistsWhenMovingBetweenItemAndSubmenu();\n continuesToOpenWhenMovingBetweenItemAndSubmenu();\n });\n describe('directive', () => {\n beforeEach(async function () {\n this.rootChanged = spy();\n this.submenuChanged = spy();\n this.el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n this.rootChanged(event.target.value);\n }}\n >\n <sp-menu-item>No submenu</sp-menu-item>\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n this.submenuChanged(event.target.value);\n }}\n ${slottableRequest(renderSubmenu)}\n ></sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(this.el);\n this.rootItem = this.el.querySelector('.root') as MenuItem;\n await elementUpdated(this.rootItem);\n });\n describe('selects', () => {\n selectWithPointer();\n selectsWithKeyboardData.map((testData) => {\n selectsWithKeyboard(testData);\n });\n });\n closesOnPointerLeave();\n returnsFocusToRootWhenClosingSubmenu();\n persistsThroughMouseLeaveAndReturn();\n doesNotOpenWhenDisabled();\n persistsWhenMovingBetweenItemAndSubmenu();\n continuesToOpenWhenMovingBetweenItemAndSubmenu();\n });\n it('closes deep tree on selection', async function () {\n const rootChanged = spy();\n const submenuChanged = spy();\n const subSubmenuChanged = spy();\n const el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n rootChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n submenuChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"submenu-item-1\">One</sp-menu-item>\n <sp-menu-item class=\"submenu-item-2\">\n Two\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n subSubmenuChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"sub-submenu-item-1\">\n A\n </sp-menu-item>\n <sp-menu-item class=\"sub-submenu-item-2\">\n B\n </sp-menu-item>\n <sp-menu-item class=\"sub-submenu-item-3\">\n C\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item class=\"submenu-item-3\">\n Three\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n const rootItem = el.querySelector('.root') as MenuItem;\n const rootItemBoundingRect = rootItem.getBoundingClientRect();\n const item2 = document.querySelector('.submenu-item-2') as MenuItem;\n const itemC = document.querySelector('.sub-submenu-item-3') as MenuItem;\n expect(rootItem.open).to.be.false;\n\n let opened = oneEvent(rootItem, 'sp-opened');\n // Hover the root menu item to open a submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(rootItem.open).to.be.true;\n\n const item2BoundingRect = item2.getBoundingClientRect();\n\n opened = oneEvent(item2, 'sp-opened');\n // Move to the submenu item to open a submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n item2BoundingRect.left + item2BoundingRect.width / 2,\n item2BoundingRect.top + item2BoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(item2.open).to.be.true;\n\n const closed = oneEvent(rootItem, 'sp-closed');\n // click to select and close\n const itemCBoundingRect = itemC.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n itemCBoundingRect.left + itemCBoundingRect.width / 2,\n itemCBoundingRect.top + itemCBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be\n .true;\n expect(submenuChanged.calledWith('Two'), 'submenu changed').to.be.true;\n expect(subSubmenuChanged.calledWith('C'), 'sub submenu changed').to.be\n .true;\n });\n it('closes all decendent submenus when closing a ancestor menu', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"Closing ancestors will close submenus\">\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group role=\"none\" id=\"group\">\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu slot=\"submenu\" id=\"submenu-1\">\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu slot=\"submenu\" id=\"submenu-2\">\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item id=\"submenu-item-3\">\n Manhattan\n <sp-menu slot=\"submenu\" id=\"submenu-3\">\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu slot=\"submenu\">\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `);\n\n const rootMenu1 = el.querySelector('#submenu-item-1') as MenuItem;\n const rootMenu2 = el.querySelector('#submenu-item-3') as MenuItem;\n const childMenu2 = el.querySelector('#submenu-item-2') as MenuItem;\n\n expect(el.open).to.be.false;\n let opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n expect(el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n expect(rootMenu1.open).to.be.true;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n expect(childMenu2.open).to.be.true;\n\n const childMenu2Closed = oneEvent(childMenu2, 'sp-closed');\n const rootMenu1Closed = oneEvent(rootMenu1, 'sp-closed');\n const rootMenu2Opened = oneEvent(rootMenu2, 'sp-opened');\n rootMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await childMenu2Closed;\n await rootMenu1Closed;\n await rootMenu2Opened;\n });\n describe('deep tree', () => {\n beforeEach(async function () {\n this.el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"Deep submenu tree\">\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group role=\"none\">\n <span slot=\"header\">New York</span>\n <sp-menu-item id=\"no-submenu\">Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu slot=\"submenu\">\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu slot=\"submenu\">\n <sp-menu-item>\n S. Oxford St\n </sp-menu-item>\n <sp-menu-item>\n S. Portland Ave\n </sp-menu-item>\n <sp-menu-item>\n S. Elliot Pl\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item id=\"ancestor-item\">\n Williamsburg\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item id=\"submenu-item-3\">\n Manhattan\n <sp-menu slot=\"submenu\">\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu slot=\"submenu\">\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `);\n await nextFrame();\n await nextFrame();\n });\n it('closes back to the first overlay without a `root` when clicking away', async function () {\n const rootMenu1 = this.el.querySelector('#submenu-item-1') as Menu;\n const childMenu2 = this.el.querySelector('#submenu-item-2') as Menu;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n const closed = Promise.all([\n oneEvent(childMenu2, 'sp-closed'),\n oneEvent(rootMenu1, 'sp-closed'),\n oneEvent(this.el, 'sp-closed'),\n ]);\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [600, 5],\n },\n ],\n });\n await closed;\n });\n it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async function () {\n const rootMenu = this.el.querySelector(\n '#submenu-item-1'\n ) as MenuItem;\n const noSubmenu = this.el.querySelector('#no-submenu') as MenuItem;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu, 'sp-opened');\n rootMenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n const closed = oneEvent(rootMenu, 'sp-closed');\n noSubmenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await closed;\n });\n it('closes decendent menus when Menu Item in ancestor is clicked', async function () {\n const rootMenu1 = this.el.querySelector(\n '#submenu-item-1'\n ) as MenuItem;\n const childMenu2 = this.el.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n const ancestorItem = this.el.querySelector(\n '#ancestor-item'\n ) as MenuItem;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n const closed = Promise.all([\n oneEvent(childMenu2, 'sp-closed'),\n oneEvent(rootMenu1, 'sp-closed'),\n oneEvent(this.el, 'sp-closed'),\n ]);\n const rect = ancestorItem.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await closed;\n });\n });\n it('cleans up submenus that close before they are \"open\"', async () => {\n if ('showPopover' in document.createElement('div')) {\n return;\n }\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [1, 1],\n },\n ],\n });\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item class=\"root-1\">\n Has submenu\n <sp-menu slot=\"submenu\">${renderSubmenu()}</sp-menu>\n </sp-menu-item>\n <sp-menu-item class=\"root-2\">\n Has submenu\n <sp-menu slot=\"submenu\">${renderSubmenu()}</sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n\n await elementUpdated(el);\n const rootItem1 = el.querySelector('.root-1') as MenuItem;\n const rootItem2 = el.querySelector('.root-2') as MenuItem;\n expect(rootItem1.open, 'initially closed 1').to.be.false;\n expect(rootItem2.open, 'initially closed 2').to.be.false;\n\n const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();\n const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();\n\n // Open the first submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect1.left +\n rootItemBoundingRect1.width / 2,\n rootItemBoundingRect1.top +\n rootItemBoundingRect1.height / 2,\n ],\n },\n ],\n });\n // Open the second submenu, closing the first\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height / 2,\n ],\n },\n ],\n });\n // Open the first submenu, closing the second\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect1.left +\n rootItemBoundingRect1.width / 2,\n rootItemBoundingRect1.top +\n rootItemBoundingRect1.height / 2,\n ],\n },\n ],\n });\n // Open the second submenu, closing the first\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height / 2,\n ],\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n const closed = oneEvent(rootItem2, 'sp-closed');\n // Close the second submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height * 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(rootItem1.open, 'finally closed 1').to.be.false;\n expect(rootItem2.open, 'finally closed 2').to.be.false;\n });\n it('allows using non-menu-item elements as the root of a submenu', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item class=\"root\">\n Has submenu\n <div role=\"menuitem\" slot=\"submenu\">\n <sp-menu-item class=\"submenu-1\">One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n </div\n ></div>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(el);\n const rootItem = el.querySelector('.root') as MenuItem;\n const rootItemBoundingRect = rootItem.getBoundingClientRect();\n\n // Open the first submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n\n expect(rootItem.open).to.be.true;\n\n const firstSubMenuItemRect = el\n .querySelector('.submenu-1')\n ?.getBoundingClientRect();\n\n if (!firstSubMenuItemRect) {\n throw new Error('Submenu item not found');\n }\n\n // click to select\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n firstSubMenuItemRect.left +\n firstSubMenuItemRect.width / 2,\n firstSubMenuItemRect.top +\n firstSubMenuItemRect.height / 2,\n ],\n },\n ],\n });\n\n // This test will fail if the click event throws an error\n // because the submenu root is not a menu-item\n });\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport { TemplateResult } from 'lit-html';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\n\ntype SelectsWithKeyboardTest = {\n dir: 'ltr' | 'rtl' | 'auto';\n openKey: 'ArrowRight' | 'ArrowLeft';\n closeKey: 'ArrowRight' | 'ArrowLeft';\n};\n\nconst selectsWithKeyboardData = [\n {\n dir: 'ltr',\n openKey: 'ArrowRight',\n closeKey: 'ArrowLeft',\n },\n {\n dir: 'rtl',\n openKey: 'ArrowLeft',\n closeKey: 'ArrowRight',\n },\n] as SelectsWithKeyboardTest[];\n\ndescribe('Submenu', () => {\n function selectWithPointer(): void {\n it('with pointer', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const item2 = document.querySelector('.submenu-item-2') as MenuItem;\n const item2BoundingRect = item2.getBoundingClientRect();\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n item2BoundingRect.left +\n item2BoundingRect.width / 2,\n item2BoundingRect.top +\n item2BoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(\n this.submenuChanged.withArgs('Two').calledOnce,\n `submenu changed ${this.submenuChanged.callCount} times`\n ).to.be.true;\n expect(\n this.rootChanged.withArgs('Has submenu').calledOnce,\n 'root changed'\n ).to.be.true;\n });\n }\n function selectsWithKeyboard(testData: SelectsWithKeyboardTest): void {\n it(`with keyboard: ${testData.dir}`, async function () {\n this.el.parentElement.dir = testData.dir;\n\n await elementUpdated(this.el);\n expect(this.rootItem.open).to.be.false;\n const input = document.createElement('input');\n this.el.insertAdjacentElement('beforebegin', input);\n input.focus();\n await sendKeys({\n press: 'Tab',\n });\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(this.rootItem);\n\n expect(this.rootItem.focused).to.be.true;\n\n let opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: testData.openKey,\n });\n await opened;\n\n let submenu = this.el.querySelector('[slot=\"submenu\"]') as Menu;\n let submenuItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n\n expect(this.rootItem.open).to.be.true;\n expect(\n submenu === document.activeElement,\n `${document.activeElement?.id}`\n ).to.be.true;\n\n let closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: testData.closeKey,\n });\n await closed;\n\n expect(this.rootItem.open).to.be.false;\n expect(\n this.el === document.activeElement,\n `${document.activeElement?.id}`\n ).to.be.true;\n\n opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: testData.openKey,\n });\n await opened;\n\n submenu = this.el.querySelector('[slot=\"submenu\"]') as Menu;\n submenuItem = this.el.querySelector('.submenu-item-2') as MenuItem;\n\n expect(this.rootItem.open).to.be.true;\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(submenu);\n await elementUpdated(submenuItem);\n\n expect(submenu.getAttribute('aria-activedescendant')).to.equal(\n submenuItem.id\n );\n\n closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: 'Enter',\n });\n await closed;\n\n expect(this.submenuChanged.calledWith('Two'), 'submenu changed').to\n .be.true;\n expect(this.rootChanged.called, 'root has changed').to.be.true;\n expect(\n this.rootChanged.calledWith('Has submenu'),\n 'root specifically changed'\n ).to.be.true;\n });\n }\n function returnsFocusToRootWhenClosingSubmenu(): void {\n it('returns visible focus when submenu closed', async function () {\n const input = document.createElement('input');\n this.el.insertAdjacentElement('beforebegin', input);\n input.focus();\n await sendKeys({\n press: 'Tab',\n });\n await elementUpdated(this.el);\n await nextFrame();\n await nextFrame();\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(this.el);\n await nextFrame();\n await nextFrame();\n expect(this.rootItem.active, 'not active').to.be.false;\n expect(\n this.rootItem.focused,\n `focused: ${document.activeElement?.localName}`\n ).to.be.true;\n expect(this.rootItem.open, 'not open').to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendKeys({\n press: 'ArrowRight',\n });\n await opened;\n\n expect(this.rootItem.active).to.be.true;\n expect(this.rootItem.focused).to.be.false;\n expect(this.rootItem.open).to.be.true;\n\n await sendKeys({\n press: 'ArrowDown',\n });\n\n expect(this.rootItem.active).to.be.true;\n expect(this.rootItem.focused).to.be.false;\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendKeys({\n press: 'ArrowLeft',\n });\n await closed;\n\n expect(this.rootItem.active).to.be.false;\n expect(this.rootItem.focused).to.be.true;\n expect(this.rootItem.open).to.be.false;\n });\n }\n function closesOnPointerLeave(): void {\n it('closes on `pointerleave`', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(this.rootItem.open).to.be.false;\n });\n }\n function persistsThroughMouseLeaveAndReturn(): void {\n it('stays open when mousing off menu item and back again', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height * 2,\n ],\n },\n ],\n });\n await closed;\n });\n }\n function doesNotOpenWhenDisabled(): void {\n it('does not open when disabled', async function () {\n this.rootItem.disabled = true;\n await elementUpdated(this.rootItem);\n\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n // wait 200ms for open\n await new Promise((r) => setTimeout(r, 200));\n\n expect(this.rootItem.open).to.be.false;\n });\n }\n function persistsWhenMovingBetweenItemAndSubmenu(): void {\n it('stays open when mousing between menu item and submenu', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n await nextFrame();\n await nextFrame();\n\n const subItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n const clickSpy = spy();\n subItem.addEventListener('click', () => clickSpy());\n const subItemBoundingRect = subItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.true;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n expect(this.rootItem.open).to.be.true;\n // Ensure it _doesn't_ get closed.\n await aTimeout(150);\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(clickSpy.callCount).to.equal(1);\n });\n }\n function continuesToOpenWhenMovingBetweenItemAndSubmenu(): void {\n it('continues to open when mousing between menu item and submenu', async function () {\n const rootItemBoundingRect = this.rootItem.getBoundingClientRect();\n expect(this.rootItem.open).to.be.false;\n\n const opened = oneEvent(this.rootItem, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n // Wait for the overlay system to position the submenu before measuring it's position and moving to it.\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n const subItem = this.el.querySelector(\n '.submenu-item-2'\n ) as MenuItem;\n const clickSpy = spy();\n subItem.addEventListener('click', () => clickSpy());\n const subItemBoundingRect = subItem.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n expect(this.rootItem.open).to.be.true;\n // Ensure it _doesn't_ get closed.\n await aTimeout(150);\n\n expect(this.rootItem.open).to.be.true;\n\n const closed = oneEvent(this.rootItem, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n subItemBoundingRect.left +\n subItemBoundingRect.width / 2,\n subItemBoundingRect.top +\n subItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(clickSpy.callCount).to.equal(1);\n });\n }\n const renderSubmenu = (): TemplateResult => html`\n <sp-menu-item class=\"submenu-item-1\">One</sp-menu-item>\n <sp-menu-item class=\"submenu-item-2\">Two</sp-menu-item>\n <sp-menu-item class=\"submenu-item-3\">Three</sp-menu-item>\n `;\n describe('static DOM', () => {\n beforeEach(async function () {\n this.rootChanged = spy();\n this.submenuChanged = spy();\n this.el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n this.rootChanged(event.target.value);\n }}\n >\n <sp-menu-item>No submenu</sp-menu-item>\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n this.submenuChanged(event.target.value);\n }}\n >\n ${renderSubmenu()}\n </sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(this.el);\n this.rootItem = this.el.querySelector('.root') as MenuItem;\n await elementUpdated(this.rootItem);\n });\n describe.skip('selects', () => {\n selectWithPointer();\n selectsWithKeyboardData.map((testData) => {\n selectsWithKeyboard(testData);\n });\n });\n closesOnPointerLeave();\n returnsFocusToRootWhenClosingSubmenu();\n persistsThroughMouseLeaveAndReturn();\n doesNotOpenWhenDisabled();\n persistsWhenMovingBetweenItemAndSubmenu();\n continuesToOpenWhenMovingBetweenItemAndSubmenu();\n });\n describe('directive', () => {\n beforeEach(async function () {\n this.rootChanged = spy();\n this.submenuChanged = spy();\n this.el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n this.rootChanged(event.target.value);\n }}\n >\n <sp-menu-item>No submenu</sp-menu-item>\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n this.submenuChanged(event.target.value);\n }}\n ${slottableRequest(renderSubmenu)}\n ></sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(this.el);\n this.rootItem = this.el.querySelector('.root') as MenuItem;\n await elementUpdated(this.rootItem);\n });\n describe('selects', () => {\n selectWithPointer();\n selectsWithKeyboardData.map((testData) => {\n selectsWithKeyboard(testData);\n });\n });\n closesOnPointerLeave();\n returnsFocusToRootWhenClosingSubmenu();\n persistsThroughMouseLeaveAndReturn();\n doesNotOpenWhenDisabled();\n persistsWhenMovingBetweenItemAndSubmenu();\n continuesToOpenWhenMovingBetweenItemAndSubmenu();\n });\n it('closes deep tree on selection', async function () {\n const rootChanged = spy();\n const submenuChanged = spy();\n const subSubmenuChanged = spy();\n const el = await fixture<Menu>(html`\n <sp-menu\n @change=${(event: Event & { target: Menu }) => {\n rootChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"root\">\n Has submenu\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n submenuChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"submenu-item-1\">One</sp-menu-item>\n <sp-menu-item class=\"submenu-item-2\">\n Two\n <sp-menu\n slot=\"submenu\"\n @change=${(event: Event & { target: Menu }) => {\n subSubmenuChanged(event.target.value);\n }}\n >\n <sp-menu-item class=\"sub-submenu-item-1\">\n A\n </sp-menu-item>\n <sp-menu-item class=\"sub-submenu-item-2\">\n B\n </sp-menu-item>\n <sp-menu-item class=\"sub-submenu-item-3\">\n C\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item class=\"submenu-item-3\">\n Three\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n const rootItem = el.querySelector('.root') as MenuItem;\n const rootItemBoundingRect = rootItem.getBoundingClientRect();\n const item2 = document.querySelector('.submenu-item-2') as MenuItem;\n const itemC = document.querySelector('.sub-submenu-item-3') as MenuItem;\n expect(rootItem.open).to.be.false;\n\n let opened = oneEvent(rootItem, 'sp-opened');\n // Hover the root menu item to open a submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(rootItem.open).to.be.true;\n\n const item2BoundingRect = item2.getBoundingClientRect();\n\n opened = oneEvent(item2, 'sp-opened');\n // Move to the submenu item to open a submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n item2BoundingRect.left + item2BoundingRect.width / 2,\n item2BoundingRect.top + item2BoundingRect.height / 2,\n ],\n },\n ],\n });\n await opened;\n\n expect(item2.open).to.be.true;\n\n const closed = oneEvent(rootItem, 'sp-closed');\n // click to select and close\n const itemCBoundingRect = itemC.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n itemCBoundingRect.left + itemCBoundingRect.width / 2,\n itemCBoundingRect.top + itemCBoundingRect.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be\n .true;\n expect(submenuChanged.calledWith('Two'), 'submenu changed').to.be.true;\n expect(subSubmenuChanged.calledWith('C'), 'sub submenu changed').to.be\n .true;\n });\n it('closes all decendent submenus when closing a ancestor menu', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"Closing ancestors will close submenus\">\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group role=\"none\" id=\"group\">\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu slot=\"submenu\" id=\"submenu-1\">\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu slot=\"submenu\" id=\"submenu-2\">\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item id=\"submenu-item-3\">\n Manhattan\n <sp-menu slot=\"submenu\" id=\"submenu-3\">\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu slot=\"submenu\">\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `);\n\n const rootMenu1 = el.querySelector('#submenu-item-1') as MenuItem;\n const rootMenu2 = el.querySelector('#submenu-item-3') as MenuItem;\n const childMenu2 = el.querySelector('#submenu-item-2') as MenuItem;\n\n expect(el.open).to.be.false;\n let opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n expect(el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n expect(rootMenu1.open).to.be.true;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n expect(childMenu2.open).to.be.true;\n\n const childMenu2Closed = oneEvent(childMenu2, 'sp-closed');\n const rootMenu1Closed = oneEvent(rootMenu1, 'sp-closed');\n const rootMenu2Opened = oneEvent(rootMenu2, 'sp-opened');\n rootMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await childMenu2Closed;\n await rootMenu1Closed;\n await rootMenu2Opened;\n });\n describe('deep tree', () => {\n beforeEach(async function () {\n this.el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"Deep submenu tree\">\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group role=\"none\">\n <span slot=\"header\">New York</span>\n <sp-menu-item id=\"no-submenu\">Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu slot=\"submenu\">\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu slot=\"submenu\">\n <sp-menu-item>\n S. Oxford St\n </sp-menu-item>\n <sp-menu-item>\n S. Portland Ave\n </sp-menu-item>\n <sp-menu-item>\n S. Elliot Pl\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item id=\"ancestor-item\">\n Williamsburg\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item id=\"submenu-item-3\">\n Manhattan\n <sp-menu slot=\"submenu\">\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu slot=\"submenu\">\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `);\n await nextFrame();\n await nextFrame();\n });\n it('closes back to the first overlay without a `root` when clicking away', async function () {\n const rootMenu1 = this.el.querySelector('#submenu-item-1') as Menu;\n const childMenu2 = this.el.querySelector('#submenu-item-2') as Menu;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n const closed = Promise.all([\n oneEvent(childMenu2, 'sp-closed'),\n oneEvent(rootMenu1, 'sp-closed'),\n oneEvent(this.el, 'sp-closed'),\n ]);\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [600, 5],\n },\n ],\n });\n await closed;\n });\n it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async function () {\n const rootMenu = this.el.querySelector(\n '#submenu-item-1'\n ) as MenuItem;\n const noSubmenu = this.el.querySelector('#no-submenu') as MenuItem;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu, 'sp-opened');\n rootMenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n const closed = oneEvent(rootMenu, 'sp-closed');\n noSubmenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await closed;\n });\n it('closes decendent menus when Menu Item in ancestor is clicked', async function () {\n const rootMenu1 = this.el.querySelector(\n '#submenu-item-1'\n ) as MenuItem;\n const childMenu2 = this.el.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n const ancestorItem = this.el.querySelector(\n '#ancestor-item'\n ) as MenuItem;\n\n expect(this.el.open).to.be.false;\n let opened = oneEvent(this.el, 'sp-opened');\n this.el.click();\n await opened;\n expect(this.el.open).to.be.true;\n\n opened = oneEvent(rootMenu1, 'sp-opened');\n rootMenu1.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n opened = oneEvent(childMenu2, 'sp-opened');\n childMenu2.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n const closed = Promise.all([\n oneEvent(childMenu2, 'sp-closed'),\n oneEvent(rootMenu1, 'sp-closed'),\n oneEvent(this.el, 'sp-closed'),\n ]);\n const rect = ancestorItem.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await closed;\n });\n });\n it('cleans up submenus that close before they are \"open\"', async () => {\n if ('showPopover' in document.createElement('div')) {\n return;\n }\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [1, 1],\n },\n ],\n });\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item class=\"root-1\">\n Has submenu\n <sp-menu slot=\"submenu\">${renderSubmenu()}</sp-menu>\n </sp-menu-item>\n <sp-menu-item class=\"root-2\">\n Has submenu\n <sp-menu slot=\"submenu\">${renderSubmenu()}</sp-menu>\n </sp-menu-item>\n </sp-menu>\n `);\n\n await elementUpdated(el);\n const rootItem1 = el.querySelector('.root-1') as MenuItem;\n const rootItem2 = el.querySelector('.root-2') as MenuItem;\n expect(rootItem1.open, 'initially closed 1').to.be.false;\n expect(rootItem2.open, 'initially closed 2').to.be.false;\n\n const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();\n const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();\n\n // Open the first submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect1.left +\n rootItemBoundingRect1.width / 2,\n rootItemBoundingRect1.top +\n rootItemBoundingRect1.height / 2,\n ],\n },\n ],\n });\n // Open the second submenu, closing the first\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height / 2,\n ],\n },\n ],\n });\n // Open the first submenu, closing the second\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect1.left +\n rootItemBoundingRect1.width / 2,\n rootItemBoundingRect1.top +\n rootItemBoundingRect1.height / 2,\n ],\n },\n ],\n });\n // Open the second submenu, closing the first\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height / 2,\n ],\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n const closed = oneEvent(rootItem2, 'sp-closed');\n // Close the second submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect2.left +\n rootItemBoundingRect2.width / 2,\n rootItemBoundingRect2.top +\n rootItemBoundingRect2.height * 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(rootItem1.open, 'finally closed 1').to.be.false;\n expect(rootItem2.open, 'finally closed 2').to.be.false;\n });\n it('allows using non-menu-item elements as the root of a submenu', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item class=\"root\">\n Has submenu\n <div role=\"menuitem\" slot=\"submenu\">\n <sp-menu-item class=\"submenu-1\">One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n </div\n ></div>\n </sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(el);\n const rootItem = el.querySelector('.root') as MenuItem;\n const rootItemBoundingRect = rootItem.getBoundingClientRect();\n\n // Open the first submenu\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rootItemBoundingRect.left +\n rootItemBoundingRect.width / 2,\n rootItemBoundingRect.top +\n rootItemBoundingRect.height / 2,\n ],\n },\n ],\n });\n\n expect(rootItem.open).to.be.true;\n\n const firstSubMenuItemRect = el\n .querySelector('.submenu-1')\n ?.getBoundingClientRect();\n\n if (!firstSubMenuItemRect) {\n throw new Error('Submenu item not found');\n }\n\n // click to select\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n firstSubMenuItemRect.left +\n firstSubMenuItemRect.width / 2,\n firstSubMenuItemRect.top +\n firstSubMenuItemRect.height / 2,\n ],\n },\n ],\n });\n\n // This test will fail if the click event throws an error\n // because the submenu root is not a menu-item\n });\n it('should make submenu scrollable when content exceeds max height', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item>\n Parent Item\n <div role=\"menu\" slot=\"submenu\">\n ${Array(20).fill(0).map((_, i) => html`\n <sp-menu-item>Submenu Item ${i + 1}</sp-menu-item>\n `)}\n </div>\n </sp-menu-item>\n </sp-menu>\n `);\n\n await elementUpdated(el);\n\n const menuItem = el.querySelector('sp-menu-item') as MenuItem;\n const submenu = menuItem.querySelector('[slot=\"submenu\"]') as HTMLElement;\n\n // Open the submenu\n const opened = oneEvent(menuItem, 'sp-opened');\n menuItem.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n // Force a specific max-height to ensure scrolling\n submenu.style.maxHeight = '200px';\n await elementUpdated(submenu);\n\n // Get computed styles\n const computedStyle = window.getComputedStyle(submenu);\n\n // Verify overflow-y is set to auto\n expect(computedStyle.overflowY).to.equal('auto');\n\n // Verify that the content is actually overflowing\n expect(submenu.scrollHeight).to.be.greaterThan(submenu.clientHeight);\n\n // Verify that the submenu is scrollable\n const initialScrollTop = submenu.scrollTop;\n submenu.scrollTop = 50;\n await elementUpdated(submenu);\n expect(submenu.scrollTop).to.equal(50);\n expect(submenu.scrollTop).to.not.equal(initialScrollTop);\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|