@getflip/swirl-components 0.80.0 → 0.81.0

package/dist/collection/components/swirl-icon/icons/swirl-icon-pause.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPause {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M5.33333 12.6666C6.06667 12.6666 6.66667 12.0666 6.66667 11.3333V4.66659C6.66667 3.93325 6.06667 3.33325 5.33333 3.33325C4.6 3.33325 4 3.93325 4 4.66659V11.3333C4 12.0666 4.6 12.6666 5.33333 12.6666ZM9.33333 4.66659V11.3333C9.33333 12.0666 9.93333 12.6666 10.6667 12.6666C11.4 12.6666 12 12.0666 12 11.3333V4.66659C12 3.93325 11.4 3.33325 10.6667 3.33325C9.93333 3.33325 9.33333 3.93325 9.33333 4.66659Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M8 19C9.1 19 10 18.1 10 17V7C10 5.9 9.1 5 8 5C6.9 5 6 5.9 6 7V17C6 18.1 6.9 19 8 19ZM14 7V17C14 18.1 14.9 19 16 19C17.1 19 18 18.1 18 17V7C18 5.9 17.1 5 16 5C14.9 5 14 5.9 14 7Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M9.33333 22.1666C10.6167 22.1666 11.6667 21.1166 11.6667 19.8333V8.16659C11.6667 6.88325 10.6167 5.83325 9.33333 5.83325C8.05 5.83325 7 6.88325 7 8.16659V19.8333C7 21.1166 8.05 22.1666 9.33333 22.1666ZM16.3333 8.16659V19.8333C16.3333 21.1166 17.3833 22.1666 18.6667 22.1666C19.95 22.1666 21 21.1166 21 19.8333V8.16659C21 6.88325 19.95 5.83325 18.6667 5.83325C17.3833 5.83325 16.3333 6.88325 16.3333 8.16659Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-pause"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-reply.js

@@ -8,7 +8,7 @@ export class SwirlIconReply {
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6.66661 6V4.94C6.66661 4.34667 5.94661 4.04667 5.52661 4.46667L2.46661 7.52667C2.20661 7.78667 2.20661 8.20667 2.46661 8.46667L5.52661 11.5267C5.94661 11.9467 6.66661 11.6533 6.66661 11.06V9.93333C9.99994 9.93333 12.3333 11 13.9999 13.3333C13.3333 10 11.3333 6.66667 6.66661 6Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9.99997 9V7.41C9.99997 6.52 8.91997 6.07 8.28997 6.7L3.69997 11.29C3.30997 11.68 3.30997 12.31 3.69997 12.7L8.28997 17.29C8.91997 17.92 9.99997 17.48 9.99997 16.59V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 9.99997 9Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.6667 10.5V8.645C11.6667 7.60667 10.4067 7.08167 9.67171 7.81667L4.31671 13.1717C3.86171 13.6267 3.86171 14.3617 4.31671 14.8167L9.67171 20.1717C10.4067 20.9067 11.6667 20.3933 11.6667 19.355V17.3833C17.5 17.3833 21.5834 19.25 24.5 23.3333C23.3334 17.5 19.8334 11.6667 11.6667 10.5Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6.66667 6.00009V4.94009C6.66667 4.34676 5.94667 4.04676 5.52667 4.46676L2.46667 7.52676C2.20667 7.78676 2.20667 8.20676 2.46667 8.46676L5.52667 11.5268C5.94667 11.9468 6.66667 11.6534 6.66667 11.0601V9.93343C10 9.93343 12.3333 11.0001 14 13.3334C13.3333 10.0001 11.3333 6.66676 6.66667 6.00009Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9.99997 9.00002V7.41002C9.99997 6.52002 8.91997 6.07002 8.28997 6.70002L3.69997 11.29C3.30997 11.68 3.30997 12.31 3.69997 12.7L8.28997 17.29C8.91997 17.92 9.99997 17.48 9.99997 16.59V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 9.99997 9.00002Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.6667 10.5V8.64498C11.6667 7.60665 10.4067 7.08165 9.67165 7.81665L4.31665 13.1716C3.86165 13.6266 3.86165 14.3616 4.31665 14.8166L9.67165 20.1716C10.4067 20.9066 11.6667 20.3933 11.6667 19.355V17.3833C17.5 17.3833 21.5833 19.25 24.5 23.3333C23.3333 17.5 19.8333 11.6666 11.6667 10.5Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-reply"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-icon/icons/swirl-icon-report.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconReport {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.99998 14.0001C3.81109 14.0001 3.65276 13.9362 3.52498 13.8084C3.3972 13.6806 3.33331 13.5223 3.33331 13.3334V3.33341C3.33331 3.14453 3.3972 2.98619 3.52498 2.85841C3.65276 2.73064 3.81109 2.66675 3.99998 2.66675H8.78331C8.93887 2.66675 9.07776 2.71675 9.19998 2.81675C9.3222 2.91675 9.39998 3.04453 9.43331 3.20008L9.59998 4.00008H12.6666C12.8555 4.00008 13.0139 4.06397 13.1416 4.19175C13.2694 4.31953 13.3333 4.47786 13.3333 4.66675V10.0001C13.3333 10.189 13.2694 10.3473 13.1416 10.4751C13.0139 10.6029 12.8555 10.6667 12.6666 10.6667H9.21665C9.06109 10.6667 8.9222 10.6167 8.79998 10.5167C8.67776 10.4167 8.59998 10.289 8.56665 10.1334L8.39998 9.33341H4.66665V13.3334C4.66665 13.5223 4.60276 13.6806 4.47498 13.8084C4.3472 13.9362 4.18887 14.0001 3.99998 14.0001ZM9.76665 9.33341H12V5.33341H8.49998L8.23331 4.00008H4.66665V8.00008H9.49998L9.76665 9.33341Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 21C5.71667 21 5.47917 20.9042 5.2875 20.7125C5.09583 20.5208 5 20.2833 5 20V5C5 4.71667 5.09583 4.47917 5.2875 4.2875C5.47917 4.09583 5.71667 4 6 4H13.175C13.4083 4 13.6167 4.075 13.8 4.225C13.9833 4.375 14.1 4.56667 14.15 4.8L14.4 6H19C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V15C20 15.2833 19.9042 15.5208 19.7125 15.7125C19.5208 15.9042 19.2833 16 19 16H13.825C13.5917 16 13.3833 15.925 13.2 15.775C13.0167 15.625 12.9 15.4333 12.85 15.2L12.6 14H7V20C7 20.2833 6.90417 20.5208 6.7125 20.7125C6.52083 20.9042 6.28333 21 6 21ZM14.65 14H18V8H12.75L12.35 6H7V12H14.25L14.65 14Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M6.99998 24.5001C6.66942 24.5001 6.39234 24.3883 6.16873 24.1647C5.94512 23.9411 5.83331 23.664 5.83331 23.3334V5.83341C5.83331 5.50286 5.94512 5.22578 6.16873 5.00216C6.39234 4.77855 6.66942 4.66675 6.99998 4.66675H15.3708C15.643 4.66675 15.8861 4.75425 16.1 4.92925C16.3139 5.10425 16.45 5.32786 16.5083 5.60008L16.8 7.00008H22.1666C22.4972 7.00008 22.7743 7.11189 22.9979 7.3355C23.2215 7.55911 23.3333 7.83619 23.3333 8.16675V17.5001C23.3333 17.8306 23.2215 18.1077 22.9979 18.3313C22.7743 18.5549 22.4972 18.6667 22.1666 18.6667H16.1291C15.8569 18.6667 15.6139 18.5792 15.4 18.4042C15.1861 18.2292 15.05 18.0056 14.9916 17.7334L14.7 16.3334H8.16665V23.3334C8.16665 23.664 8.05484 23.9411 7.83123 24.1647C7.60762 24.3883 7.33054 24.5001 6.99998 24.5001ZM17.0916 16.3334H21V9.33342H14.875L14.4083 7.00008H8.16665V14.0001H16.625L17.0916 16.3334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-report"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-stop.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconStop {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M5.33333 4H10.6667C11.4 4 12 4.6 12 5.33333V10.6667C12 11.4 11.4 12 10.6667 12H5.33333C4.6 12 4 11.4 4 10.6667V5.33333C4 4.6 4.6 4 5.33333 4Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M8 6H16C17.1 6 18 6.9 18 8V16C18 17.1 17.1 18 16 18H8C6.9 18 6 17.1 6 16V8C6 6.9 6.9 6 8 6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M9.33333 7H18.6667C19.95 7 21 8.05 21 9.33333V18.6667C21 19.95 19.95 21 18.6667 21H9.33333C8.05 21 7 19.95 7 18.6667V9.33333C7 8.05 8.05 7 9.33333 7Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-stop"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-translate.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconTranslate {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M7.93335 14.6666L10.9667 6.66658H12.3667L15.4 14.6666H14L13.3 12.6333H10.0667L9.33335 14.6666H7.93335ZM10.4667 11.4666H12.8667L11.7 8.16658H11.6334L10.4667 11.4666ZM2.66669 12.6666L1.73335 11.7333L5.10002 8.36658C4.6778 7.89992 4.30835 7.41658 3.99169 6.91658C3.67502 6.41658 3.40002 5.88881 3.16669 5.33325H4.56669C4.76669 5.73325 4.98058 6.09436 5.20835 6.41658C5.43613 6.73881 5.71113 7.0777 6.03335 7.43325C6.52224 6.89992 6.9278 6.3527 7.25002 5.79159C7.57224 5.23047 7.84447 4.63325 8.06669 3.99992H0.666687V2.66659H5.33335V1.33325H6.66669V2.66659H11.3334V3.99992H9.40002C9.16669 4.78881 8.85002 5.55547 8.45002 6.29992C8.05002 7.04436 7.55558 7.74436 6.96669 8.39992L8.56669 10.0333L8.06669 11.3999L6.00002 9.33325L2.66669 12.6666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M11.9 22L16.45 10H18.55L23.1 22H21L19.95 18.95H15.1L14 22H11.9ZM15.7 17.2H19.3L17.55 12.25H17.45L15.7 17.2ZM4 19L2.6 17.6L7.65 12.55C7.01667 11.85 6.4625 11.125 5.9875 10.375C5.5125 9.625 5.1 8.83333 4.75 8H6.85C7.15 8.6 7.47083 9.14167 7.8125 9.625C8.15417 10.1083 8.56667 10.6167 9.05 11.15C9.78333 10.35 10.3917 9.52917 10.875 8.6875C11.3583 7.84583 11.7667 6.95 12.1 6H1V4H8V2H10V4H17V6H14.1C13.75 7.18333 13.275 8.33333 12.675 9.45C12.075 10.5667 11.3333 11.6167 10.45 12.6L12.85 15.05L12.1 17.1L9 14L4 19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M13.8834 25.6666L19.1917 11.6666H21.6417L26.95 25.6666H24.5L23.275 22.1083H17.6167L16.3334 25.6666H13.8834ZM18.3167 20.0666H22.5167L20.475 14.2916H20.3584L18.3167 20.0666ZM4.66669 22.1666L3.03335 20.5333L8.92502 14.6416C8.18613 13.8249 7.5396 12.9791 6.98544 12.1041C6.43127 11.2291 5.95002 10.3055 5.54169 9.33325H7.99169C8.34169 10.0333 8.71599 10.6652 9.1146 11.2291C9.51321 11.793 9.99446 12.386 10.5584 13.0083C11.4139 12.0749 12.1236 11.1173 12.6875 10.1353C13.2514 9.15339 13.7278 8.10825 14.1167 6.99992H1.16669V4.66659H9.33335V2.33325H11.6667V4.66659H19.8334V6.99992H16.45C16.0417 8.38047 15.4875 9.72214 14.7875 11.0249C14.0875 12.3277 13.2222 13.5527 12.1917 14.6999L14.9917 17.5583L14.1167 19.9499L10.5 16.3333L4.66669 22.1666Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-translate"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-menu-item/swirl-menu-item.spec.js

@@ -16,7 +16,7 @@ describe("swirl-menu-item", () => {
     const page = await newSpecPage({
       components: [SwirlPopover, SwirlMenu, SwirlMenuItem],
       html: `
-        <swirl-popover label="Menu" trigger="trigger">
+        <swirl-popover label="Menu">
           <swirl-menu label="Menu">
             <swirl-menu-item label="Item"></swirl-menu-item>
           </swirl-menu>
@@ -38,7 +38,7 @@ describe("swirl-menu-item", () => {
     const page = await newSpecPage({
       components: [SwirlPopover, SwirlMenu, SwirlMenuItem],
       html: `
-        <swirl-popover label="Menu" trigger="trigger">
+        <swirl-popover label="Menu">
           <swirl-menu label="Menu" variant="selection">
             <swirl-menu-item label="Item" value="Value"></swirl-menu-item>
           </swirl-menu>

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

@@ -46,6 +46,7 @@ export class SwirlModal {
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
     this.label = undefined;
+    this.maxHeight = undefined;
     this.maxWidth = undefined;
     this.padded = true;
     this.primaryActionLabel = undefined;
@@ -146,7 +147,7 @@ export class SwirlModal {
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    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 } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+    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: { maxHeight: this.maxHeight, maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !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 })), !this.hideLabel && (h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__header-tools" }, h("slot", { name: "header-tools" })))), 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" })))))))));
   }
@@ -232,6 +233,23 @@ export class SwirlModal {
         "attribute": "label",
         "reflect": false
       },
+      "maxHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-height",
+        "reflect": false
+      },
       "maxWidth": {
         "type": "string",
         "mutable": false,

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

@@ -26,6 +26,18 @@
   --swirl-thumbnail-size: 4rem;
 }
 
+.thumbnail--size-l .thumbnail__remove-button {
+    top: 0;
+    right: 0;
+    transform: scale(0.75);
+  }
+
+.thumbnail--size-xl {
+  --swirl-thumbnail-size: 5rem;
+
+  border-radius: var(--s-border-radius-sm);
+}
+
 .thumbnail--format-landscape {
   width: var(--swirl-thumbnail-size);
   aspect-ratio: 4 / 3;
@@ -53,9 +65,49 @@
     width: 100%;
   }
 
+.thumbnail--has-progress .thumbnail__timestamp {
+    bottom: var(--s-space-8);
+  }
+
 .thumbnail__image {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
 }
+
+.thumbnail__progress-indicator {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.thumbnail__remove-button {
+  position: absolute;
+  z-index: 1;
+  top: var(--s-space-4);
+  right: var(--s-space-4);
+}
+
+.thumbnail__timestamp {
+  position: absolute;
+  z-index: 1;
+  bottom: var(--s-space-4);
+  left: var(--s-space-4);
+  display: block;
+  overflow: hidden;
+  max-width: calc(100% - 2 * var(--s-space-4));
+  height: 1.5rem;
+  padding-right: var(--s-space-8);
+  padding-left: var(--s-space-8);
+  align-items: center;
+  border-radius: var(--s-border-radius-s);
+  color: var(--s-text-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  font-size: var(--s-font-size-sm);
+  line-height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -4,12 +4,21 @@ export class SwirlThumbnail {
   constructor() {
     this.alt = undefined;
     this.format = "landscape";
+    this.progress = undefined;
+    this.progressLabel = "Loading progress";
+    this.removeButtonLabel = "Remove";
+    this.showRemoveButton = undefined;
     this.size = "m";
     this.src = undefined;
+    this.timestamp = undefined;
   }
   render() {
-    const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`);
-    return (h(Host, null, h("span", { class: className }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }))));
+    const showRemoveButton = this.showRemoveButton && this.size === "xl" && this.format === "square";
+    const showTimestamp = Boolean(this.timestamp) && this.size === "xl" && this.format === "square";
+    const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
+      "thumbnail--has-progress": this.progress !== undefined,
+    });
+    return (h(Host, null, h("span", { class: className, role: "group" }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
   }
   static get is() { return "swirl-thumbnail"; }
   static get encapsulation() { return "shadow"; }
@@ -65,12 +74,82 @@ export class SwirlThumbnail {
         "reflect": false,
         "defaultValue": "\"landscape\""
       },
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "progress",
+        "reflect": false
+      },
+      "progressLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "progress-label",
+        "reflect": false,
+        "defaultValue": "\"Loading progress\""
+      },
+      "removeButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "remove-button-label",
+        "reflect": false,
+        "defaultValue": "\"Remove\""
+      },
+      "showRemoveButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-remove-button",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "SwirlThumbnailSize",
-          "resolved": "\"l\" | \"m\" | \"s\"",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
           "references": {
             "SwirlThumbnailSize": {
               "location": "local",
@@ -79,7 +158,7 @@ export class SwirlThumbnail {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -104,6 +183,23 @@ export class SwirlThumbnail {
         },
         "attribute": "src",
         "reflect": false
+      },
+      "timestamp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "timestamp",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.spec.js

@@ -9,11 +9,32 @@ describe("swirl-thumbnail", () => {
     expect(page.root).toEqualHtml(`
       <swirl-thumbnail alt="Brief description of the image." format="portrait" size="l" src="https://picsum.photos/id/433/400/400">
         <mock:shadow-root>
-          <span class="thumbnail thumbnail--format-portrait thumbnail--size-l">
+          <span class="thumbnail thumbnail--format-portrait thumbnail--size-l" role="group">
             <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
           </span>
         </mock:shadow-root>
       </swirl-thumbnail>
     `);
   });
+  it("renders timestamp and remove button", async () => {
+    const page = await newSpecPage({
+      components: [SwirlThumbnail],
+      html: `<swirl-thumbnail alt="Brief description of the image." format="square" src="https://picsum.photos/id/433/400/400" show-remove-button size="xl" timestamp="12:12"></swirl-thumbnail>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-thumbnail alt="Brief description of the image." format="square" show-remove-button="" size="xl" src="https://picsum.photos/id/433/400/400" timestamp="12:12">
+        <mock:shadow-root>
+          <span class="thumbnail thumbnail--format-square thumbnail--size-xl" role="group">
+            <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
+            <span class="thumbnail__remove-button">
+              <swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Remove" pill="" variant="on-image"></swirl-button>
+            </span>
+            <span class="thumbnail__timestamp">
+              12:12
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-thumbnail>
+    `);
+  });
 });

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.stories.js

@@ -1,6 +1,14 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-thumbnail.mdx";
 export default {
+  argTypes: {
+    showRemoveButton: {
+      description: "Only displayed with size `xl` and format `square`.",
+    },
+    timestamp: {
+      description: "Only displayed with size `xl` and format `square`.",
+    },
+  },
   component: "swirl-thumbnail",
   tags: ["autodocs"],
   parameters: {

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-default);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--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--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(--s-action-neutral-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--s-action-neutral-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--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-default)}.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-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:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-swirl-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-swirl-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-swirl-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 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__icon.sc-swirl-button{display:inline-flex;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-default);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--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--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(--s-action-neutral-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--s-action-neutral-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--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-default)}.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__icon.sc-swirl-button{display:inline-flex;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 SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
   constructor() {