@spectrum-web-components/menu 1.1.0 → 1.1.2

package/stories/index.js

@@ -0,0 +1,82 @@
+"use strict";
+import {
+  html,
+  LitElement
+} 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>
+    `;
+};
+export class ComplexSlottedGroup extends LitElement {
+  get menu() {
+    return this.renderRoot.querySelector("sp-menu");
+  }
+  render() {
+    return html`
+            <sp-menu>
+                <sp-menu-group>
+                    <sp-menu-item id="i-1">Before First</sp-menu-item>
+                    <slot name="before"></slot>
+                </sp-menu-group>
+                <sp-menu-group>
+                    <sp-menu-item id="i-4">Sibling 1</sp-menu-item>
+                    <slot></slot>
+                    <sp-menu-item id="i-10">Sibling 2</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-group>
+                    <sp-menu-item id="i-11">After 1</sp-menu-item>
+                    <sp-menu-item id="i-12">After 2</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        `;
+  }
+}
+customElements.define("complex-slotted-group", ComplexSlottedGroup);
+export class ComplexSlottedMenu extends LitElement {
+  get menu() {
+    return this.renderRoot.querySelector(
+      "complex-slotted-group"
+    ).menu;
+  }
+  render() {
+    return html`
+            <complex-slotted-group id="group">
+                <sp-menu-item id="i-5">Middle 1</sp-menu-item>
+                <sp-menu-item id="i-6">Middle 2</sp-menu-item>
+                <sp-menu-item id="i-7">Middle 3</sp-menu-item>
+                <slot></slot>
+                <slot name="before" slot="before"></slot>
+                <sp-menu-item slot="before" id="i-3">Before Last</sp-menu-item>
+            </complex-slotted-group>
+        `;
+  }
+}
+customElements.define("complex-slotted-menu", ComplexSlottedMenu);
+//# 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 {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Menu } from '@spectrum-web-components/menu';\n\nexport const MenuMarkup = ({\n    size = 'm' as 's' | 'm' | 'l' | 'xl',\n} = {}): TemplateResult => {\n    return html`\n        <sp-menu size=${size}>\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item>Select Inverse</sp-menu-item>\n            <sp-menu-item>Feather...</sp-menu-item>\n            <sp-menu-item>Select and Mask...</sp-menu-item>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-item>Save Selection</sp-menu-item>\n            <sp-menu-item disabled>Make Work Path</sp-menu-item>\n        </sp-menu>\n\n        <sp-popover open>\n            <sp-menu size=${size}>\n                <sp-menu-item>Deselect</sp-menu-item>\n                <sp-menu-item>Select Inverse</sp-menu-item>\n                <sp-menu-item>Feather...</sp-menu-item>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-item disabled>Make Work Path</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport class ComplexSlottedGroup extends LitElement {\n    get menu(): Menu {\n        return this.renderRoot.querySelector('sp-menu') as Menu;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            <sp-menu>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-1\">Before First</sp-menu-item>\n                    <slot name=\"before\"></slot>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-4\">Sibling 1</sp-menu-item>\n                    <slot></slot>\n                    <sp-menu-item id=\"i-10\">Sibling 2</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-group>\n                    <sp-menu-item id=\"i-11\">After 1</sp-menu-item>\n                    <sp-menu-item id=\"i-12\">After 2</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-group', ComplexSlottedGroup);\n\nexport class ComplexSlottedMenu extends LitElement {\n    get menu(): Menu {\n        return (\n            this.renderRoot.querySelector(\n                'complex-slotted-group'\n            ) as ComplexSlottedGroup\n        ).menu;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            <complex-slotted-group id=\"group\">\n                <sp-menu-item id=\"i-5\">Middle 1</sp-menu-item>\n                <sp-menu-item id=\"i-6\">Middle 2</sp-menu-item>\n                <sp-menu-item id=\"i-7\">Middle 3</sp-menu-item>\n                <slot></slot>\n                <slot name=\"before\" slot=\"before\"></slot>\n                <sp-menu-item slot=\"before\" id=\"i-3\">Before Last</sp-menu-item>\n            </complex-slotted-group>\n        `;\n    }\n}\n\ncustomElements.define('complex-slotted-menu', ComplexSlottedMenu);\n"],
+  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGA,aAAM,aAAa,CAAC;AAAA,EACvB,OAAO;AACX,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA,wBACa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC;AAEO,aAAM,4BAA4B,WAAW;AAAA,EAChD,IAAI,OAAa;AACb,WAAO,KAAK,WAAW,cAAc,SAAS;AAAA,EAClD;AAAA,EACmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBX;AACJ;AAEA,eAAe,OAAO,yBAAyB,mBAAmB;AAE3D,aAAM,2BAA2B,WAAW;AAAA,EAC/C,IAAI,OAAa;AACb,WACI,KAAK,WAAW;AAAA,MACZ;AAAA,IACJ,EACF;AAAA,EACN;AAAA,EACmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX;AACJ;AAEA,eAAe,OAAO,wBAAwB,kBAAkB;",
+  "names": []
+}

package/stories/menu-divider.stories.js

@@ -0,0 +1,32 @@
+"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 default {
+  component: "sp-menu-divider",
+  title: "Menu Divider"
+};
+const Template = (size) => {
+  return html`
+        <sp-popover open>
+            <sp-menu>
+                <sp-menu-item>Deselect</sp-menu-item>
+                <sp-menu-item>Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-divider size=${size}></sp-menu-divider>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-item>Make Work Path</sp-menu-item>
+                <sp-menu-divider size=${size}></sp-menu-divider>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-divider size=${size}></sp-menu-divider>
+                <sp-menu-item>Create group</sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
+export const sizeS = () => Template("s");
+export const sizeM = () => Template("m");
+export const sizeL = () => Template("l");
+//# sourceMappingURL=menu-divider.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-divider.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*/ import { html, TemplateResult } from '@spectrum-web-components/base';\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-item.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\n\nexport default {\n    component: 'sp-menu-divider',\n    title: 'Menu Divider',\n};\n\nconst Template = (size: string): TemplateResult => {\n    return html`\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-divider size=${size}></sp-menu-divider>\n                <sp-menu-item>Select and Mask...</sp-menu-item>\n                <sp-menu-item>Make Work Path</sp-menu-item>\n                <sp-menu-divider size=${size}></sp-menu-divider>\n                <sp-menu-item>Save Selection</sp-menu-item>\n                <sp-menu-divider size=${size}></sp-menu-divider>\n                <sp-menu-item>Create group</sp-menu-item>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n\nexport const sizeS = (): TemplateResult => Template('s');\n\nexport const sizeM = (): TemplateResult => Template('m');\n\nexport const sizeL = (): TemplateResult => Template('l');\n"],
+  "mappings": ";AAUG,SAAS,YAA4B;AAExC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEA,MAAM,WAAW,CAAC,SAAiC;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAM6B,IAAI;AAAA;AAAA;AAAA,wCAGJ,IAAI;AAAA;AAAA,wCAEJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAK5C;AAEO,aAAM,QAAQ,MAAsB,SAAS,GAAG;AAEhD,aAAM,QAAQ,MAAsB,SAAS,GAAG;AAEhD,aAAM,QAAQ,MAAsB,SAAS,GAAG;",
+  "names": []
+}

package/stories/menu-group.stories.js

@@ -0,0 +1,144 @@
+"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/popover/sp-popover.js";
+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 "./index.js";
+export default {
+  component: "sp-menu",
+  title: "Menu Group"
+};
+export const complexSlotted = () => {
+  return html`
+        <complex-slotted-menu>
+            <sp-menu-item slot="before" id="i-2">External A</sp-menu-item>
+            <sp-menu-item id="i-8">External 1</sp-menu-item>
+            <sp-menu-item id="i-9">External 2</sp-menu-item>
+        </complex-slotted-menu>
+    `;
+};
+export const mixed = () => {
+  let style = "italic";
+  let weight = "700";
+  let color = "blue";
+  let decoration = "overline";
+  const styleRules = ({
+    style: style2,
+    weight: weight2,
+    color: color2,
+    decoration: decoration2
+  }) => {
+    return `
+        .style-rule {
+            font-weight: ${weight2};
+            font-style: ${style2};
+            color: ${color2};
+            text-decoration: ${decoration2};
+        }
+        `;
+  };
+  const update = (event) => {
+    const { value, id } = event.target;
+    switch (id) {
+      case "font":
+        const values = value.split(",");
+        style = values.indexOf("italic") > -1 ? "italic" : "normal";
+        weight = values.indexOf("bold") > -1 ? "700" : "400";
+        break;
+      case "color":
+        color = value;
+        break;
+      case "decoration":
+        decoration = value;
+        break;
+    }
+    document.querySelector("#output").textContent = styleRules({
+      style,
+      weight,
+      color,
+      decoration
+    });
+  };
+  return html`
+        <style>
+            sp-popover {
+                position: static;
+                float: left;
+            }
+        </style>
+        <sp-popover open>
+            <sp-menu label="Style/Color" @change=${update}>
+                <sp-menu-group label="Font Style" selects="multiple" id="font">
+                    <sp-menu-item value="bold" selected>Bold</sp-menu-item>
+                    <sp-menu-item value="italic" selected>Italic</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-group label="Text Color" selects="single" id="color">
+                    <sp-menu-item value="black">Black</sp-menu-item>
+                    <sp-menu-item value="blue" selected>Blue</sp-menu-item>
+                    <sp-menu-item value="red">Red</sp-menu-item>
+                    <sp-menu-item value="green">Green</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-group
+                    label="Text Decoration"
+                    selects="single"
+                    id="decoration"
+                >
+                    <sp-menu-item value="none">None</sp-menu-item>
+                    <sp-menu-item value="overline" selected>
+                        Overline
+                    </sp-menu-item>
+                    <sp-menu-item value="line-through">
+                        Line-through
+                    </sp-menu-item>
+                    <sp-menu-item value="underline">Underline</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        </sp-popover>
+        <pre
+            id="output"
+            style="font-family: var(--spectrum-alias-body-text-font-family);"
+        >
+            ${styleRules({ style, weight, color, decoration })}
+        </pre
+        >
+    `;
+};
+export const inherit = () => {
+  return html`
+        <style>
+            sp-popover {
+                position: static;
+                float: left;
+            }
+        </style>
+        <sp-popover open>
+            <sp-menu label="Groceries" selects="multiple">
+                <sp-menu-group label="Juice" selects="inherit">
+                    <sp-menu-item selected>Orange</sp-menu-item>
+                    <sp-menu-item selected>Apple</sp-menu-item>
+                    <sp-menu-item>Grape</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-group label="Vegetables" selects="inherit">
+                    <sp-menu-item>Carrots</sp-menu-item>
+                    <sp-menu-item selected>Summer Squash</sp-menu-item>
+                    <sp-menu-item>Zuccini</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-group label="Dry Goods" selects="inherit">
+                    <sp-menu-item>Ceral</sp-menu-item>
+                    <sp-menu-item selected>Flour</sp-menu-item>
+                    <sp-menu-item>Salt</sp-menu-item>
+                    <sp-menu-item>Sugar</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
+//# sourceMappingURL=menu-group.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-group.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 { MenuGroup } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\n\nimport './index.js';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu Group',\n};\n\nexport const complexSlotted = (): TemplateResult => {\n    return html`\n        <complex-slotted-menu>\n            <sp-menu-item slot=\"before\" id=\"i-2\">External A</sp-menu-item>\n            <sp-menu-item id=\"i-8\">External 1</sp-menu-item>\n            <sp-menu-item id=\"i-9\">External 2</sp-menu-item>\n        </complex-slotted-menu>\n    `;\n};\n\nexport const mixed = (): TemplateResult => {\n    let style = 'italic';\n    let weight = '700';\n    let color = 'blue';\n    let decoration = 'overline';\n    const styleRules = ({\n        style,\n        weight,\n        color,\n        decoration,\n    }: {\n        style: string;\n        weight: string;\n        color: string;\n        decoration: string;\n    }): string => {\n        return `\n        .style-rule {\n            font-weight: ${weight};\n            font-style: ${style};\n            color: ${color};\n            text-decoration: ${decoration};\n        }\n        `;\n    };\n    const update = (event: Event): void => {\n        const { value, id } = event.target as MenuGroup;\n        switch (id) {\n            case 'font':\n                const values = value.split(',');\n                style = values.indexOf('italic') > -1 ? 'italic' : 'normal';\n                weight = values.indexOf('bold') > -1 ? '700' : '400';\n                break;\n            case 'color':\n                color = value;\n                break;\n            case 'decoration':\n                decoration = value;\n                break;\n        }\n        (document.querySelector('#output') as HTMLElement).textContent =\n            styleRules({\n                style,\n                weight,\n                color,\n                decoration,\n            });\n    };\n    return html`\n        <style>\n            sp-popover {\n                position: static;\n                float: left;\n            }\n        </style>\n        <sp-popover open>\n            <sp-menu label=\"Style/Color\" @change=${update}>\n                <sp-menu-group label=\"Font Style\" selects=\"multiple\" id=\"font\">\n                    <sp-menu-item value=\"bold\" selected>Bold</sp-menu-item>\n                    <sp-menu-item value=\"italic\" selected>Italic</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group label=\"Text Color\" selects=\"single\" id=\"color\">\n                    <sp-menu-item value=\"black\">Black</sp-menu-item>\n                    <sp-menu-item value=\"blue\" selected>Blue</sp-menu-item>\n                    <sp-menu-item value=\"red\">Red</sp-menu-item>\n                    <sp-menu-item value=\"green\">Green</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group\n                    label=\"Text Decoration\"\n                    selects=\"single\"\n                    id=\"decoration\"\n                >\n                    <sp-menu-item value=\"none\">None</sp-menu-item>\n                    <sp-menu-item value=\"overline\" selected>\n                        Overline\n                    </sp-menu-item>\n                    <sp-menu-item value=\"line-through\">\n                        Line-through\n                    </sp-menu-item>\n                    <sp-menu-item value=\"underline\">Underline</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n        <pre\n            id=\"output\"\n            style=\"font-family: var(--spectrum-alias-body-text-font-family);\"\n        >\n            ${styleRules({ style, weight, color, decoration })}\n        </pre\n        >\n    `;\n};\n\nexport const inherit = (): TemplateResult => {\n    return html`\n        <style>\n            sp-popover {\n                position: static;\n                float: left;\n            }\n        </style>\n        <sp-popover open>\n            <sp-menu label=\"Groceries\" selects=\"multiple\">\n                <sp-menu-group label=\"Juice\" selects=\"inherit\">\n                    <sp-menu-item selected>Orange</sp-menu-item>\n                    <sp-menu-item selected>Apple</sp-menu-item>\n                    <sp-menu-item>Grape</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group label=\"Vegetables\" selects=\"inherit\">\n                    <sp-menu-item>Carrots</sp-menu-item>\n                    <sp-menu-item selected>Summer Squash</sp-menu-item>\n                    <sp-menu-item>Zuccini</sp-menu-item>\n                </sp-menu-group>\n                <sp-menu-divider></sp-menu-divider>\n                <sp-menu-group label=\"Dry Goods\" selects=\"inherit\">\n                    <sp-menu-item>Ceral</sp-menu-item>\n                    <sp-menu-item selected>Flour</sp-menu-item>\n                    <sp-menu-item>Salt</sp-menu-item>\n                    <sp-menu-item>Sugar</sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n};\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AAGrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,QAAQ,MAAsB;AACvC,MAAI,QAAQ;AACZ,MAAI,SAAS;AACb,MAAI,QAAQ;AACZ,MAAI,aAAa;AACjB,QAAM,aAAa,CAAC;AAAA,IAChB,OAAAA;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,EACJ,MAKc;AACV,WAAO;AAAA;AAAA,2BAEYF,OAAM;AAAA,0BACPD,MAAK;AAAA,qBACVE,MAAK;AAAA,+BACKC,WAAU;AAAA;AAAA;AAAA,EAGrC;AACA,QAAM,SAAS,CAAC,UAAuB;AACnC,UAAM,EAAE,OAAO,GAAG,IAAI,MAAM;AAC5B,YAAQ,IAAI;AAAA,MACR,KAAK;AACD,cAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,gBAAQ,OAAO,QAAQ,QAAQ,IAAI,KAAK,WAAW;AACnD,iBAAS,OAAO,QAAQ,MAAM,IAAI,KAAK,QAAQ;AAC/C;AAAA,MACJ,KAAK;AACD,gBAAQ;AACR;AAAA,MACJ,KAAK;AACD,qBAAa;AACb;AAAA,IACR;AACA,IAAC,SAAS,cAAc,SAAS,EAAkB,cAC/C,WAAW;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACT;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAQwC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAiC3C,WAAW,EAAE,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAI9D;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BX;",
+  "names": ["style", "weight", "color", "decoration"]
+}

package/stories/menu-item.disconnected.stories.js

@@ -0,0 +1,178 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { SpectrumMixin } from "@spectrum-web-components/base";
+var BlendModeValue = /* @__PURE__ */ ((BlendModeValue2) => {
+  BlendModeValue2[BlendModeValue2["normal"] = 2] = "normal";
+  BlendModeValue2[BlendModeValue2["multiply"] = 3] = "multiply";
+  BlendModeValue2[BlendModeValue2["screen"] = 7] = "screen";
+  return BlendModeValue2;
+})(BlendModeValue || {});
+const XElement = SpectrumMixin(LitElement);
+class MyContainer extends XElement {
+  constructor() {
+    super(...arguments);
+    this._counter = 0;
+  }
+  _handleClick() {
+    this._counter += 1;
+  }
+  render() {
+    return html`
+            <div>
+                ${when(
+      this._counter % 2 === 0,
+      () => html`
+                        <my-view1></my-view1>
+                    `,
+      () => html`
+                        <my-view2></my-view2>
+                    `
+    )}
+                <sp-button
+                    variant="primary"
+                    size="m"
+                    @click=${this._handleClick}
+                >
+                    Switch views
+                </sp-button>
+            </div>
+        `;
+  }
+}
+__decorateClass([
+  state()
+], MyContainer.prototype, "_counter", 2);
+customElements.define("my-container", MyContainer);
+class MyView1 extends XElement {
+  render() {
+    const blendModeOptions = [
+      {
+        value: 2 /* normal */,
+        title: "Normal 1",
+        subtitle: "No effect applied"
+      },
+      {
+        value: 3 /* multiply */,
+        title: "Multiply",
+        subtitle: "Darken shadows with contrast and details"
+      },
+      {
+        value: 7 /* screen */,
+        title: "Screen",
+        subtitle: "Brighten highlights with contrast and details"
+      }
+    ];
+    return html`
+            View 1
+            <my-picker
+                .blendMode=${2 /* normal */}
+                .blendModeOptions=${blendModeOptions}
+                dir="ltr"
+            ></my-picker>
+        `;
+  }
+}
+customElements.define("my-view1", MyView1);
+class MyView2 extends XElement {
+  render() {
+    const blendModeOptions = [
+      {
+        value: 2 /* normal */,
+        title: "Normal 2",
+        subtitle: "No effect applied"
+      },
+      {
+        value: 3 /* multiply */,
+        title: "Multiply",
+        subtitle: "Darken shadows with contrast and details"
+      },
+      {
+        value: 7 /* screen */,
+        title: "Screen",
+        subtitle: "Brighten highlights with contrast and details"
+      }
+    ];
+    return html`
+            View 2
+            <my-picker
+                .blendMode=${2 /* normal */}
+                .blendModeOptions=${blendModeOptions}
+            ></my-picker>
+        `;
+  }
+}
+customElements.define("my-view2", MyView2);
+class MyPicker extends XElement {
+  constructor() {
+    super(...arguments);
+    this.blendModeOptions = [];
+    this.blendMode = 2 /* normal */;
+  }
+  _renderBlendOptions() {
+    return html`
+            ${repeat(
+      this.blendModeOptions,
+      // This is intentional so that repeat directive will add instead of
+      // update existing DOM which will then trigger error in
+      // MenuItem.childrenItem
+      // Using .value for the key will workaround the issue
+      (blendModeOption) => blendModeOption,
+      (blendModeOption) => html`
+                    <sp-menu-item value=${blendModeOption.value}>
+                        ${blendModeOption.title}
+                        <span slot="value">${blendModeOption.subtitle}</span>
+                    </sp-menu-item>
+                `
+    )}
+        `;
+  }
+  render() {
+    return html`
+            <sp-picker
+                id="blendMode"
+                size="l"
+                label="Blend"
+                value=${this.blendMode}
+            >
+                ${this._renderBlendOptions()}
+            </sp-picker>
+        `;
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], MyPicker.prototype, "blendModeOptions", 2);
+__decorateClass([
+  property()
+], MyPicker.prototype, "blendMode", 2);
+customElements.define("my-picker", MyPicker);
+export default {
+  component: "sp-menu-item",
+  title: "Menu Item/Disconnected"
+};
+export const disconnectedChildItems = () => html`
+    <my-container></my-container>
+`;
+disconnectedChildItems.swc_vrt = {
+  skip: true
+};
+disconnectedChildItems.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
+//# sourceMappingURL=menu-item.disconnected.stories.js.map

package/stories/menu-item.disconnected.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-item.disconnected.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 { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { when } from 'lit/directives/when.js';\n\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { SpectrumMixin } from '@spectrum-web-components/base';\n\nenum BlendModeValue {\n    normal = 2,\n    multiply = 3,\n    screen = 7,\n}\n\ninterface BlendModeOption {\n    value: BlendModeValue;\n    title: string;\n    subtitle: string;\n    thumbnail: string;\n}\n\nconst XElement = SpectrumMixin(LitElement);\n\nclass MyContainer extends XElement {\n    @state()\n    private _counter = 0;\n\n    private _handleClick(): void {\n        this._counter += 1;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div>\n                ${when(\n                    this._counter % 2 === 0,\n                    () => html`\n                        <my-view1></my-view1>\n                    `,\n                    () => html`\n                        <my-view2></my-view2>\n                    `\n                )}\n                <sp-button\n                    variant=\"primary\"\n                    size=\"m\"\n                    @click=${this._handleClick}\n                >\n                    Switch views\n                </sp-button>\n            </div>\n        `;\n    }\n}\n\ncustomElements.define('my-container', MyContainer);\n\nclass MyView1 extends XElement {\n    protected override render(): TemplateResult {\n        const blendModeOptions = [\n            {\n                value: BlendModeValue.normal,\n                title: 'Normal 1',\n                subtitle: 'No effect applied',\n            },\n            {\n                value: BlendModeValue.multiply,\n                title: 'Multiply',\n                subtitle: 'Darken shadows with contrast and details',\n            },\n            {\n                value: BlendModeValue.screen,\n                title: 'Screen',\n                subtitle: 'Brighten highlights with contrast and details',\n            },\n        ];\n        return html`\n            View 1\n            <my-picker\n                .blendMode=${BlendModeValue.normal}\n                .blendModeOptions=${blendModeOptions}\n                dir=\"ltr\"\n            ></my-picker>\n        `;\n    }\n}\n\ncustomElements.define('my-view1', MyView1);\n\nclass MyView2 extends XElement {\n    protected override render(): TemplateResult {\n        const blendModeOptions = [\n            {\n                value: BlendModeValue.normal,\n                title: 'Normal 2',\n                subtitle: 'No effect applied',\n            },\n            {\n                value: BlendModeValue.multiply,\n                title: 'Multiply',\n                subtitle: 'Darken shadows with contrast and details',\n            },\n            {\n                value: BlendModeValue.screen,\n                title: 'Screen',\n                subtitle: 'Brighten highlights with contrast and details',\n            },\n        ];\n        return html`\n            View 2\n            <my-picker\n                .blendMode=${BlendModeValue.normal}\n                .blendModeOptions=${blendModeOptions}\n            ></my-picker>\n        `;\n    }\n}\n\ncustomElements.define('my-view2', MyView2);\n\nclass MyPicker extends XElement {\n    @property({ type: Array })\n    public blendModeOptions: BlendModeOption[] = [];\n\n    @property()\n    public blendMode: number = BlendModeValue.normal;\n\n    private _renderBlendOptions(): TemplateResult {\n        return html`\n            ${repeat(\n                this.blendModeOptions,\n                // This is intentional so that repeat directive will add instead of\n                // update existing DOM which will then trigger error in\n                // MenuItem.childrenItem\n                // Using .value for the key will workaround the issue\n                (blendModeOption) => blendModeOption,\n                (blendModeOption: BlendModeOption) => html`\n                    <sp-menu-item value=${blendModeOption.value}>\n                        ${blendModeOption.title}\n                        <span slot=\"value\">${blendModeOption.subtitle}</span>\n                    </sp-menu-item>\n                `\n            )}\n        `;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            <sp-picker\n                id=\"blendMode\"\n                size=\"l\"\n                label=\"Blend\"\n                value=${this.blendMode}\n            >\n                ${this._renderBlendOptions()}\n            </sp-picker>\n        `;\n    }\n}\n\ncustomElements.define('my-picker', MyPicker);\n\nexport default {\n    component: 'sp-menu-item',\n    title: 'Menu Item/Disconnected',\n};\n\nexport const disconnectedChildItems = (): TemplateResult => html`\n    <my-container></my-container>\n`;\n\ndisconnectedChildItems.swc_vrt = {\n    skip: true,\n};\n\ndisconnectedChildItems.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n"],
+  "mappings": "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",
+  "names": ["BlendModeValue"]
+}

package/stories/menu-item.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+export default {
+  component: "sp-menu-item",
+  title: "Menu Item"
+};
+export const Default = () => {
+  return html`
+        <sp-menu>
+            <sp-menu-item>Menu Item</sp-menu-item>
+        </sp-menu>
+    `;
+};
+export const noWrap = () => {
+  return html`
+        <sp-menu style="width: 150px;">
+            <sp-menu-item no-wrap>
+                Select a Country with a very long label, too long, in fact
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
+export const descriptionSlot = () => {
+  return html`
+        <sp-menu>
+            <sp-menu-item>
+                Quick export
+                <span slot="description">Share a snapshot</span>
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
+export const valueSlot = () => {
+  return html`
+        <style>
+            kbd {
+                font-family: var(--spectrum-alias-body-text-font-family);
+                white-space: nowrap;
+            }
+        </style>
+        <sp-menu style="width: 150px;" selects="single">
+            <sp-menu-item>
+                Save
+                <kbd slot="value">⌘​S</kbd>
+            </sp-menu-item>
+            <sp-menu-item selected>
+                Save As...
+                <kbd slot="value">⇧​⌘​S</kbd>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Save All
+                <kbd slot="value">⌥​⌘​S</kbd>
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
+export const href = () => {
+  return html`
+        <sp-menu style="width: 150px;">
+            <sp-menu-item
+                href="https://opensource.adobe.com/spectrum-web-components"
+            >
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit the Documentation Site
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
+//# sourceMappingURL=menu-item.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["menu-item.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';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n    component: 'sp-menu-item',\n    title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>Menu Item</sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const noWrap = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item no-wrap>\n                Select a Country with a very long label, too long, in fact\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const descriptionSlot = (): TemplateResult => {\n    return html`\n        <sp-menu>\n            <sp-menu-item>\n                Quick export\n                <span slot=\"description\">Share a snapshot</span>\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n    /**\n     * This story featurs zero width spaces between the characters in the `<kbd>` element.\n     * While their absence has not caused issues in the local Storybook, the visual regression\n     * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n     * without the intevening zero width space character. When reviewing in the future,\n     * `font-variant-ligatures: none` was also not enough to address this situation.\n     */\n    //\n    //\n    return html`\n        <style>\n            kbd {\n                font-family: var(--spectrum-alias-body-text-font-family);\n                white-space: nowrap;\n            }\n        </style>\n        <sp-menu style=\"width: 150px;\" selects=\"single\">\n            <sp-menu-item>\n                Save\n                <kbd slot=\"value\">\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item selected>\n                Save As...\n                <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n            <sp-menu-item disabled>\n                Save All\n                <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n\nexport const href = (): TemplateResult => {\n    return html`\n        <sp-menu style=\"width: 150px;\">\n            <sp-menu-item\n                href=\"https://opensource.adobe.com/spectrum-web-components\"\n            >\n                <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n                Edit the Documentation Site\n            </sp-menu-item>\n        </sp-menu>\n    `;\n};\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEO,aAAM,YAAY,MAAsB;AAU3C,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,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
+  "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": []
+}