@getflip/swirl-components 0.34.0 → 0.34.2

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

@@ -65,7 +65,7 @@ export class SwirlButton {
       "button--pill": this.pill,
     });
     const Tag = isLink ? "a" : "button";
-    return (h(Host, null, h(Tag, { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
   }
   static get is() { return "swirl-button"; }
   static get encapsulation() { return "scoped"; }

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

@@ -44,6 +44,10 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
     outline-offset: var(--s-space-4);
   }
 
+.card--is--borderless {
+  border: 0;
+}
+
 .card--elevated {
   border-color: transparent;
   box-shadow: 0 0.75rem 1rem rgba(25, 26, 28, 0.12),

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

@@ -13,6 +13,7 @@ export class SwirlCard {
     this.highlighted = undefined;
     this.href = undefined;
     this.imageAspectRatio = undefined;
+    this.isBorderless = undefined;
     this.interactive = undefined;
     this.justifyContent = "start";
     this.linkTarget = undefined;
@@ -32,6 +33,7 @@ export class SwirlCard {
       "card--has-image": hasImage,
       "card--highlighted": this.highlighted,
       "card--interactive": this.interactive || this.href,
+      "card--is--borderless": this.isBorderless,
     });
     return (h(Host, { styles: { height: this.height } }, h(Tag, { "aria-label": this.swirlAriaLabel, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
         ? "noreferrer"
@@ -177,6 +179,23 @@ export class SwirlCard {
         "attribute": "image-aspect-ratio",
         "reflect": false
       },
+      "isBorderless": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-borderless",
+        "reflect": false
+      },
       "interactive": {
         "type": "boolean",
         "mutable": false,

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

@@ -73,7 +73,7 @@
   z-index: 1;
   top: calc(50% - var(--s-space-12));
   left: var(--s-space-4);
-  display: none;
+  visibility: hidden;
   transition: opacity 0.2s;
   transform: translateY(-50%) scale(0.72);
   pointer-events: none;
@@ -83,7 +83,7 @@
 @media (min-width: 768px) {
 
 .carousel__previous-slide-button {
-    display: inline-block
+    visibility: visible
 }
   }
 
@@ -92,7 +92,7 @@
   z-index: 1;
   top: calc(50% - var(--s-space-12));
   right: var(--s-space-4);
-  display: none;
+  visibility: hidden;
   transition: opacity 0.2s;
   transform: translateY(-50%) scale(0.72);
   pointer-events: none;
@@ -102,6 +102,6 @@
 @media (min-width: 768px) {
 
 .carousel__next-slide-button {
-    display: inline-block
+    visibility: visible
 }
   }