npm - @getflip/swirl-components - Versions diffs - 0.46.1 → 0.48.0 - Mend

@getflip/swirl-components 0.46.1 → 0.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (437) hide show

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

@@ -154,10 +154,6 @@
   }
     }
-.modal--has-custom-header .modal__content {
-    padding-top: var(--s-space-16);
-  }
 @media (min-width: 768px) {
 .modal--scrollable .modal__content {
@@ -165,9 +161,17 @@
   }
     }
-.modal--scrollable:not(.modal--scrolled-down) .modal__controls {
-      border-top: var(--s-border-width-default) solid var(--s-border-default);
-    }
+.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer {
+        border-top: var(--s-border-width-default) solid var(--s-border-default);
+      }
+.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls {
+        border-top: var(--s-border-width-default) solid var(--s-border-default);
+      }
+.modal--has-custom-header .modal__content {
+    padding-top: var(--s-space-16);
+  }
 @media (min-width: 768px) {
     .modal--scrolled .modal__header {
@@ -270,6 +274,14 @@
     margin: 0;
   }
+.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;
+}
 .modal__controls {
   display: flex;
   padding-top: var(--s-space-16);

package/dist/collection/components/swirl-modal/swirl-modal.js CHANGED Viewed

@@ -25,9 +25,6 @@ export class SwirlModal {
     this.onSecondaryAction = (event) => {
       this.secondaryAction.emit(event);
     };
-    this.onCustomHeaderSlotChange = () => {
-      this.hasCustomHeader = this.customHeaderSlot.assignedElements().length > 0;
-    };
     this.determineScrollStatus = () => {
       var _a, _b, _c, _d, _e, _f;
       const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
@@ -55,6 +52,7 @@ export class SwirlModal {
     this.isOpen = false;
     this.closing = false;
     this.hasCustomHeader = undefined;
+    this.hasCustomFooter = undefined;
     this.scrollable = false;
     this.scrolled = false;
     this.scrolledDown = false;
@@ -69,6 +67,10 @@ export class SwirlModal {
       },
     });
     this.determineScrollStatus();
+    queueMicrotask(() => {
+      this.updateCustomFooterStatus();
+      this.updateCustomHeaderStatus();
+    });
   }
   disconnectedCallback() {
     this.focusTrap.deactivate();
@@ -112,6 +114,12 @@ export class SwirlModal {
       this.closing = false;
     }, 150);
   }
+  updateCustomFooterStatus() {
+    this.hasCustomFooter = Boolean(this.el.querySelector('[slot="custom-footer"]'));
+  }
+  updateCustomHeaderStatus() {
+    this.hasCustomHeader = Boolean(this.el.querySelector('[slot="custom-header"]'));
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }
@@ -122,6 +130,7 @@ export class SwirlModal {
     const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
     const className = classnames("modal", `modal--variant-${this.variant}`, {
       "modal--closing": this.closing,
+      "modal--has-custom-footer": this.hasCustomFooter,
       "modal--has-custom-header": this.hasCustomHeader,
       "modal--hide-label": this.hideLabel,
       "modal--padded": this.padded,
@@ -131,7 +140,7 @@ export class SwirlModal {
     });
     return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header", onSlotchange: this.onCustomHeaderSlotChange, ref: (el) => (this.customHeaderSlot = el) })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+        : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("div", { class: "modal__custom-footer" }, h("slot", { name: "custom-footer" })), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
   static get originalStyleUrls() {
@@ -314,6 +323,7 @@ export class SwirlModal {
       "isOpen": {},
       "closing": {},
       "hasCustomHeader": {},
+      "hasCustomFooter": {},
       "scrollable": {},
       "scrolled": {},
       "scrolledDown": {}

package/dist/components/swirl-badge2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+const swirlBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
 const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-add-photo.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconAddPhoto$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-add2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconAdd = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-admin-panel-settings.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconAdminPanelSettings$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-ai.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconAi$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-back.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowBack$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-downward2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowDownward = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-forward.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowForward$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-left2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-right-small.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowRightSmall$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-right2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowRight = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-upward2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconArrowUpward = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-attachment.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-block.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-bookmark.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconBookmark$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-cancel2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCancel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-chat-bubble.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconChatBubble$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-chats-filled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconChatsFilled$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-chats-outlined.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconChatsOutlined$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-check-circle2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCheckCircle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-check-small2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCheckSmall = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-check-strong2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCheckStrong = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-check.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCheck$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-chevron-left.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconChevronLeft$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-chevron-right.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconChevronRight$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-close-small.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCloseSmall$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-close2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconClose = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-cloud-upload2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCloudUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-column.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconColumn$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-comment.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconComment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-copy.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconCopy$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-date-range.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDateRange$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-delete.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDelete$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-description.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDescription$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-double-arrow-left.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDoubleArrowLeft$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-double-arrow-right.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDoubleArrowRight$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-download.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDownload$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-drag-handle2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconDragHandle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-edit.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconEdit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-emoji-mood.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconEmojiMood$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-emoji-satisfied.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconEmojiSatisfied$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-error2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconError = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-expand-less2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconExpandLess = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-expand-more2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconExpandMore = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-file-copy2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconFileCopy = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-file2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconFile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-filter.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-folder-shared2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconFolderShared = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-folder.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const swirlIconCss = ":host{display:inline-flex}";
+const swirlIconCss = ":host{display:inline-flex;width:100%;align-self:center}";
 const SwirlIconFolder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {