@stackline/vue-multiselect-dropdown 2.0.0

package/dist/index.cjs

@@ -0,0 +1,2090 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  StacklineVueMultiselect: () => StacklineVueMultiselect,
+  VueMultiselect: () => VueMultiselect,
+  VueMultiselectDropdown: () => VueMultiselectDropdown,
+  default: () => plugin_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/styles.ts
+var STYLE_ID = "stackline-vue-multiselect-dropdown-styles";
+var styles = `
+.vmsd-root {
+  --vmsd-primary: #3f51b5;
+  --vmsd-primary-soft: rgba(63, 81, 181, 0.12);
+  --vmsd-bg: #ffffff;
+  --vmsd-surface: #f5f7fb;
+  --vmsd-surface-muted: #e8eaf6;
+  --vmsd-border: #c5cae9;
+  --vmsd-border-strong: #7986cb;
+  --vmsd-ink: #212121;
+  --vmsd-muted: #5f6368;
+  --vmsd-chip-bg: #e8eaf6;
+  --vmsd-chip-text: #303f9f;
+  --vmsd-chip-remove: #303f9f;
+  --vmsd-divider: rgba(125, 119, 134, 0.16);
+  --vmsd-section-bg: #f5f7fb;
+  --vmsd-focus: rgba(63, 81, 181, 0.32);
+  --vmsd-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
+  --vmsd-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
+  position: relative;
+  display: block;
+  width: 100%;
+  color: var(--vmsd-ink);
+  font: inherit;
+}
+
+.vmsd-root *,
+.vmsd-root *::before,
+.vmsd-root *::after,
+.vmsd-menu,
+.vmsd-menu *,
+.vmsd-menu *::before,
+.vmsd-menu *::after {
+  box-sizing: border-box;
+}
+
+.vmsd-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  min-height: 56px;
+  gap: 8px;
+  border: 1px solid var(--vmsd-border);
+  border-radius: 18px;
+  background-color: var(--vmsd-bg);
+  color: var(--vmsd-ink);
+  padding: 11px 54px 11px 16px;
+  box-shadow: var(--vmsd-shadow-soft);
+  text-align: left;
+  cursor: pointer;
+  line-height: 1.45;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
+}
+
+.vmsd-trigger:hover {
+  border-color: var(--vmsd-border-strong);
+}
+
+.vmsd-root[data-open="true"] .vmsd-trigger,
+.vmsd-trigger:focus-visible {
+  outline: none;
+  border-color: var(--vmsd-primary);
+  box-shadow: 0 0 0 3px var(--vmsd-focus), var(--vmsd-shadow-soft);
+}
+
+.vmsd-trigger.vmsd-disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.vmsd-value {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vmsd-placeholder,
+.vmsd-single-value {
+  min-width: 0;
+  color: var(--vmsd-muted);
+  font-size: 0.95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vmsd-single-value {
+  color: var(--vmsd-ink);
+  font-weight: 500;
+}
+
+.vmsd-badge-list {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vmsd-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  min-height: 32px;
+  max-width: 100%;
+  border-radius: 999px;
+  background-color: var(--vmsd-chip-bg);
+  color: var(--vmsd-chip-text);
+  padding: 6px 30px 6px 12px;
+  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.vmsd-badge-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1.3;
+  font-weight: 500;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.vmsd-badge-remove,
+.vmsd-clear,
+.vmsd-search-clear,
+.vmsd-arrow-button,
+.vmsd-group-action {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.vmsd-badge-remove {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  display: inline-grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  transform: translateY(-50%);
+  color: var(--vmsd-chip-remove);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.vmsd-overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  color: var(--vmsd-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.vmsd-root.vmsd-has-overflow:not(.skin-classic) .vmsd-trigger {
+  padding-right: 104px;
+}
+
+.vmsd-root.vmsd-has-overflow:not(.skin-classic):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%;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transform: translateY(-50%);
+}
+
+.vmsd-clear {
+  display: inline-grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--vmsd-muted);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.vmsd-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.vmsd-badge-remove .vmsd-icon {
+  width: 10px;
+  height: 10px;
+}
+
+.vmsd-clear .vmsd-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.vmsd-search-clear .vmsd-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.vmsd-arrow-button {
+  display: inline-grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--vmsd-muted);
+}
+
+.vmsd-arrow-button:disabled {
+  cursor: not-allowed;
+}
+
+.vmsd-badge-remove:focus-visible,
+.vmsd-clear:focus-visible,
+.vmsd-search-clear:focus-visible,
+.vmsd-arrow-button:focus-visible,
+.vmsd-group-action:focus-visible,
+.vmsd-inline-button:focus-visible {
+  outline: 3px solid var(--vmsd-focus);
+  outline-offset: 2px;
+}
+
+.vmsd-arrow {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  line-height: 0;
+}
+
+.vmsd-arrow .vmsd-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.vmsd-menu {
+  position: absolute;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  border: 1px solid var(--vmsd-border);
+  border-radius: 22px;
+  background-color: var(--vmsd-bg);
+  box-shadow: var(--vmsd-shadow);
+  overflow: hidden;
+}
+
+.vmsd-menu.vmsd-body-overlay {
+  position: fixed;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  max-width: calc(100vw - 16px);
+  z-index: 100000;
+}
+
+.vmsd-menu.vmsd-bottom {
+  top: calc(100% + 8px);
+}
+
+.vmsd-menu.vmsd-top {
+  bottom: calc(100% + 8px);
+}
+
+.vmsd-menu.vmsd-body-overlay.vmsd-bottom,
+.vmsd-menu.vmsd-body-overlay.vmsd-top {
+  top: auto;
+  bottom: auto;
+}
+
+.vmsd-toolbar {
+  display: grid;
+  gap: 0;
+  padding: 0;
+  background-color: var(--vmsd-bg);
+}
+
+.vmsd-search-shell {
+  position: relative;
+  min-height: 52px;
+  border-bottom: 1px solid var(--vmsd-divider);
+  background-color: var(--vmsd-bg);
+}
+
+.vmsd-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  width: 18px;
+  height: 18px;
+  color: var(--vmsd-muted);
+  fill: currentColor;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.vmsd-search-input {
+  width: 100%;
+  min-height: 52px;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--vmsd-bg);
+  color: var(--vmsd-ink);
+  font: inherit;
+  padding: 0 44px 0 48px;
+}
+
+.vmsd-search-input:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--vmsd-primary);
+}
+
+.vmsd-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  color: var(--vmsd-muted);
+}
+
+.vmsd-bulk-actions {
+  display: block;
+  align-items: center;
+  padding: 0;
+  border-bottom: 1px solid var(--vmsd-divider);
+  background: var(--vmsd-section-bg);
+}
+
+.vmsd-inline-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 39px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--vmsd-ink);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  padding: 10px 14px;
+  text-align: left;
+}
+
+.vmsd-inline-button:hover {
+  background-color: var(--vmsd-surface);
+}
+
+.vmsd-inline-button:disabled {
+  opacity: 0.58;
+  cursor: not-allowed;
+}
+
+.vmsd-add-button {
+  justify-content: center;
+  border-top: 1px solid var(--vmsd-divider);
+  color: var(--vmsd-primary);
+  font-weight: 700;
+}
+
+.vmsd-list {
+  max-height: 300px;
+  overflow: auto;
+  padding: 8px;
+  background: var(--vmsd-bg);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(125, 119, 134, 0.34) transparent;
+}
+
+.vmsd-list:focus {
+  outline: none;
+}
+
+.vmsd-menu ::-webkit-scrollbar {
+  width: 10px;
+}
+
+.vmsd-menu ::-webkit-scrollbar-thumb {
+  background: rgba(125, 119, 134, 0.34);
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+
+.vmsd-menu ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.vmsd-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 0;
+  margin: 4px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  line-height: 1.35;
+}
+
+.vmsd-option:hover {
+  background-color: var(--vmsd-surface);
+}
+
+.vmsd-option:focus-visible {
+  outline: 3px solid var(--vmsd-focus);
+  outline-offset: 1px;
+}
+
+.vmsd-option.vmsd-selected {
+  background-color: var(--vmsd-primary-soft);
+  color: var(--vmsd-primary);
+}
+
+.vmsd-option.vmsd-disabled {
+  opacity: 0.54;
+  cursor: not-allowed;
+}
+
+.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;
+  margin-top: 0;
+  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"] {
+  border-color: var(--vmsd-primary);
+  background-color: var(--vmsd-primary);
+}
+
+.vmsd-checkbox[data-checked="true"]::after {
+  box-sizing: content-box;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 4px;
+  margin-top: 0;
+  border-color: #fff;
+  border-style: solid;
+  border-width: 0 0 2px 2px;
+  transform: translate(-50%, -62%) rotate(-45deg);
+  transform-origin: 50%;
+}
+
+.vmsd-option-body {
+  min-width: 0;
+  flex: 1;
+}
+
+.vmsd-option-label {
+  font-weight: 500;
+}
+
+.vmsd-option-hint {
+  display: block;
+  margin-top: 3px;
+  color: var(--vmsd-muted);
+  font-size: 12px;
+}
+
+.vmsd-group {
+  margin-bottom: 8px;
+}
+
+.vmsd-group:last-child {
+  margin-bottom: 0;
+}
+
+.vmsd-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 10px;
+  color: var(--vmsd-muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.vmsd-group-action {
+  color: var(--vmsd-primary);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.vmsd-state {
+  padding: 18px 12px;
+  text-align: center;
+  color: var(--vmsd-muted);
+}
+
+.theme-material,
+.skin-material {
+  --vmsd-primary: #3f51b5;
+  --vmsd-primary-soft: rgba(63, 81, 181, 0.12);
+  --vmsd-bg: #ffffff;
+  --vmsd-surface: #f5f7fb;
+  --vmsd-surface-muted: #e8eaf6;
+  --vmsd-border: #c5cae9;
+  --vmsd-border-strong: #7986cb;
+  --vmsd-ink: #212121;
+  --vmsd-muted: #5f6368;
+  --vmsd-chip-bg: #e8eaf6;
+  --vmsd-chip-text: #303f9f;
+  --vmsd-chip-remove: #303f9f;
+  --vmsd-divider: rgba(125, 119, 134, 0.16);
+  --vmsd-section-bg: #f5f7fb;
+  --vmsd-focus: rgba(63, 81, 181, 0.32);
+  --vmsd-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
+  --vmsd-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
+}
+
+.theme-material .vmsd-trigger,
+.skin-material .vmsd-trigger {
+  min-height: 56px;
+  border-radius: 18px;
+  padding: 11px 54px 11px 16px;
+}
+
+.theme-material .vmsd-menu,
+.skin-material .vmsd-menu,
+.vmsd-menu.theme-material,
+.vmsd-menu.skin-material {
+  border-radius: 22px;
+}
+
+.theme-material .vmsd-option,
+.skin-material .vmsd-option {
+  border-radius: 14px;
+  margin: 4px;
+  padding: 12px 14px;
+}
+
+.theme-dark,
+.skin-dark {
+  --vmsd-primary: #8ab4f8;
+  --vmsd-primary-soft: rgba(138, 180, 248, 0.18);
+  --vmsd-bg: #151a23;
+  --vmsd-surface: #202736;
+  --vmsd-surface-muted: #111722;
+  --vmsd-border: #384456;
+  --vmsd-border-strong: #8ab4f8;
+  --vmsd-ink: #edf2f7;
+  --vmsd-muted: #aab6c5;
+  --vmsd-chip-bg: #263247;
+  --vmsd-chip-text: #d7e6ff;
+  --vmsd-chip-remove: #d7e6ff;
+  --vmsd-divider: rgba(170, 182, 197, 0.18);
+  --vmsd-section-bg: #202736;
+  --vmsd-focus: rgba(138, 180, 248, 0.34);
+  --vmsd-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
+  --vmsd-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);
+}
+
+.theme-custom,
+.skin-custom {
+  --vmsd-primary: var(--stackline-ms-primary, #0f766e);
+  --vmsd-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));
+  --vmsd-bg: var(--stackline-ms-surface, #ffffff);
+  --vmsd-surface: var(--stackline-ms-surface-soft, #ecfdf5);
+  --vmsd-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);
+  --vmsd-border: var(--stackline-ms-outline, #99f6e4);
+  --vmsd-border-strong: var(--stackline-ms-outline-strong, #0f766e);
+  --vmsd-ink: var(--stackline-ms-on-surface, #102a2a);
+  --vmsd-muted: var(--stackline-ms-on-surface-muted, #47615f);
+  --vmsd-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);
+  --vmsd-chip-text: var(--stackline-ms-chip-text, #115e59);
+  --vmsd-chip-remove: var(--stackline-ms-chip-remove, #115e59);
+  --vmsd-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.18));
+  --vmsd-section-bg: var(--stackline-ms-section-bg, #ecfdf5);
+  --vmsd-focus: var(--stackline-ms-focus, rgba(15, 118, 110, 0.28));
+  --vmsd-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));
+  --vmsd-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));
+}
+
+.theme-brand,
+.skin-brand {
+  --stackline-ms-primary: #7c3aed;
+  --stackline-ms-primary-soft: rgba(124, 58, 237, 0.14);
+  --stackline-ms-surface: #ffffff;
+  --stackline-ms-surface-soft: #f5f3ff;
+  --stackline-ms-surface-muted: #ede9fe;
+  --stackline-ms-outline: #c4b5fd;
+  --stackline-ms-outline-strong: #7c3aed;
+  --stackline-ms-on-surface: #22183f;
+  --stackline-ms-on-surface-muted: #6b5d80;
+  --stackline-ms-chip-bg: #ede9fe;
+  --stackline-ms-chip-text: #5b21b6;
+  --stackline-ms-chip-remove: #5b21b6;
+  --stackline-ms-divider: rgba(124, 58, 237, 0.16);
+  --stackline-ms-section-bg: #f5f3ff;
+}
+
+.theme-classic,
+.skin-classic {
+  --vmsd-primary: #0079fe;
+  --vmsd-primary-soft: #e9f4ff;
+  --vmsd-bg: #ffffff;
+  --vmsd-surface: #f5f5f5;
+  --vmsd-surface-muted: #e9f4ff;
+  --vmsd-border: #cccccc;
+  --vmsd-border-strong: #0079fe;
+  --vmsd-ink: #333333;
+  --vmsd-muted: #333333;
+  --vmsd-chip-bg: #0079fe;
+  --vmsd-chip-text: #ffffff;
+  --vmsd-chip-remove: #ffffff;
+  --vmsd-focus: rgba(0, 121, 254, 0.26);
+  --vmsd-divider: #cccccc;
+  --vmsd-section-bg: #ffffff;
+  --vmsd-shadow: 0 1px 5px #959595;
+  --vmsd-shadow-soft: 0 1px 5px #959595;
+  color: #333333;
+}
+
+.theme-classic .vmsd-trigger,
+.skin-classic .vmsd-trigger {
+  flex-wrap: nowrap;
+  gap: 6px;
+  min-height: 42px;
+  border-radius: 3px;
+  padding: 10px 68px 10px 10px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+  box-shadow: 0 1px 5px #959595;
+  color: #333333;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.theme-classic .vmsd-trigger:hover,
+.skin-classic .vmsd-trigger:hover,
+.theme-classic[data-open="true"] .vmsd-trigger,
+.skin-classic[data-open="true"] .vmsd-trigger {
+  border-color: #cccccc;
+  box-shadow: 0 1px 5px #959595;
+}
+
+.theme-classic .vmsd-trigger.vmsd-disabled,
+.skin-classic .vmsd-trigger.vmsd-disabled {
+  background: #cccccc;
+  opacity: 1;
+}
+
+.theme-classic .vmsd-placeholder,
+.theme-classic .vmsd-single-value,
+.skin-classic .vmsd-placeholder,
+.skin-classic .vmsd-single-value {
+  color: #333333;
+  font-size: 14px;
+}
+
+.theme-classic .vmsd-value,
+.theme-classic .vmsd-badge-list,
+.skin-classic .vmsd-value,
+.skin-classic .vmsd-badge-list {
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.theme-classic .vmsd-badge,
+.skin-classic .vmsd-badge {
+  display: inline-block;
+  min-height: 0;
+  margin: 2px 0 0;
+  border-radius: 2px;
+  padding: 2px 24px 2px 6px;
+  box-shadow: none;
+  color: #ffffff;
+  line-height: 1.4;
+}
+
+.theme-classic .vmsd-badge-label,
+.skin-classic .vmsd-badge-label {
+  display: inline;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.theme-classic .vmsd-badge-remove,
+.skin-classic .vmsd-badge-remove {
+  right: 5px;
+  width: 14px;
+  height: 14px;
+  color: #ffffff;
+}
+
+.theme-classic .vmsd-badge-remove .vmsd-icon,
+.skin-classic .vmsd-badge-remove .vmsd-icon {
+  width: 9px;
+  height: 9px;
+}
+
+.theme-classic .vmsd-overflow,
+.skin-classic .vmsd-overflow {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.theme-classic .vmsd-actions,
+.skin-classic .vmsd-actions {
+  right: 10px;
+  gap: 12px;
+}
+
+.theme-classic .vmsd-clear,
+.skin-classic .vmsd-clear {
+  width: 18px;
+  height: 18px;
+  color: #333333;
+}
+
+.theme-classic .vmsd-clear .vmsd-icon,
+.skin-classic .vmsd-clear .vmsd-icon {
+  width: 11px;
+  height: 11px;
+}
+
+.theme-classic .vmsd-arrow-button,
+.skin-classic .vmsd-arrow-button {
+  width: 20px;
+  height: 20px;
+  color: #333333;
+}
+
+.theme-classic .vmsd-menu,
+.skin-classic .vmsd-menu,
+.vmsd-menu.theme-classic,
+.vmsd-menu.skin-classic {
+  overflow: visible;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  background: #ffffff;
+  box-shadow: 0 1px 5px #959595;
+}
+
+.vmsd-menu.theme-classic.vmsd-bottom,
+.vmsd-menu.skin-classic.vmsd-bottom {
+  top: calc(100% + 14px);
+}
+
+.vmsd-menu.theme-classic.vmsd-top,
+.vmsd-menu.skin-classic.vmsd-top {
+  bottom: calc(100% + 14px);
+}
+
+.vmsd-menu.vmsd-body-overlay.vmsd-bottom,
+.vmsd-menu.vmsd-body-overlay.vmsd-top {
+  bottom: auto;
+}
+
+.vmsd-menu.theme-classic::before,
+.vmsd-menu.theme-classic::after,
+.vmsd-menu.skin-classic::before,
+.vmsd-menu.skin-classic::after {
+  content: "";
+  position: absolute;
+  left: 15px;
+  width: 0;
+  height: 0;
+  border-right: 13px solid transparent;
+  border-left: 13px solid transparent;
+}
+
+.vmsd-menu.theme-classic.vmsd-bottom::before,
+.vmsd-menu.skin-classic.vmsd-bottom::before {
+  top: -15px;
+  border-bottom: 15px solid #cccccc;
+}
+
+.vmsd-menu.theme-classic.vmsd-bottom::after,
+.vmsd-menu.skin-classic.vmsd-bottom::after {
+  top: -14px;
+  border-bottom: 15px solid #ffffff;
+}
+
+.vmsd-menu.theme-classic.vmsd-top::before,
+.vmsd-menu.skin-classic.vmsd-top::before {
+  bottom: -15px;
+  border-top: 15px solid #cccccc;
+}
+
+.vmsd-menu.theme-classic.vmsd-top::after,
+.vmsd-menu.skin-classic.vmsd-top::after {
+  bottom: -14px;
+  border-top: 15px solid #ffffff;
+}
+
+.theme-classic .vmsd-toolbar,
+.skin-classic .vmsd-toolbar,
+.vmsd-menu.theme-classic .vmsd-toolbar,
+.vmsd-menu.skin-classic .vmsd-toolbar {
+  gap: 0;
+  padding: 0;
+  background: #ffffff;
+}
+
+.theme-classic .vmsd-search-shell,
+.skin-classic .vmsd-search-shell,
+.vmsd-menu.theme-classic .vmsd-search-shell,
+.vmsd-menu.skin-classic .vmsd-search-shell {
+  min-height: 35px;
+  border-bottom: 1px solid #cccccc;
+  background: #ffffff;
+}
+
+.theme-classic .vmsd-search-icon,
+.skin-classic .vmsd-search-icon,
+.vmsd-menu.theme-classic .vmsd-search-icon,
+.vmsd-menu.skin-classic .vmsd-search-icon {
+  left: 13px;
+  width: 18px;
+  height: 18px;
+}
+
+.theme-classic .vmsd-search-input,
+.skin-classic .vmsd-search-input,
+.vmsd-menu.theme-classic .vmsd-search-input,
+.vmsd-menu.skin-classic .vmsd-search-input {
+  min-height: 35px;
+  height: 35px;
+  padding: 0 35px;
+  border: 0;
+  color: #333333;
+}
+
+.theme-classic .vmsd-search-input:focus,
+.skin-classic .vmsd-search-input:focus,
+.vmsd-menu.theme-classic .vmsd-search-input:focus,
+.vmsd-menu.skin-classic .vmsd-search-input:focus {
+  box-shadow: none;
+}
+
+.theme-classic .vmsd-search-clear,
+.skin-classic .vmsd-search-clear,
+.vmsd-menu.theme-classic .vmsd-search-clear,
+.vmsd-menu.skin-classic .vmsd-search-clear {
+  right: 13px;
+}
+
+.theme-classic .vmsd-bulk-actions,
+.skin-classic .vmsd-bulk-actions,
+.vmsd-menu.theme-classic .vmsd-bulk-actions,
+.vmsd-menu.skin-classic .vmsd-bulk-actions {
+  border-top: 0;
+  border-bottom: 1px solid #cccccc;
+  background: #ffffff;
+}
+
+.theme-classic .vmsd-inline-button,
+.skin-classic .vmsd-inline-button,
+.vmsd-menu.theme-classic .vmsd-inline-button,
+.vmsd-menu.skin-classic .vmsd-inline-button {
+  min-height: 35px;
+  border-radius: 0;
+  color: #333333;
+  font-weight: 400;
+  padding: 10px;
+}
+
+.theme-classic .vmsd-inline-button:hover,
+.skin-classic .vmsd-inline-button:hover,
+.vmsd-menu.theme-classic .vmsd-inline-button:hover,
+.vmsd-menu.skin-classic .vmsd-inline-button:hover {
+  background: #f5f5f5;
+}
+
+.theme-classic .vmsd-list,
+.skin-classic .vmsd-list,
+.vmsd-menu.theme-classic .vmsd-list,
+.vmsd-menu.skin-classic .vmsd-list {
+  margin: 0;
+  padding: 0;
+  background: #ffffff;
+}
+
+.theme-classic .vmsd-option,
+.skin-classic .vmsd-option,
+.vmsd-menu.theme-classic .vmsd-option,
+.vmsd-menu.skin-classic .vmsd-option {
+  border-radius: 0;
+  margin: 0;
+  padding: 10px;
+  color: #333333;
+  line-height: 1.35;
+}
+
+.theme-classic .vmsd-option:hover,
+.skin-classic .vmsd-option:hover,
+.vmsd-menu.theme-classic .vmsd-option:hover,
+.vmsd-menu.skin-classic .vmsd-option:hover {
+  background: #f5f5f5;
+}
+
+.theme-classic .vmsd-option.vmsd-selected,
+.skin-classic .vmsd-option.vmsd-selected,
+.vmsd-menu.theme-classic .vmsd-option.vmsd-selected,
+.vmsd-menu.skin-classic .vmsd-option.vmsd-selected {
+  background: #e9f4ff;
+  color: #333333;
+}
+
+.theme-classic .vmsd-checkbox,
+.skin-classic .vmsd-checkbox,
+.vmsd-menu.theme-classic .vmsd-checkbox,
+.vmsd-menu.skin-classic .vmsd-checkbox {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #0079fe;
+  border-radius: 0;
+  background: #ffffff;
+}
+
+.theme-classic .vmsd-checkbox[data-checked="true"],
+.skin-classic .vmsd-checkbox[data-checked="true"],
+.vmsd-menu.theme-classic .vmsd-checkbox[data-checked="true"],
+.vmsd-menu.skin-classic .vmsd-checkbox[data-checked="true"] {
+  border-color: #0079fe;
+  background: #0079fe;
+}
+
+.theme-classic .vmsd-checkbox[data-checked="true"]::after,
+.skin-classic .vmsd-checkbox[data-checked="true"]::after,
+.vmsd-menu.theme-classic .vmsd-checkbox[data-checked="true"]::after,
+.vmsd-menu.skin-classic .vmsd-checkbox[data-checked="true"]::after {
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 3px;
+  margin-top: 0;
+  border-width: 0 0 3px 3px;
+  transform: translate(-50%, -62%) rotate(-45deg);
+}
+
+.theme-classic .vmsd-option-label,
+.skin-classic .vmsd-option-label,
+.vmsd-menu.theme-classic .vmsd-option-label,
+.vmsd-menu.skin-classic .vmsd-option-label {
+  color: #000000;
+  font-weight: 300;
+}
+
+.theme-classic .vmsd-group-header,
+.skin-classic .vmsd-group-header,
+.vmsd-menu.theme-classic .vmsd-group-header,
+.vmsd-menu.skin-classic .vmsd-group-header {
+  color: #000000;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: capitalize;
+}
+
+.custom-class-example {
+  --vmsd-primary: #0f766e;
+  --vmsd-primary-soft: #ccfbf1;
+  --vmsd-bg: #f8fffd;
+  --vmsd-surface: #ecfdf5;
+  --vmsd-border: #99f6e4;
+  --vmsd-border-strong: #0f766e;
+}
+
+@media (max-width: 720px) {
+  .vmsd-trigger {
+    align-items: flex-start;
+    padding-right: 54px;
+  }
+}
+
+/* stackline-vue2-live-20260527 */
+`;
+function ensureDropdownStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const tag = document.createElement("style");
+  tag.id = STYLE_ID;
+  tag.textContent = styles;
+  document.head.appendChild(tag);
+}
+
+// src/VueMultiselectDropdown.ts
+var DEFAULT_SETTINGS = {
+  singleSelection: false,
+  text: "Select",
+  enableCheckAll: true,
+  selectAllText: "Select All",
+  unSelectAllText: "Unselect All",
+  filterSelectAllText: "Select filtered",
+  filterUnSelectAllText: "Unselect filtered",
+  enableFilterSelectAll: true,
+  enableSearchFilter: false,
+  searchBy: [],
+  maxHeight: 300,
+  badgeShowLimit: Number.MAX_SAFE_INTEGER,
+  classes: "",
+  limitSelection: 0,
+  disabled: false,
+  searchPlaceholderText: "Search",
+  groupBy: "",
+  showCheckbox: true,
+  noDataLabel: "No Data Available",
+  searchAutofocus: true,
+  lazyLoading: false,
+  labelKey: "itemName",
+  primaryKey: "id",
+  position: "bottom",
+  autoPosition: true,
+  loading: false,
+  selectGroup: false,
+  addNewItemOnFilter: false,
+  addNewButtonText: "Add",
+  escapeToClose: true,
+  clearAll: true,
+  closeDropDownOnSelection: false,
+  tagToBody: false,
+  appendToBody: false,
+  theme: "",
+  skin: "classic",
+  ariaLabel: "Multiselect dropdown",
+  listboxAriaLabel: "Dropdown options",
+  searchAriaLabel: "Search options",
+  clearSearchAriaLabel: "Clear search",
+  clearAllAriaLabel: "Clear selected options",
+  removeItemAriaLabel: "Remove selected option",
+  openDropdownAriaLabel: "Open dropdown",
+  closeDropdownAriaLabel: "Close dropdown",
+  loadingText: "Loading options"
+};
+function iconPath(name) {
+  if (name === "remove") {
+    return "M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z";
+  }
+  if (name === "clear") {
+    return "M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z";
+  }
+  if (name === "search") {
+    return "M602.531,549.736l-184.31-185.368c26.679-37.72,42.528-83.729,42.528-133.548C460.75,103.35,357.997,0,231.258,0C104.518,0,1.765,103.35,1.765,230.82c0,127.47,102.753,230.82,229.493,230.82c49.53,0,95.271-15.944,132.78-42.777l184.31,185.366c7.482,7.521,17.292,11.291,27.102,11.291c9.812,0,19.62-3.77,27.083-11.291C617.496,589.188,617.496,564.777,602.531,549.736z M355.9,319.763l-15.042,21.273L319.7,356.174c-26.083,18.658-56.667,28.526-88.442,28.526c-84.365,0-152.995-69.035-152.995-153.88c0-84.846,68.63-153.88,152.995-153.88s152.996,69.034,152.996,153.88C384.271,262.769,374.462,293.526,355.9,319.763z";
+  }
+  if (name === "angle-up") {
+    return "M604.501,440.509L325.398,134.956c-5.331-5.357-12.423-7.627-19.386-7.27c-6.989-0.357-14.056,1.913-19.387,7.27L7.499,440.509c-9.999,10.024-9.999,26.298,0,36.323s26.223,10.024,36.222,0l262.293-287.164L568.28,476.832c9.999,10.024,26.222,10.024,36.221,0C614.5,466.809,614.5,450.534,604.501,440.509z";
+  }
+  return "M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782c-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296c6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z";
+}
+function renderIcon(h, name, className = "vmsd-icon") {
+  const viewBox = name === "remove" ? "0 0 47.971 47.971" : name === "clear" ? "0 0 51.976 51.976" : name === "search" ? "0 0 615.52 615.52" : "0 0 612 612";
+  return h("svg", { class: className, attrs: { viewBox, focusable: "false", "aria-hidden": "true" } }, [
+    h("path", { attrs: { d: iconPath(name) } })
+  ]);
+}
+function isPrimitiveItem(item) {
+  return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
+}
+function getLabel(item, settings) {
+  if (isPrimitiveItem(item)) {
+    return String(item);
+  }
+  const keys = [settings.labelKey, "itemName", "name", "label", "title", "value"].filter(Boolean);
+  for (const key of keys) {
+    if (key && item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return JSON.stringify(item);
+}
+function getPrimaryValue(item, settings) {
+  if (isPrimitiveItem(item)) {
+    return String(item);
+  }
+  const keys = [settings.primaryKey, "id", "value", "key"].filter(Boolean);
+  for (const key of keys) {
+    if (key && item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return getLabel(item, settings);
+}
+function isDisabledItem(item) {
+  return !isPrimitiveItem(item) && Boolean(item.disabled);
+}
+function itemMatchesQuery(item, query, settings) {
+  if (!query.trim()) {
+    return true;
+  }
+  const needle = query.trim().toLowerCase();
+  const haystack = /* @__PURE__ */ new Set();
+  haystack.add(getLabel(item, settings).toLowerCase());
+  if (!isPrimitiveItem(item)) {
+    const searchKeys = settings.searchBy.length ? settings.searchBy : [settings.labelKey];
+    for (const key of searchKeys) {
+      if (key && item[key] != null) {
+        haystack.add(String(item[key]).toLowerCase());
+      }
+    }
+  }
+  for (const value of haystack) {
+    if (value.indexOf(needle) >= 0) {
+      return true;
+    }
+  }
+  return false;
+}
+function getGroupName(item, settings) {
+  if (!settings.groupBy) {
+    return "";
+  }
+  if (typeof settings.groupBy === "function") {
+    return settings.groupBy(item);
+  }
+  if (!isPrimitiveItem(item)) {
+    const groupKey = settings.groupBy;
+    const objectItem = item;
+    if (groupKey in objectItem) {
+      return String(objectItem[groupKey] || "");
+    }
+  }
+  return "";
+}
+function buildGroups(items, settings) {
+  if (!settings.groupBy) {
+    return [];
+  }
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const groupName = getGroupName(item, settings) || "Ungrouped";
+    const current = map.get(groupName) || [];
+    current.push(item);
+    map.set(groupName, current);
+  }
+  return Array.from(map.entries()).map(([name, groupedItems]) => ({ name, items: groupedItems }));
+}
+function mergeUniqueItems(base, extra, settings) {
+  const bucket = /* @__PURE__ */ new Map();
+  for (const item of base.concat(extra)) {
+    bucket.set(getPrimaryValue(item, settings), item);
+  }
+  return Array.from(bucket.values());
+}
+function callRenderFunction(renderFunction, h, item, context) {
+  if (!renderFunction) {
+    return null;
+  }
+  return renderFunction(item, context, h);
+}
+function escapeSelectorValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/["\\]/g, "\\$&");
+}
+function isActivationKey(event) {
+  return event.key === "Enter" || event.key === " " || event.key === "Spacebar";
+}
+function isTextInputTarget(target) {
+  const element = target;
+  if (!element) {
+    return false;
+  }
+  return element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.isContentEditable;
+}
+var VueMultiselectDropdown = {
+  name: "VueMultiselectDropdown",
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      default: void 0
+    },
+    selectedItems: {
+      type: Array,
+      default: void 0
+    },
+    defaultSelectedItems: {
+      type: Array,
+      default: () => []
+    },
+    settings: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    renderItem: {
+      type: Function,
+      default: void 0
+    },
+    renderBadge: {
+      type: Function,
+      default: void 0
+    },
+    renderEmptyState: {
+      type: Function,
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      query: "",
+      focusedKey: "",
+      internalSelected: Array.isArray(this.defaultSelectedItems) ? this.defaultSelectedItems.slice() : [],
+      menuStyle: {},
+      bodyListMaxHeight: void 0,
+      menuPlaceholder: null,
+      menuAttachedToBody: false,
+      effectivePosition: "bottom",
+      instanceId: `stackline-vmsd-${Math.random().toString(36).slice(2)}`
+    };
+  },
+  computed: {
+    resolvedSettings() {
+      const merged = {
+        ...DEFAULT_SETTINGS,
+        ...this.settings || {}
+      };
+      const skin = merged.skin || merged.theme || "classic";
+      return {
+        ...merged,
+        skin,
+        disabled: Boolean(merged.disabled || this.disabled),
+        searchBy: Array.isArray(merged.searchBy) ? merged.searchBy : []
+      };
+    },
+    selected() {
+      if (Array.isArray(this.selectedItems)) {
+        return this.selectedItems;
+      }
+      if (Array.isArray(this.value)) {
+        return this.value;
+      }
+      return this.internalSelected;
+    },
+    filteredItems() {
+      const settings = this.resolvedSettings;
+      return (this.data || []).filter((item) => itemMatchesQuery(item, this.query, settings));
+    },
+    groupedItems() {
+      return buildGroups(this.filteredItems, this.resolvedSettings);
+    },
+    visibleSelected() {
+      const limit = this.resolvedSettings.badgeShowLimit;
+      return this.selected.slice(0, limit);
+    },
+    hiddenSelectedCount() {
+      return Math.max(0, this.selected.length - this.visibleSelected.length);
+    },
+    openDirection() {
+      return this.effectivePosition === "top" ? "up" : "down";
+    },
+    shouldAppendToBody() {
+      return Boolean(this.resolvedSettings.appendToBody || this.resolvedSettings.tagToBody);
+    }
+  },
+  watch: {
+    isOpen(value) {
+      this.$nextTick(() => {
+        if (value) {
+          this.attachMenuToBody();
+          this.updateMenuPosition();
+          if (this.resolvedSettings.searchAutofocus && this.resolvedSettings.enableSearchFilter) {
+            this.focusSearch();
+          }
+          this.$emit("open");
+        } else {
+          this.restoreMenuToComponent();
+          this.menuStyle = {};
+          this.bodyListMaxHeight = void 0;
+          this.$emit("close");
+        }
+      });
+    },
+    selected() {
+      this.$nextTick(this.updateMenuPosition);
+    },
+    filteredItems() {
+      this.$nextTick(this.updateMenuPosition);
+    },
+    settings: {
+      deep: true,
+      handler() {
+        this.$nextTick(this.updateMenuPosition);
+      }
+    }
+  },
+  mounted() {
+    ensureDropdownStyles();
+    document.addEventListener("click", this.onDocumentClick, true);
+    document.addEventListener("keydown", this.onDocumentKeydown, true);
+    window.addEventListener("resize", this.updateMenuPosition);
+    window.addEventListener("scroll", this.updateMenuPosition, true);
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.onDocumentClick, true);
+    document.removeEventListener("keydown", this.onDocumentKeydown, true);
+    window.removeEventListener("resize", this.updateMenuPosition);
+    window.removeEventListener("scroll", this.updateMenuPosition, true);
+    this.restoreMenuToComponent();
+  },
+  methods: {
+    getLabel(item) {
+      return getLabel(item, this.resolvedSettings);
+    },
+    getKey(item) {
+      return getPrimaryValue(item, this.resolvedSettings);
+    },
+    isSelected(item) {
+      const key = this.getKey(item);
+      return this.selected.some((selectedItem) => this.getKey(selectedItem) === key);
+    },
+    visibleSelectableItems() {
+      return this.filteredItems.filter((item) => !isDisabledItem(item));
+    },
+    emitSelection(items) {
+      if (!Array.isArray(this.selectedItems) && !Array.isArray(this.value)) {
+        this.internalSelected = items;
+      }
+      this.$emit("input", items);
+      this.$emit("update:selectedItems", items);
+      this.$emit("change", items);
+    },
+    openDropdown() {
+      if (this.resolvedSettings.disabled) {
+        return;
+      }
+      this.isOpen = true;
+    },
+    closeDropdown() {
+      this.isOpen = false;
+      this.query = "";
+      this.focusedKey = "";
+    },
+    toggleDropdown() {
+      if (this.isOpen) {
+        this.closeDropdown();
+      } else {
+        this.openDropdown();
+      }
+    },
+    focusSearch() {
+      if (!this.isOpen) {
+        this.openDropdown();
+      }
+      const search = this.$refs.searchInput;
+      if (search && typeof search.focus === "function") {
+        search.focus();
+      }
+    },
+    clearSelection(event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      const previous = this.selected.slice();
+      this.emitSelection([]);
+      this.$emit("de-select-all", previous);
+    },
+    selectAll(event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      const settings = this.resolvedSettings;
+      const selectable = this.visibleSelectableItems();
+      const allSelected = selectable.length > 0 && selectable.every((item) => this.isSelected(item));
+      if (allSelected) {
+        const keys = new Set(selectable.map((item) => this.getKey(item)));
+        const next2 = this.selected.filter((item) => !keys.has(this.getKey(item)));
+        this.emitSelection(next2);
+        this.$emit("de-select-all", selectable);
+        return;
+      }
+      const remainingCapacity = settings.limitSelection ? Math.max(settings.limitSelection - this.selected.length, 0) : Number.MAX_SAFE_INTEGER;
+      const currentKeys = new Set(this.selected.map((item) => this.getKey(item)));
+      const nextItemsToAdd = selectable.filter((item) => !currentKeys.has(this.getKey(item))).slice(0, remainingCapacity);
+      const next = settings.singleSelection ? selectable.slice(0, 1) : mergeUniqueItems(this.selected, nextItemsToAdd, settings);
+      this.emitSelection(next);
+      this.$emit("select-all", next);
+    },
+    deSelectAll(event) {
+      this.clearSelection(event);
+    },
+    selectGroup(groupName, items, event) {
+      event.preventDefault();
+      event.stopPropagation();
+      const settings = this.resolvedSettings;
+      const selectable = items.filter((item) => !isDisabledItem(item));
+      const everySelected = selectable.every((item) => this.isSelected(item));
+      if (everySelected) {
+        const keys = new Set(selectable.map((item) => this.getKey(item)));
+        const next2 = this.selected.filter((item) => !keys.has(this.getKey(item)));
+        this.emitSelection(next2);
+        this.$emit("group-de-select", groupName, selectable);
+        return;
+      }
+      const next = settings.singleSelection ? selectable.slice(0, 1) : mergeUniqueItems(this.selected, selectable, settings);
+      this.emitSelection(next);
+      this.$emit("group-select", groupName, selectable);
+    },
+    toggleItem(item, event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      const isAlreadySelected = this.isSelected(item);
+      const limitReached = Boolean(this.resolvedSettings.limitSelection) && this.selected.length >= this.resolvedSettings.limitSelection;
+      if (this.resolvedSettings.disabled || isDisabledItem(item) || limitReached && !isAlreadySelected) {
+        return;
+      }
+      const key = this.getKey(item);
+      const exists = this.selected.some((selectedItem) => this.getKey(selectedItem) === key);
+      if (exists) {
+        const next2 = this.selected.filter((selectedItem) => this.getKey(selectedItem) !== key);
+        this.emitSelection(next2);
+        this.$emit("de-select", item);
+        return;
+      }
+      let next = this.resolvedSettings.singleSelection ? [item] : this.selected.concat(item);
+      if (this.resolvedSettings.limitSelection > 0) {
+        next = next.slice(0, this.resolvedSettings.limitSelection);
+      }
+      this.emitSelection(next);
+      this.$emit("select", item);
+      if (this.resolvedSettings.singleSelection || this.resolvedSettings.closeDropDownOnSelection) {
+        this.closeDropdown();
+      }
+    },
+    removeItem(item, event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      const key = this.getKey(item);
+      const next = this.selected.filter((selectedItem) => this.getKey(selectedItem) !== key);
+      this.emitSelection(next);
+      this.$emit("de-select", item);
+    },
+    addFilterItem(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      const label = this.query.trim();
+      if (!label) {
+        return;
+      }
+      const item = {
+        [this.resolvedSettings.primaryKey]: label.toLowerCase().replace(/\s+/g, "-"),
+        [this.resolvedSettings.labelKey]: label
+      };
+      this.$emit("add-filter-new-item", label, item);
+      this.toggleItem(item);
+      this.query = "";
+    },
+    onTriggerKeydown(event) {
+      if (isActivationKey(event)) {
+        event.preventDefault();
+        this.toggleDropdown();
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.openDropdown();
+        this.focusFirstOption();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.openDropdown();
+        this.focusLastOption();
+        return;
+      }
+      if (event.key === "Escape") {
+        this.closeDropdown();
+      }
+    },
+    onListKeydown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeDropdown();
+        return;
+      }
+      if (isTextInputTarget(event.target) && event.key !== "ArrowDown") {
+        return;
+      }
+      const selectable = this.visibleSelectableItems();
+      if (!selectable.length) {
+        return;
+      }
+      const currentIndex = Math.max(0, selectable.findIndex((item) => this.getKey(item) === this.focusedKey));
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        const nextItem = selectable[Math.min(currentIndex + 1, selectable.length - 1)];
+        this.focusOption(nextItem);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        const nextItem = selectable[Math.max(currentIndex - 1, 0)];
+        this.focusOption(nextItem);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusFirstOption();
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusLastOption();
+        return;
+      }
+      if (isActivationKey(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const activeItem = selectable.find((item) => this.getKey(item) === this.focusedKey) || selectable[0];
+        this.toggleItem(activeItem);
+        return;
+      }
+    },
+    focusFirstOption() {
+      this.$nextTick(() => {
+        const first = this.visibleSelectableItems()[0];
+        if (first) {
+          this.focusOption(first);
+        }
+      });
+    },
+    focusLastOption() {
+      this.$nextTick(() => {
+        const items = this.visibleSelectableItems();
+        const last = items[items.length - 1];
+        if (last) {
+          this.focusOption(last);
+        }
+      });
+    },
+    focusOption(item) {
+      const key = this.getKey(item);
+      this.focusedKey = key;
+      this.$nextTick(() => {
+        const menu = this.$refs.menu;
+        const option = menu?.querySelector(`[data-vmsd-key="${escapeSelectorValue(key)}"]`);
+        if (option) {
+          option.focus();
+          option.scrollIntoView({ block: "nearest" });
+        }
+      });
+    },
+    onInlineKeydown(event) {
+      if (isActivationKey(event)) {
+        event.stopPropagation();
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openDropdown();
+        this.focusFirstOption();
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openDropdown();
+        this.focusLastOption();
+      }
+    },
+    onTriggerClick(event) {
+      const target = event.target;
+      if (target && target.closest("button")) {
+        return;
+      }
+      this.toggleDropdown();
+    },
+    onDocumentClick(event) {
+      if (!this.isOpen) {
+        return;
+      }
+      const root = this.$el;
+      const menu = this.$refs.menu;
+      const target = event.target;
+      if (root && root.contains(target) || menu && menu.contains(target)) {
+        return;
+      }
+      this.closeDropdown();
+    },
+    onDocumentKeydown(event) {
+      if (this.isOpen && this.resolvedSettings.escapeToClose && event.key === "Escape") {
+        this.closeDropdown();
+      }
+    },
+    onListScroll(event) {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const payload = {
+        scrollTop: target.scrollTop,
+        scrollHeight: target.scrollHeight,
+        clientHeight: target.clientHeight
+      };
+      if (target.scrollTop + target.clientHeight >= target.scrollHeight - 4) {
+        this.$emit("scroll-to-end", payload);
+      }
+    },
+    attachMenuToBody() {
+      if (!this.shouldAppendToBody || !this.isOpen || typeof document === "undefined") {
+        return;
+      }
+      const menu = this.$refs.menu;
+      if (!menu || menu.parentNode === document.body) {
+        return;
+      }
+      if (!this.menuPlaceholder && menu.parentNode) {
+        this.menuPlaceholder = document.createComment("stackline-vue-multiselect-menu");
+        menu.parentNode.insertBefore(this.menuPlaceholder, menu);
+      }
+      document.body.appendChild(menu);
+      this.menuAttachedToBody = true;
+    },
+    restoreMenuToComponent() {
+      const menu = this.$refs.menu;
+      if (!menu || !this.menuPlaceholder || !this.menuPlaceholder.parentNode) {
+        return;
+      }
+      this.menuPlaceholder.parentNode.insertBefore(menu, this.menuPlaceholder.nextSibling);
+      this.menuPlaceholder.parentNode.removeChild(this.menuPlaceholder);
+      this.menuPlaceholder = null;
+      this.menuAttachedToBody = false;
+      this.menuStyle = {};
+    },
+    updateMenuPosition() {
+      if (!this.isOpen || typeof window === "undefined") {
+        return;
+      }
+      const trigger = this.$refs.trigger;
+      const menu = this.$refs.menu;
+      if (!trigger || !menu) {
+        return;
+      }
+      const rect = trigger.getBoundingClientRect();
+      const gap = 8;
+      const viewportPadding = 8;
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      const spaceOnTop = rect.top;
+      const spaceOnBottom = viewportHeight - rect.bottom;
+      const menuHeight = menu.offsetHeight || Math.min(this.resolvedSettings.maxHeight + 92, 420);
+      const preferredPosition = this.resolvedSettings.position === "top" ? "top" : "bottom";
+      const topHasMeaningfullyMoreRoom = spaceOnTop > spaceOnBottom + 48;
+      const resolvedPosition = this.resolvedSettings.autoPosition ? spaceOnBottom < menuHeight && topHasMeaningfullyMoreRoom && menuHeight < spaceOnTop ? "top" : "bottom" : preferredPosition;
+      this.effectivePosition = resolvedPosition;
+      if (!this.shouldAppendToBody) {
+        this.bodyListMaxHeight = void 0;
+        return;
+      }
+      const list = this.$refs.list;
+      const listHeight = list?.offsetHeight || Math.min(this.resolvedSettings.maxHeight, menuHeight);
+      const nonListHeight = Math.max(0, menuHeight - listHeight);
+      const availableHeight = resolvedPosition === "top" ? Math.max(0, rect.top - gap - viewportPadding) : Math.max(0, viewportHeight - rect.bottom - gap - viewportPadding);
+      const nextListMaxHeight = menuHeight > 0 ? Math.max(0, Math.min(this.resolvedSettings.maxHeight, availableHeight - nonListHeight)) : this.resolvedSettings.maxHeight;
+      const positionedMenuHeight = nonListHeight + nextListMaxHeight;
+      const preferredTop = resolvedPosition === "top" ? rect.top - positionedMenuHeight - gap : rect.bottom + gap;
+      const top = resolvedPosition === "top" ? Math.max(viewportPadding, preferredTop) : preferredTop;
+      const maxWidth = Math.max(0, window.innerWidth - viewportPadding * 2);
+      const width = Math.min(rect.width, maxWidth);
+      const left = Math.min(Math.max(viewportPadding, rect.left), window.innerWidth - width - viewportPadding);
+      const style = {
+        position: "fixed",
+        top: `${top}px`,
+        left: `${left}px`,
+        width: `${width}px`,
+        maxWidth: `${maxWidth}px`,
+        zIndex: "100000",
+        display: this.isOpen ? "block" : "none"
+      };
+      this.bodyListMaxHeight = nextListMaxHeight;
+      this.menuStyle = style;
+    }
+  },
+  render(h) {
+    const settings = this.resolvedSettings;
+    const skin = String(settings.skin || settings.theme || "classic");
+    const skinFallbackClass = ["classic", "material", "dark", "custom"].includes(skin) ? "" : "theme-custom";
+    const hasSelection = this.selected.length > 0;
+    const visibleBadges = this.visibleSelected;
+    const hiddenCount = this.hiddenSelectedCount;
+    const hasClear = settings.clearAll && hasSelection && !settings.disabled;
+    const selectableItems = this.visibleSelectableItems();
+    const allFilteredSelected = selectableItems.length > 0 && selectableItems.every((item) => this.isSelected(item));
+    const hasBulkActions = settings.enableCheckAll && !settings.singleSelection || Boolean(settings.addNewItemOnFilter && this.query.trim());
+    const menuClasses = [
+      "vmsd-menu",
+      `vmsd-${this.effectivePosition}`,
+      `skin-${skin}`,
+      `theme-${skin}`,
+      skinFallbackClass,
+      this.shouldAppendToBody ? "vmsd-body-overlay" : ""
+    ].filter(Boolean);
+    const badges = settings.singleSelection && hasSelection ? [h("span", { class: "vmsd-single-value" }, [this.getLabel(this.selected[0])])] : visibleBadges.map((item) => {
+      const label = this.getLabel(item);
+      const context = {
+        item,
+        label,
+        selected: true,
+        disabled: false,
+        query: this.query,
+        toggle: () => this.toggleItem(item),
+        remove: () => this.removeItem(item)
+      };
+      const rendered = 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]),
+        settings.disabled ? null : h(
+          "button",
+          {
+            class: "vmsd-badge-remove",
+            attrs: { type: "button", "aria-label": removeLabel },
+            on: {
+              click: (event) => this.removeItem(item, event),
+              keydown: this.onInlineKeydown
+            }
+          },
+          [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 trigger = h(
+      "div",
+      {
+        ref: "trigger",
+        class: ["vmsd-trigger", settings.disabled ? "vmsd-disabled" : ""],
+        attrs: {
+          role: "combobox",
+          tabindex: settings.disabled ? "-1" : "0",
+          "aria-label": hasSelection ? `${settings.ariaLabel}: ${this.selected.map((item) => this.getLabel(item)).join(", ")}` : settings.ariaLabel,
+          "aria-expanded": this.isOpen ? "true" : "false",
+          "aria-haspopup": "listbox",
+          "aria-disabled": settings.disabled ? "true" : "false",
+          "aria-controls": `${this.instanceId}-listbox`
+        },
+        on: {
+          click: this.onTriggerClick,
+          keydown: this.onTriggerKeydown
+        }
+      },
+      [
+        h("div", { class: "vmsd-value" }, valueContent),
+        h("div", { class: "vmsd-actions" }, [
+          hasClear ? h(
+            "button",
+            {
+              class: "vmsd-clear",
+              attrs: { type: "button", "aria-label": settings.clearAllAriaLabel },
+              on: {
+                click: (event) => this.clearSelection(event),
+                keydown: this.onInlineKeydown
+              }
+            },
+            [renderIcon(h, "remove")]
+          ) : null,
+          h(
+            "button",
+            {
+              class: "vmsd-arrow-button",
+              attrs: {
+                type: "button",
+                disabled: settings.disabled,
+                "aria-label": this.isOpen ? settings.closeDropdownAriaLabel : settings.openDropdownAriaLabel,
+                "aria-expanded": this.isOpen ? "true" : "false",
+                "aria-controls": `${this.instanceId}-listbox`
+              },
+              on: {
+                click: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.toggleDropdown();
+                },
+                keydown: this.onInlineKeydown
+              }
+            },
+            [h("span", { class: "vmsd-arrow", attrs: { "aria-hidden": "true" } }, [renderIcon(h, this.isOpen ? "angle-up" : "angle-down")])]
+          )
+        ])
+      ]
+    );
+    const search = settings.enableSearchFilter ? h("div", { class: "vmsd-search-shell" }, [
+      renderIcon(h, "search", "vmsd-search-icon"),
+      h("input", {
+        ref: "searchInput",
+        class: "vmsd-search-input",
+        domProps: { value: this.query },
+        attrs: { type: "text", placeholder: settings.searchPlaceholderText, "aria-label": settings.searchAriaLabel },
+        on: {
+          input: (event) => {
+            this.query = String(event.target.value || "");
+          },
+          keydown: this.onListKeydown
+        }
+      }),
+      this.query ? h(
+        "button",
+        {
+          class: "vmsd-search-clear",
+          attrs: { type: "button", "aria-label": settings.clearSearchAriaLabel },
+          on: {
+            click: () => this.query = "",
+            keydown: this.onInlineKeydown
+          }
+        },
+        [renderIcon(h, "clear")]
+      ) : null
+    ]) : null;
+    const bulkActions = hasBulkActions ? h("div", { class: "vmsd-bulk-actions" }, [
+      settings.enableCheckAll && !settings.singleSelection ? h(
+        "button",
+        {
+          class: "vmsd-inline-button vmsd-select-all-button",
+          attrs: { type: "button", disabled: settings.disabled || selectableItems.length === 0 },
+          on: { click: (event) => this.selectAll(event), keydown: this.onInlineKeydown }
+        },
+        [
+          settings.showCheckbox ? h("span", { class: "vmsd-checkbox", attrs: { "data-checked": allFilteredSelected ? "true" : "false", "aria-hidden": "true" } }) : null,
+          h("span", [allFilteredSelected ? settings.unSelectAllText : settings.selectAllText])
+        ]
+      ) : null,
+      settings.addNewItemOnFilter && this.query.trim() ? h(
+        "button",
+        {
+          class: "vmsd-inline-button vmsd-add-button",
+          attrs: { type: "button" },
+          on: { click: this.addFilterItem, keydown: this.onInlineKeydown }
+        },
+        [`${settings.addNewButtonText} "${this.query.trim()}"`]
+      ) : null
+    ]) : null;
+    const renderOption = (item) => {
+      const label = this.getLabel(item);
+      const selected = this.isSelected(item);
+      const limitReached = Boolean(settings.limitSelection) && this.selected.length >= settings.limitSelection;
+      const disabled = settings.disabled || isDisabledItem(item) || limitReached && !selected;
+      const key = this.getKey(item);
+      const context = {
+        item,
+        label,
+        selected,
+        disabled,
+        query: this.query,
+        toggle: () => this.toggleItem(item),
+        remove: () => this.removeItem(item)
+      };
+      const rendered = callRenderFunction(this.renderItem, h, item, context);
+      return h(
+        "div",
+        {
+          key,
+          class: ["vmsd-option", selected ? "vmsd-selected" : "", disabled ? "vmsd-disabled" : ""],
+          attrs: {
+            role: "option",
+            tabindex: disabled ? "-1" : "0",
+            "data-vmsd-option": "true",
+            "data-vmsd-key": key,
+            "aria-disabled": disabled ? "true" : "false",
+            "aria-selected": selected ? "true" : "false"
+          },
+          on: {
+            click: (event) => {
+              if (!disabled) {
+                this.toggleItem(item, event);
+              }
+            },
+            focus: () => this.focusedKey = key,
+            mouseenter: () => this.focusedKey = key,
+            keydown: this.onListKeydown
+          }
+        },
+        [
+          settings.showCheckbox ? h("span", { class: "vmsd-checkbox", attrs: { "data-checked": selected ? "true" : "false", "aria-hidden": "true" } }) : null,
+          rendered || h("div", { class: "vmsd-option-body" }, [
+            h("div", { class: "vmsd-option-label" }, [label]),
+            !isPrimitiveItem(item) && item.caption ? h("span", { class: "vmsd-option-hint" }, [String(item.caption)]) : null
+          ])
+        ]
+      );
+    };
+    const listChildren = settings.loading ? [h("div", { class: "vmsd-state", attrs: { role: "status" } }, [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" }, [
+          h("span", [`${group.name} \xB7 ${group.items.length}`]),
+          settings.selectGroup ? h(
+            "button",
+            {
+              class: "vmsd-group-action",
+              attrs: { type: "button" },
+              on: { click: (event) => this.selectGroup(group.name, group.items, event) }
+            },
+            [group.items.filter((item) => !isDisabledItem(item)).every((item) => this.isSelected(item)) ? "Unselect" : "Select"]
+          ) : null
+        ]),
+        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;
+      listChildren.push(h("div", { class: "vmsd-state" }, [emptyContent]));
+    }
+    const menu = h(
+      "div",
+      {
+        ref: "menu",
+        class: menuClasses,
+        style: {
+          ...this.shouldAppendToBody ? this.menuStyle : {},
+          display: this.isOpen ? "block" : "none"
+        },
+        attrs: {
+          role: "presentation",
+          "aria-hidden": this.isOpen ? "false" : "true"
+        },
+        on: { keydown: this.onListKeydown }
+      },
+      [
+        h("div", { class: "vmsd-toolbar" }, [bulkActions, search]),
+        h(
+          "div",
+          {
+            ref: "list",
+            class: "vmsd-list",
+            style: { maxHeight: `${this.shouldAppendToBody && this.bodyListMaxHeight != null ? this.bodyListMaxHeight : settings.maxHeight}px` },
+            attrs: { id: `${this.instanceId}-listbox`, role: "listbox", "aria-label": settings.listboxAriaLabel, "aria-multiselectable": settings.singleSelection ? "false" : "true" },
+            on: { scroll: this.onListScroll }
+          },
+          listChildren
+        )
+      ]
+    );
+    return h(
+      "div",
+      {
+        class: [
+          "vmsd-root",
+          `skin-${skin}`,
+          `theme-${skin}`,
+          skinFallbackClass,
+          this.isOpen ? "vmsd-open" : "",
+          this.effectivePosition === "top" ? "vmsd-opens-up" : "vmsd-opens-down",
+          settings.classes,
+          hasSelection ? "vmsd-has-selection" : "",
+          hasClear ? "vmsd-has-clear" : "",
+          hiddenCount > 0 ? "vmsd-has-overflow" : ""
+        ],
+        attrs: {
+          "data-open": this.isOpen ? "true" : "false"
+        }
+      },
+      [trigger, menu]
+    );
+  }
+};
+var StacklineVueMultiselect = VueMultiselectDropdown;
+
+// src/plugin.ts
+var VueMultiselect = {
+  install(Vue) {
+    Vue.component("StacklineVueMultiselect", VueMultiselectDropdown);
+    Vue.component("VueMultiselectDropdown", VueMultiselectDropdown);
+    Vue.component("vue-multiselect-dropdown", VueMultiselectDropdown);
+    Vue.component("stackline-vue-multiselect", VueMultiselectDropdown);
+  }
+};
+var plugin_default = VueMultiselect;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StacklineVueMultiselect,
+  VueMultiselect,
+  VueMultiselectDropdown
+});