@spectrum-web-components/reactive-controllers 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/reactive-controllers",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "publishConfig": {
         "access": "public"
     },
@@ -89,8 +89,8 @@
         "css"
     ],
     "dependencies": {
-        "@spectrum-web-components/progress-circle": "1.8.0",
-        "colorjs.io": "^0.5.2",
+        "@spectrum-web-components/progress-circle": "1.9.0",
+        "colorjs.io": "0.5.2",
         "lit": "^2.5.0 || ^3.1.3"
     },
     "types": "./src/index.d.ts",

package/src/LanguageResolution.dev.js

@@ -4,7 +4,7 @@ export const languageResolverUpdatedSymbol = Symbol(
 );
 export class LanguageResolutionController {
   constructor(host) {
-    this.language = document.documentElement.lang || navigator.language;
+    this.language = document.documentElement.lang || navigator.language || "en-US";
     this.host = host;
     this.host.addController(this);
   }
@@ -16,6 +16,11 @@ export class LanguageResolutionController {
     (_a = this.unsubscribe) == null ? void 0 : _a.call(this);
   }
   resolveLanguage() {
+    try {
+      Intl.DateTimeFormat.supportedLocalesOf([this.language]);
+    } catch (e) {
+      this.language = "en-US";
+    }
     const queryThemeEvent = new CustomEvent(
       "sp-language-context",
       {

package/src/LanguageResolution.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["LanguageResolution.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport { ProvideLang } from '@spectrum-web-components/theme';\n\nexport const languageResolverUpdatedSymbol = Symbol(\n    'language resolver updated'\n);\n\nexport class LanguageResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    language = document.documentElement.lang || navigator.language;\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveLanguage();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveLanguage(): void {\n        const queryThemeEvent = new CustomEvent<ProvideLang>(\n            'sp-language-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (lang: string, unsubscribe: () => void) => {\n                        const previous = this.language;\n                        this.language = lang;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            languageResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(queryThemeEvent);\n    }\n}\n"],
-  "mappings": ";AAeO,aAAM,gCAAgC;AAAA,EACzC;AACJ;AAEO,aAAM,6BAA2D;AAAA,EAKpE,YAAY,MAAuB;AAHnC,oBAAW,SAAS,gBAAgB,QAAQ,UAAU;AAIlD,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA,EAEO,gBAAsB;AACzB,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEO,mBAAyB;AAjCpC;AAkCQ,eAAK,gBAAL;AAAA,EACJ;AAAA,EAEQ,kBAAwB;AAC5B,UAAM,kBAAkB,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,QACI,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACJ,UAAU,CAAC,MAAc,gBAA4B;AACjD,kBAAM,WAAW,KAAK;AACtB,iBAAK,WAAW;AAChB,iBAAK,cAAc;AACnB,iBAAK,KAAK;AAAA,cACN;AAAA,cACA;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,YAAY;AAAA,MAChB;AAAA,IACJ;AACA,SAAK,KAAK,cAAc,eAAe;AAAA,EAC3C;AACJ;",
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport { ProvideLang } from '@spectrum-web-components/theme';\n\nexport const languageResolverUpdatedSymbol = Symbol(\n    'language resolver updated'\n);\n\nexport class LanguageResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    language = document.documentElement.lang || navigator.language || 'en-US';\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveLanguage();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveLanguage(): void {\n        try {\n            Intl.DateTimeFormat.supportedLocalesOf([this.language]);\n        } catch {\n            this.language = 'en-US';\n        }\n        const queryThemeEvent = new CustomEvent<ProvideLang>(\n            'sp-language-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (lang: string, unsubscribe: () => void) => {\n                        const previous = this.language;\n                        this.language = lang;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            languageResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(queryThemeEvent);\n    }\n}\n"],
+  "mappings": ";AAeO,aAAM,gCAAgC;AAAA,EACzC;AACJ;AAEO,aAAM,6BAA2D;AAAA,EAKpE,YAAY,MAAuB;AAHnC,oBAAW,SAAS,gBAAgB,QAAQ,UAAU,YAAY;AAI9D,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA,EAEO,gBAAsB;AACzB,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEO,mBAAyB;AAjCpC;AAkCQ,eAAK,gBAAL;AAAA,EACJ;AAAA,EAEQ,kBAAwB;AAC5B,QAAI;AACA,WAAK,eAAe,mBAAmB,CAAC,KAAK,QAAQ,CAAC;AAAA,IAC1D,SAAQ;AACJ,WAAK,WAAW;AAAA,IACpB;AACA,UAAM,kBAAkB,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,QACI,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACJ,UAAU,CAAC,MAAc,gBAA4B;AACjD,kBAAM,WAAW,KAAK;AACtB,iBAAK,WAAW;AAChB,iBAAK,cAAc;AACnB,iBAAK,KAAK;AAAA,cACN;AAAA,cACA;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,YAAY;AAAA,MAChB;AAAA,IACJ;AACA,SAAK,KAAK,cAAc,eAAe;AAAA,EAC3C;AACJ;",
   "names": []
 }

package/src/LanguageResolution.js

@@ -1,2 +1,2 @@
-"use strict";export const languageResolverUpdatedSymbol=Symbol("language resolver updated");export class LanguageResolutionController{constructor(e){this.language=document.documentElement.lang||navigator.language;this.host=e,this.host.addController(this)}hostConnected(){this.resolveLanguage()}hostDisconnected(){var e;(e=this.unsubscribe)==null||e.call(this)}resolveLanguage(){const e=new CustomEvent("sp-language-context",{bubbles:!0,composed:!0,detail:{callback:(t,o)=>{const a=this.language;this.language=t,this.unsubscribe=o,this.host.requestUpdate(languageResolverUpdatedSymbol,a)}},cancelable:!0});this.host.dispatchEvent(e)}}
+"use strict";export const languageResolverUpdatedSymbol=Symbol("language resolver updated");export class LanguageResolutionController{constructor(e){this.language=document.documentElement.lang||navigator.language||"en-US";this.host=e,this.host.addController(this)}hostConnected(){this.resolveLanguage()}hostDisconnected(){var e;(e=this.unsubscribe)==null||e.call(this)}resolveLanguage(){try{Intl.DateTimeFormat.supportedLocalesOf([this.language])}catch(t){this.language="en-US"}const e=new CustomEvent("sp-language-context",{bubbles:!0,composed:!0,detail:{callback:(t,o)=>{const a=this.language;this.language=t,this.unsubscribe=o,this.host.requestUpdate(languageResolverUpdatedSymbol,a)}},cancelable:!0});this.host.dispatchEvent(e)}}
 //# sourceMappingURL=LanguageResolution.js.map

package/src/LanguageResolution.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["LanguageResolution.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport { ProvideLang } from '@spectrum-web-components/theme';\n\nexport const languageResolverUpdatedSymbol = Symbol(\n    'language resolver updated'\n);\n\nexport class LanguageResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    language = document.documentElement.lang || navigator.language;\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveLanguage();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveLanguage(): void {\n        const queryThemeEvent = new CustomEvent<ProvideLang>(\n            'sp-language-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (lang: string, unsubscribe: () => void) => {\n                        const previous = this.language;\n                        this.language = lang;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            languageResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(queryThemeEvent);\n    }\n}\n"],
-  "mappings": "aAeO,aAAM,8BAAgC,OACzC,2BACJ,EAEO,aAAM,4BAA2D,CAKpE,YAAYA,EAAuB,CAHnC,cAAW,SAAS,gBAAgB,MAAQ,UAAU,SAIlD,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CAEO,eAAsB,CACzB,KAAK,gBAAgB,CACzB,CAEO,kBAAyB,CAjCpC,IAAAC,GAkCQA,EAAA,KAAK,cAAL,MAAAA,EAAA,UACJ,CAEQ,iBAAwB,CAC5B,MAAMC,EAAkB,IAAI,YACxB,sBACA,CACI,QAAS,GACT,SAAU,GACV,OAAQ,CACJ,SAAU,CAACC,EAAcC,IAA4B,CACjD,MAAMC,EAAW,KAAK,SACtB,KAAK,SAAWF,EAChB,KAAK,YAAcC,EACnB,KAAK,KAAK,cACN,8BACAC,CACJ,CACJ,CACJ,EACA,WAAY,EAChB,CACJ,EACA,KAAK,KAAK,cAAcH,CAAe,CAC3C,CACJ",
-  "names": ["host", "_a", "queryThemeEvent", "lang", "unsubscribe", "previous"]
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport { ProvideLang } from '@spectrum-web-components/theme';\n\nexport const languageResolverUpdatedSymbol = Symbol(\n    'language resolver updated'\n);\n\nexport class LanguageResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    language = document.documentElement.lang || navigator.language || 'en-US';\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveLanguage();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveLanguage(): void {\n        try {\n            Intl.DateTimeFormat.supportedLocalesOf([this.language]);\n        } catch {\n            this.language = 'en-US';\n        }\n        const queryThemeEvent = new CustomEvent<ProvideLang>(\n            'sp-language-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (lang: string, unsubscribe: () => void) => {\n                        const previous = this.language;\n                        this.language = lang;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            languageResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(queryThemeEvent);\n    }\n}\n"],
+  "mappings": "aAeO,aAAM,8BAAgC,OACzC,2BACJ,EAEO,aAAM,4BAA2D,CAKpE,YAAYA,EAAuB,CAHnC,cAAW,SAAS,gBAAgB,MAAQ,UAAU,UAAY,QAI9D,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CAEO,eAAsB,CACzB,KAAK,gBAAgB,CACzB,CAEO,kBAAyB,CAjCpC,IAAAC,GAkCQA,EAAA,KAAK,cAAL,MAAAA,EAAA,UACJ,CAEQ,iBAAwB,CAC5B,GAAI,CACA,KAAK,eAAe,mBAAmB,CAAC,KAAK,QAAQ,CAAC,CAC1D,OAAQC,EAAA,CACJ,KAAK,SAAW,OACpB,CACA,MAAMC,EAAkB,IAAI,YACxB,sBACA,CACI,QAAS,GACT,SAAU,GACV,OAAQ,CACJ,SAAU,CAACC,EAAcC,IAA4B,CACjD,MAAMC,EAAW,KAAK,SACtB,KAAK,SAAWF,EAChB,KAAK,YAAcC,EACnB,KAAK,KAAK,cACN,8BACAC,CACJ,CACJ,CACJ,EACA,WAAY,EAChB,CACJ,EACA,KAAK,KAAK,cAAcH,CAAe,CAC3C,CACJ",
+  "names": ["host", "_a", "e", "queryThemeEvent", "lang", "unsubscribe", "previous"]
 }

package/src/PendingState.d.ts

@@ -9,10 +9,14 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { LitElement, ReactiveController, TemplateResult } from 'lit';
 import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
+import { LitElement, ReactiveController, TemplateResult } from 'lit';
 /**
- * Represents a host element with pending state.
+ * Renders a pending state visual element and manages the aria-label of the host element.
+ *
+ * Currently this is used by Button only since the host element is the interactive element that needs pending state. This pattern does not work for components where the interactive element that needs pending state is in the shadow DOM. i.e. Combobox and Picker.
+ *
+ * @TODO consider deprecating this controller since it is not used by any other component.
  */
 export interface HostWithPendingState extends LitElement {
     pendingLabel?: string;
@@ -39,6 +43,8 @@ export declare class PendingStateController<T extends HostWithPendingState> impl
     /**
      * Renders the pending state UI.
      * @returns A TemplateResult representing the pending state UI.
+     *
+     * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.
      */
     renderPendingState(): TemplateResult;
     /**

package/src/PendingState.dev.js

@@ -1,6 +1,6 @@
 "use strict";
-import { html } from "lit";
 import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { html } from "lit";
 export class PendingStateController {
   /**
    * Creates an instance of PendingStateController.
@@ -14,16 +14,17 @@ export class PendingStateController {
   /**
    * Renders the pending state UI.
    * @returns A TemplateResult representing the pending state UI.
+   *
+   * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.
    */
   renderPendingState() {
-    const pendingLabel = this.host.pendingLabel || "Pending";
     return this.host.pending ? html`
                   <sp-progress-circle
                       id="loader"
                       size="s"
                       indeterminate
-                      aria-valuetext=${pendingLabel}
                       class="progress-circle"
+                      role="presentation"
                   ></sp-progress-circle>
               ` : html``;
   }
@@ -34,13 +35,22 @@ export class PendingStateController {
   updateAriaLabel() {
     const { pending, disabled, pendingLabel } = this.host;
     const currentAriaLabel = this.host.getAttribute("aria-label");
-    if (pending && !disabled && currentAriaLabel !== pendingLabel) {
+    function shouldCacheAriaLabel(cached, current, pending2) {
+      return !cached && current !== pending2 || cached !== current && current !== pending2;
+    }
+    if (shouldCacheAriaLabel(
+      this.cachedAriaLabel,
+      currentAriaLabel,
+      pendingLabel
+    )) {
       this.cachedAriaLabel = currentAriaLabel;
+    }
+    if (pending && !disabled) {
       this.host.setAttribute("aria-label", pendingLabel || "Pending");
-    } else if (!pending || disabled) {
+    } else {
       if (this.cachedAriaLabel) {
         this.host.setAttribute("aria-label", this.cachedAriaLabel);
-      } else if (!pending) {
+      } else {
         this.host.removeAttribute("aria-label");
       }
     }

package/src/PendingState.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["PendingState.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\n\n/**\n * Represents a host element with pending state.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     */\n    public renderPendingState(): TemplateResult {\n        const pendingLabel = this.host.pendingLabel || 'Pending';\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      aria-valuetext=${pendingLabel}\n                      class=\"progress-circle\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        if (pending && !disabled && currentAriaLabel !== pendingLabel) {\n            // Cache the current `aria-label` to be restored when no longer `pending`\n            this.cachedAriaLabel = currentAriaLabel;\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else if (!pending || disabled) {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!pending) {\n                // If no cached `aria-label` and not `pending`, remove the `aria-label`\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
-  "mappings": ";AAYA,SAAS,YAA4D;AACrE,OAAO;AAiBA,aAAM,uBAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,YAAY,MAAS;AAKrB,SAAO,kBAAiC;AAJpC,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,qBAAqC;AACxC,UAAM,eAAe,KAAK,KAAK,gBAAgB;AAC/C,WAAO,KAAK,KAAK,UACX;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyB,YAAY;AAAA;AAAA;AAAA,kBAIrC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC5B,UAAM,EAAE,SAAS,UAAU,aAAa,IAAI,KAAK;AACjD,UAAM,mBAAmB,KAAK,KAAK,aAAa,YAAY;AAE5D,QAAI,WAAW,CAAC,YAAY,qBAAqB,cAAc;AAE3D,WAAK,kBAAkB;AAEvB,WAAK,KAAK,aAAa,cAAc,gBAAgB,SAAS;AAAA,IAClE,WAAW,CAAC,WAAW,UAAU;AAE7B,UAAI,KAAK,iBAAiB;AACtB,aAAK,KAAK,aAAa,cAAc,KAAK,eAAe;AAAA,MAC7D,WAAW,CAAC,SAAS;AAEjB,aAAK,KAAK,gBAAgB,YAAY;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,gBAAsB;AAClB,QAAI,CAAC,KAAK;AACN,WAAK,kBAAkB,KAAK,KAAK,aAAa,YAAY;AAC9D,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEA,cAAoB;AAChB,SAAK,gBAAgB;AAAA,EACzB;AACJ;",
-  "names": []
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n * \n * Currently this is used by Button only since the host element is the interactive element that needs pending state. This pattern does not work for components where the interactive element that needs pending state is in the shadow DOM. i.e. Combobox and Picker.\n * \n * @TODO consider deprecating this controller since it is not used by any other component.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     *\n     * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.\n     */\n    public renderPendingState(): TemplateResult {\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      class=\"progress-circle\"\n                      role=\"presentation\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        function shouldCacheAriaLabel(\n            cached: string | null,\n            current: string | null,\n            pending: string | undefined\n        ): boolean {\n            return (\n                (!cached && current !== pending) ||\n                (cached !== current && current !== pending)\n            );\n        }\n\n        // If the current `aria-label` is different from the pending label, cache it\n        // or if the cached `aria-label` is different from the current `aria-label`, cache it\n        if (\n            shouldCacheAriaLabel(\n                this.cachedAriaLabel,\n                currentAriaLabel,\n                pendingLabel\n            )\n        ) {\n            this.cachedAriaLabel = currentAriaLabel;\n        }\n\n        if (pending && !disabled) {\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else {\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
+  "mappings": ";AAYA,OAAO;AACP,SAAS,YAA4D;AAqB9D,aAAM,uBAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,YAAY,MAAS;AAKrB,SAAO,kBAAiC;AAJpC,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASO,qBAAqC;AACxC,WAAO,KAAK,KAAK,UACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASA;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC5B,UAAM,EAAE,SAAS,UAAU,aAAa,IAAI,KAAK;AACjD,UAAM,mBAAmB,KAAK,KAAK,aAAa,YAAY;AAE5D,aAAS,qBACL,QACA,SACAA,UACO;AACP,aACK,CAAC,UAAU,YAAYA,YACvB,WAAW,WAAW,YAAYA;AAAA,IAE3C;AAIA,QACI;AAAA,MACI,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IACJ,GACF;AACE,WAAK,kBAAkB;AAAA,IAC3B;AAEA,QAAI,WAAW,CAAC,UAAU;AAEtB,WAAK,KAAK,aAAa,cAAc,gBAAgB,SAAS;AAAA,IAClE,OAAO;AAEH,UAAI,KAAK,iBAAiB;AACtB,aAAK,KAAK,aAAa,cAAc,KAAK,eAAe;AAAA,MAC7D,OAAO;AACH,aAAK,KAAK,gBAAgB,YAAY;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,gBAAsB;AAClB,QAAI,CAAC,KAAK;AACN,WAAK,kBAAkB,KAAK,KAAK,aAAa,YAAY;AAC9D,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEA,cAAoB;AAChB,SAAK,gBAAgB;AAAA,EACzB;AACJ;",
+  "names": ["pending"]
 }

package/src/PendingState.js

@@ -1,10 +1,10 @@
-"use strict";import{html as s}from"lit";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";export class PendingStateController{constructor(e){this.cachedAriaLabel=null;this.host=e,this.host.addController(this)}renderPendingState(){const e=this.host.pendingLabel||"Pending";return this.host.pending?s`
+"use strict";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";import{html as r}from"lit";export class PendingStateController{constructor(e){this.cachedAriaLabel=null;this.host=e,this.host.addController(this)}renderPendingState(){return this.host.pending?r`
                   <sp-progress-circle
                       id="loader"
                       size="s"
                       indeterminate
-                      aria-valuetext=${e}
                       class="progress-circle"
+                      role="presentation"
                   ></sp-progress-circle>
-              `:s``}updateAriaLabel(){const{pending:e,disabled:t,pendingLabel:i}=this.host,a=this.host.getAttribute("aria-label");e&&!t&&a!==i?(this.cachedAriaLabel=a,this.host.setAttribute("aria-label",i||"Pending")):(!e||t)&&(this.cachedAriaLabel?this.host.setAttribute("aria-label",this.cachedAriaLabel):e||this.host.removeAttribute("aria-label"))}hostConnected(){this.cachedAriaLabel||(this.cachedAriaLabel=this.host.getAttribute("aria-label")),this.updateAriaLabel()}hostUpdated(){this.updateAriaLabel()}}
+              `:r``}updateAriaLabel(){const{pending:e,disabled:n,pendingLabel:i}=this.host,a=this.host.getAttribute("aria-label");function o(l,t,s){return!l&&t!==s||l!==t&&t!==s}o(this.cachedAriaLabel,a,i)&&(this.cachedAriaLabel=a),e&&!n?this.host.setAttribute("aria-label",i||"Pending"):this.cachedAriaLabel?this.host.setAttribute("aria-label",this.cachedAriaLabel):this.host.removeAttribute("aria-label")}hostConnected(){this.cachedAriaLabel||(this.cachedAriaLabel=this.host.getAttribute("aria-label")),this.updateAriaLabel()}hostUpdated(){this.updateAriaLabel()}}
 //# sourceMappingURL=PendingState.js.map

package/src/PendingState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["PendingState.ts"],
-  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\n\n/**\n * Represents a host element with pending state.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     */\n    public renderPendingState(): TemplateResult {\n        const pendingLabel = this.host.pendingLabel || 'Pending';\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      aria-valuetext=${pendingLabel}\n                      class=\"progress-circle\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        if (pending && !disabled && currentAriaLabel !== pendingLabel) {\n            // Cache the current `aria-label` to be restored when no longer `pending`\n            this.cachedAriaLabel = currentAriaLabel;\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else if (!pending || disabled) {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!pending) {\n                // If no cached `aria-label` and not `pending`, remove the `aria-label`\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
-  "mappings": "aAYA,OAAS,QAAAA,MAA4D,MACrE,MAAO,iEAiBA,aAAM,sBAEb,CAUI,YAAYC,EAAS,CAKrB,KAAO,gBAAiC,KAJpC,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CAOO,oBAAqC,CACxC,MAAMC,EAAe,KAAK,KAAK,cAAgB,UAC/C,OAAO,KAAK,KAAK,QACXF;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyBE,CAAY;AAAA;AAAA;AAAA,gBAIrCF,GACV,CAMQ,iBAAwB,CAC5B,KAAM,CAAE,QAAAG,EAAS,SAAAC,EAAU,aAAAF,CAAa,EAAI,KAAK,KAC3CG,EAAmB,KAAK,KAAK,aAAa,YAAY,EAExDF,GAAW,CAACC,GAAYC,IAAqBH,GAE7C,KAAK,gBAAkBG,EAEvB,KAAK,KAAK,aAAa,aAAcH,GAAgB,SAAS,IACvD,CAACC,GAAWC,KAEf,KAAK,gBACL,KAAK,KAAK,aAAa,aAAc,KAAK,eAAe,EACjDD,GAER,KAAK,KAAK,gBAAgB,YAAY,EAGlD,CAEA,eAAsB,CACb,KAAK,kBACN,KAAK,gBAAkB,KAAK,KAAK,aAAa,YAAY,GAC9D,KAAK,gBAAgB,CACzB,CAEA,aAAoB,CAChB,KAAK,gBAAgB,CACzB,CACJ",
-  "names": ["html", "host", "pendingLabel", "pending", "disabled", "currentAriaLabel"]
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n * \n * Currently this is used by Button only since the host element is the interactive element that needs pending state. This pattern does not work for components where the interactive element that needs pending state is in the shadow DOM. i.e. Combobox and Picker.\n * \n * @TODO consider deprecating this controller since it is not used by any other component.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     *\n     * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.\n     */\n    public renderPendingState(): TemplateResult {\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      class=\"progress-circle\"\n                      role=\"presentation\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        function shouldCacheAriaLabel(\n            cached: string | null,\n            current: string | null,\n            pending: string | undefined\n        ): boolean {\n            return (\n                (!cached && current !== pending) ||\n                (cached !== current && current !== pending)\n            );\n        }\n\n        // If the current `aria-label` is different from the pending label, cache it\n        // or if the cached `aria-label` is different from the current `aria-label`, cache it\n        if (\n            shouldCacheAriaLabel(\n                this.cachedAriaLabel,\n                currentAriaLabel,\n                pendingLabel\n            )\n        ) {\n            this.cachedAriaLabel = currentAriaLabel;\n        }\n\n        if (pending && !disabled) {\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else {\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
+  "mappings": "aAYA,MAAO,iEACP,OAAS,QAAAA,MAA4D,MAqB9D,aAAM,sBAEb,CAUI,YAAYC,EAAS,CAKrB,KAAO,gBAAiC,KAJpC,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CASO,oBAAqC,CACxC,OAAO,KAAK,KAAK,QACXD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASAA,GACV,CAMQ,iBAAwB,CAC5B,KAAM,CAAE,QAAAE,EAAS,SAAAC,EAAU,aAAAC,CAAa,EAAI,KAAK,KAC3CC,EAAmB,KAAK,KAAK,aAAa,YAAY,EAE5D,SAASC,EACLC,EACAC,EACAN,EACO,CACP,MACK,CAACK,GAAUC,IAAYN,GACvBK,IAAWC,GAAWA,IAAYN,CAE3C,CAKII,EACI,KAAK,gBACLD,EACAD,CACJ,IAEA,KAAK,gBAAkBC,GAGvBH,GAAW,CAACC,EAEZ,KAAK,KAAK,aAAa,aAAcC,GAAgB,SAAS,EAG1D,KAAK,gBACL,KAAK,KAAK,aAAa,aAAc,KAAK,eAAe,EAEzD,KAAK,KAAK,gBAAgB,YAAY,CAGlD,CAEA,eAAsB,CACb,KAAK,kBACN,KAAK,gBAAkB,KAAK,KAAK,aAAa,YAAY,GAC9D,KAAK,gBAAgB,CACzB,CAEA,aAAoB,CAChB,KAAK,gBAAgB,CACzB,CACJ",
+  "names": ["html", "host", "pending", "disabled", "pendingLabel", "currentAriaLabel", "shouldCacheAriaLabel", "cached", "current"]
 }