@getflip/swirl-components 0.95.2 → 0.96.0

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

@@ -23,28 +23,52 @@ export class SwirlSelect {
     this.onOpen = (event) => {
       this.placement = event.detail.position?.placement;
       this.open = true;
-      this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      if (this.withSearch && Boolean(this.searchInput)) {
+        this.searchInput.focus();
+      }
+      else {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
     };
     this.onClose = () => {
+      if (Boolean(this.searchInput)) {
+        this.searchInput.value = "";
+        this.searchChange.emit("");
+      }
       this.open = false;
       this.input.focus();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
+        if (event.target === this.searchInput) {
+          return;
+        }
         event.preventDefault();
         this.popover.open(this.el);
       }
+      else if (event.code === "ArrowDown" &&
+        event.target === this.searchInput) {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onSearchInput = (event) => {
+      this.searchChange.emit(event.target.value);
     };
     this.allowDeselect = true;
     this.disabled = undefined;
+    this.emptyListLabel = "No results found.";
     this.inline = undefined;
     this.invalid = undefined;
     this.label = undefined;
     this.multiSelect = undefined;
     this.required = undefined;
+    this.searchInputLabel = "Search options";
+    this.searchLoading = undefined;
+    this.searchPlaceholder = undefined;
     this.selectId = Math.round(Math.random() * 1000000).toString();
     this.swirlAriaDescribedby = undefined;
     this.value = undefined;
+    this.withSearch = undefined;
     this.options = [];
     this.open = undefined;
     this.placement = undefined;
@@ -79,12 +103,13 @@ export class SwirlSelect {
       "select--disabled": this.disabled,
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
     });
     return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
       ?.map((value) => this.options.find((option) => option.value === value))
       ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
       // eslint-disable-next-line react/jsx-no-bind
-      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { class: "select__search" }, h("swirl-icon-search", { class: "select__search-icon", size: 20 }), h("input", { "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   static get is() { return "swirl-select"; }
   static get encapsulation() { return "scoped"; }
@@ -135,6 +160,24 @@ export class SwirlSelect {
         "attribute": "disabled",
         "reflect": false
       },
+      "emptyListLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "empty-list-label",
+        "reflect": false,
+        "defaultValue": "\"No results found.\""
+      },
       "inline": {
         "type": "boolean",
         "mutable": false,
@@ -220,6 +263,58 @@ export class SwirlSelect {
         "attribute": "required",
         "reflect": false
       },
+      "searchInputLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-input-label",
+        "reflect": false,
+        "defaultValue": "\"Search options\""
+      },
+      "searchLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-loading",
+        "reflect": false
+      },
+      "searchPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-placeholder",
+        "reflect": false
+      },
       "selectId": {
         "type": "string",
         "mutable": false,
@@ -269,6 +364,23 @@ export class SwirlSelect {
           "tags": [],
           "text": ""
         }
+      },
+      "withSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "with-search",
+        "reflect": false
       }
     };
   }
@@ -281,6 +393,21 @@ export class SwirlSelect {
   }
   static get events() {
     return [{
+        "method": "searchChange",
+        "name": "searchChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
         "method": "valueChange",
         "name": "valueChange",
         "bubbles": true,

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

@@ -35,6 +35,11 @@ describe("swirl-select", () => {
           </span>
           <swirl-popover animation="scale-in-y" class="select__popover" id="select-options-${page.root.selectId}" label="Select" usecontainerwidth="swirl-form-control">
             <swirl-option-list allowdeselect="">
+              <div aria-disabled="true" class="select__empty-list-label" role="option">
+                <swirl-text color="subdued" weight="medium">
+                  No results found.
+                </swirl-text>
+              </div>
               <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>

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

@@ -42,5 +42,7 @@ const Template = (args) => {
 export const SwirlSelect = Template.bind({});
 SwirlSelect.args = {
   label: "Select",
+  searchPlaceholder: "Search …",
   value: ["2"],
+  withSearch: true,
 };

package/dist/components/swirl-select.js

@@ -1,21 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$9 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$8 } from './swirl-icon-expand-less2.js';
-import { d as defineCustomElement$7 } from './swirl-icon-expand-more2.js';
-import { d as defineCustomElement$6 } from './swirl-option-list2.js';
-import { d as defineCustomElement$5 } from './swirl-popover2.js';
-import { d as defineCustomElement$4 } from './swirl-popover-trigger2.js';
-import { d as defineCustomElement$3 } from './swirl-tag2.js';
+import { d as defineCustomElement$c } from './swirl-icon-close2.js';
+import { d as defineCustomElement$b } from './swirl-icon-expand-less2.js';
+import { d as defineCustomElement$a } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-search2.js';
+import { d as defineCustomElement$8 } from './swirl-option-list2.js';
+import { d as defineCustomElement$7 } from './swirl-popover2.js';
+import { d as defineCustomElement$6 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$5 } from './swirl-spinner2.js';
+import { d as defineCustomElement$4 } from './swirl-tag2.js';
+import { d as defineCustomElement$3 } from './swirl-text2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{padding:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";
 
 const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.searchChange = createEvent(this, "searchChange", 7);
     this.valueChange = createEvent(this, "valueChange", 7);
     this.select = (event) => {
       this.value = event.detail;
@@ -37,28 +41,52 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
     this.onOpen = (event) => {
       this.placement = event.detail.position?.placement;
       this.open = true;
-      this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      if (this.withSearch && Boolean(this.searchInput)) {
+        this.searchInput.focus();
+      }
+      else {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
     };
     this.onClose = () => {
+      if (Boolean(this.searchInput)) {
+        this.searchInput.value = "";
+        this.searchChange.emit("");
+      }
       this.open = false;
       this.input.focus();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
+        if (event.target === this.searchInput) {
+          return;
+        }
         event.preventDefault();
         this.popover.open(this.el);
       }
+      else if (event.code === "ArrowDown" &&
+        event.target === this.searchInput) {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onSearchInput = (event) => {
+      this.searchChange.emit(event.target.value);
     };
     this.allowDeselect = true;
     this.disabled = undefined;
+    this.emptyListLabel = "No results found.";
     this.inline = undefined;
     this.invalid = undefined;
     this.label = undefined;
     this.multiSelect = undefined;
     this.required = undefined;
+    this.searchInputLabel = "Search options";
+    this.searchLoading = undefined;
+    this.searchPlaceholder = undefined;
     this.selectId = Math.round(Math.random() * 1000000).toString();
     this.swirlAriaDescribedby = undefined;
     this.value = undefined;
+    this.withSearch = undefined;
     this.options = [];
     this.open = undefined;
     this.placement = undefined;
@@ -93,26 +121,32 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
       "select--disabled": this.disabled,
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
     });
     return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
       ?.map((value) => this.options.find((option) => option.value === value))
       ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
       // eslint-disable-next-line react/jsx-no-bind
-      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { class: "select__search" }, h("swirl-icon-search", { class: "select__search-icon", size: 20 }), h("input", { "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   get el() { return this; }
   static get style() { return swirlSelectCss; }
 }, [6, "swirl-select", {
     "allowDeselect": [4, "allow-deselect"],
     "disabled": [4],
+    "emptyListLabel": [1, "empty-list-label"],
     "inline": [4],
     "invalid": [4],
     "label": [1],
     "multiSelect": [4, "multi-select"],
     "required": [4],
+    "searchInputLabel": [1, "search-input-label"],
+    "searchLoading": [4, "search-loading"],
+    "searchPlaceholder": [1, "search-placeholder"],
     "selectId": [1, "select-id"],
     "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
     "value": [1040],
+    "withSearch": [4, "with-search"],
     "options": [32],
     "open": [32],
     "placement": [32]
@@ -121,7 +155,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-select", "swirl-icon-close", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-option-list", "swirl-popover", "swirl-popover-trigger", "swirl-tag", "swirl-visually-hidden"];
+  const components = ["swirl-select", "swirl-icon-close", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-search", "swirl-option-list", "swirl-popover", "swirl-popover-trigger", "swirl-spinner", "swirl-tag", "swirl-text", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-select":
       if (!customElements.get(tagName)) {
@@ -130,35 +164,50 @@ function defineCustomElement$1() {
       break;
     case "swirl-icon-close":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$c();
       }
       break;
     case "swirl-icon-expand-less":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$b();
       }
       break;
     case "swirl-icon-expand-more":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$a();
+      }
+      break;
+    case "swirl-icon-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
       }
       break;
     case "swirl-option-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "swirl-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "swirl-popover-trigger":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
       }
       break;
     case "swirl-tag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-text":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/esm/index-99d0060d.js

@@ -3055,10 +3055,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-person.entry.js').then(processMod, consoleError);
-        case 'swirl-icon-search':
-          return import(
-            /* webpackMode: "lazy" */
-            './swirl-icon-search.entry.js').then(processMod, consoleError);
         case 'swirl-icon-time-outlined':
           return import(
             /* webpackMode: "lazy" */
@@ -3083,6 +3079,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-file-viewer_7.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-search':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-search.entry.js').then(processMod, consoleError);
         case 'swirl-icon-cancel_4':
           return import(
             /* webpackMode: "lazy" */
@@ -3123,14 +3123,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-close.entry.js').then(processMod, consoleError);
-        case 'swirl-text':
-          return import(
-            /* webpackMode: "lazy" */
-            './swirl-text.entry.js').then(processMod, consoleError);
         case 'swirl-icon-error_3':
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-error_3.entry.js').then(processMod, consoleError);
+        case 'swirl-text':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-text.entry.js').then(processMod, consoleError);
         case 'swirl-stack':
           return import(
             /* webpackMode: "lazy" */