@getflip/swirl-components 0.87.2 → 0.87.4

package/dist/cjs/swirl-icon-check-small_3.cjs.entry.js

@@ -53,6 +53,12 @@ const SwirlOptionListItem = class {
         this.toggleDrag.emit(this.el);
       }
     };
+    this.onBlur = () => {
+      this.focused = false;
+    };
+    this.onFocus = () => {
+      this.focused = true;
+    };
     this.allowDrag = undefined;
     this.context = "single-select";
     this.disabled = undefined;
@@ -65,6 +71,7 @@ const SwirlOptionListItem = class {
     this.swirlAriaRole = "option";
     this.value = undefined;
     this.iconSize = 24;
+    this.focused = undefined;
   }
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
@@ -93,7 +100,7 @@ const SwirlOptionListItem = class {
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (index.h(index.Host, null, index.h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (index.h("span", { class: "option-list-item__checkbox" }, index.h("span", { class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (index.h("span", { class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (index.h(index.Host, null, index.h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (index.h("span", { class: "option-list-item__checkbox" }, index.h("span", { class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (index.h("span", { class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -14,19 +14,6 @@ const SwirlOptionList = class {
     index.registerInstance(this, hostRef);
     this.itemDrop = index.createEvent(this, "itemDrop", 7);
     this.valueChange = index.createEvent(this, "valueChange", 7);
-    this.onFocus = async (event) => {
-      if (this.listboxEl.contains(event.relatedTarget)) {
-        return;
-      }
-      // prevent focus from canceling the drag event in Safari
-      await new Promise((resolve) => setTimeout(resolve));
-      if (Boolean(this.focusedItem)) {
-        this.focusItem(this.getActiveItemIndex());
-      }
-      else {
-        this.focusItem(0);
-      }
-    };
     this.onClick = (event) => {
       event.preventDefault();
       const target = event.target;
@@ -59,6 +46,12 @@ const SwirlOptionList = class {
         }
       }
       else if (event.code === "Space" || event.code === "Enter") {
+        const startingDrag = event.target.classList.contains("option-list-item__drag-handle");
+        if (!startingDrag && Boolean(this.dragging)) {
+          event.preventDefault();
+          this.stopDrag(this.dragging);
+          return;
+        }
         const target = event.composedPath()[0];
         const optionFocused = Boolean(utils.closestPassShadow(target, '[role="option"]'));
         if (!optionFocused) {
@@ -116,6 +109,7 @@ const SwirlOptionList = class {
       this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
       this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
       this.draggingStartIndex = undefined;
+      this.focusItem(newIndex);
     };
     this.allowDeselect = true;
     this.allowDrag = undefined;
@@ -138,6 +132,9 @@ const SwirlOptionList = class {
     this.syncItemsWithValue();
     this.setupDragDrop();
   }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
   disconnectedCallback() {
     this.observer?.disconnect();
     this.sortable?.destroy();
@@ -162,12 +159,17 @@ const SwirlOptionList = class {
       this.setItemDisabledState();
       this.setItemContext();
       this.syncItemsWithValue();
-      this.setupDragDrop();
     });
     this.observer.observe(this.listboxEl, { childList: true });
   }
   updateItems() {
     this.items = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
+    this.items.forEach((item) => item.querySelector('[role="option"]')?.removeAttribute("tabIndex"));
+    const item = this.items[0]?.querySelector('[role="option"]');
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
   }
   setItemDisabledState() {
     if (this.disabled) {
@@ -249,6 +251,7 @@ const SwirlOptionList = class {
     else {
       this.updateValue(this.value.filter((v) => v !== item.value));
     }
+    this.focusItem(index);
   }
   updateValue(value) {
     this.value = value;
@@ -331,8 +334,8 @@ const SwirlOptionList = class {
   }
   render() {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;
-    const tabIndex = this.disabled ? -1 : 0;
-    return (index.h(index.Host, null, index.h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), index.h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, index.h("slot", null))));
+    const tabIndex = Boolean(this.dragging) ? 0 : undefined;
+    return (index.h(index.Host, null, index.h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), index.h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -44,8 +44,10 @@ export class SwirlAutocomplete {
           }
           this.value = suggestion;
           this.valueChange.emit(this.value);
-          this.inputEl.querySelector("input")?.focus();
-          this.close();
+          queueMicrotask(() => {
+            this.inputEl.querySelector("input")?.focus();
+            this.close();
+          });
         }
       }
     };
@@ -77,7 +79,10 @@ export class SwirlAutocomplete {
     this.onInputKeyDown = (event) => {
       if (event.code === "ArrowDown") {
         event.preventDefault();
-        this.listboxEl.querySelector('[role="listbox"]').focus();
+        this.listboxEl
+          .querySelector('[role="listbox"]')
+          ?.querySelector('[tabIndex="0"]')
+          ?.focus();
       }
     };
     this.autoSelect = undefined;
@@ -187,13 +192,13 @@ export class SwirlAutocomplete {
     const className = classnames("autocomplete", {
       "autocomplete--inactive": !this.active,
     });
-    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, this.multiSelect &&
+    return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
       Array.isArray(this.value) &&
       this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
       return (h("swirl-tag", { key: item.id, label: item.label,
         // eslint-disable-next-line react/jsx-no-bind
         onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
         top: Boolean(this.position) ? `${this.position?.y}px` : "",
         left: Boolean(this.position) ? `${this.position?.x}px` : "",
         width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,

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

@@ -72,6 +72,196 @@ const Template = (args) => {
       id: "item-3",
       label: "Item #3 with a longer label",
     },
+    {
+      id: "item-4",
+      label: "Item #4",
+    },
+    {
+      id: "item-5",
+      label: "Item #5",
+    },
+    {
+      id: "item-6",
+      label: "Item #6 with some additional information",
+    },
+    {
+      id: "item-7",
+      label: "Item #7",
+    },
+    {
+      disabled: true,
+      id: "item-8",
+      label: "Item #8",
+    },
+    {
+      id: "item-9",
+      label: "Item #9 with a lengthy label to test wrapping",
+    },
+    {
+      id: "item-10",
+      label: "Item #10",
+    },
+    {
+      id: "item-11",
+      label: "Item #11",
+    },
+    {
+      id: "item-12",
+      label: "Item #12",
+    },
+    {
+      id: "item-13",
+      label: "Item #13",
+    },
+    {
+      id: "item-14",
+      label: "Item #14 with a descriptive label",
+    },
+    {
+      id: "item-15",
+      label: "Item #15",
+    },
+    {
+      id: "item-16",
+      label: "Item #16",
+    },
+    {
+      id: "item-17",
+      label: "Item #17",
+    },
+    {
+      disabled: true,
+      id: "item-18",
+      label: "Item #18 with special considerations",
+    },
+    {
+      id: "item-19",
+      label: "Item #19",
+    },
+    {
+      id: "item-20",
+      label: "Item #20",
+    },
+    {
+      id: "item-21",
+      label: "Item #21",
+    },
+    {
+      id: "item-22",
+      label: "Item #22",
+    },
+    {
+      id: "item-23",
+      label: "Item #23 with an extended label",
+    },
+    {
+      id: "item-24",
+      label: "Item #24",
+    },
+    {
+      id: "item-25",
+      label: "Item #25",
+    },
+    {
+      id: "item-26",
+      label: "Item #26",
+    },
+    {
+      id: "item-27",
+      label: "Item #27",
+    },
+    {
+      id: "item-28",
+      label: "Item #28 with unique properties",
+    },
+    {
+      id: "item-29",
+      label: "Item #29",
+    },
+    {
+      id: "item-30",
+      label: "Item #30",
+    },
+    {
+      id: "item-31",
+      label: "Item #31",
+    },
+    {
+      id: "item-32",
+      label: "Item #32",
+    },
+    {
+      id: "item-33",
+      label: "Item #33 with additional notes",
+    },
+    {
+      id: "item-34",
+      label: "Item #34",
+    },
+    {
+      id: "item-35",
+      label: "Item #35",
+    },
+    {
+      id: "item-36",
+      label: "Item #36",
+    },
+    {
+      id: "item-37",
+      label: "Item #37",
+    },
+    {
+      id: "item-38",
+      label: "Item #38 with a customized label",
+    },
+    {
+      id: "item-39",
+      label: "Item #39",
+    },
+    {
+      id: "item-40",
+      label: "Item #40",
+    },
+    {
+      id: "item-41",
+      label: "Item #41",
+    },
+    {
+      id: "item-42",
+      label: "Item #42",
+    },
+    {
+      id: "item-43",
+      label: "Item #43 with specific details",
+    },
+    {
+      id: "item-44",
+      label: "Item #44",
+    },
+    {
+      id: "item-45",
+      label: "Item #45",
+    },
+    {
+      id: "item-46",
+      label: "Item #46",
+    },
+    {
+      id: "item-47",
+      label: "Item #47",
+    },
+    {
+      id: "item-48",
+      label: "Item #48 with optional settings",
+    },
+    {
+      id: "item-49",
+      label: "Item #49",
+    },
+    {
+      id: "item-50",
+      label: "Item #50",
+    },
   ];
   element.generateSuggestions = async (value) => {
     if (!Boolean(value)) {

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -3,19 +3,6 @@ import { closestPassShadow, querySelectorAllDeep, } from "../../utils";
 import Sortable from "sortablejs";
 export class SwirlOptionList {
   constructor() {
-    this.onFocus = async (event) => {
-      if (this.listboxEl.contains(event.relatedTarget)) {
-        return;
-      }
-      // prevent focus from canceling the drag event in Safari
-      await new Promise((resolve) => setTimeout(resolve));
-      if (Boolean(this.focusedItem)) {
-        this.focusItem(this.getActiveItemIndex());
-      }
-      else {
-        this.focusItem(0);
-      }
-    };
     this.onClick = (event) => {
       event.preventDefault();
       const target = event.target;
@@ -48,6 +35,12 @@ export class SwirlOptionList {
         }
       }
       else if (event.code === "Space" || event.code === "Enter") {
+        const startingDrag = event.target.classList.contains("option-list-item__drag-handle");
+        if (!startingDrag && Boolean(this.dragging)) {
+          event.preventDefault();
+          this.stopDrag(this.dragging);
+          return;
+        }
         const target = event.composedPath()[0];
         const optionFocused = Boolean(closestPassShadow(target, '[role="option"]'));
         if (!optionFocused) {
@@ -105,6 +98,7 @@ export class SwirlOptionList {
       this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
       this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
       this.draggingStartIndex = undefined;
+      this.focusItem(newIndex);
     };
     this.allowDeselect = true;
     this.allowDrag = undefined;
@@ -127,6 +121,9 @@ export class SwirlOptionList {
     this.syncItemsWithValue();
     this.setupDragDrop();
   }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
   disconnectedCallback() {
     this.observer?.disconnect();
     this.sortable?.destroy();
@@ -151,12 +148,17 @@ export class SwirlOptionList {
       this.setItemDisabledState();
       this.setItemContext();
       this.syncItemsWithValue();
-      this.setupDragDrop();
     });
     this.observer.observe(this.listboxEl, { childList: true });
   }
   updateItems() {
     this.items = querySelectorAllDeep(this.el, "swirl-option-list-item");
+    this.items.forEach((item) => item.querySelector('[role="option"]')?.removeAttribute("tabIndex"));
+    const item = this.items[0]?.querySelector('[role="option"]');
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
   }
   setItemDisabledState() {
     if (this.disabled) {
@@ -238,6 +240,7 @@ export class SwirlOptionList {
     else {
       this.updateValue(this.value.filter((v) => v !== item.value));
     }
+    this.focusItem(index);
   }
   updateValue(value) {
     this.value = value;
@@ -320,8 +323,8 @@ export class SwirlOptionList {
   }
   render() {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;
-    const tabIndex = this.disabled ? -1 : 0;
-    return (h(Host, null, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", null))));
+    const tabIndex = Boolean(this.dragging) ? 0 : undefined;
+    return (h(Host, null, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", null))));
   }
   static get is() { return "swirl-option-list"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-option-list/swirl-option-list.spec.js

@@ -43,7 +43,7 @@ describe("swirl-option-list", () => {
     expect(page.root).toEqualHtml(`
       <swirl-option-list label="Option List" multi-select="true">
         <swirl-visually-hidden role="alert"></swirl-visually-hidden>
-        <div aria-label="Option List" aria-multiselectable="true" class="option-list" role="listbox" tabindex="0">
+        <div aria-label="Option List" aria-multiselectable="true" class="option-list" role="listbox">
           <swirl-option-list-item label="This is an option" value="1"></swirl-option-list-item>
           <swirl-option-list-item label="This is an option" value="2"></swirl-option-list-item>
           <swirl-option-list-item label="This is an option" value="3"></swirl-option-list-item>

package/dist/collection/components/swirl-option-list/swirl-option-list.stories.js

@@ -13,11 +13,11 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-option-list", args);
   element.innerHTML = `
-    <swirl-option-list-item label="This is option 1" value="1"></swirl-option-list-item>
-    <swirl-option-list-item label="This is option 2" value="2"></swirl-option-list-item>
-    <swirl-option-list-item label="This is option 3" value="3"></swirl-option-list-item>
-    <swirl-option-list-item label="This is option 4" value="4"></swirl-option-list-item>
-  `;
+  <swirl-option-list-item label="This is option 1" value="1"></swirl-option-list-item>
+  <swirl-option-list-item label="This is option 2" value="2"></swirl-option-list-item>
+  <swirl-option-list-item label="This is option 3" value="3"></swirl-option-list-item>
+  <swirl-option-list-item label="This is option 4" value="4"></swirl-option-list-item>
+`;
   return element;
 };
 export const SwirlOptionList = Template.bind({});

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -14,6 +14,12 @@ export class SwirlOptionListItem {
         this.toggleDrag.emit(this.el);
       }
     };
+    this.onBlur = () => {
+      this.focused = false;
+    };
+    this.onFocus = () => {
+      this.focused = true;
+    };
     this.allowDrag = undefined;
     this.context = "single-select";
     this.disabled = undefined;
@@ -26,6 +32,7 @@ export class SwirlOptionListItem {
     this.swirlAriaRole = "option";
     this.value = undefined;
     this.iconSize = 24;
+    this.focused = undefined;
   }
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
@@ -54,7 +61,7 @@ export class SwirlOptionListItem {
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-option-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -276,7 +283,8 @@ export class SwirlOptionListItem {
   }
   static get states() {
     return {
-      "iconSize": {}
+      "iconSize": {},
+      "focused": {}
     };
   }
   static get events() {

package/dist/components/swirl-autocomplete.js

@@ -66,8 +66,10 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
           }
           this.value = suggestion;
           this.valueChange.emit(this.value);
-          this.inputEl.querySelector("input")?.focus();
-          this.close();
+          queueMicrotask(() => {
+            this.inputEl.querySelector("input")?.focus();
+            this.close();
+          });
         }
       }
     };
@@ -99,7 +101,10 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     this.onInputKeyDown = (event) => {
       if (event.code === "ArrowDown") {
         event.preventDefault();
-        this.listboxEl.querySelector('[role="listbox"]').focus();
+        this.listboxEl
+          .querySelector('[role="listbox"]')
+          ?.querySelector('[tabIndex="0"]')
+          ?.focus();
       }
     };
     this.autoSelect = undefined;
@@ -209,13 +214,13 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     const className = classnames("autocomplete", {
       "autocomplete--inactive": !this.active,
     });
-    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, this.multiSelect &&
+    return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
       Array.isArray(this.value) &&
       this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
       return (h("swirl-tag", { key: item.id, label: item.label,
         // eslint-disable-next-line react/jsx-no-bind
         onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
         top: Boolean(this.position) ? `${this.position?.y}px` : "",
         left: Boolean(this.position) ? `${this.position?.x}px` : "",
         width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,

package/dist/components/swirl-option-list-item2.js

@@ -23,6 +23,12 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
         this.toggleDrag.emit(this.el);
       }
     };
+    this.onBlur = () => {
+      this.focused = false;
+    };
+    this.onFocus = () => {
+      this.focused = true;
+    };
     this.allowDrag = undefined;
     this.context = "single-select";
     this.disabled = undefined;
@@ -35,6 +41,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
     this.swirlAriaRole = "option";
     this.value = undefined;
     this.iconSize = 24;
+    this.focused = undefined;
   }
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
@@ -63,7 +70,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   get el() { return this; }
   static get style() { return swirlOptionListItemCss; }
@@ -79,7 +86,8 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
     "selected": [1028],
     "swirlAriaRole": [1, "swirl-aria-role"],
     "value": [1],
-    "iconSize": [32]
+    "iconSize": [32],
+    "focused": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {