@getflip/swirl-components 0.11.0 → 0.13.0

package/dist/collection/components/swirl-form-control/swirl-form-control.stories.js

@@ -0,0 +1,92 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-form-control.mdx";
+export default {
+  component: "swirl-form-control",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlFormControl",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-stack");
+  container.spacing = "24";
+  const textInput = generateStoryElement("swirl-form-control", args);
+  textInput.innerHTML = `
+    <swirl-text-input clearable="true" type="text"></swirl-text-input>
+  `;
+  const numberInput = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Number Control" }));
+  numberInput.innerHTML = `
+    <swirl-text-input suffix-label="€" type="number"></swirl-text-input>
+  `;
+  const dateInput = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Date Control" }));
+  dateInput.innerHTML = `
+    <swirl-date-input></swirl-date-input>
+  `;
+  const passwordInput = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Password Control" }));
+  passwordInput.innerHTML = `
+    <swirl-text-input type="password"></swirl-text-input>
+  `;
+  const select = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Select" }));
+  select.innerHTML = `
+    <swirl-select multi-select="true">
+      <swirl-option-list-section label="Section 1">
+        <swirl-option-list-item
+          label="This is an option 1"
+          value="1"
+        ></swirl-option-list-item>
+        <swirl-option-list-item
+          label="This is an option 2"
+          value="2"
+        ></swirl-option-list-item>
+        <swirl-option-list-item
+          label="This is an option 3"
+          value="3"
+        ></swirl-option-list-item>
+      </swirl-option-list-section>
+      <swirl-option-list-section label="Section 2">
+        <swirl-option-list-item
+          label="This is an option 4"
+          value="4"
+        ></swirl-option-list-item>
+      </swirl-option-list-section>
+    </swirl-select>
+  `;
+  const autocomplete = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Autocomplete" }));
+  autocomplete.innerHTML = `
+    <swirl-autocomplete></swirl-autocomplete>
+  `;
+  const suggestions = [
+    {
+      id: "1",
+      label: "Item #1",
+    },
+    {
+      id: "2",
+      label: "Item #2",
+    },
+    {
+      id: "3",
+      label: "Item #3",
+    },
+  ];
+  autocomplete.querySelector("swirl-autocomplete").generateSuggestions = async (value) => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    if (!Boolean(value)) {
+      return suggestions;
+    }
+    return suggestions.filter((suggestion) => suggestion.label.toLowerCase().includes(value.toLowerCase()));
+  };
+  const multilineInput = generateStoryElement("swirl-form-control", Object.assign(Object.assign({}, args), { label: "Multiline Control" }));
+  multilineInput.innerHTML = `
+    <swirl-text-input max-length="200" show-character-counter="true" rows="5" type="text"></swirl-text-input>
+  `;
+  container.append("\n  ", textInput, "\n  ", numberInput, "\n  ", dateInput, "\n  ", passwordInput, "\n  ", select, "\n  ", autocomplete, "\n  ", multilineInput, "\n");
+  return container;
+};
+export const SwirlFormControl = Template.bind({});
+SwirlFormControl.args = {
+  description: "Optional description of the control.",
+  label: "Form Control Label",
+};

package/dist/collection/components/swirl-form-group/swirl-form-group.js

@@ -0,0 +1,45 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlFormGroup {
+  constructor() {
+    this.orientation = "vertical";
+  }
+  render() {
+    const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
+    return (h(Host, null,
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "swirl-form-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-form-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-form-group.css"]
+  }; }
+  static get properties() { return {
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlFormGroupOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "SwirlFormGroupOrientation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    }
+  }; }
+}

package/dist/collection/components/swirl-form-group/swirl-form-group.stories.js

@@ -0,0 +1,31 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-form-group.mdx";
+export default {
+  component: "swirl-form-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlFormGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-form-group", args);
+  element.innerHTML = `
+    <swirl-form-group orientation="horizontal">
+      <swirl-form-control label="First name">
+        <swirl-text-input type="text" value="John"></swirl-text-input>
+      </swirl-form-control>
+      <swirl-form-control label="Last name">
+        <swirl-text-input type="text" value="Doe"></swirl-text-input>
+      </swirl-form-control>
+    </swirl-form-group>
+
+    <swirl-form-control label="Email">
+      <swirl-text-input type="email"></swirl-text-input>
+    </swirl-form-control>
+  `;
+  return element;
+};
+export const SwirlFormGroup = Template.bind({});
+SwirlFormGroup.args = {};

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

@@ -0,0 +1,162 @@
+import { Component, h, Host, Listen, Prop } from "@stencil/core";
+import classnames from "classnames";
+import balanceText from "balance-text";
+export class SwirlHeading {
+  constructor() {
+    this.align = "start";
+    this.balance = true;
+    this.level = 1;
+  }
+  componentDidRender() {
+    this.rebalance();
+  }
+  onWindowResize() {
+    this.rebalance();
+  }
+  rebalance() {
+    if (!this.balance || !Boolean(this.headingEl)) {
+      return;
+    }
+    balanceText(this.headingEl);
+  }
+  render() {
+    const Tag = this.as || `h${this.level}`;
+    const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
+    return (h(Host, null,
+      h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el) }, this.text)));
+  }
+  static get is() { return "swirl-heading"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-heading.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-heading.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlHeadingAlign",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {
+          "SwirlHeadingAlign": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    },
+    "as": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlHeadingTag",
+        "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\"",
+        "references": {
+          "SwirlHeadingTag": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "as",
+      "reflect": false
+    },
+    "balance": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "balance",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "headingId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading-id",
+      "reflect": false
+    },
+    "level": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlHeadingLevel",
+        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+        "references": {
+          "SwirlHeadingLevel": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    }
+  }; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,24 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-heading.mdx";
+export default {
+  argTypes: {
+    balance: {
+      description: "Balances the text across lines to prevent visually undesirable results like typographic widows.",
+    },
+  },
+  component: "swirl-heading",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlHeading",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-heading", args);
+  return element;
+};
+export const SwirlHeading = Template.bind({});
+SwirlHeading.args = {
+  text: "Headline: A line of words printed in large letters as the title of a story",
+};

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconAddPhoto {
+  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: "M1.99999 14.6666C1.63332 14.6666 1.31955 14.5362 1.05866 14.2753C0.797323 14.014 0.666656 13.7 0.666656 13.3333V5.33331C0.666656 4.96665 0.797323 4.65287 1.05866 4.39198C1.31955 4.13065 1.63332 3.99998 1.99999 3.99998H4.09999L4.93332 3.09998C5.05555 2.96665 5.20266 2.86109 5.37466 2.78331C5.5471 2.70554 5.72777 2.66665 5.91666 2.66665H8.66666C8.85555 2.66665 9.01399 2.73042 9.14199 2.85798C9.26955 2.98598 9.33332 3.14442 9.33332 3.33331V4.66665C9.33332 4.85553 9.39732 5.01398 9.52532 5.14198C9.65288 5.26953 9.8111 5.33331 9.99999 5.33331H11.3333V6.66665C11.3333 6.85553 11.3973 7.01376 11.5253 7.14131C11.6529 7.26931 11.8111 7.33331 12 7.33331H13.3333C13.5222 7.33331 13.6804 7.39709 13.808 7.52465C13.936 7.65265 14 7.81109 14 7.99998V13.3333C14 13.7 13.8695 14.014 13.6087 14.2753C13.3473 14.5362 13.0333 14.6666 12.6667 14.6666H1.99999ZM7.33332 12.3333C8.16666 12.3333 8.8751 12.0418 9.45866 11.4586C10.0418 10.8751 10.3333 10.1666 10.3333 9.33331C10.3333 8.49998 10.0418 7.79153 9.45866 7.20798C8.8751 6.62487 8.16666 6.33331 7.33332 6.33331C6.49999 6.33331 5.79155 6.62487 5.20799 7.20798C4.62488 7.79153 4.33332 8.49998 4.33332 9.33331C4.33332 10.1666 4.62488 10.8751 5.20799 11.4586C5.79155 12.0418 6.49999 12.3333 7.33332 12.3333ZM12.6667 3.99998H12C11.8111 3.99998 11.6529 3.9362 11.5253 3.80865C11.3973 3.68065 11.3333 3.5222 11.3333 3.33331C11.3333 3.14442 11.3973 2.98598 11.5253 2.85798C11.6529 2.73042 11.8111 2.66665 12 2.66665H12.6667V1.99998C12.6667 1.81109 12.7307 1.65265 12.8587 1.52465C12.9862 1.39709 13.1444 1.33331 13.3333 1.33331C13.5222 1.33331 13.6804 1.39709 13.808 1.52465C13.936 1.65265 14 1.81109 14 1.99998V2.66665H14.6667C14.8555 2.66665 15.0138 2.73042 15.1413 2.85798C15.2693 2.98598 15.3333 3.14442 15.3333 3.33331C15.3333 3.5222 15.2693 3.68065 15.1413 3.80865C15.0138 3.9362 14.8555 3.99998 14.6667 3.99998H14V4.66665C14 4.85553 13.936 5.01398 13.808 5.14198C13.6804 5.26953 13.5222 5.33331 13.3333 5.33331C13.1444 5.33331 12.9862 5.26953 12.8587 5.14198C12.7307 5.01398 12.6667 4.85553 12.6667 4.66665V3.99998Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M3 22C2.45 22 1.97933 21.8043 1.588 21.413C1.196 21.021 1 20.55 1 20V8C1 7.45 1.196 6.97933 1.588 6.588C1.97933 6.196 2.45 6 3 6H6.15L7.4 4.65C7.58333 4.45 7.804 4.29167 8.062 4.175C8.32067 4.05833 8.59167 4 8.875 4H13C13.2833 4 13.521 4.09567 13.713 4.287C13.9043 4.479 14 4.71667 14 5V7C14 7.28333 14.096 7.521 14.288 7.713C14.4793 7.90433 14.7167 8 15 8H17V10C17 10.2833 17.096 10.5207 17.288 10.712C17.4793 10.904 17.7167 11 18 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H3ZM11 18.5C12.25 18.5 13.3127 18.0627 14.188 17.188C15.0627 16.3127 15.5 15.25 15.5 14C15.5 12.75 15.0627 11.6873 14.188 10.812C13.3127 9.93733 12.25 9.5 11 9.5C9.75 9.5 8.68733 9.93733 7.812 10.812C6.93733 11.6873 6.5 12.75 6.5 14C6.5 15.25 6.93733 16.3127 7.812 17.188C8.68733 18.0627 9.75 18.5 11 18.5ZM19 6H18C17.7167 6 17.4793 5.90433 17.288 5.713C17.096 5.521 17 5.28333 17 5C17 4.71667 17.096 4.479 17.288 4.287C17.4793 4.09567 17.7167 4 18 4H19V3C19 2.71667 19.096 2.479 19.288 2.287C19.4793 2.09567 19.7167 2 20 2C20.2833 2 20.5207 2.09567 20.712 2.287C20.904 2.479 21 2.71667 21 3V4H22C22.2833 4 22.5207 4.09567 22.712 4.287C22.904 4.479 23 4.71667 23 5C23 5.28333 22.904 5.521 22.712 5.713C22.5207 5.90433 22.2833 6 22 6H21V7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8C19.7167 8 19.4793 7.90433 19.288 7.713C19.096 7.521 19 7.28333 19 7V6Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M3.49999 25.6666C2.85832 25.6666 2.30921 25.4384 1.85266 24.9818C1.39532 24.5245 1.16666 23.975 1.16666 23.3333V9.33331C1.16666 8.69165 1.39532 8.14254 1.85266 7.68598C2.30921 7.22865 2.85832 6.99998 3.49999 6.99998H7.17499L8.63332 5.42498C8.84721 5.19165 9.10466 5.00692 9.40566 4.87081C9.70743 4.7347 10.0236 4.66665 10.3542 4.66665H15.1667C15.4972 4.66665 15.7745 4.77826 15.9985 5.00148C16.2217 5.22548 16.3333 5.50276 16.3333 5.83331V8.16665C16.3333 8.4972 16.4453 8.77448 16.6693 8.99848C16.8925 9.2217 17.1694 9.33331 17.5 9.33331H19.8333V11.6666C19.8333 11.9972 19.9453 12.2741 20.1693 12.4973C20.3925 12.7213 20.6694 12.8333 21 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1681C24.388 13.3921 24.5 13.6694 24.5 14V23.3333C24.5 23.975 24.2717 24.5245 23.8152 24.9818C23.3578 25.4384 22.8083 25.6666 22.1667 25.6666H3.49999ZM12.8333 21.5833C14.2917 21.5833 15.5314 21.0731 16.5527 20.0526C17.5731 19.0314 18.0833 17.7916 18.0833 16.3333C18.0833 14.875 17.5731 13.6352 16.5527 12.614C15.5314 11.5935 14.2917 11.0833 12.8333 11.0833C11.375 11.0833 10.1352 11.5935 9.11399 12.614C8.09354 13.6352 7.58332 14.875 7.58332 16.3333C7.58332 17.7916 8.09354 19.0314 9.11399 20.0526C10.1352 21.0731 11.375 21.5833 12.8333 21.5833ZM22.1667 6.99998H21C20.6694 6.99998 20.3925 6.88837 20.1693 6.66515C19.9453 6.44115 19.8333 6.16387 19.8333 5.83331C19.8333 5.50276 19.9453 5.22548 20.1693 5.00148C20.3925 4.77826 20.6694 4.66665 21 4.66665H22.1667V3.49998C22.1667 3.16942 22.2787 2.89215 22.5027 2.66815C22.7259 2.44492 23.0028 2.33331 23.3333 2.33331C23.6639 2.33331 23.9408 2.44492 24.164 2.66815C24.388 2.89215 24.5 3.16942 24.5 3.49998V4.66665H25.6667C25.9972 4.66665 26.2741 4.77826 26.4973 5.00148C26.7213 5.22548 26.8333 5.50276 26.8333 5.83331C26.8333 6.16387 26.7213 6.44115 26.4973 6.66515C26.2741 6.88837 25.9972 6.99998 25.6667 6.99998H24.5V8.16665C24.5 8.4972 24.388 8.77448 24.164 8.99848C23.9408 9.2217 23.6639 9.33331 23.3333 9.33331C23.0028 9.33331 22.7259 9.2217 22.5027 8.99848C22.2787 8.77448 22.1667 8.4972 22.1667 8.16665V6.99998Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-add-photo"; }
+  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-add.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconAdd {
+  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 12.7666C7.78889 12.7666 7.60845 12.6915 7.45867 12.5413C7.30845 12.3915 7.23334 12.2111 7.23334 11.9999V8.76661H4C3.78889 8.76661 3.60845 8.6915 3.45867 8.54128C3.30845 8.3915 3.23334 8.21105 3.23334 7.99994C3.23334 7.78883 3.30845 7.60839 3.45867 7.45861C3.60845 7.30839 3.78889 7.23328 4 7.23328H7.23334V3.99994C7.23334 3.78883 7.30845 3.60817 7.45867 3.45794C7.60845 3.30817 7.78889 3.23328 8 3.23328C8.21112 3.23328 8.39156 3.30817 8.54134 3.45794C8.69156 3.60817 8.76667 3.78883 8.76667 3.99994V7.23328H12C12.2111 7.23328 12.3916 7.30839 12.5413 7.45861C12.6916 7.60839 12.7667 7.78883 12.7667 7.99994C12.7667 8.21105 12.6916 8.3915 12.5413 8.54128C12.3916 8.6915 12.2111 8.76661 12 8.76661H8.76667V11.9999C8.76667 12.2111 8.69156 12.3915 8.54134 12.5413C8.39156 12.6915 8.21112 12.7666 8 12.7666V12.7666Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M12 19.15C11.6833 19.15 11.4127 19.0373 11.188 18.812C10.9627 18.5873 10.85 18.3166 10.85 18V13.15H6.00001C5.68334 13.15 5.41267 13.0373 5.18801 12.812C4.96267 12.5873 4.85001 12.3166 4.85001 12C4.85001 11.6833 4.96267 11.4126 5.18801 11.188C5.41267 10.9626 5.68334 10.85 6.00001 10.85H10.85V5.99998C10.85 5.68331 10.9627 5.41231 11.188 5.18698C11.4127 4.96231 11.6833 4.84998 12 4.84998C12.3167 4.84998 12.5873 4.96231 12.812 5.18698C13.0373 5.41231 13.15 5.68331 13.15 5.99998V10.85H18C18.3167 10.85 18.5873 10.9626 18.812 11.188C19.0373 11.4126 19.15 11.6833 19.15 12C19.15 12.3166 19.0373 12.5873 18.812 12.812C18.5873 13.0373 18.3167 13.15 18 13.15H13.15V18C13.15 18.3166 13.0373 18.5873 12.812 18.812C12.5873 19.0373 12.3167 19.15 12 19.15Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M14 22.3417C13.6305 22.3417 13.3148 22.2102 13.0527 21.9473C12.7898 21.6852 12.6583 21.3694 12.6583 21V15.3417H6.99999C6.63055 15.3417 6.31477 15.2102 6.05266 14.9473C5.78977 14.6852 5.65833 14.3694 5.65833 14C5.65833 13.6305 5.78977 13.3148 6.05266 13.0527C6.31477 12.7898 6.63055 12.6583 6.99999 12.6583H12.6583V6.99999C12.6583 6.63055 12.7898 6.31438 13.0527 6.05149C13.3148 5.78938 13.6305 5.65833 14 5.65833C14.3694 5.65833 14.6852 5.78938 14.9473 6.05149C15.2102 6.31438 15.3417 6.63055 15.3417 6.99999V12.6583H21C21.3694 12.6583 21.6852 12.7898 21.9473 13.0527C22.2102 13.3148 22.3417 13.6305 22.3417 14C22.3417 14.3694 22.2102 14.6852 21.9473 14.9473C21.6852 15.2102 21.3694 15.3417 21 15.3417H15.3417V21C15.3417 21.3694 15.2102 21.6852 14.9473 21.9473C14.6852 22.2102 14.3694 22.3417 14 22.3417V22.3417Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-add"; }
+  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-admin-panel-settings.js

@@ -0,0 +1,55 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconAdminPanelSettings {
+  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: "M11.3333 7.27165C11.56 7.27165 11.78 7.29831 12 7.33165V4.99165C12 4.45831 11.6867 3.97831 11.2 3.77165L7.53333 2.17165C7.19333 2.02498 6.80667 2.02498 6.46667 2.17165L2.8 3.77165C2.31333 3.98498 2 4.46498 2 4.99165V7.39165C2 10.4183 4.13333 13.2516 7 13.9383C7.36667 13.8516 7.72 13.725 8.06667 13.5716C7.60667 12.9183 7.33333 12.125 7.33333 11.2716C7.33333 9.06498 9.12667 7.27165 11.3333 7.27165Z", fill: "currentColor" }),
+        h("path", { d: "M11.3333 8.60498C9.86 8.60498 8.66667 9.79831 8.66667 11.2716C8.66667 12.745 9.86 13.9383 11.3333 13.9383C12.8067 13.9383 14 12.745 14 11.2716C14 9.79831 12.8067 8.60498 11.3333 8.60498ZM11.3333 9.52498C11.7467 9.52498 12.08 9.86498 12.08 10.2716C12.08 10.6783 11.74 11.0183 11.3333 11.0183C10.9267 11.0183 10.5867 10.6783 10.5867 10.2716C10.5867 9.86498 10.92 9.52498 11.3333 9.52498ZM11.3333 13.105C10.7133 13.105 10.1733 12.7983 9.84 12.325C9.87333 11.845 10.8467 11.605 11.3333 11.605C11.82 11.605 12.7933 11.845 12.8267 12.325C12.4933 12.7983 11.9533 13.105 11.3333 13.105Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M17 10.9075C17.34 10.9075 17.67 10.9475 18 10.9975V7.48753C18 6.68753 17.53 5.96753 16.8 5.65753L11.3 3.25753C10.79 3.03753 10.21 3.03753 9.7 3.25753L4.2 5.65753C3.47 5.97753 3 6.69753 3 7.48753V11.0875C3 15.6275 6.2 19.8775 10.5 20.9075C11.05 20.7775 11.58 20.5875 12.1 20.3575C11.41 19.3775 11 18.1875 11 16.9075C11 13.5975 13.69 10.9075 17 10.9075Z", fill: "currentColor" }),
+        h("path", { d: "M17 12.9075C14.79 12.9075 13 14.6975 13 16.9075C13 19.1175 14.79 20.9075 17 20.9075C19.21 20.9075 21 19.1175 21 16.9075C21 14.6975 19.21 12.9075 17 12.9075ZM17 14.2875C17.62 14.2875 18.12 14.7975 18.12 15.4075C18.12 16.0175 17.61 16.5275 17 16.5275C16.39 16.5275 15.88 16.0175 15.88 15.4075C15.88 14.7975 16.38 14.2875 17 14.2875ZM17 19.6575C16.07 19.6575 15.26 19.1975 14.76 18.4875C14.81 17.7675 16.27 17.4075 17 17.4075C17.73 17.4075 19.19 17.7675 19.24 18.4875C18.74 19.1975 17.93 19.6575 17 19.6575Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M19.8333 12.7254C20.23 12.7254 20.615 12.7721 21 12.8304V8.73541C21 7.80208 20.4517 6.96208 19.6 6.60041L13.1833 3.80041C12.5883 3.54374 11.9117 3.54374 11.3167 3.80041L4.9 6.60041C4.04833 6.97374 3.5 7.81374 3.5 8.73541V12.9354C3.5 18.2321 7.23333 23.1904 12.25 24.3921C12.8917 24.2404 13.51 24.0187 14.1167 23.7504C13.3117 22.6071 12.8333 21.2187 12.8333 19.7254C12.8333 15.8637 15.9717 12.7254 19.8333 12.7254Z", fill: "currentColor" }),
+        h("path", { d: "M19.8333 15.0587C17.255 15.0587 15.1667 17.1471 15.1667 19.7254C15.1667 22.3037 17.255 24.3921 19.8333 24.3921C22.4117 24.3921 24.5 22.3037 24.5 19.7254C24.5 17.1471 22.4117 15.0587 19.8333 15.0587ZM19.8333 16.6687C20.5567 16.6687 21.14 17.2637 21.14 17.9754C21.14 18.6871 20.545 19.2821 19.8333 19.2821C19.1217 19.2821 18.5267 18.6871 18.5267 17.9754C18.5267 17.2637 19.11 16.6687 19.8333 16.6687ZM19.8333 22.9337C18.7483 22.9337 17.8033 22.3971 17.22 21.5687C17.2783 20.7287 18.9817 20.3087 19.8333 20.3087C20.685 20.3087 22.3883 20.7287 22.4467 21.5687C21.8633 22.3971 20.9183 22.9337 19.8333 22.9337Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-admin-panel-settings"; }
+  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-arrow-back.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconArrowBack {
+  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: "M9.50758 13.1114L4.83311 8.45076C4.77762 8.38603 4.73601 8.31668 4.70827 8.2427C4.68053 8.16872 4.66666 8.09012 4.66666 8.00689C4.66666 7.92367 4.68053 7.84507 4.70827 7.77109C4.73601 7.69711 4.77762 7.62776 4.83311 7.56303L9.50758 2.88856C9.65553 2.7406 9.83826 2.66663 10.0558 2.66663C10.2729 2.66663 10.4554 2.74523 10.6034 2.90243C10.7606 3.05039 10.8392 3.2283 10.8392 3.43618C10.8392 3.64443 10.7606 3.82715 10.6034 3.98435L6.58083 8.00689L10.6034 12.0294C10.7513 12.1774 10.8253 12.3553 10.8253 12.5632C10.8253 12.7714 10.7467 12.9542 10.5895 13.1114C10.4415 13.2593 10.2634 13.3333 10.0552 13.3333C9.84732 13.3333 9.66478 13.2593 9.50758 13.1114V13.1114Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M14.2614 19.6671L7.24967 12.6762C7.16645 12.5791 7.10403 12.4751 7.06242 12.3641C7.02081 12.2531 7 12.1352 7 12.0104C7 11.8856 7.02081 11.7677 7.06242 11.6567C7.10403 11.5457 7.16645 11.4417 7.24967 11.3446L14.2614 4.3329C14.4833 4.11097 14.7574 4 15.0836 4C15.4093 4 15.6831 4.1179 15.9051 4.35371C16.1409 4.57564 16.2588 4.84251 16.2588 5.15433C16.2588 5.4667 16.1409 5.74079 15.9051 5.97659L9.87126 12.0104L15.9051 18.0442C16.127 18.2661 16.238 18.533 16.238 18.8448C16.238 19.1572 16.1201 19.4313 15.8843 19.6671C15.6623 19.889 15.3952 20 15.0828 20C14.771 20 14.4972 19.889 14.2614 19.6671Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M16.6383 22.9449L8.45794 14.7889C8.36085 14.6756 8.28803 14.5542 8.23948 14.4248C8.19093 14.2953 8.16666 14.1577 8.16666 14.0121C8.16666 13.8665 8.19093 13.7289 8.23948 13.5994C8.28803 13.47 8.36085 13.3486 8.45794 13.2353L16.6383 5.05501C16.8972 4.79609 17.217 4.66663 17.5976 4.66663C17.9775 4.66663 18.297 4.80418 18.5559 5.07928C18.831 5.33821 18.9686 5.64956 18.9686 6.01334C18.9686 6.37778 18.831 6.69755 18.5559 6.97265L11.5165 14.0121L18.5559 21.0515C18.8148 21.3105 18.9443 21.6218 18.9443 21.9856C18.9443 22.35 18.8067 22.6698 18.5316 22.9449C18.2727 23.2038 17.961 23.3333 17.5966 23.3333C17.2328 23.3333 16.9134 23.2038 16.6383 22.9449V22.9449Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-arrow-back"; }
+  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-arrow-downward.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconArrowDownward {
+  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.0501C7.91111 13.0501 7.82778 13.0361 7.75 13.0081C7.67222 12.9805 7.6 12.9334 7.53333 12.8667L3.13333 8.46675C3 8.33341 2.93333 8.17497 2.93333 7.99141C2.93333 7.8083 3 7.65008 3.13333 7.51675C3.26667 7.38341 3.42222 7.31675 3.6 7.31675C3.77778 7.31675 3.93333 7.38341 4.06667 7.51675L7.33333 10.7834V3.31675C7.33333 3.12786 7.39733 2.9723 7.52533 2.85008C7.65289 2.72786 7.81111 2.66675 8 2.66675C8.18889 2.66675 8.34733 2.73053 8.47533 2.85808C8.60289 2.98608 8.66667 3.14453 8.66667 3.33341V10.7834L11.9333 7.51675C12.0667 7.38341 12.2222 7.31675 12.4 7.31675C12.5778 7.31675 12.7333 7.38341 12.8667 7.51675C13 7.65008 13.0667 7.8083 13.0667 7.99141C13.0667 8.17497 13 8.33341 12.8667 8.46675L8.46667 12.8667C8.4 12.9334 8.32778 12.9805 8.25 13.0081C8.17222 13.0361 8.08889 13.0501 8 13.0501Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M12 19.575C11.8667 19.575 11.7417 19.554 11.625 19.512C11.5083 19.4707 11.4 19.4 11.3 19.3L4.7 12.7C4.5 12.5 4.4 12.2623 4.4 11.987C4.4 11.7123 4.5 11.475 4.7 11.275C4.9 11.075 5.13333 10.975 5.4 10.975C5.66667 10.975 5.9 11.075 6.1 11.275L11 16.175V4.975C11 4.69167 11.096 4.45833 11.288 4.275C11.4793 4.09167 11.7167 4 12 4C12.2833 4 12.521 4.09567 12.713 4.287C12.9043 4.479 13 4.71667 13 5V16.175L17.9 11.275C18.1 11.075 18.3333 10.975 18.6 10.975C18.8667 10.975 19.1 11.075 19.3 11.275C19.5 11.475 19.6 11.7123 19.6 11.987C19.6 12.2623 19.5 12.5 19.3 12.7L12.7 19.3C12.6 19.4 12.4917 19.4707 12.375 19.512C12.2583 19.554 12.1333 19.575 12 19.575Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M14 22.8376C13.8444 22.8376 13.6986 22.8131 13.5625 22.7641C13.4264 22.7159 13.3 22.6334 13.1833 22.5167L5.48333 14.8167C5.25 14.5834 5.13333 14.3061 5.13333 13.9849C5.13333 13.6645 5.25 13.3876 5.48333 13.1542C5.71666 12.9209 5.98889 12.8042 6.3 12.8042C6.61111 12.8042 6.88333 12.9209 7.11666 13.1542L12.8333 18.8709V5.80425C12.8333 5.47369 12.9453 5.20147 13.1693 4.98758C13.3926 4.77369 13.6694 4.66675 14 4.66675C14.3306 4.66675 14.6078 4.77836 14.8318 5.00158C15.0551 5.22558 15.1667 5.50286 15.1667 5.83341V18.8709L20.8833 13.1542C21.1167 12.9209 21.3889 12.8042 21.7 12.8042C22.0111 12.8042 22.2833 12.9209 22.5167 13.1542C22.75 13.3876 22.8667 13.6645 22.8667 13.9849C22.8667 14.3061 22.75 14.5834 22.5167 14.8167L14.8167 22.5167C14.7 22.6334 14.5736 22.7159 14.4375 22.7641C14.3014 22.8131 14.1556 22.8376 14 22.8376Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-arrow-downward"; }
+  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"
+    }
+  }; }
+}