@getflip/swirl-components 0.241.0 → 0.241.2

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

@@ -176,6 +176,14 @@
     color: var(--s-icon-strong);
   }
 
+.button--variant-flat.button--size-l {
+    padding: var(--s-space-12) var(--s-space-20);
+  }
+
+.button--variant-flat.button--size-l.button--icon-only {
+      padding: var(--s-space-12);
+    }
+
 .button--variant-outline {
   color: var(--s-text-default);
   box-shadow: inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);
@@ -303,6 +311,14 @@
     color: var(--swirl-plain-button-text-color-default);
   }
 
+.button--variant-plain.button--size-l {
+    padding: var(--s-space-12) var(--s-space-20);
+  }
+
+.button--variant-plain.button--size-l.button--icon-only {
+      padding: var(--s-space-12);
+    }
+
 .button--variant-on-image {
   color: var(--s-text-on-image);
   background: rgba(0, 0, 0, 0.6);
@@ -329,6 +345,14 @@
     color: var(--s-icon-on-image);
   }
 
+.button--variant-on-image.button--size-l {
+    padding: var(--s-space-12) var(--s-space-20);
+  }
+
+.button--variant-on-image.button--size-l.button--icon-only {
+      padding: var(--s-space-12);
+    }
+
 .button--variant-floating {
   color: var(--s-text-default);
   background-color: var(--s-surface-overlay-default);

package/dist/collection/components/swirl-tooltip/swirl-tooltip.js

@@ -26,6 +26,9 @@ export class SwirlTooltip {
             };
         };
         this.show = () => {
+            if (!this.active) {
+                return;
+            }
             this.visible = true;
             requestAnimationFrame(() => {
                 const referenceElement = this.el.children[0];
@@ -37,6 +40,9 @@ export class SwirlTooltip {
             });
         };
         this.showWithDelay = () => {
+            if (!this.active) {
+                return;
+            }
             if (Boolean(this.showTimeout)) {
                 clearTimeout(this.showTimeout);
                 this.showTimeout = undefined;
@@ -82,9 +88,15 @@ export class SwirlTooltip {
         this.hide();
     }
     onWindowResize() {
+        if (!this.active) {
+            return;
+        }
         this.reposition();
     }
     onWindowScroll() {
+        if (!this.active || !this.visible) {
+            return;
+        }
         this.reposition();
     }
     componentWillLoad() {
@@ -98,7 +110,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '8f56d251588bf2ba5357f02030530b8529edb714', onKeydown: this.onKeydown }, h("span", { key: '61a2da29f6754906d2aa33eda9fd35332d34605c', class: className }, h("span", { key: '634ccb7169aeddc870cee955fb91116a7523430e', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '6128cdddd6ccde561c09e9a262515b7d2ef8d197' })), h("span", { key: '4f1b5ad00978ffbd9569d78a73ee7360fe73b0c1', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '6b4349568aeda21be1c86dc8ba47d32fd69fcf6c', onKeydown: this.onKeydown }, h("span", { key: '23920a993ad647905f7d9aa72cf4815c762e0239', class: className }, h("span", { key: '3bc99d469fe2fb3fbe459778b3a5138e2e10d14b', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '7cb1ae022a8a668fdc43baff33ec00c23721cbf7' })), h("span", { key: 'd6afed9fe735ec487bf360673f233d57ca00a550', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -106,7 +118,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '4e008a825910accf5025b376cd31a4f318341a60', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '31a7fcb6aeafc3a16d573ca93657d3179d0fc043', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '67143598c3ce86017ef52f38fdf655aed68805e8', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '05ab2e80cae9ef200520044028fd97aef05f36a5', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '7c8260e768c51475675090049e8f4acdb6915861', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '3b2642690f347c433c98e36de14b04cb99f8d9aa', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));