@getflip/swirl-components 0.151.2 → 0.152.1

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-13T10:30:35",
+  "timestamp": "2024-02-15T07:49:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -6984,6 +6984,10 @@
         {
           "name": "slot",
           "text": "controls - The component content"
+        },
+        {
+          "name": "slot",
+          "text": "illustration - The placeholder illustration"
         }
       ],
       "usage": {},
@@ -7030,6 +7034,10 @@
           "name": "controls",
           "docs": "The component content"
         },
+        {
+          "name": "illustration",
+          "docs": "The placeholder illustration"
+        },
         {
           "name": "slot",
           "docs": "The component content"

package/dist/cjs/swirl-app-layout_6.cjs.entry.js

@@ -208,7 +208,7 @@ const SwirlAppLayout = class {
 };
 SwirlAppLayout.style = swirlAppLayoutCss;
 
-const swirlEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state--has-controls .empty-state__controls{display:block}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-24)}.empty-state__controls{display:none}";
+const swirlEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state--has-controls .empty-state__controls{display:block}.empty-state--has-slotted-illustration .empty-state__slotted-illustration{display:block}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-24)}.empty-state__controls{display:none}.empty-state__slotted-illustration{display:none;max-width:16rem}";
 
 const SwirlEmptyState = class {
   constructor(hostRef) {
@@ -218,10 +218,12 @@ const SwirlEmptyState = class {
   }
   render() {
     const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
+    const hasSlottedIllustration = Boolean(this.el.querySelector('[slot="illustration"]'));
     const className = index$1.classnames("empty-state", {
       "empty-state--has-controls": hasControls,
+      "empty-state--has-slotted-illustration": hasSlottedIllustration,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, this.illustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__body" }, index.h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("swirl-text", { align: "center", color: "subdued" }, index.h("slot", null)))), index.h("div", { class: "empty-state__controls" }, index.h("slot", { name: "controls" }))))));
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__slotted-illustration" }, index.h("slot", { name: "illustration" })), index.h("div", { class: "empty-state__body" }, index.h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("swirl-text", { align: "center", color: "subdued" }, index.h("slot", null)))), index.h("div", { class: "empty-state__controls" }, index.h("slot", { name: "controls" }))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-button.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 const utils = require('./utils-2b6367e4.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.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.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 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.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.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(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:not(:disabled){color:var(--swirl-plain-button-text-color-hovered);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(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-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(--swirl-plain-button-text-color-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 = class {
   constructor(hostRef) {