@getflip/swirl-components 0.85.1 → 0.87.0

package/dist/collection/collection-manifest.json

@@ -60,6 +60,13 @@
     "./components/swirl-date-input/swirl-date-input.js",
     "./components/swirl-date-picker/swirl-date-picker.js",
     "./components/swirl-description-list/swirl-description-list.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-clap.js",
+    "./components/swirl-emoji/swirl-emoji.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-happy.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-idea.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-love.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-sad.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js",
     "./components/swirl-empty-state/swirl-empty-state.js",
     "./components/swirl-file-uploader/swirl-file-uploader.js",
     "./components/swirl-file-viewer/swirl-file-viewer.js",

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

@@ -18,6 +18,7 @@
   padding-bottom: var(--s-space-8);
   border-radius: var(--s-border-radius-sm);
   background-color: var(--s-surface-overlay-default);
+  animation: autocomplete-enter 0.1s;
   box-shadow: var(--s-shadow-level-1);
 }
 
@@ -31,3 +32,17 @@
   justify-content: center;
   align-items: center;
 }
+
+.autocomplete__multi-select-tags {
+  margin-bottom: var(--s-space-4);
+  margin-top: var(--swirl-autocomplete-tags-margin-top);
+}
+
+@keyframes autocomplete-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -4,19 +4,57 @@ import classnames from "classnames";
 import { debounce } from "../../utils";
 export class SwirlAutocomplete {
   constructor() {
-    this.onChange = debounce(async (event) => {
-      this.value = event.detail;
-      this.valueChange.emit(this.value);
-      this.updateSuggestions();
+    this.onChange = (event) => {
+      event.stopPropagation();
+      this.updateTerm(event);
+    };
+    this.updateTerm = debounce(async (event) => {
+      this.updateSuggestions(event.detail);
       this.open();
+      if (this.multiSelect) {
+        return;
+      }
+      if (!Boolean(event.detail) || event.detail === "") {
+        this.value = undefined;
+        this.valueChange.emit(this.value);
+      }
     }, 250, false);
-    this.onSelect = (event) => {
-      if (Boolean(event.detail[0])) {
-        this.value = event.detail[0];
+    this.onSelect = async (event) => {
+      event.stopPropagation();
+      if (this.multiSelect) {
+        const selectedItemIds = event.detail;
+        const unselectedItemIds = this.suggestions
+          .filter((suggestion) => !selectedItemIds.includes(suggestion.id))
+          .map((suggestion) => suggestion.id);
+        this.value = [
+          ...this.value.filter((item) => !unselectedItemIds.includes(item.id)),
+          ...this.suggestions.filter((suggestion) => selectedItemIds.includes(suggestion.id) &&
+            !this.value.some((item) => item.id === suggestion.id)),
+        ];
         this.valueChange.emit(this.value);
+        this.inputEl.querySelector("input")?.focus();
+        await this.updateSuggestions(this.inputEl.querySelector("input").value);
+      }
+      else {
+        if (Boolean(event.detail[0])) {
+          const itemId = event.detail[0];
+          const suggestion = this.suggestions.find((suggestion) => suggestion.id === itemId);
+          if (!Boolean(suggestion)) {
+            return;
+          }
+          this.value = suggestion;
+          this.valueChange.emit(this.value);
+          this.inputEl.querySelector("input")?.focus();
+          this.close();
+        }
       }
-      this.inputEl.querySelector("input")?.focus();
-      this.close();
+    };
+    this.onRemoveValue = (value) => {
+      if (!Array.isArray(this.value)) {
+        return;
+      }
+      this.value = this.value.filter((item) => item.id !== value);
+      this.valueChange.emit(this.value);
     };
     this.onFocusOut = (event) => {
       const relatedTarget = event.relatedTarget;
@@ -31,6 +69,7 @@ export class SwirlAutocomplete {
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         event.preventDefault();
+        event.stopPropagation();
         this.inputEl.querySelector("input").focus();
         this.close();
       }
@@ -51,6 +90,8 @@ export class SwirlAutocomplete {
     this.maxLength = undefined;
     this.menuLabel = "Suggestions";
     this.mode = undefined;
+    this.multiSelect = undefined;
+    this.placeholder = undefined;
     this.required = undefined;
     this.spellCheck = undefined;
     this.swirlAriaDescribedby = undefined;
@@ -63,6 +104,7 @@ export class SwirlAutocomplete {
   componentWillLoad() {
     const index = document.querySelectorAll("swirl-datepicker").length;
     this.id = `autocomplete-${index}`;
+    this.handleInitialValue();
   }
   onWindowClick(event) {
     const target = event.target;
@@ -70,6 +112,9 @@ export class SwirlAutocomplete {
       this.close();
     }
   }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
   async close() {
     if (!this.active) {
       return;
@@ -77,6 +122,16 @@ export class SwirlAutocomplete {
     if (this.disableAutoUpdate) {
       this.disableAutoUpdate();
     }
+    const inputEl = this.inputEl.querySelector("input");
+    if (Boolean(inputEl)) {
+      if (this.multiSelect) {
+        inputEl.value = "";
+      }
+      else {
+        inputEl.value =
+          this.value?.label || "";
+      }
+    }
     this.active = false;
   }
   async open() {
@@ -89,8 +144,9 @@ export class SwirlAutocomplete {
       if (this.disableAutoUpdate) {
         this.disableAutoUpdate();
       }
-      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this));
+      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
       this.listboxContainerEl.scrollTop = 0;
+      this.updateSuggestions(this.inputEl.querySelector("input").value);
     });
   }
   async reposition() {
@@ -103,22 +159,47 @@ export class SwirlAutocomplete {
       strategy: "fixed",
     });
   }
-  async updateSuggestions() {
+  async updateSuggestions(term) {
     this.loading = true;
     this.suggestions = [];
-    this.suggestions = await this.generateSuggestions(this.value);
+    this.suggestions = await this.generateSuggestions(term);
     this.loading = false;
   }
+  handleInitialValue() {
+    if (this.multiSelect && !Array.isArray(this.value)) {
+      this.value = [];
+    }
+    if (!this.multiSelect && Array.isArray(this.value)) {
+      this.value = undefined;
+    }
+  }
   render() {
     const suggestionsMenuId = `${this.id}-suggestions`;
+    const clearable = this.clearable && !this.multiSelect;
+    const optionListValue = this.multiSelect
+      ? this.value.map((item) => item.id)
+      : Boolean(this.value)
+        ? [this.value.id]
+        : [];
+    const valueLabel = this.multiSelect
+      ? undefined
+      : this.value?.label || "";
     const className = classnames("autocomplete", {
       "autocomplete--inactive": !this.active,
     });
-    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, this.multiSelect &&
+      Array.isArray(this.value) &&
+      this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+      return (h("swirl-tag", { key: item.id, label: item.label,
+        // eslint-disable-next-line react/jsx-no-bind
+        onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
         top: Boolean(this.position) ? `${this.position?.y}px` : "",
         left: Boolean(this.position) ? `${this.position?.x}px` : "",
         width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: [this.value] }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: this.value === suggestion.label, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.label })))))))));
+      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+        ? this.value.some((item) => item.id === suggestion.id)
+        : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
   }
   static get is() { return "swirl-autocomplete"; }
   static get encapsulation() { return "scoped"; }
@@ -208,8 +289,8 @@ export class SwirlAutocomplete {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "(\n    currentValue: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
-          "resolved": "(currentValue: string) => Promise<SwirlAutocompleteSuggestion[]>",
+          "original": "(\n    term: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
+          "resolved": "(term: string) => Promise<SwirlAutocompleteSuggestion[]>",
           "references": {
             "Promise": {
               "location": "global"
@@ -319,6 +400,40 @@ export class SwirlAutocomplete {
         "attribute": "mode",
         "reflect": false
       },
+      "multiSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multi-select",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
       "required": {
         "type": "boolean",
         "mutable": false,
@@ -371,21 +486,24 @@ export class SwirlAutocomplete {
         "reflect": false
       },
       "value": {
-        "type": "string",
+        "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SwirlAutocompleteValue",
+          "resolved": "SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; }",
+          "references": {
+            "SwirlAutocompleteValue": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-autocomplete/swirl-autocomplete.tsx"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
           "text": ""
-        },
-        "attribute": "value",
-        "reflect": true
+        }
       }
     };
   }
@@ -409,13 +527,24 @@ export class SwirlAutocomplete {
           "text": ""
         },
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SwirlAutocompleteValue",
+          "resolved": "SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; }",
+          "references": {
+            "SwirlAutocompleteValue": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-autocomplete/swirl-autocomplete.tsx"
+            }
+          }
         }
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "multiSelect",
+        "methodName": "watchMultiSelect"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "click",

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

@@ -38,12 +38,12 @@ describe("swirl-autocomplete", () => {
     expect(page.root).toEqualHtml(`
       <swirl-autocomplete>
         <div class="autocomplete">
-          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0"></swirl-text-input>
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value=""></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #1" value="Item #1"></swirl-option-list-item>
-              <swirl-option-list-item disabled="" label="Item #2" value="Item #2"></swirl-option-list-item>
-              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #1" value="1"></swirl-option-list-item>
+              <swirl-option-list-item disabled="" label="Item #2" value="2"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -61,12 +61,12 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     expect(page.root).toEqualHtml(`
-      <swirl-autocomplete value="#3">
+      <swirl-autocomplete>
         <div class="autocomplete">
-          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value="#3"></swirl-text-input>
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value=""></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -84,15 +84,15 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     const listbox = page.root.querySelector("swirl-option-list");
-    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["3"] }));
     await page.waitForChanges();
     expect(page.root).toEqualHtml(`
-      <swirl-autocomplete value="Item #3">
+      <swirl-autocomplete>
         <div class="autocomplete autocomplete--inactive">
           <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="false" swirlrole="combobox" id="autocomplete-0" value="Item #3"></swirl-text-input>
           <div class="autocomplete__listbox-container" style="width: 32px;">
             <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
-              <swirl-option-list-item label="Item #3" selected="" value="Item #3"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" selected="" value="3"></swirl-option-list-item>
             </swirl-option-list>
           </div>
         </div>
@@ -112,9 +112,7 @@ describe("swirl-autocomplete", () => {
     input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
     await page.waitForChanges();
     const listbox = page.root.querySelector("swirl-option-list");
-    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
-    expect(spy.mock.calls[0][0].detail).toBe("#3");
-    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
-    expect(spy.mock.calls[1][0].detail).toBe("Item #3");
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["3"] }));
+    expect(spy.mock.calls[0][0].detail).toEqual({ id: "3", label: "Item #3" });
   });
 });

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

@@ -3,6 +3,13 @@ import Docs from "./swirl-autocomplete.mdx";
 export default {
   component: "swirl-autocomplete",
   tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: {
+        type: "object",
+      },
+    },
+  },
   parameters: {
     docs: {
       page: Docs,
@@ -16,16 +23,16 @@ export default {
 
   const suggestions = [
     {
-      id: "1",
+      id: "item-1",
       label: "Item #1",
     },
     {
       disabled: true,
-      id: "2",
+      id: "item-2",
       label: "Item #2",
     },
     {
-      id: "3",
+      id: "item-3",
       label: "Item #3",
     },
   ];
@@ -49,20 +56,21 @@ export default {
 const Template = (args) => {
   const formControl = document.createElement("swirl-form-control");
   const element = generateStoryElement("swirl-autocomplete", args);
+  formControl.setAttribute("disabled", args.disabled ? "true" : "false");
   formControl.label = "Autocomplete";
   const suggestions = [
     {
-      id: "1",
+      id: "item-1",
       label: "Item #1",
     },
     {
       disabled: true,
-      id: "2",
+      id: "item-2",
       label: "Item #2",
     },
     {
-      id: "3",
-      label: "Item #3",
+      id: "item-3",
+      label: "Item #3 with a longer label",
     },
   ];
   element.generateSuggestions = async (value) => {

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

@@ -39,7 +39,7 @@
 
 .button:disabled {
     color: var(--s-text-disabled);
-    background-color: var(--swirl-ghost-button-background-default);
+    background-color: var(--swirl-ghost-button-background-disabled);
     cursor: default;
   }
 
@@ -100,19 +100,19 @@
 
 .button--variant-flat {
   color: var(--s-text-default);
-  background-color: var(--s-action-neutral-default);
+  background-color: var(--swirl-flat-button-background-default);
 }
 
 .button--variant-flat:hover {
-    background-color: var(--s-action-neutral-hovered);
+    background-color: var(--swirl-flat-button-background-hovered);
   }
 
 .button--variant-flat:active {
-    background-color: var(--s-action-neutral-pressed);
+    background-color: var(--swirl-flat-button-background-pressed);
   }
 
 .button--variant-flat:disabled {
-    background-color: var(--s-action-neutral-disabled);
+    background-color: var(--swirl-flat-button-background-disabled);
   }
 
 .button--variant-flat.button--intent-primary:not(:disabled) {

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-clap.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiClap {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Clap32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-clap"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-happy.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiHappy {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Happy32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-happy"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}