@spectrum-web-components/menu 0.35.1-rc.43 → 0.37.0

package/stories/index.js

@@ -0,0 +1,34 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+export const MenuMarkup = ({
+  size = "m"
+} = {}) => {
+  return html`
+        <sp-menu size=${size}>
+            <sp-menu-item>Deselect</sp-menu-item>
+            <sp-menu-item>Select Inverse</sp-menu-item>
+            <sp-menu-item>Feather...</sp-menu-item>
+            <sp-menu-item>Select and Mask...</sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-item>Save Selection</sp-menu-item>
+            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+        </sp-menu>
+
+        <sp-popover open>
+            <sp-menu size=${size}>
+                <sp-menu-item>Deselect</sp-menu-item>
+                <sp-menu-item>Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
+//# sourceMappingURL=index.js.map

package/stories/index.js.map

@@ -0,0 +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 { html, TemplateResult } 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';\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"],
+  "mappings": ";AAYA,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEA,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;",
+  "names": []
+}

package/stories/menu-sizes.stories.js

@@ -0,0 +1,11 @@
+"use strict";
+import { MenuMarkup } from "./";
+export default {
+  component: "sp-menu",
+  title: "Menu/Sizes"
+};
+export const S = () => MenuMarkup({ size: "s" });
+export const M = () => MenuMarkup({ size: "m" });
+export const L = () => MenuMarkup({ size: "l" });
+export const XL = () => MenuMarkup({ size: "xl" });
+//# sourceMappingURL=menu-sizes.stories.js.map

package/stories/menu-sizes.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-sizes.stories.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 { TemplateResult } from '@spectrum-web-components/base';\nimport { MenuMarkup } from './';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu/Sizes',\n};\n\nexport const S = (): TemplateResult => MenuMarkup({ size: 's' });\nexport const M = (): TemplateResult => MenuMarkup({ size: 'm' });\nexport const L = (): TemplateResult => MenuMarkup({ size: 'l' });\nexport const XL = (): TemplateResult => MenuMarkup({ size: 'xl' });\n"],
+  "mappings": ";AAaA,SAAS,kBAAkB;AAE3B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,KAAK,MAAsB,WAAW,EAAE,MAAM,KAAK,CAAC;",
+  "names": []
+}

package/stories/menu.stories.js

@@ -8,6 +8,9 @@ import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/icon/sp-icon.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-export.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-share.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 export default {
   component: "sp-menu",
@@ -88,10 +91,30 @@ export const multipleSelect = () => {
         </sp-popover>
     `;
 };
+export const selectsWithIcons = () => {
+  return html`
+        <sp-popover open>
+            <sp-menu selects="single">
+                <sp-menu-item>
+                    <sp-icon-export slot="icon"></sp-icon-export>
+                    Quick export
+                </sp-menu-item>
+                <sp-menu-item selected>
+                    <sp-icon-folder-open slot="icon"></sp-icon-folder-open>
+                    Open a copy
+                </sp-menu-item>
+                <sp-menu-item>
+                    <sp-icon-share slot="icon"></sp-icon-share>
+                    Share link
+                </sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
 export const headersAndIcons = () => {
   return html`
         <sp-popover open>
-            <sp-menu>
+            <sp-menu selects="single">
                 <sp-menu-group>
                     <span slot="header">Section Heading</span>
                     <sp-menu-item>Action 1</sp-menu-item>

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 '@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-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 selects=\"single\">\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 selects=\"single\">\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};\nexport const headersAndIcons = (): TemplateResult => {\n    return html`\n        <sp-popover open>\n            <sp-menu>\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-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"],
-  "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AACO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BX;AAEA,gBAAgB,YAAY;AAErB,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;",
+  "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 '@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 selects=\"single\">\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 selects=\"single\">\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 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                </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-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"],
+  "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BX;AAEA,gBAAgB,YAAY;AAErB,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;",
   "names": []
 }

package/test/menu-sizes.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/menu-sizes.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("MenuSizesStories", stories);
+//# sourceMappingURL=menu-sizes.test-vrt.js.map

package/test/menu-sizes.test-vrt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-sizes.test-vrt.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 * as stories from '../stories/menu-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('MenuSizesStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,oBAAoB,OAA+B;",
+  "names": []
+}

package/test/menu.test.js

@@ -1,7 +1,8 @@
 "use strict";
 import "@spectrum-web-components/menu/sp-menu.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
 import {
   elementUpdated,
   expect,

package/test/menu.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["menu.test.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 '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    nextFrame,\n    waitUntil,\n} from '@open-wc/testing';\nimport {\n    arrowDownEvent,\n    arrowUpEvent,\n    tabEvent,\n    testForLitDevWarnings,\n    tEvent,\n} from '../../../test/testing-helpers.js';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\ndescribe('Menu', () => {\n    it('renders empty', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\"><a href=\"#anchor\">Test</a></sp-menu>\n            `\n        );\n\n        const anchor = el.querySelector('a') as HTMLAnchorElement;\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n        expect(document.activeElement === anchor, 'child not focused, 1').to.be\n            .false;\n\n        expect(el.getAttribute('role')).to.equal('menu');\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(document.activeElement === anchor, 'child not focused, 2').to.be\n            .false;\n\n        anchor.focus();\n        expect(document.activeElement === el, 'self not focused, 3').to.be\n            .false;\n        expect(document.activeElement === anchor, 'anchor').to.be.true;\n    });\n    it('renders w/ [disabled] menu items', async () => {\n        const focusinSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n                    <sp-menu-item disabled>Disabled item</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n    });\n    it('renders w/ all [disabled] menu items', async () => {\n        const focusinSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n                    <sp-menu-item disabled>Disabled item 1</sp-menu-item>\n                    <sp-menu-item disabled>Disabled item 2</sp-menu-item>\n                </sp-menu>\n            `\n        );\n        const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n        firstItem.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n        expect(el.matches(':focus-within')).to.be.false;\n    });\n    it('renders w/ menu items', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu label=\"Pick an action:\">\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        );\n\n        await waitUntil(\n            () => el.childItems.length == 6,\n            'expected menu to manage 6 menu items'\n        );\n        await elementUpdated(el);\n\n        const inTabindexElement = el.querySelector(\n            '[tabindex]:not([tabindex=\"-1\"])'\n        );\n        expect(inTabindexElement).to.be.null;\n        await expect(el).to.be.accessible();\n    });\n\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Menu>(\n                html`\n                    <sp-menu selects=\"single\">\n                        <sp-menu-item>Not Selected</sp-menu-item>\n                        <sp-menu-item selected>Selected</sp-menu-item>\n                        <sp-menu-item>Other</sp-menu-item>\n                    </sp-menu>\n                `\n            )\n    );\n\n    it('renders w/ selected', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item>Not Selected</sp-menu-item>\n                    <sp-menu-item selected>Selected</sp-menu-item>\n                    <sp-menu-item>Other</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n\n    it('renders w/ hrefs', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu>\n                    <sp-menu-item href=\"not-selected.html\">\n                        Not Selected\n                    </sp-menu-item>\n                    <sp-menu-item href=\"selected.html\">Selected</sp-menu-item>\n                    <sp-menu-item href=\"other.html\">Other</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n\n        expect(el.getAttribute('role')).to.equal('menu');\n    });\n\n    it('handle focus and keyboard input', async () => {\n        const el = await fixture<Menu>(\n            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        );\n\n        await waitUntil(\n            () => el.childItems.length == 6,\n            'expected menu to manage 6 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const thirdToLastItem = el.querySelector(\n            'sp-menu-item:nth-last-of-type(3)'\n        ) as MenuItem;\n        const secondToLastItem = el.querySelector(\n            'sp-menu-item:nth-last-of-type(2)'\n        ) as MenuItem;\n\n        el.focus();\n        await elementUpdated(el);\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el).to.be.true;\n        expect(firstItem.focused).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        el.dispatchEvent(arrowUpEvent());\n        el.dispatchEvent(tEvent());\n\n        expect(document.activeElement === el).to.be.true;\n        expect(thirdToLastItem.focused).to.be.true;\n\n        el.dispatchEvent(arrowDownEvent());\n\n        expect(document.activeElement === el).to.be.true;\n        expect(secondToLastItem.focused).to.be.true;\n    });\n\n    it('handle focus and late descendent additions', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu>\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Options</span>\n                        <sp-menu-item>Deselect</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 1,\n            'expected menu to manage 1 item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        el.focus();\n\n        await elementUpdated(el);\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el, 'active element').to.be.true;\n        expect(firstItem.focused, 'visually focused').to.be.true;\n\n        el.blur();\n\n        const group = el.querySelector('sp-menu-group') as HTMLElement;\n        const prependedItem = document.createElement('sp-menu-item');\n        prependedItem.textContent = 'Prepended Item';\n        const appendedItem = document.createElement('sp-menu-item');\n        appendedItem.textContent = 'Appended Item';\n        group.prepend(prependedItem);\n        group.append(appendedItem);\n        await elementUpdated(el);\n\n        await waitUntil(() => {\n            return el.childItems.length == 3;\n        }, 'expected menu to manage 3 items');\n        await elementUpdated(el);\n\n        expect(document.activeElement === el).to.be.false;\n        expect(firstItem.focused).to.be.false;\n        expect(prependedItem.focused).to.be.false;\n\n        el.focus();\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el, 'another active element').to.be\n            .true;\n        expect(prependedItem.focused, 'another visibly focused').to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n\n        expect(document.activeElement === el, 'last active element').to.be.true;\n        expect(appendedItem.focused, 'last visibly focused').to.be.true;\n    });\n    it('cleans up when tabbing away', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\">\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select Inverse</sp-menu-item>\n                    <sp-menu-item>Third Item</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        const thirdItem = el.querySelector(\n            'sp-menu-item:nth-of-type(3)'\n        ) as MenuItem;\n\n        el.focus();\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n        expect(document.activeElement === el).to.be.true;\n        expect(firstItem.focused, 'first').to.be.true;\n        el.dispatchEvent(arrowDownEvent());\n        el.dispatchEvent(arrowDownEvent());\n        expect(thirdItem.focused, 'third').to.be.true;\n        // imitate tabbing away\n        el.dispatchEvent(tabEvent());\n        el.dispatchEvent(\n            new CustomEvent('focusout', {\n                composed: true,\n                bubbles: true,\n            })\n        );\n        await nextFrame();\n        // re-bind keyevents\n        el.startListeningToKeyboard();\n        // focus management should start again from the first item.\n        el.dispatchEvent(arrowDownEvent());\n        expect(secondItem.focused, 'second').to.be.true;\n    });\n    it('handles focus across focused MenuItem removals', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu id=\"test\">\n                    <sp-menu-item class=\"first\">Deselect</sp-menu-item>\n                    <sp-menu-item>Invert Selection</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and Mask...</sp-menu-item>\n                    <sp-menu-item selected class=\"selected\">\n                        Save Selection\n                    </sp-menu-item>\n                </sp-menu>\n            `\n        );\n        const firstItem = el.querySelector('.first') as MenuItem;\n        const selectedItem = el.querySelector('.selected') as MenuItem;\n\n        await elementUpdated(el);\n        await nextFrame();\n        el.focus();\n\n        expect(document.activeElement).to.equal(el);\n        // Enforce visible focus\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        expect(selectedItem.focused).to.be.true;\n\n        selectedItem.remove();\n        await elementUpdated(el);\n\n        expect(document.activeElement).to.equal(el);\n        expect(firstItem.focused).to.be.true;\n    });\n    it('handles single selection', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-item>Third</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await waitUntil(\n            () => el.selectedItems.length == 1,\n            'expected menu to have 1 selected item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.false;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(el.value).to.equal('First');\n\n        secondItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(firstItem.selected).to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n    });\n    it('handles multiple selection', async () => {\n        const changeSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"multiple\" @change=${() => changeSpy()}>\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-item>Third</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemcheckbox');\n\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.false;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(el.value).to.equal('First');\n        expect(el.selectedItems.length).to.equal(1);\n\n        secondItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(changeSpy.callCount, 'one change').to.equal(1);\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('First,Second');\n        expect(el.selectedItems.length).to.equal(2);\n\n        firstItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(changeSpy.callCount, 'two changes').to.equal(2);\n        expect(firstItem.selected).to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n        expect(el.selectedItems.length).to.equal(1);\n    });\n});\n"],
-  "mappings": ";AAWA,OAAO;AACP,OAAO;AACP,OAAO;AAEP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,WAAW;AACpB,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,MAAM;AACnB,KAAG,iBAAiB,YAAY;AAC5B,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,SAAS,GAAG,cAAc,GAAG;AACnC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,SAAS,kBAAkB,QAAQ,sBAAsB,EAAE,GAAG,GAChE;AAEL,WAAO,GAAG,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,MAAM;AAE/C,OAAG,MAAM;AACT,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,SAAS,kBAAkB,QAAQ,sBAAsB,EAAE,GAAG,GAChE;AAEL,WAAO,MAAM;AACb,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,SAAS,kBAAkB,QAAQ,QAAQ,EAAE,GAAG,GAAG;AAAA,EAC9D,CAAC;AACD,KAAG,oCAAoC,YAAY;AAC/C,UAAM,aAAa,IAAI;AACvB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA,iDACqC,MAAM,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3D;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AAEL,OAAG,MAAM;AACT,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,WAAW,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EAC3C,CAAC;AACD,KAAG,wCAAwC,YAAY;AACnD,UAAM,aAAa,IAAI;AACvB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA,iDACqC,MAAM,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3D;AACA,UAAM,YAAY,GAAG,cAAc,cAAc;AAEjD,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AAEL,OAAG,MAAM;AACT,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,WAAW,SAAS,EAAE,GAAG,MAAM,CAAC;AACvC,cAAU,MAAM;AAChB,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAC3D;AACL,WAAO,WAAW,SAAS,EAAE,GAAG,MAAM,CAAC;AACvC,WAAO,GAAG,QAAQ,eAAe,CAAC,EAAE,GAAG,GAAG;AAAA,EAC9C,CAAC;AACD,KAAG,yBAAyB,YAAY;AACpC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,oBAAoB,GAAG;AAAA,MACzB;AAAA,IACJ;AACA,WAAO,iBAAiB,EAAE,GAAG,GAAG;AAChC,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAAA,EACR;AAEA,KAAG,uBAAuB,YAAY;AAClC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,oBAAoB,YAAY;AAC/B,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAElC,WAAO,GAAG,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,MAAM;AAAA,EACnD,CAAC;AAED,KAAG,mCAAmC,YAAY;AAC9C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AACA,UAAM,kBAAkB,GAAG;AAAA,MACvB;AAAA,IACJ;AACA,UAAM,mBAAmB,GAAG;AAAA,MACxB;AAAA,IACJ;AAEA,OAAG,MAAM;AACT,UAAM,eAAe,EAAE;AAEvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AAEnC,WAAO,SAAS,kBAAkB,EAAE,EAAE,GAAG,GAAG;AAC5C,WAAO,UAAU,OAAO,EAAE,GAAG,GAAG;AAEhC,OAAG,cAAc,aAAa,CAAC;AAC/B,OAAG,cAAc,aAAa,CAAC;AAC/B,OAAG,cAAc,OAAO,CAAC;AAEzB,WAAO,SAAS,kBAAkB,EAAE,EAAE,GAAG,GAAG;AAC5C,WAAO,gBAAgB,OAAO,EAAE,GAAG,GAAG;AAEtC,OAAG,cAAc,eAAe,CAAC;AAEjC,WAAO,SAAS,kBAAkB,EAAE,EAAE,GAAG,GAAG;AAC5C,WAAO,iBAAiB,OAAO,EAAE,GAAG,GAAG;AAAA,EAC3C,CAAC;AAED,KAAG,8CAA8C,YAAY;AACzD,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AAEA,OAAG,MAAM;AAET,UAAM,eAAe,EAAE;AAEvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AAEnC,WAAO,SAAS,kBAAkB,IAAI,gBAAgB,EAAE,GAAG,GAAG;AAC9D,WAAO,UAAU,SAAS,kBAAkB,EAAE,GAAG,GAAG;AAEpD,OAAG,KAAK;AAER,UAAM,QAAQ,GAAG,cAAc,eAAe;AAC9C,UAAM,gBAAgB,SAAS,cAAc,cAAc;AAC3D,kBAAc,cAAc;AAC5B,UAAM,eAAe,SAAS,cAAc,cAAc;AAC1D,iBAAa,cAAc;AAC3B,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY;AACzB,UAAM,eAAe,EAAE;AAEvB,UAAM,UAAU,MAAM;AAClB,aAAO,GAAG,WAAW,UAAU;AAAA,IACnC,GAAG,iCAAiC;AACpC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,kBAAkB,EAAE,EAAE,GAAG,GAAG;AAC5C,WAAO,UAAU,OAAO,EAAE,GAAG,GAAG;AAChC,WAAO,cAAc,OAAO,EAAE,GAAG,GAAG;AAEpC,OAAG,MAAM;AAET,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AAEnC,WAAO,SAAS,kBAAkB,IAAI,wBAAwB,EAAE,GAAG,GAC9D;AACL,WAAO,cAAc,SAAS,yBAAyB,EAAE,GAAG,GAAG;AAE/D,OAAG,cAAc,aAAa,CAAC;AAE/B,WAAO,SAAS,kBAAkB,IAAI,qBAAqB,EAAE,GAAG,GAAG;AACnE,WAAO,aAAa,SAAS,sBAAsB,EAAE,GAAG,GAAG;AAAA,EAC/D,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AACA,UAAM,aAAa,GAAG;AAAA,MAClB;AAAA,IACJ;AACA,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AAEA,OAAG,MAAM;AAET,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AACnC,WAAO,SAAS,kBAAkB,EAAE,EAAE,GAAG,GAAG;AAC5C,WAAO,UAAU,SAAS,OAAO,EAAE,GAAG,GAAG;AACzC,OAAG,cAAc,eAAe,CAAC;AACjC,OAAG,cAAc,eAAe,CAAC;AACjC,WAAO,UAAU,SAAS,OAAO,EAAE,GAAG,GAAG;AAEzC,OAAG,cAAc,SAAS,CAAC;AAC3B,OAAG;AAAA,MACC,IAAI,YAAY,YAAY;AAAA,QACxB,UAAU;AAAA,QACV,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AACA,UAAM,UAAU;AAEhB,OAAG,yBAAyB;AAE5B,OAAG,cAAc,eAAe,CAAC;AACjC,WAAO,WAAW,SAAS,QAAQ,EAAE,GAAG,GAAG;AAAA,EAC/C,CAAC;AACD,KAAG,kDAAkD,YAAY;AAC7D,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWJ;AACA,UAAM,YAAY,GAAG,cAAc,QAAQ;AAC3C,UAAM,eAAe,GAAG,cAAc,WAAW;AAEjD,UAAM,eAAe,EAAE;AACvB,UAAM,UAAU;AAChB,OAAG,MAAM;AAET,WAAO,SAAS,aAAa,EAAE,GAAG,MAAM,EAAE;AAE1C,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,aAAa,OAAO,EAAE,GAAG,GAAG;AAEnC,iBAAa,OAAO;AACpB,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,aAAa,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,UAAU,OAAO,EAAE,GAAG,GAAG;AAAA,EACpC,CAAC;AACD,KAAG,4BAA4B,YAAY;AACvC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM;AAAA,MACF,MAAM,GAAG,cAAc,UAAU;AAAA,MACjC;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AAEA,UAAM,aAAa,GAAG;AAAA,MAClB;AAAA,IACJ;AAEA,WAAO,UAAU,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,eAAe;AAC/D,WAAO,WAAW,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,eAAe;AAEhE,WAAO,UAAU,QAAQ,EAAE,GAAG,GAAG;AACjC,WAAO,WAAW,QAAQ,EAAE,GAAG,GAAG;AAClC,WAAO,UAAU,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC9D,WAAO,WAAW,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,OAAO;AAChE,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,OAAO;AAEjC,eAAW,MAAM;AAEjB,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,SAAS;AAC9B,UAAM,eAAe,UAAU;AAE/B,WAAO,UAAU,QAAQ,EAAE,GAAG,GAAG;AACjC,WAAO,WAAW,QAAQ,EAAE,GAAG,GAAG;AAClC,WAAO,UAAU,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,OAAO;AAC/D,WAAO,WAAW,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC/D,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,QAAQ;AAAA,EACtC,CAAC;AACD,KAAG,8BAA8B,YAAY;AACzC,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA,sDAC0C,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/D;AAEA,UAAM;AAAA,MACF,MAAM,GAAG,WAAW,UAAU;AAAA,MAC9B;AAAA,IACJ;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AAEA,UAAM,aAAa,GAAG;AAAA,MAClB;AAAA,IACJ;AAEA,WAAO,UAAU,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,kBAAkB;AAClE,WAAO,WAAW,aAAa,MAAM,CAAC,EAAE,GAAG,MAAM,kBAAkB;AAEnE,WAAO,UAAU,QAAQ,EAAE,GAAG,GAAG;AACjC,WAAO,WAAW,QAAQ,EAAE,GAAG,GAAG;AAClC,WAAO,UAAU,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC9D,WAAO,WAAW,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,OAAO;AAChE,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,OAAO;AACjC,WAAO,GAAG,cAAc,MAAM,EAAE,GAAG,MAAM,CAAC;AAE1C,eAAW,MAAM;AAEjB,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,SAAS;AAC9B,UAAM,eAAe,UAAU;AAE/B,WAAO,UAAU,WAAW,YAAY,EAAE,GAAG,MAAM,CAAC;AACpD,WAAO,UAAU,QAAQ,EAAE,GAAG,GAAG;AACjC,WAAO,WAAW,QAAQ,EAAE,GAAG,GAAG;AAClC,WAAO,UAAU,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC9D,WAAO,WAAW,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC/D,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,cAAc;AACxC,WAAO,GAAG,cAAc,MAAM,EAAE,GAAG,MAAM,CAAC;AAE1C,cAAU,MAAM;AAEhB,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,SAAS;AAC9B,UAAM,eAAe,UAAU;AAE/B,WAAO,UAAU,WAAW,aAAa,EAAE,GAAG,MAAM,CAAC;AACrD,WAAO,UAAU,QAAQ,EAAE,GAAG,GAAG;AACjC,WAAO,WAAW,QAAQ,EAAE,GAAG,GAAG;AAClC,WAAO,UAAU,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,OAAO;AAC/D,WAAO,WAAW,aAAa,cAAc,CAAC,EAAE,GAAG,MAAM,MAAM;AAC/D,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,QAAQ;AAClC,WAAO,GAAG,cAAc,MAAM,EAAE,GAAG,MAAM,CAAC;AAAA,EAC9C,CAAC;AACL,CAAC;",
+  "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 '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    nextFrame,\n    waitUntil,\n} from '@open-wc/testing';\nimport {\n    arrowDownEvent,\n    arrowUpEvent,\n    tabEvent,\n    testForLitDevWarnings,\n    tEvent,\n} from '../../../test/testing-helpers.js';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\ndescribe('Menu', () => {\n    it('renders empty', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\"><a href=\"#anchor\">Test</a></sp-menu>\n            `\n        );\n\n        const anchor = el.querySelector('a') as HTMLAnchorElement;\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n        expect(document.activeElement === anchor, 'child not focused, 1').to.be\n            .false;\n\n        expect(el.getAttribute('role')).to.equal('menu');\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(document.activeElement === anchor, 'child not focused, 2').to.be\n            .false;\n\n        anchor.focus();\n        expect(document.activeElement === el, 'self not focused, 3').to.be\n            .false;\n        expect(document.activeElement === anchor, 'anchor').to.be.true;\n    });\n    it('renders w/ [disabled] menu items', async () => {\n        const focusinSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n                    <sp-menu-item disabled>Disabled item</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n    });\n    it('renders w/ all [disabled] menu items', async () => {\n        const focusinSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\" @focusin=${() => focusinSpy()}>\n                    <sp-menu-item disabled>Disabled item 1</sp-menu-item>\n                    <sp-menu-item disabled>Disabled item 2</sp-menu-item>\n                </sp-menu>\n            `\n        );\n        const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 1').to.be\n            .false;\n\n        el.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n        firstItem.focus();\n        await elementUpdated(el);\n        expect(document.activeElement === el, 'self not focused, 2').to.be\n            .false;\n        expect(focusinSpy.callCount).to.equal(0);\n        expect(el.matches(':focus-within')).to.be.false;\n    });\n    it('renders w/ menu items', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu label=\"Pick an action:\">\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        );\n\n        await waitUntil(\n            () => el.childItems.length == 6,\n            'expected menu to manage 6 menu items'\n        );\n        await elementUpdated(el);\n\n        const inTabindexElement = el.querySelector(\n            '[tabindex]:not([tabindex=\"-1\"])'\n        );\n        expect(inTabindexElement).to.be.null;\n        await expect(el).to.be.accessible();\n    });\n\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Menu>(\n                html`\n                    <sp-menu selects=\"single\">\n                        <sp-menu-item>Not Selected</sp-menu-item>\n                        <sp-menu-item selected>Selected</sp-menu-item>\n                        <sp-menu-item>Other</sp-menu-item>\n                    </sp-menu>\n                `\n            )\n    );\n\n    it('renders w/ selected', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item>Not Selected</sp-menu-item>\n                    <sp-menu-item selected>Selected</sp-menu-item>\n                    <sp-menu-item>Other</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n\n    it('renders w/ hrefs', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu>\n                    <sp-menu-item href=\"not-selected.html\">\n                        Not Selected\n                    </sp-menu-item>\n                    <sp-menu-item href=\"selected.html\">Selected</sp-menu-item>\n                    <sp-menu-item href=\"other.html\">Other</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n\n        expect(el.getAttribute('role')).to.equal('menu');\n    });\n\n    it('handle focus and keyboard input', async () => {\n        const el = await fixture<Menu>(\n            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        );\n\n        await waitUntil(\n            () => el.childItems.length == 6,\n            'expected menu to manage 6 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const thirdToLastItem = el.querySelector(\n            'sp-menu-item:nth-last-of-type(3)'\n        ) as MenuItem;\n        const secondToLastItem = el.querySelector(\n            'sp-menu-item:nth-last-of-type(2)'\n        ) as MenuItem;\n\n        el.focus();\n        await elementUpdated(el);\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el).to.be.true;\n        expect(firstItem.focused).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        el.dispatchEvent(arrowUpEvent());\n        el.dispatchEvent(tEvent());\n\n        expect(document.activeElement === el).to.be.true;\n        expect(thirdToLastItem.focused).to.be.true;\n\n        el.dispatchEvent(arrowDownEvent());\n\n        expect(document.activeElement === el).to.be.true;\n        expect(secondToLastItem.focused).to.be.true;\n    });\n\n    it('handle focus and late descendent additions', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu>\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Options</span>\n                        <sp-menu-item>Deselect</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 1,\n            'expected menu to manage 1 item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        el.focus();\n\n        await elementUpdated(el);\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el, 'active element').to.be.true;\n        expect(firstItem.focused, 'visually focused').to.be.true;\n\n        el.blur();\n\n        const group = el.querySelector('sp-menu-group') as HTMLElement;\n        const prependedItem = document.createElement('sp-menu-item');\n        prependedItem.textContent = 'Prepended Item';\n        const appendedItem = document.createElement('sp-menu-item');\n        appendedItem.textContent = 'Appended Item';\n        group.prepend(prependedItem);\n        group.append(appendedItem);\n        await elementUpdated(el);\n\n        await waitUntil(() => {\n            return el.childItems.length == 3;\n        }, 'expected menu to manage 3 items');\n        await elementUpdated(el);\n\n        expect(document.activeElement === el).to.be.false;\n        expect(firstItem.focused).to.be.false;\n        expect(prependedItem.focused).to.be.false;\n\n        el.focus();\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        expect(document.activeElement === el, 'another active element').to.be\n            .true;\n        expect(prependedItem.focused, 'another visibly focused').to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n\n        expect(document.activeElement === el, 'last active element').to.be.true;\n        expect(appendedItem.focused, 'last visibly focused').to.be.true;\n    });\n    it('cleans up when tabbing away', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu tabindex=\"0\">\n                    <sp-menu-item>Deselect</sp-menu-item>\n                    <sp-menu-item>Select Inverse</sp-menu-item>\n                    <sp-menu-item>Third Item</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        const thirdItem = el.querySelector(\n            'sp-menu-item:nth-of-type(3)'\n        ) as MenuItem;\n\n        el.focus();\n        // Activate :focus-visible\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowUp' });\n        expect(document.activeElement === el).to.be.true;\n        expect(firstItem.focused, 'first').to.be.true;\n        el.dispatchEvent(arrowDownEvent());\n        el.dispatchEvent(arrowDownEvent());\n        expect(thirdItem.focused, 'third').to.be.true;\n        // imitate tabbing away\n        el.dispatchEvent(tabEvent());\n        el.dispatchEvent(\n            new CustomEvent('focusout', {\n                composed: true,\n                bubbles: true,\n            })\n        );\n        await nextFrame();\n        // re-bind keyevents\n        el.startListeningToKeyboard();\n        // focus management should start again from the first item.\n        el.dispatchEvent(arrowDownEvent());\n        expect(secondItem.focused, 'second').to.be.true;\n    });\n    it('handles focus across focused MenuItem removals', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu id=\"test\">\n                    <sp-menu-item class=\"first\">Deselect</sp-menu-item>\n                    <sp-menu-item>Invert Selection</sp-menu-item>\n                    <sp-menu-item>Feather...</sp-menu-item>\n                    <sp-menu-item>Select and Mask...</sp-menu-item>\n                    <sp-menu-item selected class=\"selected\">\n                        Save Selection\n                    </sp-menu-item>\n                </sp-menu>\n            `\n        );\n        const firstItem = el.querySelector('.first') as MenuItem;\n        const selectedItem = el.querySelector('.selected') as MenuItem;\n\n        await elementUpdated(el);\n        await nextFrame();\n        el.focus();\n\n        expect(document.activeElement).to.equal(el);\n        // Enforce visible focus\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        expect(selectedItem.focused).to.be.true;\n\n        selectedItem.remove();\n        await elementUpdated(el);\n\n        expect(document.activeElement).to.equal(el);\n        expect(firstItem.focused).to.be.true;\n    });\n    it('handles single selection', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-item>Third</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await waitUntil(\n            () => el.selectedItems.length == 1,\n            'expected menu to have 1 selected item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.false;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(el.value).to.equal('First');\n\n        secondItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(firstItem.selected).to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n    });\n    it('handles multiple selection', async () => {\n        const changeSpy = spy();\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"multiple\" @change=${() => changeSpy()}>\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-item>Third</sp-menu-item>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => el.childItems.length == 3,\n            'expected menu to manage 3 items'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemcheckbox');\n\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.false;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(el.value).to.equal('First');\n        expect(el.selectedItems.length).to.equal(1);\n\n        secondItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(changeSpy.callCount, 'one change').to.equal(1);\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('First,Second');\n        expect(el.selectedItems.length).to.equal(2);\n\n        firstItem.click();\n\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n\n        expect(changeSpy.callCount, 'two changes').to.equal(2);\n        expect(firstItem.selected).to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n        expect(el.selectedItems.length).to.equal(1);\n    });\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/test/submenu.test.js

@@ -92,6 +92,8 @@ describe("Submenu", () => {
             `
     );
     await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
     const rootItem = el.querySelector(".root");
     const rootItemBoundingRect = rootItem.getBoundingClientRect();
     expect(rootItem.open).to.be.false;