@stackline/vue-multiselect-dropdown 3.0.3 → 3.1.0

package/dist/index.js

@@ -80,6 +80,7 @@ var styles = `
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 1.45em;
   align-items: center;
   align-content: center;
   gap: 8px;
@@ -93,6 +94,7 @@ var styles = `
   align-self: center;
   justify-content: flex-start;
   min-width: 0;
+  min-height: 1.45em;
   max-width: 100%;
   color: var(--vmsd-muted);
   font-size: 0.95rem;
@@ -176,33 +178,25 @@ var styles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
-  min-height: 0;
+  flex: 0 0 auto;
+  min-width: 24px;
+  min-height: 20px;
   color: var(--vmsd-muted);
   font-size: 0.8rem;
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
 }
 
-.vmsd-root.vmsd-has-overflow:not(.skin-classic) .vmsd-trigger {
+.vmsd-root.vmsd-has-overflow .vmsd-trigger {
   padding-right: 104px;
 }
 
-.vmsd-root.vmsd-has-overflow:not(.skin-classic):not(.vmsd-has-clear) .vmsd-trigger {
+.vmsd-root.vmsd-has-overflow:not(.vmsd-has-clear) .vmsd-trigger {
   padding-right: 74px;
 }
 
-.vmsd-root.vmsd-has-overflow:not(.skin-classic) .vmsd-overflow {
-  position: absolute;
-  top: 50%;
-  right: 76px;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.vmsd-root.vmsd-has-overflow:not(.skin-classic):not(.vmsd-has-clear) .vmsd-overflow {
-  right: 42px;
-}
-
 .vmsd-actions {
   position: absolute;
   top: 50%;
@@ -479,9 +473,6 @@ var styles = `
 .vmsd-checkbox {
   position: relative;
   box-sizing: content-box;
-  display: inline-grid;
-  place-items: center;
-  align-self: center;
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
@@ -489,8 +480,6 @@ var styles = `
   border: 2px solid var(--vmsd-border-strong);
   border-radius: 6px;
   background-color: var(--vmsd-bg);
-  line-height: 0;
-  vertical-align: middle;
 }
 
 .vmsd-checkbox[data-checked="true"] {
@@ -510,7 +499,7 @@ var styles = `
   border-color: #fff;
   border-style: solid;
   border-width: 0 0 2px 2px;
-  transform: translate(-50%, -62%) rotate(-45deg);
+  transform: translate(-50%, -58%) rotate(-45deg);
   transform-origin: 50%;
 }
 
@@ -772,9 +761,12 @@ var styles = `
 
 .theme-classic .vmsd-overflow,
 .skin-classic .vmsd-overflow {
+  min-width: 24px;
+  min-height: 20px;
   color: #333333;
   font-size: 14px;
   font-weight: 400;
+  line-height: 1;
 }
 
 .theme-classic .vmsd-actions,
@@ -1009,7 +1001,7 @@ var styles = `
   height: 3px;
   margin-top: 0;
   border-width: 0 0 3px 3px;
-  transform: translate(-50%, -62%) rotate(-45deg);
+  transform: translate(-50%, -58%) rotate(-45deg);
 }
 
 .theme-classic .vmsd-option-label,
@@ -1042,12 +1034,10 @@ var styles = `
 
 @media (max-width: 720px) {
   .vmsd-trigger {
-    align-items: flex-start;
+    align-items: center;
     padding-right: 54px;
   }
 }
-
-/* stackline-vue3-live-20260527 */
 `;
 function ensureDropdownStyles() {
   if (typeof document === "undefined") {
@@ -1108,7 +1098,16 @@ var DEFAULT_SETTINGS = {
   removeItemAriaLabel: "Remove selected option",
   openDropdownAriaLabel: "Open dropdown",
   closeDropdownAriaLabel: "Close dropdown",
-  loadingText: "Loading options"
+  loadingText: "Loading options",
+  keyboard: {
+    space: true,
+    spaceOptionAction: "toggle",
+    tab: true,
+    arrows: true,
+    escape: true,
+    backspaceRemovesLastWhenSearchEmpty: false,
+    deleteRemovesFocusedBadge: true
+  }
 };
 function iconPath(name) {
   if (name === "remove") {
@@ -1247,9 +1246,15 @@ function buildGroups(items, settings) {
 }
 function mergeUniqueItems(base, extra, settings) {
   const bucket = /* @__PURE__ */ new Map();
-  for (const item of base.concat(extra)) {
+  for (const item of base) {
     bucket.set(getPrimaryValue(item, settings), item);
   }
+  for (const item of extra) {
+    const key = getPrimaryValue(item, settings);
+    if (!bucket.has(key)) {
+      bucket.set(key, item);
+    }
+  }
   return Array.from(bucket.values());
 }
 function callRenderFunction(renderFunction, h2, item, context) {
@@ -1258,6 +1263,10 @@ function callRenderFunction(renderFunction, h2, item, context) {
   }
   return renderFunction(item, context, h2);
 }
+function callSlot(vm, name, props) {
+  const slot = vm.$slots && vm.$slots[name];
+  return typeof slot === "function" ? slot(props) : null;
+}
 function escapeSelectorValue(value) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
     return CSS.escape(value);
@@ -1267,6 +1276,9 @@ function escapeSelectorValue(value) {
 function isActivationKey(event) {
   return event.key === "Enter" || event.key === " " || event.key === "Spacebar";
 }
+function isSpaceKey(event) {
+  return event.key === " " || event.key === "Spacebar";
+}
 function isTextInputTarget(target) {
   const element = target;
   if (!element) {
@@ -1350,10 +1362,21 @@ var VueMultiselectDropdown = {
   },
   computed: {
     resolvedSettings() {
+      const userSettings = this.settings || {};
       const merged = {
         ...DEFAULT_SETTINGS,
-        ...this.settings || {}
+        ...userSettings,
+        keyboard: {
+          ...DEFAULT_SETTINGS.keyboard,
+          ...userSettings.keyboard || {}
+        }
       };
+      if (typeof userSettings.escapeToClose === "boolean" && userSettings.keyboard?.escape == null) {
+        merged.keyboard.escape = userSettings.escapeToClose;
+      }
+      if (typeof merged.keyboard.backspace === "boolean") {
+        merged.keyboard.backspaceRemovesLastWhenSearchEmpty = merged.keyboard.backspace;
+      }
       const skin = merged.skin || merged.theme || "classic";
       return {
         ...merged,
@@ -1447,6 +1470,9 @@ var VueMultiselectDropdown = {
     getKey(item) {
       return getPrimaryValue(item, this.resolvedSettings);
     },
+    getOptionId(key) {
+      return `${this.instanceId}-option-${key}`;
+    },
     isSelected(item) {
       const key = this.getKey(item);
       return this.selected.some((selectedItem) => this.getKey(selectedItem) === key);
@@ -1579,6 +1605,13 @@ var VueMultiselectDropdown = {
       this.emitSelection(next);
       this.$emit("de-select", item);
     },
+    removeLastSelected() {
+      const last = this.selected[this.selected.length - 1];
+      if (!last) {
+        return;
+      }
+      this.removeItem(last);
+    },
     addFilterItem(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -1595,35 +1628,51 @@ var VueMultiselectDropdown = {
       this.query = "";
     },
     onTriggerKeydown(event) {
-      if (isActivationKey(event)) {
+      const keyboard = this.resolvedSettings.keyboard;
+      if (event.key === "Enter" || isSpaceKey(event) && keyboard.space !== false) {
         event.preventDefault();
         this.toggleDropdown();
         return;
       }
-      if (event.key === "ArrowDown") {
+      if (keyboard.arrows !== false && event.key === "ArrowDown") {
         event.preventDefault();
         this.openDropdown();
         this.focusFirstOption();
         return;
       }
-      if (event.key === "ArrowUp") {
+      if (keyboard.arrows !== false && event.key === "ArrowUp") {
         event.preventDefault();
         this.openDropdown();
         this.focusLastOption();
         return;
       }
-      if (event.key === "Escape") {
+      if (keyboard.escape !== false && event.key === "Escape") {
         this.closeDropdown();
       }
     },
     onListKeydown(event) {
-      if (event.key === "Escape") {
+      const keyboard = this.resolvedSettings.keyboard;
+      if (keyboard.escape !== false && event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();
         this.closeDropdown();
         return;
       }
-      if (isTextInputTarget(event.target) && event.key !== "ArrowDown") {
+      if (event.key === "Tab") {
+        return;
+      }
+      if (isTextInputTarget(event.target)) {
+        if (event.key === "Backspace" && !this.query && keyboard.backspaceRemovesLastWhenSearchEmpty === true) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.removeLastSelected();
+          return;
+        }
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+          return;
+        }
+      }
+      if (keyboard.arrows === false && ["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
         return;
       }
       const selectable = this.visibleSelectableItems();
@@ -1658,10 +1707,22 @@ var VueMultiselectDropdown = {
         return;
       }
       if (isActivationKey(event)) {
+        if (isSpaceKey(event) && keyboard.space === false) {
+          return;
+        }
         event.preventDefault();
         event.stopPropagation();
         const activeItem = selectable.find((item) => this.getKey(item) === this.focusedKey) || selectable[0];
         this.toggleItem(activeItem);
+        if (keyboard.spaceOptionAction === "toggle-and-next") {
+          const activeIndex = selectable.findIndex((item) => this.getKey(item) === this.getKey(activeItem));
+          const nextItem = selectable[Math.min(activeIndex + 1, selectable.length - 1)];
+          if (nextItem) {
+            this.focusOption(nextItem);
+          }
+        } else {
+          this.focusOption(activeItem);
+        }
         return;
       }
     },
@@ -1698,19 +1759,26 @@ var VueMultiselectDropdown = {
       if (isActivationKey(event)) {
         event.stopPropagation();
       }
-      if (event.key === "ArrowDown") {
+      if (this.resolvedSettings.keyboard.arrows !== false && event.key === "ArrowDown") {
         event.preventDefault();
         event.stopPropagation();
         this.openDropdown();
         this.focusFirstOption();
       }
-      if (event.key === "ArrowUp") {
+      if (this.resolvedSettings.keyboard.arrows !== false && event.key === "ArrowUp") {
         event.preventDefault();
         event.stopPropagation();
         this.openDropdown();
         this.focusLastOption();
       }
     },
+    onRemoveButtonKeydown(item, event) {
+      if (this.resolvedSettings.keyboard.deleteRemovesFocusedBadge !== false && (event.key === "Backspace" || event.key === "Delete")) {
+        this.removeItem(item, event);
+        return;
+      }
+      this.onInlineKeydown(event);
+    },
     onTriggerClick(event) {
       const target = event.target;
       if (target && target.closest("button")) {
@@ -1731,7 +1799,7 @@ var VueMultiselectDropdown = {
       this.closeDropdown();
     },
     onDocumentKeydown(event) {
-      if (this.isOpen && this.resolvedSettings.escapeToClose && event.key === "Escape") {
+      if (this.isOpen && this.resolvedSettings.keyboard.escape !== false && event.key === "Escape") {
         this.closeDropdown();
       }
     },
@@ -1849,11 +1917,14 @@ var VueMultiselectDropdown = {
         label,
         selected: true,
         disabled: false,
+        key: this.getKey(item),
+        ariaSelected: "true",
+        ariaChecked: "true",
         query: this.query,
         toggle: () => this.toggleItem(item),
         remove: () => this.removeItem(item)
       };
-      const rendered = callRenderFunction(this.renderBadge, h, item, context);
+      const rendered = callSlot(this, "badge", context) || callRenderFunction(this.renderBadge, h, item, context);
       const removeLabel = typeof settings.removeItemAriaLabel === "function" ? settings.removeItemAriaLabel(item) : `${settings.removeItemAriaLabel}: ${label}`;
       return h("span", { class: "vmsd-badge", key: this.getKey(item) }, [
         h("span", { class: "vmsd-badge-label" }, [rendered || label]),
@@ -1864,17 +1935,18 @@ var VueMultiselectDropdown = {
             attrs: { type: "button", "aria-label": removeLabel },
             on: {
               click: (event) => this.removeItem(item, event),
-              keydown: this.onInlineKeydown
+              keydown: (event) => this.onRemoveButtonKeydown(item, event)
             }
           },
           [renderIcon(h, "remove")]
         )
       ]);
     });
-    const valueContent = hasSelection ? [h("span", { class: "vmsd-badge-list" }, badges)] : [h("span", { class: "vmsd-placeholder" }, [settings.text])];
-    if (hiddenCount > 0) {
-      valueContent.push(h("span", { class: "vmsd-overflow", attrs: { "aria-label": `${hiddenCount} more selected options` } }, [`+${hiddenCount}`]));
-    }
+    const valueContent = hasSelection ? [h("span", { class: "vmsd-badge-list" }, badges)] : [
+      h("span", { class: "vmsd-placeholder" }, [
+        callSlot(this, "placeholder", { label: settings.text, state: { isOpen: this.isOpen, query: this.query } }) || settings.text
+      ])
+    ];
     const trigger = h(
       "div",
       {
@@ -1887,7 +1959,8 @@ var VueMultiselectDropdown = {
           "aria-expanded": this.isOpen ? "true" : "false",
           "aria-haspopup": "listbox",
           "aria-disabled": settings.disabled ? "true" : "false",
-          "aria-controls": `${this.instanceId}-listbox`
+          "aria-controls": `${this.instanceId}-listbox`,
+          "aria-activedescendant": this.focusedKey ? this.getOptionId(this.focusedKey) : void 0
         },
         on: {
           click: this.onTriggerClick,
@@ -1895,8 +1968,15 @@ var VueMultiselectDropdown = {
         }
       },
       [
-        h("div", { class: "vmsd-value" }, valueContent),
+        callSlot(this, "trigger", {
+          selected: this.selected,
+          label: hasSelection ? this.selected.map((item) => this.getLabel(item)).join(", ") : settings.text,
+          isOpen: this.isOpen,
+          clearSelection: this.clearSelection,
+          toggleDropdown: this.toggleDropdown
+        }) || h("div", { class: "vmsd-value" }, valueContent),
         h("div", { class: "vmsd-actions" }, [
+          hiddenCount > 0 ? h("span", { class: "vmsd-overflow", attrs: { "aria-label": `${hiddenCount} more selected options` } }, [`+${hiddenCount}`]) : null,
           hasClear ? h(
             "button",
             {
@@ -1995,28 +2075,37 @@ var VueMultiselectDropdown = {
         label,
         selected,
         disabled,
+        index: this.filteredItems.findIndex((candidate) => this.getKey(candidate) === key),
+        group: getGroupName(item, settings),
+        key,
+        optionId: this.getOptionId(key),
+        ariaSelected: selected ? "true" : "false",
+        ariaChecked: selected ? "true" : "false",
         query: this.query,
         toggle: () => this.toggleItem(item),
         remove: () => this.removeItem(item)
       };
-      const rendered = callRenderFunction(this.renderItem, h, item, context);
+      const rendered = callSlot(this, "option", context) || callRenderFunction(this.renderItem, h, item, context);
       return h(
         "div",
         {
           key,
           class: ["vmsd-option", selected ? "vmsd-selected" : "", disabled ? "vmsd-disabled" : ""],
           attrs: {
+            id: this.getOptionId(key),
             role: "option",
             tabindex: disabled ? "-1" : "0",
             "data-vmsd-option": "true",
             "data-vmsd-key": key,
             "aria-disabled": disabled ? "true" : "false",
-            "aria-selected": selected ? "true" : "false"
+            "aria-selected": selected ? "true" : "false",
+            "aria-checked": selected ? "true" : "false"
           },
           on: {
             click: (event) => {
               if (!disabled) {
                 this.toggleItem(item, event);
+                this.focusOption(item);
               }
             },
             focus: () => this.focusedKey = key,
@@ -2033,9 +2122,13 @@ var VueMultiselectDropdown = {
         ]
       );
     };
-    const listChildren = settings.loading ? [h("div", { class: "vmsd-state", attrs: { role: "status" } }, [settings.loadingText])] : settings.groupBy ? this.groupedItems.map(
+    const listChildren = !this.isOpen ? [] : settings.loading ? [h("div", { class: "vmsd-state", attrs: { role: "status" } }, [callSlot(this, "loading", { label: settings.loadingText }) || settings.loadingText])] : settings.groupBy ? this.groupedItems.map(
       (group) => h("div", { class: "vmsd-group", key: group.name, attrs: { role: "group", "aria-label": group.name } }, [
-        h("div", { class: "vmsd-group-header" }, [
+        callSlot(this, "group-header", {
+          group,
+          selected: group.items.filter((item) => !isDisabledItem(item)).every((item) => this.isSelected(item)),
+          selectGroup: (event) => this.selectGroup(group.name, group.items, event)
+        }) || h("div", { class: "vmsd-group-header" }, [
           h("span", [`${group.name} \xB7 ${group.items.length}`]),
           settings.selectGroup ? h(
             "button",
@@ -2050,8 +2143,8 @@ var VueMultiselectDropdown = {
         group.items.map(renderOption)
       ])
     ) : this.filteredItems.map(renderOption);
-    if (!this.filteredItems.length && !settings.loading) {
-      const emptyContent = this.renderEmptyState ? this.renderEmptyState(this.query, h) : settings.noDataLabel;
+    if (this.isOpen && !this.filteredItems.length && !settings.loading) {
+      const emptyContent = callSlot(this, "empty", { query: this.query, label: settings.noDataLabel }) || (this.renderEmptyState ? this.renderEmptyState(this.query, h) : settings.noDataLabel);
       listChildren.push(h("div", { class: "vmsd-state" }, [emptyContent]));
     }
     const menu = h(
@@ -2081,7 +2174,8 @@ var VueMultiselectDropdown = {
             on: { scroll: this.onListScroll }
           },
           listChildren
-        )
+        ),
+        this.isOpen ? callSlot(this, "menu-footer", { selected: this.selected, filteredItems: this.filteredItems, close: this.closeDropdown }) : null
       ]
     );
     return h(
@@ -2109,6 +2203,498 @@ var VueMultiselectDropdown = {
 };
 var StacklineVueMultiselect = VueMultiselectDropdown;
 
+// src/composables.ts
+import { computed, ref, unref } from "vue";
+var DEFAULT_KEYS = {
+  labelKey: "itemName",
+  primaryKey: "id"
+};
+function read(value, fallback) {
+  return value == null ? fallback : unref(value);
+}
+function isPrimitiveItem2(item) {
+  return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
+}
+function resolveSettings(settings) {
+  const value = read(settings, {});
+  return {
+    ...value,
+    text: value.text || "Select",
+    singleSelection: Boolean(value.singleSelection),
+    labelKey: value.labelKey || DEFAULT_KEYS.labelKey,
+    primaryKey: value.primaryKey || DEFAULT_KEYS.primaryKey,
+    searchBy: Array.isArray(value.searchBy) ? value.searchBy : [],
+    groupBy: value.groupBy || ""
+  };
+}
+function getLabel2(item, settings) {
+  if (isPrimitiveItem2(item)) {
+    return String(item);
+  }
+  const labelKey = settings.labelKey || DEFAULT_KEYS.labelKey;
+  const keys = [labelKey, "itemName", "name", "label", "title", "value"];
+  for (const key of keys) {
+    if (item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return JSON.stringify(item);
+}
+function getKey(item, settings) {
+  if (isPrimitiveItem2(item)) {
+    return String(item);
+  }
+  const primaryKey = settings.primaryKey || DEFAULT_KEYS.primaryKey;
+  const keys = [primaryKey, "id", "value", "key"];
+  for (const key of keys) {
+    if (item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return getLabel2(item, settings);
+}
+function getGroup(item, settings) {
+  if (!settings.groupBy) {
+    return void 0;
+  }
+  if (typeof settings.groupBy === "function") {
+    return settings.groupBy(item);
+  }
+  return !isPrimitiveItem2(item) && item[settings.groupBy] != null ? String(item[settings.groupBy]) : void 0;
+}
+function isDisabled(item) {
+  return !isPrimitiveItem2(item) && Boolean(item.disabled);
+}
+function matchesQuery(item, query, settings) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) {
+    return true;
+  }
+  const values = /* @__PURE__ */ new Set([getLabel2(item, settings).toLowerCase()]);
+  if (!isPrimitiveItem2(item)) {
+    const keys = settings.searchBy && settings.searchBy.length ? settings.searchBy : [settings.labelKey || DEFAULT_KEYS.labelKey];
+    for (const key of keys) {
+      if (key && item[key] != null) {
+        values.add(String(item[key]).toLowerCase());
+      }
+    }
+  }
+  return Array.from(values).some((value) => value.includes(needle));
+}
+function mergeSelected(selected, incoming, settings) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item of selected) {
+    byKey.set(getKey(item, settings), item);
+  }
+  for (const item of incoming) {
+    const key = getKey(item, settings);
+    if (!byKey.has(key)) {
+      byKey.set(key, item);
+    }
+  }
+  return Array.from(byKey.values());
+}
+function readBadgeLimit(selected, settings) {
+  if (settings.singleSelection) {
+    return selected.length;
+  }
+  const value = Number(settings.badgeShowLimit);
+  if (!Number.isFinite(value) || value <= 0) {
+    return selected.length;
+  }
+  return Math.floor(value);
+}
+function normalizeExtraProps(props = {}) {
+  const normalized = { ...props };
+  if (normalized.className && !normalized.class) {
+    normalized.class = normalized.className;
+  }
+  delete normalized.className;
+  return normalized;
+}
+function mergePropBags(base, extra = {}) {
+  const incoming = normalizeExtraProps(extra);
+  const merged = { ...incoming, ...base };
+  if (base.class || incoming.class) {
+    merged.class = [incoming.class, base.class].filter(Boolean).join(" ");
+  }
+  if (base.style || incoming.style) {
+    merged.style = {
+      ...typeof incoming.style === "object" ? incoming.style : {},
+      ...typeof base.style === "object" ? base.style : {}
+    };
+  }
+  for (const key of Object.keys(base)) {
+    if (/^on[A-Z]/.test(key) && typeof base[key] === "function" && typeof incoming[key] === "function") {
+      merged[key] = (...args) => {
+        incoming[key](...args);
+        base[key](...args);
+      };
+    }
+  }
+  return merged;
+}
+function defineSettings(settings) {
+  return settings;
+}
+function defineSlots(slots) {
+  return slots;
+}
+function useMultiSelectState(options = {}) {
+  const internalSelected = ref(options.defaultSelectedItems ? options.defaultSelectedItems.slice() : []);
+  const filter = ref("");
+  const settings = computed(() => resolveSettings(options.settings));
+  const data = computed(() => read(options.data, []));
+  const selectedItems = computed(() => read(options.selectedItems, internalSelected.value));
+  const filteredItems = computed(() => data.value.filter((item) => matchesQuery(item, filter.value, settings.value)));
+  const isSelected = (item) => {
+    const key = getKey(item, settings.value);
+    return selectedItems.value.some((selected) => getKey(selected, settings.value) === key);
+  };
+  const commit = (next) => {
+    if (!options.selectedItems) {
+      internalSelected.value = next;
+    }
+    options.onChange?.(next);
+  };
+  const getItemKey = (item) => getKey(item, settings.value);
+  const getItemLabel = (item) => getLabel2(item, settings.value);
+  const selectableItems = computed(() => filteredItems.value.filter((item) => !isDisabled(item)));
+  const visibleBadges = computed(() => {
+    const limit = readBadgeLimit(selectedItems.value, settings.value);
+    return selectedItems.value.slice(0, limit);
+  });
+  const hiddenBadgeCount = computed(() => Math.max(selectedItems.value.length - visibleBadges.value.length, 0));
+  const allFilteredSelected = computed(() => selectableItems.value.length > 0 && selectableItems.value.every((item) => isSelected(item)));
+  const removeItem = (item) => {
+    const key = getItemKey(item);
+    const next = selectedItems.value.filter((selected) => getItemKey(selected) !== key);
+    commit(next);
+    options.onDeSelect?.(item);
+  };
+  const addItem = (item) => {
+    if (isDisabled(item)) {
+      return;
+    }
+    if (settings.value.singleSelection) {
+      commit([item]);
+      options.onSelect?.(item);
+      return;
+    }
+    if (!isSelected(item)) {
+      commit(selectedItems.value.concat(item));
+      options.onSelect?.(item);
+    }
+  };
+  const toggleItem = (item) => {
+    if (isDisabled(item)) {
+      return;
+    }
+    if (isSelected(item)) {
+      removeItem(item);
+      return;
+    }
+    addItem(item);
+  };
+  const clearSelection = () => {
+    const previous = selectedItems.value.slice();
+    commit([]);
+    options.onDeSelectAll?.(previous);
+  };
+  const deSelectAll = (items) => {
+    if (!items || !items.length) {
+      clearSelection();
+      return;
+    }
+    const keys = new Set(items.map(getItemKey));
+    commit(selectedItems.value.filter((item) => !keys.has(getItemKey(item))));
+    options.onDeSelectAll?.(items);
+  };
+  const selectAll = (items) => {
+    const enabled = (items || selectableItems.value).filter((item) => !isDisabled(item));
+    const before = selectedItems.value.length;
+    commit(settings.value.singleSelection ? enabled.slice(0, 1) : mergeSelected(selectedItems.value, enabled, settings.value));
+    options.onSelectAll?.(enabled);
+    if (!enabled.length && before !== selectedItems.value.length) {
+      options.onChange?.(selectedItems.value);
+    }
+  };
+  const toggleGroup = (groupName, items) => {
+    const enabled = items.filter((item) => !isDisabled(item));
+    if (!enabled.length) {
+      return;
+    }
+    const everySelected = enabled.every((item) => isSelected(item));
+    if (everySelected) {
+      deSelectAll(enabled);
+      options.onGroupDeSelect?.(groupName, enabled);
+      return;
+    }
+    selectAll(enabled);
+    options.onGroupSelect?.(groupName, enabled);
+  };
+  const removeLastSelectedItem = () => {
+    const last = selectedItems.value[selectedItems.value.length - 1];
+    if (last) {
+      removeItem(last);
+    }
+  };
+  return {
+    data,
+    settings,
+    filter,
+    filteredItems,
+    selectableItems,
+    selectedItems,
+    visibleBadges,
+    hiddenBadgeCount,
+    allFilteredSelected,
+    isSelected,
+    getItemKey,
+    getItemLabel,
+    setFilter: (value) => {
+      filter.value = value;
+    },
+    selectItem: addItem,
+    removeItem,
+    removeLastSelectedItem,
+    toggleItem,
+    clearSelection,
+    selectAll,
+    deSelectAll,
+    toggleGroup
+  };
+}
+function useMultiSelectDropdown(options = {}) {
+  const state = useMultiSelectState(options);
+  const isOpen = ref(false);
+  const query = ref("");
+  const activeKey = ref("");
+  const instanceId = `stackline-vmsd-headless-${Math.random().toString(36).slice(2)}`;
+  const listboxId = `${instanceId}-listbox`;
+  const visibleOptions = computed(() => {
+    let index = 0;
+    return state.filteredItems.value.map((item) => {
+      const key = getKey(item, state.settings.value);
+      return {
+        item,
+        key,
+        label: getLabel2(item, state.settings.value),
+        selected: state.isSelected(item),
+        disabled: isDisabled(item),
+        group: getGroup(item, state.settings.value),
+        index: index++
+      };
+    });
+  });
+  const activeDescendantId = computed(() => activeKey.value ? `${instanceId}-option-${activeKey.value}` : void 0);
+  const groups = computed(() => {
+    const byName = /* @__PURE__ */ new Map();
+    for (const option of visibleOptions.value) {
+      const name = option.group || "Ungrouped";
+      const existing = byName.get(name) || [];
+      existing.push(option);
+      byName.set(name, existing);
+    }
+    return Array.from(byName.entries()).map(([name, items]) => {
+      const enabledItems = items.filter((option) => !option.disabled);
+      return {
+        name,
+        items,
+        enabledItems,
+        selected: enabledItems.length > 0 && enabledItems.every((option) => option.selected),
+        disabled: enabledItems.length === 0
+      };
+    });
+  });
+  const label = computed(() => {
+    if (!state.selectedItems.value.length) {
+      return state.settings.value.text || "Select";
+    }
+    return state.selectedItems.value.map((item) => getLabel2(item, state.settings.value)).join(", ");
+  });
+  const open = () => {
+    isOpen.value = true;
+    if (!activeKey.value && visibleOptions.value[0]) {
+      activeKey.value = visibleOptions.value[0].key;
+    }
+  };
+  const close = () => {
+    isOpen.value = false;
+  };
+  const toggleOpen = () => isOpen.value ? close() : open();
+  const focusNext = (direction) => {
+    const optionsList = visibleOptions.value.filter((option) => !option.disabled);
+    const currentIndex = Math.max(0, optionsList.findIndex((option) => option.key === activeKey.value));
+    const next = optionsList[Math.min(Math.max(currentIndex + direction, 0), optionsList.length - 1)];
+    if (next) {
+      activeKey.value = next.key;
+    }
+  };
+  const getRootProps = (props = {}) => mergePropBags({
+    "data-stackline-multiselect": "true",
+    "data-open": isOpen.value ? "true" : "false"
+  }, props);
+  const getTriggerProps = (props = {}) => mergePropBags({
+    type: "button",
+    role: "combobox",
+    "aria-expanded": isOpen.value ? "true" : "false",
+    "aria-haspopup": "listbox",
+    "aria-controls": listboxId,
+    "aria-activedescendant": activeDescendantId.value,
+    onClick: toggleOpen,
+    onKeydown: (event) => {
+      if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+        event.preventDefault();
+        toggleOpen();
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        open();
+        focusNext(1);
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        open();
+        focusNext(-1);
+      }
+      if (event.key === "Escape") {
+        close();
+      }
+    }
+  }, props);
+  const getSearchInputProps = (props = {}) => mergePropBags({
+    value: query.value,
+    "aria-label": "Search options",
+    onInput: (event) => {
+      query.value = String(event.target.value || "");
+      state.setFilter(query.value);
+    },
+    onKeydown: (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusNext(1);
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusNext(-1);
+      }
+      if (event.key === "Escape") {
+        close();
+      }
+    }
+  }, props);
+  const getListboxProps = (props = {}) => mergePropBags({
+    id: listboxId,
+    role: "listbox",
+    "aria-multiselectable": state.settings.value.singleSelection ? "false" : "true"
+  }, props);
+  const getOptionProps = (option, props = {}) => mergePropBags({
+    id: `${instanceId}-option-${option.key}`,
+    role: "option",
+    tabindex: option.disabled ? -1 : 0,
+    "aria-selected": option.selected ? "true" : "false",
+    "aria-checked": option.selected ? "true" : "false",
+    "aria-disabled": option.disabled ? "true" : "false",
+    onMouseenter: () => {
+      activeKey.value = option.key;
+    },
+    onClick: () => {
+      if (!option.disabled) {
+        state.toggleItem(option.item);
+        activeKey.value = option.key;
+      }
+    },
+    onKeydown: (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusNext(1);
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusNext(-1);
+      }
+      if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+        event.preventDefault();
+        state.toggleItem(option.item);
+        activeKey.value = option.key;
+      }
+      if (event.key === "Escape") {
+        close();
+      }
+    }
+  }, props);
+  const getClearAllButtonProps = (props = {}) => mergePropBags({
+    type: "button",
+    "aria-label": "Clear selected options",
+    onClick: state.clearSelection
+  }, props);
+  const getRemoveButtonProps = (item, props = {}) => mergePropBags({
+    type: "button",
+    "aria-label": `Remove ${getLabel2(item, state.settings.value)}`,
+    onClick: () => {
+      state.removeItem(item);
+    },
+    onKeydown: (event) => {
+      if (event.key === "Backspace" || event.key === "Delete") {
+        event.preventDefault();
+        state.removeItem(item);
+      }
+    }
+  }, props);
+  return {
+    isOpen,
+    query,
+    filter: state.filter,
+    activeKey,
+    activeDescendantId,
+    listboxId,
+    settings: state.settings,
+    filteredItems: state.filteredItems,
+    selectableItems: state.selectableItems,
+    selectedItems: state.selectedItems,
+    visibleBadges: state.visibleBadges,
+    hiddenBadgeCount: state.hiddenBadgeCount,
+    visibleOptions,
+    groups,
+    allFilteredSelected: state.allFilteredSelected,
+    label,
+    open,
+    close,
+    toggleOpen,
+    clearSelection: state.clearSelection,
+    selectAll: state.selectAll,
+    deSelectAll: state.deSelectAll,
+    toggleGroup: state.toggleGroup,
+    toggleItem: state.toggleItem,
+    selectItem: state.selectItem,
+    removeItem: state.removeItem,
+    removeLastSelectedItem: state.removeLastSelectedItem,
+    isSelected: state.isSelected,
+    setFilter: (value) => {
+      query.value = value;
+      state.setFilter(value);
+    },
+    getItemKey: state.getItemKey,
+    getItemLabel: state.getItemLabel,
+    getRootProps,
+    getTriggerProps,
+    getSearchInputProps,
+    getListboxProps,
+    getOptionProps,
+    getClearAllButtonProps,
+    getRemoveButtonProps
+  };
+}
+function createVueMultiselectDropdown() {
+  return {
+    defineSettings: (settings) => defineSettings(settings),
+    defineSlots,
+    useMultiSelectState: (options = {}) => useMultiSelectState(options),
+    useMultiSelectDropdown: (options = {}) => useMultiSelectDropdown(options)
+  };
+}
+
 // src/plugin.ts
 var VueMultiselect = {
   install(app) {
@@ -2123,5 +2709,10 @@ export {
   StacklineVueMultiselect,
   VueMultiselect,
   VueMultiselectDropdown,
-  plugin_default as default
+  createVueMultiselectDropdown,
+  plugin_default as default,
+  defineSettings,
+  defineSlots,
+  useMultiSelectDropdown,
+  useMultiSelectState
 };