@getflip/swirl-components 0.148.0 → 0.149.0

package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.css

@@ -82,10 +82,20 @@
 
 .action-list-item__icon {
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   flex-shrink: 0;
   color: var(--s-icon-default);
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.action-list-item__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .action-list-item__label-container {
   display: inline-flex;
   min-width: 0;

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

@@ -35,14 +35,14 @@
 }
 
 .banner--size-s .banner__content {
+    margin-right: var(--s-space-8);
     flex-grow: 0;
     text-align: center;
-    margin-right: var(--s-space-8);
   }
 
 .banner--size-s .banner__controls {
-    margin-left: 0;
     margin-right: var(--s-space-4);
+    margin-left: 0;
   }
 
 .banner--intent-default .banner__icon,
@@ -103,9 +103,12 @@
 
 .banner__icon {
   position: relative;
-  top: var(--s-space-2);
+  top: var(--s-space-4);
   display: none;
+  width: 1.5rem;
+  height: 1.5rem;
   margin-right: var(--s-space-8);
+  flex-shrink: 0;
   color: var(--s-icon-on-status);
 }
 
@@ -116,6 +119,14 @@
 }
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.banner__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .banner__content {
   min-height: 1.5rem;
   margin-right: var(--s-space-12);
@@ -134,6 +145,7 @@
 .banner__controls {
   display: inline-flex;
   margin-left: var(--s-space-16);
+  flex-shrink: 0;
   align-items: center;
   line-height: var(--s-line-height-base);
   gap: var(--s-space-16);

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

@@ -177,9 +177,9 @@
     }
 
 .button--variant-outline.button--pressed {
+    color: var(--s-text-highlight);
     box-shadow: inset 0 0 0 var(--s-border-width-default)
       var(--s-border-highlight);
-    color: var(--s-text-highlight);
   }
 
 .button--variant-outline.button--pressed .button__icon {
@@ -420,11 +420,21 @@
 
 .button__icon {
   display: none;
+  width: 1.5rem;
+  height: 1.5rem;
   margin-left: calc(-1 * var(--s-space-4));
   color: var(--s-icon-default);
   order: 0;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.button__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .button__label {
   overflow: hidden;
   max-width: 100%;

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

@@ -8,6 +8,7 @@ export class SwirlDialog {
   constructor() {
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
+        event.stopImmediatePropagation();
         this.close();
       }
     };

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

@@ -1,3 +1,10 @@
 :host {
   display: inline-flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.swirl-icon {
+  max-width: 100%;
+  max-height: 100%;
 }

package/dist/collection/components/swirl-inline-error/swirl-inline-error.css

@@ -25,7 +25,9 @@
 }
 
 .inline-error--size-s .inline-error__icon {
-    padding-top: 0.125rem;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
   }
 
 .inline-error--size-s .inline-error__message {
@@ -34,10 +36,20 @@
 
 .inline-error__icon {
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   color: var(--s-icon-critical);
   align-self: flex-start;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.inline-error__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .inline-error__message {
   width: -webkit-fit-content;
   width: -moz-fit-content;

package/dist/collection/components/swirl-inline-status/swirl-inline-status.css

@@ -25,7 +25,9 @@
 }
 
 .inline-status--size-s .inline-status__icon {
-    padding-top: 0.125rem;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
   }
 
 .inline-status--size-s .inline-status__message {
@@ -66,11 +68,21 @@
 
 .inline-status__icon {
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   margin-right: var(--s-space-4);
   color: var(--s-icon-default);
   align-self: flex-start;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.inline-status__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .inline-status__message {
   width: -webkit-fit-content;
   width: -moz-fit-content;

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

@@ -107,6 +107,7 @@ export class SwirlLightbox {
   }
   onKeyDown(event) {
     if (event.code === "Escape") {
+      event.stopImmediatePropagation();
       this.close();
     }
     else if (event.code === "ArrowLeft") {

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

@@ -1,7 +1,7 @@
-import { h, Host, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
-import * as focusTrap from "focus-trap";
 import classnames from "classnames";
+import * as focusTrap from "focus-trap";
 /**
  * @slot slot - Modal contents
  * @slot secondary-content - Secondary content
@@ -13,6 +13,7 @@ export class SwirlModal {
   constructor() {
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
+        event.stopImmediatePropagation();
         this.close();
       }
     };

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.css

@@ -150,10 +150,20 @@
 
 .option-list-item__icon {
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   flex-shrink: 0;
   color: var(--s-icon-default);
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.option-list-item__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .option-list-item__selection-icon {
   display: inline-flex;
   flex-shrink: 0;

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js

@@ -20,6 +20,7 @@ export class SwirlPdfReader {
     };
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
+        event.stopImmediatePropagation();
         this.close();
       }
     };

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

@@ -19,6 +19,7 @@ export class SwirlPopover {
     };
     this.onKeydown = (event) => {
       if (event.code === "Escape" && this.active) {
+        event.stopImmediatePropagation();
         event.stopPropagation();
         this.close();
       }

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.css

@@ -40,9 +40,19 @@
   }
 
 .resource-list-file-item__icon {
+  width: 1.5rem;
+  height: 1.5rem;
   color: var(--s-icon-highlight);
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.resource-list-file-item__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .resource-list-file-item__label-container {
   position: relative;
   display: flex;

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

@@ -39,10 +39,20 @@
   top: 50%;
   left: var(--s-space-12);
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   color: var(--s-icon-default);
   transform: translateY(-50%);
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.search__icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
 .search__input {
   width: 100%;
   height: 2.5rem;

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

@@ -27,6 +27,8 @@
 
 .toast__icon {
   display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
   margin-top: calc(-1 * var(--s-space-2));
   margin-right: 0.625rem;
   flex-shrink: 0;
@@ -39,6 +41,8 @@
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .toast__icon {
+    width: 1.25rem;
+    height: 1.25rem;
     margin-top: 0
 }
   }
@@ -50,6 +54,10 @@
   align-self: flex-start;
 }
 
+.toast__content ::part(link) {
+    color: var(--text-default);
+  }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .toast__content {
@@ -58,10 +66,6 @@
 }
   }
 
-.toast__content ::part(link) {
-    color: var(--text-default);
-  }
-
 .toast__dismiss-button {
   display: inline-flex;
   min-width: 1.5rem;

package/dist/components/swirl-action-list-item2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 
-const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 
 const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionListItem extends HTMLElement {
   constructor() {

package/dist/components/swirl-banner.js

@@ -3,7 +3,7 @@ import { c as classnames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
 
-const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center;margin-right:var(--s-space-8)}.banner--size-s .banner__controls{margin-left:0;margin-right:var(--s-space-4)}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-2);display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{margin-right:var(--s-space-8);flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-right:var(--s-space-4);margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-4);display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);flex-shrink:0;align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
 
 const swirlBannerIconMapping = {
   default: undefined,

package/dist/components/swirl-button2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 
-const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button.sc-swirl-button:disabled{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:not(:focus-visible){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.button--variant-outline.sc-swirl-button:disabled{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--pressed.sc-swirl-button{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight);color:var(--s-text-highlight)}.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-swirl-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__icon.sc-swirl-button{display:none;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
+const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button.sc-swirl-button:disabled{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:not(:focus-visible){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.button--variant-outline.sc-swirl-button:disabled{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-swirl-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
 
 const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
   constructor() {

package/dist/components/swirl-dialog.js

@@ -14,6 +14,7 @@ const SwirlDialog$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDialog extends
     this.secondaryAction = createEvent(this, "secondaryAction", 7);
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
+        event.stopImmediatePropagation();
         this.close();
       }
     };

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAddPhoto$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconAddPhoto extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-add-reaction.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAddReaction$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconAddReaction extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAdd = /*@__PURE__*/ proxyCustomElement(class SwirlIconAdd extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAdminPanelSettings$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconAdminPanelSettings extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAi$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconAi extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-apps.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconApps$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconApps extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-back2.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowBack = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowBack extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowDownward = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowDownward extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-arrow-forward2.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowForward = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowForward extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowLeft = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowLeft extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowRightSmall$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowRightSmall extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowRight = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowRight extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconArrowUpward = /*@__PURE__*/ proxyCustomElement(class SwirlIconArrowUpward extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconAttachment$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconAttachment extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-bar-chart.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconBarChart$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconBarChart extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconBlock$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconBlock extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-bookmark-filled.js

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconBookmarkFilled$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconBookmarkFilled extends HTMLElement {
   constructor() {

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

@@ -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;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
 
 const SwirlIconBookmark$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconBookmark extends HTMLElement {
   constructor() {