@spectrum-web-components/menu 1.2.0-beta.18 → 1.2.0-beta.19

package/src/MenuItem.js

@@ -1,11 +1,11 @@
-"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(a,s,e,t)=>{for(var n=t>1?void 0:t?p(s,e):s,i=a.length-1,d;i>=0;i--)(d=a[i])&&(n=(t?d(s,e,n):d(n))||n);return t&&n&&h(s,e,n),n};import{html as l,nothing as c}from"@spectrum-web-components/base";import{ObserveSlotPresence as m,ObserveSlotText as v,randomID as b}from"@spectrum-web-components/shared";import{property as o,query as u}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import{LikeAnchor as f}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as E}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{DependencyManagerController as S}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";import g from"./menu-item.css.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import{MutationController as M}from"@lit-labs/observers/mutation-controller.js";import{SlottableRequestEvent as T}from"@spectrum-web-components/overlay/src/slottable-request-event.js";const L=100;export class MenuItemAddedOrUpdatedEvent extends Event{constructor(e){super("sp-menu-item-added-or-updated",{bubbles:!0,composed:!0});this.menuCascade=new WeakMap;this.clear(e)}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}get item(){return this._item}}export class MenuItem extends f(v(m(E,'[slot="icon"]'))){constructor(){super();this.active=!1;this.dependencyManager=new S(this);this.focused=!1;this.selected=!1;this._value="";this.hasSubmenu=!1;this.noWrap=!1;this.open=!1;this.handleSlottableRequest=e=>{var t;(t=this.submenuElement)==null||t.dispatchEvent(new T(e.name,e.data))};this.proxyFocus=()=>{this.focus()};this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))};this.recentlyLeftChild=!1;this.willDispatchUpdate=!1;this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]};this.addEventListener("click",this.handleClickCapture,{capture:!0}),new M(this,{config:{characterData:!0,childList:!0,subtree:!0,attributeFilter:["src"]},callback:e=>{e.every(n=>n.target.slot==="submenu")||this.breakItemChildrenCache()}})}static get styles(){return[g,C,y]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(n=>{const i=n.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),t=this.contentSlot.assignedNodes().map(n=>n.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=l`
+"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(l,n,e,t)=>{for(var i=t>1?void 0:t?p(n,e):n,s=l.length-1,a;s>=0;s--)(a=l[s])&&(i=(t?a(n,e,i):a(i))||i);return t&&i&&c(n,e,i),i};import{html as u,nothing as h}from"@spectrum-web-components/base";import{ObserveSlotPresence as m,ObserveSlotText as v,randomID as b}from"@spectrum-web-components/shared";import{property as o,query as d}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import{LikeAnchor as f}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as E}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{DependencyManagerController as g}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";import S from"./menu-item.css.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import{MutationController as M}from"@lit-labs/observers/mutation-controller.js";import{SlottableRequestEvent as L}from"@spectrum-web-components/overlay/src/slottable-request-event.js";const k=100;export class MenuItemAddedOrUpdatedEvent extends Event{constructor(e){super("sp-menu-item-added-or-updated",{bubbles:!0,composed:!0});this.menuCascade=new WeakMap;this.clear(e)}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}get item(){return this._item}}export class MenuItemKeydownEvent extends KeyboardEvent{constructor({root:n,event:e}){super("sp-menu-item-keydown",{bubbles:!0,composed:!0}),this.root=n,this._event=e}get altKey(){var n;return((n=this._event)==null?void 0:n.altKey)||!1}get code(){var n;return((n=this._event)==null?void 0:n.code)||""}get ctrlKey(){var n;return((n=this._event)==null?void 0:n.ctrlKey)||!1}get isComposing(){var n;return((n=this._event)==null?void 0:n.isComposing)||!1}get key(){var n;return((n=this._event)==null?void 0:n.key)||""}get location(){var n;return((n=this._event)==null?void 0:n.location)||0}get metaKey(){var n;return((n=this._event)==null?void 0:n.metaKey)||!1}get repeat(){var n;return((n=this._event)==null?void 0:n.repeat)||!1}get shiftKey(){var n;return((n=this._event)==null?void 0:n.shiftKey)||!1}}export class MenuItem extends f(v(m(E,'[slot="icon"]'))){constructor(){super();this.active=!1;this.dependencyManager=new g(this);this.focused=!1;this.selected=!1;this._value="";this.hasSubmenu=!1;this.noWrap=!1;this.open=!1;this.handleSlottableRequest=e=>{var t;(t=this.submenuElement)==null||t.dispatchEvent(new L(e.name,e.data))};this.proxyFocus=()=>{this.focus()};this.handleKeydown=e=>{const{target:t,key:i}=e,s=this.hasSubmenu&&!this.open&&[" ","Enter"].includes(i);t===this&&((["ArrowLeft","ArrowRight","Escape"].includes(i)||s)&&e.preventDefault(),this.dispatchEvent(new MenuItemKeydownEvent({root:this,event:e})))};this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))};this.recentlyLeftChild=!1;this.willDispatchUpdate=!1;this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]};this.addEventListener("click",this.handleClickCapture,{capture:!0}),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),new M(this,{config:{characterData:!0,childList:!0,subtree:!0,attributeFilter:["src"]},callback:e=>{e.every(i=>i.target.slot==="submenu")||this.breakItemChildrenCache()}})}static get styles(){return[S,C,y]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(i=>{const s=i.cloneNode(!0);return s.removeAttribute("slot"),s.classList.toggle("icon"),s}),t=this.contentSlot.assignedNodes().map(i=>i.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick()}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=u`
             <slot
                 name="submenu"
                 @slotchange=${this.manageSubmenu}
                 @sp-menu-item-added-or-updated=${{handleEvent:t=>{t.clear(t.item)},capture:!0}}
                 @focusin=${t=>t.stopPropagation()}
             ></slot>
-        `;return this.hasSubmenu?(this.dependencyManager.add("sp-overlay"),this.dependencyManager.add("sp-popover"),import("@spectrum-web-components/overlay/sp-overlay.js"),import("@spectrum-web-components/popover/sp-popover.js"),l`
+        `;return this.hasSubmenu?(this.dependencyManager.add("sp-overlay"),this.dependencyManager.add("sp-popover"),import("@spectrum-web-components/overlay/sp-overlay.js"),import("@spectrum-web-components/popover/sp-popover.js"),u`
             <sp-overlay
                 .triggerElement=${this}
                 ?disabled=${!this.hasSubmenu}
@@ -28,8 +28,8 @@
             <sp-icon-chevron100
                 class="spectrum-UIIcon-ChevronRight100 chevron icon"
             ></sp-icon-chevron100>
-        `):e}render(){return l`
-            ${this.selected?l`
+        `):e}render(){return u`
+            ${this.selected?u`
                       <sp-icon-checkmark100
                           id="selected"
                           class="spectrum-UIIcon-Checkmark100 
@@ -37,14 +37,14 @@
                             checkmark
                             ${this.hasIcon?"checkmark--withAdjacentIcon":""}"
                       ></sp-icon-checkmark100>
-                  `:c}
+                  `:h}
             <slot name="icon"></slot>
             <div id="label">
                 <slot id="slot"></slot>
             </div>
             <slot name="description"></slot>
             <slot name="value"></slot>
-            ${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):c}
+            ${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):h}
             ${this.renderSubmenu()}
-        `}manageSubmenu(e){this.submenuElement=e.target.assignedElements({flatten:!0})[0],this.hasSubmenu=!!this.submenuElement,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handlePointerdown(e){e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`sp-menu-item-${b()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},L))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}async handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){this.focused=!1;const t=e.composedPath().find(n=>n!==this.overlayElement&&n.localName==="sp-overlay");this.overlayElement.parentOverlayToForceClose=t}cleanup(){this.open=!1,this.active=!1}async openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("sp-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}updated(e){var t,n;if(super.updated(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||typeof e.get("active")!="undefined")&&this.active&&((t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays()),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||typeof e.get("hasSubmenu")!="undefined"))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const i={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,i),this.addEventListener("pointerenter",this.handlePointerenter,i),this.addEventListener("pointerleave",this.handlePointerleave,i),this.addEventListener("sp-opened",this.handleSubmenuOpen,i)}else(n=this.abortControllerSubmenu)==null||n.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this)),this.willDispatchUpdate=!1)}}r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"active",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"focused",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"selected",2),r([o({type:String})],MenuItem.prototype,"value",1),r([o({type:Boolean,reflect:!0,attribute:"has-submenu"})],MenuItem.prototype,"hasSubmenu",2),r([u("slot:not([name])")],MenuItem.prototype,"contentSlot",2),r([u('slot[name="icon"]')],MenuItem.prototype,"iconSlot",2),r([o({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],MenuItem.prototype,"noWrap",2),r([u(".anchor")],MenuItem.prototype,"anchorElement",2),r([u("sp-overlay")],MenuItem.prototype,"overlayElement",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"open",2);
+        `}manageSubmenu(e){this.submenuElement=e.target.assignedElements({flatten:!0})[0],this.hasSubmenu=!!this.submenuElement,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handlePointerdown(e){e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`sp-menu-item-${b()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleFocus(e){const{target:t}=e;t===this&&(this.focused=!0)}handleBlur(e){const{target:t}=e;t===this&&(this.focused=!1)}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open,this.focused=!1})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},k))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}async handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){var s;const t=this.matches(":focus, :focus-within")||this.focused;this.focused=!1;const i=e.composedPath().find(a=>a!==this.overlayElement&&a.localName==="sp-overlay");t&&((s=this.submenuElement)==null||s.focus()),this.overlayElement.parentOverlayToForceClose=i}cleanup(){this.setAttribute("aria-expanded","false"),this.open=!1,this.active=!1}async openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("sp-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}willUpdate(e){super.updated(e),e.has("open")&&!this.open&&this.hasSubmenu&&this.hasVisibleFocusInTree()&&this.focus()}updated(e){var t,i;if(super.updated(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||typeof e.get("active")!="undefined")&&this.active&&((t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays()),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||typeof e.get("hasSubmenu")!="undefined"))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const s={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,s),this.addEventListener("pointerenter",this.handlePointerenter,s),this.addEventListener("pointerleave",this.handlePointerleave,s),this.addEventListener("sp-opened",this.handleSubmenuOpen,s)}else(i=this.abortControllerSubmenu)==null||i.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}focus(){super.focus(),this.dispatchEvent(new FocusEvent("focus"))}blur(){this.dispatchEvent(new FocusEvent("blur")),super.blur()}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this)),this.willDispatchUpdate=!1)}}r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"active",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"focused",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"selected",2),r([o({type:String})],MenuItem.prototype,"value",1),r([o({type:Boolean,reflect:!0,attribute:"has-submenu"})],MenuItem.prototype,"hasSubmenu",2),r([d("slot:not([name])")],MenuItem.prototype,"contentSlot",2),r([d('slot[name="icon"]')],MenuItem.prototype,"iconSlot",2),r([o({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],MenuItem.prototype,"noWrap",2),r([d(".anchor")],MenuItem.prototype,"anchorElement",2),r([d("sp-overlay")],MenuItem.prototype,"overlayElement",2),r([o({type:Boolean,reflect:!0})],MenuItem.prototype,"open",2);
 //# sourceMappingURL=MenuItem.js.map

package/src/MenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["MenuItem.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ObserveSlotPresence,\n    ObserveSlotText,\n    randomID,\n} from '@spectrum-web-components/shared';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\n\nimport menuItemStyles from './menu-item.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport type { Menu } from './Menu.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport type { Overlay } from '@spectrum-web-components/overlay';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * Duration during which a pointing device can leave an `<sp-menu-item>` element\n * and return to it or to the submenu opened from it before closing that submenu.\n **/\nconst POINTERLEAVE_TIMEOUT = 100;\n\ntype MenuCascadeItem = {\n    hadFocusRoot: boolean;\n    ancestorWithSelects?: HTMLElement;\n};\n\nexport class MenuItemAddedOrUpdatedEvent extends Event {\n    constructor(item: MenuItem) {\n        super('sp-menu-item-added-or-updated', {\n            bubbles: true,\n            composed: true,\n        });\n        this.clear(item);\n    }\n    clear(item: MenuItem): void {\n        this._item = item;\n        this.currentAncestorWithSelects = undefined;\n        item.menuData = {\n            cleanupSteps: [],\n            focusRoot: undefined,\n            selectionRoot: undefined,\n            parentMenu: undefined,\n        };\n        this.menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();\n    }\n    menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();\n    get item(): MenuItem {\n        return this._item;\n    }\n    private _item!: MenuItem;\n    currentAncestorWithSelects?: Menu;\n}\n\nexport type MenuItemChildren = { icon: Element[]; content: Node[] };\n\n/**\n * @element sp-menu-item\n *\n * @slot - text content to display within the Menu Item\n * @slot description - description to be placed below the label of the Menu Item\n * @slot icon - icon element to be placed at the start of the Menu Item\n * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.\n * @slot submenu - content placed in a submenu\n * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships\n */\nexport class MenuItem extends LikeAnchor(\n    ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n    public static override get styles(): CSSResultArray {\n        return [menuItemStyles, checkmarkStyles, chevronStyles];\n    }\n\n    abortControllerSubmenu!: AbortController;\n\n    @property({ type: Boolean, reflect: true })\n    public active = false;\n\n    private dependencyManager = new DependencyManagerController(this);\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ type: String })\n    public get value(): string {\n        return this._value || this.itemText;\n    }\n\n    public set value(value: string) {\n        if (value === this._value) {\n            return;\n        }\n        this._value = value || '';\n        if (this._value) {\n            this.setAttribute('value', this._value);\n        } else {\n            this.removeAttribute('value');\n        }\n    }\n\n    private _value = '';\n\n    /**\n     * @private\n     */\n    public get itemText(): string {\n        return this.itemChildren.content.reduce(\n            (acc, node) => acc + (node.textContent || '').trim(),\n            ''\n        );\n    }\n\n    @property({ type: Boolean, reflect: true, attribute: 'has-submenu' })\n    public hasSubmenu = false;\n\n    @query('slot:not([name])')\n    contentSlot!: HTMLSlotElement;\n\n    @query('slot[name=\"icon\"]')\n    iconSlot!: HTMLSlotElement;\n\n    @property({\n        type: Boolean,\n        reflect: true,\n        attribute: 'no-wrap',\n        hasChanged() {\n            return false;\n        },\n    })\n    public noWrap = false;\n\n    @query('.anchor')\n    private anchorElement!: HTMLAnchorElement;\n\n    @query('sp-overlay')\n    public overlayElement!: Overlay;\n\n    private submenuElement?: HTMLElement;\n\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    protected get hasIcon(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public get itemChildren(): MenuItemChildren {\n        if (!this.iconSlot || !this.contentSlot) {\n            return {\n                icon: [],\n                content: [],\n            };\n        }\n        if (this._itemChildren) {\n            return this._itemChildren;\n        }\n        const icon = this.iconSlot.assignedElements().map((element) => {\n            const newElement = element.cloneNode(true) as HTMLElement;\n            newElement.removeAttribute('slot');\n            newElement.classList.toggle('icon');\n            return newElement;\n        });\n        const content = this.contentSlot\n            .assignedNodes()\n            .map((node) => node.cloneNode(true));\n        this._itemChildren = { icon, content };\n\n        return this._itemChildren;\n    }\n\n    private _itemChildren?: MenuItemChildren;\n\n    constructor() {\n        super();\n        this.addEventListener('click', this.handleClickCapture, {\n            capture: true,\n        });\n\n        new MutationController(this, {\n            config: {\n                characterData: true,\n                childList: true,\n                subtree: true,\n                attributeFilter: ['src'],\n            },\n            callback: (mutations) => {\n                const isSubmenu = mutations.every(\n                    (mutation) =>\n                        (mutation.target as HTMLElement).slot === 'submenu'\n                );\n                if (isSubmenu) {\n                    return;\n                }\n                this.breakItemChildrenCache();\n            },\n        });\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    public override click(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        if (this.shouldProxyClick()) {\n            return;\n        }\n\n        super.click();\n    }\n\n    private handleClickCapture(event: Event): void | boolean {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            event.stopPropagation();\n            return false;\n        }\n    }\n\n    private handleSlottableRequest = (event: SlottableRequestEvent): void => {\n        this.submenuElement?.dispatchEvent(\n            new SlottableRequestEvent(event.name, event.data)\n        );\n    };\n\n    private proxyFocus = (): void => {\n        this.focus();\n    };\n\n    private shouldProxyClick(): boolean {\n        let handled = false;\n        if (this.anchorElement) {\n            this.anchorElement.click();\n            handled = true;\n        }\n        return handled;\n    }\n\n    protected breakItemChildrenCache(): void {\n        this._itemChildren = undefined;\n        this.triggerUpdate();\n    }\n\n    protected renderSubmenu(): TemplateResult {\n        const slot = html`\n            <slot\n                name=\"submenu\"\n                @slotchange=${this.manageSubmenu}\n                @sp-menu-item-added-or-updated=${{\n                    handleEvent: (event: MenuItemAddedOrUpdatedEvent) => {\n                        event.clear(event.item);\n                    },\n                    capture: true,\n                }}\n                @focusin=${(event: Event) => event.stopPropagation()}\n            ></slot>\n        `;\n        if (!this.hasSubmenu) {\n            return slot;\n        }\n        this.dependencyManager.add('sp-overlay');\n        this.dependencyManager.add('sp-popover');\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        import('@spectrum-web-components/popover/sp-popover.js');\n        return html`\n            <sp-overlay\n                .triggerElement=${this as HTMLElement}\n                ?disabled=${!this.hasSubmenu}\n                ?open=${this.hasSubmenu &&\n                this.open &&\n                this.dependencyManager.loaded}\n                .placement=${this.isLTR ? 'right-start' : 'left-start'}\n                .offset=${[-10, -5] as [number, number]}\n                .type=${'auto'}\n                @close=${(event: Event) => event.stopPropagation()}\n                @slottable-request=${this.handleSlottableRequest}\n            >\n                <sp-popover\n                    @change=${(event: Event) => {\n                        this.handleSubmenuChange(event);\n                        this.open = false;\n                    }}\n                    @pointerenter=${this.handleSubmenuPointerenter}\n                    @pointerleave=${this.handleSubmenuPointerleave}\n                    @sp-menu-item-added-or-updated=${(event: Event) =>\n                        event.stopPropagation()}\n                >\n                    ${slot}\n                </sp-popover>\n            </sp-overlay>\n            <sp-icon-chevron100\n                class=\"spectrum-UIIcon-ChevronRight100 chevron icon\"\n            ></sp-icon-chevron100>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.selected\n                ? html`\n                      <sp-icon-checkmark100\n                          id=\"selected\"\n                          class=\"spectrum-UIIcon-Checkmark100 \n                            icon \n                            checkmark\n                            ${this.hasIcon\n                              ? 'checkmark--withAdjacentIcon'\n                              : ''}\"\n                      ></sp-icon-checkmark100>\n                  `\n                : nothing}\n            <slot name=\"icon\"></slot>\n            <div id=\"label\">\n                <slot id=\"slot\"></slot>\n            </div>\n            <slot name=\"description\"></slot>\n            <slot name=\"value\"></slot>\n            ${this.href && this.href.length > 0\n                ? super.renderAnchor({\n                      id: 'button',\n                      ariaHidden: true,\n                      className: 'button anchor hidden',\n                  })\n                : nothing}\n            ${this.renderSubmenu()}\n        `;\n    }\n\n    protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {\n        this.submenuElement = event.target.assignedElements({\n            flatten: true,\n        })[0] as HTMLElement;\n        this.hasSubmenu = !!this.submenuElement;\n        if (this.hasSubmenu) {\n            this.setAttribute('aria-haspopup', 'true');\n        }\n    }\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.target === this && this.hasSubmenu && this.open) {\n            this.addEventListener('focus', this.handleSubmenuFocus, {\n                once: true,\n            });\n            this.overlayElement.addEventListener(\n                'beforetoggle',\n                this.handleBeforetoggle\n            );\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.setAttribute('tabindex', '-1');\n        this.addEventListener('pointerdown', this.handlePointerdown);\n        this.addEventListener('pointerenter', this.closeOverlaysForRoot);\n        if (!this.hasAttribute('id')) {\n            this.id = `sp-menu-item-${randomID()}`;\n        }\n    }\n\n    protected closeOverlaysForRoot(): void {\n        if (this.open) return;\n        this.menuData.parentMenu?.closeDescendentOverlays();\n    }\n\n    protected handleSubmenuClick(event: Event): void {\n        if (event.composedPath().includes(this.overlayElement)) {\n            return;\n        }\n        this.openOverlay();\n    }\n\n    protected handleSubmenuFocus(): void {\n        requestAnimationFrame(() => {\n            // Wait till after `closeDescendentOverlays` has happened in Menu\n            // to reopen (keep open) the direct descendent of this Menu Item\n            this.overlayElement.open = this.open;\n        });\n    }\n\n    protected handleBeforetoggle = (event: Event): void => {\n        if ((event as Event & { newState: string }).newState === 'closed') {\n            this.open = true;\n            this.overlayElement.manuallyKeepOpen();\n            this.overlayElement.removeEventListener(\n                'beforetoggle',\n                this.handleBeforetoggle\n            );\n        }\n    };\n\n    protected handlePointerenter(): void {\n        if (this.leaveTimeout) {\n            clearTimeout(this.leaveTimeout);\n            delete this.leaveTimeout;\n            return;\n        }\n        this.openOverlay();\n    }\n\n    protected leaveTimeout?: ReturnType<typeof setTimeout>;\n    protected recentlyLeftChild = false;\n\n    protected handlePointerleave(): void {\n        if (this.open && !this.recentlyLeftChild) {\n            this.leaveTimeout = setTimeout(() => {\n                delete this.leaveTimeout;\n                this.open = false;\n            }, POINTERLEAVE_TIMEOUT);\n        }\n    }\n\n    /**\n     * When there is a `change` event in the submenu for this item\n     * then we \"click\" this item to cascade the selection up the\n     * menu tree allowing all submenus between the initial selection\n     * and the root of the tree to have their selection changes and\n     * be closed.\n     */\n    protected handleSubmenuChange(event: Event): void {\n        event.stopPropagation();\n        this.menuData.selectionRoot?.selectOrToggleItem(this);\n    }\n\n    protected handleSubmenuPointerenter(): void {\n        this.recentlyLeftChild = true;\n    }\n\n    protected async handleSubmenuPointerleave(): Promise<void> {\n        requestAnimationFrame(() => {\n            this.recentlyLeftChild = false;\n        });\n    }\n\n    protected handleSubmenuOpen(event: Event): void {\n        this.focused = false;\n        const parentOverlay = event.composedPath().find((el) => {\n            return (\n                el !== this.overlayElement &&\n                (el as HTMLElement).localName === 'sp-overlay'\n            );\n        }) as Overlay;\n        this.overlayElement.parentOverlayToForceClose = parentOverlay;\n    }\n\n    protected cleanup(): void {\n        this.open = false;\n        this.active = false;\n    }\n\n    public async openOverlay(): Promise<void> {\n        if (!this.hasSubmenu || this.open || this.disabled) {\n            return;\n        }\n        this.open = true;\n        this.active = true;\n        this.setAttribute('aria-expanded', 'true');\n        this.addEventListener('sp-closed', this.cleanup, {\n            once: true,\n        });\n    }\n\n    updateAriaSelected(): void {\n        const role = this.getAttribute('role');\n        if (role === 'option') {\n            this.setAttribute(\n                'aria-selected',\n                this.selected ? 'true' : 'false'\n            );\n        } else if (role === 'menuitemcheckbox' || role === 'menuitemradio') {\n            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');\n        }\n    }\n\n    public setRole(role: string): void {\n        this.setAttribute('role', role);\n        this.updateAriaSelected();\n    }\n\n    protected override updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (\n            changes.has('label') &&\n            (this.label || typeof changes.get('label') !== 'undefined')\n        ) {\n            this.setAttribute('aria-label', this.label || '');\n        }\n        if (\n            changes.has('active') &&\n            (this.active || typeof changes.get('active') !== 'undefined')\n        ) {\n            if (this.active) {\n                this.menuData.selectionRoot?.closeDescendentOverlays();\n            }\n        }\n        if (this.anchorElement) {\n            this.anchorElement.addEventListener('focus', this.proxyFocus);\n            this.anchorElement.tabIndex = -1;\n        }\n        if (changes.has('selected')) {\n            this.updateAriaSelected();\n        }\n        if (\n            changes.has('hasSubmenu') &&\n            (this.hasSubmenu ||\n                typeof changes.get('hasSubmenu') !== 'undefined')\n        ) {\n            if (this.hasSubmenu) {\n                this.abortControllerSubmenu = new AbortController();\n                const options = { signal: this.abortControllerSubmenu.signal };\n                this.addEventListener(\n                    'click',\n                    this.handleSubmenuClick,\n                    options\n                );\n                this.addEventListener(\n                    'pointerenter',\n                    this.handlePointerenter,\n                    options\n                );\n                this.addEventListener(\n                    'pointerleave',\n                    this.handlePointerleave,\n                    options\n                );\n                this.addEventListener(\n                    'sp-opened',\n                    this.handleSubmenuOpen,\n                    options\n                );\n            } else {\n                this.abortControllerSubmenu?.abort();\n            }\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.triggerUpdate();\n    }\n\n    _parentElement!: HTMLElement;\n\n    public override disconnectedCallback(): void {\n        this.menuData.cleanupSteps.forEach((removal) => removal(this));\n        this.menuData = {\n            focusRoot: undefined,\n            parentMenu: undefined,\n            selectionRoot: undefined,\n            cleanupSteps: [],\n        };\n        super.disconnectedCallback();\n    }\n\n    private willDispatchUpdate = false;\n\n    public async triggerUpdate(): Promise<void> {\n        if (this.willDispatchUpdate) {\n            return;\n        }\n        this.willDispatchUpdate = true;\n        await new Promise((ready) => requestAnimationFrame(ready));\n        this.dispatchUpdate();\n    }\n\n    public dispatchUpdate(): void {\n        if (!this.isConnected) {\n            return;\n        }\n        this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));\n        this.willDispatchUpdate = false;\n    }\n\n    public menuData: {\n        focusRoot?: Menu;\n        parentMenu?: Menu;\n        selectionRoot?: Menu;\n        cleanupSteps: ((item: MenuItem) => void)[];\n    } = {\n        focusRoot: undefined,\n        parentMenu: undefined,\n        selectionRoot: undefined,\n        cleanupSteps: [],\n    };\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,MAGG,gCACP,OACI,uBAAAC,EACA,mBAAAC,EACA,YAAAC,MACG,kCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,MAAO,kEACP,OAAS,cAAAC,MAAkB,qDAC3B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,gEACP,OAAOC,MAAmB,iEAC1B,OAAS,+BAAAC,MAAmC,wEAE5C,OAAOC,MAAoB,qBAC3B,OAAOC,MAAqB,mEAE5B,OAAS,sBAAAC,MAA0B,6CAEnC,OAAS,yBAAAC,MAA6B,kEAMtC,MAAMC,EAAuB,IAOtB,aAAM,oCAAoC,KAAM,CACnD,YAAYC,EAAgB,CACxB,MAAM,gCAAiC,CACnC,QAAS,GACT,SAAU,EACd,CAAC,EAcL,iBAAc,IAAI,QAbd,KAAK,MAAMA,CAAI,CACnB,CACA,MAAMA,EAAsB,CACxB,KAAK,MAAQA,EACb,KAAK,2BAA6B,OAClCA,EAAK,SAAW,CACZ,aAAc,CAAC,EACf,UAAW,OACX,cAAe,OACf,WAAY,MAChB,EACA,KAAK,YAAc,IAAI,OAC3B,CAEA,IAAI,MAAiB,CACjB,OAAO,KAAK,KAChB,CAGJ,CAcO,aAAM,iBAAiBT,EAC1BJ,EAAgBD,EAAoBM,EAAW,eAAe,CAAC,CACnE,CAAE,CA4GE,aAAc,CACV,MAAM,EArGV,KAAO,OAAS,GAEhB,KAAQ,kBAAoB,IAAIE,EAA4B,IAAI,EAGhE,KAAO,QAAU,GAGjB,KAAO,SAAW,GAmBlB,KAAQ,OAAS,GAajB,KAAO,WAAa,GAgBpB,KAAO,OAAS,GAuEhB,KAAO,KAAO,GAuBd,KAAQ,uBAA0BO,GAAuC,CA7P7E,IAAAC,GA8PQA,EAAA,KAAK,iBAAL,MAAAA,EAAqB,cACjB,IAAIJ,EAAsBG,EAAM,KAAMA,EAAM,IAAI,EAExD,EAEA,KAAQ,WAAa,IAAY,CAC7B,KAAK,MAAM,CACf,EAyJA,KAAU,mBAAsBA,GAAuB,CAC9CA,EAAuC,WAAa,WACrD,KAAK,KAAO,GACZ,KAAK,eAAe,iBAAiB,EACrC,KAAK,eAAe,oBAChB,eACA,KAAK,kBACT,EAER,EAYA,KAAU,kBAAoB,GAyJ9B,KAAQ,mBAAqB,GAmB7B,KAAO,SAKH,CACA,UAAW,OACX,WAAY,OACZ,cAAe,OACf,aAAc,CAAC,CACnB,EA5ZI,KAAK,iBAAiB,QAAS,KAAK,mBAAoB,CACpD,QAAS,EACb,CAAC,EAED,IAAIJ,EAAmB,KAAM,CACzB,OAAQ,CACJ,cAAe,GACf,UAAW,GACX,QAAS,GACT,gBAAiB,CAAC,KAAK,CAC3B,EACA,SAAWM,GAAc,CACHA,EAAU,MACvBC,GACIA,EAAS,OAAuB,OAAS,SAClD,GAIA,KAAK,uBAAuB,CAChC,CACJ,CAAC,CACL,CAnIA,WAA2B,QAAyB,CAChD,MAAO,CAACT,EAAgBC,EAAiBH,CAAa,CAC1D,CAgBA,IAAW,OAAgB,CACvB,OAAO,KAAK,QAAU,KAAK,QAC/B,CAEA,IAAW,MAAMY,EAAe,CACxBA,IAAU,KAAK,SAGnB,KAAK,OAASA,GAAS,GACnB,KAAK,OACL,KAAK,aAAa,QAAS,KAAK,MAAM,EAEtC,KAAK,gBAAgB,OAAO,EAEpC,CAOA,IAAW,UAAmB,CAC1B,OAAO,KAAK,aAAa,QAAQ,OAC7B,CAACC,EAAKC,IAASD,GAAOC,EAAK,aAAe,IAAI,KAAK,EACnD,EACJ,CACJ,CA6BA,IAAoB,cAA4B,CAC5C,OAAO,IACX,CAEA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAW,cAAiC,CACxC,GAAI,CAAC,KAAK,UAAY,CAAC,KAAK,YACxB,MAAO,CACH,KAAM,CAAC,EACP,QAAS,CAAC,CACd,EAEJ,GAAI,KAAK,cACL,OAAO,KAAK,cAEhB,MAAMC,EAAO,KAAK,SAAS,iBAAiB,EAAE,IAAKC,GAAY,CAC3D,MAAMC,EAAaD,EAAQ,UAAU,EAAI,EACzC,OAAAC,EAAW,gBAAgB,MAAM,EACjCA,EAAW,UAAU,OAAO,MAAM,EAC3BA,CACX,CAAC,EACKC,EAAU,KAAK,YAChB,cAAc,EACd,IAAKJ,GAASA,EAAK,UAAU,EAAI,CAAC,EACvC,YAAK,cAAgB,CAAE,KAAAC,EAAM,QAAAG,CAAQ,EAE9B,KAAK,aAChB,CAiCgB,OAAc,CACtB,KAAK,UAIL,KAAK,iBAAiB,GAI1B,MAAM,MAAM,CAChB,CAEQ,mBAAmBV,EAA8B,CACrD,GAAI,KAAK,SACL,OAAAA,EAAM,eAAe,EACrBA,EAAM,yBAAyB,EAC/BA,EAAM,gBAAgB,EACf,EAEf,CAYQ,kBAA4B,CAChC,IAAIW,EAAU,GACd,OAAI,KAAK,gBACL,KAAK,cAAc,MAAM,EACzBA,EAAU,IAEPA,CACX,CAEU,wBAA+B,CACrC,KAAK,cAAgB,OACrB,KAAK,cAAc,CACvB,CAEU,eAAgC,CACtC,MAAMC,EAAO7B;AAAA;AAAA;AAAA,8BAGS,KAAK,aAAa;AAAA,iDACC,CAC7B,YAAciB,GAAuC,CACjDA,EAAM,MAAMA,EAAM,IAAI,CAC1B,EACA,QAAS,EACb,CAAC;AAAA,2BACWA,GAAiBA,EAAM,gBAAgB,CAAC;AAAA;AAAA,UAG5D,OAAK,KAAK,YAGV,KAAK,kBAAkB,IAAI,YAAY,EACvC,KAAK,kBAAkB,IAAI,YAAY,EACvC,OAAO,gDAAgD,EACvD,OAAO,gDAAgD,EAChDjB;AAAA;AAAA,kCAEmB,IAAmB;AAAA,4BACzB,CAAC,KAAK,UAAU;AAAA,wBACpB,KAAK,YACb,KAAK,MACL,KAAK,kBAAkB,MAAM;AAAA,6BAChB,KAAK,MAAQ,cAAgB,YAAY;AAAA,0BAC5C,CAAC,IAAK,EAAE,CAAqB;AAAA,wBAC/B,MAAM;AAAA,yBACJiB,GAAiBA,EAAM,gBAAgB,CAAC;AAAA,qCAC7B,KAAK,sBAAsB;AAAA;AAAA;AAAA,8BAGjCA,GAAiB,CACxB,KAAK,oBAAoBA,CAAK,EAC9B,KAAK,KAAO,EAChB,CAAC;AAAA,oCACe,KAAK,yBAAyB;AAAA,oCAC9B,KAAK,yBAAyB;AAAA,qDACZA,GAC9BA,EAAM,gBAAgB,CAAC;AAAA;AAAA,sBAEzBY,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WA7BPA,CAoCf,CAEmB,QAAyB,CACxC,OAAO7B;AAAA,cACD,KAAK,SACDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMY,KAAK,QACH,8BACA,EAAE;AAAA;AAAA,oBAGhBC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOX,KAAK,MAAQ,KAAK,KAAK,OAAS,EAC5B,MAAM,aAAa,CACf,GAAI,SACJ,WAAY,GACZ,UAAW,sBACf,CAAC,EACDA,CAAO;AAAA,cACX,KAAK,cAAc,CAAC;AAAA,SAE9B,CAEU,cAAcgB,EAAkD,CACtE,KAAK,eAAiBA,EAAM,OAAO,iBAAiB,CAChD,QAAS,EACb,CAAC,EAAE,CAAC,EACJ,KAAK,WAAa,CAAC,CAAC,KAAK,eACrB,KAAK,YACL,KAAK,aAAa,gBAAiB,MAAM,CAEjD,CAEQ,kBAAkBA,EAA2B,CAC7CA,EAAM,SAAW,MAAQ,KAAK,YAAc,KAAK,OACjD,KAAK,iBAAiB,QAAS,KAAK,mBAAoB,CACpD,KAAM,EACV,CAAC,EACD,KAAK,eAAe,iBAChB,eACA,KAAK,kBACT,EAER,CAEmB,aAAaa,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,WAAY,IAAI,EAClC,KAAK,iBAAiB,cAAe,KAAK,iBAAiB,EAC3D,KAAK,iBAAiB,eAAgB,KAAK,oBAAoB,EAC1D,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,gBAAgB1B,EAAS,CAAC,GAE5C,CAEU,sBAA6B,CA1Y3C,IAAAc,EA2YY,KAAK,OACTA,EAAA,KAAK,SAAS,aAAd,MAAAA,EAA0B,yBAC9B,CAEU,mBAAmBD,EAAoB,CACzCA,EAAM,aAAa,EAAE,SAAS,KAAK,cAAc,GAGrD,KAAK,YAAY,CACrB,CAEU,oBAA2B,CACjC,sBAAsB,IAAM,CAGxB,KAAK,eAAe,KAAO,KAAK,IACpC,CAAC,CACL,CAaU,oBAA2B,CACjC,GAAI,KAAK,aAAc,CACnB,aAAa,KAAK,YAAY,EAC9B,OAAO,KAAK,aACZ,MACJ,CACA,KAAK,YAAY,CACrB,CAKU,oBAA2B,CAC7B,KAAK,MAAQ,CAAC,KAAK,oBACnB,KAAK,aAAe,WAAW,IAAM,CACjC,OAAO,KAAK,aACZ,KAAK,KAAO,EAChB,EAAGF,CAAoB,EAE/B,CASU,oBAAoBE,EAAoB,CArctD,IAAAC,EAscQD,EAAM,gBAAgB,GACtBC,EAAA,KAAK,SAAS,gBAAd,MAAAA,EAA6B,mBAAmB,KACpD,CAEU,2BAAkC,CACxC,KAAK,kBAAoB,EAC7B,CAEA,MAAgB,2BAA2C,CACvD,sBAAsB,IAAM,CACxB,KAAK,kBAAoB,EAC7B,CAAC,CACL,CAEU,kBAAkBD,EAAoB,CAC5C,KAAK,QAAU,GACf,MAAMc,EAAgBd,EAAM,aAAa,EAAE,KAAMe,GAEzCA,IAAO,KAAK,gBACXA,EAAmB,YAAc,YAEzC,EACD,KAAK,eAAe,0BAA4BD,CACpD,CAEU,SAAgB,CACtB,KAAK,KAAO,GACZ,KAAK,OAAS,EAClB,CAEA,MAAa,aAA6B,CAClC,CAAC,KAAK,YAAc,KAAK,MAAQ,KAAK,WAG1C,KAAK,KAAO,GACZ,KAAK,OAAS,GACd,KAAK,aAAa,gBAAiB,MAAM,EACzC,KAAK,iBAAiB,YAAa,KAAK,QAAS,CAC7C,KAAM,EACV,CAAC,EACL,CAEA,oBAA2B,CACvB,MAAME,EAAO,KAAK,aAAa,MAAM,EACjCA,IAAS,SACT,KAAK,aACD,gBACA,KAAK,SAAW,OAAS,OAC7B,GACOA,IAAS,oBAAsBA,IAAS,kBAC/C,KAAK,aAAa,eAAgB,KAAK,SAAW,OAAS,OAAO,CAE1E,CAEO,QAAQA,EAAoB,CAC/B,KAAK,aAAa,OAAQA,CAAI,EAC9B,KAAK,mBAAmB,CAC5B,CAEmB,QAAQH,EAAqC,CAjgBpE,IAAAZ,EAAAgB,EAwhBQ,GAtBA,MAAM,QAAQJ,CAAO,EAEjBA,EAAQ,IAAI,OAAO,IAClB,KAAK,OAAS,OAAOA,EAAQ,IAAI,OAAO,GAAM,cAE/C,KAAK,aAAa,aAAc,KAAK,OAAS,EAAE,EAGhDA,EAAQ,IAAI,QAAQ,IACnB,KAAK,QAAU,OAAOA,EAAQ,IAAI,QAAQ,GAAM,cAE7C,KAAK,UACLZ,EAAA,KAAK,SAAS,gBAAd,MAAAA,EAA6B,2BAGjC,KAAK,gBACL,KAAK,cAAc,iBAAiB,QAAS,KAAK,UAAU,EAC5D,KAAK,cAAc,SAAW,IAE9BY,EAAQ,IAAI,UAAU,GACtB,KAAK,mBAAmB,EAGxBA,EAAQ,IAAI,YAAY,IACvB,KAAK,YACF,OAAOA,EAAQ,IAAI,YAAY,GAAM,aAEzC,GAAI,KAAK,WAAY,CACjB,KAAK,uBAAyB,IAAI,gBAClC,MAAMK,EAAU,CAAE,OAAQ,KAAK,uBAAuB,MAAO,EAC7D,KAAK,iBACD,QACA,KAAK,mBACLA,CACJ,EACA,KAAK,iBACD,eACA,KAAK,mBACLA,CACJ,EACA,KAAK,iBACD,eACA,KAAK,mBACLA,CACJ,EACA,KAAK,iBACD,YACA,KAAK,kBACLA,CACJ,CACJ,MACID,EAAA,KAAK,yBAAL,MAAAA,EAA6B,OAGzC,CAEgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,KAAK,cAAc,CACvB,CAIgB,sBAA6B,CACzC,KAAK,SAAS,aAAa,QAASE,GAAYA,EAAQ,IAAI,CAAC,EAC7D,KAAK,SAAW,CACZ,UAAW,OACX,WAAY,OACZ,cAAe,OACf,aAAc,CAAC,CACnB,EACA,MAAM,qBAAqB,CAC/B,CAIA,MAAa,eAA+B,CACpC,KAAK,qBAGT,KAAK,mBAAqB,GAC1B,MAAM,IAAI,QAASC,GAAU,sBAAsBA,CAAK,CAAC,EACzD,KAAK,eAAe,EACxB,CAEO,gBAAuB,CACrB,KAAK,cAGV,KAAK,cAAc,IAAI,4BAA4B,IAAI,CAAC,EACxD,KAAK,mBAAqB,GAC9B,CAaJ,CAngBWC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GATjC,SAUF,sBAKAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdjC,SAeF,uBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjBjC,SAkBF,wBAGIiC,EAAA,CADVjC,EAAS,CAAE,KAAM,MAAO,CAAC,GApBjB,SAqBE,qBA6BJiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,aAAc,CAAC,GAjD3D,SAkDF,0BAGPiC,EAAA,CADChC,EAAM,kBAAkB,GApDhB,SAqDT,2BAGAgC,EAAA,CADChC,EAAM,mBAAmB,GAvDjB,SAwDT,wBAUOgC,EAAA,CARNjC,EAAS,CACN,KAAM,QACN,QAAS,GACT,UAAW,UACX,YAAa,CACT,MAAO,EACX,CACJ,CAAC,GAjEQ,SAkEF,sBAGCiC,EAAA,CADPhC,EAAM,SAAS,GApEP,SAqED,6BAGDgC,EAAA,CADNhC,EAAM,YAAY,GAvEV,SAwEF,8BAiEAgC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxIjC,SAyIF",
-  "names": ["html", "nothing", "ObserveSlotPresence", "ObserveSlotText", "randomID", "property", "query", "LikeAnchor", "Focusable", "chevronStyles", "DependencyManagerController", "menuItemStyles", "checkmarkStyles", "MutationController", "SlottableRequestEvent", "POINTERLEAVE_TIMEOUT", "item", "event", "_a", "mutations", "mutation", "value", "acc", "node", "icon", "element", "newElement", "content", "handled", "slot", "changes", "parentOverlay", "el", "role", "_b", "options", "removal", "ready", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ObserveSlotPresence,\n    ObserveSlotText,\n    randomID,\n} from '@spectrum-web-components/shared';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\n\nimport menuItemStyles from './menu-item.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport type { Menu } from './Menu.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport type { Overlay } from '@spectrum-web-components/overlay';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * Duration during which a pointing device can leave an `<sp-menu-item>` element\n * and return to it or to the submenu opened from it before closing that submenu.\n **/\nconst POINTERLEAVE_TIMEOUT = 100;\n\ntype MenuCascadeItem = {\n    hadFocusRoot: boolean;\n    ancestorWithSelects?: HTMLElement;\n};\n\n/**\n * Fires when a menu item is added or updated so that a parent menu can track it.\n */\nexport class MenuItemAddedOrUpdatedEvent extends Event {\n    constructor(item: MenuItem) {\n        super('sp-menu-item-added-or-updated', {\n            bubbles: true,\n            composed: true,\n        });\n        this.clear(item);\n    }\n    clear(item: MenuItem): void {\n        this._item = item;\n        this.currentAncestorWithSelects = undefined;\n        item.menuData = {\n            cleanupSteps: [],\n            focusRoot: undefined,\n            selectionRoot: undefined,\n            parentMenu: undefined,\n        };\n        this.menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();\n    }\n    menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();\n    get item(): MenuItem {\n        return this._item;\n    }\n    private _item!: MenuItem;\n    currentAncestorWithSelects?: Menu;\n}\n\n/**\n * Fires to forward keyboard event information to parent menu.\n */\nexport class MenuItemKeydownEvent extends KeyboardEvent {\n    root?: MenuItem;\n    private _event?: KeyboardEvent;\n    constructor({ root, event }: { root?: MenuItem; event?: KeyboardEvent }) {\n        super('sp-menu-item-keydown', { bubbles: true, composed: true });\n        this.root = root;\n        this._event = event;\n    }\n\n    public override get altKey(): boolean {\n        return this._event?.altKey || false;\n    }\n\n    public override get code(): string {\n        return this._event?.code || '';\n    }\n\n    public override get ctrlKey(): boolean {\n        return this._event?.ctrlKey || false;\n    }\n\n    public override get isComposing(): boolean {\n        return this._event?.isComposing || false;\n    }\n\n    public override get key(): string {\n        return this._event?.key || '';\n    }\n\n    public override get location(): number {\n        return this._event?.location || 0;\n    }\n\n    public override get metaKey(): boolean {\n        return this._event?.metaKey || false;\n    }\n\n    public override get repeat(): boolean {\n        return this._event?.repeat || false;\n    }\n\n    public override get shiftKey(): boolean {\n        return this._event?.shiftKey || false;\n    }\n}\n\nexport type MenuItemChildren = { icon: Element[]; content: Node[] };\n\n/**\n * @element sp-menu-item\n *\n * @slot - text content to display within the Menu Item\n * @slot description - description to be placed below the label of the Menu Item\n * @slot icon - icon element to be placed at the start of the Menu Item\n * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.\n * @slot submenu - content placed in a submenu\n * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships\n */\nexport class MenuItem extends LikeAnchor(\n    ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n    public static override get styles(): CSSResultArray {\n        return [menuItemStyles, checkmarkStyles, chevronStyles];\n    }\n\n    abortControllerSubmenu!: AbortController;\n\n    /**\n     * whether the menu item is active or has an active descendant\n     */\n    @property({ type: Boolean, reflect: true })\n    public active = false;\n\n    private dependencyManager = new DependencyManagerController(this);\n\n    /**\n     * whether the menu item has keyboard focus\n     */\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    /**\n     * whether the menu item is selected\n     */\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    /**\n     * value of the menu item which is used for selection\n     */\n    @property({ type: String })\n    public get value(): string {\n        return this._value || this.itemText;\n    }\n\n    public set value(value: string) {\n        if (value === this._value) {\n            return;\n        }\n        this._value = value || '';\n        if (this._value) {\n            this.setAttribute('value', this._value);\n        } else {\n            this.removeAttribute('value');\n        }\n    }\n\n    private _value = '';\n\n    /**\n     * @private\n     * text content of the menu item minus whitespace\n     */\n    public get itemText(): string {\n        return this.itemChildren.content.reduce(\n            (acc, node) => acc + (node.textContent || '').trim(),\n            ''\n        );\n    }\n\n    /**\n     * whether the menu item has a submenu\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'has-submenu' })\n    public hasSubmenu = false;\n\n    @query('slot:not([name])')\n    contentSlot!: HTMLSlotElement;\n\n    @query('slot[name=\"icon\"]')\n    iconSlot!: HTMLSlotElement;\n\n    /**\n     * whether menu item text content should not wrap\n     */\n    @property({\n        type: Boolean,\n        reflect: true,\n        attribute: 'no-wrap',\n        hasChanged() {\n            return false;\n        },\n    })\n    public noWrap = false;\n\n    @query('.anchor')\n    private anchorElement!: HTMLAnchorElement;\n\n    @query('sp-overlay')\n    public overlayElement!: Overlay;\n\n    private submenuElement?: HTMLElement;\n\n    /**\n     * the focusable element of the menu item\n     */\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    protected get hasIcon(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public get itemChildren(): MenuItemChildren {\n        if (!this.iconSlot || !this.contentSlot) {\n            return {\n                icon: [],\n                content: [],\n            };\n        }\n        if (this._itemChildren) {\n            return this._itemChildren;\n        }\n        const icon = this.iconSlot.assignedElements().map((element) => {\n            const newElement = element.cloneNode(true) as HTMLElement;\n            newElement.removeAttribute('slot');\n            newElement.classList.toggle('icon');\n            return newElement;\n        });\n        const content = this.contentSlot\n            .assignedNodes()\n            .map((node) => node.cloneNode(true));\n        this._itemChildren = { icon, content };\n\n        return this._itemChildren;\n    }\n\n    private _itemChildren?: MenuItemChildren;\n\n    constructor() {\n        super();\n        this.addEventListener('click', this.handleClickCapture, {\n            capture: true,\n        });\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n\n        new MutationController(this, {\n            config: {\n                characterData: true,\n                childList: true,\n                subtree: true,\n                attributeFilter: ['src'],\n            },\n            callback: (mutations) => {\n                const isSubmenu = mutations.every(\n                    (mutation) =>\n                        (mutation.target as HTMLElement).slot === 'submenu'\n                );\n                if (isSubmenu) {\n                    return;\n                }\n                this.breakItemChildrenCache();\n            },\n        });\n    }\n\n    /**\n     * whether submenu is open\n     */\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    private handleClickCapture(event: Event): void | boolean {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            event.stopPropagation();\n            return false;\n        }\n\n        if (this.shouldProxyClick()) {\n            return;\n        }\n    }\n\n    private handleSlottableRequest = (event: SlottableRequestEvent): void => {\n        this.submenuElement?.dispatchEvent(\n            new SlottableRequestEvent(event.name, event.data)\n        );\n    };\n\n    private proxyFocus = (): void => {\n        this.focus();\n    };\n\n    private shouldProxyClick(): boolean {\n        let handled = false;\n        if (this.anchorElement) {\n            this.anchorElement.click();\n            handled = true;\n        }\n        return handled;\n    }\n\n    protected breakItemChildrenCache(): void {\n        this._itemChildren = undefined;\n        this.triggerUpdate();\n    }\n\n    protected renderSubmenu(): TemplateResult {\n        const slot = html`\n            <slot\n                name=\"submenu\"\n                @slotchange=${this.manageSubmenu}\n                @sp-menu-item-added-or-updated=${{\n                    handleEvent: (event: MenuItemAddedOrUpdatedEvent) => {\n                        event.clear(event.item);\n                    },\n                    capture: true,\n                }}\n                @focusin=${(event: Event) => event.stopPropagation()}\n            ></slot>\n        `;\n        if (!this.hasSubmenu) {\n            return slot;\n        }\n        this.dependencyManager.add('sp-overlay');\n        this.dependencyManager.add('sp-popover');\n        import('@spectrum-web-components/overlay/sp-overlay.js');\n        import('@spectrum-web-components/popover/sp-popover.js');\n        return html`\n            <sp-overlay\n                .triggerElement=${this as HTMLElement}\n                ?disabled=${!this.hasSubmenu}\n                ?open=${this.hasSubmenu &&\n                this.open &&\n                this.dependencyManager.loaded}\n                .placement=${this.isLTR ? 'right-start' : 'left-start'}\n                .offset=${[-10, -5] as [number, number]}\n                .type=${'auto'}\n                @close=${(event: Event) => event.stopPropagation()}\n                @slottable-request=${this.handleSlottableRequest}\n            >\n                <sp-popover\n                    @change=${(event: Event) => {\n                        this.handleSubmenuChange(event);\n                        this.open = false;\n                    }}\n                    @pointerenter=${this.handleSubmenuPointerenter}\n                    @pointerleave=${this.handleSubmenuPointerleave}\n                    @sp-menu-item-added-or-updated=${(event: Event) =>\n                        event.stopPropagation()}\n                >\n                    ${slot}\n                </sp-popover>\n            </sp-overlay>\n            <sp-icon-chevron100\n                class=\"spectrum-UIIcon-ChevronRight100 chevron icon\"\n            ></sp-icon-chevron100>\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.selected\n                ? html`\n                      <sp-icon-checkmark100\n                          id=\"selected\"\n                          class=\"spectrum-UIIcon-Checkmark100 \n                            icon \n                            checkmark\n                            ${this.hasIcon\n                              ? 'checkmark--withAdjacentIcon'\n                              : ''}\"\n                      ></sp-icon-checkmark100>\n                  `\n                : nothing}\n            <slot name=\"icon\"></slot>\n            <div id=\"label\">\n                <slot id=\"slot\"></slot>\n            </div>\n            <slot name=\"description\"></slot>\n            <slot name=\"value\"></slot>\n            ${this.href && this.href.length > 0\n                ? super.renderAnchor({\n                      id: 'button',\n                      ariaHidden: true,\n                      className: 'button anchor hidden',\n                  })\n                : nothing}\n            ${this.renderSubmenu()}\n        `;\n    }\n\n    /**\n     * determines if item has a submenu and updates the `aria-haspopup` attribute\n     */\n    protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {\n        this.submenuElement = event.target.assignedElements({\n            flatten: true,\n        })[0] as HTMLElement;\n        this.hasSubmenu = !!this.submenuElement;\n        if (this.hasSubmenu) {\n            this.setAttribute('aria-haspopup', 'true');\n        }\n    }\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.target === this && this.hasSubmenu && this.open) {\n            this.addEventListener('focus', this.handleSubmenuFocus, {\n                once: true,\n            });\n            this.overlayElement.addEventListener(\n                'beforetoggle',\n                this.handleBeforetoggle\n            );\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.setAttribute('tabindex', '-1');\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('pointerdown', this.handlePointerdown);\n        this.addEventListener('pointerenter', this.closeOverlaysForRoot);\n        if (!this.hasAttribute('id')) {\n            this.id = `sp-menu-item-${randomID()}`;\n        }\n    }\n\n    /**\n     * forward key info from keydown event to parent menu\n     */\n    handleKeydown = (event: KeyboardEvent): void => {\n        const { target, key } = event;\n        const openSubmenuKey =\n            this.hasSubmenu && !this.open && [' ', 'Enter'].includes(key);\n        if (target === this) {\n            if (\n                ['ArrowLeft', 'ArrowRight', 'Escape'].includes(key) ||\n                openSubmenuKey\n            )\n                event.preventDefault();\n            this.dispatchEvent(\n                new MenuItemKeydownEvent({ root: this, event: event })\n            );\n        }\n    };\n\n    protected closeOverlaysForRoot(): void {\n        if (this.open) return;\n        this.menuData.parentMenu?.closeDescendentOverlays();\n    }\n\n    protected handleFocus(event: FocusEvent): void {\n        const { target } = event;\n        if (target === this) {\n            this.focused = true;\n        }\n    }\n\n    protected handleBlur(event: FocusEvent): void {\n        const { target } = event;\n        if (target === this) {\n            this.focused = false;\n        }\n    }\n\n    protected handleSubmenuClick(event: Event): void {\n        if (event.composedPath().includes(this.overlayElement)) {\n            return;\n        }\n        this.openOverlay();\n    }\n\n    protected handleSubmenuFocus(): void {\n        requestAnimationFrame(() => {\n            // Wait till after `closeDescendentOverlays` has happened in Menu\n            // to reopen (keep open) the direct descendent of this Menu Item\n            this.overlayElement.open = this.open;\n            this.focused = false;\n        });\n    }\n\n    protected handleBeforetoggle = (event: Event): void => {\n        if ((event as Event & { newState: string }).newState === 'closed') {\n            this.open = true;\n            this.overlayElement.manuallyKeepOpen();\n            this.overlayElement.removeEventListener(\n                'beforetoggle',\n                this.handleBeforetoggle\n            );\n        }\n    };\n\n    protected handlePointerenter(): void {\n        if (this.leaveTimeout) {\n            clearTimeout(this.leaveTimeout);\n            delete this.leaveTimeout;\n            return;\n        }\n        this.openOverlay();\n    }\n\n    protected leaveTimeout?: ReturnType<typeof setTimeout>;\n    protected recentlyLeftChild = false;\n\n    protected handlePointerleave(): void {\n        if (this.open && !this.recentlyLeftChild) {\n            this.leaveTimeout = setTimeout(() => {\n                delete this.leaveTimeout;\n                this.open = false;\n            }, POINTERLEAVE_TIMEOUT);\n        }\n    }\n\n    /**\n     * When there is a `change` event in the submenu for this item\n     * then we \"click\" this item to cascade the selection up the\n     * menu tree allowing all submenus between the initial selection\n     * and the root of the tree to have their selection changes and\n     * be closed.\n     */\n    protected handleSubmenuChange(event: Event): void {\n        event.stopPropagation();\n        this.menuData.selectionRoot?.selectOrToggleItem(this);\n    }\n\n    protected handleSubmenuPointerenter(): void {\n        this.recentlyLeftChild = true;\n    }\n\n    protected async handleSubmenuPointerleave(): Promise<void> {\n        requestAnimationFrame(() => {\n            this.recentlyLeftChild = false;\n        });\n    }\n\n    protected handleSubmenuOpen(event: Event): void {\n        const shouldFocus = this.matches(':focus, :focus-within') || this.focused;\n        this.focused = false;\n        const parentOverlay = event.composedPath().find((el) => {\n            return (\n                el !== this.overlayElement &&\n                (el as HTMLElement).localName === 'sp-overlay'\n            );\n        }) as Overlay;\n        if (shouldFocus)\n            this.submenuElement?.focus();\n        this.overlayElement.parentOverlayToForceClose = parentOverlay;\n    }\n\n    protected cleanup(): void {\n        this.setAttribute('aria-expanded', 'false');\n        this.open = false;\n        this.active = false;\n    }\n\n    public async openOverlay(): Promise<void> {\n        if (!this.hasSubmenu || this.open || this.disabled) {\n            return;\n        }\n        this.open = true;\n        this.active = true;\n        this.setAttribute('aria-expanded', 'true');\n        this.addEventListener('sp-closed', this.cleanup, {\n            once: true,\n        });\n    }\n\n    updateAriaSelected(): void {\n        const role = this.getAttribute('role');\n        if (role === 'option') {\n            this.setAttribute(\n                'aria-selected',\n                this.selected ? 'true' : 'false'\n            );\n        } else if (role === 'menuitemcheckbox' || role === 'menuitemradio') {\n            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');\n        }\n    }\n\n    public setRole(role: string): void {\n        this.setAttribute('role', role);\n        this.updateAriaSelected();\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        super.updated(changes);\n\n        // make sure focus returns to the anchor element when submenu is closed\n        if (\n            changes.has('open') &&\n            !this.open &&\n            this.hasSubmenu &&\n            this.hasVisibleFocusInTree()\n        ) {\n            this.focus();\n        }\n    }\n\n    protected override updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (\n            changes.has('label') &&\n            (this.label || typeof changes.get('label') !== 'undefined')\n        ) {\n            this.setAttribute('aria-label', this.label || '');\n        }\n        if (\n            changes.has('active') &&\n            (this.active || typeof changes.get('active') !== 'undefined')\n        ) {\n            if (this.active) {\n                this.menuData.selectionRoot?.closeDescendentOverlays();\n            }\n        }\n        if (this.anchorElement) {\n            this.anchorElement.addEventListener('focus', this.proxyFocus);\n            this.anchorElement.tabIndex = -1;\n        }\n        if (changes.has('selected')) {\n            this.updateAriaSelected();\n        }\n        if (\n            changes.has('hasSubmenu') &&\n            (this.hasSubmenu ||\n                typeof changes.get('hasSubmenu') !== 'undefined')\n        ) {\n            if (this.hasSubmenu) {\n                this.abortControllerSubmenu = new AbortController();\n                const options = { signal: this.abortControllerSubmenu.signal };\n                this.addEventListener(\n                    'click',\n                    this.handleSubmenuClick,\n                    options\n                );\n                this.addEventListener(\n                    'pointerenter',\n                    this.handlePointerenter,\n                    options\n                );\n                this.addEventListener(\n                    'pointerleave',\n                    this.handlePointerleave,\n                    options\n                );\n                this.addEventListener(\n                    'sp-opened',\n                    this.handleSubmenuOpen,\n                    options\n                );\n            } else {\n                this.abortControllerSubmenu?.abort();\n            }\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.triggerUpdate();\n    }\n\n    _parentElement!: HTMLElement;\n\n    public override disconnectedCallback(): void {\n        this.menuData.cleanupSteps.forEach((removal) => removal(this));\n        this.menuData = {\n            focusRoot: undefined,\n            parentMenu: undefined,\n            selectionRoot: undefined,\n            cleanupSteps: [],\n        };\n        super.disconnectedCallback();\n    }\n\n    private willDispatchUpdate = false;\n\n    public async triggerUpdate(): Promise<void> {\n        if (this.willDispatchUpdate) {\n            return;\n        }\n        this.willDispatchUpdate = true;\n        await new Promise((ready) => requestAnimationFrame(ready));\n        this.dispatchUpdate();\n    }\n\n    public override focus(): void {\n        super.focus();\n        // ensure focus event fires in Chromium for tests\n        this.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    public override blur(): void {\n        // ensure focus event fires in Chromium for tests\n        this.dispatchEvent(new FocusEvent('blur'));\n        super.blur();\n    }\n\n    public dispatchUpdate(): void {\n        if (!this.isConnected) {\n            return;\n        }\n        this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));\n        this.willDispatchUpdate = false;\n    }\n\n    public menuData: {\n        focusRoot?: Menu;\n        parentMenu?: Menu;\n        selectionRoot?: Menu;\n        cleanupSteps: ((item: MenuItem) => void)[];\n    } = {\n        // menu that controls ArrowUp/ArrowDown navigation\n        focusRoot: undefined,\n        parentMenu: undefined,\n        // menu or menu group that controls selection\n        selectionRoot: undefined,\n        cleanupSteps: [],\n    };\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "nothing", "ObserveSlotPresence", "ObserveSlotText", "randomID", "property", "query", "LikeAnchor", "Focusable", "chevronStyles", "DependencyManagerController", "menuItemStyles", "checkmarkStyles", "MutationController", "SlottableRequestEvent", "POINTERLEAVE_TIMEOUT", "item", "root", "event", "_a", "target", "key", "openSubmenuKey", "mutations", "mutation", "value", "acc", "node", "icon", "element", "newElement", "content", "handled", "slot", "changes", "shouldFocus", "parentOverlay", "el", "role", "_b", "options", "removal", "ready", "__decorateClass"]
 }

package/stories/index.js

@@ -40,17 +40,17 @@ export class ComplexSlottedGroup extends LitElement {
   }
   render() {
     return html`
-            <sp-menu>
-                <sp-menu-group>
+            <sp-menu id="sp-menu">
+                <sp-menu-group id="sp-menu-group-1">
                     <sp-menu-item id="i-1">Before First</sp-menu-item>
                     <slot name="before"></slot>
                 </sp-menu-group>
-                <sp-menu-group>
+                <sp-menu-group id="sp-menu-group-2">
                     <sp-menu-item id="i-4">Sibling 1</sp-menu-item>
                     <slot></slot>
                     <sp-menu-item id="i-10">Sibling 2</sp-menu-item>
                 </sp-menu-group>
-                <sp-menu-group>
+                <sp-menu-group id="sp-menu-group-3">
                     <sp-menu-item id="i-11">After 1</sp-menu-item>
                     <sp-menu-item id="i-12">After 2</sp-menu-item>
                 </sp-menu-group>
@@ -58,6 +58,10 @@ export class ComplexSlottedGroup extends LitElement {
         `;
   }
 }
+ComplexSlottedGroup.shadowRootOptions = {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+};
 customElements.define("complex-slotted-group", ComplexSlottedGroup);
 export class ComplexSlottedMenu extends LitElement {
   get menu() {
@@ -67,7 +71,7 @@ export class ComplexSlottedMenu extends LitElement {
   }
   render() {
     return html`
-            <complex-slotted-group id="group">
+            <complex-slotted-group id="complex-slotted-group">
                 <sp-menu-item id="i-5">Middle 1</sp-menu-item>
                 <sp-menu-item id="i-6">Middle 2</sp-menu-item>
                 <sp-menu-item id="i-7">Middle 3</sp-menu-item>
@@ -78,5 +82,9 @@ export class ComplexSlottedMenu extends LitElement {
         `;
   }
 }
+ComplexSlottedMenu.shadowRootOptions = {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+};
 customElements.define("complex-slotted-menu", ComplexSlottedMenu);
 //# sourceMappingURL=index.js.map

package/stories/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Menu } from '@spectrum-web-components/menu';\n\nexport const MenuMarkup = ({\n    size = 'm' as 's' | 'm' | 'l' | 'xl',\n} = {}): TemplateResult => {\n    return html`\n        <sp-menu size=${size}>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu size=${size}>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport class ComplexSlottedGroup extends LitElement {\n    get menu(): Menu {\n        return this.renderRoot.querySelector('sp-menu') as Menu;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            <sp-menu>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-1\">Before First</sp-menu-item>\n                    <slot name=\"before\"></slot>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-4\">Sibling 1</sp-menu-item>\n                    <slot></slot>\n                    <sp-menu-item id=\"i-10\">Sibling 2</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-11\">After 1</sp-menu-item>\n                    <sp-menu-item id=\"i-12\">After 2</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-group', ComplexSlottedGroup);\n\nexport class ComplexSlottedMenu extends LitElement {\n    get menu(): Menu {\n        return (\n            this.renderRoot.querySelector(\n                'complex-slotted-group'\n            ) as ComplexSlottedGroup\n        ).menu;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            <complex-slotted-group id=\"group\">\n                <sp-menu-item id=\"i-5\">Middle 1</sp-menu-item>\n                <sp-menu-item id=\"i-6\">Middle 2</sp-menu-item>\n                <sp-menu-item id=\"i-7\">Middle 3</sp-menu-item>\n                <slot></slot>\n                <slot name=\"before\" slot=\"before\"></slot>\n                <sp-menu-item slot=\"before\" id=\"i-3\">Before Last</sp-menu-item>\n            </complex-slotted-group>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-menu', ComplexSlottedMenu);\n"],
-  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGA,aAAM,aAAa,CAAC;AAAA,EACvB,OAAO;AACX,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA,wBACa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC;AAEO,aAAM,4BAA4B,WAAW;AAAA,EAChD,IAAI,OAAa;AACb,WAAO,KAAK,WAAW,cAAc,SAAS;AAAA,EAClD;AAAA,EACmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBX;AACJ;AAEA,eAAe,OAAO,yBAAyB,mBAAmB;AAE3D,aAAM,2BAA2B,WAAW;AAAA,EAC/C,IAAI,OAAa;AACb,WACI,KAAK,WAAW;AAAA,MACZ;AAAA,IACJ,EACF;AAAA,EACN;AAAA,EACmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX;AACJ;AAEA,eAAe,OAAO,wBAAwB,kBAAkB;",
+  "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 {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Menu } from '@spectrum-web-components/menu';\n\nexport const MenuMarkup = ({\n    size = 'm' as 's' | 'm' | 'l' | 'xl',\n} = {}): TemplateResult => {\n    return html`\n        <sp-menu size=${size}>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu size=${size}>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport class ComplexSlottedGroup extends LitElement {\n    get menu(): Menu {\n        return this.renderRoot.querySelector('sp-menu') as Menu;\n    }\n\n    static override shadowRootOptions = {\n        ...LitElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-menu id=\"sp-menu\">\n                <sp-menu-group id=\"sp-menu-group-1\">\n                    <sp-menu-item id=\"i-1\">Before First</sp-menu-item>\n                    <slot name=\"before\"></slot>\n                </sp-menu-group>\n                <sp-menu-group id=\"sp-menu-group-2\">\n                    <sp-menu-item id=\"i-4\">Sibling 1</sp-menu-item>\n                    <slot></slot>\n                    <sp-menu-item id=\"i-10\">Sibling 2</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group id=\"sp-menu-group-3\">\n                    <sp-menu-item id=\"i-11\">After 1</sp-menu-item>\n                    <sp-menu-item id=\"i-12\">After 2</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-group', ComplexSlottedGroup);\n\nexport class ComplexSlottedMenu extends LitElement {\n    get menu(): Menu {\n        return (\n            this.renderRoot.querySelector(\n                'complex-slotted-group'\n            ) as ComplexSlottedGroup\n        ).menu;\n    }\n\n    static override shadowRootOptions = {\n        ...LitElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <complex-slotted-group id=\"complex-slotted-group\">\n                <sp-menu-item id=\"i-5\">Middle 1</sp-menu-item>\n                <sp-menu-item id=\"i-6\">Middle 2</sp-menu-item>\n                <sp-menu-item id=\"i-7\">Middle 3</sp-menu-item>\n                <slot></slot>\n                <slot name=\"before\" slot=\"before\"></slot>\n                <sp-menu-item slot=\"before\" id=\"i-3\">Before Last</sp-menu-item>\n            </complex-slotted-group>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-menu', ComplexSlottedMenu);\n"],
+  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGA,aAAM,aAAa,CAAC;AAAA,EACvB,OAAO;AACX,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA,wBACa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC;AAEO,aAAM,4BAA4B,WAAW;AAAA,EAChD,IAAI,OAAa;AACb,WAAO,KAAK,WAAW,cAAc,SAAS;AAAA,EAClD;AAAA,EAOmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBX;AACJ;AA7Ba,oBAKO,oBAAoB;AAAA,EAChC,GAAG,WAAW;AAAA,EACd,gBAAgB;AACpB;AAuBJ,eAAe,OAAO,yBAAyB,mBAAmB;AAE3D,aAAM,2BAA2B,WAAW;AAAA,EAC/C,IAAI,OAAa;AACb,WACI,KAAK,WAAW;AAAA,MACZ;AAAA,IACJ,EACF;AAAA,EACN;AAAA,EAOmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX;AACJ;AA1Ba,mBASO,oBAAoB;AAAA,EAChC,GAAG,WAAW;AAAA,EACd,gBAAgB;AACpB;AAgBJ,eAAe,OAAO,wBAAwB,kBAAkB;",
   "names": []
 }

package/stories/menu.stories.js

@@ -404,4 +404,24 @@ export const menuWithValueSlots = () => {
         </sp-popover>
     `;
 };
+headersAndIcons.storyName = "Dynamic MenuItems";
+export const dynamicRemoval = () => {
+  const removeItem = async function(event) {
+    var _a, _b;
+    await ((_a = event.target) == null ? void 0 : _a.updateComplete);
+    (_b = event.target) == null ? void 0 : _b.remove();
+  };
+  return html`
+        <sp-menu id="casey" selects="single">
+            <sp-menu-item>Deselect</sp-menu-item>
+            <sp-menu-item>Select Inverse</sp-menu-item>
+            <sp-menu-item id="nikkimk" @focus=${removeItem}>
+                Feather...
+            </sp-menu-item>
+            <sp-menu-item selected>Select and Mask...</sp-menu-item>
+            <sp-menu-item>Save Selection</sp-menu-item>
+            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+        </sp-menu>
+    `;
+};
 //# sourceMappingURL=menu.stories.js.map

package/stories/menu.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["menu.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport 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\ncontrolled.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: 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 disabled>\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\nexport const menuWithValueSlots = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px\">\n            <sp-menu-item>\n                Undo\n                <span slot=\"value\">\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Redo\n                <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>\n                Cut\n                <span slot=\"value\">\u2318\u200BX</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                Copy\n                <span slot=\"value\">\u2318\u200BS</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Paste\n                <span slot=\"value\">\u2318\u200BP</span>\n            </sp-menu-item>\n        </sp-menu>\n        <sp-popover open style=\"width: 150px\">\n            <sp-menu>\n                <sp-menu-item>\n                    Undo\n                    <span slot=\"value\">\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Redo\n                    <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>\n                    Cut\n                    <span slot=\"value\">\u2318\u200BX</span>\n                </sp-menu-item>\n                <sp-menu-item>\n                    Copy\n                    <span slot=\"value\">\u2318\u200BS</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Paste\n                    <span slot=\"value\">\u2318\u200BP</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n"],
-  "mappings": "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",
+  "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, MenuItem } 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\ncontrolled.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: 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 disabled>\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\nexport const menuWithValueSlots = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px\">\n            <sp-menu-item>\n                Undo\n                <span slot=\"value\">\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Redo\n                <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n            </sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>\n                Cut\n                <span slot=\"value\">\u2318\u200BX</span>\n            </sp-menu-item>\n            <sp-menu-item>\n                Copy\n                <span slot=\"value\">\u2318\u200BS</span>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Paste\n                <span slot=\"value\">\u2318\u200BP</span>\n            </sp-menu-item>\n        </sp-menu>\n        <sp-popover open style=\"width: 150px\">\n            <sp-menu>\n                <sp-menu-item>\n                    Undo\n                    <span slot=\"value\">\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Redo\n                    <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n                </sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>\n                    Cut\n                    <span slot=\"value\">\u2318\u200BX</span>\n                </sp-menu-item>\n                <sp-menu-item>\n                    Copy\n                    <span slot=\"value\">\u2318\u200BS</span>\n                </sp-menu-item>\n                <sp-menu-item disabled>\n                    Paste\n                    <span slot=\"value\">\u2318\u200BP</span>\n                </sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nheadersAndIcons.storyName = 'Dynamic MenuItems';\n\nexport const dynamicRemoval = (): TemplateResult => {\n    const removeItem = async function (event: FocusEvent) {\n        await (event.target as MenuItem)?.updateComplete;\n        (event.target as MenuItem)?.remove();\n    };\n    return html`\n        <sp-menu id=\"casey\" selects=\"single\">\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item id=\"nikkimk\" @focus=${removeItem}>\n                Feather...\n            </sp-menu-item>\n            <sp-menu-item selected>Select and Mask...</sp-menu-item>\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};\n"],
+  "mappings": "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",
   "names": []
 }