@spectrum-web-components/reactive-controllers 0.47.1 → 0.48.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/reactive-controllers",
-    "version": "0.47.1",
+    "version": "0.48.0-beta.0",
     "publishConfig": {
         "access": "public"
     },
@@ -49,6 +49,10 @@
             "development": "./src/MatchMedia.dev.js",
             "default": "./src/MatchMedia.js"
         },
+        "./src/PendingState.js": {
+            "development": "./src/PendingState.dev.js",
+            "default": "./src/PendingState.js"
+        },
         "./src/RovingTabindex.js": {
             "development": "./src/RovingTabindex.dev.js",
             "default": "./src/RovingTabindex.js"
@@ -83,5 +87,5 @@
     "sideEffects": [
         "./**/*.dev.js"
     ],
-    "gitHead": "151a3e21c39150dbc3f3a884b660be0bd352bda1"
+    "gitHead": "9a1377f0402a17b732b96e17ad06b800df6ab52e"
 }

package/src/PendingState.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, ReactiveController, TemplateResult } from 'lit';
+import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
+/**
+ * Represents a host element with pending state.
+ */
+export interface HostWithPendingState extends LitElement {
+    pendingLabel?: string;
+    pending: boolean;
+    disabled: boolean;
+    pendingStateController: PendingStateController<HostWithPendingState>;
+}
+/**
+ * Represents a controller for managing the pending state of a reactive element.
+ *
+ * @template T - The type of the reactive element.
+ */
+export declare class PendingStateController<T extends HostWithPendingState> implements ReactiveController {
+    /**
+     * The host element that this controller is attached to.
+     */
+    host: T;
+    /**
+     * Creates an instance of PendingStateController.
+     * @param host - The host element that this controller is attached to.
+     */
+    constructor(host: T);
+    cachedAriaLabel: string | null;
+    /**
+     * Renders the pending state UI.
+     * @returns A TemplateResult representing the pending state UI.
+     */
+    renderPendingState(): TemplateResult;
+    /**
+     * Updates the ARIA label of the host element based on the pending state.
+     * Manages Cached Aria Label
+     */
+    private updateAriaLabel;
+    hostConnected(): void;
+    hostUpdated(): void;
+}

package/src/PendingState.dev.js

@@ -0,0 +1,57 @@
+"use strict";
+import { html } from "lit";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+export class PendingStateController {
+  /**
+   * Creates an instance of PendingStateController.
+   * @param host - The host element that this controller is attached to.
+   */
+  constructor(host) {
+    this.cachedAriaLabel = null;
+    this.host = host;
+    this.host.addController(this);
+  }
+  /**
+   * Renders the pending state UI.
+   * @returns A TemplateResult representing the pending state UI.
+   */
+  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"
+                  ></sp-progress-circle>
+              ` : html``;
+  }
+  /**
+   * Updates the ARIA label of the host element based on the pending state.
+   * Manages Cached Aria Label
+   */
+  updateAriaLabel() {
+    const { pending, disabled, pendingLabel } = this.host;
+    const currentAriaLabel = this.host.getAttribute("aria-label");
+    if (pending && !disabled && currentAriaLabel !== pendingLabel) {
+      this.cachedAriaLabel = currentAriaLabel;
+      this.host.setAttribute("aria-label", pendingLabel || "Pending");
+    } else if (!pending || disabled) {
+      if (this.cachedAriaLabel) {
+        this.host.setAttribute("aria-label", this.cachedAriaLabel);
+      } else if (!pending) {
+        this.host.removeAttribute("aria-label");
+      }
+    }
+  }
+  hostConnected() {
+    if (!this.cachedAriaLabel)
+      this.cachedAriaLabel = this.host.getAttribute("aria-label");
+    this.updateAriaLabel();
+  }
+  hostUpdated() {
+    this.updateAriaLabel();
+  }
+}
+//# sourceMappingURL=PendingState.dev.js.map

package/src/PendingState.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PendingState.ts"],
+  "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*/\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": []
+}

package/src/PendingState.js

@@ -0,0 +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`
+                  <sp-progress-circle
+                      id="loader"
+                      size="s"
+                      indeterminate
+                      aria-valuetext=${e}
+                      class="progress-circle"
+                  ></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()}}
+//# sourceMappingURL=PendingState.js.map

package/src/PendingState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PendingState.ts"],
+  "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*/\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"]
+}

package/test/pending-state.test.js

@@ -0,0 +1,128 @@
+"use strict";
+import { expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+describe("PendingStateController", () => {
+  let host;
+  let controller;
+  beforeEach(async () => {
+    host = await fixture(html`
+            <sp-picker aria-label="clickable" pending></sp-picker>
+        `);
+    controller = host.pendingStateController;
+  });
+  describe("renderPendingState", () => {
+    it("should change aria-label of host when pending and when not pending", async () => {
+      host = await fixture(html`
+                <sp-picker></sp-picker>
+            `);
+      controller = host.pendingStateController;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      let ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal(null);
+      host.setAttribute("aria-label", "clickable");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("clickable");
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("clickable");
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+    });
+    it("should render the pending state UI", async () => {
+      const pendingLabel = "Custom Pending Label";
+      host.pendingLabel = pendingLabel;
+      const templateResult = controller.renderPendingState();
+      const renderedElement = await fixture(html`
+                ${templateResult}
+            `);
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext=${pendingLabel}
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      expect(renderedElement.outerHTML === expectedElement.outerHTML).to.be.true;
+    });
+    it("should render the default pending state UI if no label is provided", async () => {
+      host.pendingLabel = void 0;
+      const templateResult = controller.renderPendingState();
+      const renderedElement = await fixture(html`
+                ${templateResult}
+            `);
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext="Pending"
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      const renderedAttributes = renderedElement.attributes;
+      const expectedAttributes = expectedElement.attributes;
+      expect(renderedAttributes.length === expectedAttributes.length).to.be.true;
+      for (let i = 0; i < renderedAttributes.length; i++) {
+        const renderedAttr = renderedAttributes[i];
+        const expectedAttr = expectedAttributes.getNamedItem(
+          renderedAttr.name
+        );
+        expect(renderedAttr.value === (expectedAttr == null ? void 0 : expectedAttr.value)).to.be.true;
+      }
+      expect(host.pending).to.be.true;
+    });
+    it("should toggle the pending state on and off and preserve the component state correctly", async () => {
+      var _a, _b, _c;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      let progressCircle = (_a = host.shadowRoot) == null ? void 0 : _a.querySelector("sp-progress-circle");
+      expect(progressCircle).to.not.be.null;
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      progressCircle = (_b = host.shadowRoot) == null ? void 0 : _b.querySelector("sp-progress-circle");
+      expect(progressCircle).to.be.null;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      progressCircle = (_c = host.shadowRoot) == null ? void 0 : _c.querySelector("sp-progress-circle");
+      expect(progressCircle).to.not.be.null;
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext="Pending"
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      const renderedAttributes = progressCircle == null ? void 0 : progressCircle.attributes;
+      const expectedAttributes = expectedElement.attributes;
+      expect((renderedAttributes == null ? void 0 : renderedAttributes.length) === expectedAttributes.length).to.be.true;
+      if (renderedAttributes) {
+        for (let i = 0; i < renderedAttributes.length; i++) {
+          const renderedAttr = renderedAttributes[i];
+          const expectedAttr = expectedAttributes.getNamedItem(
+            renderedAttr.name
+          );
+          expect(renderedAttr.value === (expectedAttr == null ? void 0 : expectedAttr.value)).to.be.true;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=pending-state.test.js.map

package/test/pending-state.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["pending-state.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\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 { expect, fixture, html } from '@open-wc/testing';\nimport {\n    HostWithPendingState,\n    PendingStateController,\n} from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\n\ndescribe('PendingStateController', () => {\n    let host: HostWithPendingState;\n    let controller: PendingStateController<HostWithPendingState>;\n\n    beforeEach(async () => {\n        host = await fixture<HostWithPendingState>(html`\n            <sp-picker aria-label=\"clickable\" pending></sp-picker>\n        `);\n        controller = host.pendingStateController;\n    });\n\n    describe('renderPendingState', () => {\n        it('should change aria-label of host when pending and when not pending', async () => {\n            host = await fixture<HostWithPendingState>(html`\n                <sp-picker></sp-picker>\n            `);\n            controller = host.pendingStateController;\n\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n\n            let ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n\n            host.removeAttribute('pending');\n            await host.updateComplete;\n\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal(null);\n\n            host.setAttribute('aria-label', 'clickable');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('clickable');\n            host.setAttribute('pending', 'true');\n\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n\n            host.removeAttribute('pending');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('clickable');\n\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n        });\n\n        it('should render the pending state UI', async () => {\n            const pendingLabel = 'Custom Pending Label';\n            host.pendingLabel = pendingLabel;\n            const templateResult = controller.renderPendingState();\n\n            const renderedElement = await fixture(html`\n                ${templateResult}\n            `);\n            const expectedElement = await fixture(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\n            expect(renderedElement.outerHTML === expectedElement.outerHTML).to\n                .be.true;\n        });\n\n        it('should render the default pending state UI if no label is provided', async () => {\n            host.pendingLabel = undefined;\n            const templateResult = controller.renderPendingState();\n            const renderedElement = await fixture(html`\n                ${templateResult}\n            `);\n            const expectedElement = await fixture(html`\n                <sp-progress-circle\n                    id=\"loader\"\n                    size=\"s\"\n                    indeterminate\n                    aria-valuetext=\"Pending\"\n                    class=\"progress-circle\"\n                ></sp-progress-circle>\n            `);\n\n            const renderedAttributes = renderedElement.attributes;\n            const expectedAttributes = expectedElement.attributes;\n\n            expect(renderedAttributes.length === expectedAttributes.length).to\n                .be.true;\n\n            for (let i = 0; i < renderedAttributes.length; i++) {\n                const renderedAttr = renderedAttributes[i];\n                const expectedAttr = expectedAttributes.getNamedItem(\n                    renderedAttr.name\n                );\n\n                expect(renderedAttr.value === expectedAttr?.value).to.be.true;\n            }\n            expect(host.pending).to.be.true;\n        });\n\n        it('should toggle the pending state on and off and preserve the component state correctly', async () => {\n            // Set initial pending state to true\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            let progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.not.be.null;\n            host.removeAttribute('pending');\n            await host.updateComplete;\n            progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.be.null;\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.not.be.null;\n            const expectedElement = await fixture(html`\n                <sp-progress-circle\n                    id=\"loader\"\n                    size=\"s\"\n                    indeterminate\n                    aria-valuetext=\"Pending\"\n                    class=\"progress-circle\"\n                ></sp-progress-circle>\n            `);\n\n            const renderedAttributes = progressCircle?.attributes;\n            const expectedAttributes = expectedElement.attributes;\n            expect(renderedAttributes?.length === expectedAttributes.length).to\n                .be.true;\n            if (renderedAttributes) {\n                for (let i = 0; i < renderedAttributes.length; i++) {\n                    const renderedAttr = renderedAttributes[i];\n                    const expectedAttr = expectedAttributes.getNamedItem(\n                        renderedAttr.name\n                    );\n\n                    expect(renderedAttr.value === expectedAttr?.value).to.be\n                        .true;\n                }\n            }\n        });\n    });\n});\n"],
+  "mappings": "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",
+  "names": []
+}