@spectrum-web-components/action-menu 0.48.1 → 0.49.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/action-menu",
-    "version": "0.48.1",
+    "version": "0.49.0-beta.1",
     "publishConfig": {
         "access": "public"
     },
@@ -61,12 +61,12 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/action-button": "^0.48.1",
-        "@spectrum-web-components/base": "^0.48.1",
-        "@spectrum-web-components/icon": "^0.48.1",
-        "@spectrum-web-components/icons-workflow": "^0.48.1",
-        "@spectrum-web-components/picker": "^0.48.1",
-        "@spectrum-web-components/shared": "^0.48.1"
+        "@spectrum-web-components/action-button": "^0.49.0-beta.1",
+        "@spectrum-web-components/base": "^0.49.0-beta.1",
+        "@spectrum-web-components/icon": "^0.49.0-beta.1",
+        "@spectrum-web-components/icons-workflow": "^0.49.0-beta.1",
+        "@spectrum-web-components/picker": "^0.49.0-beta.1",
+        "@spectrum-web-components/shared": "^0.49.0-beta.1"
     },
     "devDependencies": {
         "@spectrum-css/actionmenu": "^6.1.1"
@@ -78,5 +78,5 @@
         "./**/*.dev.js",
         "./sync/sp-*.js"
     ],
-    "gitHead": "b756ecc3587411e4dbeb825bad40a9f4a3c7a248"
+    "gitHead": "74ee2c5b1276e8e4f768566a1c3c4e263a7eb8b3"
 }

package/src/ActionMenu.d.ts

@@ -25,7 +25,11 @@ declare const ActionMenu_base: typeof PickerBase & {
 export declare class ActionMenu extends ActionMenu_base {
     static get styles(): CSSResultArray;
     selects: undefined | 'single';
+    /**
+     * @deprecated Use `staticColor` instead.
+     */
     static: 'white' | 'black' | undefined;
+    staticColor?: 'white' | 'black';
     protected listRole: 'listbox' | 'menu';
     protected itemRole: string;
     private get hasLabel();

package/src/ActionMenu.dev.js

@@ -76,7 +76,7 @@ export class ActionMenu extends ObserveSlotPresence(
                 aria-describedby=${DESCRIPTION_ID}
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
-                static=${ifDefined(this.static)}
+                static-color=${ifDefined(this.staticColor)}
                 aria-haspopup="true"
                 aria-controls=${ifDefined(this.open ? "menu" : void 0)}
                 aria-expanded=${this.open ? "true" : "false"}
@@ -110,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], ActionMenu.prototype, "static", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "static-color" })
+], ActionMenu.prototype, "staticColor", 2);
 __decorateClass([
   state()
 ], ActionMenu.prototype, "labelOnly", 1);

package/src/ActionMenu.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["ActionMenu.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n *   you'd like for a selection to be held by the `sp-menu` that it presents in\n *   its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n    ObserveSlotText(PickerBase, 'label'),\n    '[slot=\"label-only\"]'\n) {\n    public static override get styles(): CSSResultArray {\n        return [actionMenuStyles];\n    }\n\n    @property({ type: String })\n    public override selects: undefined | 'single' = undefined;\n\n    @property({ type: String, reflect: true })\n    public static: 'white' | 'black' | undefined = undefined;\n\n    protected override listRole: 'listbox' | 'menu' = 'menu';\n    protected override itemRole = 'menuitem';\n    private get hasLabel(): boolean {\n        return this.slotHasContent;\n    }\n\n    @state()\n    private get labelOnly(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public override handleSlottableRequest = (\n        event: SlottableRequestEvent\n    ): void => {\n        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n    };\n\n    protected override get buttonContent(): TemplateResult[] {\n        return [\n            html`\n                ${this.labelOnly\n                    ? html``\n                    : html`\n                          <slot\n                              name=\"icon\"\n                              slot=\"icon\"\n                              ?icon-only=${!this.hasLabel}\n                              ?hidden=${this.labelOnly}\n                          >\n                              <sp-icon-more class=\"icon\"></sp-icon-more>\n                          </slot>\n                      `}\n                <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n                <slot name=\"label-only\"></slot>\n                <slot\n                    name=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <sp-action-button\n                aria-describedby=${DESCRIPTION_ID}\n                ?quiet=${this.quiet}\n                ?selected=${this.open}\n                static=${ifDefined(this.static)}\n                aria-haspopup=\"true\"\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-label=${ifDefined(this.label || undefined)}\n                id=\"button\"\n                class=\"button\"\n                size=${this.size}\n                @blur=${this.handleButtonBlur}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n            >\n                ${this.buttonContent}\n            </sp-action-button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues<this>): void {\n        if (changedProperties.has('invalid')) {\n            this.invalid = false;\n        }\n        super.update(changedProperties);\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,kBAAkB;AAC3C,OAAO;AACP,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAc/B,aAAM,mBAAmB;AAAA,EAC5B,gBAAgB,YAAY,OAAO;AAAA,EACnC;AACJ,EAAE;AAAA,EAHK;AAAA;AASH,SAAgB,UAAgC;AAGhD,SAAO,SAAwC;AAE/C,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAU9B,SAAgB,yBAAyB,CACrC,UACO;AACP,WAAK,cAAc,IAAI,sBAAsB,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACxE;AAAA;AAAA,EAzBA,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAUA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAGA,IAAY,YAAqB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAQA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,kBACM,KAAK,YACD,SACA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,uBAI/B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA;AAAA,IAGtD;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,WAAW;AAChB,WAAK,UAAU,WAAW,KAAK;AAAA,IACnC;AACA,WAAO;AAAA;AAAA,mCAEoB,cAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,yBACZ,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA,gCAEf,UAAU,KAAK,OAAO,SAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,OAAO,SAAS,OAAO;AAAA,6BAC/B,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB;AAAA,MACP,aAAa,KAAK;AAAA,MAClB,SAAS;AAAA,IACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA;AAAA,EAEvD;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;AApFoB;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GARjB,WASO;AAGT;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAXhC,WAYF;AASK;AAAA,EADX,MAAM;AAAA,GApBE,WAqBG;",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n *   you'd like for a selection to be held by the `sp-menu` that it presents in\n *   its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n    ObserveSlotText(PickerBase, 'label'),\n    '[slot=\"label-only\"]'\n) {\n    public static override get styles(): CSSResultArray {\n        return [actionMenuStyles];\n    }\n\n    @property({ type: String })\n    public override selects: undefined | 'single' = undefined;\n\n    /**\n     * @deprecated Use `staticColor` instead.\n     */\n    @property({ type: String, reflect: true })\n    public static: 'white' | 'black' | undefined = undefined;\n\n    @property({ reflect: true, attribute: 'static-color' })\n    public staticColor?: 'white' | 'black';\n\n    protected override listRole: 'listbox' | 'menu' = 'menu';\n    protected override itemRole = 'menuitem';\n    private get hasLabel(): boolean {\n        return this.slotHasContent;\n    }\n\n    @state()\n    private get labelOnly(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public override handleSlottableRequest = (\n        event: SlottableRequestEvent\n    ): void => {\n        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n    };\n\n    protected override get buttonContent(): TemplateResult[] {\n        return [\n            html`\n                ${this.labelOnly\n                    ? html``\n                    : html`\n                          <slot\n                              name=\"icon\"\n                              slot=\"icon\"\n                              ?icon-only=${!this.hasLabel}\n                              ?hidden=${this.labelOnly}\n                          >\n                              <sp-icon-more class=\"icon\"></sp-icon-more>\n                          </slot>\n                      `}\n                <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n                <slot name=\"label-only\"></slot>\n                <slot\n                    name=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <sp-action-button\n                aria-describedby=${DESCRIPTION_ID}\n                ?quiet=${this.quiet}\n                ?selected=${this.open}\n                static-color=${ifDefined(this.staticColor)}\n                aria-haspopup=\"true\"\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-label=${ifDefined(this.label || undefined)}\n                id=\"button\"\n                class=\"button\"\n                size=${this.size}\n                @blur=${this.handleButtonBlur}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n            >\n                ${this.buttonContent}\n            </sp-action-button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues<this>): void {\n        if (changedProperties.has('invalid')) {\n            this.invalid = false;\n        }\n        super.update(changedProperties);\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,kBAAkB;AAC3C,OAAO;AACP,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAc/B,aAAM,mBAAmB;AAAA,EAC5B,gBAAgB,YAAY,OAAO;AAAA,EACnC;AACJ,EAAE;AAAA,EAHK;AAAA;AASH,SAAgB,UAAgC;AAMhD,SAAO,SAAwC;AAK/C,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAU9B,SAAgB,yBAAyB,CACrC,UACO;AACP,WAAK,cAAc,IAAI,sBAAsB,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACxE;AAAA;AAAA,EA/BA,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAgBA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAGA,IAAY,YAAqB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAQA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,kBACM,KAAK,YACD,SACA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,uBAI/B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA;AAAA,IAGtD;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,WAAW;AAChB,WAAK,UAAU,WAAW,KAAK;AAAA,IACnC;AACA,WAAO;AAAA;AAAA,mCAEoB,cAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACN,UAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1B,UAAU,KAAK,OAAO,SAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,OAAO,SAAS,OAAO;AAAA,6BAC/B,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB;AAAA,MACP,aAAa,KAAK;AAAA,MAClB,SAAS;AAAA,IACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA;AAAA,EAEvD;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;AA1FoB;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GARjB,WASO;AAMT;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAdhC,WAeF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAjB7C,WAkBF;AASK;AAAA,EADX,MAAM;AAAA,GA1BE,WA2BG;",
   "names": []
 }

package/src/ActionMenu.js

@@ -1,5 +1,5 @@
-"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(r,i,e,o)=>{for(var t=o>1?void 0:o?h(i,e):i,n=r.length-1,a;n>=0;n--)(a=r[n])&&(t=(o?a(i,e,t):a(t))||t);return o&&t&&u(i,e,t),t};import{html as s}from"@spectrum-web-components/base";import{state as b}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{DESCRIPTION_ID as c,PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{ObserveSlotText as $}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import v from"./action-menu.css.js";import{SlottableRequestEvent as y}from"@spectrum-web-components/overlay/src/slottable-request-event.js";export class ActionMenu extends f($(m,"label"),'[slot="label-only"]'){constructor(){super(...arguments);this.selects=void 0;this.static=void 0;this.listRole="menu";this.itemRole="menuitem";this.handleSlottableRequest=e=>{this.dispatchEvent(new y(e.name,e.data))}}static get styles(){return[v]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[s`
-                ${this.labelOnly?s``:s`
+"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(s,o,e,l)=>{for(var t=l>1?void 0:l?h(o,e):o,n=s.length-1,a;n>=0;n--)(a=s[n])&&(t=(l?a(o,e,t):a(t))||t);return l&&t&&u(o,e,t),t};import{html as r}from"@spectrum-web-components/base";import{state as c}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{DESCRIPTION_ID as b,PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{ObserveSlotText as $}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import v from"./action-menu.css.js";import{SlottableRequestEvent as y}from"@spectrum-web-components/overlay/src/slottable-request-event.js";export class ActionMenu extends f($(m,"label"),'[slot="label-only"]'){constructor(){super(...arguments);this.selects=void 0;this.static=void 0;this.listRole="menu";this.itemRole="menuitem";this.handleSlottableRequest=e=>{this.dispatchEvent(new y(e.name,e.data))}}static get styles(){return[v]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[r`
+                ${this.labelOnly?r``:r`
                           <slot
                               name="icon"
                               slot="icon"
@@ -15,12 +15,12 @@
                     name="tooltip"
                     @slotchange=${this.handleTooltipSlotchange}
                 ></slot>
-            `]}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),s`
+            `]}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),r`
             <sp-action-button
-                aria-describedby=${c}
+                aria-describedby=${b}
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
-                static=${d(this.static)}
+                static-color=${d(this.staticColor)}
                 aria-haspopup="true"
                 aria-controls=${d(this.open?"menu":void 0)}
                 aria-expanded=${this.open?"true":"false"}
@@ -36,5 +36,5 @@
                 ${this.buttonContent}
             </sp-action-button>
             ${this.renderMenu} ${this.renderDescriptionSlot}
-        `}update(e){e.has("invalid")&&(this.invalid=!1),super.update(e)}}l([p({type:String})],ActionMenu.prototype,"selects",2),l([p({type:String,reflect:!0})],ActionMenu.prototype,"static",2),l([b()],ActionMenu.prototype,"labelOnly",1);
+        `}update(e){e.has("invalid")&&(this.invalid=!1),super.update(e)}}i([p({type:String})],ActionMenu.prototype,"selects",2),i([p({type:String,reflect:!0})],ActionMenu.prototype,"static",2),i([p({reflect:!0,attribute:"static-color"})],ActionMenu.prototype,"staticColor",2),i([c()],ActionMenu.prototype,"labelOnly",1);
 //# sourceMappingURL=ActionMenu.js.map

package/src/ActionMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["ActionMenu.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n *   you'd like for a selection to be held by the `sp-menu` that it presents in\n *   its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n    ObserveSlotText(PickerBase, 'label'),\n    '[slot=\"label-only\"]'\n) {\n    public static override get styles(): CSSResultArray {\n        return [actionMenuStyles];\n    }\n\n    @property({ type: String })\n    public override selects: undefined | 'single' = undefined;\n\n    @property({ type: String, reflect: true })\n    public static: 'white' | 'black' | undefined = undefined;\n\n    protected override listRole: 'listbox' | 'menu' = 'menu';\n    protected override itemRole = 'menuitem';\n    private get hasLabel(): boolean {\n        return this.slotHasContent;\n    }\n\n    @state()\n    private get labelOnly(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public override handleSlottableRequest = (\n        event: SlottableRequestEvent\n    ): void => {\n        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n    };\n\n    protected override get buttonContent(): TemplateResult[] {\n        return [\n            html`\n                ${this.labelOnly\n                    ? html``\n                    : html`\n                          <slot\n                              name=\"icon\"\n                              slot=\"icon\"\n                              ?icon-only=${!this.hasLabel}\n                              ?hidden=${this.labelOnly}\n                          >\n                              <sp-icon-more class=\"icon\"></sp-icon-more>\n                          </slot>\n                      `}\n                <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n                <slot name=\"label-only\"></slot>\n                <slot\n                    name=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <sp-action-button\n                aria-describedby=${DESCRIPTION_ID}\n                ?quiet=${this.quiet}\n                ?selected=${this.open}\n                static=${ifDefined(this.static)}\n                aria-haspopup=\"true\"\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-label=${ifDefined(this.label || undefined)}\n                id=\"button\"\n                class=\"button\"\n                size=${this.size}\n                @blur=${this.handleButtonBlur}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n            >\n                ${this.buttonContent}\n            </sp-action-button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues<this>): void {\n        if (changedProperties.has('invalid')) {\n            this.invalid = false;\n        }\n        super.update(changedProperties);\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDACtB,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,EAAgB,cAAAC,MAAkB,kCAC3C,MAAO,6DACP,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAC7B,OAAS,yBAAAC,MAA6B,kEAc/B,aAAM,mBAAmBH,EAC5BC,EAAgBF,EAAY,OAAO,EACnC,qBACJ,CAAE,CAHK,kCASH,KAAgB,QAAgC,OAGhD,KAAO,OAAwC,OAE/C,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAU9B,KAAgB,uBACZK,GACO,CACP,KAAK,cAAc,IAAID,EAAsBC,EAAM,KAAMA,EAAM,IAAI,CAAC,CACxE,EAzBA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAgB,CAC5B,CAUA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAGA,IAAY,WAAqB,CAC7B,OAAO,KAAK,oBAChB,CAQA,IAAuB,eAAkC,CACrD,MAAO,CACHR;AAAA,kBACM,KAAK,UACDA,IACAA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,uBAI/B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA,aAGtD,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,YACL,KAAK,UAAU,SAAW,KAAK,MAE5BA;AAAA;AAAA,mCAEoBI,CAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,yBACZF,EAAU,KAAK,MAAM,CAAC;AAAA;AAAA,gCAEfA,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,KAAO,OAAS,OAAO;AAAA,6BAC/BA,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAOS,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,CApFoBC,EAAA,CADfT,EAAS,CAAE,KAAM,MAAO,CAAC,GARjB,WASO,uBAGTS,EAAA,CADNT,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAXhC,WAYF,sBASKS,EAAA,CADXX,EAAM,GApBE,WAqBG",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n *   you'd like for a selection to be held by the `sp-menu` that it presents in\n *   its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n    ObserveSlotText(PickerBase, 'label'),\n    '[slot=\"label-only\"]'\n) {\n    public static override get styles(): CSSResultArray {\n        return [actionMenuStyles];\n    }\n\n    @property({ type: String })\n    public override selects: undefined | 'single' = undefined;\n\n    /**\n     * @deprecated Use `staticColor` instead.\n     */\n    @property({ type: String, reflect: true })\n    public static: 'white' | 'black' | undefined = undefined;\n\n    @property({ reflect: true, attribute: 'static-color' })\n    public staticColor?: 'white' | 'black';\n\n    protected override listRole: 'listbox' | 'menu' = 'menu';\n    protected override itemRole = 'menuitem';\n    private get hasLabel(): boolean {\n        return this.slotHasContent;\n    }\n\n    @state()\n    private get labelOnly(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    public override handleSlottableRequest = (\n        event: SlottableRequestEvent\n    ): void => {\n        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n    };\n\n    protected override get buttonContent(): TemplateResult[] {\n        return [\n            html`\n                ${this.labelOnly\n                    ? html``\n                    : html`\n                          <slot\n                              name=\"icon\"\n                              slot=\"icon\"\n                              ?icon-only=${!this.hasLabel}\n                              ?hidden=${this.labelOnly}\n                          >\n                              <sp-icon-more class=\"icon\"></sp-icon-more>\n                          </slot>\n                      `}\n                <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n                <slot name=\"label-only\"></slot>\n                <slot\n                    name=\"tooltip\"\n                    @slotchange=${this.handleTooltipSlotchange}\n                ></slot>\n            `,\n        ];\n    }\n\n    protected override render(): TemplateResult {\n        if (this.tooltipEl) {\n            this.tooltipEl.disabled = this.open;\n        }\n        return html`\n            <sp-action-button\n                aria-describedby=${DESCRIPTION_ID}\n                ?quiet=${this.quiet}\n                ?selected=${this.open}\n                static-color=${ifDefined(this.staticColor)}\n                aria-haspopup=\"true\"\n                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-label=${ifDefined(this.label || undefined)}\n                id=\"button\"\n                class=\"button\"\n                size=${this.size}\n                @blur=${this.handleButtonBlur}\n                @focus=${this.handleButtonFocus}\n                @keydown=${{\n                    handleEvent: this.handleEnterKeydown,\n                    capture: true,\n                }}\n                ?disabled=${this.disabled}\n            >\n                ${this.buttonContent}\n            </sp-action-button>\n            ${this.renderMenu} ${this.renderDescriptionSlot}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues<this>): void {\n        if (changedProperties.has('invalid')) {\n            this.invalid = false;\n        }\n        super.update(changedProperties);\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDACtB,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,EAAgB,cAAAC,MAAkB,kCAC3C,MAAO,6DACP,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAC7B,OAAS,yBAAAC,MAA6B,kEAc/B,aAAM,mBAAmBH,EAC5BC,EAAgBF,EAAY,OAAO,EACnC,qBACJ,CAAE,CAHK,kCASH,KAAgB,QAAgC,OAMhD,KAAO,OAAwC,OAK/C,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAU9B,KAAgB,uBACZK,GACO,CACP,KAAK,cAAc,IAAID,EAAsBC,EAAM,KAAMA,EAAM,IAAI,CAAC,CACxE,EA/BA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAgB,CAC5B,CAgBA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAGA,IAAY,WAAqB,CAC7B,OAAO,KAAK,oBAChB,CAQA,IAAuB,eAAkC,CACrD,MAAO,CACHR;AAAA,kBACM,KAAK,UACDA,IACAA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,uBAI/B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA,aAGtD,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,YACL,KAAK,UAAU,SAAW,KAAK,MAE5BA;AAAA;AAAA,mCAEoBI,CAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACNF,EAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1BA,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,KAAO,OAAS,OAAO;AAAA,6BAC/BA,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAOS,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,CA1FoBC,EAAA,CADfT,EAAS,CAAE,KAAM,MAAO,CAAC,GARjB,WASO,uBAMTS,EAAA,CADNT,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdhC,WAeF,sBAGAS,EAAA,CADNT,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAjB7C,WAkBF,2BASKS,EAAA,CADXX,EAAM,GA1BE,WA2BG",
   "names": ["html", "state", "ifDefined", "property", "DESCRIPTION_ID", "PickerBase", "ObserveSlotPresence", "ObserveSlotText", "actionMenuStyles", "SlottableRequestEvent", "event", "changedProperties", "__decorateClass"]
 }

package/stories/action-menu.stories.js

@@ -102,10 +102,10 @@ export default {
         type: "boolean"
       }
     },
-    staticValue: {
-      name: "static",
+    staticColorValue: {
+      name: "static-color",
       type: { name: "string", required: false },
-      description: "The visual static variant to apply to the button.",
+      description: "The visual static color variant to apply to the button.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "none" }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["action-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';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport { ActionMenuMarkup } from './';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport default {\n    component: 'sp-action-menu',\n    title: 'Action menu',\n    argTypes: {\n        onChange: { action: 'change' },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        visibleLabel: {\n            name: 'Visible Label',\n            description: 'The placeholder content for the picker.',\n            type: { name: 'string', required: false },\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: 'text',\n        },\n        tooltipDescription: {\n            name: 'Tooltip Description',\n            type: { name: 'string', required: false },\n            description: 'Tooltip description',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        tooltipPlacement: {\n            name: 'Tooltip Placement',\n            type: { name: 'string', required: false },\n            description: 'Tooltip Placement.',\n            table: {\n                defaultValue: { summary: 'bottom' },\n            },\n            control: {\n                options: [\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'top',\n                    'bottom',\n                    'right',\n                    'left',\n                    'top-start',\n                    'top-end',\n                    'bottom-start',\n                    'bottom-end',\n                    'right-start',\n                    'right-end',\n                    'left-start',\n                    'left-end',\n                    'none',\n                ],\n                type: 'select',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description: 'Quiet rendering',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        staticValue: {\n            name: 'static',\n            type: { name: 'string', required: false },\n            description: 'The visual static variant to apply to the button.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'none' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    white: 'white',\n                    black: 'black',\n                    none: undefined,\n                },\n                options: ['white', 'black', 'none'],\n            },\n        },\n        align: {\n            name: 'align',\n            type: { name: 'string', required: false },\n            description: 'Alignment of the Action Menu',\n            table: {\n                defaultValue: { summary: 'start' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    start: 'start',\n                    end: 'end',\n                },\n            },\n            options: ['start', 'end'],\n        },\n    },\n    args: {\n        align: 'start',\n        visibleLabel: 'More Actions',\n        disabled: false,\n        open: false,\n        quiet: false,\n        tooltipDescription: '',\n        tooltipPlacement: 'bottom',\n        static: undefined,\n    },\n};\n\ninterface StoryArgs {\n    align?: 'start' | 'end';\n    visibleLabel?: string;\n    disabled?: boolean;\n    open?: boolean;\n    customIcon?: string | TemplateResult;\n    selects?: 'single';\n    selected?: boolean;\n    quiet?: boolean;\n    staticValue?: 'white' | 'black' | undefined;\n    tooltipDescription?: string | 'none';\n    tooltipPlacement?: Placement;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n    ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const staticWhite = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticWhite.args = {\n    staticValue: 'white',\n};\nstaticWhite.decorators = [makeOverBackground()];\nexport const staticBlack = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticBlack.args = {\n    staticValue: 'black',\n};\nstaticBlack.decorators = [makeOverBackground()];\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n    quiet: true,\n};\n\nexport const labelOnly = ({\n    align = 'start',\n    changeHandler = (() => undefined) as (event: Event) => void,\n    disabled = false,\n    open = false,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n} = {}): TemplateResult => html`\n    <sp-action-menu\n        ?disabled=${disabled}\n        ?open=${open}\n        size=${size}\n        @change=${(event: Event & { target: Menu }): void => {\n            navigator.clipboard.writeText(event.target.value);\n            changeHandler(event);\n        }}\n        .selects=${selects ? selects : undefined}\n        value=${selected ? 'Select Inverse' : ''}\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <span slot=\"label-only\">Label Only</span>\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item ?selected=${selected}>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-action-menu>\n`;\n\nexport const selects = (args: StoryArgs = {}): TemplateResult =>\n    Template({\n        ...args,\n        selects: 'single',\n        selected: true,\n    });\nselects.args = {\n    open: true,\n};\nselects.decorators = [isOverlayOpen];\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\niconOnly.args = {\n    visibleLabel: '',\n};\n\nexport const tooltipDescriptionAndPlacement = (\n    args: StoryArgs = {}\n): TemplateResult => Template(args);\ntooltipDescriptionAndPlacement.args = {\n    tooltipDescription: 'Your tooltip string here',\n    visibleLabel: '',\n    tooltipPlacement: 'bottom',\n} as StoryArgs;\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n    customIcon: html`\n        <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n    `,\n    visibleLabel: '',\n};\n\nexport const submenu = ({ align = 'start' } = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=\"More Actions\"\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item>One</sp-menu-item>\n            <sp-menu-item>Two</sp-menu-item>\n            <sp-menu-item>\n                Select some items\n                <sp-menu slot=\"submenu\" selects=\"multiple\">\n                    <sp-menu-item>A</sp-menu-item>\n                    <sp-menu-item selected>B</sp-menu-item>\n                    <sp-menu-item>C</sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n    `;\n};\n\nexport const controlled = ({ align = 'start' } = {}): TemplateResult => {\n    const state = {\n        snap: true,\n        grid: false,\n        guides: true,\n        latestChange: '',\n    };\n    function toggle(prop: 'snap' | 'grid' | 'guides') {\n        return (event: Event): void => {\n            const item = event.target as MenuItem;\n            state[prop] = !state[prop];\n            // in Lit-based usage, this would be handled via render():\n            // <sp-menu-item ?selected=${this.isSomethingSelected}>\n            item.selected = state[prop];\n        };\n    }\n    function onChange(event: Event): void {\n        state.latestChange = (event.target as MenuItem).value;\n        logState();\n    }\n    function logState(): void {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        document.getElementById('state-json')!.textContent =\n            `application state: ${JSON.stringify(state)}`;\n    }\n    return html`\n        <sp-action-menu\n            label=\"View\"\n            @change=${onChange}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item value=\"action\" @click=${() => alert('action')}>\n                Non-selectable action\n            </sp-menu-item>\n            <sp-menu-item\n                value=\"snap\"\n                ?selected=${state.snap}\n                @click=${toggle('snap')}\n            >\n                Snap\n            </sp-menu-item>\n            <sp-menu-item>\n                Show\n                <sp-menu\n                    slot=\"submenu\"\n                    selects=\"multiple\"\n                    @change=${(event: Event) => event.preventDefault()}\n                >\n                    <sp-menu-item\n                        value=\"grid\"\n                        ?selected=${state.grid}\n                        @click=${toggle('grid')}\n                    >\n                        Grid\n                    </sp-menu-item>\n                    <sp-menu-item\n                        value=\"guides\"\n                        ?selected=${state.guides}\n                        @click=${toggle('guides')}\n                    >\n                        Guides\n                    </sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n        <span id=\"state-json\"></span>\n    `;\n};\n\nexport const groups = ({\n    align = 'start',\n    onChange,\n}: {\n    align: 'start' | 'end';\n    onChange(value: string): void;\n}): TemplateResult => html`\n    <sp-action-menu\n        @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n            onChange(value)}\n        open\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <sp-menu-group id=\"cms\">\n            <span slot=\"header\">cms</span>\n            <sp-menu-item value=\"updateAllSiteContent\">\n                Update All Content\n            </sp-menu-item>\n            <sp-menu-item value=\"refreshAllXDs\">Refresh All XDs</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"ssg\">\n            <span slot=\"header\">ssg</span>\n            <sp-menu-item value=\"clearCache\">Clear Cache</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"vrt\">\n            <span slot=\"header\">vrt</span>\n            <sp-menu-item value=\"vrt-contributions\">Contributions</sp-menu-item>\n            <sp-menu-item value=\"vrt-internal\">Internal</sp-menu-item>\n            <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n            <sp-menu-item value=\"vrt-patterns\">Patterns</sp-menu-item>\n            <sp-menu-item value=\"vrt\">All</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-divider></sp-menu-divider>\n        <sp-menu-group id=\"misc\">\n            <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n        </sp-menu-group>\n    </sp-action-menu>\n`;\n\ngroups.decorators = [isOverlayOpen];\n\nexport const groupsWithSelects = ({\n    onChange,\n}: {\n    onChange(value: string): void;\n}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n                onChange(value)}\n            label=\"Filter or Sort\"\n        >\n            <sp-menu-group selects=\"single\">\n                <span slot=\"header\">Sort By</span>\n                <sp-menu-item>Name</sp-menu-item>\n                <sp-menu-item>Created</sp-menu-item>\n                <sp-menu-item>Modified</sp-menu-item>\n            </sp-menu-group>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-group selects=\"multiple\">\n                <sp-menu-item>Reverse Order</sp-menu-item>\n            </sp-menu-group>\n        </sp-action-menu>\n    `;\n};\n\ngroupsWithSelects.swc_vrt = {\n    skip: true,\n};\n\nexport const directive = (): TemplateResult => {\n    const renderSubmenu = (): TemplateResult => html`\n        <sp-menu-item>Submenu Item 1</sp-menu-item>\n        <sp-menu-item>Submenu Item 2</sp-menu-item>\n        <sp-menu-item>Submenu Item 3</sp-menu-item>\n        <sp-menu-item>Submenu Item 4</sp-menu-item>\n    `;\n    const renderOptions = (): TemplateResult => html`\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item>Select Inverse</sp-menu-item>\n        <sp-menu-item>\n            Feather...\n            <sp-menu\n                slot=\"submenu\"\n                ${slottableRequest(renderSubmenu)}\n            ></sp-menu>\n        </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    `;\n    return html`\n        <sp-action-menu ${slottableRequest(renderOptions)}>\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n        </sp-action-menu>\n    `;\n};\n\ndirective.swc_vrt = {\n    skip: true,\n};\n\nexport const withScrollEvent = (): TemplateResult => {\n    function handleActionMenuScroll(): void {\n        console.log('attached action menu scroll listener');\n    }\n\n    function renderMenuItems(): TemplateResult[] {\n        return Array.from(\n            { length: 30 },\n            (_, i) => html`\n                <sp-menu-item style=\"width: 100%;\">\n                    This is an Action Menu Item ${i + 1}\n                </sp-menu-item>\n            `\n        );\n    }\n\n    return html`\n        <sp-action-menu @scroll=${handleActionMenuScroll} open>\n            <span slot=\"label\">This is an Action Menu</span>\n            ${renderMenuItems()}\n        </sp-action-menu>\n    `;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport { ActionMenuMarkup } from './';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport default {\n    component: 'sp-action-menu',\n    title: 'Action menu',\n    argTypes: {\n        onChange: { action: 'change' },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        visibleLabel: {\n            name: 'Visible Label',\n            description: 'The placeholder content for the picker.',\n            type: { name: 'string', required: false },\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: 'text',\n        },\n        tooltipDescription: {\n            name: 'Tooltip Description',\n            type: { name: 'string', required: false },\n            description: 'Tooltip description',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        tooltipPlacement: {\n            name: 'Tooltip Placement',\n            type: { name: 'string', required: false },\n            description: 'Tooltip Placement.',\n            table: {\n                defaultValue: { summary: 'bottom' },\n            },\n            control: {\n                options: [\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'top',\n                    'bottom',\n                    'right',\n                    'left',\n                    'top-start',\n                    'top-end',\n                    'bottom-start',\n                    'bottom-end',\n                    'right-start',\n                    'right-end',\n                    'left-start',\n                    'left-end',\n                    'none',\n                ],\n                type: 'select',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description: 'Quiet rendering',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        staticColorValue: {\n            name: 'static-color',\n            type: { name: 'string', required: false },\n            description:\n                'The visual static color variant to apply to the button.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'none' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    white: 'white',\n                    black: 'black',\n                    none: undefined,\n                },\n                options: ['white', 'black', 'none'],\n            },\n        },\n        align: {\n            name: 'align',\n            type: { name: 'string', required: false },\n            description: 'Alignment of the Action Menu',\n            table: {\n                defaultValue: { summary: 'start' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    start: 'start',\n                    end: 'end',\n                },\n            },\n            options: ['start', 'end'],\n        },\n    },\n    args: {\n        align: 'start',\n        visibleLabel: 'More Actions',\n        disabled: false,\n        open: false,\n        quiet: false,\n        tooltipDescription: '',\n        tooltipPlacement: 'bottom',\n        static: undefined,\n    },\n};\n\ninterface StoryArgs {\n    align?: 'start' | 'end';\n    visibleLabel?: string;\n    disabled?: boolean;\n    open?: boolean;\n    customIcon?: string | TemplateResult;\n    selects?: 'single';\n    selected?: boolean;\n    quiet?: boolean;\n    staticValue?: 'white' | 'black' | undefined;\n    tooltipDescription?: string | 'none';\n    tooltipPlacement?: Placement;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n    ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const staticWhite = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticWhite.args = {\n    staticValue: 'white',\n};\nstaticWhite.decorators = [makeOverBackground()];\nexport const staticBlack = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticBlack.args = {\n    staticValue: 'black',\n};\nstaticBlack.decorators = [makeOverBackground()];\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n    quiet: true,\n};\n\nexport const labelOnly = ({\n    align = 'start',\n    changeHandler = (() => undefined) as (event: Event) => void,\n    disabled = false,\n    open = false,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n} = {}): TemplateResult => html`\n    <sp-action-menu\n        ?disabled=${disabled}\n        ?open=${open}\n        size=${size}\n        @change=${(event: Event & { target: Menu }): void => {\n            navigator.clipboard.writeText(event.target.value);\n            changeHandler(event);\n        }}\n        .selects=${selects ? selects : undefined}\n        value=${selected ? 'Select Inverse' : ''}\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <span slot=\"label-only\">Label Only</span>\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item ?selected=${selected}>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-action-menu>\n`;\n\nexport const selects = (args: StoryArgs = {}): TemplateResult =>\n    Template({\n        ...args,\n        selects: 'single',\n        selected: true,\n    });\nselects.args = {\n    open: true,\n};\nselects.decorators = [isOverlayOpen];\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\niconOnly.args = {\n    visibleLabel: '',\n};\n\nexport const tooltipDescriptionAndPlacement = (\n    args: StoryArgs = {}\n): TemplateResult => Template(args);\ntooltipDescriptionAndPlacement.args = {\n    tooltipDescription: 'Your tooltip string here',\n    visibleLabel: '',\n    tooltipPlacement: 'bottom',\n} as StoryArgs;\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n    customIcon: html`\n        <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n    `,\n    visibleLabel: '',\n};\n\nexport const submenu = ({ align = 'start' } = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=\"More Actions\"\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item>One</sp-menu-item>\n            <sp-menu-item>Two</sp-menu-item>\n            <sp-menu-item>\n                Select some items\n                <sp-menu slot=\"submenu\" selects=\"multiple\">\n                    <sp-menu-item>A</sp-menu-item>\n                    <sp-menu-item selected>B</sp-menu-item>\n                    <sp-menu-item>C</sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n    `;\n};\n\nexport const controlled = ({ align = 'start' } = {}): TemplateResult => {\n    const state = {\n        snap: true,\n        grid: false,\n        guides: true,\n        latestChange: '',\n    };\n    function toggle(prop: 'snap' | 'grid' | 'guides') {\n        return (event: Event): void => {\n            const item = event.target as MenuItem;\n            state[prop] = !state[prop];\n            // in Lit-based usage, this would be handled via render():\n            // <sp-menu-item ?selected=${this.isSomethingSelected}>\n            item.selected = state[prop];\n        };\n    }\n    function onChange(event: Event): void {\n        state.latestChange = (event.target as MenuItem).value;\n        logState();\n    }\n    function logState(): void {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        document.getElementById('state-json')!.textContent =\n            `application state: ${JSON.stringify(state)}`;\n    }\n    return html`\n        <sp-action-menu\n            label=\"View\"\n            @change=${onChange}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item value=\"action\" @click=${() => alert('action')}>\n                Non-selectable action\n            </sp-menu-item>\n            <sp-menu-item\n                value=\"snap\"\n                ?selected=${state.snap}\n                @click=${toggle('snap')}\n            >\n                Snap\n            </sp-menu-item>\n            <sp-menu-item>\n                Show\n                <sp-menu\n                    slot=\"submenu\"\n                    selects=\"multiple\"\n                    @change=${(event: Event) => event.preventDefault()}\n                >\n                    <sp-menu-item\n                        value=\"grid\"\n                        ?selected=${state.grid}\n                        @click=${toggle('grid')}\n                    >\n                        Grid\n                    </sp-menu-item>\n                    <sp-menu-item\n                        value=\"guides\"\n                        ?selected=${state.guides}\n                        @click=${toggle('guides')}\n                    >\n                        Guides\n                    </sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n        <span id=\"state-json\"></span>\n    `;\n};\n\nexport const groups = ({\n    align = 'start',\n    onChange,\n}: {\n    align: 'start' | 'end';\n    onChange(value: string): void;\n}): TemplateResult => html`\n    <sp-action-menu\n        @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n            onChange(value)}\n        open\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <sp-menu-group id=\"cms\">\n            <span slot=\"header\">cms</span>\n            <sp-menu-item value=\"updateAllSiteContent\">\n                Update All Content\n            </sp-menu-item>\n            <sp-menu-item value=\"refreshAllXDs\">Refresh All XDs</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"ssg\">\n            <span slot=\"header\">ssg</span>\n            <sp-menu-item value=\"clearCache\">Clear Cache</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"vrt\">\n            <span slot=\"header\">vrt</span>\n            <sp-menu-item value=\"vrt-contributions\">Contributions</sp-menu-item>\n            <sp-menu-item value=\"vrt-internal\">Internal</sp-menu-item>\n            <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n            <sp-menu-item value=\"vrt-patterns\">Patterns</sp-menu-item>\n            <sp-menu-item value=\"vrt\">All</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-divider></sp-menu-divider>\n        <sp-menu-group id=\"misc\">\n            <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n        </sp-menu-group>\n    </sp-action-menu>\n`;\n\ngroups.decorators = [isOverlayOpen];\n\nexport const groupsWithSelects = ({\n    onChange,\n}: {\n    onChange(value: string): void;\n}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n                onChange(value)}\n            label=\"Filter or Sort\"\n        >\n            <sp-menu-group selects=\"single\">\n                <span slot=\"header\">Sort By</span>\n                <sp-menu-item>Name</sp-menu-item>\n                <sp-menu-item>Created</sp-menu-item>\n                <sp-menu-item>Modified</sp-menu-item>\n            </sp-menu-group>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-group selects=\"multiple\">\n                <sp-menu-item>Reverse Order</sp-menu-item>\n            </sp-menu-group>\n        </sp-action-menu>\n    `;\n};\n\ngroupsWithSelects.swc_vrt = {\n    skip: true,\n};\n\nexport const directive = (): TemplateResult => {\n    const renderSubmenu = (): TemplateResult => html`\n        <sp-menu-item>Submenu Item 1</sp-menu-item>\n        <sp-menu-item>Submenu Item 2</sp-menu-item>\n        <sp-menu-item>Submenu Item 3</sp-menu-item>\n        <sp-menu-item>Submenu Item 4</sp-menu-item>\n    `;\n    const renderOptions = (): TemplateResult => html`\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item>Select Inverse</sp-menu-item>\n        <sp-menu-item>\n            Feather...\n            <sp-menu\n                slot=\"submenu\"\n                ${slottableRequest(renderSubmenu)}\n            ></sp-menu>\n        </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    `;\n    return html`\n        <sp-action-menu ${slottableRequest(renderOptions)}>\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n        </sp-action-menu>\n    `;\n};\n\ndirective.swc_vrt = {\n    skip: true,\n};\n\nexport const withScrollEvent = (): TemplateResult => {\n    function handleActionMenuScroll(): void {\n        console.log('attached action menu scroll listener');\n    }\n\n    function renderMenuItems(): TemplateResult[] {\n        return Array.from(\n            { length: 30 },\n            (_, i) => html`\n                <sp-menu-item style=\"width: 100%;\">\n                    This is an Action Menu Item ${i + 1}\n                </sp-menu-item>\n            `\n        );\n    }\n\n    return html`\n        <sp-action-menu @scroll=${handleActionMenuScroll} open>\n            <span slot=\"label\">This is an Action Menu</span>\n            ${renderMenuItems()}\n        </sp-action-menu>\n    `;\n};\n"],
+  "mappings": "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",
   "names": ["selects"]
 }

package/stories/index.js

@@ -29,7 +29,7 @@ export const ActionMenuMarkup = ({
             ?disabled=${disabled}
             ?open=${open}
             ?quiet=${quiet}
-            static=${ifDefined(
+            static-color=${ifDefined(
     staticValue === "none" ? void 0 : staticValue
   )}
             size=${size}

package/stories/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport const ActionMenuMarkup = ({\n    align = 'start',\n    ariaLabel = 'More Actions',\n    onChange = (() => undefined) as (value: string) => void,\n    changeHandler = (() => undefined) as (value: string) => void,\n    disabled = false,\n    open = false,\n    quiet = false,\n    staticValue = '',\n    visibleLabel = '',\n    customIcon = '' as string | TemplateResult,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n    tooltipDescription = '',\n    tooltipPlacement = 'bottom' as Placement,\n} = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=${ariaLabel}\n            ?disabled=${disabled}\n            ?open=${open}\n            ?quiet=${quiet}\n            static=${ifDefined(\n                staticValue === 'none'\n                    ? undefined\n                    : (staticValue as 'black' | 'white')\n            )}\n            size=${size}\n            @change=${(event: Event & { target: ActionMenu }) => {\n                changeHandler(event.target.value);\n                onChange(event.target.value);\n            }}\n            .selects=${selects ? selects : undefined}\n            value=${selected ? 'Select Inverse' : ''}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            ${customIcon ? customIcon : nothing}\n            ${visibleLabel\n                ? html`\n                      <span slot=\"label\">${visibleLabel}</span>\n                  `\n                : nothing}\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item ?selected=${selected}>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            ${tooltipDescription\n                ? html`\n                      <sp-tooltip\n                          slot=\"tooltip\"\n                          self-managed\n                          placement=${tooltipPlacement}\n                      >\n                          ${tooltipDescription}\n                      </sp-tooltip>\n                  `\n                : html``}\n        </sp-action-menu>\n    `;\n};\n"],
-  "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,MAAM,eAA+B;AAE9C,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAIA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAY,MAAM;AAAA,EAClB,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,mBAAmB;AACvB,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA;AAAA,oBAES,SAAS;AAAA,wBACL,QAAQ;AAAA,oBACZ,IAAI;AAAA,qBACH,KAAK;AAAA,qBACL;AAAA,IACL,gBAAgB,SACV,SACC;AAAA,EACX,CAAC;AAAA,mBACM,IAAI;AAAA,sBACD,CAAC,UAA0C;AACjD,kBAAc,MAAM,OAAO,KAAK;AAChC,aAAS,MAAM,OAAO,KAAK;AAAA,EAC/B,CAAC;AAAA,uBACU,UAAU,UAAU,MAAS;AAAA,oBAChC,WAAW,mBAAmB,EAAE;AAAA,oBAChC;AAAA,IACJ,UAAU,QAAQ,uBAAuB;AAAA,EAC7C,CAAC;AAAA;AAAA,cAEC,aAAa,aAAa,OAAO;AAAA,cACjC,eACI;AAAA,2CACyB,YAAY;AAAA,sBAErC,OAAO;AAAA;AAAA,sCAEa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMhC,qBACI;AAAA;AAAA;AAAA;AAAA,sCAIoB,gBAAgB;AAAA;AAAA,4BAE1B,kBAAkB;AAAA;AAAA,sBAG5B,MAAM;AAAA;AAAA;AAGxB;",
+  "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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport const ActionMenuMarkup = ({\n    align = 'start',\n    ariaLabel = 'More Actions',\n    onChange = (() => undefined) as (value: string) => void,\n    changeHandler = (() => undefined) as (value: string) => void,\n    disabled = false,\n    open = false,\n    quiet = false,\n    staticValue = '',\n    visibleLabel = '',\n    customIcon = '' as string | TemplateResult,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n    tooltipDescription = '',\n    tooltipPlacement = 'bottom' as Placement,\n} = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=${ariaLabel}\n            ?disabled=${disabled}\n            ?open=${open}\n            ?quiet=${quiet}\n            static-color=${ifDefined(\n                staticValue === 'none'\n                    ? undefined\n                    : (staticValue as 'black' | 'white')\n            )}\n            size=${size}\n            @change=${(event: Event & { target: ActionMenu }) => {\n                changeHandler(event.target.value);\n                onChange(event.target.value);\n            }}\n            .selects=${selects ? selects : undefined}\n            value=${selected ? 'Select Inverse' : ''}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            ${customIcon ? customIcon : nothing}\n            ${visibleLabel\n                ? html`\n                      <span slot=\"label\">${visibleLabel}</span>\n                  `\n                : nothing}\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item ?selected=${selected}>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            ${tooltipDescription\n                ? html`\n                      <sp-tooltip\n                          slot=\"tooltip\"\n                          self-managed\n                          placement=${tooltipPlacement}\n                      >\n                          ${tooltipDescription}\n                      </sp-tooltip>\n                  `\n                : html``}\n        </sp-action-menu>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,MAAM,eAA+B;AAE9C,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAIA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAY,MAAM;AAAA,EAClB,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,mBAAmB;AACvB,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA;AAAA,oBAES,SAAS;AAAA,wBACL,QAAQ;AAAA,oBACZ,IAAI;AAAA,qBACH,KAAK;AAAA,2BACC;AAAA,IACX,gBAAgB,SACV,SACC;AAAA,EACX,CAAC;AAAA,mBACM,IAAI;AAAA,sBACD,CAAC,UAA0C;AACjD,kBAAc,MAAM,OAAO,KAAK;AAChC,aAAS,MAAM,OAAO,KAAK;AAAA,EAC/B,CAAC;AAAA,uBACU,UAAU,UAAU,MAAS;AAAA,oBAChC,WAAW,mBAAmB,EAAE;AAAA,oBAChC;AAAA,IACJ,UAAU,QAAQ,uBAAuB;AAAA,EAC7C,CAAC;AAAA;AAAA,cAEC,aAAa,aAAa,OAAO;AAAA,cACjC,eACI;AAAA,2CACyB,YAAY;AAAA,sBAErC,OAAO;AAAA;AAAA,sCAEa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMhC,qBACI;AAAA;AAAA;AAAA;AAAA,sCAIoB,gBAAgB;AAAA;AAAA,4BAE1B,kBAAkB;AAAA;AAAA,sBAG5B,MAAM;AAAA;AAAA;AAGxB;",
   "names": []
 }

package/custom-elements.json

@@ -1,178 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "sp-action-menu.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sp-action-menu",
-          "declaration": {
-            "name": "ActionMenu",
-            "module": "/src/ActionMenu.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "sync/sp-action-menu.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/ActionMenu.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ActionMenu",
-          "slots": [
-            {
-              "description": "menu items to be listed in the Action Menu",
-              "name": ""
-            },
-            {
-              "description": "The icon to use for the Action Menu",
-              "name": "icon"
-            },
-            {
-              "description": "The label to use for the Action Menu",
-              "name": "label"
-            },
-            {
-              "description": "The label to use for the Action Menu (no icon space reserved)",
-              "name": "label-only"
-            },
-            {
-              "description": "Tooltip to be applied to the Action Button",
-              "name": "tooltip"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "selects",
-              "type": {
-                "text": "undefined | 'single'"
-              },
-              "privacy": "public",
-              "default": "undefined",
-              "attribute": "selects"
-            },
-            {
-              "kind": "field",
-              "name": "static",
-              "type": {
-                "text": "'white' | 'black' | undefined"
-              },
-              "privacy": "public",
-              "default": "undefined",
-              "attribute": "static",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "listRole",
-              "type": {
-                "text": "'listbox' | 'menu'"
-              },
-              "privacy": "protected",
-              "default": "'menu'"
-            },
-            {
-              "kind": "field",
-              "name": "itemRole",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "'menuitem'"
-            },
-            {
-              "kind": "field",
-              "name": "hasLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "labelOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "handleSlottableRequest",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "buttonContent",
-              "type": {
-                "text": "TemplateResult[]"
-              },
-              "privacy": "protected",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "description": "By default `sp-action-menu` does not manage a selection. If you'd like for a selection to be held by the `sp-menu` that it presents in its overlay, use `selects=\"single\" to activate this functionality.",
-              "name": "selects",
-              "type": {
-                "text": "undefined | 'single'"
-              },
-              "default": "undefined",
-              "fieldName": "selects"
-            },
-            {
-              "name": "static",
-              "type": {
-                "text": "'white' | 'black' | undefined"
-              },
-              "default": "undefined",
-              "fieldName": "static"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ObserveSlotPresence",
-              "package": "@spectrum-web-components/shared/src/observe-slot-presence.js"
-            },
-            {
-              "name": "ObserveSlotText",
-              "package": "@spectrum-web-components/shared/src/observe-slot-text.js"
-            }
-          ],
-          "superclass": {
-            "name": "PickerBase",
-            "package": "@spectrum-web-components/picker"
-          },
-          "tagName": "sp-action-menu",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ActionMenu",
-          "declaration": {
-            "name": "ActionMenu",
-            "module": "src/ActionMenu.js"
-          }
-        }
-      ]
-    }
-  ]
-}