@getflip/swirl-components 0.152.0 → 0.153.0

package/dist/collection/components/swirl-button/swirl-button.css

@@ -218,37 +218,37 @@
 .button--variant-plain {
   padding: 0;
   border-radius: 0;
-  color: var(--s-interactive-neutral-default);
+  color: var(--swirl-plain-button-text-color-default);
   background-color: transparent;
 }
 
 .button--variant-plain:hover:not(:disabled) {
-    color: var(--s-interactive-neutral-default);
+    color: var(--swirl-plain-button-text-color-hovered);
     background-color: transparent;
     text-decoration: underline;
     text-underline-offset: var(--s-space-4);
   }
 
 .button--variant-plain:hover:not(:disabled) .button__icon {
-      color: var(--s-interactive-neutral-default);
+      color: var(--swirl-plain-button-text-color-hovered);
     }
 
 .button--variant-plain:active:not(:disabled) {
-    color: var(--s-interactive-neutral-hovered);
+    color: var(--swirl-plain-button-text-color-pressed);
     background-color: transparent;
   }
 
 .button--variant-plain:active:not(:disabled) .button__icon {
-      color: var(--s-interactive-neutral-hovered);
+      color: var(--swirl-plain-button-text-color-pressed);
     }
 
 .button--variant-plain:disabled {
-    color: var(--s-interactive-neutral-disabled);
+    color: var(--swirl-plain-button-text-color-disabled);
     background-color: transparent;
   }
 
 .button--variant-plain:disabled .button__icon {
-      color: var(--s-interactive-neutral-disabled);
+      color: var(--swirl-plain-button-text-color-disabled);
     }
 
 .button--variant-plain.button--icon-only {
@@ -297,7 +297,7 @@
 
 .button--variant-plain .button__icon {
     margin-left: 0;
-    color: var(--s-interactive-neutral-default);
+    color: var(--swirl-plain-button-text-color-default);
   }
 
 .button--variant-on-image {

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -27,6 +27,9 @@ export class SwirlPopoverTrigger {
         return;
       }
       const triggerEl = this.getTriggerEl();
+      if (!Boolean(triggerEl)) {
+        return;
+      }
       const popoverId = typeof this.popover === "string" ? this.popover : this.popover?.id;
       if (triggerEl.tagName.startsWith("SWIRL-")) {
         triggerEl.setAttribute("swirl-aria-controls", popoverId);

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
 export class SwirlTextInput {
@@ -114,6 +114,12 @@ export class SwirlTextInput {
   disconnectedCallback() {
     this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
+  async blurInput() {
+    this.inputEl.blur();
+  }
+  async focusInput() {
+    this.inputEl.focus();
+  }
   watchValue(newValue, oldValue) {
     if (newValue !== oldValue) {
       this.valueChange.emit(newValue);
@@ -775,6 +781,42 @@ export class SwirlTextInput {
         }
       }];
   }
+  static get methods() {
+    return {
+      "blurInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "focusInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get watchers() {
     return [{
         "propName": "value",

package/dist/collection/components/swirl-text-input/swirl-text-input.spec.js

@@ -86,4 +86,26 @@ describe("swirl-text-input", () => {
     expect(spy).toHaveBeenCalled();
     expect(spy.mock.calls[0][0].detail).toBe("New Value");
   });
+  it("can focus", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTextInput],
+      html: `<swirl-text-input value="Value"></swirl-text-input>`,
+    });
+    const spy = jest.fn();
+    const input = page.root.querySelector(".text-input__input");
+    input.addEventListener("focus", spy);
+    page.rootInstance.focusInput();
+    expect(spy).toHaveBeenCalled();
+  });
+  it("can blur", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTextInput],
+      html: `<swirl-text-input value="Value"></swirl-text-input>`,
+    });
+    const spy = jest.fn();
+    const input = page.root.querySelector(".text-input__input");
+    input.addEventListener("blur", spy);
+    page.rootInstance.blurInput();
+    expect(spy).toHaveBeenCalled();
+  });
 });