@getflip/swirl-components 0.95.0 → 0.95.2

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

@@ -19,35 +19,25 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
       }
     };
   }
-  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 = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  getItems() {
+    return 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 = getActiveElement();
-    return this.items.findIndex((item) => item === activeElement ||
+    return items.findIndex((item) => item === activeElement ||
       item === activeElement?.querySelector('[role="menuitem"]'));
   }
   render() {

package/dist/components/swirl-autocomplete.js

@@ -54,8 +54,16 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
             !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/components/swirl-modal.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$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends HTMLElement {
   constructor() {

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

@@ -302,9 +302,11 @@ const SwirlOptionList = /*@__PURE__*/ proxyCustomElement(class SwirlOptionList e
     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/components/swirl-resource-list2.js

@@ -37,7 +37,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
       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);
@@ -46,7 +46,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
           this.moveDraggedItemDown();
         }
       }
-      else if (event.key === "ArrowUp") {
+      else if (event.code === "ArrowUp") {
         event.preventDefault();
         if (!Boolean(this.dragging)) {
           const prevIndex = this.focusedIndex === 0
@@ -58,7 +58,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
           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")) {
@@ -66,11 +66,11 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
           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);
       }
@@ -98,7 +98,11 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
       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();
@@ -113,9 +117,12 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
     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) {
@@ -156,6 +163,10 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
       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/components/swirl-select.js

@@ -37,9 +37,11 @@ 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();
     };
     this.onClose = () => {
       this.open = false;
+      this.input.focus();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
@@ -92,11 +94,11 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    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, type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
+    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, 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" }, 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 }))))));
   }
   get el() { return this; }
   static get style() { return swirlSelectCss; }

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

@@ -18,35 +18,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 = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  getItems() {
+    return 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 = getActiveElement();
-    return this.items.findIndex((item) => item === activeElement ||
+    return items.findIndex((item) => item === activeElement ||
       item === activeElement?.querySelector('[role="menuitem"]'));
   }
   render() {

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

@@ -311,7 +311,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);
@@ -320,7 +320,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
@@ -332,7 +332,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")) {
@@ -340,11 +340,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);
       }
@@ -372,7 +372,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();
@@ -387,9 +391,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) {
@@ -430,6 +437,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/esm/swirl-autocomplete.entry.js

@@ -37,8 +37,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/esm/swirl-modal.entry.js

@@ -1144,7 +1144,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/esm/swirl-option-list_2.entry.js

@@ -301,9 +301,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/esm/swirl-select.entry.js

@@ -28,9 +28,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") {
@@ -83,11 +85,11 @@ const SwirlSelect = class {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    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, type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
+    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, 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" }, 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 }))))));
   }
   get el() { return getElement(this); }
 };

package/dist/swirl-components/{p-89898ac6.entry.js → p-057b650a.entry.js}

@@ -1 +1 @@
-import{r as t,c as i,h as s,H as o,g as e}from"./p-3fca9a05.js";import{c as a,q as n}from"./p-646e00de.js";import{S as h}from"./p-1486d7ea.js";import{c as r}from"./p-b7898321.js";const l=class{constructor(s){t(this,s),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.onClick=t=>{t.preventDefault();const i=t.target,s=i?.closest("swirl-option-list-item"),o=t.composedPath()[0],e=Boolean(a(o,'[role="option"]'));Boolean(s)&&e?this.selectItem(this.items.findIndex((t=>t.value===s.value))):t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const i=t.composedPath()[0];if(!Boolean(a(i,'[role="option"]')))return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItem(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const i=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0,this.focusItem(i)},this.allowDeselect=!0,this.allowDrag=void 0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.disabled=void 0,this.label=void 0,this.optionListId=void 0,this.multiSelect=void 0,this.value=[],this.assistiveText=void 0}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.observer?.disconnect(),this.sortable?.destroy()}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue()})),this.observer.observe(this.listboxEl,{childList:!0})}updateItems(){this.items=n(this.el,"swirl-option-list-item"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")));const t=this.items[0]?.querySelector('[role="option"]');Boolean(t)&&t.setAttribute("tabIndex","0")}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=h.create(this.listboxEl,{animation:150,draggable:"swirl-option-list-item",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const i=this.items[t];if(i.disabled)return;const s=this.value.includes(i.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((t=>t!==i.value)):[...this.value,i.value]),this.focusItem(t))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.items.forEach((t=>t.querySelector('[role="option"]').removeAttribute("tabIndex")));const i=this.items[t]?.querySelector('[role="option"]');Boolean(i)&&(i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=i)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),i=Math.min(t+1,this.items.length-1);this.focusItem(i)}focusPreviousItem(){const t=this.getActiveItemIndex(),i=Math.max(t-1,0);this.focusItem(i)}getActiveItemIndex(){return this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem))}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}render(){const t=this.multiSelect?"true":void 0,i=Boolean(this.dragging)?0:void 0;return s(o,null,s("swirl-visually-hidden",{role:"alert"},this.assistiveText),s("div",{"aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:i},s("slot",null)))}get el(){return e(this)}static get watchers(){return{allowDrag:["watchAllowDrag"],disabled:["watchDisabled"],multiSelect:["watchMultiSelect"],value:["watchValue"]}}};l.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const c=class{constructor(s){t(this,s),this.remove=i(this,"remove",7),this.onRemove=t=>{this.remove?.emit(t)},this.intent="default",this.label=void 0,this.removable=void 0,this.removalButtonLabel="Remove"}render(){const t=r("tag",`tag--intent-${this.intent}`);return s(o,null,s("span",{class:t,part:"tag"},s("span",{class:"tag__label"},this.label),this.removable&&s("button",{"aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},s("swirl-icon-close",{size:16}))))}get el(){return e(this)}};c.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";export{l as swirl_option_list,c as swirl_tag}
+import{r as t,c as i,h as s,H as o,g as e}from"./p-3fca9a05.js";import{c as a,q as n}from"./p-646e00de.js";import{S as h}from"./p-1486d7ea.js";import{c as r}from"./p-b7898321.js";const l=class{constructor(s){t(this,s),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.onClick=t=>{t.preventDefault();const i=t.target,s=i?.closest("swirl-option-list-item"),o=t.composedPath()[0],e=Boolean(a(o,'[role="option"]'));Boolean(s)&&e?this.selectItem(this.items.findIndex((t=>t.value===s.value))):t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const i=t.composedPath()[0];if(!Boolean(a(i,'[role="option"]')))return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItem(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const i=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0,this.focusItem(i)},this.allowDeselect=!0,this.allowDrag=void 0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.disabled=void 0,this.label=void 0,this.optionListId=void 0,this.multiSelect=void 0,this.value=[],this.assistiveText=void 0}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.observer?.disconnect(),this.sortable?.destroy()}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue()})),this.observer.observe(this.listboxEl,{childList:!0})}updateItems(){this.items=n(this.el,"swirl-option-list-item"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")));const t=this.items[0]?.querySelector('[role="option"]');Boolean(t)&&t.setAttribute("tabIndex","0")}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=h.create(this.listboxEl,{animation:150,draggable:"swirl-option-list-item",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const i=this.items[t];if(i.disabled)return;const s=this.value.includes(i.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((t=>t!==i.value)):[...this.value,i.value]),this.focusItem(t))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.items.forEach((t=>t.querySelector('[role="option"]').removeAttribute("tabIndex")));const i=this.items[t]?.querySelector('[role="option"]');Boolean(i)&&(i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=i)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),i=Math.min(t+1,this.items.length-1);this.focusItem(i)}focusPreviousItem(){const t=this.getActiveItemIndex(),i=Math.max(t-1,0);this.focusItem(i)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem)):0}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}render(){const t=this.multiSelect?"true":void 0,i=Boolean(this.dragging)?0:void 0;return s(o,null,s("swirl-visually-hidden",{role:"alert"},this.assistiveText),s("div",{"aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:i},s("slot",null)))}get el(){return e(this)}static get watchers(){return{allowDrag:["watchAllowDrag"],disabled:["watchDisabled"],multiSelect:["watchMultiSelect"],value:["watchValue"]}}};l.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const c=class{constructor(s){t(this,s),this.remove=i(this,"remove",7),this.onRemove=t=>{this.remove?.emit(t)},this.intent="default",this.label=void 0,this.removable=void 0,this.removalButtonLabel="Remove"}render(){const t=r("tag",`tag--intent-${this.intent}`);return s(o,null,s("span",{class:t,part:"tag"},s("span",{class:"tag__label"},this.label),this.removable&&s("button",{"aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},s("swirl-icon-close",{size:16}))))}get el(){return e(this)}};c.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";export{l as swirl_option_list,c as swirl_tag}

package/dist/swirl-components/p-0e6c2f2b.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,H as e,g as o}from"./p-3fca9a05.js";import{a,c as h,o as l}from"./p-ecb8b7f5.js";import{c as n}from"./p-b7898321.js";import{d as r}from"./p-646e00de.js";const c=class{constructor(s){t(this,s),this.valueChange=i(this,"valueChange",7),this.onChange=t=>{t.stopPropagation(),this.updateTerm(t)},this.updateTerm=r((async t=>{this.updateSuggestions(t.detail),this.open(),this.multiSelect||Boolean(t.detail)&&""!==t.detail||(this.value=void 0,this.valueChange.emit(this.value))}),250,!1),this.onSelect=async t=>{if(t.stopPropagation(),this.multiSelect){const i=t.detail,s=this.suggestions.filter((t=>!i.includes(t.id))).map((t=>t.id));this.value=[...this.value.filter((t=>!s.includes(t.id))),...this.suggestions.filter((t=>i.includes(t.id)&&!this.value.some((i=>i.id===t.id))))],this.valueChange.emit(this.value),this.inputEl.value="";const e=this.inputEl.querySelector("input");Boolean(e)&&(e.value="",queueMicrotask((()=>{e.focus(),this.close()})),this.updateSuggestions(e.value))}else if(Boolean(t.detail[0])){const i=t.detail[0],s=this.suggestions.find((t=>t.id===i));if(!Boolean(s))return;this.value=s,this.valueChange.emit(this.value),queueMicrotask((()=>{this.inputEl.querySelector("input")?.focus(),this.close()}))}},this.onRemoveValue=t=>{Array.isArray(this.value)&&(this.value=this.value.filter((i=>i.id!==t)),this.valueChange.emit(this.value))},this.onFocusOut=t=>{const i=t.relatedTarget;Boolean(i)&&!this.el.contains(i)&&this.close()},this.onFocus=()=>{this.updateSuggestions(),this.open()},this.onKeyDown=t=>{"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.inputEl.querySelector("input").focus(),this.close())},this.onInputKeyDown=t=>{"ArrowDown"===t.code&&(t.preventDefault(),this.listboxEl.querySelector('[role="listbox"]')?.querySelector('[tabIndex="0"]')?.focus())},this.autoSelect=void 0,this.clearable=!0,this.clearButtonLabel="Clear input",this.disabled=void 0,this.generateSuggestions=async()=>[],this.inline=void 0,this.invalid=void 0,this.maxLength=void 0,this.menuLabel="Suggestions",this.mode=void 0,this.multiSelect=void 0,this.placeholder=void 0,this.required=void 0,this.spellCheck=void 0,this.swirlAriaDescribedby=void 0,this.value=void 0,this.active=!1,this.loading=!1,this.position=void 0,this.suggestions=[]}componentWillLoad(){const t=document.querySelectorAll("swirl-datepicker").length;this.id=`autocomplete-${t}`,this.handleInitialValue()}onWindowClick(t){this.el.contains(t.target)||this.close()}watchMultiSelect(){this.handleInitialValue()}async close(){if(!this.active)return;this.disableAutoUpdate&&this.disableAutoUpdate();const t=this.inputEl.querySelector("input");Boolean(t)&&(t.value=this.multiSelect?"":this.value?.label||""),this.active=!1}async open(){this.active||(this.active=!0,requestAnimationFrame((async()=>{await this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=a(this.inputEl,this.listboxContainerEl,this.reposition.bind(this),{animationFrame:!0}),this.listboxContainerEl.scrollTop=0,this.updateSuggestions(this.inputEl.querySelector("input").value)})))}async reposition(){Boolean(this.listboxContainerEl)&&(this.position=await h(this.inputEl,this.listboxContainerEl,{middleware:[l({crossAxis:-16,mainAxis:16})],placement:"bottom-start",strategy:"fixed"}))}async updateSuggestions(t){this.loading=!0,this.suggestions=[],this.suggestions=await this.generateSuggestions(t),this.loading=!1}handleInitialValue(){this.multiSelect&&!Array.isArray(this.value)&&(this.value=[]),!this.multiSelect&&Array.isArray(this.value)&&(this.value=void 0)}render(){const t=`${this.id}-suggestions`,i=this.clearable&&!this.multiSelect,o=this.multiSelect?this.value.map((t=>t.id)):Boolean(this.value)?[this.value.id]:[],a=this.multiSelect?void 0:this.value?.label||"",h=n("autocomplete",{"autocomplete--inactive":!this.active});return s(e,null,s("div",{class:h,onKeyDown:this.onKeyDown},this.multiSelect&&Array.isArray(this.value)&&this.value.length>0&&s("div",{class:"autocomplete__multi-select-tags"},s("swirl-stack",{orientation:"horizontal",spacing:"8",wrap:!0},this.value.map((t=>s("swirl-tag",{key:t.id,label:t.label,onRemove:()=>this.onRemoveValue(t.id),removable:!this.disabled}))))),s("swirl-text-input",{autoSelect:this.autoSelect,class:"autocomplete__input",clearable:i,clearButtonLabel:this.clearButtonLabel,disabled:this.disabled,disableDynamicWidth:!0,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:t=>this.inputEl=t,required:this.required,spellCheck:this.spellCheck,swirlAriaAutocomplete:"list",swirlAriaControls:t,swirlAriaDescribedby:this.swirlAriaDescribedby,swirlAriaExpanded:String(this.active),swirlRole:"combobox",value:a}),s("div",{class:"autocomplete__listbox-container",onFocusout:this.onFocusOut,ref:t=>this.listboxContainerEl=t,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&&s("div",{class:"autocomplete__spinner"},s("swirl-spinner",null)),this.suggestions.length>0&&s("swirl-option-list",{allowDeselect:!0===this.multiSelect,label:this.menuLabel,multiSelect:this.multiSelect,onValueChange:this.onSelect,optionListId:t,ref:t=>this.listboxEl=t,value:o},this.suggestions.map((t=>s("swirl-option-list-item",{selected:Array.isArray(this.value)?this.value.some((i=>i.id===t.id)):this.value?.id===t.id,key:t.id,disabled:t.disabled,label:t.label,value:t.id})))))))}get el(){return o(this)}static get watchers(){return{multiSelect:["watchMultiSelect"]}}};c.style=".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-x:hidden;overflow-y:auto;max-height:18rem;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-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";export{c as swirl_autocomplete}