@keenmate/web-multiselect 1.0.0-rc02

package/dist/multiselect.js

@@ -0,0 +1,2231 @@
+var Ue = Object.defineProperty;
+var Ye = (i, e, t) => e in i ? Ue(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var u = (i, e, t) => Ye(i, typeof e != "symbol" ? e + "" : e, t);
+const te = Math.min, z = Math.max, ie = Math.round, J = Math.floor, P = (i) => ({
+  x: i,
+  y: i
+}), Xe = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+}, Je = {
+  start: "end",
+  end: "start"
+};
+function ke(i, e, t) {
+  return z(i, te(e, t));
+}
+function le(i, e) {
+  return typeof i == "function" ? i(e) : i;
+}
+function N(i) {
+  return i.split("-")[0];
+}
+function ne(i) {
+  return i.split("-")[1];
+}
+function Ee(i) {
+  return i === "x" ? "y" : "x";
+}
+function Ve(i) {
+  return i === "y" ? "height" : "width";
+}
+const qe = /* @__PURE__ */ new Set(["top", "bottom"]);
+function V(i) {
+  return qe.has(N(i)) ? "y" : "x";
+}
+function $e(i) {
+  return Ee(V(i));
+}
+function Ze(i, e, t) {
+  t === void 0 && (t = !1);
+  const o = ne(i), s = $e(i), l = Ve(s);
+  let n = s === "x" ? o === (t ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top";
+  return e.reference[l] > e.floating[l] && (n = oe(n)), [n, oe(n)];
+}
+function Qe(i) {
+  const e = oe(i);
+  return [fe(i), e, fe(e)];
+}
+function fe(i) {
+  return i.replace(/start|end/g, (e) => Je[e]);
+}
+const Ae = ["left", "right"], Se = ["right", "left"], et = ["top", "bottom"], tt = ["bottom", "top"];
+function it(i, e, t) {
+  switch (i) {
+    case "top":
+    case "bottom":
+      return t ? e ? Se : Ae : e ? Ae : Se;
+    case "left":
+    case "right":
+      return e ? et : tt;
+    default:
+      return [];
+  }
+}
+function ot(i, e, t, o) {
+  const s = ne(i);
+  let l = it(N(i), t === "start", o);
+  return s && (l = l.map((n) => n + "-" + s), e && (l = l.concat(l.map(fe)))), l;
+}
+function oe(i) {
+  return i.replace(/left|right|bottom|top/g, (e) => Xe[e]);
+}
+function st(i) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...i
+  };
+}
+function lt(i) {
+  return typeof i != "number" ? st(i) : {
+    top: i,
+    right: i,
+    bottom: i,
+    left: i
+  };
+}
+function se(i) {
+  const {
+    x: e,
+    y: t,
+    width: o,
+    height: s
+  } = i;
+  return {
+    width: o,
+    height: s,
+    top: t,
+    left: e,
+    right: e + o,
+    bottom: t + s,
+    x: e,
+    y: t
+  };
+}
+function Oe(i, e, t) {
+  let {
+    reference: o,
+    floating: s
+  } = i;
+  const l = V(e), n = $e(e), r = Ve(n), a = N(e), c = l === "y", p = o.x + o.width / 2 - s.width / 2, d = o.y + o.height / 2 - s.height / 2, m = o[r] / 2 - s[r] / 2;
+  let h;
+  switch (a) {
+    case "top":
+      h = {
+        x: p,
+        y: o.y - s.height
+      };
+      break;
+    case "bottom":
+      h = {
+        x: p,
+        y: o.y + o.height
+      };
+      break;
+    case "right":
+      h = {
+        x: o.x + o.width,
+        y: d
+      };
+      break;
+    case "left":
+      h = {
+        x: o.x - s.width,
+        y: d
+      };
+      break;
+    default:
+      h = {
+        x: o.x,
+        y: o.y
+      };
+  }
+  switch (ne(e)) {
+    case "start":
+      h[n] -= m * (t && c ? -1 : 1);
+      break;
+    case "end":
+      h[n] += m * (t && c ? -1 : 1);
+      break;
+  }
+  return h;
+}
+const nt = async (i, e, t) => {
+  const {
+    placement: o = "bottom",
+    strategy: s = "absolute",
+    middleware: l = [],
+    platform: n
+  } = t, r = l.filter(Boolean), a = await (n.isRTL == null ? void 0 : n.isRTL(e));
+  let c = await n.getElementRects({
+    reference: i,
+    floating: e,
+    strategy: s
+  }), {
+    x: p,
+    y: d
+  } = Oe(c, o, a), m = o, h = {}, g = 0;
+  for (let v = 0; v < r.length; v++) {
+    const {
+      name: w,
+      fn: b
+    } = r[v], {
+      x: _,
+      y,
+      data: C,
+      reset: x
+    } = await b({
+      x: p,
+      y: d,
+      initialPlacement: o,
+      placement: m,
+      strategy: s,
+      middlewareData: h,
+      rects: c,
+      platform: n,
+      elements: {
+        reference: i,
+        floating: e
+      }
+    });
+    p = _ ?? p, d = y ?? d, h = {
+      ...h,
+      [w]: {
+        ...h[w],
+        ...C
+      }
+    }, x && g <= 50 && (g++, typeof x == "object" && (x.placement && (m = x.placement), x.rects && (c = x.rects === !0 ? await n.getElementRects({
+      reference: i,
+      floating: e,
+      strategy: s
+    }) : x.rects), {
+      x: p,
+      y: d
+    } = Oe(c, m, a)), v = -1);
+  }
+  return {
+    x: p,
+    y: d,
+    placement: m,
+    strategy: s,
+    middlewareData: h
+  };
+};
+async function De(i, e) {
+  var t;
+  e === void 0 && (e = {});
+  const {
+    x: o,
+    y: s,
+    platform: l,
+    rects: n,
+    elements: r,
+    strategy: a
+  } = i, {
+    boundary: c = "clippingAncestors",
+    rootBoundary: p = "viewport",
+    elementContext: d = "floating",
+    altBoundary: m = !1,
+    padding: h = 0
+  } = le(e, i), g = lt(h), w = r[m ? d === "floating" ? "reference" : "floating" : d], b = se(await l.getClippingRect({
+    element: (t = await (l.isElement == null ? void 0 : l.isElement(w))) == null || t ? w : w.contextElement || await (l.getDocumentElement == null ? void 0 : l.getDocumentElement(r.floating)),
+    boundary: c,
+    rootBoundary: p,
+    strategy: a
+  })), _ = d === "floating" ? {
+    x: o,
+    y: s,
+    width: n.floating.width,
+    height: n.floating.height
+  } : n.reference, y = await (l.getOffsetParent == null ? void 0 : l.getOffsetParent(r.floating)), C = await (l.isElement == null ? void 0 : l.isElement(y)) ? await (l.getScale == null ? void 0 : l.getScale(y)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, x = se(l.convertOffsetParentRelativeRectToViewportRelativeRect ? await l.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: r,
+    rect: _,
+    offsetParent: y,
+    strategy: a
+  }) : _);
+  return {
+    top: (b.top - x.top + g.top) / C.y,
+    bottom: (x.bottom - b.bottom + g.bottom) / C.y,
+    left: (b.left - x.left + g.left) / C.x,
+    right: (x.right - b.right + g.right) / C.x
+  };
+}
+const rt = function(i) {
+  return i === void 0 && (i = {}), {
+    name: "flip",
+    options: i,
+    async fn(e) {
+      var t, o;
+      const {
+        placement: s,
+        middlewareData: l,
+        rects: n,
+        initialPlacement: r,
+        platform: a,
+        elements: c
+      } = e, {
+        mainAxis: p = !0,
+        crossAxis: d = !0,
+        fallbackPlacements: m,
+        fallbackStrategy: h = "bestFit",
+        fallbackAxisSideDirection: g = "none",
+        flipAlignment: v = !0,
+        ...w
+      } = le(i, e);
+      if ((t = l.arrow) != null && t.alignmentOffset)
+        return {};
+      const b = N(s), _ = V(r), y = N(r) === r, C = await (a.isRTL == null ? void 0 : a.isRTL(c.floating)), x = m || (y || !v ? [oe(r)] : Qe(r)), G = g !== "none";
+      !m && G && x.push(...ot(r, v, g, C));
+      const F = [r, ...x], pe = await De(e, w), X = [];
+      let B = ((o = l.flip) == null ? void 0 : o.overflows) || [];
+      if (p && X.push(pe[b]), d) {
+        const D = Ze(s, n, C);
+        X.push(pe[D[0]], pe[D[1]]);
+      }
+      if (B = [...B, {
+        placement: s,
+        overflows: X
+      }], !X.every((D) => D <= 0)) {
+        var ye, xe;
+        const D = (((ye = l.flip) == null ? void 0 : ye.index) || 0) + 1, he = F[D];
+        if (he && (!(d === "alignment" ? _ !== V(he) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        B.every((A) => V(A.placement) === _ ? A.overflows[0] > 0 : !0)))
+          return {
+            data: {
+              index: D,
+              overflows: B
+            },
+            reset: {
+              placement: he
+            }
+          };
+        let K = (xe = B.filter((L) => L.overflows[0] <= 0).sort((L, A) => L.overflows[1] - A.overflows[1])[0]) == null ? void 0 : xe.placement;
+        if (!K)
+          switch (h) {
+            case "bestFit": {
+              var Ce;
+              const L = (Ce = B.filter((A) => {
+                if (G) {
+                  const M = V(A.placement);
+                  return M === _ || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  M === "y";
+                }
+                return !0;
+              }).map((A) => [A.placement, A.overflows.filter((M) => M > 0).reduce((M, Ke) => M + Ke, 0)]).sort((A, M) => A[1] - M[1])[0]) == null ? void 0 : Ce[0];
+              L && (K = L);
+              break;
+            }
+            case "initialPlacement":
+              K = r;
+              break;
+          }
+        if (s !== K)
+          return {
+            reset: {
+              placement: K
+            }
+          };
+      }
+      return {};
+    }
+  };
+}, at = /* @__PURE__ */ new Set(["left", "top"]);
+async function ct(i, e) {
+  const {
+    placement: t,
+    platform: o,
+    elements: s
+  } = i, l = await (o.isRTL == null ? void 0 : o.isRTL(s.floating)), n = N(t), r = ne(t), a = V(t) === "y", c = at.has(n) ? -1 : 1, p = l && a ? -1 : 1, d = le(e, i);
+  let {
+    mainAxis: m,
+    crossAxis: h,
+    alignmentAxis: g
+  } = typeof d == "number" ? {
+    mainAxis: d,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: d.mainAxis || 0,
+    crossAxis: d.crossAxis || 0,
+    alignmentAxis: d.alignmentAxis
+  };
+  return r && typeof g == "number" && (h = r === "end" ? g * -1 : g), a ? {
+    x: h * p,
+    y: m * c
+  } : {
+    x: m * c,
+    y: h * p
+  };
+}
+const dt = function(i) {
+  return i === void 0 && (i = 0), {
+    name: "offset",
+    options: i,
+    async fn(e) {
+      var t, o;
+      const {
+        x: s,
+        y: l,
+        placement: n,
+        middlewareData: r
+      } = e, a = await ct(e, i);
+      return n === ((t = r.offset) == null ? void 0 : t.placement) && (o = r.arrow) != null && o.alignmentOffset ? {} : {
+        x: s + a.x,
+        y: l + a.y,
+        data: {
+          ...a,
+          placement: n
+        }
+      };
+    }
+  };
+}, pt = function(i) {
+  return i === void 0 && (i = {}), {
+    name: "shift",
+    options: i,
+    async fn(e) {
+      const {
+        x: t,
+        y: o,
+        placement: s
+      } = e, {
+        mainAxis: l = !0,
+        crossAxis: n = !1,
+        limiter: r = {
+          fn: (w) => {
+            let {
+              x: b,
+              y: _
+            } = w;
+            return {
+              x: b,
+              y: _
+            };
+          }
+        },
+        ...a
+      } = le(i, e), c = {
+        x: t,
+        y: o
+      }, p = await De(e, a), d = V(N(s)), m = Ee(d);
+      let h = c[m], g = c[d];
+      if (l) {
+        const w = m === "y" ? "top" : "left", b = m === "y" ? "bottom" : "right", _ = h + p[w], y = h - p[b];
+        h = ke(_, h, y);
+      }
+      if (n) {
+        const w = d === "y" ? "top" : "left", b = d === "y" ? "bottom" : "right", _ = g + p[w], y = g - p[b];
+        g = ke(_, g, y);
+      }
+      const v = r.fn({
+        ...e,
+        [m]: h,
+        [d]: g
+      });
+      return {
+        ...v,
+        data: {
+          x: v.x - t,
+          y: v.y - o,
+          enabled: {
+            [m]: l,
+            [d]: n
+          }
+        }
+      };
+    }
+  };
+};
+function re() {
+  return typeof window < "u";
+}
+function j(i) {
+  return Le(i) ? (i.nodeName || "").toLowerCase() : "#document";
+}
+function k(i) {
+  var e;
+  return (i == null || (e = i.ownerDocument) == null ? void 0 : e.defaultView) || window;
+}
+function I(i) {
+  var e;
+  return (e = (Le(i) ? i.ownerDocument : i.document) || window.document) == null ? void 0 : e.documentElement;
+}
+function Le(i) {
+  return re() ? i instanceof Node || i instanceof k(i).Node : !1;
+}
+function S(i) {
+  return re() ? i instanceof Element || i instanceof k(i).Element : !1;
+}
+function T(i) {
+  return re() ? i instanceof HTMLElement || i instanceof k(i).HTMLElement : !1;
+}
+function Pe(i) {
+  return !re() || typeof ShadowRoot > "u" ? !1 : i instanceof ShadowRoot || i instanceof k(i).ShadowRoot;
+}
+const ht = /* @__PURE__ */ new Set(["inline", "contents"]);
+function Y(i) {
+  const {
+    overflow: e,
+    overflowX: t,
+    overflowY: o,
+    display: s
+  } = O(i);
+  return /auto|scroll|overlay|hidden|clip/.test(e + o + t) && !ht.has(s);
+}
+const ut = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function mt(i) {
+  return ut.has(j(i));
+}
+const ft = [":popover-open", ":modal"];
+function ae(i) {
+  return ft.some((e) => {
+    try {
+      return i.matches(e);
+    } catch {
+      return !1;
+    }
+  });
+}
+const gt = ["transform", "translate", "scale", "rotate", "perspective"], bt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], vt = ["paint", "layout", "strict", "content"];
+function ve(i) {
+  const e = we(), t = S(i) ? O(i) : i;
+  return gt.some((o) => t[o] ? t[o] !== "none" : !1) || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || bt.some((o) => (t.willChange || "").includes(o)) || vt.some((o) => (t.contain || "").includes(o));
+}
+function wt(i) {
+  let e = $(i);
+  for (; T(e) && !W(e); ) {
+    if (ve(e))
+      return e;
+    if (ae(e))
+      return null;
+    e = $(e);
+  }
+  return null;
+}
+function we() {
+  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
+}
+const _t = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function W(i) {
+  return _t.has(j(i));
+}
+function O(i) {
+  return k(i).getComputedStyle(i);
+}
+function ce(i) {
+  return S(i) ? {
+    scrollLeft: i.scrollLeft,
+    scrollTop: i.scrollTop
+  } : {
+    scrollLeft: i.scrollX,
+    scrollTop: i.scrollY
+  };
+}
+function $(i) {
+  if (j(i) === "html")
+    return i;
+  const e = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    i.assignedSlot || // DOM Element detected.
+    i.parentNode || // ShadowRoot detected.
+    Pe(i) && i.host || // Fallback.
+    I(i)
+  );
+  return Pe(e) ? e.host : e;
+}
+function ze(i) {
+  const e = $(i);
+  return W(e) ? i.ownerDocument ? i.ownerDocument.body : i.body : T(e) && Y(e) ? e : ze(e);
+}
+function U(i, e, t) {
+  var o;
+  e === void 0 && (e = []), t === void 0 && (t = !0);
+  const s = ze(i), l = s === ((o = i.ownerDocument) == null ? void 0 : o.body), n = k(s);
+  if (l) {
+    const r = ge(n);
+    return e.concat(n, n.visualViewport || [], Y(s) ? s : [], r && t ? U(r) : []);
+  }
+  return e.concat(s, U(s, [], t));
+}
+function ge(i) {
+  return i.parent && Object.getPrototypeOf(i.parent) ? i.frameElement : null;
+}
+function Ne(i) {
+  const e = O(i);
+  let t = parseFloat(e.width) || 0, o = parseFloat(e.height) || 0;
+  const s = T(i), l = s ? i.offsetWidth : t, n = s ? i.offsetHeight : o, r = ie(t) !== l || ie(o) !== n;
+  return r && (t = l, o = n), {
+    width: t,
+    height: o,
+    $: r
+  };
+}
+function _e(i) {
+  return S(i) ? i : i.contextElement;
+}
+function H(i) {
+  const e = _e(i);
+  if (!T(e))
+    return P(1);
+  const t = e.getBoundingClientRect(), {
+    width: o,
+    height: s,
+    $: l
+  } = Ne(e);
+  let n = (l ? ie(t.width) : t.width) / o, r = (l ? ie(t.height) : t.height) / s;
+  return (!n || !Number.isFinite(n)) && (n = 1), (!r || !Number.isFinite(r)) && (r = 1), {
+    x: n,
+    y: r
+  };
+}
+const yt = /* @__PURE__ */ P(0);
+function Re(i) {
+  const e = k(i);
+  return !we() || !e.visualViewport ? yt : {
+    x: e.visualViewport.offsetLeft,
+    y: e.visualViewport.offsetTop
+  };
+}
+function xt(i, e, t) {
+  return e === void 0 && (e = !1), !t || e && t !== k(i) ? !1 : e;
+}
+function R(i, e, t, o) {
+  e === void 0 && (e = !1), t === void 0 && (t = !1);
+  const s = i.getBoundingClientRect(), l = _e(i);
+  let n = P(1);
+  e && (o ? S(o) && (n = H(o)) : n = H(i));
+  const r = xt(l, t, o) ? Re(l) : P(0);
+  let a = (s.left + r.x) / n.x, c = (s.top + r.y) / n.y, p = s.width / n.x, d = s.height / n.y;
+  if (l) {
+    const m = k(l), h = o && S(o) ? k(o) : o;
+    let g = m, v = ge(g);
+    for (; v && o && h !== g; ) {
+      const w = H(v), b = v.getBoundingClientRect(), _ = O(v), y = b.left + (v.clientLeft + parseFloat(_.paddingLeft)) * w.x, C = b.top + (v.clientTop + parseFloat(_.paddingTop)) * w.y;
+      a *= w.x, c *= w.y, p *= w.x, d *= w.y, a += y, c += C, g = k(v), v = ge(g);
+    }
+  }
+  return se({
+    width: p,
+    height: d,
+    x: a,
+    y: c
+  });
+}
+function de(i, e) {
+  const t = ce(i).scrollLeft;
+  return e ? e.left + t : R(I(i)).left + t;
+}
+function Fe(i, e) {
+  const t = i.getBoundingClientRect(), o = t.left + e.scrollLeft - de(i, t), s = t.top + e.scrollTop;
+  return {
+    x: o,
+    y: s
+  };
+}
+function Ct(i) {
+  let {
+    elements: e,
+    rect: t,
+    offsetParent: o,
+    strategy: s
+  } = i;
+  const l = s === "fixed", n = I(o), r = e ? ae(e.floating) : !1;
+  if (o === n || r && l)
+    return t;
+  let a = {
+    scrollLeft: 0,
+    scrollTop: 0
+  }, c = P(1);
+  const p = P(0), d = T(o);
+  if ((d || !d && !l) && ((j(o) !== "body" || Y(n)) && (a = ce(o)), T(o))) {
+    const h = R(o);
+    c = H(o), p.x = h.x + o.clientLeft, p.y = h.y + o.clientTop;
+  }
+  const m = n && !d && !l ? Fe(n, a) : P(0);
+  return {
+    width: t.width * c.x,
+    height: t.height * c.y,
+    x: t.x * c.x - a.scrollLeft * c.x + p.x + m.x,
+    y: t.y * c.y - a.scrollTop * c.y + p.y + m.y
+  };
+}
+function kt(i) {
+  return Array.from(i.getClientRects());
+}
+function At(i) {
+  const e = I(i), t = ce(i), o = i.ownerDocument.body, s = z(e.scrollWidth, e.clientWidth, o.scrollWidth, o.clientWidth), l = z(e.scrollHeight, e.clientHeight, o.scrollHeight, o.clientHeight);
+  let n = -t.scrollLeft + de(i);
+  const r = -t.scrollTop;
+  return O(o).direction === "rtl" && (n += z(e.clientWidth, o.clientWidth) - s), {
+    width: s,
+    height: l,
+    x: n,
+    y: r
+  };
+}
+const Te = 25;
+function St(i, e) {
+  const t = k(i), o = I(i), s = t.visualViewport;
+  let l = o.clientWidth, n = o.clientHeight, r = 0, a = 0;
+  if (s) {
+    l = s.width, n = s.height;
+    const p = we();
+    (!p || p && e === "fixed") && (r = s.offsetLeft, a = s.offsetTop);
+  }
+  const c = de(o);
+  if (c <= 0) {
+    const p = o.ownerDocument, d = p.body, m = getComputedStyle(d), h = p.compatMode === "CSS1Compat" && parseFloat(m.marginLeft) + parseFloat(m.marginRight) || 0, g = Math.abs(o.clientWidth - d.clientWidth - h);
+    g <= Te && (l -= g);
+  } else c <= Te && (l += c);
+  return {
+    width: l,
+    height: n,
+    x: r,
+    y: a
+  };
+}
+const Ot = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+function Pt(i, e) {
+  const t = R(i, !0, e === "fixed"), o = t.top + i.clientTop, s = t.left + i.clientLeft, l = T(i) ? H(i) : P(1), n = i.clientWidth * l.x, r = i.clientHeight * l.y, a = s * l.x, c = o * l.y;
+  return {
+    width: n,
+    height: r,
+    x: a,
+    y: c
+  };
+}
+function Ie(i, e, t) {
+  let o;
+  if (e === "viewport")
+    o = St(i, t);
+  else if (e === "document")
+    o = At(I(i));
+  else if (S(e))
+    o = Pt(e, t);
+  else {
+    const s = Re(i);
+    o = {
+      x: e.x - s.x,
+      y: e.y - s.y,
+      width: e.width,
+      height: e.height
+    };
+  }
+  return se(o);
+}
+function Be(i, e) {
+  const t = $(i);
+  return t === e || !S(t) || W(t) ? !1 : O(t).position === "fixed" || Be(t, e);
+}
+function Tt(i, e) {
+  const t = e.get(i);
+  if (t)
+    return t;
+  let o = U(i, [], !1).filter((r) => S(r) && j(r) !== "body"), s = null;
+  const l = O(i).position === "fixed";
+  let n = l ? $(i) : i;
+  for (; S(n) && !W(n); ) {
+    const r = O(n), a = ve(n);
+    !a && r.position === "fixed" && (s = null), (l ? !a && !s : !a && r.position === "static" && !!s && Ot.has(s.position) || Y(n) && !a && Be(i, n)) ? o = o.filter((p) => p !== n) : s = r, n = $(n);
+  }
+  return e.set(i, o), o;
+}
+function It(i) {
+  let {
+    element: e,
+    boundary: t,
+    rootBoundary: o,
+    strategy: s
+  } = i;
+  const n = [...t === "clippingAncestors" ? ae(e) ? [] : Tt(e, this._c) : [].concat(t), o], r = n[0], a = n.reduce((c, p) => {
+    const d = Ie(e, p, s);
+    return c.top = z(d.top, c.top), c.right = te(d.right, c.right), c.bottom = te(d.bottom, c.bottom), c.left = z(d.left, c.left), c;
+  }, Ie(e, r, s));
+  return {
+    width: a.right - a.left,
+    height: a.bottom - a.top,
+    x: a.left,
+    y: a.top
+  };
+}
+function Mt(i) {
+  const {
+    width: e,
+    height: t
+  } = Ne(i);
+  return {
+    width: e,
+    height: t
+  };
+}
+function Et(i, e, t) {
+  const o = T(e), s = I(e), l = t === "fixed", n = R(i, !0, l, e);
+  let r = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const a = P(0);
+  function c() {
+    a.x = de(s);
+  }
+  if (o || !o && !l)
+    if ((j(e) !== "body" || Y(s)) && (r = ce(e)), o) {
+      const h = R(e, !0, l, e);
+      a.x = h.x + e.clientLeft, a.y = h.y + e.clientTop;
+    } else s && c();
+  l && !o && s && c();
+  const p = s && !o && !l ? Fe(s, r) : P(0), d = n.left + r.scrollLeft - a.x - p.x, m = n.top + r.scrollTop - a.y - p.y;
+  return {
+    x: d,
+    y: m,
+    width: n.width,
+    height: n.height
+  };
+}
+function ue(i) {
+  return O(i).position === "static";
+}
+function Me(i, e) {
+  if (!T(i) || O(i).position === "fixed")
+    return null;
+  if (e)
+    return e(i);
+  let t = i.offsetParent;
+  return I(i) === t && (t = t.ownerDocument.body), t;
+}
+function He(i, e) {
+  const t = k(i);
+  if (ae(i))
+    return t;
+  if (!T(i)) {
+    let s = $(i);
+    for (; s && !W(s); ) {
+      if (S(s) && !ue(s))
+        return s;
+      s = $(s);
+    }
+    return t;
+  }
+  let o = Me(i, e);
+  for (; o && mt(o) && ue(o); )
+    o = Me(o, e);
+  return o && W(o) && ue(o) && !ve(o) ? t : o || wt(i) || t;
+}
+const Vt = async function(i) {
+  const e = this.getOffsetParent || He, t = this.getDimensions, o = await t(i.floating);
+  return {
+    reference: Et(i.reference, await e(i.floating), i.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: o.width,
+      height: o.height
+    }
+  };
+};
+function $t(i) {
+  return O(i).direction === "rtl";
+}
+const Dt = {
+  convertOffsetParentRelativeRectToViewportRelativeRect: Ct,
+  getDocumentElement: I,
+  getClippingRect: It,
+  getOffsetParent: He,
+  getElementRects: Vt,
+  getClientRects: kt,
+  getDimensions: Mt,
+  getScale: H,
+  isElement: S,
+  isRTL: $t
+};
+function We(i, e) {
+  return i.x === e.x && i.y === e.y && i.width === e.width && i.height === e.height;
+}
+function Lt(i, e) {
+  let t = null, o;
+  const s = I(i);
+  function l() {
+    var r;
+    clearTimeout(o), (r = t) == null || r.disconnect(), t = null;
+  }
+  function n(r, a) {
+    r === void 0 && (r = !1), a === void 0 && (a = 1), l();
+    const c = i.getBoundingClientRect(), {
+      left: p,
+      top: d,
+      width: m,
+      height: h
+    } = c;
+    if (r || e(), !m || !h)
+      return;
+    const g = J(d), v = J(s.clientWidth - (p + m)), w = J(s.clientHeight - (d + h)), b = J(p), y = {
+      rootMargin: -g + "px " + -v + "px " + -w + "px " + -b + "px",
+      threshold: z(0, te(1, a)) || 1
+    };
+    let C = !0;
+    function x(G) {
+      const F = G[0].intersectionRatio;
+      if (F !== a) {
+        if (!C)
+          return n();
+        F ? n(!1, F) : o = setTimeout(() => {
+          n(!1, 1e-7);
+        }, 1e3);
+      }
+      F === 1 && !We(c, i.getBoundingClientRect()) && n(), C = !1;
+    }
+    try {
+      t = new IntersectionObserver(x, {
+        ...y,
+        // Handle <iframe>s
+        root: s.ownerDocument
+      });
+    } catch {
+      t = new IntersectionObserver(x, y);
+    }
+    t.observe(i);
+  }
+  return n(!0), l;
+}
+function q(i, e, t, o) {
+  o === void 0 && (o = {});
+  const {
+    ancestorScroll: s = !0,
+    ancestorResize: l = !0,
+    elementResize: n = typeof ResizeObserver == "function",
+    layoutShift: r = typeof IntersectionObserver == "function",
+    animationFrame: a = !1
+  } = o, c = _e(i), p = s || l ? [...c ? U(c) : [], ...U(e)] : [];
+  p.forEach((b) => {
+    s && b.addEventListener("scroll", t, {
+      passive: !0
+    }), l && b.addEventListener("resize", t);
+  });
+  const d = c && r ? Lt(c, t) : null;
+  let m = -1, h = null;
+  n && (h = new ResizeObserver((b) => {
+    let [_] = b;
+    _ && _.target === c && h && (h.unobserve(e), cancelAnimationFrame(m), m = requestAnimationFrame(() => {
+      var y;
+      (y = h) == null || y.observe(e);
+    })), t();
+  }), c && !a && h.observe(c), h.observe(e));
+  let g, v = a ? R(i) : null;
+  a && w();
+  function w() {
+    const b = R(i);
+    v && !We(v, b) && t(), v = b, g = requestAnimationFrame(w);
+  }
+  return t(), () => {
+    var b;
+    p.forEach((_) => {
+      s && _.removeEventListener("scroll", t), l && _.removeEventListener("resize", t);
+    }), d == null || d(), (b = h) == null || b.disconnect(), h = null, a && cancelAnimationFrame(g);
+  };
+}
+const Z = dt, Q = pt, me = rt, ee = (i, e, t) => {
+  const o = /* @__PURE__ */ new Map(), s = {
+    platform: Dt,
+    ...t
+  }, l = {
+    ...s.platform,
+    _c: o
+  };
+  return nt(i, e, {
+    ...s,
+    platform: l
+  });
+};
+let E = 0;
+const f = {
+  debug: (i, ...e) => {
+    E++, console.log(
+      `%c[MultiSelect ${E}]%c ${i}`,
+      "color: #0ea5e9; font-weight: bold;",
+      "color: inherit;",
+      ...e
+    );
+  },
+  info: (i, ...e) => {
+    E++, console.info(
+      `%c[MultiSelect ${E}]%c ${i}`,
+      "color: #10b981; font-weight: bold;",
+      "color: inherit;",
+      ...e
+    );
+  },
+  warn: (i, ...e) => {
+    E++, console.warn(
+      `%c[MultiSelect ${E}]%c ${i}`,
+      "color: #f59e0b; font-weight: bold;",
+      "color: inherit;",
+      ...e
+    );
+  },
+  error: (i, ...e) => {
+    E++, console.error(
+      `%c[MultiSelect ${E}]%c ${i}`,
+      "color: #ef4444; font-weight: bold;",
+      "color: inherit;",
+      ...e
+    );
+  }
+};
+class zt {
+  constructor(e, t = {}) {
+    u(this, "element");
+    u(this, "instanceId");
+    u(this, "options");
+    u(this, "isOpen", !1);
+    u(this, "selectedValues", /* @__PURE__ */ new Set());
+    u(this, "selectedOptions", /* @__PURE__ */ new Map());
+    u(this, "allOptions", []);
+    u(this, "filteredOptions", []);
+    u(this, "hiddenInputs", []);
+    u(this, "focusedIndex", -1);
+    u(this, "searchTerm", "");
+    u(this, "isLoading", !1);
+    u(this, "showSelectedPopover", !1);
+    u(this, "selectedPopoverPlacement", null);
+    u(this, "dropdownPlacement", null);
+    // Floating UI cleanup functions
+    u(this, "dropdownCleanup", null);
+    u(this, "hintCleanup", null);
+    u(this, "selectedPopoverCleanup", null);
+    // Pill tooltip storage
+    u(this, "pillTooltips", /* @__PURE__ */ new Map());
+    u(this, "pillTooltipCleanups", /* @__PURE__ */ new Map());
+    // DOM elements
+    u(this, "input");
+    u(this, "dropdown");
+    u(this, "pillsContainer");
+    u(this, "countBadge");
+    u(this, "hint");
+    u(this, "selectedPopover");
+    this.element = e, this.instanceId = `MS-${Math.random().toString(36).substr(2, 9)}`, this.options = {
+      // String options
+      searchHint: e.dataset.searchHint || "",
+      searchPlaceholder: e.dataset.searchPlaceholder || "Search...",
+      dropdownMinWidth: e.dataset.dropdownMinWidth || void 0,
+      pillsDisplayMode: e.dataset.pillsDisplayMode || "pills",
+      pillsPosition: e.dataset.pillsPosition || "bottom",
+      pillsThresholdMode: e.dataset.pillsThresholdMode || "count",
+      maxHeight: e.dataset.maxHeight || "20rem",
+      emptyMessage: e.dataset.emptyMessage || "No results found",
+      loadingMessage: e.dataset.loadingMessage || "Loading...",
+      searchInputMode: e.dataset.searchInputMode || "normal",
+      // Number options
+      pillsThreshold: e.dataset.pillsThreshold ? parseInt(e.dataset.pillsThreshold) : void 0,
+      minSearchLength: parseInt(e.dataset.minSearchLength || "0") || 0,
+      // Boolean options (internal names with 'is' prefix)
+      isMultipleEnabled: e.dataset.multiple !== "false",
+      isGroupsAllowed: e.dataset.allowGroups !== "false",
+      isSelectAllAllowed: e.dataset.allowSelectAll !== "false",
+      isClearAllAllowed: e.dataset.allowClearAll !== "false",
+      isCheckboxesShown: e.dataset.showCheckboxes !== "false",
+      isActionsSticky: e.dataset.stickyActions !== "false",
+      isCloseOnSelect: e.dataset.closeOnSelect === "true",
+      isPlacementLocked: e.dataset.lockPlacement !== "false",
+      isSearchEnabled: e.dataset.enableSearch !== "false",
+      isAddNewAllowed: e.dataset.allowAddNew === "true",
+      isCountBadgeShown: e.dataset.showCountBadge === "true",
+      // Data and callbacks
+      options: [],
+      container: void 0,
+      // Override with provided options
+      ...t
+    }, this.init();
+  }
+  // ========================================================================
+  // DATA EXTRACTION METHODS (following svelte-treeview pattern)
+  // ========================================================================
+  /**
+   * Extract value/ID from item
+   * Precedence: tuple[0] -> valueMember -> getValueCallback -> '[N/A]'
+   */
+  getItemValue(e) {
+    return Array.isArray(e) && e.length === 2 ? e[0] : this.options.valueMember && e[this.options.valueMember] !== void 0 ? e[this.options.valueMember] : this.options.getValueCallback ? this.options.getValueCallback(e) : "[N/A]";
+  }
+  /**
+   * Extract display value from item
+   * Precedence: tuple[1] -> displayValueMember -> getDisplayValueCallback -> '[N/A]'
+   */
+  getItemDisplayValue(e) {
+    return Array.isArray(e) && e.length === 2 ? String(e[1]) : this.options.displayValueMember && e[this.options.displayValueMember] !== void 0 ? String(e[this.options.displayValueMember]) : this.options.getDisplayValueCallback ? this.options.getDisplayValueCallback(e) : "[N/A]";
+  }
+  /**
+   * Extract search value from item
+   * Precedence: searchValueMember -> getSearchValueCallback -> displayValue
+   */
+  getItemSearchValue(e) {
+    return this.options.searchValueMember && e[this.options.searchValueMember] !== void 0 ? String(e[this.options.searchValueMember]) : this.options.getSearchValueCallback ? this.options.getSearchValueCallback(e) : this.getItemDisplayValue(e);
+  }
+  /**
+   * Extract icon from item
+   */
+  getItemIcon(e) {
+    if (!Array.isArray(e)) {
+      if (this.options.iconMember && e[this.options.iconMember] !== void 0)
+        return String(e[this.options.iconMember]);
+      if (this.options.getIconCallback)
+        return this.options.getIconCallback(e);
+    }
+  }
+  /**
+   * Extract subtitle from item
+   */
+  getItemSubtitle(e) {
+    if (!Array.isArray(e)) {
+      if (this.options.subtitleMember && e[this.options.subtitleMember] !== void 0)
+        return String(e[this.options.subtitleMember]);
+      if (this.options.getSubtitleCallback)
+        return this.options.getSubtitleCallback(e);
+    }
+  }
+  /**
+   * Extract group from item
+   */
+  getItemGroup(e) {
+    if (!Array.isArray(e)) {
+      if (this.options.groupMember && e[this.options.groupMember] !== void 0)
+        return String(e[this.options.groupMember]);
+      if (this.options.getGroupCallback)
+        return this.options.getGroupCallback(e);
+    }
+  }
+  /**
+   * Extract disabled state from item
+   */
+  getItemDisabled(e) {
+    return Array.isArray(e) ? !1 : this.options.disabledMember && e[this.options.disabledMember] !== void 0 ? !!e[this.options.disabledMember] : this.options.getDisabledCallback ? this.options.getDisabledCallback(e) : !1;
+  }
+  init() {
+    this.parseOptions(), this.buildHTML(), this.attachEvents(), this.parseInitialSelection(), f.debug(`Initialized [${this.instanceId}] with options:`, {
+      placeholder: this.options.searchPlaceholder,
+      totalOptions: this.allOptions.length,
+      isCloseOnSelect: this.options.isCloseOnSelect,
+      dataAttribute: this.element.dataset.closeOnSelect,
+      isSelectAllAllowed: this.options.isSelectAllAllowed,
+      isClearAllAllowed: this.options.isClearAllAllowed
+    });
+  }
+  parseOptions() {
+    const e = this.element.dataset.options;
+    if (e)
+      try {
+        this.allOptions = JSON.parse(e);
+      } catch (t) {
+        console.error("[MultiSelect] Failed to parse data-options:", t), this.allOptions = [];
+      }
+    else this.options.options && (this.allOptions = this.options.options);
+    this.filteredOptions = [...this.allOptions];
+  }
+  buildHTML() {
+    const e = this.options.container || document.body;
+    this.element.classList.add("ml"), (!this.options.isCheckboxesShown || !this.options.isMultipleEnabled) && this.element.classList.add("ml--no-checkboxes");
+    const t = document.createElement("div");
+    t.className = "ml__input-wrapper", this.input = document.createElement("input"), this.input.type = "text", this.input.className = "ml__input", this.input.placeholder = this.options.searchPlaceholder, this.input.autocomplete = "off", this.options.searchInputMode === "readonly" ? this.input.readOnly = !0 : this.options.searchInputMode === "hidden" && (this.input.style.display = "none");
+    const o = document.createElement("span");
+    o.className = "ml__toggle", o.innerHTML = "▼", this.countBadge = document.createElement("span"), this.countBadge.className = "ml__count-badge", this.countBadge.style.display = "none", t.appendChild(this.input), t.appendChild(this.countBadge), t.appendChild(o), this.pillsContainer = document.createElement("div"), this.pillsContainer.className = "ml__pills", this.element.appendChild(t), this.element.appendChild(this.pillsContainer), this.dropdown = document.createElement("div"), this.dropdown.className = "ml__dropdown", e.appendChild(this.dropdown), this.options.searchHint && (this.hint = document.createElement("div"), this.hint.className = "ml__hint", this.hint.textContent = this.options.searchHint, e.appendChild(this.hint)), this.selectedPopover = document.createElement("div"), this.selectedPopover.className = "ml__selected-popover", e.appendChild(this.selectedPopover), this.renderDropdown();
+  }
+  renderDropdown() {
+    let e = "";
+    if (this.isLoading) {
+      e += '<div class="ml__loader">', e += '<div class="pa-loader pa-loader--sm"></div>', e += `<div class="ml__loading-text">${this.options.loadingMessage}</div>`, e += "</div>", this.dropdown.innerHTML = e;
+      return;
+    }
+    if (this.options.isMultipleEnabled && (this.options.isSelectAllAllowed || this.options.isClearAllAllowed)) {
+      const t = this.options.isActionsSticky ? " ml__actions--sticky" : "";
+      e += `<div class="ml__actions${t}">`, this.options.isSelectAllAllowed && (e += '<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'), this.options.isClearAllAllowed && (e += '<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'), e += "</div>";
+    }
+    if (e += '<div class="ml__options">', this.filteredOptions.length === 0)
+      e += `<div class="ml__empty">${this.options.emptyMessage}</div>`;
+    else if (this.options.isGroupsAllowed) {
+      const t = this.groupOptions(this.filteredOptions);
+      Object.keys(t).forEach((o) => {
+        e += '<div class="ml__group">', o !== "__ungrouped__" && (e += `<div class="ml__group-label">${o}</div>`), t[o].forEach((s, l) => {
+          e += this.renderOption(s, l);
+        }), e += "</div>";
+      });
+    } else
+      this.filteredOptions.forEach((t, o) => {
+        e += this.renderOption(t, o);
+      });
+    e += "</div>", this.dropdown.innerHTML = e;
+  }
+  renderOption(e, t) {
+    const o = this.getItemValue(e), s = this.getItemDisplayValue(e), l = this.getItemIcon(e), n = this.getItemSubtitle(e), r = this.getItemDisabled(e), a = this.selectedValues.has(String(o)), c = t === this.focusedIndex, p = ["ml__option"];
+    a && p.push("ml__option--selected"), c && p.push("ml__option--focused"), r && p.push("ml__option--disabled");
+    let d = `<div class="${p.join(" ")}" data-value="${o}" data-index="${t}">`;
+    return this.options.isCheckboxesShown && this.options.isMultipleEnabled && (d += `<input type="checkbox" class="ml__checkbox" ${a ? "checked" : ""} ${r ? "disabled" : ""}>`), d += '<div class="ml__option-content">', l && (d += `<span class="ml__option-icon">${l}</span>`), d += '<div class="ml__option-text">', d += `<div class="ml__option-title">${this.highlightMatch(s, this.searchTerm)}</div>`, n && (d += `<div class="ml__option-subtitle">${n}</div>`), d += "</div>", d += "</div>", d += "</div>", d;
+  }
+  highlightMatch(e, t) {
+    if (!t) return e;
+    const o = new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    return e.replace(o, "<mark>$1</mark>");
+  }
+  groupOptions(e) {
+    const t = {};
+    return e.forEach((o) => {
+      const s = this.getItemGroup(o) || "__ungrouped__";
+      t[s] || (t[s] = []), t[s].push(o);
+    }), t;
+  }
+  renderPills() {
+    this.destroyAllPillTooltips();
+    const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size;
+    if (!this.options.isMultipleEnabled) {
+      this.pillsContainer.innerHTML = "", this.countBadge.style.display = "none";
+      const l = e[0] ? this.getItemDisplayValue(e[0]) : void 0;
+      f.warn(`[${this.instanceId}] renderPills() single-select mode`, {
+        isOpen: this.isOpen,
+        count: t,
+        selectedOptionsLength: e.length,
+        willSetValue: !this.isOpen && t > 0 && e.length > 0,
+        selectedLabel: l
+      }), !this.isOpen && t > 0 && e.length > 0 ? (f.info(`[${this.instanceId}] ✅ SETTING input.value = "${l}"`), this.input.value = l, f.info(`[${this.instanceId}] 🔍 VERIFY input.value = "${this.input.value}"`)) : this.isOpen ? f.info(`[${this.instanceId}] ⏭️ SKIPPING input update (dropdown is open)`) : (f.info(`[${this.instanceId}] ❌ CLEARING input.value (no selection)`), this.input.value = "");
+      return;
+    }
+    let o = this.options.pillsDisplayMode;
+    if (this.options.pillsThreshold !== null && t > this.options.pillsThreshold && (o = this.options.pillsThresholdMode || "count"), !this.isOpen)
+      if (t > 0 && o === "count") {
+        const l = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
+        this.input.placeholder = l;
+      } else
+        this.input.placeholder = this.options.searchPlaceholder;
+    if (this.options.isCountBadgeShown && t > 0 ? (this.countBadge.textContent = `[${t}]`, this.countBadge.style.display = "") : this.countBadge.style.display = "none", o === "pills")
+      this.pillsContainer.className = `ml__pills ml__pills--${this.options.pillsPosition}`, this.pillsContainer.innerHTML = e.map((l) => {
+        const n = this.getItemValue(l), r = this.getItemDisplayValue(l);
+        return `
+                <div class="ml__pill">
+                    <span class="ml__pill-text">${r}</span>
+                    <button type="button" class="ml__pill-remove" data-value="${n}" aria-label="Remove ${r}"></button>
+                </div>
+            `;
+      }).join("");
+    else if (o === "partial") {
+      this.pillsContainer.className = `ml__pills ml__pills--${this.options.pillsPosition}`;
+      const l = this.options.pillsMaxVisible || 3, n = e.slice(0, l), r = t - l, a = n.map((p) => {
+        const d = this.getItemValue(p), m = this.getItemDisplayValue(p);
+        return `
+                <div class="ml__pill">
+                    <span class="ml__pill-text">${m}</span>
+                    <button type="button" class="ml__pill-remove" data-value="${d}" aria-label="Remove ${m}"></button>
+                </div>
+            `;
+      }).join("");
+      let c = "";
+      r > 0 && (c = `
+                    <div class="ml__pill ml__pill--more" data-action="show-selected">
+                        <span class="ml__pill-text">${this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`}</span>
+                        <button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
+                    </div>
+                `), this.pillsContainer.innerHTML = a + c;
+    } else if (this.pillsContainer.className = `ml__count-display ml__count-display--${this.options.pillsPosition}`, t > 0) {
+      const l = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
+      this.pillsContainer.innerHTML = `
+                    <div class="ml__count-badge-wrapper">
+                        <button type="button" class="ml__count-text" data-action="show-selected">
+                            ${l}
+                        </button>
+                        <button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
+                    </div>
+                `;
+    } else
+      this.pillsContainer.innerHTML = "";
+    this.attachPillTooltips();
+  }
+  attachEvents() {
+    this.input.addEventListener("mousedown", (e) => {
+      this.isOpen || e.stopPropagation();
+    }), this.input.addEventListener("focus", () => this.open()), this.input.addEventListener("input", (e) => {
+      const t = e.target.value;
+      this.options.isSearchEnabled && !this.isOpen && this.open(), this.handleSearch(t);
+    }), this.input.addEventListener("keydown", (e) => this.handleKeydown(e)), setTimeout(() => {
+      document.addEventListener("click", (e) => this.handleClickOutside(e));
+    }, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.pillsContainer.addEventListener("mousedown", (e) => {
+      e.target.closest(".ml__count-text") && !this.showSelectedPopover && e.stopPropagation();
+    }), this.pillsContainer.addEventListener("click", (e) => this.handlePillClick(e)), this.countBadge.addEventListener("mousedown", (e) => {
+      this.showSelectedPopover || e.stopPropagation();
+    }), this.countBadge.addEventListener("click", (e) => {
+      e.stopPropagation(), this.toggleSelectedPopover();
+    }), this.selectedPopover.addEventListener("click", (e) => this.handleSelectedPopoverClick(e));
+  }
+  async handleSearch(e) {
+    if (this.searchTerm = e, !!this.options.isSearchEnabled)
+      if (this.options.searchCallback) {
+        if (e.length < this.options.minSearchLength) {
+          this.filteredOptions = [], this.allOptions = [], this.renderDropdown();
+          return;
+        }
+        this.isLoading = !0, this.renderDropdown(), f.debug(`[${this.instanceId}] Loading data for search term:`, e);
+        try {
+          const t = await this.options.searchCallback(e);
+          this.searchTerm === e && (this.allOptions = t || [], this.filteredOptions = [...this.allOptions], this.isLoading = !1, this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown(), f.debug(`[${this.instanceId}] Loaded ${this.allOptions.length} results`));
+        } catch (t) {
+          f.error(`[${this.instanceId}] Error loading data:`, t), this.isLoading = !1, this.filteredOptions = [], this.allOptions = [], this.renderDropdown();
+        }
+      } else
+        e ? this.filteredOptions = this.allOptions.filter((t) => this.getItemSearchValue(t).toLowerCase().includes(e.toLowerCase())) : this.filteredOptions = [...this.allOptions], this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown();
+  }
+  handleKeydown(e) {
+    if (!this.isOpen) {
+      (e.key === "Enter" || e.key === "ArrowDown") && (e.preventDefault(), this.open());
+      return;
+    }
+    if (!this.options.isSearchEnabled) {
+      const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete", o = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter", "Escape", "Tab"].includes(e.key);
+      if (t && !o) {
+        e.preventDefault();
+        return;
+      }
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this.focusNext();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this.focusPrevious();
+        break;
+      case "Enter":
+        e.preventDefault(), this.focusedIndex >= 0 ? this.toggleOption(this.filteredOptions[this.focusedIndex]) : this.options.isAddNewAllowed && this.options.addNewCallback && this.input.value.trim() && this.handleAddNew(this.input.value.trim());
+        break;
+      case "Escape":
+        e.preventDefault(), this.close();
+        break;
+      case "Tab":
+        this.close();
+        break;
+      case "PageUp":
+        e.preventDefault(), this.focusPageUp();
+        break;
+      case "PageDown":
+        e.preventDefault(), this.focusPageDown();
+        break;
+      case "Home":
+        e.preventDefault(), this.focusFirst();
+        break;
+      case "End":
+        e.preventDefault(), this.focusLast();
+        break;
+    }
+  }
+  handleDropdownClick(e) {
+    f.debug(`[${this.instanceId}] Dropdown clicked`, { target: e.target.className }), e.stopPropagation();
+    const t = e.target.closest("[data-action]");
+    if (t) {
+      e.preventDefault();
+      const s = t.dataset.action;
+      f.debug(`[${this.instanceId}] Action button clicked:`, s), s === "select-all" ? this.selectAll() : s === "clear-all" && this.clearAll();
+      return;
+    }
+    const o = e.target.closest(".ml__option");
+    if (o && !o.classList.contains("ml__option--disabled")) {
+      e.preventDefault();
+      const s = o.dataset.value, l = this.filteredOptions.find((n) => String(this.getItemValue(n)) === s);
+      f.debug(`[${this.instanceId}] Option clicked:`, {
+        value: s,
+        closeOnSelect: this.options.isCloseOnSelect,
+        placeholder: this.options.searchPlaceholder
+      }), l && this.toggleOption(l);
+    }
+  }
+  handlePillClick(e) {
+    if (e.target.closest(".ml__count-clear")) {
+      e.preventDefault(), e.stopPropagation(), f.debug(`[${this.instanceId}] Count clear button clicked`), this.clearAll();
+      return;
+    }
+    if (e.target.closest(".ml__count-text")) {
+      e.preventDefault(), e.stopPropagation(), this.toggleSelectedPopover();
+      return;
+    }
+    const s = e.target.closest(".ml__pill-remove");
+    if (s) {
+      if (e.preventDefault(), e.stopPropagation(), s.dataset.action === "remove-hidden") {
+        f.debug(`[${this.instanceId}] Remove hidden items button clicked`);
+        const a = this.options.pillsMaxVisible || 3;
+        Array.from(this.selectedOptions.values()).slice(a).forEach((d) => this.deselectOption(d));
+        return;
+      }
+      const n = s.dataset.value, r = this.selectedOptions.get(n);
+      r && this.deselectOption(r);
+      return;
+    }
+    if (e.target.closest(".ml__pill--more") && !e.target.closest(".ml__pill-remove")) {
+      e.preventDefault(), e.stopPropagation(), f.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`), this.toggleSelectedPopover();
+      return;
+    }
+  }
+  handleClickOutside(e) {
+    var s;
+    const t = e.composedPath();
+    if (this.showSelectedPopover && !t.some(
+      (n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest(".ml__count-text"))
+    )) {
+      f.debug(`[${this.instanceId}] Closing selected popover due to click outside`), this.hideSelectedPopover();
+      return;
+    }
+    if (!this.isOpen) return;
+    const o = t.some(
+      (l) => l instanceof Node && (this.element.contains(l) || this.dropdown.contains(l) || this.hint && this.hint.contains(l))
+    );
+    f.debug(`[${this.instanceId}] handleClickOutside`, {
+      target: e.target.className,
+      targetTag: e.target.tagName,
+      clickedInside: o,
+      pathLength: t.length,
+      firstInPath: (s = t[0]) == null ? void 0 : s.tagName,
+      elementContains: t.some((l) => l instanceof Node && this.element.contains(l)),
+      dropdownContains: t.some((l) => l instanceof Node && this.dropdown.contains(l)),
+      isConnected: this.dropdown.isConnected
+    }), o || (f.warn(`[${this.instanceId}] Closing dropdown due to click outside`), this.close());
+  }
+  focusNext() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = (this.focusedIndex + 1) % this.filteredOptions.length, this.renderDropdown(), this.scrollToFocused());
+  }
+  focusPrevious() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = this.focusedIndex <= 0 ? this.filteredOptions.length - 1 : this.focusedIndex - 1, this.renderDropdown(), this.scrollToFocused());
+  }
+  focusFirst() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = 0, this.renderDropdown(), this.scrollToFocused());
+  }
+  focusLast() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = this.filteredOptions.length - 1, this.renderDropdown(), this.scrollToFocused());
+  }
+  focusPageUp() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = Math.max(0, this.focusedIndex - 10), this.renderDropdown(), this.scrollToFocused());
+  }
+  focusPageDown() {
+    this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 10), this.renderDropdown(), this.scrollToFocused());
+  }
+  scrollToFocused() {
+    const e = this.dropdown.querySelector(".ml__option--focused");
+    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }
+  toggleOption(e) {
+    const t = this.getItemValue(e), o = String(t);
+    if (f.debug(`[${this.instanceId}] toggleOption called`, { value: t, multiple: this.options.isMultipleEnabled }), !this.options.isMultipleEnabled) {
+      this.selectedValues.has(o) ? (f.debug(`[${this.instanceId}] Deselecting option in single-select mode`, { value: t }), this.deselectOption(e)) : (f.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`, { value: t }), this.selectedValues.clear(), this.selectedOptions.clear(), this.selectOption(e)), f.info(`[${this.instanceId}] ❌ Closing dropdown (single-select mode)`), this.close();
+      return;
+    }
+    this.selectedValues.has(o) ? (f.debug(`[${this.instanceId}] Deselecting option`, { value: t }), this.deselectOption(e)) : (f.debug(`[${this.instanceId}] Selecting option`, { value: t }), this.selectOption(e)), f.debug(`[${this.instanceId}] Checking closeOnSelect`, {
+      closeOnSelect: this.options.isCloseOnSelect,
+      willClose: this.options.isCloseOnSelect === !0,
+      placeholder: this.options.searchPlaceholder
+    }), this.options.isCloseOnSelect ? (f.info(`[${this.instanceId}] ❌ Closing dropdown (closeOnSelect=true)`), this.close()) : f.info(`[${this.instanceId}] ✅ Keeping dropdown open (closeOnSelect=false)`);
+  }
+  async handleAddNew(e) {
+    if (this.options.addNewCallback)
+      try {
+        f.debug(`[${this.instanceId}] Adding new option:`, e);
+        const t = await this.options.addNewCallback(e);
+        this.allOptions.push(t), this.filteredOptions.push(t), this.selectOption(t), this.input.value = "", this.renderDropdown(), this.renderPills(), this.options.isCloseOnSelect && this.close();
+      } catch (t) {
+        f.error(`[${this.instanceId}] Error adding new option:`, t);
+      }
+  }
+  selectOption(e) {
+    const t = this.getItemValue(e), o = String(t);
+    this.selectedValues.add(o), this.selectedOptions.set(o, e), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.selectCallback && this.options.selectCallback(e), this.options.changeCallback && this.options.changeCallback(this.getSelected());
+  }
+  deselectOption(e) {
+    const t = this.getItemValue(e), o = String(t);
+    this.selectedValues.delete(o), this.selectedOptions.delete(o), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.deselectCallback && this.options.deselectCallback(e), this.options.changeCallback && this.options.changeCallback(this.getSelected());
+  }
+  selectAll() {
+    this.filteredOptions.forEach((e) => {
+      if (!this.getItemDisabled(e)) {
+        const t = this.getItemValue(e), o = String(t);
+        this.selectedValues.add(o), this.selectedOptions.set(o, e);
+      }
+    }), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.changeCallback && this.options.changeCallback(this.getSelected());
+  }
+  clearAll() {
+    this.selectedValues.clear(), this.selectedOptions.clear(), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.changeCallback && this.options.changeCallback(this.getSelected());
+  }
+  open() {
+    f.debug(`[${this.instanceId}] open() called`, { isOpen: this.isOpen }), !this.isOpen && (this.isOpen = !0, this.element.classList.add("ml--open"), this.dropdown.classList.add("ml__dropdown--visible"), f.info(`[${this.instanceId}] Dropdown opened`), this.input.placeholder = this.options.searchPlaceholder, !this.options.isMultipleEnabled && this.options.isSearchEnabled && (this.input.value = ""), this.renderDropdown(), this.positionDropdown(), this.hint && (this.hint.classList.add("ml__hint--visible"), this.positionHint()));
+  }
+  close() {
+    if (f.debug(`[${this.instanceId}] close() called`, { isOpen: this.isOpen }), !this.isOpen) return;
+    this.isOpen = !1, this.element.classList.remove("ml--open"), this.dropdown.classList.remove("ml__dropdown--visible"), this.hint && this.hint.classList.remove("ml__hint--visible"), this.searchTerm = "";
+    const e = this.options.isMultipleEnabled || this.options.isSearchEnabled;
+    f.warn(`[${this.instanceId}] close() - input clearing decision`, {
+      multiple: this.options.isMultipleEnabled,
+      enableSearch: this.options.isSearchEnabled,
+      willClearInput: e,
+      currentInputValue: this.input.value
+    }), e ? (f.info(`[${this.instanceId}] 🧹 close() CLEARING input.value`), this.input.value = "") : f.info(`[${this.instanceId}] 🔒 close() KEEPING input.value = "${this.input.value}"`), this.filteredOptions = [...this.allOptions], this.focusedIndex = -1, f.info(`[${this.instanceId}] 📞 close() CALLING renderPills()`), this.renderPills(), f.info(`[${this.instanceId}] ✅ close() AFTER renderPills(), input.value = "${this.input.value}"`), this.dropdownCleanup && (this.dropdownCleanup(), this.dropdownCleanup = null), this.hintCleanup && (this.hintCleanup(), this.hintCleanup = null), this.dropdownPlacement = null, f.info(`[${this.instanceId}] Dropdown closed. Stack trace:`), console.trace();
+  }
+  positionDropdown() {
+    this.dropdownCleanup = q(
+      this.input,
+      this.dropdown,
+      () => {
+        const e = this.options.isPlacementLocked && this.dropdownPlacement ? this.dropdownPlacement : "bottom-start", t = [
+          Z(4),
+          ...this.options.isPlacementLocked && this.dropdownPlacement ? [] : [me()],
+          Q({ padding: 8 })
+        ];
+        ee(this.input, this.dropdown, {
+          placement: e,
+          middleware: t
+        }).then(({ x: o, y: s, placement: l }) => {
+          this.options.isPlacementLocked && !this.dropdownPlacement && (this.dropdownPlacement = l, f.debug(`[${this.instanceId}] Locked dropdown placement:`, l));
+          const n = {
+            left: `${o}px`,
+            top: `${s}px`,
+            width: `${this.input.offsetWidth}px`
+          };
+          this.options.dropdownMinWidth && (n.minWidth = this.options.dropdownMinWidth), Object.assign(this.dropdown.style, n), this.hint && this.isOpen && this.positionHint();
+        });
+      }
+    );
+  }
+  positionHint() {
+    this.hint && (this.hintCleanup && this.hintCleanup(), this.hintCleanup = q(
+      this.input,
+      this.hint,
+      () => {
+        let e = "top-start";
+        this.dropdownPlacement && (this.dropdownPlacement.startsWith("bottom") ? e = this.dropdownPlacement.replace("bottom", "top") : this.dropdownPlacement.startsWith("top") && (e = this.dropdownPlacement.replace("top", "bottom"))), ee(this.input, this.hint, {
+          placement: e,
+          middleware: [
+            Z(4),
+            // Don't use flip() - we want hint to stay opposite of dropdown
+            Q({ padding: 8 })
+          ]
+        }).then(({ x: t, y: o }) => {
+          Object.assign(this.hint.style, {
+            left: `${t}px`,
+            top: `${o}px`
+          });
+        });
+      }
+    ));
+  }
+  parseInitialSelection() {
+    const e = this.element.dataset.initialValues;
+    if (e)
+      try {
+        JSON.parse(e).forEach((o) => {
+          const s = String(o);
+          this.selectedValues.add(s);
+          const l = this.allOptions.find((n) => String(this.getItemValue(n)) === s);
+          l && this.selectedOptions.set(s, l);
+        }), this.renderPills();
+      } catch (t) {
+        console.error("[MultiSelect] Failed to parse initial values:", t);
+      }
+  }
+  toggleSelectedPopover() {
+    this.showSelectedPopover ? this.hideSelectedPopover() : this.showPopover();
+  }
+  showPopover() {
+    f.debug(`[${this.instanceId}] showPopover() called`), this.isOpen && this.close(), this.showSelectedPopover = !0, this.renderSelectedPopover(), this.selectedPopover.classList.add("ml__selected-popover--visible"), this.positionSelectedPopover();
+  }
+  hideSelectedPopover() {
+    f.debug(`[${this.instanceId}] hideSelectedPopover() called`), this.showSelectedPopover = !1, this.selectedPopover.classList.remove("ml__selected-popover--visible"), this.selectedPopoverPlacement = null, this.selectedPopoverCleanup && (this.selectedPopoverCleanup(), this.selectedPopoverCleanup = null);
+  }
+  renderSelectedPopover() {
+    const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size;
+    this.selectedPopover.innerHTML = `
+            <div class="ml__selected-popover-header">
+                <span>Selected Items (${t})</span>
+                <button type="button" class="ml__selected-popover-close" aria-label="Close">&times;</button>
+            </div>
+            <div class="ml__selected-popover-body">
+                ${e.map((o) => {
+      const s = this.getItemValue(o), l = this.getItemDisplayValue(o);
+      return `
+                    <div class="ml__pill">
+                        <span class="ml__pill-text">${l}</span>
+                        <button type="button" class="ml__pill-remove" data-value="${s}" aria-label="Remove ${l}"></button>
+                    </div>
+                `;
+    }).join("")}
+            </div>
+        `;
+  }
+  handleSelectedPopoverClick(e) {
+    if (e.stopPropagation(), e.target.closest(".ml__selected-popover-close")) {
+      e.preventDefault(), this.hideSelectedPopover();
+      return;
+    }
+    const o = e.target.closest(".ml__pill-remove");
+    if (o) {
+      e.preventDefault();
+      const s = o.dataset.value, l = this.selectedOptions.get(s);
+      l && (this.deselectOption(l), this.renderSelectedPopover(), this.selectedValues.size === 0 && this.hideSelectedPopover());
+    }
+  }
+  positionSelectedPopover() {
+    this.selectedPopoverCleanup = q(
+      this.input,
+      this.selectedPopover,
+      () => {
+        const e = this.selectedPopoverPlacement || "bottom-start";
+        ee(this.input, this.selectedPopover, {
+          placement: e,
+          middleware: [
+            Z(4),
+            ...this.selectedPopoverPlacement ? [] : [me()],
+            Q({ padding: 8 })
+          ]
+        }).then(({ x: t, y: o, placement: s }) => {
+          this.selectedPopoverPlacement || (this.selectedPopoverPlacement = s, f.debug(`[${this.instanceId}] Locked popover placement:`, s));
+          const l = {
+            left: `${t}px`,
+            top: `${o}px`,
+            width: `${this.input.offsetWidth}px`
+          };
+          this.options.dropdownMinWidth && (l.minWidth = this.options.dropdownMinWidth), Object.assign(this.selectedPopover.style, l);
+        });
+      }
+    );
+  }
+  // ========================================================================
+  // FORM INTEGRATION
+  // ========================================================================
+  updateHiddenInput() {
+    if (!this.options.formFieldId) return;
+    this.hiddenInputs.forEach((s) => s.remove()), this.hiddenInputs = [];
+    const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((s) => this.getItemValue(s)), o = this.options.hostElement || this.element;
+    if (e === "array")
+      t.forEach((s) => {
+        const l = document.createElement("input");
+        l.type = "hidden", l.name = `${this.options.formFieldId}[]`, l.value = String(s), o.appendChild(l), this.hiddenInputs.push(l);
+      });
+    else {
+      const s = document.createElement("input");
+      s.type = "hidden", s.name = this.options.formFieldId, s.id = this.options.formFieldId, s.value = this.getFormValue(), o.appendChild(s), this.hiddenInputs.push(s);
+    }
+  }
+  getFormValue() {
+    const e = Array.from(this.selectedOptions.values()).map((o) => this.getItemValue(o));
+    return this.options.getValueFormatCallback ? this.options.getValueFormatCallback(e) : (this.options.valueFormat || "json") === "csv" ? e.join(",") : JSON.stringify(e);
+  }
+  // ========================================================================
+  // PUBLIC API
+  // ========================================================================
+  getSelected() {
+    return Array.from(this.selectedOptions.values());
+  }
+  setSelected(e) {
+    this.selectedValues = new Set(e.map((t) => String(t))), this.selectedOptions.clear(), e.forEach((t) => {
+      const o = String(t), s = this.allOptions.find((l) => String(this.getItemValue(l)) === o);
+      s && this.selectedOptions.set(o, s);
+    }), this.renderDropdown(), this.renderPills(), this.updateHiddenInput();
+  }
+  get selectedItem() {
+    return this.selectedOptions.size === 0 ? null : Array.from(this.selectedOptions.values())[0];
+  }
+  get selectedValue() {
+    if (!this.options.valueMember && !this.options.getValueCallback)
+      return null;
+    if (this.selectedOptions.size === 0)
+      return this.options.isMultipleEnabled ? [] : null;
+    const e = Array.from(this.selectedOptions.values()).map((t) => this.getItemValue(t));
+    return this.options.isMultipleEnabled ? e : e[0] ?? null;
+  }
+  getValue() {
+    if (this.selectedOptions.size === 0)
+      return this.options.isMultipleEnabled ? [] : null;
+    const e = Array.from(this.selectedOptions.values()).map((t) => this.getItemValue(t));
+    return this.options.isMultipleEnabled ? e : e[0] ?? null;
+  }
+  // ========================================================================
+  // PILL TOOLTIP METHODS
+  // ========================================================================
+  attachPillTooltips() {
+    if (!this.options.isPillTooltipsEnabled) {
+      console.log("[Tooltips] Disabled - isPillTooltipsEnabled is false");
+      return;
+    }
+    const e = this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");
+    console.log(`[Tooltips] Found ${e.length} pills to attach tooltips to`), e.forEach((o) => {
+      const s = o, l = s.querySelector(".ml__pill-remove");
+      if (!l) return;
+      const n = l.dataset.value, r = this.selectedOptions.get(n);
+      if (!r) return;
+      const a = s.querySelector(".ml__pill-text");
+      a && this.createTooltipForElement(a, r, n);
+      const c = this.getItemDisplayValue(r);
+      this.createRemoveButtonTooltip(l, c, n);
+    });
+    const t = this.pillsContainer.querySelector(".ml__pill--more");
+    if (t) {
+      const o = t.querySelector(".ml__pill-remove");
+      if (o && o.dataset.action === "remove-hidden") {
+        const s = this.options.pillsMaxVisible || 3, n = Array.from(this.selectedOptions.values()).length - s;
+        this.createRemoveButtonTooltip(o, `${n} hidden items`, "more-badge-remove");
+      }
+    }
+  }
+  createTooltipForElement(e, t, o) {
+    const s = document.createElement("div");
+    s.className = "ml__pill-tooltip";
+    let l;
+    if (this.options.getPillTooltipCallback)
+      l = this.options.getPillTooltipCallback(t), console.log("[Tooltips] Using custom callback for tooltip content");
+    else {
+      const d = this.getItemDisplayValue(t), m = this.getItemSubtitle(t);
+      l = m ? `${d}
+${m}` : d, console.log(`[Tooltips] Using default content: "${l}"`);
+    }
+    typeof l == "string" ? s.textContent = l : s.appendChild(l), (this.options.container || document.body).appendChild(s), console.log(`[Tooltips] Tooltip element created and appended for "${o}"`), this.pillTooltips.set(o, s);
+    let r, a;
+    const c = () => {
+      clearTimeout(a), console.log(`[Tooltips] Mouse entered pill "${o}", will show tooltip in ${this.options.pillTooltipDelay || 300}ms`), r = window.setTimeout(() => {
+        console.log(`[Tooltips] Showing tooltip for "${o}"`), s.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, s, o);
+      }, this.options.pillTooltipDelay || 300);
+    }, p = () => {
+      clearTimeout(r), a = window.setTimeout(() => {
+        s.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(o);
+      }, 100);
+    };
+    e.addEventListener("mouseenter", c), e.addEventListener("mouseleave", p);
+  }
+  createRemoveButtonTooltip(e, t, o) {
+    const s = document.createElement("div");
+    s.className = "ml__pill-tooltip", s.textContent = `Remove ${t}`, (this.options.container || document.body).appendChild(s);
+    const n = `${o}-remove`;
+    this.pillTooltips.set(n, s);
+    let r, a;
+    const c = () => {
+      clearTimeout(a);
+      const d = this.pillTooltips.get(o);
+      d && d.classList.remove("ml__pill-tooltip--visible"), r = window.setTimeout(() => {
+        s.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, s, n);
+      }, this.options.pillTooltipDelay || 300);
+    }, p = () => {
+      clearTimeout(r), a = window.setTimeout(() => {
+        s.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(n);
+      }, 100);
+    };
+    e.addEventListener("mouseenter", c), e.addEventListener("mouseleave", p);
+  }
+  positionPillTooltip(e, t, o) {
+    const s = q(e, t, () => {
+      ee(e, t, {
+        placement: this.options.pillTooltipPlacement || "top",
+        strategy: "fixed",
+        middleware: [
+          Z(this.options.pillTooltipOffset || 8),
+          me(),
+          Q({ padding: 8 })
+        ]
+      }).then(({ x: l, y: n }) => {
+        Object.assign(t.style, {
+          left: `${l}px`,
+          top: `${n}px`
+        }), console.log(`[Tooltips] Positioned tooltip "${o}" at x:${l}, y:${n}`, {
+          placement: this.options.pillTooltipPlacement || "top",
+          tooltipClasses: t.className,
+          tooltipDisplay: window.getComputedStyle(t).display,
+          tooltipOpacity: window.getComputedStyle(t).opacity,
+          tooltipVisibility: window.getComputedStyle(t).visibility,
+          tooltipZIndex: window.getComputedStyle(t).zIndex,
+          tooltipPosition: window.getComputedStyle(t).position
+        });
+      });
+    });
+    this.pillTooltipCleanups.set(o, s);
+  }
+  cleanupPillTooltip(e) {
+    const t = this.pillTooltipCleanups.get(e);
+    t && (t(), this.pillTooltipCleanups.delete(e));
+  }
+  destroyAllPillTooltips() {
+    this.pillTooltipCleanups.forEach((e) => e()), this.pillTooltipCleanups.clear(), this.pillTooltips.forEach((e) => e.remove()), this.pillTooltips.clear();
+  }
+  // ========================================================================
+  // PUBLIC API
+  // ========================================================================
+  destroy() {
+    this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ml", "ml--open", "ml--no-checkboxes"), console.log("[MultiSelect] Destroyed");
+  }
+}
+const Nt = '@charset "UTF-8";multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', be = /* @__PURE__ */ new Set();
+function je() {
+  return Array.from(be);
+}
+class Ge extends HTMLElement {
+  constructor() {
+    super();
+    u(this, "picker");
+    u(this, "containerElement");
+    u(this, "shadow");
+    // Properties for complex data (not attributes)
+    u(this, "_options");
+    // Member/Callback properties
+    u(this, "_valueMember");
+    u(this, "_getValueCallback");
+    u(this, "_displayValueMember");
+    u(this, "_getDisplayValueCallback");
+    u(this, "_searchValueMember");
+    u(this, "_getSearchValueCallback");
+    u(this, "_iconMember");
+    u(this, "_getIconCallback");
+    u(this, "_subtitleMember");
+    u(this, "_getSubtitleCallback");
+    u(this, "_groupMember");
+    u(this, "_getGroupCallback");
+    u(this, "_disabledMember");
+    u(this, "_getDisabledCallback");
+    // Value formatting callbacks
+    u(this, "_getValueFormatCallback");
+    // Tooltip callbacks
+    u(this, "_getPillTooltipCallback");
+    // Count pill callback
+    u(this, "_getCountPillCallback");
+    // Event callbacks
+    u(this, "_searchCallback");
+    u(this, "_addNewCallback");
+    u(this, "_selectCallback");
+    u(this, "_deselectCallback");
+    u(this, "_changeCallback");
+    this.shadow = this.attachShadow({ mode: "open" });
+    const t = document.createElement("style");
+    t.textContent = Nt, this.shadow.appendChild(t), requestAnimationFrame(() => {
+      this.setAttribute("data-ready", "");
+    });
+  }
+  static get observedAttributes() {
+    return [
+      // Existing attributes (external names - standard/familiar)
+      "search-hint",
+      "search-placeholder",
+      "multiple",
+      "allow-groups",
+      "allow-select-all",
+      "allow-clear-all",
+      "show-checkboxes",
+      "sticky-actions",
+      "close-on-select",
+      "lock-placement",
+      "dropdown-min-width",
+      "pills-display-mode",
+      "pills-threshold",
+      "pills-max-visible",
+      "pills-threshold-mode",
+      "pills-position",
+      "show-count-badge",
+      "max-height",
+      "empty-message",
+      "loading-message",
+      "min-search-length",
+      "enable-search",
+      "search-input-mode",
+      "allow-add-new",
+      "initial-values",
+      // New member properties
+      "value-member",
+      "display-value-member",
+      "search-value-member",
+      "icon-member",
+      "subtitle-member",
+      "group-member",
+      "disabled-member",
+      // Form integration
+      "name",
+      "value-format",
+      // Tooltip options
+      "enable-pill-tooltips",
+      "pill-tooltip-placement",
+      // Debug
+      "show-debug-info"
+    ];
+  }
+  connectedCallback() {
+    be.add(this), this.render(), this.initializePicker();
+  }
+  disconnectedCallback() {
+    be.delete(this), this.picker && this.picker.destroy();
+  }
+  attributeChangedCallback(t, o, s) {
+    o !== s && this.picker && t !== "initial-values" && (this.picker.destroy(), this.initializePicker());
+  }
+  render() {
+    this.containerElement = document.createElement("div"), this.containerElement.setAttribute("data-multiselect", ""), this.className && (this.containerElement.className = this.className), this.shadow.appendChild(this.containerElement), this.getAttribute("show-debug-info") === "true" && this.renderDebugInfo();
+  }
+  renderDebugInfo() {
+    const t = this.shadow.querySelector(".ml-debug-info");
+    t && t.remove();
+    const o = document.createElement("div");
+    o.className = "ml-debug-info";
+    const s = document.createElement("details"), l = document.createElement("summary");
+    l.textContent = "Debug Info";
+    const n = document.createElement("div");
+    n.className = "ml-debug-stats", s.appendChild(l), s.appendChild(n), o.appendChild(s), this.shadow.appendChild(o), this.updateDebugInfo();
+  }
+  updateDebugInfo() {
+    var h, g;
+    const t = this.shadow.querySelector(".ml-debug-stats");
+    if (!t || !this.picker) return;
+    const o = "1.0.0-rc02", s = je().length, n = this.picker.getSelected().length, r = ((h = this._options) == null ? void 0 : h.length) || 0, a = this.picker, c = a.isOpen || !1, p = a.searchTerm || "", d = a.isLoading || !1, m = ((g = a.filteredOptions) == null ? void 0 : g.length) || 0;
+    t.innerHTML = `
+            <span>Version: ${o}</span>
+            <span>Total Instances: ${s}</span>
+            <span>Options: ${r}</span>
+            <span>Filtered: ${m}</span>
+            <span>Selected: ${n}</span>
+            <span>Dropdown: ${c ? "Open" : "Closed"}</span>
+            <span>Search: ${p || "none"}</span>
+            <span>Loading: ${d ? "Yes" : "No"}</span>
+        `, setTimeout(() => {
+      this.getAttribute("show-debug-info") === "true" && this.updateDebugInfo();
+    }, 500);
+  }
+  initializePicker() {
+    if (!this.containerElement) return;
+    let t;
+    const o = this.getAttribute("initial-values");
+    if (o)
+      try {
+        t = JSON.parse(o);
+      } catch (l) {
+        console.error("[MultiSelectElement] Failed to parse initial-values:", l);
+      }
+    const s = {
+      // String options
+      searchHint: this.getAttribute("search-hint") || void 0,
+      searchPlaceholder: this.getAttribute("search-placeholder") || "Search...",
+      dropdownMinWidth: this.getAttribute("dropdown-min-width") || void 0,
+      pillsDisplayMode: this.getAttribute("pills-display-mode") || "pills",
+      pillsPosition: this.getAttribute("pills-position") || "bottom",
+      pillsThresholdMode: this.getAttribute("pills-threshold-mode") || "count",
+      maxHeight: this.getAttribute("max-height") || "20rem",
+      emptyMessage: this.getAttribute("empty-message") || "No results found",
+      loadingMessage: this.getAttribute("loading-message") || "Loading...",
+      searchInputMode: this.getAttribute("search-input-mode") || "normal",
+      // Number options
+      pillsThreshold: this.getAttribute("pills-threshold") ? parseInt(this.getAttribute("pills-threshold")) : void 0,
+      pillsMaxVisible: this.getAttribute("pills-max-visible") ? parseInt(this.getAttribute("pills-max-visible")) : void 0,
+      minSearchLength: this.getAttribute("min-search-length") ? parseInt(this.getAttribute("min-search-length")) : 0,
+      // Boolean options (map external to internal with 'is' prefix)
+      isMultipleEnabled: this.getAttribute("multiple") !== "false",
+      isGroupsAllowed: this.getAttribute("allow-groups") !== "false",
+      isSelectAllAllowed: this.getAttribute("allow-select-all") !== "false",
+      isClearAllAllowed: this.getAttribute("allow-clear-all") !== "false",
+      isCheckboxesShown: this.getAttribute("show-checkboxes") !== "false",
+      isActionsSticky: this.getAttribute("sticky-actions") !== "false",
+      isCloseOnSelect: this.getAttribute("close-on-select") === "true",
+      isPlacementLocked: this.getAttribute("lock-placement") !== "false",
+      isSearchEnabled: this.getAttribute("enable-search") !== "false",
+      isAddNewAllowed: this.getAttribute("allow-add-new") === "true",
+      isCountBadgeShown: this.getAttribute("show-count-badge") === "true",
+      // Member properties
+      valueMember: this.getAttribute("value-member") || this._valueMember,
+      displayValueMember: this.getAttribute("display-value-member") || this._displayValueMember,
+      searchValueMember: this.getAttribute("search-value-member") || this._searchValueMember,
+      iconMember: this.getAttribute("icon-member") || this._iconMember,
+      subtitleMember: this.getAttribute("subtitle-member") || this._subtitleMember,
+      groupMember: this.getAttribute("group-member") || this._groupMember,
+      disabledMember: this.getAttribute("disabled-member") || this._disabledMember,
+      // Callback properties (JavaScript only)
+      getValueCallback: this._getValueCallback,
+      getDisplayValueCallback: this._getDisplayValueCallback,
+      getSearchValueCallback: this._getSearchValueCallback,
+      getIconCallback: this._getIconCallback,
+      getSubtitleCallback: this._getSubtitleCallback,
+      getGroupCallback: this._getGroupCallback,
+      getDisabledCallback: this._getDisabledCallback,
+      // Form integration & value formatting
+      formFieldId: this.getAttribute("name") || void 0,
+      valueFormat: this.getAttribute("value-format") || "json",
+      getValueFormatCallback: this._getValueFormatCallback,
+      // Tooltip options
+      isPillTooltipsEnabled: this.getAttribute("enable-pill-tooltips") === "true",
+      getPillTooltipCallback: this._getPillTooltipCallback,
+      pillTooltipPlacement: this.getAttribute("pill-tooltip-placement") || "top",
+      pillTooltipDelay: parseInt(this.getAttribute("pill-tooltip-delay") || "300"),
+      pillTooltipOffset: parseInt(this.getAttribute("pill-tooltip-offset") || "8"),
+      // Count pill callback
+      getCountPillCallback: this._getCountPillCallback || ((l, n) => n !== void 0 ? `+${n} more` : `${l} selected`),
+      // Data and callbacks
+      options: this._options,
+      searchCallback: this._searchCallback,
+      addNewCallback: this._addNewCallback,
+      selectCallback: (l) => {
+        var n, r;
+        this._selectCallback && this._selectCallback(l), this.dispatchEvent(new CustomEvent("select", {
+          detail: {
+            option: l,
+            selectedOptions: (n = this.picker) == null ? void 0 : n.getSelected(),
+            selectedValues: Array.from(((r = this.picker) == null ? void 0 : r.getValue()) || [])
+          }
+        }));
+      },
+      deselectCallback: (l) => {
+        var n, r;
+        this._deselectCallback && this._deselectCallback(l), this.dispatchEvent(new CustomEvent("deselect", {
+          detail: {
+            option: l,
+            selectedOptions: (n = this.picker) == null ? void 0 : n.getSelected(),
+            selectedValues: Array.from(((r = this.picker) == null ? void 0 : r.getValue()) || [])
+          }
+        }));
+      },
+      changeCallback: (l) => {
+        var n;
+        this._changeCallback && this._changeCallback(l), this.dispatchEvent(new CustomEvent("change", {
+          detail: {
+            selectedOptions: l,
+            selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
+          }
+        }));
+      },
+      // Pass shadow root as container for dropdown/hint/popover
+      container: this.shadow,
+      // Pass host element (this) for hidden inputs in light DOM
+      hostElement: this
+    };
+    t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new zt(this.containerElement, s);
+  }
+  reinitialize() {
+    this.picker && (this.picker.destroy(), this.initializePicker());
+  }
+  // ========================================================================
+  // PUBLIC API - PROPERTIES
+  // ========================================================================
+  // Data options
+  get options() {
+    return this._options;
+  }
+  set options(t) {
+    this._options = t, this.reinitialize();
+  }
+  // Member properties (can also be set via attributes)
+  set valueMember(t) {
+    this._valueMember = t || void 0, t ? this.setAttribute("value-member", t) : this.removeAttribute("value-member");
+  }
+  get valueMember() {
+    return this.getAttribute("value-member");
+  }
+  set displayValueMember(t) {
+    this._displayValueMember = t || void 0, t ? this.setAttribute("display-value-member", t) : this.removeAttribute("display-value-member");
+  }
+  get displayValueMember() {
+    return this.getAttribute("display-value-member");
+  }
+  set searchValueMember(t) {
+    this._searchValueMember = t || void 0, t ? this.setAttribute("search-value-member", t) : this.removeAttribute("search-value-member");
+  }
+  get searchValueMember() {
+    return this.getAttribute("search-value-member");
+  }
+  set iconMember(t) {
+    this._iconMember = t || void 0, t ? this.setAttribute("icon-member", t) : this.removeAttribute("icon-member");
+  }
+  get iconMember() {
+    return this.getAttribute("icon-member");
+  }
+  set subtitleMember(t) {
+    this._subtitleMember = t || void 0, t ? this.setAttribute("subtitle-member", t) : this.removeAttribute("subtitle-member");
+  }
+  get subtitleMember() {
+    return this.getAttribute("subtitle-member");
+  }
+  set groupMember(t) {
+    this._groupMember = t || void 0, t ? this.setAttribute("group-member", t) : this.removeAttribute("group-member");
+  }
+  get groupMember() {
+    return this.getAttribute("group-member");
+  }
+  set disabledMember(t) {
+    this._disabledMember = t || void 0, t ? this.setAttribute("disabled-member", t) : this.removeAttribute("disabled-member");
+  }
+  get disabledMember() {
+    return this.getAttribute("disabled-member");
+  }
+  // Callback properties (JavaScript only - no attributes)
+  set getValueCallback(t) {
+    this._getValueCallback = t, this.reinitialize();
+  }
+  get getValueCallback() {
+    return this._getValueCallback;
+  }
+  set getDisplayValueCallback(t) {
+    this._getDisplayValueCallback = t, this.reinitialize();
+  }
+  get getDisplayValueCallback() {
+    return this._getDisplayValueCallback;
+  }
+  set getSearchValueCallback(t) {
+    this._getSearchValueCallback = t, this.reinitialize();
+  }
+  get getSearchValueCallback() {
+    return this._getSearchValueCallback;
+  }
+  set getIconCallback(t) {
+    this._getIconCallback = t, this.reinitialize();
+  }
+  get getIconCallback() {
+    return this._getIconCallback;
+  }
+  set getSubtitleCallback(t) {
+    this._getSubtitleCallback = t, this.reinitialize();
+  }
+  get getSubtitleCallback() {
+    return this._getSubtitleCallback;
+  }
+  set getGroupCallback(t) {
+    this._getGroupCallback = t, this.reinitialize();
+  }
+  get getGroupCallback() {
+    return this._getGroupCallback;
+  }
+  set getDisabledCallback(t) {
+    this._getDisabledCallback = t, this.reinitialize();
+  }
+  get getDisabledCallback() {
+    return this._getDisabledCallback;
+  }
+  // Form integration
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set valueFormat(t) {
+    t ? this.setAttribute("value-format", t) : this.removeAttribute("value-format");
+  }
+  get valueFormat() {
+    return this.getAttribute("value-format");
+  }
+  set getValueFormatCallback(t) {
+    this._getValueFormatCallback = t, this.reinitialize();
+  }
+  get getValueFormatCallback() {
+    return this._getValueFormatCallback;
+  }
+  // Pills display options
+  set thresholdMode(t) {
+    t ? this.setAttribute("threshold-mode", t) : this.removeAttribute("threshold-mode");
+  }
+  get thresholdMode() {
+    return this.getAttribute("threshold-mode");
+  }
+  set pillsMaxVisible(t) {
+    t !== null ? this.setAttribute("pills-max-visible", String(t)) : this.removeAttribute("pills-max-visible");
+  }
+  get pillsMaxVisible() {
+    const t = this.getAttribute("pills-max-visible");
+    return t ? parseInt(t) : null;
+  }
+  // Tooltip options
+  set enablePillTooltips(t) {
+    t ? this.setAttribute("enable-pill-tooltips", "true") : this.removeAttribute("enable-pill-tooltips");
+  }
+  get enablePillTooltips() {
+    return this.getAttribute("enable-pill-tooltips") === "true";
+  }
+  set pillTooltipPlacement(t) {
+    t ? this.setAttribute("pill-tooltip-placement", t) : this.removeAttribute("pill-tooltip-placement");
+  }
+  get pillTooltipPlacement() {
+    return this.getAttribute("pill-tooltip-placement");
+  }
+  set getPillTooltipCallback(t) {
+    this._getPillTooltipCallback = t, this.reinitialize();
+  }
+  get getPillTooltipCallback() {
+    return this._getPillTooltipCallback;
+  }
+  set getCountPillCallback(t) {
+    this._getCountPillCallback = t, this.reinitialize();
+  }
+  get getCountPillCallback() {
+    return this._getCountPillCallback;
+  }
+  // Event callbacks
+  get searchCallback() {
+    return this._searchCallback;
+  }
+  set searchCallback(t) {
+    this._searchCallback = t, this.reinitialize();
+  }
+  get addNewCallback() {
+    return this._addNewCallback;
+  }
+  set addNewCallback(t) {
+    this._addNewCallback = t, this.reinitialize();
+  }
+  get selectCallback() {
+    return this._selectCallback;
+  }
+  set selectCallback(t) {
+    this._selectCallback = t;
+  }
+  get deselectCallback() {
+    return this._deselectCallback;
+  }
+  set deselectCallback(t) {
+    this._deselectCallback = t;
+  }
+  get changeCallback() {
+    return this._changeCallback;
+  }
+  set changeCallback(t) {
+    this._changeCallback = t;
+  }
+  // New public properties
+  get selectedValue() {
+    var t;
+    return ((t = this.picker) == null ? void 0 : t.selectedValue) ?? null;
+  }
+  get selectedItem() {
+    var t;
+    return ((t = this.picker) == null ? void 0 : t.selectedItem) ?? null;
+  }
+  // ========================================================================
+  // PUBLIC API - METHODS
+  // ========================================================================
+  getSelected() {
+    return this.picker ? this.picker.getSelected() : [];
+  }
+  setSelected(t) {
+    this.picker && this.picker.setSelected(t);
+  }
+  getValue() {
+    return this.picker ? this.picker.getValue() : null;
+  }
+  destroy() {
+    this.picker && this.picker.destroy();
+  }
+}
+customElements.get("multi-select") || customElements.define("multi-select", Ge);
+typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
+  version: () => "1.0.0-rc02",
+  config: {
+    name: "@keenmate/web-multiselect",
+    version: "1.0.0-rc02",
+    author: "Keenmate",
+    license: "MIT",
+    repository: "git+https://github.com/keenmate/web-multiselect.git",
+    homepage: "https://github.com/keenmate/web-multiselect#readme"
+  },
+  register: () => {
+    customElements.get("multi-select") || customElements.define("multi-select", Ge);
+  },
+  getInstances: () => je()
+});
+export {
+  Ge as MultiSelectElement,
+  zt as PureMultiSelect
+};