@spectrum-web-components/menu 0.41.0 → 0.41.1

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.
Files changed (31) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +11 -11
  3. package/src/Menu.dev.js +4 -0
  4. package/src/Menu.dev.js.map +2 -2
  5. package/src/Menu.js +2 -2
  6. package/src/Menu.js.map +2 -2
  7. package/src/MenuItem.dev.js +9 -0
  8. package/src/MenuItem.dev.js.map +2 -2
  9. package/src/MenuItem.js +2 -2
  10. package/src/MenuItem.js.map +2 -2
  11. package/src/menu-divider.css.dev.js +1 -1
  12. package/src/menu-divider.css.dev.js.map +1 -1
  13. package/src/menu-divider.css.js +1 -1
  14. package/src/menu-divider.css.js.map +1 -1
  15. package/src/menu-item.css.dev.js +6 -2
  16. package/src/menu-item.css.dev.js.map +2 -2
  17. package/src/menu-item.css.js +6 -2
  18. package/src/menu-item.css.js.map +2 -2
  19. package/src/spectrum-menu-divider.css.dev.js +1 -1
  20. package/src/spectrum-menu-divider.css.dev.js.map +1 -1
  21. package/src/spectrum-menu-divider.css.js +1 -1
  22. package/src/spectrum-menu-divider.css.js.map +1 -1
  23. package/src/spectrum-menu-item.css.dev.js +1 -1
  24. package/src/spectrum-menu-item.css.dev.js.map +1 -1
  25. package/src/spectrum-menu-item.css.js +1 -1
  26. package/src/spectrum-menu-item.css.js.map +1 -1
  27. package/stories/menu.stories.js.map +1 -1
  28. package/stories/submenu.stories.js +10 -0
  29. package/stories/submenu.stories.js.map +2 -2
  30. package/test/menu-memory.test.js +43 -0
  31. package/test/menu-memory.test.js.map +7 -0
package/src/spectrum-menu-item.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}.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-end:0;margin-block-start:var(\n--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox)\n);margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-end:0;margin-block-start:var(\n--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action)\n)}:host{display:grid;grid-template:\". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host([active])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host([active])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host([active])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host([active])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host([active])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host([active])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{align-self:start;grid-area:actionsArea;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;inline-size:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n);place-self:start end}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:focus,:host([active]) .spectrum-Menu-item--collapsible.is-open,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-end:var(\n--mod-menu-section-header-bottom-edge-to-text,var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n)\n);padding-block-start:var(\n--mod-menu-section-header-top-edge-to-text,var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n)\n)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu][active]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){background-color:#0000;cursor:default}:host([aria-disabled=true]:hover) #label,:host([disabled]:hover) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) [name=description]::slotted(*),:host([disabled]:hover) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(\n--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}: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(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n)}.spectrum-Menu-backIcon{margin-block:var(\n--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)\n);margin-inline:var(\n--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)\n);fill:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n);color:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n)}\n`;\nexport default styles;"],
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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}.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-end:0;margin-block-start:var(\n--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox)\n);margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-end:0;margin-block-start:var(\n--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action)\n)}:host{display:grid;grid-template:\". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host([active])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host([active])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host([active])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host([active])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host([active])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host([active])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{align-self:start;grid-area:actionsArea;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;inline-size:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n);place-self:start end}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:focus,:host([active]) .spectrum-Menu-item--collapsible.is-open,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-end:var(\n--mod-menu-section-header-bottom-edge-to-text,var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n)\n);padding-block-start:var(\n--mod-menu-section-header-top-edge-to-text,var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n)\n)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu][active]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){background-color:#0000;cursor:default}:host([aria-disabled=true]:hover) #label,:host([disabled]:hover) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) [name=description]::slotted(*),:host([disabled]:hover) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(\n--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}: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(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n)}.spectrum-Menu-backIcon{margin-block:var(\n--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)\n);margin-inline:var(\n--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)\n);fill:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n);color:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwVf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-menu-item.css.js CHANGED
@@ -37,7 +37,7 @@
37
37
  --mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)
38
38
  )}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-end:0;margin-block-start:var(
39
39
  --mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action)
40
- )}:host{display:grid;grid-template:". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" ". . . . descriptionArea . . ." ". . . . submenuArea . . ."/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(
40
+ )}:host{display:grid;grid-template:". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" ". . . . descriptionArea . . ." ". . . . submenuArea . . ."/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(
41
41
  --highcontrast-menu-item-background-color-focus,var(
42
42
  --mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)
43
43
  )
package/src/spectrum-menu-item.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}.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-end:0;margin-block-start:var(\n--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox)\n);margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-end:0;margin-block-start:var(\n--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action)\n)}:host{display:grid;grid-template:\". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host([active])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host([active])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host([active])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host([active])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host([active])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host([active])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{align-self:start;grid-area:actionsArea;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;inline-size:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n);place-self:start end}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:focus,:host([active]) .spectrum-Menu-item--collapsible.is-open,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-end:var(\n--mod-menu-section-header-bottom-edge-to-text,var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n)\n);padding-block-start:var(\n--mod-menu-section-header-top-edge-to-text,var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n)\n)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu][active]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){background-color:#0000;cursor:default}:host([aria-disabled=true]:hover) #label,:host([disabled]:hover) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) [name=description]::slotted(*),:host([disabled]:hover) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(\n--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}: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(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n)}.spectrum-Menu-backIcon{margin-block:var(\n--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)\n);margin-inline:var(\n--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)\n);fill:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n);color:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n)}\n`;\nexport default styles;"],
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::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-icon-color-default,var(--spectrum-menu-item-label-icon-color-default)\n)\n)}.checkmark{display:var(\n--mod-menu-checkmark-display,var(--spectrum-menu-checkmark-display)\n);fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);align-self:center;color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-default,var(--spectrum-menu-checkmark-icon-color-default)\n)\n);opacity:1}:host{align-items:center;background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n);box-sizing:border-box;cursor:pointer;line-height:var(\n--mod-menu-item-label-line-height,var(--spectrum-menu-item-label-line-height)\n);margin:0;min-block-size:var(\n--mod-menu-item-min-height,var(--spectrum-menu-item-min-height)\n);padding-block-end:var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n);padding-block-start:var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n);padding-inline:var(\n--mod-menu-item-label-inline-edge-to-content,var(--spectrum-menu-item-label-inline-edge-to-content)\n);position:relative;-webkit-text-decoration:none;text-decoration:none}.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-end:0;margin-block-start:var(\n--mod-menu-item-top-to-checkbox,var(--spectrum-menu-item-top-to-checkbox)\n);margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}.spectrum-Menu-itemSwitch{min-block-size:0}.spectrum-Menu-itemSwitch .spectrum-Switch-switch{margin-block-end:0;margin-block-start:var(\n--mod-menu-item-top-to-action,var(--spectrum-menu-item-top-to-action)\n)}:host{display:grid;grid-template:\". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .\" 1fr \"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn\" \". . . . descriptionArea . . .\" \". . . . submenuArea . . .\"/auto auto auto auto 1fr auto auto auto}#label{grid-area:submenuItemLabelArea}:host(:focus),:host([focused]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-key-focus,var(--spectrum-menu-item-background-color-key-focus)\n)\n);outline:none}:host(:focus)>#label,:host([focused])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-focus,var(--spectrum-menu-item-label-content-color-focus)\n)\n)}:host(:focus)>[name=description]::slotted(*),:host([focused])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-focus,var(--spectrum-menu-item-description-color-focus)\n)\n)}:host(:focus)>::slotted([slot=value]),:host([focused])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-focus,var(--spectrum-menu-item-value-color-focus)\n)\n)}:host(:focus)>.icon:not(.chevron,.checkmark),:host([focused])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-focus,var(--spectrum-menu-item-label-icon-color-focus)\n)\n)}:host(:focus)>.chevron,:host([focused])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:focus)>.checkmark,:host([focused])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-focus,var(--spectrum-menu-checkmark-icon-color-focus)\n)\n)}:host([focused]),:host([focused]) .spectrum-Menu-back{box-shadow:inset calc(var(\n--mod-menu-item-focus-indicator-width,\nvar(--spectrum-menu-item-focus-indicator-width)\n)*var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(\n--highcontrast-menu-item-focus-indicator-color,var(\n--mod-menu-item-focus-indicator-color,var(--spectrum-menu-item-focus-indicator-color)\n)\n)}:host([dir=rtl]){--spectrum-menu-item-focus-indicator-direction-scalar:-1}:host([active]){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-down,var(--spectrum-menu-item-background-color-down)\n)\n)}:host([active])>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-down,var(--spectrum-menu-item-label-content-color-down)\n)\n)}:host([active])>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-down,var(--spectrum-menu-item-description-color-down)\n)\n)}:host([active])>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-down,var(--spectrum-menu-item-value-color-down)\n)\n)}:host([active])>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-down,var(--spectrum-menu-item-label-icon-color-down)\n)\n)}:host([active])>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host([active])>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-down,var(--spectrum-menu-checkmark-icon-color-down)\n)\n)}::slotted([slot=icon]){align-self:start;grid-area:iconArea}.spectrum-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .spectrum-Menu-itemCheckbox{grid-area:iconArea}.checkmark{align-self:start;grid-area:checkmarkArea}.spectrum-Menu-itemSelection{grid-area:selectedArea}#label{color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-label-content-color-default,var(--spectrum-menu-item-label-content-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);grid-area:labelArea}::slotted([slot=value]){grid-area:valueArea}.spectrum-Menu-itemActions{align-self:start;grid-area:actionsArea;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}.chevron{align-self:center;block-size:var(--spectrum-menu-item-checkmark-height);grid-area:chevronArea;inline-size:var(--spectrum-menu-item-checkmark-width)}.spectrum-Menu-item--collapsible .chevron{grid-area:chevronAreaCollapsible}[name=description]::slotted(*){grid-area:descriptionArea}:host([has-submenu]) .chevron{grid-area:chevronAreaDrillIn}.icon:not(.chevron,.checkmark){block-size:var(\n--mod-menu-item-icon-height,var(--spectrum-menu-item-icon-height)\n);inline-size:var(\n--mod-menu-item-icon-width,var(--spectrum-menu-item-icon-width)\n)}.checkmark{block-size:var(\n--mod-menu-item-checkmark-height,var(--spectrum-menu-item-checkmark-height)\n);inline-size:var(\n--mod-menu-item-checkmark-width,var(--spectrum-menu-item-checkmark-width)\n);margin-block-start:calc(var(\n--mod-menu-item-top-to-checkmark,\nvar(--spectrum-menu-item-top-to-checkmark)\n) - var(\n--mod-menu-item-top-edge-to-text,\nvar(--spectrum-menu-item-top-edge-to-text)\n));margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}::slotted([slot=icon]){margin-inline-end:var(\n--mod-menu-item-label-text-to-visual,var(--spectrum-menu-item-label-text-to-visual)\n)}.chevron{margin-inline-end:var(\n--mod-menu-item-text-to-control,var(--spectrum-menu-item-text-to-control)\n)}[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-description-color-default,var(--spectrum-menu-item-description-color-default)\n)\n);font-size:var(\n--mod-menu-item-description-font-size,var(--spectrum-menu-item-description-font-size)\n);hyphens:auto;line-height:var(\n--mod-menu-item-description-line-height,var(--spectrum-menu-item-description-line-height)\n);margin-block-start:var(\n--mod-menu-item-label-to-description-spacing,var(--spectrum-menu-item-label-to-description-spacing)\n);overflow-wrap:break-word}#label{hyphens:auto;overflow-wrap:break-word}::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-item-value-color-default,var(--spectrum-menu-item-value-color-default)\n)\n);font-size:var(\n--mod-menu-item-label-font-size,var(--spectrum-menu-item-label-font-size)\n);margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n);place-self:start end}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spectrum-Menu-item--collapsible.is-open{padding-block-end:0}.spectrum-Menu-item--collapsible.is-open .chevron{transform:rotate(90deg)}.spectrum-Menu-item--collapsible.is-open:focus,:host([active]) .spectrum-Menu-item--collapsible.is-open,:host([focused]) .spectrum-Menu-item--collapsible.is-open{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}.spectrum-Menu-item--collapsible>::slotted([slot=icon]){padding-block-end:var(\n--mod-menu-section-header-bottom-edge-to-text,var(\n--mod-menu-item-bottom-edge-to-text,var(--spectrum-menu-item-bottom-edge-to-text)\n)\n);padding-block-start:var(\n--mod-menu-section-header-top-edge-to-text,var(\n--mod-menu-item-top-edge-to-text,var(--spectrum-menu-item-top-edge-to-text)\n)\n)}:host([dir=rtl]) .chevron{transform:rotate(-180deg)}:host([has-submenu]) .chevron{fill:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);color:var(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-drillin-icon-color-default,var(--spectrum-menu-drillin-icon-color-default)\n)\n);margin-inline-end:0;margin-inline-start:var(\n--mod-menu-item-label-to-value-area-min-spacing,var(--spectrum-menu-item-label-to-value-area-min-spacing)\n)}:host([has-submenu]) .is-open{--spectrum-menu-item-background-color-default:var(\n--highcontrast-menu-item-selected-background-color,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host([has-submenu]) .is-open .icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host([has-submenu]) .is-open .checkmark{fill:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-checkmark-icon-color-default,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}:host([has-submenu]:focus) .chevron,:host([has-submenu][focused]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-focus,var(--spectrum-menu-drillin-icon-color-focus)\n)\n)}:host([has-submenu][active]) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-down,var(--spectrum-menu-drillin-icon-color-down)\n)\n)}:host([aria-disabled=true]),:host([disabled]){background-color:#0000}:host([aria-disabled=true]) #label,:host([disabled]) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]) [name=description]::slotted(*),:host([disabled]) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}@media (hover:hover){:host([has-submenu]:hover) .chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-drillin-icon-color-hover,var(--spectrum-menu-drillin-icon-color-hover)\n)\n)}:host(:hover){background-color:var(\n--highcontrast-menu-item-background-color-focus,var(\n--mod-menu-item-background-color-hover,var(--spectrum-menu-item-background-color-hover)\n)\n)}:host(:hover)>#label{color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-content-color-hover,var(--spectrum-menu-item-label-content-color-hover)\n)\n)}:host(:hover)>[name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-description-color-hover,var(--spectrum-menu-item-description-color-hover)\n)\n)}:host(:hover)>::slotted([slot=value]){color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-value-color-hover,var(--spectrum-menu-item-value-color-hover)\n)\n)}:host(:hover)>.icon:not(.chevron,.checkmark){fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-item-label-icon-color-hover,var(--spectrum-menu-item-label-icon-color-hover)\n)\n)}:host(:hover)>.chevron{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-collapsible-icon-color,var(--spectrum-menu-collapsible-icon-color)\n)\n)}:host(:hover)>.checkmark{fill:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n);color:var(\n--highcontrast-menu-item-color-focus,var(\n--mod-menu-checkmark-icon-color-hover,var(--spectrum-menu-checkmark-icon-color-hover)\n)\n)}.spectrum-Menu-item--collapsible.is-open:hover{background-color:var(\n--highcontrast-menu-item-background-color-default,var(\n--mod-menu-item-background-color-default,var(--spectrum-menu-item-background-color-default)\n)\n)}:host([aria-disabled=true]:hover),:host([disabled]:hover){background-color:#0000;cursor:default}:host([aria-disabled=true]:hover) #label,:host([disabled]:hover) #label{color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-content-color-disabled,var(--spectrum-menu-item-label-content-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) [name=description]::slotted(*),:host([disabled]:hover) [name=description]::slotted(*){color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-description-color-disabled,var(--spectrum-menu-item-description-color-disabled)\n)\n)}:host([aria-disabled=true]:hover) ::slotted([slot=icon]),:host([disabled]:hover) ::slotted([slot=icon]){fill:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n);color:var(\n--highcontrast-menu-item-color-disabled,var(\n--mod-menu-item-label-icon-color-disabled,var(--spectrum-menu-item-label-icon-color-disabled)\n)\n)}}.spectrum-Menu-back{align-items:center;display:flex;flex-flow:wrap;padding-block:var(--mod-menu-back-padding-block-start,0) var(--mod-menu-back-padding-block-end,0);padding-inline:var(--mod-menu-back-padding-inline-start,0) var(\n--mod-menu-back-padding-inline-end,var(--spectrum-menu-item-label-inline-edge-to-content)\n)}.spectrum-Menu-backButton{background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}: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(\n--highcontrast-menu-item-color-default,var(\n--mod-menu-back-heading-color,var(--spectrum-menu-section-header-color)\n)\n);display:block;font-size:var(\n--mod-menu-section-header-font-size,var(--spectrum-menu-section-header-font-size)\n);font-weight:var(\n--mod-menu-section-header-font-weight,var(--spectrum-menu-section-header-font-weight)\n);line-height:var(\n--mod-menu-section-header-line-height,var(--spectrum-menu-section-header-line-height)\n)}.spectrum-Menu-backIcon{margin-block:var(\n--mod-menu-back-icon-margin-block,var(--spectrum-menu-back-icon-margin)\n);margin-inline:var(\n--mod-menu-back-icon-margin-inline,var(--spectrum-menu-back-icon-margin)\n);fill:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n);color:var(\n--highcontrast-menu-item-color-default,var(--mod-menu-back-icon-color-default)\n)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwVf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/menu.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["menu.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const controlled = (): TemplateResult => {\n const forceSelection = (event: Event & { target: Menu }): void => {\n event.target.updateComplete.then(() => {\n event.target.selected = ['Select and Mask...'];\n });\n };\n return html`\n <p>\n This Menu will default to a\n <code>selected</code>\n value of\n <code>[ 'Feather...', 'Save Selection' ]</code>\n but then on any subsequent interaction be forced to a\n <code>selected</code>\n value of\n <code>[ 'Select and Mask...' ]</code>\n .\n </p>\n <sp-menu selects=\"multiple\" @change=${forceSelection}>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `;\n};\ncontrolled.swc_vrt = {\n skip: true,\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n <span slot=\"description\">Share a snapshot</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n <span slot=\"description\">Illustrator for iPad</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>\n Select Inverse\n <span slot=\"description\">Enable inverse selection</span>\n </sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>\n Make Work Path\n <span slot=\"description\">Create a reusable work path</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n </sp-menu-item>\n <sp-menu-item selected>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>Action 1</sp-menu-item>\n <sp-menu-item>Action 2</sp-menu-item>\n <sp-menu-item>Action 3</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Share link\n <span slot=\"description\">Enable comments</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`&lt;sp-menu-item selected&gt;\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport type { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const controlled = (): TemplateResult => {\n const forceSelection = (event: Event & { target: Menu }): void => {\n event.target.updateComplete.then(() => {\n event.target.selected = ['Select and Mask...'];\n });\n };\n return html`\n <p>\n This Menu will default to a\n <code>selected</code>\n value of\n <code>[ 'Feather...', 'Save Selection' ]</code>\n but then on any subsequent interaction be forced to a\n <code>selected</code>\n value of\n <code>[ 'Select and Mask...' ]</code>\n .\n </p>\n <sp-menu selects=\"multiple\" @change=${forceSelection}>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `;\n};\ncontrolled.swc_vrt = {\n skip: true,\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n <span slot=\"description\">Share a snapshot</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n <span slot=\"description\">Illustrator for iPad</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>\n Select Inverse\n <span slot=\"description\">Enable inverse selection</span>\n </sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>\n Make Work Path\n <span slot=\"description\">Create a reusable work path</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n </sp-menu-item>\n <sp-menu-item selected>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>Action 1</sp-menu-item>\n <sp-menu-item>Action 2</sp-menu-item>\n <sp-menu-item>Action 3</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Share link\n <span slot=\"description\">Enable comments</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`&lt;sp-menu-item selected&gt;\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/stories/submenu.stories.js CHANGED
@@ -164,6 +164,16 @@ export const submenu = () => {
164
164
  <sp-menu-item>Upper East Side</sp-menu-item>
165
165
  </sp-menu>
166
166
  </sp-menu-item>
167
+ <sp-menu-item disabled>
168
+ Queens
169
+ <sp-menu slot="submenu">
170
+ <sp-menu-item>
171
+ You shouldn't be able to see this!
172
+ </sp-menu-item>
173
+ <sp-menu-item>Forest Hills</sp-menu-item>
174
+ <sp-menu-item>Jamaica</sp-menu-item>
175
+ </sp-menu>
176
+ </sp-menu-item>
167
177
  </sp-menu-group>
168
178
  </sp-action-menu>
169
179
  <div>
package/stories/submenu.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["submenu.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.addEventListener(\n 'sp-closed',\n () => {\n this.menu.removeEventListener(\n 'sp-opened',\n this.handleMenuOpened\n );\n },\n { once: true }\n );\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const overlay = document.querySelector('sp-overlay') as Overlay;\n clearValues();\n overlay.triggerElement = virtualTrigger;\n overlay.willPreventClose = true;\n overlay.type = 'auto';\n overlay.placement = 'right-start';\n overlay.open = true;\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${contextmenu}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n <sp-overlay>\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n </sp-overlay>\n `;\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.addEventListener(\n 'sp-closed',\n () => {\n this.menu.removeEventListener(\n 'sp-opened',\n this.handleMenuOpened\n );\n },\n { once: true }\n );\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>\n Queens\n <sp-menu slot=\"submenu\">\n <sp-menu-item>\n You shouldn't be able to see this!\n </sp-menu-item>\n <sp-menu-item>Forest Hills</sp-menu-item>\n <sp-menu-item>Jamaica</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const overlay = document.querySelector('sp-overlay') as Overlay;\n clearValues();\n overlay.triggerElement = virtualTrigger;\n overlay.willPreventClose = true;\n overlay.type = 'auto';\n overlay.placement = 'right-start';\n overlay.open = true;\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${contextmenu}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n <sp-overlay>\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n </sp-overlay>\n `;\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/test/menu-memory.test.js ADDED
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+ import { expect, fixture, nextFrame } from "@open-wc/testing";
3
+ import { html, render } from "@spectrum-web-components/base";
4
+ import { singleSelect } from "../stories/menu.stories.js";
5
+ import { usedHeapMB } from "../../../test/testing-helpers.js";
6
+ describe("Menu memory usage", () => {
7
+ it("releases references on disconnect", async function() {
8
+ if (!window.gc || !("measureUserAgentSpecificMemory" in performance))
9
+ this.skip();
10
+ this.timeout(1e4);
11
+ const iterations = 50;
12
+ let active = false;
13
+ const el = await fixture(
14
+ html`
15
+ <div></div>
16
+ `
17
+ );
18
+ async function toggle(forced = void 0) {
19
+ active = forced != null ? forced : !active;
20
+ render(active ? singleSelect() : html``, el);
21
+ await nextFrame();
22
+ await nextFrame();
23
+ }
24
+ for (let i = 0; i < 5; i++) {
25
+ await toggle();
26
+ }
27
+ await toggle(false);
28
+ const beforeMB = await usedHeapMB();
29
+ for (let i = 0; i < iterations; i++) {
30
+ await toggle();
31
+ }
32
+ await toggle(false);
33
+ const afterMB = await usedHeapMB();
34
+ expect(
35
+ afterMB.total - beforeMB.total,
36
+ `Total | before: ${beforeMB.total}, after: ${afterMB.total}
37
+ DOM | before: ${beforeMB.dom}, after: ${afterMB.dom}
38
+ JS | before: ${beforeMB.js}, after: ${afterMB.js}
39
+ Shared | before: ${beforeMB.shared}, after: ${afterMB.shared}`
40
+ ).to.be.lte(0);
41
+ });
42
+ });
43
+ //# sourceMappingURL=menu-memory.test.js.map
package/test/menu-memory.test.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["menu-memory.test.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { expect, fixture, nextFrame } from '@open-wc/testing';\nimport { html, render } from '@spectrum-web-components/base';\nimport { singleSelect } from '../stories/menu.stories.js';\nimport { usedHeapMB } from '../../../test/testing-helpers.js';\n\ndescribe('Menu memory usage', () => {\n it('releases references on disconnect', async function () {\n if (!window.gc || !('measureUserAgentSpecificMemory' in performance))\n this.skip();\n\n this.timeout(10000);\n\n const iterations = 50;\n let active = false;\n\n const el = await fixture<HTMLElement>(\n html`\n <div></div>\n `\n );\n\n async function toggle(\n forced: boolean | undefined = undefined\n ): Promise<void> {\n active = forced != null ? forced : !active;\n render(active ? singleSelect() : html``, el);\n await nextFrame();\n await nextFrame();\n }\n\n // \"shake things out\" to get a good first reading\n for (let i = 0; i < 5; i++) {\n await toggle();\n }\n await toggle(false);\n const beforeMB = await usedHeapMB();\n\n for (let i = 0; i < iterations; i++) {\n await toggle();\n }\n await toggle(false);\n const afterMB = await usedHeapMB();\n\n expect(\n afterMB.total - beforeMB.total,\n `Total | before: ${beforeMB.total}, after: ${afterMB.total}\nDOM | before: ${beforeMB.dom}, after: ${afterMB.dom}\nJS | before: ${beforeMB.js}, after: ${afterMB.js}\nShared | before: ${beforeMB.shared}, after: ${afterMB.shared}`\n ).to.be.lte(0);\n });\n});\n"],
5
+ "mappings": ";AAYA,SAAS,QAAQ,SAAS,iBAAiB;AAC3C,SAAS,MAAM,cAAc;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB,MAAM;AAChC,KAAG,qCAAqC,iBAAkB;AACtD,QAAI,CAAC,OAAO,MAAM,EAAE,oCAAoC;AACpD,WAAK,KAAK;AAEd,SAAK,QAAQ,GAAK;AAElB,UAAM,aAAa;AACnB,QAAI,SAAS;AAEb,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,mBAAe,OACX,SAA8B,QACjB;AACb,eAAS,UAAU,OAAO,SAAS,CAAC;AACpC,aAAO,SAAS,aAAa,IAAI,QAAQ,EAAE;AAC3C,YAAM,UAAU;AAChB,YAAM,UAAU;AAAA,IACpB;AAGA,aAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AACxB,YAAM,OAAO;AAAA,IACjB;AACA,UAAM,OAAO,KAAK;AAClB,UAAM,WAAW,MAAM,WAAW;AAElC,aAAS,IAAI,GAAG,IAAI,YAAY,KAAK;AACjC,YAAM,OAAO;AAAA,IACjB;AACA,UAAM,OAAO,KAAK;AAClB,UAAM,UAAU,MAAM,WAAW;AAEjC;AAAA,MACI,QAAQ,QAAQ,SAAS;AAAA,MACzB,mBAAmB,SAAS,KAAK,YAAY,QAAQ,KAAK;AAAA,gBACtD,SAAS,GAAG,YAAY,QAAQ,GAAG;AAAA,eACpC,SAAS,EAAE,YAAY,QAAQ,EAAE;AAAA,mBAC7B,SAAS,MAAM,YAAY,QAAQ,MAAM;AAAA,IACpD,EAAE,GAAG,GAAG,IAAI,CAAC;AAAA,EACjB,CAAC;AACL,CAAC;",
6
+ "names": []
7
+ }