@spectrum-web-components/menu 1.2.0-beta.9 → 1.2.0

package/src/MenuGroup.dev.js

@@ -28,15 +28,19 @@ export class MenuGroup extends Menu {
   static get styles() {
     return [...super.styles, menuGroupStyles];
   }
+  /**
+   * a menu group must have the role `group`
+   * and should never function as a menu
+   */
   get ownRole() {
-    switch (this.selects) {
-      case "multiple":
-      case "single":
-      case "inherit":
-        return "group";
-      default:
-        return "menu";
-    }
+    return "group";
+  }
+  /**
+   * only a menu controls roving tabindex;
+   * groups should defer navigation to parent menu
+   */
+  get controlsRovingTabindex() {
+    return false;
   }
   updateLabel() {
     const headerElement = this.headerElements.length ? this.headerElements[0] : void 0;
@@ -62,7 +66,7 @@ export class MenuGroup extends Menu {
             <span class="header" ?hidden=${!this.headerElement}>
                 <slot name="header" @slotchange=${this.updateLabel}></slot>
             </span>
-            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>
+            ${this.renderMenuItemSlot()}
         `;
   }
 }

package/src/MenuGroup.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["MenuGroup.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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { Menu } from './Menu.dev.js'\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId || `sp-menu-group-label-${randomID()}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>\n        `;\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AAErB,OAAO;AACP,OAAO,qBAAqB;AAQrB,aAAM,kBAAkB,KAAK;AAAA,EAA7B;AAAA;AAKH,SAAQ,WAAW;AAAA;AAAA,EAJnB,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,eAAe;AAAA,EAC5C;AAAA,EAaA,IAAuB,UAAkB;AACrC,YAAQ,KAAK,SAAS;AAAA,MAClB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACD,eAAO;AAAA,MACX;AACI,eAAO;AAAA,IACf;AAAA,EACJ;AAAA,EAEU,cAAoB;AAC1B,UAAM,gBAAgB,KAAK,eAAe,SACpC,KAAK,eAAe,CAAC,IACrB;AACN,QAAI,kBAAkB,KAAK,eAAe;AACtC,UAAI,KAAK,iBAAiB,KAAK,cAAc,OAAO,KAAK,UAAU;AAC/D,aAAK,cAAc,gBAAgB,IAAI;AAAA,MAC3C;AACA,UAAI,eAAe;AACf,aAAK,WACD,KAAK,YAAY,uBAAuB,SAAS,CAAC;AACtD,cAAM,WAAW,cAAc,MAAM,KAAK;AAC1C,YAAI,CAAC,cAAc,IAAI;AACnB,wBAAc,KAAK;AAAA,QACvB;AACA,aAAK,aAAa,mBAAmB,QAAQ;AAAA,MACjD,OAAO;AACH,aAAK,gBAAgB,iBAAiB;AAAA,MAC1C;AAAA,IACJ;AACA,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEgB,SAAyB;AACrC,WAAO;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA,8BAEpC,KAAK,mBAAmB,CAAC;AAAA;AAAA,EAEnD;AACJ;AA/CY;AAAA,EAJP,mBAAmB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA,EACb,CAAC;AAAA,GAVQ,UAWD;AAGA;AAAA,EADP,MAAM;AAAA,GAbE,UAcD;",
+  "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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { Menu } from './Menu.dev.js'\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    /**\n     * a menu group must have the role `group`\n     * and should never function as a menu\n     */\n    protected override get ownRole(): string {\n        return 'group';\n    }\n\n    /**\n     * only a menu controls roving tabindex;\n     * groups should defer navigation to parent menu\n     */\n    protected override get controlsRovingTabindex(): boolean {\n        return false;\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId || `sp-menu-group-label-${randomID()}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            ${this.renderMenuItemSlot()}\n        `;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AAErB,OAAO;AACP,OAAO,qBAAqB;AAQrB,aAAM,kBAAkB,KAAK;AAAA,EAA7B;AAAA;AAKH,SAAQ,WAAW;AAAA;AAAA,EAJnB,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,eAAe;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBA,IAAuB,UAAkB;AACrC,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAuB,yBAAkC;AACrD,WAAO;AAAA,EACX;AAAA,EAEU,cAAoB;AAC1B,UAAM,gBAAgB,KAAK,eAAe,SACpC,KAAK,eAAe,CAAC,IACrB;AACN,QAAI,kBAAkB,KAAK,eAAe;AACtC,UAAI,KAAK,iBAAiB,KAAK,cAAc,OAAO,KAAK,UAAU;AAC/D,aAAK,cAAc,gBAAgB,IAAI;AAAA,MAC3C;AACA,UAAI,eAAe;AACf,aAAK,WACD,KAAK,YAAY,uBAAuB,SAAS,CAAC;AACtD,cAAM,WAAW,cAAc,MAAM,KAAK;AAC1C,YAAI,CAAC,cAAc,IAAI;AACnB,wBAAc,KAAK;AAAA,QACvB;AACA,aAAK,aAAa,mBAAmB,QAAQ;AAAA,MACjD,OAAO;AACH,aAAK,gBAAgB,iBAAiB;AAAA,MAC1C;AAAA,IACJ;AACA,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEgB,SAAyB;AACrC,WAAO;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA,cAEpD,KAAK,mBAAmB,CAAC;AAAA;AAAA,EAEnC;AACJ;AApDY;AAAA,EAJP,mBAAmB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA,EACb,CAAC;AAAA,GAVQ,UAWD;AAGA;AAAA,EADP,MAAM;AAAA,GAbE,UAcD;",
   "names": []
 }

package/src/MenuGroup.js

@@ -1,7 +1,7 @@
-"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(i,s,e,t)=>{for(var r=t>1?void 0:t?h(s,e):s,d=i.length-1,a;d>=0;d--)(a=i[d])&&(r=(t?a(s,e,r):a(r))||r);return t&&r&&n(s,e,r),r};import{html as m}from"@spectrum-web-components/base";import{queryAssignedNodes as o,state as u}from"@spectrum-web-components/base/src/decorators.js";import{randomID as p}from"@spectrum-web-components/shared/src/random-id.js";import{Menu as c}from"./Menu.js";import"@spectrum-web-components/menu/sp-menu.js";import f from"./menu-group.css.js";export class MenuGroup extends c{constructor(){super(...arguments);this.headerId=""}static get styles(){return[...super.styles,f]}get ownRole(){switch(this.selects){case"multiple":case"single":case"inherit":return"group";default:return"menu"}}updateLabel(){const e=this.headerElements.length?this.headerElements[0]:void 0;if(e!==this.headerElement)if(this.headerElement&&this.headerElement.id===this.headerId&&this.headerElement.removeAttribute("id"),e){this.headerId=this.headerId||`sp-menu-group-label-${p()}`;const t=e.id||this.headerId;e.id||(e.id=t),this.setAttribute("aria-labelledby",t)}else this.removeAttribute("aria-labelledby");this.headerElement=e}render(){return m`
+"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var l=(i,d,e,t)=>{for(var r=t>1?void 0:t?o(d,e):d,s=i.length-1,a;s>=0;s--)(a=i[s])&&(r=(t?a(d,e,r):a(r))||r);return t&&r&&n(d,e,r),r};import{html as h}from"@spectrum-web-components/base";import{queryAssignedNodes as m,state as p}from"@spectrum-web-components/base/src/decorators.js";import{randomID as u}from"@spectrum-web-components/shared/src/random-id.js";import{Menu as b}from"./Menu.js";import"@spectrum-web-components/menu/sp-menu.js";import f from"./menu-group.css.js";export class MenuGroup extends b{constructor(){super(...arguments);this.headerId=""}static get styles(){return[...super.styles,f]}get ownRole(){return"group"}get controlsRovingTabindex(){return!1}updateLabel(){const e=this.headerElements.length?this.headerElements[0]:void 0;if(e!==this.headerElement)if(this.headerElement&&this.headerElement.id===this.headerId&&this.headerElement.removeAttribute("id"),e){this.headerId=this.headerId||`sp-menu-group-label-${u()}`;const t=e.id||this.headerId;e.id||(e.id=t),this.setAttribute("aria-labelledby",t)}else this.removeAttribute("aria-labelledby");this.headerElement=e}render(){return h`
             <span class="header" ?hidden=${!this.headerElement}>
                 <slot name="header" @slotchange=${this.updateLabel}></slot>
             </span>
-            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>
-        `}}l([o({slot:"header",flatten:!0})],MenuGroup.prototype,"headerElements",2),l([u()],MenuGroup.prototype,"headerElement",2);
+            ${this.renderMenuItemSlot()}
+        `}}l([m({slot:"header",flatten:!0})],MenuGroup.prototype,"headerElements",2),l([p()],MenuGroup.prototype,"headerElement",2);
 //# sourceMappingURL=MenuGroup.js.map

package/src/MenuGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["MenuGroup.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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId || `sp-menu-group-label-${randomID()}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,mDAEzB,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,aAAM,kBAAkBD,CAAK,CAA7B,kCAKH,KAAQ,SAAW,GAJnB,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAe,CAC5C,CAaA,IAAuB,SAAkB,CACrC,OAAQ,KAAK,QAAS,CAClB,IAAK,WACL,IAAK,SACL,IAAK,UACD,MAAO,QACX,QACI,MAAO,MACf,CACJ,CAEU,aAAoB,CAC1B,MAAMC,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,KAAK,SACD,KAAK,UAAY,uBAAuBH,EAAS,CAAC,GACtD,MAAMI,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,CACjD,MACI,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAON;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA,8BAEpC,KAAK,mBAAmB,CAAC;AAAA,SAEnD,CACJ,CA/CYQ,EAAA,CAJPP,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAVQ,UAWD,8BAGAO,EAAA,CADPN,EAAM,GAbE,UAcD",
+  "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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    /**\n     * a menu group must have the role `group`\n     * and should never function as a menu\n     */\n    protected override get ownRole(): string {\n        return 'group';\n    }\n\n    /**\n     * only a menu controls roving tabindex;\n     * groups should defer navigation to parent menu\n     */\n    protected override get controlsRovingTabindex(): boolean {\n        return false;\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId || `sp-menu-group-label-${randomID()}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            ${this.renderMenuItemSlot()}\n        `;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,mDAEzB,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,aAAM,kBAAkBD,CAAK,CAA7B,kCAKH,KAAQ,SAAW,GAJnB,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAe,CAC5C,CAiBA,IAAuB,SAAkB,CACrC,MAAO,OACX,CAMA,IAAuB,wBAAkC,CACrD,MAAO,EACX,CAEU,aAAoB,CAC1B,MAAMC,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,KAAK,SACD,KAAK,UAAY,uBAAuBH,EAAS,CAAC,GACtD,MAAMI,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,CACjD,MACI,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAON;AAAA,2CAC4B,CAAC,KAAK,aAAa;AAAA,kDACZ,KAAK,WAAW;AAAA;AAAA,cAEpD,KAAK,mBAAmB,CAAC;AAAA,SAEnC,CACJ,CApDYQ,EAAA,CAJPP,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAVQ,UAWD,8BAGAO,EAAA,CADPN,EAAM,GAbE,UAcD",
   "names": ["html", "queryAssignedNodes", "state", "randomID", "Menu", "menuGroupStyles", "headerElement", "headerId", "__decorateClass"]
 }

package/src/MenuItem.d.ts

@@ -8,6 +8,9 @@ type MenuCascadeItem = {
     hadFocusRoot: boolean;
     ancestorWithSelects?: HTMLElement;
 };
+/**
+ * Fires when a menu item is added or updated so that a parent menu can track it.
+ */
 export declare class MenuItemAddedOrUpdatedEvent extends Event {
     constructor(item: MenuItem);
     clear(item: MenuItem): void;
@@ -16,6 +19,26 @@ export declare class MenuItemAddedOrUpdatedEvent extends Event {
     private _item;
     currentAncestorWithSelects?: Menu;
 }
+/**
+ * Fires to forward keyboard event information to parent menu.
+ */
+export declare class MenuItemKeydownEvent extends KeyboardEvent {
+    root?: MenuItem;
+    private _event?;
+    constructor({ root, event }: {
+        root?: MenuItem;
+        event?: KeyboardEvent;
+    });
+    get altKey(): boolean;
+    get code(): string;
+    get ctrlKey(): boolean;
+    get isComposing(): boolean;
+    get key(): string;
+    get location(): number;
+    get metaKey(): boolean;
+    get repeat(): boolean;
+    get shiftKey(): boolean;
+}
 export type MenuItemChildren = {
     icon: Element[];
     content: Node[];
@@ -43,31 +66,55 @@ declare const MenuItem_base: typeof Focusable & {
 export declare class MenuItem extends MenuItem_base {
     static get styles(): CSSResultArray;
     abortControllerSubmenu: AbortController;
+    /**
+     * whether the menu item is active or has an active descendant
+     */
     active: boolean;
     private dependencyManager;
+    /**
+     * whether the menu item has keyboard focus
+     */
     focused: boolean;
+    /**
+     * whether the menu item is selected
+     */
     selected: boolean;
+    /**
+     * value of the menu item which is used for selection
+     */
     get value(): string;
     set value(value: string);
     private _value;
     /**
      * @private
+     * text content of the menu item minus whitespace
      */
     get itemText(): string;
+    /**
+     * whether the menu item has a submenu
+     */
     hasSubmenu: boolean;
     contentSlot: HTMLSlotElement;
     iconSlot: HTMLSlotElement;
+    /**
+     * whether menu item text content should not wrap
+     */
     noWrap: boolean;
     private anchorElement;
     overlayElement: Overlay;
     private submenuElement?;
+    /**
+     * the focusable element of the menu item
+     */
     get focusElement(): HTMLElement;
     protected get hasIcon(): boolean;
     get itemChildren(): MenuItemChildren;
     private _itemChildren?;
     constructor();
+    /**
+     * whether submenu is open
+     */
     open: boolean;
-    click(): void;
     private handleClickCapture;
     private handleSlottableRequest;
     private proxyFocus;
@@ -75,12 +122,21 @@ export declare class MenuItem extends MenuItem_base {
     protected breakItemChildrenCache(): void;
     protected renderSubmenu(): TemplateResult;
     protected render(): TemplateResult;
+    /**
+     * determines if item has a submenu and updates the `aria-haspopup` attribute
+     */
     protected manageSubmenu(event: Event & {
         target: HTMLSlotElement;
     }): void;
     private handlePointerdown;
     protected firstUpdated(changes: PropertyValues): void;
+    /**
+     * forward key info from keydown event to parent menu
+     */
+    handleKeydown: (event: KeyboardEvent) => void;
     protected closeOverlaysForRoot(): void;
+    protected handleFocus(event: FocusEvent): void;
+    protected handleBlur(event: FocusEvent): void;
     protected handleSubmenuClick(event: Event): void;
     protected handleSubmenuFocus(): void;
     protected handleBeforetoggle: (event: Event) => void;
@@ -103,12 +159,15 @@ export declare class MenuItem extends MenuItem_base {
     openOverlay(): Promise<void>;
     updateAriaSelected(): void;
     setRole(role: string): void;
+    protected willUpdate(changes: PropertyValues<this>): void;
     protected updated(changes: PropertyValues<this>): void;
     connectedCallback(): void;
     _parentElement: HTMLElement;
     disconnectedCallback(): void;
     private willDispatchUpdate;
     triggerUpdate(): Promise<void>;
+    focus(): void;
+    blur(): void;
     dispatchUpdate(): void;
     menuData: {
         focusRoot?: Menu;

package/src/MenuItem.dev.js

@@ -27,11 +27,9 @@ import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
 import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
 import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
-import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
 import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
 import menuItemStyles from "./menu-item.css.js";
 import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
-import checkmarkSmallOverrides from "@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js";
 import { MutationController } from "@lit-labs/observers/mutation-controller.js";
 import { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
 const POINTERLEAVE_TIMEOUT = 100;
@@ -59,6 +57,49 @@ export class MenuItemAddedOrUpdatedEvent extends Event {
     return this._item;
   }
 }
+export class MenuItemKeydownEvent extends KeyboardEvent {
+  constructor({ root, event }) {
+    super("sp-menu-item-keydown", { bubbles: true, composed: true });
+    this.root = root;
+    this._event = event;
+  }
+  get altKey() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.altKey) || false;
+  }
+  get code() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.code) || "";
+  }
+  get ctrlKey() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.ctrlKey) || false;
+  }
+  get isComposing() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.isComposing) || false;
+  }
+  get key() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.key) || "";
+  }
+  get location() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.location) || 0;
+  }
+  get metaKey() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.metaKey) || false;
+  }
+  get repeat() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.repeat) || false;
+  }
+  get shiftKey() {
+    var _a;
+    return ((_a = this._event) == null ? void 0 : _a.shiftKey) || false;
+  }
+}
 export class MenuItem extends LikeAnchor(
   ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
 ) {
@@ -81,6 +122,20 @@ export class MenuItem extends LikeAnchor(
     this.proxyFocus = () => {
       this.focus();
     };
+    /**
+     * forward key info from keydown event to parent menu
+     */
+    this.handleKeydown = (event) => {
+      const { target, key } = event;
+      const openSubmenuKey = this.hasSubmenu && !this.open && [" ", "Enter"].includes(key);
+      if (target === this) {
+        if (["ArrowLeft", "ArrowRight", "Escape"].includes(key) || openSubmenuKey)
+          event.preventDefault();
+        this.dispatchEvent(
+          new MenuItemKeydownEvent({ root: this, event })
+        );
+      }
+    };
     this.handleBeforetoggle = (event) => {
       if (event.newState === "closed") {
         this.open = true;
@@ -94,14 +149,18 @@ export class MenuItem extends LikeAnchor(
     this.recentlyLeftChild = false;
     this.willDispatchUpdate = false;
     this.menuData = {
+      // menu that controls ArrowUp/ArrowDown navigation
       focusRoot: void 0,
       parentMenu: void 0,
+      // menu or menu group that controls selection
       selectionRoot: void 0,
       cleanupSteps: []
     };
     this.addEventListener("click", this.handleClickCapture, {
       capture: true
     });
+    this.addEventListener("focus", this.handleFocus);
+    this.addEventListener("blur", this.handleBlur);
     new MutationController(this, {
       config: {
         characterData: true,
@@ -121,13 +180,7 @@ export class MenuItem extends LikeAnchor(
     });
   }
   static get styles() {
-    return [
-      menuItemStyles,
-      checkmarkStyles,
-      checkmarkSmallOverrides,
-      chevronStyles,
-      chevronIconOverrides
-    ];
+    return [menuItemStyles, checkmarkStyles, chevronStyles];
   }
   get value() {
     return this._value || this.itemText;
@@ -145,6 +198,7 @@ export class MenuItem extends LikeAnchor(
   }
   /**
    * @private
+   * text content of the menu item minus whitespace
    */
   get itemText() {
     return this.itemChildren.content.reduce(
@@ -152,6 +206,9 @@ export class MenuItem extends LikeAnchor(
       ""
     );
   }
+  /**
+   * the focusable element of the menu item
+   */
   get focusElement() {
     return this;
   }
@@ -178,15 +235,6 @@ export class MenuItem extends LikeAnchor(
     this._itemChildren = { icon, content };
     return this._itemChildren;
   }
-  click() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.shouldProxyClick()) {
-      return;
-    }
-    super.click();
-  }
   handleClickCapture(event) {
     if (this.disabled) {
       event.preventDefault();
@@ -194,6 +242,9 @@ export class MenuItem extends LikeAnchor(
       event.stopPropagation();
       return false;
     }
+    if (this.shouldProxyClick()) {
+      return;
+    }
   }
   shouldProxyClick() {
     let handled = false;
@@ -281,6 +332,9 @@ export class MenuItem extends LikeAnchor(
             ${this.renderSubmenu()}
         `;
   }
+  /**
+   * determines if item has a submenu and updates the `aria-haspopup` attribute
+   */
   manageSubmenu(event) {
     this.submenuElement = event.target.assignedElements({
       flatten: true
@@ -304,6 +358,7 @@ export class MenuItem extends LikeAnchor(
   firstUpdated(changes) {
     super.firstUpdated(changes);
     this.setAttribute("tabindex", "-1");
+    this.addEventListener("keydown", this.handleKeydown);
     this.addEventListener("pointerdown", this.handlePointerdown);
     this.addEventListener("pointerenter", this.closeOverlaysForRoot);
     if (!this.hasAttribute("id")) {
@@ -315,6 +370,18 @@ export class MenuItem extends LikeAnchor(
     if (this.open) return;
     (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
   }
+  handleFocus(event) {
+    const { target } = event;
+    if (target === this) {
+      this.focused = true;
+    }
+  }
+  handleBlur(event) {
+    const { target } = event;
+    if (target === this) {
+      this.focused = false;
+    }
+  }
   handleSubmenuClick(event) {
     if (event.composedPath().includes(this.overlayElement)) {
       return;
@@ -324,6 +391,7 @@ export class MenuItem extends LikeAnchor(
   handleSubmenuFocus() {
     requestAnimationFrame(() => {
       this.overlayElement.open = this.open;
+      this.focused = false;
     });
   }
   handlePointerenter() {
@@ -363,13 +431,18 @@ export class MenuItem extends LikeAnchor(
     });
   }
   handleSubmenuOpen(event) {
+    var _a;
+    const shouldFocus = this.matches(":focus, :focus-within") || this.focused;
     this.focused = false;
     const parentOverlay = event.composedPath().find((el) => {
       return el !== this.overlayElement && el.localName === "sp-overlay";
     });
+    if (shouldFocus)
+      (_a = this.submenuElement) == null ? void 0 : _a.focus();
     this.overlayElement.parentOverlayToForceClose = parentOverlay;
   }
   cleanup() {
+    this.setAttribute("aria-expanded", "false");
     this.open = false;
     this.active = false;
   }
@@ -399,6 +472,12 @@ export class MenuItem extends LikeAnchor(
     this.setAttribute("role", role);
     this.updateAriaSelected();
   }
+  willUpdate(changes) {
+    super.updated(changes);
+    if (changes.has("open") && !this.open && this.hasSubmenu && this.hasVisibleFocusInTree()) {
+      this.focus();
+    }
+  }
   updated(changes) {
     var _a, _b;
     super.updated(changes);
@@ -468,6 +547,14 @@ export class MenuItem extends LikeAnchor(
     await new Promise((ready) => requestAnimationFrame(ready));
     this.dispatchUpdate();
   }
+  focus() {
+    super.focus();
+    this.dispatchEvent(new FocusEvent("focus"));
+  }
+  blur() {
+    this.dispatchEvent(new FocusEvent("blur"));
+    super.blur();
+  }
   dispatchUpdate() {
     if (!this.isConnected) {
       return;