@spectrum-web-components/button 0.40.1 → 0.40.3

package/README.md

@@ -285,10 +285,11 @@ The `treatment` attribute accepts `fill` and `outline` as values, and defaults t
 
 ## States
 
-In addition to the variant, `<sp-button>` elements have a disabled state visual state
-which can be applied by adding the attribute `disabled`. All `<sp-button>`
-variants support this. In addition to affectng the visual state, the `disabled`
-attribute prevents focus and disallows `click` events.
+In addition to the variant, `<sp-button>` elements support two different visual states, disabled and pending, which can be applied by adding the attribute `disabled` or `pending` respectively. All `<sp-button>` variants support these states.
+
+### Disabled
+
+While disabled, `<sp-button>` elements will not respond to click events and will appear faded.
 
 ```html
 <sp-button-group>
@@ -297,6 +298,21 @@ attribute prevents focus and disallows `click` events.
 </sp-button-group>
 ```
 
+### Pending
+
+While in pending state, `<sp-button>` elements will not respond to click events and will appear faded with an indeterminent `<sp-progress-circle>`.
+`<sp-button>` elements label and icon will be hidden while in pending state.
+
+Note: `pending` state of the `<sp-button>` element is applied after 1s delay to avoid flashing the pending state for quick actions.
+You can override the delay by adding custom css var `--pending-delay` to your css.
+
+```html
+<sp-button-group>
+    <sp-button variant="primary">Normal</sp-button>
+    <sp-button variant="primary" pending>Pending</sp-button>
+</sp-button-group>
+```
+
 ## Handling events
 
 Events handlers for clicks and other user actions can be registered on a

package/custom-elements.json

@@ -82,6 +82,50 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "pendingLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Pending'",
+              "attribute": "pending-label"
+            },
+            {
+              "kind": "field",
+              "name": "pending",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "pending",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cachedAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ButtonBase",
+                "module": "src/ButtonBase.js"
+              }
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -133,6 +177,20 @@
               },
               "attribute": "quiet"
             },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ButtonBase",
+                "module": "src/ButtonBase.js"
+              }
+            },
             {
               "kind": "field",
               "name": "active",
@@ -213,20 +271,6 @@
                 "module": "src/ButtonBase.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "click",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "ButtonBase",
-                "module": "src/ButtonBase.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleClickCapture",
@@ -291,20 +335,6 @@
                 "module": "src/ButtonBase.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderButton",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "ButtonBase",
-                "module": "src/ButtonBase.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleKeydown",
@@ -415,6 +445,22 @@
             }
           ],
           "attributes": [
+            {
+              "name": "pending-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Pending'",
+              "fieldName": "pendingLabel"
+            },
+            {
+              "name": "pending",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "pending"
+            },
             {
               "name": "variant",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/button",
-    "version": "0.40.1",
+    "version": "0.40.3",
     "publishConfig": {
         "access": "public"
     },
@@ -82,15 +82,15 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.40.1",
-        "@spectrum-web-components/clear-button": "^0.40.1",
-        "@spectrum-web-components/close-button": "^0.40.1",
-        "@spectrum-web-components/icon": "^0.40.1",
-        "@spectrum-web-components/icons-ui": "^0.40.1",
-        "@spectrum-web-components/shared": "^0.40.1"
+        "@spectrum-web-components/base": "^0.40.3",
+        "@spectrum-web-components/clear-button": "^0.40.3",
+        "@spectrum-web-components/close-button": "^0.40.3",
+        "@spectrum-web-components/icon": "^0.40.3",
+        "@spectrum-web-components/icons-ui": "^0.40.3",
+        "@spectrum-web-components/shared": "^0.40.3"
     },
     "devDependencies": {
-        "@spectrum-css/button": "^11.0.8"
+        "@spectrum-css/button": "^11.0.18"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -98,5 +98,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "a75c4f83094c505d64658dbc7de20b5f18a8fde1"
+    "gitHead": "76467a3470aeafa4beefce1e4fc76341f1d6733f"
 }

package/src/Button.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultArray, PropertyValues } from '@spectrum-web-components/base';
+import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
 export declare type DeprecatedButtonVariants = 'cta' | 'overBackground';
 export declare type ButtonStatics = 'white' | 'black';
@@ -18,6 +18,10 @@ declare const Button_base: typeof ButtonBase & {
  */
 export declare class Button extends Button_base {
     static get styles(): CSSResultArray;
+    pendingLabel: string;
+    pending: boolean;
+    private cachedAriaLabel;
+    click(): void;
     /**
      * The visual variant to apply to this button.
      */
@@ -35,5 +39,7 @@ export declare class Button extends Button_base {
     set quiet(quiet: boolean);
     get quiet(): boolean;
     protected firstUpdated(changes: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues): void;
+    protected renderButton(): TemplateResult;
 }
 export {};

package/src/Button.dev.js

@@ -11,11 +11,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 import {
+  html,
   SizedMixin
 } from "@spectrum-web-components/base";
 import { property } from "@spectrum-web-components/base/src/decorators.js";
 import { ButtonBase } from "./ButtonBase.dev.js";
 import buttonStyles from "./button.css.js";
+import { when } from "@spectrum-web-components/base/src/directives.js";
 export const VALID_VARIANTS = [
   "accent",
   "primary",
@@ -28,12 +30,21 @@ export const VALID_STATICS = ["white", "black"];
 export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
   constructor() {
     super(...arguments);
+    this.pendingLabel = "Pending";
+    this.pending = false;
+    this.cachedAriaLabel = null;
     this._variant = "accent";
     this.treatment = "fill";
   }
   static get styles() {
     return [...super.styles, buttonStyles];
   }
+  click() {
+    if (this.pending) {
+      return;
+    }
+    super.click();
+  }
   get variant() {
     return this._variant;
   }
@@ -100,7 +111,55 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
       this.setAttribute("variant", this.variant);
     }
   }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("pending")) {
+      if (this.pending && this.pendingLabel !== this.getAttribute("aria-label")) {
+        if (!this.disabled) {
+          this.cachedAriaLabel = this.getAttribute("aria-label") || "";
+          this.setAttribute("aria-label", this.pendingLabel);
+        }
+      } else if (!this.pending && this.cachedAriaLabel) {
+        this.setAttribute("aria-label", this.cachedAriaLabel);
+      } else if (!this.pending && this.cachedAriaLabel === "") {
+        this.removeAttribute("aria-label");
+      }
+    }
+    if (changed.has("disabled")) {
+      if (!this.disabled && this.pendingLabel !== this.getAttribute("aria-label")) {
+        if (this.pending) {
+          this.cachedAriaLabel = this.getAttribute("aria-label") || "";
+          this.setAttribute("aria-label", this.pendingLabel);
+        }
+      } else if (this.disabled && this.cachedAriaLabel) {
+        this.setAttribute("aria-label", this.cachedAriaLabel);
+      } else if (this.disabled && this.cachedAriaLabel == "") {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+  renderButton() {
+    return html`
+            ${this.buttonContent}
+            ${when(this.pending, () => {
+      import("@spectrum-web-components/progress-circle/sp-progress-circle.js");
+      return html`
+                    <sp-progress-circle
+                        indeterminate
+                        static="white"
+                        aria-hidden="true"
+                    ></sp-progress-circle>
+                `;
+    })}
+        `;
+  }
 }
+__decorateClass([
+  property({ type: String, attribute: "pending-label" })
+], Button.prototype, "pendingLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: true })
+], Button.prototype, "pending", 2);
 __decorateClass([
   property()
 ], Button.prototype, "variant", 1);

package/src/Button.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Button.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    PropertyValues,\n    SizedMixin,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.dev.js'\nimport buttonStyles from './button.css.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n    | 'accent'\n    | 'primary'\n    | 'secondary'\n    | 'negative'\n    | ButtonStatics\n    | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n    'accent',\n    'primary',\n    'secondary',\n    'negative',\n    'white',\n    'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, buttonStyles];\n    }\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property()\n    public get variant(): ButtonVariants {\n        return this._variant;\n    }\n    public set variant(variant: ButtonVariants) {\n        if (variant === this.variant) return;\n\n        this.requestUpdate('variant', this.variant);\n        switch (variant) {\n            case 'cta':\n                this._variant = 'accent';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n                    );\n                }\n                break;\n            case 'overBackground':\n                this.removeAttribute('variant');\n                this.static = 'white';\n                this.treatment = 'outline';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case 'white':\n            case 'black':\n                this.static = variant;\n                this.removeAttribute('variant');\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case null:\n                return;\n            default:\n                if (!VALID_VARIANTS.includes(variant)) {\n                    this._variant = 'accent';\n                } else {\n                    this._variant = variant;\n                }\n                break;\n        }\n        this.setAttribute('variant', this.variant);\n    }\n    private _variant: ButtonVariants = 'accent';\n\n    @property({ type: String, reflect: true })\n    public static: 'black' | 'white' | undefined;\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property({ reflect: true })\n    public treatment: ButtonTreatments = 'fill';\n\n    /**\n     * Style this button to be less obvious\n     */\n    @property({ type: Boolean })\n    public set quiet(quiet: boolean) {\n        this.treatment = quiet ? 'outline' : 'fill';\n    }\n\n    public get quiet(): boolean {\n        return this.treatment === 'outline';\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        // There is no Spectrum design context for an `<sp-button>` without a variant\n        // apply one manually when a consumer has not applied one themselves.\n        if (!this.hasAttribute('variant')) {\n            this.setAttribute('variant', this.variant);\n        }\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAGI;AAAA,OACG;AACP,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,OAAO,kBAAkB;AAWlB,aAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AACO,aAAM,gBAAgB,CAAC,SAAS,OAAO;AAUvC,aAAM,eAAe,WAAW,YAAY,EAAE,eAAe,KAAK,CAAC,EAAE;AAAA,EAArE;AAAA;AA+DH,SAAQ,WAA2B;AASnC,SAAO,YAA8B;AAAA;AAAA,EAvErC,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,YAAY;AAAA,EACzC;AAAA,EAMA,IAAW,UAA0B;AACjC,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAW,QAAQ,SAAyB;AACxC,QAAI,YAAY,KAAK;AAAS;AAE9B,SAAK,cAAc,WAAW,KAAK,OAAO;AAC1C,YAAQ,SAAS;AAAA,MACb,KAAK;AACD,aAAK,WAAW;AAChB,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,kDAAkD,KAAK,SAAS;AAAA,YAChE;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AACD,aAAK,gBAAgB,SAAS;AAC9B,aAAK,SAAS;AACd,aAAK,YAAY;AACjB,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,6DAA6D,KAAK,SAAS;AAAA,YAC3E;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AACD,aAAK,SAAS;AACd,aAAK,gBAAgB,SAAS;AAC9B,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,iEAAiE,KAAK,SAAS;AAAA,YAC/E;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AACD;AAAA,MACJ;AACI,YAAI,CAAC,eAAe,SAAS,OAAO,GAAG;AACnC,eAAK,WAAW;AAAA,QACpB,OAAO;AACH,eAAK,WAAW;AAAA,QACpB;AACA;AAAA,IACR;AACA,SAAK,aAAa,WAAW,KAAK,OAAO;AAAA,EAC7C;AAAA,EAgBA,IAAW,MAAM,OAAgB;AAC7B,SAAK,YAAY,QAAQ,YAAY;AAAA,EACzC;AAAA,EAEA,IAAW,QAAiB;AACxB,WAAO,KAAK,cAAc;AAAA,EAC9B;AAAA,EAEmB,aAAa,SAAqC;AACjE,UAAM,aAAa,OAAO;AAG1B,QAAI,CAAC,KAAK,aAAa,SAAS,GAAG;AAC/B,WAAK,aAAa,WAAW,KAAK,OAAO;AAAA,IAC7C;AAAA,EACJ;AACJ;AArFe;AAAA,EADV,SAAS;AAAA,GARD,OASE;AAyDJ;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjEhC,OAkEF;AAMA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvElB,OAwEF;AAMI;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA7ElB,OA8EE;",
+  "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    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.dev.js'\nimport buttonStyles from './button.css.js';\nimport { when } from '@spectrum-web-components/base/src/directives.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n    | 'accent'\n    | 'primary'\n    | 'secondary'\n    | 'negative'\n    | ButtonStatics\n    | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n    'accent',\n    'primary',\n    'secondary',\n    'negative',\n    'white',\n    'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, buttonStyles];\n    }\n\n    @property({ type: String, attribute: 'pending-label' })\n    public pendingLabel = 'Pending';\n\n    // pending is the property that consumers can use to set the button into a pending state\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public pending = false;\n\n    private cachedAriaLabel: string | null = null;\n\n    public override click(): void {\n        if (this.pending) {\n            return;\n        }\n        super.click();\n    }\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property()\n    public get variant(): ButtonVariants {\n        return this._variant;\n    }\n    public set variant(variant: ButtonVariants) {\n        if (variant === this.variant) return;\n\n        this.requestUpdate('variant', this.variant);\n        switch (variant) {\n            case 'cta':\n                this._variant = 'accent';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n                    );\n                }\n                break;\n            case 'overBackground':\n                this.removeAttribute('variant');\n                this.static = 'white';\n                this.treatment = 'outline';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case 'white':\n            case 'black':\n                this.static = variant;\n                this.removeAttribute('variant');\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case null:\n                return;\n            default:\n                if (!VALID_VARIANTS.includes(variant)) {\n                    this._variant = 'accent';\n                } else {\n                    this._variant = variant;\n                }\n                break;\n        }\n        this.setAttribute('variant', this.variant);\n    }\n    private _variant: ButtonVariants = 'accent';\n\n    @property({ type: String, reflect: true })\n    public static: 'black' | 'white' | undefined;\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property({ reflect: true })\n    public treatment: ButtonTreatments = 'fill';\n\n    /**\n     * Style this button to be less obvious\n     */\n    @property({ type: Boolean })\n    public set quiet(quiet: boolean) {\n        this.treatment = quiet ? 'outline' : 'fill';\n    }\n\n    public get quiet(): boolean {\n        return this.treatment === 'outline';\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        // There is no Spectrum design context for an `<sp-button>` without a variant\n        // apply one manually when a consumer has not applied one themselves.\n        if (!this.hasAttribute('variant')) {\n            this.setAttribute('variant', this.variant);\n        }\n    }\n\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n\n        if (changed.has('pending')) {\n            if (\n                this.pending &&\n                this.pendingLabel !== this.getAttribute('aria-label')\n            ) {\n                if (!this.disabled) {\n                    this.cachedAriaLabel =\n                        this.getAttribute('aria-label') || '';\n                    this.setAttribute('aria-label', this.pendingLabel);\n                }\n            } else if (!this.pending && this.cachedAriaLabel) {\n                this.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!this.pending && this.cachedAriaLabel === '') {\n                this.removeAttribute('aria-label');\n            }\n        }\n\n        if (changed.has('disabled')) {\n            if (\n                !this.disabled &&\n                this.pendingLabel !== this.getAttribute('aria-label')\n            ) {\n                if (this.pending) {\n                    this.cachedAriaLabel =\n                        this.getAttribute('aria-label') || '';\n                    this.setAttribute('aria-label', this.pendingLabel);\n                }\n            } else if (this.disabled && this.cachedAriaLabel) {\n                this.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (this.disabled && this.cachedAriaLabel == '') {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override renderButton(): TemplateResult {\n        return html`\n            ${this.buttonContent}\n            ${when(this.pending, () => {\n                import(\n                    '@spectrum-web-components/progress-circle/sp-progress-circle.js'\n                );\n                return html`\n                    <sp-progress-circle\n                        indeterminate\n                        static=\"white\"\n                        aria-hidden=\"true\"\n                    ></sp-progress-circle>\n                `;\n            })}\n        `;\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/Button.js

@@ -1,2 +1,11 @@
-"use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=(s,a,t,r)=>{for(var e=r>1?void 0:r?l(a,t):a,o=s.length-1,c;o>=0;o--)(c=s[o])&&(e=(r?c(a,t,e):c(e))||e);return r&&e&&u(a,t,e),e};import{SizedMixin as p}from"@spectrum-web-components/base";import{property as n}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as h}from"./ButtonBase.js";import d from"./button.css.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends p(h,{noDefaultSize:!0}){constructor(){super(...arguments);this._variant="accent";this.treatment="fill"}static get styles(){return[...super.styles,d]}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant)}}i([n()],Button.prototype,"variant",1),i([n({type:String,reflect:!0})],Button.prototype,"static",2),i([n({reflect:!0})],Button.prototype,"treatment",2),i([n({type:Boolean})],Button.prototype,"quiet",1);
+"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(n,r,t,s)=>{for(var e=s>1?void 0:s?h(r,t):r,l=n.length-1,o;l>=0;l--)(o=n[l])&&(e=(s?o(r,t,e):o(e))||e);return s&&e&&u(r,t,e),e};import{html as c,SizedMixin as d}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as p}from"./ButtonBase.js";import b from"./button.css.js";import{when as m}from"@spectrum-web-components/base/src/directives.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends d(p,{noDefaultSize:!0}){constructor(){super(...arguments);this.pendingLabel="Pending";this.pending=!1;this.cachedAriaLabel=null;this._variant="accent";this.treatment="fill"}static get styles(){return[...super.styles,b]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant)}updated(t){super.updated(t),t.has("pending")&&(this.pending&&this.pendingLabel!==this.getAttribute("aria-label")?this.disabled||(this.cachedAriaLabel=this.getAttribute("aria-label")||"",this.setAttribute("aria-label",this.pendingLabel)):!this.pending&&this.cachedAriaLabel?this.setAttribute("aria-label",this.cachedAriaLabel):!this.pending&&this.cachedAriaLabel===""&&this.removeAttribute("aria-label")),t.has("disabled")&&(!this.disabled&&this.pendingLabel!==this.getAttribute("aria-label")?this.pending&&(this.cachedAriaLabel=this.getAttribute("aria-label")||"",this.setAttribute("aria-label",this.pendingLabel)):this.disabled&&this.cachedAriaLabel?this.setAttribute("aria-label",this.cachedAriaLabel):this.disabled&&this.cachedAriaLabel==""&&this.removeAttribute("aria-label"))}renderButton(){return c`
+            ${this.buttonContent}
+            ${m(this.pending,()=>(import("@spectrum-web-components/progress-circle/sp-progress-circle.js"),c`
+                    <sp-progress-circle
+                        indeterminate
+                        static="white"
+                        aria-hidden="true"
+                    ></sp-progress-circle>
+                `))}
+        `}}i([a({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),i([a({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),i([a()],Button.prototype,"variant",1),i([a({type:String,reflect:!0})],Button.prototype,"static",2),i([a({reflect:!0})],Button.prototype,"treatment",2),i([a({type:Boolean})],Button.prototype,"quiet",1);
 //# sourceMappingURL=Button.js.map

package/src/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Button.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    PropertyValues,\n    SizedMixin,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.js';\nimport buttonStyles from './button.css.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n    | 'accent'\n    | 'primary'\n    | 'secondary'\n    | 'negative'\n    | ButtonStatics\n    | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n    'accent',\n    'primary',\n    'secondary',\n    'negative',\n    'white',\n    'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, buttonStyles];\n    }\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property()\n    public get variant(): ButtonVariants {\n        return this._variant;\n    }\n    public set variant(variant: ButtonVariants) {\n        if (variant === this.variant) return;\n\n        this.requestUpdate('variant', this.variant);\n        switch (variant) {\n            case 'cta':\n                this._variant = 'accent';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n                    );\n                }\n                break;\n            case 'overBackground':\n                this.removeAttribute('variant');\n                this.static = 'white';\n                this.treatment = 'outline';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case 'white':\n            case 'black':\n                this.static = variant;\n                this.removeAttribute('variant');\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case null:\n                return;\n            default:\n                if (!VALID_VARIANTS.includes(variant)) {\n                    this._variant = 'accent';\n                } else {\n                    this._variant = variant;\n                }\n                break;\n        }\n        this.setAttribute('variant', this.variant);\n    }\n    private _variant: ButtonVariants = 'accent';\n\n    @property({ type: String, reflect: true })\n    public static: 'black' | 'white' | undefined;\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property({ reflect: true })\n    public treatment: ButtonTreatments = 'fill';\n\n    /**\n     * Style this button to be less obvious\n     */\n    @property({ type: Boolean })\n    public set quiet(quiet: boolean) {\n        this.treatment = quiet ? 'outline' : 'fill';\n    }\n\n    public get quiet(): boolean {\n        return this.treatment === 'outline';\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        // There is no Spectrum design context for an `<sp-button>` without a variant\n        // apply one manually when a consumer has not applied one themselves.\n        if (!this.hasAttribute('variant')) {\n            this.setAttribute('variant', this.variant);\n        }\n    }\n}\n"],
-  "mappings": "qNAYA,OAGI,cAAAA,MACG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAkB,kBAWlB,aAAM,eAAiB,CAC1B,SACA,UACA,YACA,WACA,QACA,OACJ,EACa,cAAgB,CAAC,QAAS,OAAO,EAUvC,aAAM,eAAeH,EAAWE,EAAY,CAAE,cAAe,EAAK,CAAC,CAAE,CAArE,kCA+DH,KAAQ,SAA2B,SASnC,KAAO,UAA8B,OAvErC,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAY,CACzC,CAMA,IAAW,SAA0B,CACjC,OAAO,KAAK,QAChB,CACA,IAAW,QAAQC,EAAyB,CACxC,GAAIA,IAAY,KAAK,QAGrB,QADA,KAAK,cAAc,UAAW,KAAK,OAAO,EAClCA,EAAS,CACb,IAAK,MACD,KAAK,SAAW,SAQhB,MACJ,IAAK,iBACD,KAAK,gBAAgB,SAAS,EAC9B,KAAK,OAAS,QACd,KAAK,UAAY,UAQjB,OACJ,IAAK,QACL,IAAK,QACD,KAAK,OAASA,EACd,KAAK,gBAAgB,SAAS,EAQ9B,OACJ,KAAK,KACD,OACJ,QACS,eAAe,SAASA,CAAO,EAGhC,KAAK,SAAWA,EAFhB,KAAK,SAAW,SAIpB,KACR,CACA,KAAK,aAAa,UAAW,KAAK,OAAO,EAC7C,CAgBA,IAAW,MAAMC,EAAgB,CAC7B,KAAK,UAAYA,EAAQ,UAAY,MACzC,CAEA,IAAW,OAAiB,CACxB,OAAO,KAAK,YAAc,SAC9B,CAEmB,aAAaC,EAAqC,CACjE,MAAM,aAAaA,CAAO,EAGrB,KAAK,aAAa,SAAS,GAC5B,KAAK,aAAa,UAAW,KAAK,OAAO,CAEjD,CACJ,CArFeC,EAAA,CADVN,EAAS,GARD,OASE,uBAyDJM,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAjEhC,OAkEF,sBAMAM,EAAA,CADNN,EAAS,CAAE,QAAS,EAAK,CAAC,GAvElB,OAwEF,yBAMIM,EAAA,CADVN,EAAS,CAAE,KAAM,OAAQ,CAAC,GA7ElB,OA8EE",
-  "names": ["SizedMixin", "property", "ButtonBase", "buttonStyles", "variant", "quiet", "changes", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.js';\nimport buttonStyles from './button.css.js';\nimport { when } from '@spectrum-web-components/base/src/directives.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n    | 'accent'\n    | 'primary'\n    | 'secondary'\n    | 'negative'\n    | ButtonStatics\n    | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n    'accent',\n    'primary',\n    'secondary',\n    'negative',\n    'white',\n    'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, buttonStyles];\n    }\n\n    @property({ type: String, attribute: 'pending-label' })\n    public pendingLabel = 'Pending';\n\n    // pending is the property that consumers can use to set the button into a pending state\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public pending = false;\n\n    private cachedAriaLabel: string | null = null;\n\n    public override click(): void {\n        if (this.pending) {\n            return;\n        }\n        super.click();\n    }\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property()\n    public get variant(): ButtonVariants {\n        return this._variant;\n    }\n    public set variant(variant: ButtonVariants) {\n        if (variant === this.variant) return;\n\n        this.requestUpdate('variant', this.variant);\n        switch (variant) {\n            case 'cta':\n                this._variant = 'accent';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n                    );\n                }\n                break;\n            case 'overBackground':\n                this.removeAttribute('variant');\n                this.static = 'white';\n                this.treatment = 'outline';\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case 'white':\n            case 'black':\n                this.static = variant;\n                this.removeAttribute('variant');\n                if (window.__swc.DEBUG) {\n                    window.__swc.warn(\n                        this,\n                        `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n                        'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n                    );\n                }\n                return;\n            case null:\n                return;\n            default:\n                if (!VALID_VARIANTS.includes(variant)) {\n                    this._variant = 'accent';\n                } else {\n                    this._variant = variant;\n                }\n                break;\n        }\n        this.setAttribute('variant', this.variant);\n    }\n    private _variant: ButtonVariants = 'accent';\n\n    @property({ type: String, reflect: true })\n    public static: 'black' | 'white' | undefined;\n\n    /**\n     * The visual variant to apply to this button.\n     */\n    @property({ reflect: true })\n    public treatment: ButtonTreatments = 'fill';\n\n    /**\n     * Style this button to be less obvious\n     */\n    @property({ type: Boolean })\n    public set quiet(quiet: boolean) {\n        this.treatment = quiet ? 'outline' : 'fill';\n    }\n\n    public get quiet(): boolean {\n        return this.treatment === 'outline';\n    }\n\n    protected override firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        // There is no Spectrum design context for an `<sp-button>` without a variant\n        // apply one manually when a consumer has not applied one themselves.\n        if (!this.hasAttribute('variant')) {\n            this.setAttribute('variant', this.variant);\n        }\n    }\n\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n\n        if (changed.has('pending')) {\n            if (\n                this.pending &&\n                this.pendingLabel !== this.getAttribute('aria-label')\n            ) {\n                if (!this.disabled) {\n                    this.cachedAriaLabel =\n                        this.getAttribute('aria-label') || '';\n                    this.setAttribute('aria-label', this.pendingLabel);\n                }\n            } else if (!this.pending && this.cachedAriaLabel) {\n                this.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!this.pending && this.cachedAriaLabel === '') {\n                this.removeAttribute('aria-label');\n            }\n        }\n\n        if (changed.has('disabled')) {\n            if (\n                !this.disabled &&\n                this.pendingLabel !== this.getAttribute('aria-label')\n            ) {\n                if (this.pending) {\n                    this.cachedAriaLabel =\n                        this.getAttribute('aria-label') || '';\n                    this.setAttribute('aria-label', this.pendingLabel);\n                }\n            } else if (this.disabled && this.cachedAriaLabel) {\n                this.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (this.disabled && this.cachedAriaLabel == '') {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override renderButton(): TemplateResult {\n        return html`\n            ${this.buttonContent}\n            ${when(this.pending, () => {\n                import(\n                    '@spectrum-web-components/progress-circle/sp-progress-circle.js'\n                );\n                return html`\n                    <sp-progress-circle\n                        indeterminate\n                        static=\"white\"\n                        aria-hidden=\"true\"\n                    ></sp-progress-circle>\n                `;\n            })}\n        `;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SizedMixin", "property", "ButtonBase", "buttonStyles", "when", "variant", "quiet", "changes", "changed", "__decorateClass"]
 }

package/src/button-base.css.dev.js

@@ -13,7 +13,7 @@ const styles = css`
 --spectrum-alias-ui-icon-cornertriangle-size-75
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-75
-)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-m
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-m
@@ -21,7 +21,7 @@ const styles = css`
 --spectrum-alias-ui-icon-cornertriangle-size-100
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-100
-)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-l
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-l
@@ -29,7 +29,7 @@ const styles = css`
 --spectrum-alias-ui-icon-cornertriangle-size-200
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-200
-)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-xl
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-xl
@@ -37,7 +37,7 @@ const styles = css`
 --spectrum-alias-ui-icon-cornertriangle-size-300
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-300
-)}
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)}
 `;
 export default styles;
 //# sourceMappingURL=button-base.css.dev.js.map

package/src/button-base.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["button-base.css.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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex;vertical-align:top}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}[icon-only]+#label{display:contents}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex;vertical-align:top}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}[icon-only]+#label{display:contents}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCf,eAAe;",
   "names": []
 }

package/src/button-base.css.js

@@ -11,7 +11,7 @@
 --spectrum-alias-ui-icon-cornertriangle-size-75
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-75
-)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-m
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-m
@@ -19,7 +19,7 @@
 --spectrum-alias-ui-icon-cornertriangle-size-100
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-100
-)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-l
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-l
@@ -27,7 +27,7 @@
 --spectrum-alias-ui-icon-cornertriangle-size-200
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-200
-)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-xl
 );--spectrum-icon-tshirt-size-width:var(
 --spectrum-alias-workflow-icon-size-xl
@@ -35,6 +35,6 @@
 --spectrum-alias-ui-icon-cornertriangle-size-300
 );--spectrum-ui-icon-tshirt-size-width:var(
 --spectrum-alias-ui-icon-cornertriangle-size-300
-)}
+);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)}
 `;export default s;
 //# sourceMappingURL=button-base.css.js.map

package/src/button-base.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["button-base.css.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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex;vertical-align:top}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}[icon-only]+#label{display:contents}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex;vertical-align:top}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}[icon-only]+#label{display:contents}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/button.css.dev.js

@@ -11,13 +11,13 @@ const styles = css`
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
 ) ease-out,box-shadow var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var(
+) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;inset-block:0;inset-inline:0;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
 ) ease-out,margin var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
 ) ease-out}:host(.focus-visible):after{margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-2)}:host(:focus-visible):after{margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-2)}#label{place-self:center;text-align:center}#label[hidden]{display:none}:host{--spectrum-button-animation-duration:var(
 --spectrum-animation-duration-100
-);--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-thickness:var(
+);--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-thickness:var(
 --spectrum-focus-indicator-thickness
 );--spectrum-button-focus-indicator-color:var(
 --spectrum-focus-indicator-color
@@ -158,7 +158,7 @@ var(--spectrum-button-border-width)
 --highcontrast-button-content-color-down,var(
 --mod-button-content-color-down,var(--spectrum-button-content-color-down)
 )
-)}:host([disabled]){background-color:var(
+)}:host .is-disabled,:host([disabled]){background-color:var(
 --highcontrast-button-background-color-disabled,var(
 --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled)
 )
@@ -800,7 +800,19 @@ var(--spectrum-button-border-width)
 --system-spectrum-button-staticblack-secondary-outline-border-color-disabled
 );--spectrum-button-content-color-disabled:var(
 --system-spectrum-button-staticblack-secondary-outline-content-color-disabled
-)}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}
+)}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(
+--highcontrast-button-background-color-disabled,var(
+--mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled)
+)
+);border-color:var(
+--highcontrast-button-border-color-disabled,var(
+--mod-button-border-color-disabled,var(--spectrum-button-border-color-disabled)
+)
+);color:var(
+--highcontrast-button-content-color-disabled,var(
+--mod-button-content-color-disabled,var(--spectrum-button-content-color-disabled)
+)
+)}}:host([pending]:not([disabled])){animation:update-pending-button-styles 0s var(--pending-delay,1s) forwards;cursor:default;pointer-events:none}sp-progress-circle{display:block;left:50%;position:absolute;transform:translate(-50%);visibility:hidden}:host([pending]:not([disabled])) sp-progress-circle{animation:show-progress-circle 0s var(--pending-delay,1s) forwards}:host([pending]:not([disabled])) #label,:host([pending]:not([disabled])) slot[name=icon]{animation:hide-icons-label 0s var(--pending-delay,1s) forwards}
 `;
 export default styles;
 //# sourceMappingURL=button.css.dev.js.map