@spectrum-web-components/menu 1.1.0-beta.2 → 1.1.0-beta.20
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/menu",
|
|
3
|
-
"version": "1.1.0-beta.
|
|
3
|
+
"version": "1.1.0-beta.20",
|
|
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.1.0-beta.
|
|
94
|
-
"@spectrum-web-components/base": "^1.1.0-beta.
|
|
95
|
-
"@spectrum-web-components/divider": "^1.1.0-beta.
|
|
96
|
-
"@spectrum-web-components/icon": "^1.1.0-beta.
|
|
97
|
-
"@spectrum-web-components/icons-ui": "^1.1.0-beta.
|
|
98
|
-
"@spectrum-web-components/overlay": "^1.1.0-beta.
|
|
99
|
-
"@spectrum-web-components/popover": "^1.1.0-beta.
|
|
100
|
-
"@spectrum-web-components/reactive-controllers": "^1.1.0-beta.
|
|
101
|
-
"@spectrum-web-components/shared": "^1.1.0-beta.
|
|
93
|
+
"@spectrum-web-components/action-button": "^1.1.0-beta.20",
|
|
94
|
+
"@spectrum-web-components/base": "^1.1.0-beta.20",
|
|
95
|
+
"@spectrum-web-components/divider": "^1.1.0-beta.20",
|
|
96
|
+
"@spectrum-web-components/icon": "^1.1.0-beta.20",
|
|
97
|
+
"@spectrum-web-components/icons-ui": "^1.1.0-beta.20",
|
|
98
|
+
"@spectrum-web-components/overlay": "^1.1.0-beta.20",
|
|
99
|
+
"@spectrum-web-components/popover": "^1.1.0-beta.20",
|
|
100
|
+
"@spectrum-web-components/reactive-controllers": "^1.1.0-beta.20",
|
|
101
|
+
"@spectrum-web-components/shared": "^1.1.0-beta.20"
|
|
102
102
|
},
|
|
103
103
|
"devDependencies": {
|
|
104
104
|
"@spectrum-css/menu": "^8.0.0-s2-foundations.16"
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"./sp-*.js",
|
|
110
110
|
"./**/*.dev.js"
|
|
111
111
|
],
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "e816f4df8eec536b8b5f30f027fd35748f62daf3"
|
|
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([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%}: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 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .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([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 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .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;"],
|
|
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([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%}: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 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .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([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 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .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;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/test/menu-item.test.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
import "@spectrum-web-components/menu/sp-menu.js";
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
4
2
|
import {
|
|
5
3
|
elementUpdated,
|
|
6
4
|
expect,
|
|
@@ -8,17 +6,18 @@ import {
|
|
|
8
6
|
html,
|
|
9
7
|
waitUntil
|
|
10
8
|
} from "@open-wc/testing";
|
|
9
|
+
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
10
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
11
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
11
12
|
import { spy } from "sinon";
|
|
12
13
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
13
14
|
describe("Menu item", () => {
|
|
14
15
|
it("renders", async () => {
|
|
15
|
-
const el = await fixture(
|
|
16
|
-
|
|
17
|
-
<sp-menu>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
`
|
|
21
|
-
);
|
|
16
|
+
const el = await fixture(html`
|
|
17
|
+
<sp-menu>
|
|
18
|
+
<sp-menu-item selected>Selected</sp-menu-item>
|
|
19
|
+
</sp-menu>
|
|
20
|
+
`);
|
|
22
21
|
await waitUntil(
|
|
23
22
|
() => el.childItems.length == 1,
|
|
24
23
|
"expected menu group to manage 1 child"
|
|
@@ -27,16 +26,14 @@ describe("Menu item", () => {
|
|
|
27
26
|
await expect(el).to.be.accessible();
|
|
28
27
|
});
|
|
29
28
|
it("can be disabled", async () => {
|
|
30
|
-
const el = await fixture(
|
|
31
|
-
|
|
32
|
-
<sp-menu
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
`
|
|
39
|
-
);
|
|
29
|
+
const el = await fixture(html`
|
|
30
|
+
<sp-menu selects="single">
|
|
31
|
+
<sp-menu-item selected label="This is not disabled">
|
|
32
|
+
Selected
|
|
33
|
+
</sp-menu-item>
|
|
34
|
+
<sp-menu-item disabled>Disabled</sp-menu-item>
|
|
35
|
+
</sp-menu>
|
|
36
|
+
`);
|
|
40
37
|
await elementUpdated(el);
|
|
41
38
|
expect(el.value).to.equal("Selected");
|
|
42
39
|
const disabled = el.querySelector("[disabled]");
|
|
@@ -74,25 +71,23 @@ describe("Menu item", () => {
|
|
|
74
71
|
});
|
|
75
72
|
it("proxies `click()`", async () => {
|
|
76
73
|
const clickTargetSpy = spy();
|
|
77
|
-
const el = await fixture(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
74
|
+
const el = await fixture(html`
|
|
75
|
+
<sp-menu
|
|
76
|
+
@click=${(event) => {
|
|
77
|
+
clickTargetSpy(
|
|
78
|
+
event.composedPath()[0]
|
|
79
|
+
);
|
|
80
|
+
event.stopPropagation();
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<sp-menu-item
|
|
85
|
+
href="https://opensource.adobe.com/spectrum-web-components"
|
|
87
86
|
>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</sp-menu-item>
|
|
93
|
-
</sp-menu>
|
|
94
|
-
`
|
|
95
|
-
);
|
|
87
|
+
Selected Text
|
|
88
|
+
</sp-menu-item>
|
|
89
|
+
</sp-menu>
|
|
90
|
+
`);
|
|
96
91
|
await elementUpdated(el);
|
|
97
92
|
const item = el.querySelector("sp-menu-item");
|
|
98
93
|
const { anchorElement } = item;
|
|
@@ -103,31 +98,23 @@ describe("Menu item", () => {
|
|
|
103
98
|
expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
|
|
104
99
|
});
|
|
105
100
|
it("value attribute", async () => {
|
|
106
|
-
const el = await fixture(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
Selected Text
|
|
110
|
-
</sp-menu-item>
|
|
111
|
-
`
|
|
112
|
-
);
|
|
101
|
+
const el = await fixture(html`
|
|
102
|
+
<sp-menu-item value="selected" selected>Selected Text</sp-menu-item>
|
|
103
|
+
`);
|
|
113
104
|
expect(el.itemText).to.equal("Selected Text");
|
|
114
105
|
expect(el.value).to.equal("selected");
|
|
115
106
|
});
|
|
116
107
|
it("no value attribute", async () => {
|
|
117
|
-
const el = await fixture(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
`
|
|
121
|
-
);
|
|
108
|
+
const el = await fixture(html`
|
|
109
|
+
<sp-menu-item selected>Selected Text</sp-menu-item>
|
|
110
|
+
`);
|
|
122
111
|
expect(el.itemText).to.equal("Selected Text");
|
|
123
112
|
expect(el.value).to.equal("Selected Text");
|
|
124
113
|
});
|
|
125
114
|
it("value property", async () => {
|
|
126
|
-
const el = await fixture(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
`
|
|
130
|
-
);
|
|
115
|
+
const el = await fixture(html`
|
|
116
|
+
<sp-menu-item selected>Selected Text</sp-menu-item>
|
|
117
|
+
`);
|
|
131
118
|
expect(el.itemText).to.equal("Selected Text");
|
|
132
119
|
expect(el.value).to.equal("Selected Text");
|
|
133
120
|
expect(el.hasAttribute("value")).to.be.false;
|
|
@@ -141,27 +128,21 @@ describe("Menu item", () => {
|
|
|
141
128
|
expect(el.hasAttribute("value")).to.be.false;
|
|
142
129
|
});
|
|
143
130
|
it("assigns content to the description slot", async () => {
|
|
144
|
-
const el = await fixture(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
</span>
|
|
151
|
-
</sp-menu-item>
|
|
152
|
-
`
|
|
153
|
-
);
|
|
131
|
+
const el = await fixture(html`
|
|
132
|
+
<sp-menu-item selected>
|
|
133
|
+
Menu Item Text
|
|
134
|
+
<span slot="description">Description for the Menu-Item</span>
|
|
135
|
+
</sp-menu-item>
|
|
136
|
+
`);
|
|
154
137
|
const descriptionElement = el.querySelector("span");
|
|
155
138
|
expect(descriptionElement.assignedSlot).to.not.be.null;
|
|
156
139
|
});
|
|
157
140
|
it("acualizes a submenu", async () => {
|
|
158
|
-
const test = await fixture(
|
|
159
|
-
|
|
160
|
-
<sp-menu>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
`
|
|
164
|
-
);
|
|
141
|
+
const test = await fixture(html`
|
|
142
|
+
<sp-menu>
|
|
143
|
+
<sp-menu-item selected>Selected</sp-menu-item>
|
|
144
|
+
</sp-menu>
|
|
145
|
+
`);
|
|
165
146
|
const el = test.querySelector("sp-menu-item");
|
|
166
147
|
expect(el.hasSubmenu).to.be.false;
|
|
167
148
|
const submenuItem = document.createElement("sp-menu-item");
|
|
@@ -176,5 +157,33 @@ describe("Menu item", () => {
|
|
|
176
157
|
await elementUpdated(el);
|
|
177
158
|
expect(el.hasSubmenu).to.be.false;
|
|
178
159
|
});
|
|
160
|
+
it("should not allow text-align to cascade when used inside an overlay", async () => {
|
|
161
|
+
const element = await fixture(html`
|
|
162
|
+
<div style="text-align: center">
|
|
163
|
+
<p>
|
|
164
|
+
The paragraph and the button are centered. Menu items are
|
|
165
|
+
not.
|
|
166
|
+
</p>
|
|
167
|
+
<sp-action-menu label="Actions" selects="single">
|
|
168
|
+
<sp-menu-item>One</sp-menu-item>
|
|
169
|
+
<sp-menu-item>Two</sp-menu-item>
|
|
170
|
+
<sp-menu-item>This is a long option</sp-menu-item>
|
|
171
|
+
<sp-menu-item>
|
|
172
|
+
More options
|
|
173
|
+
<sp-menu slot="submenu">
|
|
174
|
+
<sp-menu-item>Three</sp-menu-item>
|
|
175
|
+
<sp-menu-item>Four</sp-menu-item>
|
|
176
|
+
<sp-menu-item>Another long option</sp-menu-item>
|
|
177
|
+
</sp-menu>
|
|
178
|
+
</sp-menu-item>
|
|
179
|
+
</sp-action-menu>
|
|
180
|
+
</div>
|
|
181
|
+
`);
|
|
182
|
+
const menuItems = element.querySelectorAll(
|
|
183
|
+
"sp-menu-item"
|
|
184
|
+
);
|
|
185
|
+
for (const menuItem of menuItems)
|
|
186
|
+
expect(getComputedStyle(menuItem).textAlign).to.equal("start");
|
|
187
|
+
});
|
|
179
188
|
});
|
|
180
189
|
//# sourceMappingURL=menu-item.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.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 '@
|
|
5
|
-
"mappings": ";AAYA
|
|
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 {\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { spy } from 'sinon';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\ndescribe('Menu item', () => {\n it('renders', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item selected>Selected</sp-menu-item>\n </sp-menu>\n `);\n await waitUntil(\n () => el.childItems.length == 1,\n 'expected menu group to manage 1 child'\n );\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('can be disabled', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected label=\"This is not disabled\">\n Selected\n </sp-menu-item>\n <sp-menu-item disabled>Disabled</sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n const disabled = el.querySelector('[disabled]') as MenuItem;\n const boundingRect = disabled.getBoundingClientRect();\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.click();\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.dispatchEvent(\n new Event('click', {\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n });\n it('proxies `click()`', async () => {\n const clickTargetSpy = spy();\n const el = await fixture<Menu>(html`\n <sp-menu\n @click=${(event: Event) => {\n clickTargetSpy(\n event.composedPath()[0] as HTMLAnchorElement\n );\n event.stopPropagation();\n event.preventDefault();\n }}\n >\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Selected Text\n </sp-menu-item>\n </sp-menu>\n `);\n\n await elementUpdated(el);\n\n const item = el.querySelector('sp-menu-item') as MenuItem;\n const { anchorElement } = item as unknown as {\n anchorElement: HTMLAnchorElement;\n };\n (\n item as unknown as { anchorElement: HTMLAnchorElement }\n ).anchorElement.dispatchEvent(new FocusEvent('focus'));\n\n await elementUpdated(item);\n expect(el === document.activeElement).to.be.true;\n item.click();\n\n expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;\n });\n it('value attribute', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item value=\"selected\" selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('selected');\n });\n it('no value attribute', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n });\n it('value property', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n\n el.value = 'Selected Text';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.getAttribute('value')).to.equal('Selected Text');\n\n el.value = '';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n });\n it('assigns content to the description slot', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>\n Menu Item Text\n <span slot=\"description\">Description for the Menu-Item</span>\n </sp-menu-item>\n `);\n const descriptionElement = el.querySelector('span') as HTMLElement;\n expect(descriptionElement.assignedSlot).to.not.be.null;\n });\n it('acualizes a submenu', async () => {\n const test = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item selected>Selected</sp-menu-item>\n </sp-menu>\n `);\n\n const el = test.querySelector('sp-menu-item') as MenuItem;\n\n expect(el.hasSubmenu).to.be.false;\n\n const submenuItem = document.createElement('sp-menu-item');\n const submenu = document.createElement('sp-menu');\n submenuItem.textContent = 'Test Submenu Item';\n submenu.slot = 'submenu';\n submenu.append(submenuItem);\n\n el.append(submenu);\n await elementUpdated(el);\n\n expect(el.hasSubmenu).to.be.true;\n\n submenu.remove();\n await elementUpdated(el);\n\n expect(el.hasSubmenu).to.be.false;\n });\n\n it('should not allow text-align to cascade when used inside an overlay', async () => {\n const element = await fixture<HTMLDivElement>(html`\n <div style=\"text-align: center\">\n <p>\n The paragraph and the button are centered. Menu items are\n not.\n </p>\n <sp-action-menu label=\"Actions\" selects=\"single\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>This is a long option</sp-menu-item>\n <sp-menu-item>\n More options\n <sp-menu slot=\"submenu\">\n <sp-menu-item>Three</sp-menu-item>\n <sp-menu-item>Four</sp-menu-item>\n <sp-menu-item>Another long option</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n </div>\n `);\n\n const menuItems = element.querySelectorAll(\n 'sp-menu-item'\n ) as NodeListOf<MenuItem>;\n\n for (const menuItem of menuItems)\n expect(getComputedStyle(menuItem).textAlign).to.equal('start');\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO;AAEP,OAAO;AACP,OAAO;AACP,SAAS,WAAW;AACpB,SAAS,iBAAiB;AAE1B,SAAS,aAAa,MAAM;AACxB,KAAG,WAAW,YAAY;AACtB,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA,SAI9B;AACD,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,mBAAmB,YAAY;AAC9B,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAO9B;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAEpC,UAAM,WAAW,GAAG,cAAc,YAAY;AAC9C,UAAM,eAAe,SAAS,sBAAsB;AACpD,cAAU;AAAA,MACN,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,IAAI,aAAa,QAAQ;AAAA,YACtC,aAAa,IAAI,aAAa,SAAS;AAAA,UAC3C;AAAA,QACJ;AAAA,QACA;AAAA,UACI,MAAM;AAAA,QACV;AAAA,QACA;AAAA,UACI,MAAM;AAAA,QACV;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAEpC,aAAS,MAAM;AACf,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAEpC,aAAS;AAAA,MACL,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAAA,EACxC,CAAC;AACD,KAAG,qBAAqB,YAAY;AAChC,UAAM,iBAAiB,IAAI;AAC3B,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA,yBAEd,CAAC,UAAiB;AACvB;AAAA,QACI,MAAM,aAAa,EAAE,CAAC;AAAA,MAC1B;AACA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AAAA,IACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAQR;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,GAAG,cAAc,cAAc;AAC5C,UAAM,EAAE,cAAc,IAAI;AAG1B,IACI,KACF,cAAc,cAAc,IAAI,WAAW,OAAO,CAAC;AAErD,UAAM,eAAe,IAAI;AACzB,WAAO,OAAO,SAAS,aAAa,EAAE,GAAG,GAAG;AAC5C,SAAK,MAAM;AAEX,WAAO,eAAe,WAAW,aAAa,CAAC,EAAE,GAAG,GAAG;AAAA,EAC3D,CAAC;AACD,KAAG,mBAAmB,YAAY;AAC9B,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,eAAe;AAC5C,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAAA,EACxC,CAAC;AACD,KAAG,sBAAsB,YAAY;AACjC,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,eAAe;AAC5C,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,eAAe;AAAA,EAC7C,CAAC;AACD,KAAG,kBAAkB,YAAY;AAC7B,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,eAAe;AAC5C,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,eAAe;AACzC,WAAO,GAAG,aAAa,OAAO,CAAC,EAAE,GAAG,GAAG;AAEvC,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,eAAe;AACzC,WAAO,GAAG,aAAa,OAAO,CAAC,EAAE,GAAG,MAAM,eAAe;AAEzD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,eAAe;AACzC,WAAO,GAAG,aAAa,OAAO,CAAC,EAAE,GAAG,GAAG;AAAA,EAC3C,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlC;AACD,UAAM,qBAAqB,GAAG,cAAc,MAAM;AAClD,WAAO,mBAAmB,YAAY,EAAE,GAAG,IAAI,GAAG;AAAA,EACtD,CAAC;AACD,KAAG,uBAAuB,YAAY;AAClC,UAAM,OAAO,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA,SAIhC;AAED,UAAM,KAAK,KAAK,cAAc,cAAc;AAE5C,WAAO,GAAG,UAAU,EAAE,GAAG,GAAG;AAE5B,UAAM,cAAc,SAAS,cAAc,cAAc;AACzD,UAAM,UAAU,SAAS,cAAc,SAAS;AAChD,gBAAY,cAAc;AAC1B,YAAQ,OAAO;AACf,YAAQ,OAAO,WAAW;AAE1B,OAAG,OAAO,OAAO;AACjB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,GAAG;AAE5B,YAAQ,OAAO;AACf,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,GAAG;AAAA,EAChC,CAAC;AAED,KAAG,sEAAsE,YAAY;AACjF,UAAM,UAAU,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoB7C;AAED,UAAM,YAAY,QAAQ;AAAA,MACtB;AAAA,IACJ;AAEA,eAAW,YAAY;AACnB,aAAO,iBAAiB,QAAQ,EAAE,SAAS,EAAE,GAAG,MAAM,OAAO;AAAA,EACrE,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|