@getflip/swirl-components 0.84.0 → 0.85.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-14T11:23:35",
+  "timestamp": "2023-08-15T07:15:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -24944,7 +24944,17 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "remove",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "listeners": [],
       "styles": [],
       "slots": [],

package/dist/cjs/swirl-icon-arrow-left_4.cjs.entry.js

@@ -55,6 +55,7 @@ const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-b
 const SwirlThumbnail = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.remove = index.createEvent(this, "remove", 7);
     this.alt = undefined;
     this.format = "landscape";
     this.progress = undefined;
@@ -71,7 +72,7 @@ const SwirlThumbnail = class {
     const className = index$1.classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
       "thumbnail--has-progress": this.progress !== undefined,
     });
-    return (index.h(index.Host, null, index.h("span", { class: className, role: "group" }, index.h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (index.h("span", { class: "thumbnail__progress-indicator" }, index.h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (index.h("span", { class: "thumbnail__remove-button" }, index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, pill: true, variant: "on-image" }))), showTimestamp && (index.h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
+    return (index.h(index.Host, null, index.h("span", { class: className, role: "group" }, index.h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (index.h("span", { class: "thumbnail__progress-indicator" }, index.h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (index.h("span", { class: "thumbnail__remove-button" }, index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (index.h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
   }
 };
 SwirlThumbnail.style = swirlThumbnailCss;

package/dist/cjs/swirl-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-506fe4ea.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-39236b6a.js');
 
-const swirlTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);animation:tooltip-fade-in 0.1s}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+const swirlTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);animation:tooltip-fade-in 0.2s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const SwirlTooltip = class {
   constructor(hostRef) {
@@ -25,6 +25,7 @@ const SwirlTooltip = class {
       this.visible = true;
       requestAnimationFrame(() => {
         this.reposition();
+        this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(this.referenceEl, this.popperEl, this.reposition.bind(this));
       });
     };
     this.showWithDelay = () => {
@@ -42,6 +43,7 @@ const SwirlTooltip = class {
         this.showTimeout = undefined;
       }
       this.visible = false;
+      this.disableAutoUpdate?.();
     };
     this.updateOptions = () => {
       const margin = +getComputedStyle(document.documentElement)