@getflip/swirl-components 0.87.0 → 0.87.2

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

@@ -13,7 +13,9 @@
 .autocomplete__listbox-container {
   position: fixed;
   z-index: var(--s-z-40);
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 18rem;
   padding-top: var(--s-space-8);
   padding-bottom: var(--s-space-8);
   border-radius: var(--s-border-radius-sm);
@@ -34,8 +36,8 @@
 }
 
 .autocomplete__multi-select-tags {
-  margin-bottom: var(--s-space-4);
   margin-top: var(--swirl-autocomplete-tags-margin-top);
+  margin-bottom: var(--s-space-4);
 }
 
 @keyframes autocomplete-enter {

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

@@ -31,11 +31,15 @@ export class SwirlButton {
   }
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateFormAttribute();
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);
   }
+  watchFormProp() {
+    this.updateFormAttribute();
+  }
   disconnectedCallback() {
     this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
@@ -55,6 +59,17 @@ export class SwirlButton {
     }
     return undefined;
   }
+  updateFormAttribute() {
+    // Workaround: form attribute cannot be set via Stencil JSX
+    // https://github.com/ionic-team/stencil/issues/2703
+    const isLink = Boolean(this.href);
+    if (isLink || !Boolean(this.form)) {
+      this.buttonEl?.removeAttribute("form");
+    }
+    else {
+      this.buttonEl?.setAttribute("form", this.form);
+    }
+  }
   render() {
     const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
       (this.variant === "floating" && this.intent === "default");
@@ -65,7 +80,7 @@ export class SwirlButton {
       "button--pill": this.pill,
     });
     const Tag = isLink ? "a" : "button";
-    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "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-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "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, ref: (el) => (this.buttonEl = el), 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"; }
@@ -470,4 +485,11 @@ export class SwirlButton {
       }
     };
   }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "form",
+        "methodName": "watchFormProp"
+      }];
+  }
 }