@getflip/swirl-components 0.56.0 → 0.57.1

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -148,6 +148,20 @@
     max-width: calc(100% - 6rem);
   }
 
+.form-control--hide-label .form-control__label-text {
+    position: absolute;
+    display: inline;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    white-space: nowrap;
+    word-wrap: normal;
+    clip: rect(0, 0, 0, 0);
+  }
+
 .form-control__label {
   position: relative;
   display: flex;

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -29,6 +29,7 @@ export class SwirlFormControl {
     this.description = undefined;
     this.disabled = undefined;
     this.errorMessage = undefined;
+    this.hideLabel = undefined;
     this.inline = undefined;
     this.invalid = undefined;
     this.label = undefined;
@@ -116,6 +117,7 @@ export class SwirlFormControl {
       "form-control--has-focus": this.hasFocus,
       "form-control--has-placeholder": hasPlaceholder,
       "form-control--has-value": hasValue,
+      "form-control--hide-label": this.hideLabel,
       "form-control--inline": this.inline,
       "form-control--invalid": this.invalid,
       "form-control--is-select": isSelect,
@@ -187,6 +189,23 @@ export class SwirlFormControl {
         "attribute": "error-message",
         "reflect": false
       },
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": false
+      },
       "inline": {
         "type": "boolean",
         "mutable": false,

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

@@ -111,8 +111,8 @@
     }
 
 .modal--variant-drawer .modal__header {
-    padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));
     padding-right: var(--s-space-16);
+    padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));
   }
 
 @media (min-width: 768px) {
@@ -160,6 +160,13 @@
     padding-top: var(--s-space-16);
   }
 
+.modal--has-custom-footer .modal__custom-footer {
+    padding-top: var(--s-space-16);
+    padding-right: var(--s-space-24);
+    padding-bottom: var(--s-space-16);
+    padding-left: var(--s-space-24);
+  }
+
 @media (min-width: 768px) {
     .modal--scrolled .modal__header {
       border-bottom-color: var(--s-border-default);
@@ -197,6 +204,7 @@
 
 .modal__close-button {
   position: absolute;
+  z-index: 1;
   top: var(--s-space-8);
   left: var(--s-space-8);
 }
@@ -262,10 +270,6 @@
   }
 
 .modal__custom-footer {
-  padding-top: var(--s-space-16);
-  padding-right: var(--s-space-24);
-  padding-bottom: var(--s-space-16);
-  padding-left: var(--s-space-24);
   flex-shrink: 0;
 }
 

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

@@ -31,6 +31,7 @@ export class SwirlSelect {
     this.label = undefined;
     this.multiSelect = undefined;
     this.required = undefined;
+    this.selectId = Math.round(Math.random() * 1000000).toString();
     this.swirlAriaDescribedby = undefined;
     this.value = undefined;
     this.options = [];
@@ -62,7 +63,7 @@ export class SwirlSelect {
       "select--disabled": this.disabled,
       "select--inline": this.inline,
     });
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: `trigger-${this.selectId}`, readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: `select-options-${this.selectId}`, ref: (el) => (this.popover = el), trigger: `trigger-${this.selectId}`, useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   static get is() { return "swirl-select"; }
   static get encapsulation() { return "scoped"; }
@@ -180,6 +181,24 @@ export class SwirlSelect {
         "attribute": "required",
         "reflect": false
       },
+      "selectId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "select-id",
+        "reflect": false,
+        "defaultValue": "Math.round(Math.random() * 1000000).toString()"
+      },
       "swirlAriaDescribedby": {
         "type": "string",
         "mutable": false,