@getflip/swirl-components 0.95.0 → 0.95.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-20T09:52:00",
+  "timestamp": "2023-09-26T06:56:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-action-list_3.cjs.entry.js

@@ -22,35 +22,25 @@ const SwirlActionList = class {
       }
     };
   }
-  componentDidLoad() {
-    this.updateItems();
-    this.observeSlotChanges();
-  }
-  disconnectedCallback() {
-    this.observer?.disconnect();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems();
-    });
-    this.observer.observe(this.el, { childList: true });
-  }
-  updateItems() {
-    this.items = utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
+  getItems() {
+    return utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
   }
   focusNextItem() {
+    const items = this.getItems();
     const activeItemIndex = this.getActiveItemIndex();
-    const newIndex = (activeItemIndex + 1) % this.items.length;
-    this.items[newIndex].focus();
+    const newIndex = (activeItemIndex + 1) % items.length;
+    items[newIndex].focus();
   }
   focusPreviousItem() {
+    const items = this.getItems();
     const activeItemIndex = this.getActiveItemIndex();
-    const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
-    this.items[newIndex]?.focus();
+    const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+    items[newIndex]?.focus();
   }
   getActiveItemIndex() {
+    const items = this.getItems();
     const activeElement = utils.getActiveElement();
-    return this.items.findIndex((item) => item === activeElement ||
+    return items.findIndex((item) => item === activeElement ||
       item === activeElement?.querySelector('[role="menuitem"]'));
   }
   render() {

package/dist/cjs/swirl-app-layout_7.cjs.entry.js

@@ -315,7 +315,7 @@ const SwirlResourceList = class {
       this.draggingStartIndex = undefined;
     };
     this.onKeyDown = (event) => {
-      if (event.key === "ArrowDown") {
+      if (event.code === "ArrowDown") {
         event.preventDefault();
         if (!Boolean(this.dragging)) {
           this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
@@ -324,7 +324,7 @@ const SwirlResourceList = class {
           this.moveDraggedItemDown();
         }
       }
-      else if (event.key === "ArrowUp") {
+      else if (event.code === "ArrowUp") {
         event.preventDefault();
         if (!Boolean(this.dragging)) {
           const prevIndex = this.focusedIndex === 0
@@ -336,7 +336,7 @@ const SwirlResourceList = class {
           this.moveDraggedItemUp();
         }
       }
-      else if (event.key === "Space" || event.key === "Enter") {
+      else if (event.code === "Space" || event.code === "Enter") {
         const target = event.composedPath()[0];
         if (Boolean(this.dragging) &&
           !target?.classList.contains("resource-list-item__drag-handle")) {
@@ -344,11 +344,11 @@ const SwirlResourceList = class {
           this.stopDrag(this.dragging);
         }
       }
-      else if (event.key === "Home") {
+      else if (event.code === "Home") {
         event.preventDefault();
         this.focusItemAtIndex(0);
       }
-      else if (event.key === "End") {
+      else if (event.code === "End") {
         event.preventDefault();
         this.focusItemAtIndex(this.items.length - 1);
       }
@@ -376,7 +376,11 @@ const SwirlResourceList = class {
       this.setItemAllowDragState();
       this.setupDragDrop();
     });
-    this.observer.observe(this.el, { childList: true });
+    this.observer.observe(this.el, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
   }
   watchAllowDrag() {
     this.setItemAllowDragState();
@@ -391,9 +395,12 @@ const SwirlResourceList = class {
     return this.items.map((i) => i).findIndex((i) => i === item);
   }
   removeItemsFromTabOrder() {
-    this.items.forEach((item) => item
-      ?.querySelector(".resource-list-item__content, .resource-list-file-item")
-      ?.setAttribute("tabIndex", "-1"));
+    this.items.forEach((item) => {
+      const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item");
+      const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
+      focusableEl?.setAttribute("tabIndex", "-1");
+      dragHandle?.setAttribute("tabIndex", "-1");
+    });
   }
   setItemAllowDragState() {
     if (this.allowDrag) {
@@ -434,6 +441,10 @@ const SwirlResourceList = class {
       return;
     }
     const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item");
+    const dragHandle = item.querySelector(".resource-list-item__drag-handle");
+    if (Boolean(dragHandle)) {
+      dragHandle.setAttribute("tabIndex", "0");
+    }
     if (!Boolean(interactiveElement)) {
       return;
     }

package/dist/cjs/swirl-autocomplete.cjs.entry.js

@@ -41,8 +41,16 @@ const SwirlAutocomplete = class {
             !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.value = "";
+        const input = this.inputEl.querySelector("input");
+        if (Boolean(input)) {
+          input.value = "";
+          queueMicrotask(() => {
+            input.focus();
+            this.close();
+          });
+          this.updateSuggestions(input.value);
+        }
       }
       else {
         if (Boolean(event.detail[0])) {

package/dist/cjs/swirl-modal.cjs.entry.js

@@ -1148,7 +1148,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:4.125rem;padding-top:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
+const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:4.125rem;padding-top:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
 
 const SwirlModal = class {
   constructor(hostRef) {

package/dist/cjs/swirl-option-list_2.cjs.entry.js

@@ -305,9 +305,11 @@ const SwirlOptionList = class {
     this.focusItem(newIndex);
   }
   getActiveItemIndex() {
-    return this.items
-      .map((item) => item.querySelector('[role="option"]'))
-      .findIndex((item) => item === this.focusedItem);
+    return Boolean(this.focusedItem)
+      ? this.items
+        .map((item) => item.querySelector('[role="option"]'))
+        .findIndex((item) => item === this.focusedItem)
+      : 0;
   }
   getItemIndex(item) {
     return this.items.map((i) => i).findIndex((i) => i === item);

package/dist/cjs/swirl-select.cjs.entry.js

@@ -32,9 +32,11 @@ const SwirlSelect = class {
     this.onOpen = (event) => {
       this.placement = event.detail.position?.placement;
       this.open = true;
+      this.optionList.querySelector('[tabIndex="0"]')?.focus();
     };
     this.onClose = () => {
       this.open = false;
+      this.input.focus();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
@@ -87,11 +89,11 @@ const SwirlSelect = class {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, type: "text", value: label })), index.h("span", { class: "select__multi-select-values" }, this.value
+    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.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 })), index.h("span", { class: "select__multi-select-values" }, this.value
       ?.map((value) => this.options.find((option) => option.value === value))
       ?.map((option) => (index.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 })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   get el() { return index.getElement(this); }
 };