@getflip/swirl-components 0.145.1 → 0.147.0

package/dist/cjs/swirl-table-row-group.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1de6abbd.js');
 
-const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}.table-row-group__tooltip{display:inline-flex;vertical-align:middle;margin-left:var(--s-space-4)}.table-row-group__tooltip-icon{color:var(--s-icon-default)}";
+const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}";
 
 const SwirlTableRowGroup = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const SwirlTableRowGroup = class {
   }
   render() {
     const rowspan = this.el.querySelectorAll("swirl-table-row").length;
-    return (index.h(index.Host, { class: "table-row-group", role: "rowgroup" }, index.h("div", { class: "table-row-group__header-row", role: "row" }, index.h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "top" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("slot", null)));
+    return (index.h(index.Host, { class: "table-row-group", role: "rowgroup" }, index.h("div", { class: "table-row-group__header-row", role: "row" }, index.h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "top", positioning: "fixed" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -113,11 +113,13 @@
     "./components/swirl-icon/icons/swirl-icon-column.js",
     "./components/swirl-icon/icons/swirl-icon-comment.js",
     "./components/swirl-icon/icons/swirl-icon-copy.js",
+    "./components/swirl-icon/icons/swirl-icon-dark-mode.js",
     "./components/swirl-icon/icons/swirl-icon-date-range.js",
     "./components/swirl-icon/icons/swirl-icon-delete.js",
     "./components/swirl-icon/icons/swirl-icon-description.js",
     "./components/swirl-icon/icons/swirl-icon-discover.js",
     "./components/swirl-icon/icons/swirl-icon-dock-left.js",
+    "./components/swirl-icon/icons/swirl-icon-dot.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-right.js",
     "./components/swirl-icon/icons/swirl-icon-download.js",
@@ -152,8 +154,10 @@
     "./components/swirl-icon/icons/swirl-icon-insert-below.js",
     "./components/swirl-icon/icons/swirl-icon-insert-on-top.js",
     "./components/swirl-icon/icons/swirl-icon-inventory.js",
+    "./components/swirl-icon/icons/swirl-icon-light-mode.js",
     "./components/swirl-icon/icons/swirl-icon-like.js",
     "./components/swirl-icon/icons/swirl-icon-link.js",
+    "./components/swirl-icon/icons/swirl-icon-lock-open.js",
     "./components/swirl-icon/icons/swirl-icon-lock-person.js",
     "./components/swirl-icon/icons/swirl-icon-lock.js",
     "./components/swirl-icon/icons/swirl-icon-logout.js",
@@ -184,6 +188,7 @@
     "./components/swirl-icon/icons/swirl-icon-person-off.js",
     "./components/swirl-icon/icons/swirl-icon-person.js",
     "./components/swirl-icon/icons/swirl-icon-phone.js",
+    "./components/swirl-icon/icons/swirl-icon-photo-camera.js",
     "./components/swirl-icon/icons/swirl-icon-play-arrow.js",
     "./components/swirl-icon/icons/swirl-icon-poll.js",
     "./components/swirl-icon/icons/swirl-icon-print.js",
@@ -221,6 +226,7 @@
     "./components/swirl-icon/icons/swirl-icon-visibility.js",
     "./components/swirl-icon/icons/swirl-icon-voice.js",
     "./components/swirl-icon/icons/swirl-icon-warning.js",
+    "./components/swirl-icon/icons/swirl-icon-work.js",
     "./components/swirl-image-grid/swirl-image-grid.js",
     "./components/swirl-lightbox/swirl-lightbox.js",
     "./components/swirl-list/swirl-list.js",

package/dist/collection/components/swirl-icon/icons/swirl-icon-dark-mode.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 SwirlIconDarkMode {
+  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: "M8 13.9998C6.32222 13.9998 4.90267 13.4191 3.74133 12.2578C2.58044 11.0969 2 9.67755 2 7.99977C2 6.46644 2.5 5.13577 3.5 4.00777C4.5 2.88022 5.77778 2.22199 7.33333 2.03311C7.61111 1.99977 7.82778 2.09977 7.98333 2.33311C8.13889 2.56644 8.13333 2.81088 7.96667 3.06644C7.77778 3.35533 7.636 3.66088 7.54133 3.98311C7.44711 4.30533 7.4 4.64422 7.4 4.99977C7.4 5.99977 7.75 6.84977 8.45 7.54977C9.15 8.24977 10 8.59977 11 8.59977C11.3444 8.59977 11.6862 8.54977 12.0253 8.44977C12.364 8.34977 12.6667 8.21088 12.9333 8.03311C13.1667 7.87755 13.4056 7.86911 13.65 8.00777C13.8944 8.14688 14 8.36644 13.9667 8.66644C13.8111 10.1998 13.1584 11.472 12.0087 12.4831C10.8584 13.4942 9.52222 13.9998 8 13.9998ZM8 12.6664C8.97778 12.6664 9.85556 12.3971 10.6333 11.8584C11.4111 11.3193 11.9778 10.6164 12.3333 9.74977C12.1111 9.80533 11.8889 9.84977 11.6667 9.88311C11.4444 9.91644 11.2222 9.9331 11 9.9331C9.63333 9.9331 8.46933 9.45266 7.508 8.49177C6.54711 7.53044 6.06667 6.36644 6.06667 4.99977C6.06667 4.77755 6.08333 4.55533 6.11667 4.33311C6.15 4.11088 6.19444 3.88866 6.25 3.66644C5.38333 4.02199 4.68067 4.58866 4.142 5.36644C3.60289 6.14422 3.33333 7.02199 3.33333 7.99977C3.33333 9.28866 3.78889 10.3887 4.7 11.2998C5.61111 12.2109 6.71111 12.6664 8 12.6664Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 20.9999C9.48333 20.9999 7.354 20.1289 5.612 18.3869C3.87067 16.6456 3 14.5166 3 11.9999C3 9.6999 3.75 7.7039 5.25 6.0119C6.75 4.32057 8.66667 3.33324 11 3.0499C11.4167 2.9999 11.7417 3.1499 11.975 3.4999C12.2083 3.8499 12.2 4.21657 11.95 4.5999C11.6667 5.03324 11.454 5.49157 11.312 5.9749C11.1707 6.45824 11.1 6.96657 11.1 7.4999C11.1 8.9999 11.625 10.2749 12.675 11.3249C13.725 12.3749 15 12.8999 16.5 12.8999C17.0167 12.8999 17.5293 12.8249 18.038 12.6749C18.546 12.5249 19 12.3166 19.4 12.0499C19.75 11.8166 20.1083 11.8039 20.475 12.0119C20.8417 12.2206 21 12.5499 20.95 12.9999C20.7167 15.2999 19.7377 17.2082 18.013 18.7249C16.2877 20.2416 14.2833 20.9999 12 20.9999ZM12 18.9999C13.4667 18.9999 14.7833 18.5959 15.95 17.7879C17.1167 16.9792 17.9667 15.9249 18.5 14.6249C18.1667 14.7082 17.8333 14.7749 17.5 14.8249C17.1667 14.8749 16.8333 14.8999 16.5 14.8999C14.45 14.8999 12.704 14.1792 11.262 12.7379C9.82067 11.2959 9.1 9.5499 9.1 7.4999C9.1 7.16657 9.125 6.83324 9.175 6.4999C9.225 6.16657 9.29167 5.83324 9.375 5.4999C8.075 6.03324 7.021 6.88324 6.213 8.0499C5.40433 9.21657 5 10.5332 5 11.9999C5 13.9332 5.68333 15.5832 7.05 16.9499C8.41667 18.3166 10.0667 18.9999 12 18.9999Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 24.5C11.0639 24.5 8.57967 23.4838 6.54733 21.4515C4.51578 19.4199 3.5 16.9361 3.5 14C3.5 11.3166 4.375 8.98797 6.125 7.01397C7.875 5.04075 10.1111 3.88886 12.8333 3.5583C13.3194 3.49997 13.6986 3.67497 13.9708 4.0833C14.2431 4.49163 14.2333 4.91941 13.9417 5.36663C13.6111 5.87219 13.363 6.40691 13.1973 6.9708C13.0324 7.53469 12.95 8.12774 12.95 8.74997C12.95 10.5 13.5625 11.9875 14.7875 13.2125C16.0125 14.4375 17.5 15.05 19.25 15.05C19.8528 15.05 20.4509 14.9625 21.0443 14.7875C21.637 14.6125 22.1667 14.3694 22.6333 14.0583C23.0417 13.7861 23.4597 13.7713 23.8875 14.014C24.3153 14.2574 24.5 14.6416 24.4417 15.1666C24.1694 17.85 23.0273 20.0764 21.0152 21.8458C19.0023 23.6152 16.6639 24.5 14 24.5ZM14 22.1666C15.7111 22.1666 17.2472 21.6953 18.6083 20.7526C19.9694 19.8092 20.9611 18.5791 21.5833 17.0625C21.1944 17.1597 20.8056 17.2375 20.4167 17.2958C20.0278 17.3541 19.6389 17.3833 19.25 17.3833C16.8583 17.3833 14.8213 16.5425 13.139 14.861C11.4574 13.1786 10.6167 11.1416 10.6167 8.74997C10.6167 8.36108 10.6458 7.97219 10.7042 7.5833C10.7625 7.19441 10.8403 6.80552 10.9375 6.41663C9.42083 7.03886 8.19117 8.03052 7.2485 9.39163C6.30506 10.7527 5.83333 12.2889 5.83333 14C5.83333 16.2555 6.63056 18.1805 8.225 19.775C9.81944 21.3694 11.7444 22.1666 14 22.1666Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-dark-mode"; }
+  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-dot.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 SwirlIconDot {
+  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: "M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M17.5 14C17.5 15.933 15.933 17.5 14 17.5C12.067 17.5 10.5 15.933 10.5 14C10.5 12.067 12.067 10.5 14 10.5C15.933 10.5 17.5 12.067 17.5 14Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-dot"; }
+  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-light-mode.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 SwirlIconLightMode {
+  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("g", { "clip-path": "url(#clip0_1234_73)" }, h("path", { d: "M8.00002 9.99984C8.55558 9.99984 9.0278 9.80539 9.41669 9.4165C9.80558 9.02762 10 8.55539 10 7.99984C10 7.44428 9.80558 6.97206 9.41669 6.58317C9.0278 6.19428 8.55558 5.99984 8.00002 5.99984C7.44447 5.99984 6.97224 6.19428 6.58335 6.58317C6.19446 6.97206 6.00002 7.44428 6.00002 7.99984C6.00002 8.55539 6.19446 9.02762 6.58335 9.4165C6.97224 9.80539 7.44447 9.99984 8.00002 9.99984ZM8.00002 11.3332C7.0778 11.3332 6.2918 11.0081 5.64202 10.3578C4.9918 9.70806 4.66669 8.92206 4.66669 7.99984C4.66669 7.07762 4.9918 6.29139 5.64202 5.64117C6.2918 4.99139 7.0778 4.6665 8.00002 4.6665C8.92224 4.6665 9.70847 4.99139 10.3587 5.64117C11.0085 6.29139 11.3334 7.07762 11.3334 7.99984C11.3334 8.92206 11.0085 9.70806 10.3587 10.3578C9.70847 11.0081 8.92224 11.3332 8.00002 11.3332ZM1.33335 8.6665C1.14446 8.6665 0.986243 8.6025 0.858687 8.4745C0.730687 8.34695 0.666687 8.18873 0.666687 7.99984C0.666687 7.81095 0.730687 7.6525 0.858687 7.5245C0.986243 7.39695 1.14446 7.33317 1.33335 7.33317H2.66669C2.85558 7.33317 3.01402 7.39695 3.14202 7.5245C3.26958 7.6525 3.33335 7.81095 3.33335 7.99984C3.33335 8.18873 3.26958 8.34695 3.14202 8.4745C3.01402 8.6025 2.85558 8.6665 2.66669 8.6665H1.33335ZM13.3334 8.6665C13.1445 8.6665 12.9862 8.6025 12.8587 8.4745C12.7307 8.34695 12.6667 8.18873 12.6667 7.99984C12.6667 7.81095 12.7307 7.6525 12.8587 7.5245C12.9862 7.39695 13.1445 7.33317 13.3334 7.33317H14.6667C14.8556 7.33317 15.0138 7.39695 15.1414 7.5245C15.2694 7.6525 15.3334 7.81095 15.3334 7.99984C15.3334 8.18873 15.2694 8.34695 15.1414 8.4745C15.0138 8.6025 14.8556 8.6665 14.6667 8.6665H13.3334ZM8.00002 3.33317C7.81113 3.33317 7.65291 3.26917 7.52535 3.14117C7.39735 3.01362 7.33335 2.85539 7.33335 2.6665V1.33317C7.33335 1.14428 7.39735 0.985837 7.52535 0.857837C7.65291 0.730282 7.81113 0.666504 8.00002 0.666504C8.18891 0.666504 8.34735 0.730282 8.47535 0.857837C8.60291 0.985837 8.66669 1.14428 8.66669 1.33317V2.6665C8.66669 2.85539 8.60291 3.01362 8.47535 3.14117C8.34735 3.26917 8.18891 3.33317 8.00002 3.33317ZM8.00002 15.3332C7.81113 15.3332 7.65291 15.2692 7.52535 15.1412C7.39735 15.0136 7.33335 14.8554 7.33335 14.6665V13.3332C7.33335 13.1443 7.39735 12.9861 7.52535 12.8585C7.65291 12.7305 7.81113 12.6665 8.00002 12.6665C8.18891 12.6665 8.34735 12.7305 8.47535 12.8585C8.60291 12.9861 8.66669 13.1443 8.66669 13.3332V14.6665C8.66669 14.8554 8.60291 15.0136 8.47535 15.1412C8.34735 15.2692 8.18891 15.3332 8.00002 15.3332ZM3.76669 4.69984L3.05002 3.99984C2.91669 3.87762 2.85269 3.72206 2.85802 3.53317C2.8638 3.34428 2.9278 3.18317 3.05002 3.04984C3.18335 2.9165 3.34446 2.84984 3.53335 2.84984C3.72224 2.84984 3.8778 2.9165 4.00002 3.04984L4.70002 3.7665C4.82224 3.89984 4.88335 4.05539 4.88335 4.23317C4.88335 4.41095 4.82224 4.5665 4.70002 4.69984C4.5778 4.83317 4.42513 4.89695 4.24202 4.89117C4.05846 4.88584 3.90002 4.82206 3.76669 4.69984ZM12 12.9498L11.3 12.2332C11.1778 12.0998 11.1167 11.9416 11.1167 11.7585C11.1167 11.5749 11.1778 11.4221 11.3 11.2998C11.4222 11.1665 11.5751 11.1027 11.7587 11.1085C11.9418 11.1138 12.1 11.1776 12.2334 11.2998L12.95 11.9998C13.0834 12.1221 13.1474 12.2776 13.142 12.4665C13.1362 12.6554 13.0722 12.8165 12.95 12.9498C12.8167 13.0832 12.6556 13.1498 12.4667 13.1498C12.2778 13.1498 12.1222 13.0832 12 12.9498ZM11.3 4.69984C11.1667 4.57762 11.1029 4.42473 11.1087 4.24117C11.114 4.05806 11.1778 3.89984 11.3 3.7665L12 3.04984C12.1222 2.9165 12.2778 2.8525 12.4667 2.85784C12.6556 2.86362 12.8167 2.92761 12.95 3.04984C13.0834 3.18317 13.15 3.34428 13.15 3.53317C13.15 3.72206 13.0834 3.87762 12.95 3.99984L12.2334 4.69984C12.1 4.82206 11.9445 4.88317 11.7667 4.88317C11.5889 4.88317 11.4334 4.82206 11.3 4.69984ZM3.05002 12.9498C2.91669 12.8165 2.85002 12.6554 2.85002 12.4665C2.85002 12.2776 2.91669 12.1221 3.05002 11.9998L3.76669 11.2998C3.90002 11.1776 4.05846 11.1165 4.24202 11.1165C4.42513 11.1165 4.5778 11.1776 4.70002 11.2998C4.83335 11.4221 4.89735 11.5749 4.89202 11.7585C4.88624 11.9416 4.82224 12.0998 4.70002 12.2332L4.00002 12.9498C3.8778 13.0832 3.72224 13.1469 3.53335 13.1412C3.34446 13.1358 3.18335 13.0721 3.05002 12.9498Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_1234_73" }, h("rect", { width: "16", height: "16", fill: "currentColor" }))))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 15C12.8333 15 13.5417 14.7083 14.125 14.125C14.7083 13.5417 15 12.8333 15 12C15 11.1667 14.7083 10.4583 14.125 9.875C13.5417 9.29167 12.8333 9 12 9C11.1667 9 10.4583 9.29167 9.875 9.875C9.29167 10.4583 9 11.1667 9 12C9 12.8333 9.29167 13.5417 9.875 14.125C10.4583 14.7083 11.1667 15 12 15ZM12 17C10.6167 17 9.43767 16.5123 8.463 15.537C7.48767 14.5623 7 13.3833 7 12C7 10.6167 7.48767 9.43733 8.463 8.462C9.43767 7.48733 10.6167 7 12 7C13.3833 7 14.5627 7.48733 15.538 8.462C16.5127 9.43733 17 10.6167 17 12C17 13.3833 16.5127 14.5623 15.538 15.537C14.5627 16.5123 13.3833 17 12 17ZM2 13C1.71667 13 1.47933 12.904 1.288 12.712C1.096 12.5207 1 12.2833 1 12C1 11.7167 1.096 11.479 1.288 11.287C1.47933 11.0957 1.71667 11 2 11H4C4.28333 11 4.521 11.0957 4.713 11.287C4.90433 11.479 5 11.7167 5 12C5 12.2833 4.90433 12.5207 4.713 12.712C4.521 12.904 4.28333 13 4 13H2ZM20 13C19.7167 13 19.4793 12.904 19.288 12.712C19.096 12.5207 19 12.2833 19 12C19 11.7167 19.096 11.479 19.288 11.287C19.4793 11.0957 19.7167 11 20 11H22C22.2833 11 22.5207 11.0957 22.712 11.287C22.904 11.479 23 11.7167 23 12C23 12.2833 22.904 12.5207 22.712 12.712C22.5207 12.904 22.2833 13 22 13H20ZM12 5C11.7167 5 11.4793 4.904 11.288 4.712C11.096 4.52067 11 4.28333 11 4V2C11 1.71667 11.096 1.479 11.288 1.287C11.4793 1.09567 11.7167 1 12 1C12.2833 1 12.521 1.09567 12.713 1.287C12.9043 1.479 13 1.71667 13 2V4C13 4.28333 12.9043 4.52067 12.713 4.712C12.521 4.904 12.2833 5 12 5ZM12 23C11.7167 23 11.4793 22.904 11.288 22.712C11.096 22.5207 11 22.2833 11 22V20C11 19.7167 11.096 19.4793 11.288 19.288C11.4793 19.096 11.7167 19 12 19C12.2833 19 12.521 19.096 12.713 19.288C12.9043 19.4793 13 19.7167 13 20V22C13 22.2833 12.9043 22.5207 12.713 22.712C12.521 22.904 12.2833 23 12 23ZM5.65 7.05L4.575 6C4.375 5.81667 4.279 5.58333 4.287 5.3C4.29567 5.01667 4.39167 4.775 4.575 4.575C4.775 4.375 5.01667 4.275 5.3 4.275C5.58333 4.275 5.81667 4.375 6 4.575L7.05 5.65C7.23333 5.85 7.325 6.08333 7.325 6.35C7.325 6.61667 7.23333 6.85 7.05 7.05C6.86667 7.25 6.63767 7.34567 6.363 7.337C6.08767 7.329 5.85 7.23333 5.65 7.05ZM18 19.425L16.95 18.35C16.7667 18.15 16.675 17.9127 16.675 17.638C16.675 17.3627 16.7667 17.1333 16.95 16.95C17.1333 16.75 17.3627 16.6543 17.638 16.663C17.9127 16.671 18.15 16.7667 18.35 16.95L19.425 18C19.625 18.1833 19.721 18.4167 19.713 18.7C19.7043 18.9833 19.6083 19.225 19.425 19.425C19.225 19.625 18.9833 19.725 18.7 19.725C18.4167 19.725 18.1833 19.625 18 19.425ZM16.95 7.05C16.75 6.86667 16.6543 6.63733 16.663 6.362C16.671 6.08733 16.7667 5.85 16.95 5.65L18 4.575C18.1833 4.375 18.4167 4.279 18.7 4.287C18.9833 4.29567 19.225 4.39167 19.425 4.575C19.625 4.775 19.725 5.01667 19.725 5.3C19.725 5.58333 19.625 5.81667 19.425 6L18.35 7.05C18.15 7.23333 17.9167 7.325 17.65 7.325C17.3833 7.325 17.15 7.23333 16.95 7.05ZM4.575 19.425C4.375 19.225 4.275 18.9833 4.275 18.7C4.275 18.4167 4.375 18.1833 4.575 18L5.65 16.95C5.85 16.7667 6.08767 16.675 6.363 16.675C6.63767 16.675 6.86667 16.7667 7.05 16.95C7.25 17.1333 7.346 17.3627 7.338 17.638C7.32933 17.9127 7.23333 18.15 7.05 18.35L6 19.425C5.81667 19.625 5.58333 19.7207 5.3 19.712C5.01667 19.704 4.775 19.6083 4.575 19.425Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 17.4998C14.9722 17.4998 15.7986 17.1596 16.4792 16.479C17.1597 15.7984 17.5 14.9721 17.5 13.9998C17.5 13.0276 17.1597 12.2012 16.4792 11.5207C15.7986 10.8401 14.9722 10.4998 14 10.4998C13.0278 10.4998 12.2014 10.8401 11.5208 11.5207C10.8403 12.2012 10.5 13.0276 10.5 13.9998C10.5 14.9721 10.8403 15.7984 11.5208 16.479C12.2014 17.1596 13.0278 17.4998 14 17.4998ZM14 19.8332C12.3861 19.8332 11.0106 19.2642 9.87349 18.1263C8.7356 16.9892 8.16666 15.6137 8.16666 13.9998C8.16666 12.3859 8.7356 11.0101 9.87349 9.87217C11.0106 8.73506 12.3861 8.1665 14 8.1665C15.6139 8.1665 16.9898 8.73506 18.1277 9.87217C19.2648 11.0101 19.8333 12.3859 19.8333 13.9998C19.8333 15.6137 19.2648 16.9892 18.1277 18.1263C16.9898 19.2642 15.6139 19.8332 14 19.8332ZM2.33332 15.1665C2.00277 15.1665 1.72588 15.0545 1.50266 14.8305C1.27866 14.6073 1.16666 14.3304 1.16666 13.9998C1.16666 13.6693 1.27866 13.392 1.50266 13.168C1.72588 12.9448 2.00277 12.8332 2.33332 12.8332H4.66666C4.99721 12.8332 5.27449 12.9448 5.49849 13.168C5.72171 13.392 5.83332 13.6693 5.83332 13.9998C5.83332 14.3304 5.72171 14.6073 5.49849 14.8305C5.27449 15.0545 4.99721 15.1665 4.66666 15.1665H2.33332ZM23.3333 15.1665C23.0028 15.1665 22.7259 15.0545 22.5027 14.8305C22.2787 14.6073 22.1667 14.3304 22.1667 13.9998C22.1667 13.6693 22.2787 13.392 22.5027 13.168C22.7259 12.9448 23.0028 12.8332 23.3333 12.8332H25.6667C25.9972 12.8332 26.2741 12.9448 26.4973 13.168C26.7213 13.392 26.8333 13.6693 26.8333 13.9998C26.8333 14.3304 26.7213 14.6073 26.4973 14.8305C26.2741 15.0545 25.9972 15.1665 25.6667 15.1665H23.3333ZM14 5.83317C13.6694 5.83317 13.3925 5.72117 13.1693 5.49717C12.9453 5.27395 12.8333 4.99706 12.8333 4.6665V2.33317C12.8333 2.00261 12.9453 1.72534 13.1693 1.50134C13.3925 1.27811 13.6694 1.1665 14 1.1665C14.3305 1.1665 14.6078 1.27811 14.8318 1.50134C15.055 1.72534 15.1667 2.00261 15.1667 2.33317V4.6665C15.1667 4.99706 15.055 5.27395 14.8318 5.49717C14.6078 5.72117 14.3305 5.83317 14 5.83317ZM14 26.8332C13.6694 26.8332 13.3925 26.7212 13.1693 26.4972C12.9453 26.2739 12.8333 25.9971 12.8333 25.6665V23.3332C12.8333 23.0026 12.9453 22.7257 13.1693 22.5025C13.3925 22.2785 13.6694 22.1665 14 22.1665C14.3305 22.1665 14.6078 22.2785 14.8318 22.5025C15.055 22.7257 15.1667 23.0026 15.1667 23.3332V25.6665C15.1667 25.9971 15.055 26.2739 14.8318 26.4972C14.6078 26.7212 14.3305 26.8332 14 26.8332ZM6.59166 8.22484L5.33749 6.99984C5.10416 6.78595 4.99216 6.51373 5.00149 6.18317C5.0116 5.85262 5.1236 5.57067 5.33749 5.33734C5.57082 5.104 5.85277 4.98734 6.18332 4.98734C6.51388 4.98734 6.7861 5.104 6.99999 5.33734L8.22499 6.5915C8.43888 6.82484 8.54582 7.09706 8.54582 7.40817C8.54582 7.71928 8.43888 7.9915 8.22499 8.22484C8.0111 8.45817 7.74393 8.56978 7.42349 8.55967C7.10227 8.55034 6.82499 8.43873 6.59166 8.22484ZM21 22.6623L19.775 21.4082C19.5611 21.1748 19.4542 20.8979 19.4542 20.5775C19.4542 20.2563 19.5611 19.9887 19.775 19.7748C19.9889 19.5415 20.2564 19.4299 20.5777 19.44C20.8981 19.4493 21.175 19.5609 21.4083 19.7748L22.6625 20.9998C22.8958 21.2137 23.0078 21.4859 22.9985 21.8165C22.9884 22.1471 22.8764 22.429 22.6625 22.6623C22.4292 22.8957 22.1472 23.0123 21.8167 23.0123C21.4861 23.0123 21.2139 22.8957 21 22.6623ZM19.775 8.22484C19.5417 8.01095 19.43 7.74339 19.4402 7.42217C19.4495 7.10173 19.5611 6.82484 19.775 6.5915L21 5.33734C21.2139 5.104 21.4861 4.992 21.8167 5.00134C22.1472 5.01145 22.4292 5.12345 22.6625 5.33734C22.8958 5.57067 23.0125 5.85262 23.0125 6.18317C23.0125 6.51373 22.8958 6.78595 22.6625 6.99984L21.4083 8.22484C21.175 8.43873 20.9028 8.54567 20.5917 8.54567C20.2805 8.54567 20.0083 8.43873 19.775 8.22484ZM5.33749 22.6623C5.10416 22.429 4.98749 22.1471 4.98749 21.8165C4.98749 21.4859 5.10416 21.2137 5.33749 20.9998L6.59166 19.7748C6.82499 19.5609 7.10227 19.454 7.42349 19.454C7.74393 19.454 8.0111 19.5609 8.22499 19.7748C8.45832 19.9887 8.57032 20.2563 8.56099 20.5775C8.55088 20.8979 8.43888 21.1748 8.22499 21.4082L6.99999 22.6623C6.7861 22.8957 6.51388 23.0073 6.18332 22.9972C5.85277 22.9878 5.57082 22.8762 5.33749 22.6623Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-light-mode"; }
+  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-lock-open.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 SwirlIconLockOpen {
+  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.99999 5.33317H9.99999V3.99984C9.99999 3.44428 9.80555 2.97206 9.41666 2.58317C9.02777 2.19428 8.55555 1.99984 7.99999 1.99984C7.44443 1.99984 6.97221 2.19428 6.58332 2.58317C6.19443 2.97206 5.99999 3.44428 5.99999 3.99984H4.66666C4.66666 3.07762 4.99166 2.2915 5.64166 1.6415C6.29166 0.991504 7.07777 0.666504 7.99999 0.666504C8.92221 0.666504 9.70832 0.991504 10.3583 1.6415C11.0083 2.2915 11.3333 3.07762 11.3333 3.99984V5.33317H12C12.3667 5.33317 12.6805 5.46373 12.9417 5.72484C13.2028 5.98595 13.3333 6.29984 13.3333 6.6665V13.3332C13.3333 13.6998 13.2028 14.0137 12.9417 14.2748C12.6805 14.5359 12.3667 14.6665 12 14.6665H3.99999C3.63332 14.6665 3.31943 14.5359 3.05832 14.2748C2.79721 14.0137 2.66666 13.6998 2.66666 13.3332V6.6665C2.66666 6.29984 2.79721 5.98595 3.05832 5.72484C3.31943 5.46373 3.63332 5.33317 3.99999 5.33317ZM3.99999 13.3332H12V6.6665H3.99999V13.3332ZM7.99999 11.3332C8.36666 11.3332 8.68055 11.2026 8.94166 10.9415C9.20277 10.6804 9.33332 10.3665 9.33332 9.99984C9.33332 9.63317 9.20277 9.31928 8.94166 9.05817C8.68055 8.79706 8.36666 8.6665 7.99999 8.6665C7.63332 8.6665 7.31943 8.79706 7.05832 9.05817C6.79721 9.31928 6.66666 9.63317 6.66666 9.99984C6.66666 10.3665 6.79721 10.6804 7.05832 10.9415C7.31943 11.2026 7.63332 11.3332 7.99999 11.3332Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 8H15V6C15 5.16667 14.7083 4.45833 14.125 3.875C13.5417 3.29167 12.8333 3 12 3C11.1667 3 10.4583 3.29167 9.875 3.875C9.29167 4.45833 9 5.16667 9 6H7C7 4.61667 7.4875 3.4375 8.4625 2.4625C9.4375 1.4875 10.6167 1 12 1C13.3833 1 14.5625 1.4875 15.5375 2.4625C16.5125 3.4375 17 4.61667 17 6V8H18C18.55 8 19.0208 8.19583 19.4125 8.5875C19.8042 8.97917 20 9.45 20 10V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V10C4 9.45 4.19583 8.97917 4.5875 8.5875C4.97917 8.19583 5.45 8 6 8ZM6 20H18V10H6V20ZM12 17C12.55 17 13.0208 16.8042 13.4125 16.4125C13.8042 16.0208 14 15.55 14 15C14 14.45 13.8042 13.9792 13.4125 13.5875C13.0208 13.1958 12.55 13 12 13C11.45 13 10.9792 13.1958 10.5875 13.5875C10.1958 13.9792 10 14.45 10 15C10 15.55 10.1958 16.0208 10.5875 16.4125C10.9792 16.8042 11.45 17 12 17Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M6.99999 9.33317H17.5V6.99984C17.5 6.02761 17.1597 5.20123 16.4792 4.52067C15.7986 3.84011 14.9722 3.49984 14 3.49984C13.0278 3.49984 12.2014 3.84011 11.5208 4.52067C10.8403 5.20123 10.5 6.02761 10.5 6.99984H8.16666C8.16666 5.38595 8.73541 4.01025 9.87291 2.87275C11.0104 1.73525 12.3861 1.1665 14 1.1665C15.6139 1.1665 16.9896 1.73525 18.1271 2.87275C19.2646 4.01025 19.8333 5.38595 19.8333 6.99984V9.33317H21C21.6417 9.33317 22.191 9.56164 22.6479 10.0186C23.1049 10.4755 23.3333 11.0248 23.3333 11.6665V23.3332C23.3333 23.9748 23.1049 24.5241 22.6479 24.9811C22.191 25.438 21.6417 25.6665 21 25.6665H6.99999C6.35832 25.6665 5.80902 25.438 5.35207 24.9811C4.89513 24.5241 4.66666 23.9748 4.66666 23.3332V11.6665C4.66666 11.0248 4.89513 10.4755 5.35207 10.0186C5.80902 9.56164 6.35832 9.33317 6.99999 9.33317ZM6.99999 23.3332H21V11.6665H6.99999V23.3332ZM14 19.8332C14.6417 19.8332 15.191 19.6047 15.6479 19.1478C16.1049 18.6908 16.3333 18.1415 16.3333 17.4998C16.3333 16.8582 16.1049 16.3089 15.6479 15.8519C15.191 15.395 14.6417 15.1665 14 15.1665C13.3583 15.1665 12.809 15.395 12.3521 15.8519C11.8951 16.3089 11.6667 16.8582 11.6667 17.4998C11.6667 18.1415 11.8951 18.6908 12.3521 19.1478C12.809 19.6047 13.3583 19.8332 14 19.8332Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-lock-open"; }
+  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-photo-camera.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 SwirlIconPhotoCamera {
+  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.99998 11.6667C8.83331 11.6667 9.54176 11.3751 10.1253 10.792C10.7084 10.2084 11 9.5 11 8.66667C11 7.83333 10.7084 7.12489 10.1253 6.54133C9.54176 5.95822 8.83331 5.66667 7.99998 5.66667C7.16665 5.66667 6.4582 5.95822 5.87465 6.54133C5.29154 7.12489 4.99998 7.83333 4.99998 8.66667C4.99998 9.5 5.29154 10.2084 5.87465 10.792C6.4582 11.3751 7.16665 11.6667 7.99998 11.6667ZM2.66665 14C2.29998 14 1.9862 13.8696 1.72531 13.6087C1.46398 13.3473 1.33331 13.0333 1.33331 12.6667V4.66667C1.33331 4.3 1.46398 3.98622 1.72531 3.72533C1.9862 3.464 2.29998 3.33333 2.66665 3.33333H4.76665L5.59998 2.43333C5.7222 2.28889 5.86931 2.18044 6.04131 2.108C6.21376 2.036 6.39442 2 6.58331 2H9.41665C9.60553 2 9.7862 2.036 9.95865 2.108C10.1306 2.18044 10.2778 2.28889 10.4 2.43333L11.2333 3.33333H13.3333C13.7 3.33333 14.014 3.464 14.2753 3.72533C14.5362 3.98622 14.6666 4.3 14.6666 4.66667V12.6667C14.6666 13.0333 14.5362 13.3473 14.2753 13.6087C14.014 13.8696 13.7 14 13.3333 14H2.66665ZM13.3333 12.6667V4.66667H2.66665V12.6667H13.3333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 17.5C13.25 17.5 14.3127 17.0627 15.188 16.188C16.0627 15.3127 16.5 14.25 16.5 13C16.5 11.75 16.0627 10.6873 15.188 9.812C14.3127 8.93733 13.25 8.5 12 8.5C10.75 8.5 9.68733 8.93733 8.812 9.812C7.93733 10.6873 7.5 11.75 7.5 13C7.5 14.25 7.93733 15.3127 8.812 16.188C9.68733 17.0627 10.75 17.5 12 17.5ZM4 21C3.45 21 2.97933 20.8043 2.588 20.413C2.196 20.021 2 19.55 2 19V7C2 6.45 2.196 5.97933 2.588 5.588C2.97933 5.196 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.43333 8.804 3.27067 9.062 3.162C9.32067 3.054 9.59167 3 9.875 3H14.125C14.4083 3 14.6793 3.054 14.938 3.162C15.196 3.27067 15.4167 3.43333 15.6 3.65L16.85 5H20C20.55 5 21.021 5.196 21.413 5.588C21.8043 5.97933 22 6.45 22 7V19C22 19.55 21.8043 20.021 21.413 20.413C21.021 20.8043 20.55 21 20 21H4ZM20 19V7H4V19H20Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 20.4167C15.4583 20.4167 16.6981 19.9064 17.7193 18.886C18.7398 17.8648 19.25 16.625 19.25 15.1667C19.25 13.7083 18.7398 12.4686 17.7193 11.4473C16.6981 10.4269 15.4583 9.91667 14 9.91667C12.5416 9.91667 11.3019 10.4269 10.2806 11.4473C9.2602 12.4686 8.74998 13.7083 8.74998 15.1667C8.74998 16.625 9.2602 17.8648 10.2806 18.886C11.3019 19.9064 12.5416 20.4167 14 20.4167ZM4.66665 24.5C4.02498 24.5 3.47587 24.2717 3.01931 23.8152C2.56198 23.3578 2.33331 22.8083 2.33331 22.1667V8.16667C2.33331 7.525 2.56198 6.97589 3.01931 6.51933C3.47587 6.062 4.02498 5.83333 4.66665 5.83333H8.34165L9.79998 4.25833C10.0139 4.00556 10.2713 3.81578 10.5723 3.689C10.8741 3.563 11.1903 3.5 11.5208 3.5H16.4791C16.8097 3.5 17.1259 3.563 17.4276 3.689C17.7286 3.81578 17.9861 4.00556 18.2 4.25833L19.6583 5.83333H23.3333C23.975 5.83333 24.5245 6.062 24.9818 6.51933C25.4384 6.97589 25.6666 7.525 25.6666 8.16667V22.1667C25.6666 22.8083 25.4384 23.3578 24.9818 23.8152C24.5245 24.2717 23.975 24.5 23.3333 24.5H4.66665ZM23.3333 22.1667V8.16667H4.66665V22.1667H23.3333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-photo-camera"; }
+  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-work.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 SwirlIconWork {
+  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: "M2.66668 14.0002C2.30001 14.0002 1.98612 13.8696 1.72501 13.6085C1.4639 13.3474 1.33334 13.0335 1.33334 12.6668V5.3335C1.33334 4.96683 1.4639 4.65294 1.72501 4.39183C1.98612 4.13072 2.30001 4.00016 2.66668 4.00016H5.33334V2.66683C5.33334 2.30016 5.4639 1.98627 5.72501 1.72516C5.98612 1.46405 6.30001 1.3335 6.66668 1.3335H9.33334C9.70001 1.3335 10.0139 1.46405 10.275 1.72516C10.5361 1.98627 10.6667 2.30016 10.6667 2.66683V4.00016H13.3333C13.7 4.00016 14.0139 4.13072 14.275 4.39183C14.5361 4.65294 14.6667 4.96683 14.6667 5.3335V12.6668C14.6667 13.0335 14.5361 13.3474 14.275 13.6085C14.0139 13.8696 13.7 14.0002 13.3333 14.0002H2.66668ZM2.66668 12.6668H13.3333V5.3335H2.66668V12.6668ZM6.66668 4.00016H9.33334V2.66683H6.66668V4.00016Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V8H4V19ZM10 6H14V4H10V6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-work"; }
+  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-switch/swirl-switch.js

@@ -2,62 +2,10 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlSwitch {
   constructor() {
-    this.dragging = false;
-    this.recentlyDragged = false;
     this.onChange = () => {
-      if (this.dragging) {
-        return;
-      }
-      if (this.recentlyDragged) {
-        this.recentlyDragged = false;
-        return;
-      }
       this.checked = !this.checked;
       this.valueChange.emit(this.checked);
     };
-    this.onStartDrag = () => {
-      if (this.disabled) {
-        return;
-      }
-      this.dragging = true;
-      this.thumb.style.transition = "none";
-    };
-    this.onEndDrag = () => {
-      if (this.disabled) {
-        return;
-      }
-      if (this.recentlyDragged) {
-        const controlBonds = this.control.getBoundingClientRect();
-        const thumbBounds = this.thumb.getBoundingClientRect();
-        const on = this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;
-        if (this.checked !== on) {
-          this.checked = on;
-          this.valueChange.emit(on);
-        }
-      }
-      this.thumb.style.left = "";
-      this.thumb.style.transition = "";
-      this.dragging = false;
-      setTimeout(() => {
-        this.recentlyDragged = false;
-      });
-    };
-    this.onDrag = (event) => {
-      if (!this.dragging) {
-        return;
-      }
-      this.recentlyDragged = true;
-      const controlBonds = this.control.getBoundingClientRect();
-      const thumbBounds = this.thumb.getBoundingClientRect();
-      let pos = Math.round(event.offsetX - thumbBounds.width / 2);
-      if (pos < 0) {
-        pos = 0;
-      }
-      if (pos > Math.round(controlBonds.width - thumbBounds.width)) {
-        pos = Math.round(controlBonds.width - thumbBounds.width);
-      }
-      this.thumb.style.left = `${pos}px`;
-    };
     this.checked = false;
     this.disabled = false;
     this.hideLabel = undefined;
@@ -66,9 +14,6 @@ export class SwirlSwitch {
     this.label = undefined;
     this.value = undefined;
   }
-  onWindowPointerUp() {
-    this.onEndDrag();
-  }
   render() {
     const off = !this.checked;
     const on = this.checked;
@@ -78,7 +23,7 @@ export class SwirlSwitch {
       "switch--on": on,
       "switch--disabled": this.disabled,
     });
-    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "switch__control", onPointerDown: this.onStartDrag, onPointerMove: this.onDrag, onPointerUp: this.onEndDrag, ref: (el) => (this.control = el) }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "switch__thumb", ref: (el) => (this.thumb = el) })), this.label && !this.hideLabel && (h("span", { class: "switch__label" }, this.label)), this.label && this.hideLabel && (h("swirl-visually-hidden", null, this.label)))));
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "switch__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (h("span", { class: "switch__label" }, this.label)), this.label && this.hideLabel && (h("swirl-visually-hidden", null, this.label)))));
   }
   static get is() { return "swirl-switch"; }
   static get encapsulation() { return "scoped"; }
@@ -236,13 +181,4 @@ export class SwirlSwitch {
       }];
   }
   static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "pointerup",
-        "method": "onWindowPointerUp",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.css

@@ -8,7 +8,14 @@
     box-sizing: border-box;
   }
 
+  :host(:hover),
+  :host(:focus-within) {
+    z-index: 2;
+  }
+
 .table-row-group__header-row {
+  position: relative;
+  z-index: var(--s-z-10);
   padding: var(--s-space-12) var(--s-space-16);
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-surface-raised-default);
@@ -27,8 +34,8 @@
 
 .table-row-group__tooltip {
   display: inline-flex;
-  vertical-align: middle;
   margin-left: var(--s-space-4);
+  vertical-align: middle;
 }
 
 .table-row-group__tooltip-icon {

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -9,7 +9,7 @@ export class SwirlTableRowGroup {
   }
   render() {
     const rowspan = this.el.querySelectorAll("swirl-table-row").length;
-    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row" }, h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { class: "table-row-group__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "top" }, h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("slot", null)));
+    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row" }, h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { class: "table-row-group__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("slot", null)));
   }
   static get is() { return "swirl-table-row-group"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.spec.js

@@ -32,7 +32,7 @@ describe("swirl-table-row-group", () => {
             <span aria-rowspan="0" class="table-row-group__label" role="rowheader">
               Label
               <span class="table-row-group__tooltip">
-                <swirl-tooltip content="Test" position="top">
+                <swirl-tooltip content="Test" position="top" positioning="fixed">
                   <swirl-icon-info class="table-row-group__tooltip-icon" size="16" tabindex="0"></swirl-icon-info>
                 </swirl-tooltip>
               </span>

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

@@ -60,12 +60,13 @@ export class SwirlTooltip {
       this.options = {
         middleware: [offset(margin), shift(), flip()],
         placement: this.position,
-        strategy: "absolute",
+        strategy: this.positioning,
       };
     };
     this.content = undefined;
     this.delay = 300;
     this.position = "top";
+    this.positioning = "absolute";
     this.actualPosition = undefined;
     this.arrowStyles = undefined;
     this.visible = false;
@@ -102,6 +103,7 @@ export class SwirlTooltip {
         left: Boolean(this.actualPosition)
           ? `${this.actualPosition?.x}px`
           : "",
+        position: this.positioning,
       } }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { class: "tooltip__content", innerHTML: this.content }))), h("span", { class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
         ...this.arrowStyles,
         visibility: this.visible ? "visible" : "hidden",
@@ -178,6 +180,29 @@ export class SwirlTooltip {
         "attribute": "position",
         "reflect": false,
         "defaultValue": "\"top\""
+      },
+      "positioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Strategy",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "Strategy": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "positioning",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
       }
     };
   }

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

@@ -5,7 +5,7 @@ const expectedVisible = `
   <span aria-describedby="tooltip" class="tooltip__reference">
     <slot></slot>
   </span>
-  <span class="tooltip__popper">
+  <span class="tooltip__popper" style="position: absolute;">
     <span class="tooltip__bubble" id="tooltip" part="tooltip__bubble" role="tooltip">
       <span class="tooltip__content">
         Tooltip
@@ -19,7 +19,7 @@ const expectedHidden = `
   <span aria-describedby="tooltip" class="tooltip__reference">
     <slot></slot>
   </span>
-  <span class="tooltip__popper" style="top: 0px; left: NaNpx;">
+  <span class="tooltip__popper" style="position: absolute; top: 0px; left: NaNpx;">
     <span class="tooltip__arrow" style="visibility: hidden;"></span>
   </span>
 </span>`;