@getflip/swirl-components 0.86.0 → 0.87.0

package/dist/components/swirl-autocomplete.js

@@ -2,40 +2,81 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
 import { c as classnames } from './index2.js';
 import { d as debounce } from './utils.js';
-import { d as defineCustomElement$e } from './swirl-icon-cancel2.js';
-import { d as defineCustomElement$d } from './swirl-icon-check-small2.js';
-import { d as defineCustomElement$c } from './swirl-icon-check-strong2.js';
-import { d as defineCustomElement$b } from './swirl-icon-drag-handle2.js';
-import { d as defineCustomElement$a } from './swirl-icon-expand-less2.js';
-import { d as defineCustomElement$9 } from './swirl-icon-expand-more2.js';
-import { d as defineCustomElement$8 } from './swirl-icon-visibility2.js';
-import { d as defineCustomElement$7 } from './swirl-icon-visibility-off2.js';
-import { d as defineCustomElement$6 } from './swirl-option-list2.js';
-import { d as defineCustomElement$5 } from './swirl-option-list-item2.js';
-import { d as defineCustomElement$4 } from './swirl-spinner2.js';
+import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
+import { d as defineCustomElement$g } from './swirl-icon-check-small2.js';
+import { d as defineCustomElement$f } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$e } from './swirl-icon-close2.js';
+import { d as defineCustomElement$d } from './swirl-icon-drag-handle2.js';
+import { d as defineCustomElement$c } from './swirl-icon-expand-less2.js';
+import { d as defineCustomElement$b } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$a } from './swirl-icon-visibility2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-visibility-off2.js';
+import { d as defineCustomElement$8 } from './swirl-option-list2.js';
+import { d as defineCustomElement$7 } from './swirl-option-list-item2.js';
+import { d as defineCustomElement$6 } from './swirl-spinner2.js';
+import { d as defineCustomElement$5 } from './swirl-stack2.js';
+import { d as defineCustomElement$4 } from './swirl-tag2.js';
 import { d as defineCustomElement$3 } from './swirl-text-input2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}";
+const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);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)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-bottom:var(--s-space-4);margin-top:var(--swirl-autocomplete-tags-margin-top)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
 
 const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomplete extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
-    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);
       }
-      this.inputEl.querySelector("input")?.focus();
-      this.close();
+      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.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;
@@ -50,6 +91,7 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         event.preventDefault();
+        event.stopPropagation();
         this.inputEl.querySelector("input").focus();
         this.close();
       }
@@ -70,6 +112,8 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     this.maxLength = undefined;
     this.menuLabel = "Suggestions";
     this.mode = undefined;
+    this.multiSelect = undefined;
+    this.placeholder = undefined;
     this.required = undefined;
     this.spellCheck = undefined;
     this.swirlAriaDescribedby = undefined;
@@ -82,6 +126,7 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
   componentWillLoad() {
     const index = document.querySelectorAll("swirl-datepicker").length;
     this.id = `autocomplete-${index}`;
+    this.handleInitialValue();
   }
   onWindowClick(event) {
     const target = event.target;
@@ -89,6 +134,9 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
       this.close();
     }
   }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
   async close() {
     if (!this.active) {
       return;
@@ -96,6 +144,16 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     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() {
@@ -108,8 +166,9 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
       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() {
@@ -122,24 +181,52 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
       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 })))))))));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "multiSelect": ["watchMultiSelect"]
+  }; }
   static get style() { return swirlAutocompleteCss; }
 }, [2, "swirl-autocomplete", {
     "autoSelect": [4, "auto-select"],
@@ -152,10 +239,12 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     "maxLength": [2, "max-length"],
     "menuLabel": [1, "menu-label"],
     "mode": [1],
+    "multiSelect": [4, "multi-select"],
+    "placeholder": [1],
     "required": [4],
     "spellCheck": [4, "spell-check"],
     "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-    "value": [1537],
+    "value": [1040],
     "active": [32],
     "loading": [32],
     "position": [32],
@@ -165,7 +254,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-autocomplete", "swirl-icon-cancel", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-drag-handle", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-visibility", "swirl-icon-visibility-off", "swirl-option-list", "swirl-option-list-item", "swirl-spinner", "swirl-text-input", "swirl-visually-hidden"];
+  const components = ["swirl-autocomplete", "swirl-icon-cancel", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-close", "swirl-icon-drag-handle", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-visibility", "swirl-icon-visibility-off", "swirl-option-list", "swirl-option-list-item", "swirl-spinner", "swirl-stack", "swirl-tag", "swirl-text-input", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-autocomplete":
       if (!customElements.get(tagName)) {
@@ -174,55 +263,70 @@ function defineCustomElement$1() {
       break;
     case "swirl-icon-cancel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$h();
       }
       break;
     case "swirl-icon-check-small":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$g();
       }
       break;
     case "swirl-icon-check-strong":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$f();
+      }
+      break;
+    case "swirl-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
       }
       break;
     case "swirl-icon-drag-handle":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "swirl-icon-expand-less":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "swirl-icon-expand-more":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "swirl-icon-visibility":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "swirl-icon-visibility-off":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "swirl-option-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "swirl-option-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-tag":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

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

@@ -4,7 +4,7 @@ import { b as getActiveElement } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$2 } from './swirl-inline-error2.js';
 
-const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--label-position-outside.sc-swirl-form-control{padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}";
+const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}";
 
 const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormControl extends HTMLElement {
   constructor() {

package/dist/components/swirl-option-list2.js

@@ -155,6 +155,11 @@ const SwirlOptionList = /*@__PURE__*/ proxyCustomElement(class SwirlOptionList e
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
       this.updateItems();
+      this.setItemAllowDragState();
+      this.setItemDisabledState();
+      this.setItemContext();
+      this.syncItemsWithValue();
+      this.setupDragDrop();
     });
     this.observer.observe(this.listboxEl, { childList: true });
   }

package/dist/components/swirl-select.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './swirl-popover-trigger2.js';
 import { d as defineCustomElement$3 } from './swirl-tag2.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;visibility:hidden;width:100%;height:100%}.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__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 SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends HTMLElement {
   constructor() {
@@ -44,7 +44,7 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
         event.preventDefault();
-        this.popover.open();
+        this.popover.open(this.el);
       }
     };
     this.allowDeselect = true;

package/dist/components/swirl-text-input2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './swirl-icon-expand-more2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-visibility2.js';
 import { d as defineCustomElement$1 } from './swirl-icon-visibility-off2.js';
 
-const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
+const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
 
 const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput extends HTMLElement {
   constructor() {

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

@@ -3035,10 +3035,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-tab-bar.entry.js').then(processMod, consoleError);
-        case 'swirl-tag':
-          return import(
-            /* webpackMode: "lazy" */
-            './swirl-tag.entry.js').then(processMod, consoleError);
         case 'swirl-text-input':
           return import(
             /* webpackMode: "lazy" */
@@ -3063,14 +3059,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-cancel_4.entry.js').then(processMod, consoleError);
-        case 'wc-datepicker':
+        case 'swirl-option-list_2':
           return import(
             /* webpackMode: "lazy" */
-            './wc-datepicker.entry.js').then(processMod, consoleError);
-        case 'swirl-option-list':
+            './swirl-option-list_2.entry.js').then(processMod, consoleError);
+        case 'wc-datepicker':
           return import(
             /* webpackMode: "lazy" */
-            './swirl-option-list.entry.js').then(processMod, consoleError);
+            './wc-datepicker.entry.js').then(processMod, consoleError);
         case 'swirl-icon-check-small_3':
           return import(
             /* webpackMode: "lazy" */