@getflip/swirl-components 0.80.0 → 0.81.0

package/dist/collection/collection-manifest.json

@@ -118,6 +118,7 @@
     "./components/swirl-icon/icons/swirl-icon-filter.js",
     "./components/swirl-icon/icons/swirl-icon-folder-shared.js",
     "./components/swirl-icon/icons/swirl-icon-folder.js",
+    "./components/swirl-icon/icons/swirl-icon-format-h-one.js",
     "./components/swirl-icon/icons/swirl-icon-fullscreen-exit.js",
     "./components/swirl-icon/icons/swirl-icon-fullscreen.js",
     "./components/swirl-icon/icons/swirl-icon-gif.js",
@@ -151,6 +152,7 @@
     "./components/swirl-icon/icons/swirl-icon-menu-outlined.js",
     "./components/swirl-icon/icons/swirl-icon-menu.js",
     "./components/swirl-icon/icons/swirl-icon-message.js",
+    "./components/swirl-icon/icons/swirl-icon-mic.js",
     "./components/swirl-icon/icons/swirl-icon-more-horizontal.js",
     "./components/swirl-icon/icons/swirl-icon-more-vertikal.js",
     "./components/swirl-icon/icons/swirl-icon-news-filled.js",
@@ -158,7 +160,10 @@
     "./components/swirl-icon/icons/swirl-icon-notifications-active.js",
     "./components/swirl-icon/icons/swirl-icon-notifications-off.js",
     "./components/swirl-icon/icons/swirl-icon-notifications.js",
+    "./components/swirl-icon/icons/swirl-icon-open-in-full.js",
     "./components/swirl-icon/icons/swirl-icon-open-in-new.js",
+    "./components/swirl-icon/icons/swirl-icon-pause-circle.js",
+    "./components/swirl-icon/icons/swirl-icon-pause.js",
     "./components/swirl-icon/icons/swirl-icon-people-alt.js",
     "./components/swirl-icon/icons/swirl-icon-person-off.js",
     "./components/swirl-icon/icons/swirl-icon-person.js",
@@ -169,6 +174,7 @@
     "./components/swirl-icon/icons/swirl-icon-recieved.js",
     "./components/swirl-icon/icons/swirl-icon-remove.js",
     "./components/swirl-icon/icons/swirl-icon-reply.js",
+    "./components/swirl-icon/icons/swirl-icon-report.js",
     "./components/swirl-icon/icons/swirl-icon-roadmap.js",
     "./components/swirl-icon/icons/swirl-icon-search-strong.js",
     "./components/swirl-icon/icons/swirl-icon-search.js",
@@ -177,12 +183,14 @@
     "./components/swirl-icon/icons/swirl-icon-short-text.js",
     "./components/swirl-icon/icons/swirl-icon-simplify.js",
     "./components/swirl-icon/icons/swirl-icon-spellcheck.js",
+    "./components/swirl-icon/icons/swirl-icon-stop.js",
     "./components/swirl-icon/icons/swirl-icon-sync.js",
     "./components/swirl-icon/icons/swirl-icon-tasks-filled.js",
     "./components/swirl-icon/icons/swirl-icon-tasks-outlined.js",
     "./components/swirl-icon/icons/swirl-icon-time-filled.js",
     "./components/swirl-icon/icons/swirl-icon-time-outlined.js",
     "./components/swirl-icon/icons/swirl-icon-today.js",
+    "./components/swirl-icon/icons/swirl-icon-translate.js",
     "./components/swirl-icon/icons/swirl-icon-undo.js",
     "./components/swirl-icon/icons/swirl-icon-unlock-person.js",
     "./components/swirl-icon/icons/swirl-icon-user-assign.js",

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

@@ -66,6 +66,14 @@
 }
   }
 
+.button--variant-ghost.button--intent-strong:not(:disabled) {
+    color: var(--s-text-default);
+  }
+
+.button--variant-ghost.button--intent-strong:not(:disabled) .button__icon {
+      color: var(--s-icon-strong);
+    }
+
 .button--variant-ghost.button--intent-primary:not(:disabled) {
     color: var(--s-text-highlight);
   }
@@ -200,6 +208,14 @@
     padding: 0;
   }
 
+.button--variant-plain.button--intent-strong:not(:disabled) {
+    color: var(--s-text-default);
+  }
+
+.button--variant-plain.button--intent-strong:not(:disabled) .button__icon {
+      color: var(--s-icon-strong);
+    }
+
 .button--variant-plain.button--intent-primary {
     color: var(--s-interactive-primary-default);
   }
@@ -239,24 +255,20 @@
 
 .button--variant-on-image {
   color: var(--s-text-on-image);
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    rgba(255, 255, 255, 0.3);
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .button--variant-on-image:hover {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-      rgba(255, 255, 255, 0.4);
+    background: rgba(0, 0, 0, 0.5);
   }
 
 .button--variant-on-image:active {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-      rgba(255, 255, 255, 0.5);
+    background: rgba(0, 0, 0, 0.4);
   }
 
 .button--variant-on-image:disabled {
     color: var(--s-text-on-image);
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-      rgba(255, 255, 255, 0.3);
+    background: rgba(0, 0, 0, 0.3);
   }
 
 .button--variant-on-image:disabled .button__icon {

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

@@ -297,7 +297,7 @@ export class SwirlButton {
         "mutable": false,
         "complexType": {
           "original": "SwirlButtonIntent",
-          "resolved": "\"critical\" | \"default\" | \"primary\"",
+          "resolved": "\"critical\" | \"default\" | \"primary\" | \"strong\"",
           "references": {
             "SwirlButtonIntent": {
               "location": "local",

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

@@ -10,11 +10,10 @@
 
 .chip {
   display: inline-flex;
+  overflow: hidden;
   max-width: 100%;
   height: 2.5rem;
-  padding-right: var(--s-space-16);
-  padding-left: var(--s-space-16);
-  align-items: center;
+  padding: 0;
   border: 0.0625rem solid var(--s-border-default);
   border-radius: 1.25rem;
   color: var(--s-text-subdued);
@@ -23,8 +22,28 @@
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-sm);
+  flex-direction: column;
 }
 
+.chip--size-s {
+  height: 2rem;
+}
+
+.chip--size-s.chip--removable .chip__inner {
+      padding-right: calc(1.5rem + var(--s-space-12));
+    }
+
+.chip--size-s .chip__inner {
+    padding-right: var(--s-space-12);
+    padding-left: var(--s-space-12);
+  }
+
+.chip--size-s + .chip__remove-button {
+    top: var(--s-space-4);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
 .chip--interactive {
   cursor: pointer;
 }
@@ -46,7 +65,7 @@
       }
 
 .chip--interactive:hover + .chip__remove-button:active {
-        background-color: var(--s-surface-raised-pressed);
+        background-color: var(--s-surface-overlay-pressed);
       }
 
 .chip--interactive:active {
@@ -57,9 +76,17 @@
       background-color: var(--s-surface-raised-pressed);
     }
 
-.chip--removable {
-  padding-right: calc(2rem + var(--s-space-12));
-}
+.chip--interactive:active + .chip__remove-button {
+      background-color: var(--s-surface-overlay-pressed);
+    }
+
+.chip--icon-color-highlight .chip__icon {
+    color: var(--s-icon-highlight);
+  }
+
+.chip--removable .chip__inner {
+    padding-right: calc(1.875rem + var(--s-space-12));
+  }
 
 .chip--intent-critical {
   border-color: var(--s-border-critical);
@@ -85,8 +112,6 @@
 
 .chip--variant-plain {
   height: auto;
-  padding-right: 0;
-  padding-left: 0;
   border: none;
   border-radius: 0;
   background-color: transparent;
@@ -110,6 +135,33 @@
         background-color: var(--s-surface-raised-pressed);
       }
 
+.chip--variant-plain.chip--removable .chip__inner {
+      padding-right: var(--s-space-12);
+    }
+
+.chip--variant-plain + .chip__remove-button {
+    position: relative;
+    top: 0;
+    right: auto;
+  }
+
+.chip--variant-plain .chip__inner {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+.chip--has-progress + .chip__remove-button {
+    top: 0.1875rem;
+  }
+
+.chip__inner {
+  display: inline-flex;
+  height: 100%;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+  align-items: center;
+}
+
 .chip__avatar,
 .chip__icon {
   display: inline-flex;
@@ -136,13 +188,17 @@
   text-overflow: ellipsis;
 }
 
+.chip__progress-indicator {
+  width: 100%;
+}
+
 .chip__remove-button {
   position: absolute;
-  top: 50%;
+  top: 0.3125rem;
   right: var(--s-space-4);
   display: inline-flex;
-  width: 2rem;
-  height: 2rem;
+  width: 1.875rem;
+  height: 1.875rem;
   padding: 0;
   justify-content: center;
   align-items: center;
@@ -151,7 +207,6 @@
   color: var(--s-icon-default);
   background-color: var(--s-surface-overlay-default);
   cursor: pointer;
-  transform: translateY(-50%);
 }
 
 .chip__remove-button:hover {

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

@@ -12,11 +12,15 @@ export class SwirlChip {
     };
     this.borderRadius = "pill";
     this.icon = undefined;
+    this.iconColor = "default";
     this.intent = "default";
     this.interactive = false;
     this.label = undefined;
+    this.progress = undefined;
+    this.progressBarLabel = "Loading progress";
     this.removable = undefined;
     this.removeButtonLabel = "Remove";
+    this.size = "m";
     this.variant = "outline";
   }
   componentDidLoad() {
@@ -32,17 +36,19 @@ export class SwirlChip {
       return;
     }
     const icon = this.iconEl.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    const iconSize = this.size === "s" ? "16" : smallIcon ? "20" : "24";
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", iconSize);
   }
   render() {
     const Tag = this.interactive ? "button" : "span";
     const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
     const showIcon = !showAvatar && Boolean(this.icon);
-    const className = classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--intent-${this.intent}`, `chip--variant-${this.variant}`, {
+    const className = classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+      "chip--has-progress": this.progress !== undefined,
       "chip--interactive": this.interactive,
       "chip--removable": this.removable,
     });
-    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label)), this.removable && (h("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { size: 20 })))));
+    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("span", { class: "chip__inner" }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { class: "chip__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { size: 20 })))));
   }
   static get is() { return "swirl-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -98,6 +104,29 @@ export class SwirlChip {
         "attribute": "icon",
         "reflect": false
       },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlChipIconColor",
+          "resolved": "\"default\" | \"highlight\"",
+          "references": {
+            "SwirlChipIconColor": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-chip/swirl-chip.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-color",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "intent": {
         "type": "string",
         "mutable": false,
@@ -156,6 +185,41 @@ export class SwirlChip {
         "attribute": "label",
         "reflect": false
       },
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "progress",
+        "reflect": false
+      },
+      "progressBarLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "progress-bar-label",
+        "reflect": false,
+        "defaultValue": "\"Loading progress\""
+      },
       "removable": {
         "type": "boolean",
         "mutable": false,
@@ -191,6 +255,29 @@ export class SwirlChip {
         "reflect": false,
         "defaultValue": "\"Remove\""
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlChipSize",
+          "resolved": "\"m\" | \"s\"",
+          "references": {
+            "SwirlChipSize": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-chip/swirl-chip.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"m\""
+      },
       "variant": {
         "type": "string",
         "mutable": false,

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

@@ -9,8 +9,10 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip intent="critical" label="Label">
         <mock:shadow-root>
-          <span class="chip chip--border-radius-pill chip--intent-critical chip--variant-outline">
-            <span class="chip__label">Label</span>
+          <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-critical chip--size-m chip--variant-outline">
+            <span class="chip__inner">
+              <span class="chip__label">Label</span>
+            </span>
           </span>
         </mock:shadow-root>
       </swirl-chip>
@@ -24,8 +26,10 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip interactive="true" label="Label">
         <mock:shadow-root>
-          <button class="chip chip--border-radius-pill chip--intent-default chip--interactive chip--variant-outline" type="button">
-            <span class="chip__label">Label</span>
+          <button class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--interactive chip--variant-outline" type="button">
+            <span class="chip__inner">
+              <span class="chip__label">Label</span>
+            </span>
           </button>
         </mock:shadow-root>
       </swirl-chip>
@@ -39,9 +43,9 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip label="Label">
         <mock:shadow-root>
-          <span class="chip chip--border-radius-pill chip--intent-default chip--variant-outline">
-            <span class="chip__label">
-              Label
+          <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--variant-outline">
+            <span class="chip__inner">
+              <span class="chip__label">Label</span>
             </span>
           </span>
         </mock:shadow-root>

package/dist/collection/components/swirl-icon/icons/swirl-icon-format-h-one.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 SwirlIconFormatHOne {
+  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: "M4.00004 11.3334C3.81115 11.3334 3.65271 11.2694 3.52471 11.1414C3.39715 11.0138 3.33337 10.8556 3.33337 10.6667V5.33335C3.33337 5.14446 3.39715 4.98602 3.52471 4.85802C3.65271 4.73046 3.81115 4.66669 4.00004 4.66669C4.18893 4.66669 4.34737 4.73046 4.47537 4.85802C4.60293 4.98602 4.66671 5.14446 4.66671 5.33335V7.33335H7.33337V5.33335C7.33337 5.14446 7.39737 4.98602 7.52537 4.85802C7.65293 4.73046 7.81115 4.66669 8.00004 4.66669C8.18893 4.66669 8.34737 4.73046 8.47537 4.85802C8.60293 4.98602 8.66671 5.14446 8.66671 5.33335V10.6667C8.66671 10.8556 8.60293 11.0138 8.47537 11.1414C8.34737 11.2694 8.18893 11.3334 8.00004 11.3334C7.81115 11.3334 7.65293 11.2694 7.52537 11.1414C7.39737 11.0138 7.33337 10.8556 7.33337 10.6667V8.66669H4.66671V10.6667C4.66671 10.8556 4.60293 11.0138 4.47537 11.1414C4.34737 11.2694 4.18893 11.3334 4.00004 11.3334ZM12 11.3334C11.8112 11.3334 11.6529 11.2694 11.5254 11.1414C11.3974 11.0138 11.3334 10.8556 11.3334 10.6667V6.00002H10.6667C10.4778 6.00002 10.3196 5.93602 10.192 5.80802C10.064 5.68046 10 5.52224 10 5.33335C10 5.14446 10.064 4.98602 10.192 4.85802C10.3196 4.73046 10.4778 4.66669 10.6667 4.66669H12C12.1889 4.66669 12.3472 4.73046 12.4747 4.85802C12.6027 4.98602 12.6667 5.14446 12.6667 5.33335V10.6667C12.6667 10.8556 12.6027 11.0138 12.4747 11.1414C12.3472 11.2694 12.1889 11.3334 12 11.3334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 17C5.71667 17 5.479 16.904 5.287 16.712C5.09567 16.5207 5 16.2833 5 16V8C5 7.71667 5.09567 7.479 5.287 7.287C5.479 7.09567 5.71667 7 6 7C6.28333 7 6.521 7.09567 6.713 7.287C6.90433 7.479 7 7.71667 7 8V11H11V8C11 7.71667 11.096 7.479 11.288 7.287C11.4793 7.09567 11.7167 7 12 7C12.2833 7 12.521 7.09567 12.713 7.287C12.9043 7.479 13 7.71667 13 8V16C13 16.2833 12.9043 16.5207 12.713 16.712C12.521 16.904 12.2833 17 12 17C11.7167 17 11.4793 16.904 11.288 16.712C11.096 16.5207 11 16.2833 11 16V13H7V16C7 16.2833 6.90433 16.5207 6.713 16.712C6.521 16.904 6.28333 17 6 17ZM18 17C17.7167 17 17.4793 16.904 17.288 16.712C17.096 16.5207 17 16.2833 17 16V9H16C15.7167 9 15.4793 8.904 15.288 8.712C15.096 8.52067 15 8.28333 15 8C15 7.71667 15.096 7.479 15.288 7.287C15.4793 7.09567 15.7167 7 16 7H18C18.2833 7 18.5207 7.09567 18.712 7.287C18.904 7.479 19 7.71667 19 8V16C19 16.2833 18.904 16.5207 18.712 16.712C18.5207 16.904 18.2833 17 18 17Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.00004 19.8334C6.66949 19.8334 6.39221 19.7214 6.16821 19.4974C5.94499 19.2741 5.83337 18.9972 5.83337 18.6667V9.33335C5.83337 9.0028 5.94499 8.72552 6.16821 8.50152C6.39221 8.2783 6.66949 8.16669 7.00004 8.16669C7.3306 8.16669 7.60787 8.2783 7.83187 8.50152C8.0551 8.72552 8.16671 9.0028 8.16671 9.33335V12.8334H12.8334V9.33335C12.8334 9.0028 12.9454 8.72552 13.1694 8.50152C13.3926 8.2783 13.6695 8.16669 14 8.16669C14.3306 8.16669 14.6079 8.2783 14.8319 8.50152C15.0551 8.72552 15.1667 9.0028 15.1667 9.33335V18.6667C15.1667 18.9972 15.0551 19.2741 14.8319 19.4974C14.6079 19.7214 14.3306 19.8334 14 19.8334C13.6695 19.8334 13.3926 19.7214 13.1694 19.4974C12.9454 19.2741 12.8334 18.9972 12.8334 18.6667V15.1667H8.16671V18.6667C8.16671 18.9972 8.0551 19.2741 7.83187 19.4974C7.60787 19.7214 7.3306 19.8334 7.00004 19.8334ZM21 19.8334C20.6695 19.8334 20.3926 19.7214 20.1694 19.4974C19.9454 19.2741 19.8334 18.9972 19.8334 18.6667V10.5H18.6667C18.3362 10.5 18.0593 10.388 17.836 10.164C17.612 9.9408 17.5 9.66391 17.5 9.33335C17.5 9.0028 17.612 8.72552 17.836 8.50152C18.0593 8.2783 18.3362 8.16669 18.6667 8.16669H21C21.3306 8.16669 21.6075 8.2783 21.8307 8.50152C22.0547 8.72552 22.1667 9.0028 22.1667 9.33335V18.6667C22.1667 18.9972 22.0547 19.2741 21.8307 19.4974C21.6075 19.7214 21.3306 19.8334 21 19.8334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-format-h-one"; }
+  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-mic.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 SwirlIconMic {
+  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.99997 9.33325C9.10664 9.33325 9.99997 8.43992 9.99997 7.33325V3.33325C9.99997 2.22659 9.10664 1.33325 7.99997 1.33325C6.8933 1.33325 5.99997 2.22659 5.99997 3.33325V7.33325C5.99997 8.43992 6.8933 9.33325 7.99997 9.33325ZM11.94 7.33325C11.6133 7.33325 11.34 7.57325 11.2866 7.89992C11.0133 9.46659 9.64664 10.6666 7.99997 10.6666C6.3533 10.6666 4.98664 9.46659 4.7133 7.89992C4.65997 7.57325 4.38664 7.33325 4.05997 7.33325C3.6533 7.33325 3.3333 7.69325 3.3933 8.09325C3.71997 10.0933 5.31997 11.6599 7.3333 11.9466V13.3333C7.3333 13.6999 7.6333 13.9999 7.99997 13.9999C8.36664 13.9999 8.66664 13.6999 8.66664 13.3333V11.9466C10.68 11.6599 12.28 10.0933 12.6066 8.09325C12.6733 7.69325 12.3466 7.33325 11.94 7.33325Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 14C13.66 14 15 12.66 15 11V5C15 3.34 13.66 2 12 2C10.34 2 8.99999 3.34 8.99999 5V11C8.99999 12.66 10.34 14 12 14ZM17.91 11C17.42 11 17.01 11.36 16.93 11.85C16.52 14.2 14.47 16 12 16C9.52999 16 7.47999 14.2 7.06999 11.85C6.98999 11.36 6.57999 11 6.08999 11C5.47999 11 4.99999 11.54 5.08999 12.14C5.57999 15.14 7.97999 17.49 11 17.92V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20V17.92C16.02 17.49 18.42 15.14 18.91 12.14C19.01 11.54 18.52 11 17.91 11Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 16.3333C15.9366 16.3333 17.5 14.7699 17.5 12.8333V5.83325C17.5 3.89659 15.9366 2.33325 14 2.33325C12.0633 2.33325 10.5 3.89659 10.5 5.83325V12.8333C10.5 14.7699 12.0633 16.3333 14 16.3333ZM20.895 12.8333C20.3233 12.8333 19.845 13.2533 19.7516 13.8249C19.2733 16.5666 16.8816 18.6666 14 18.6666C11.1183 18.6666 8.72663 16.5666 8.2483 13.8249C8.15496 13.2533 7.67663 12.8333 7.10496 12.8333C6.3933 12.8333 5.8333 13.4633 5.9383 14.1633C6.50996 17.6633 9.30996 20.4049 12.8333 20.9066V23.3333C12.8333 23.9749 13.3583 24.4999 14 24.4999C14.6416 24.4999 15.1666 23.9749 15.1666 23.3333V20.9066C18.69 20.4049 21.49 17.6633 22.0616 14.1633C22.1783 13.4633 21.6066 12.8333 20.895 12.8333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-mic"; }
+  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-open-in-full.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 SwirlIconOpenInFull {
+  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: "M14 2.66667C14 2.47778 13.9361 2.31944 13.8083 2.19167C13.6806 2.06389 13.5222 2 13.3333 2L9.33333 2C9.14445 2 8.98611 2.06389 8.85833 2.19167C8.73056 2.31944 8.66667 2.47778 8.66667 2.66667C8.66667 2.85556 8.73056 3.01389 8.85833 3.14167C8.98611 3.26944 9.14445 3.33333 9.33333 3.33333L11.7333 3.33333L3.33333 11.7333V9.33333C3.33333 9.14444 3.26944 8.98611 3.14167 8.85833C3.01389 8.73056 2.85556 8.66667 2.66667 8.66667C2.47778 8.66667 2.31944 8.73056 2.19167 8.85833C2.06389 8.98611 2 9.14444 2 9.33333L2 13.3333C2 13.5222 2.06389 13.6806 2.19167 13.8083C2.31944 13.9361 2.47778 14 2.66667 14H6.66667C6.85556 14 7.01389 13.9361 7.14167 13.8083C7.26944 13.6806 7.33333 13.5222 7.33333 13.3333C7.33333 13.1444 7.26944 12.9861 7.14167 12.8583C7.01389 12.7306 6.85556 12.6667 6.66667 12.6667H4.26667L12.6667 4.26667V6.66667C12.6667 6.85556 12.7306 7.01389 12.8583 7.14167C12.9861 7.26944 13.1444 7.33333 13.3333 7.33333C13.5222 7.33333 13.6806 7.26944 13.8083 7.14167C13.9361 7.01389 14 6.85556 14 6.66667V2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 21C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20V14C3 13.7167 3.09583 13.4792 3.2875 13.2875C3.47917 13.0958 3.71667 13 4 13C4.28333 13 4.52083 13.0958 4.7125 13.2875C4.90417 13.4792 5 13.7167 5 14V17.6L17.6 5H14C13.7167 5 13.4792 4.90417 13.2875 4.7125C13.0958 4.52083 13 4.28333 13 4C13 3.71667 13.0958 3.47917 13.2875 3.2875C13.4792 3.09583 13.7167 3 14 3H20C20.2833 3 20.5208 3.09583 20.7125 3.2875C20.9042 3.47917 21 3.71667 21 4V10C21 10.2833 20.9042 10.5208 20.7125 10.7125C20.5208 10.9042 20.2833 11 20 11C19.7167 11 19.4792 10.9042 19.2875 10.7125C19.0958 10.5208 19 10.2833 19 10V6.4L6.4 19H10C10.2833 19 10.5208 19.0958 10.7125 19.2875C10.9042 19.4792 11 19.7167 11 20C11 20.2833 10.9042 20.5208 10.7125 20.7125C10.5208 20.9042 10.2833 21 10 21H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M24.5 4.66667C24.5 4.33611 24.3882 4.05903 24.1646 3.83542C23.941 3.61181 23.6639 3.5 23.3333 3.5L16.3333 3.5C16.0028 3.5 15.7257 3.61181 15.5021 3.83542C15.2785 4.05903 15.1667 4.33611 15.1667 4.66667C15.1667 4.99722 15.2785 5.27431 15.5021 5.49792C15.7257 5.72153 16.0028 5.83333 16.3333 5.83333L20.5333 5.83333L5.83333 20.5333V16.3333C5.83333 16.0028 5.72153 15.7257 5.49792 15.5021C5.27431 15.2785 4.99722 15.1667 4.66667 15.1667C4.33611 15.1667 4.05903 15.2785 3.83542 15.5021C3.61181 15.7257 3.5 16.0028 3.5 16.3333L3.5 23.3333C3.5 23.6639 3.61181 23.941 3.83542 24.1646C4.05903 24.3882 4.33611 24.5 4.66667 24.5L11.6667 24.5C11.9972 24.5 12.2743 24.3882 12.4979 24.1646C12.7215 23.941 12.8333 23.6639 12.8333 23.3333C12.8333 23.0028 12.7215 22.7257 12.4979 22.5021C12.2743 22.2785 11.9972 22.1667 11.6667 22.1667H7.46667L22.1667 7.46667V11.6667C22.1667 11.9972 22.2785 12.2743 22.5021 12.4979C22.7257 12.7215 23.0028 12.8333 23.3333 12.8333C23.6639 12.8333 23.941 12.7215 24.1646 12.4979C24.3882 12.2743 24.5 11.9972 24.5 11.6667V4.66667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-open-in-full"; }
+  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-pause-circle.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 SwirlIconPauseCircle {
+  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: "M6.66665 10.6666C7.03331 10.6666 7.33331 10.3666 7.33331 9.99992V5.99992C7.33331 5.63325 7.03331 5.33325 6.66665 5.33325C6.29998 5.33325 5.99998 5.63325 5.99998 5.99992V9.99992C5.99998 10.3666 6.29998 10.6666 6.66665 10.6666ZM7.99998 1.33325C4.31998 1.33325 1.33331 4.31992 1.33331 7.99992C1.33331 11.6799 4.31998 14.6666 7.99998 14.6666C11.68 14.6666 14.6666 11.6799 14.6666 7.99992C14.6666 4.31992 11.68 1.33325 7.99998 1.33325ZM7.99998 13.3333C5.05998 13.3333 2.66665 10.9399 2.66665 7.99992C2.66665 5.05992 5.05998 2.66659 7.99998 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 7.99998 13.3333ZM9.33331 10.6666C9.69998 10.6666 9.99998 10.3666 9.99998 9.99992V5.99992C9.99998 5.63325 9.69998 5.33325 9.33331 5.33325C8.96665 5.33325 8.66665 5.63325 8.66665 5.99992V9.99992C8.66665 10.3666 8.96665 10.6666 9.33331 10.6666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M10 16C10.55 16 11 15.55 11 15V9C11 8.45 10.55 8 10 8C9.45 8 9 8.45 9 9V15C9 15.55 9.45 16 10 16ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM14 16C14.55 16 15 15.55 15 15V9C15 8.45 14.55 8 14 8C13.45 8 13 8.45 13 9V15C13 15.55 13.45 16 14 16Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.6666 18.6666C12.3083 18.6666 12.8333 18.1416 12.8333 17.4999V10.4999C12.8333 9.85825 12.3083 9.33325 11.6666 9.33325C11.025 9.33325 10.5 9.85825 10.5 10.4999V17.4999C10.5 18.1416 11.025 18.6666 11.6666 18.6666ZM14 2.33325C7.55998 2.33325 2.33331 7.55992 2.33331 13.9999C2.33331 20.4399 7.55998 25.6666 14 25.6666C20.44 25.6666 25.6666 20.4399 25.6666 13.9999C25.6666 7.55992 20.44 2.33325 14 2.33325ZM14 23.3333C8.85498 23.3333 4.66665 19.1449 4.66665 13.9999C4.66665 8.85492 8.85498 4.66659 14 4.66659C19.145 4.66659 23.3333 8.85492 23.3333 13.9999C23.3333 19.1449 19.145 23.3333 14 23.3333ZM16.3333 18.6666C16.975 18.6666 17.5 18.1416 17.5 17.4999V10.4999C17.5 9.85825 16.975 9.33325 16.3333 9.33325C15.6916 9.33325 15.1666 9.85825 15.1666 10.4999V17.4999C15.1666 18.1416 15.6916 18.6666 16.3333 18.6666Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-pause-circle"; }
+  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"
+      }
+    };
+  }
+}