@flexilla/alpine-dropdown 0.2.0 → 0.3.1

package/dist/module.esm.js

@@ -1,15 +1,15 @@
 // ../../node_modules/@flexilla/dropdown/dist/dropdown.js
-var B = Object.defineProperty;
-var j = (i, e, t) => e in i ? B(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
-var a = (i, e, t) => j(i, typeof e != "symbol" ? e + "" : e, t);
-var G = Object.defineProperty;
-var q = (i, e, t) => e in i ? G(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
-var p = (i, e, t) => q(i, typeof e != "symbol" ? e + "" : e, t);
-var V = "bottom";
-var X = ({ reference: i, popper: e }) => {
-  if (!i || !e)
+var q = Object.defineProperty;
+var G = (n, e, t) => e in n ? q(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
+var a = (n, e, t) => G(n, typeof e != "symbol" ? e + "" : e, t);
+var V = Object.defineProperty;
+var X = (n, e, t) => e in n ? V(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
+var p = (n, e, t) => X(n, typeof e != "symbol" ? e + "" : e, t);
+var Y = "bottom";
+var J = ({ reference: n, popper: e }) => {
+  if (!n || !e)
     throw new Error("Reference or popper element is null or undefined");
-  const t = /* @__PURE__ */ new WeakMap(), n = (o) => (t.has(o) || t.set(o, o.getBoundingClientRect()), t.get(o)), r = n(e), s = n(i);
+  const t = /* @__PURE__ */ new WeakMap(), i = (o) => (t.has(o) || t.set(o, o.getBoundingClientRect()), t.get(o)), r = i(e), s = i(n);
   return {
     popperHeight: r.height,
     popperWidth: r.width,
@@ -20,25 +20,25 @@ var X = ({ reference: i, popper: e }) => {
     refRight: s.right
   };
 };
-var Y = (i, e, t, n) => {
-  const r = t, s = n - (t + e);
-  return r >= (i - e) / 2 && s >= (i - e) / 2;
+var Q = (n, e, t, i) => {
+  const r = t, s = i - (t + e);
+  return r >= (n - e) / 2 && s >= (n - e) / 2;
 };
-var J = (i, e, t, n) => (i - e) / 2 <= t && t + i / 2 + e / 2 <= n;
-var Q = (i, e, t, n, r) => t > r - n ? e() ? window.innerHeight - r : t - r : i() ? 0 : t + n;
-var Z = (i, e, t, n) => i <= n && t - i <= e;
-var _ = (i, e, t, n) => t <= n && -i <= e;
-var ee = (i, e, t, n, r, s) => {
-  const o = r - t - s, l = t - n, m = t + s - n + (r - t - s), c = o >= 0 ? r - n : l >= 0 ? t - n : t;
-  return i() ? 0 : e() ? m : c;
+var Z = (n, e, t, i) => (n - e) / 2 <= t && t + n / 2 + e / 2 <= i;
+var _ = (n, e, t, i, r) => t > r - i ? e() ? window.innerHeight - r : t - r : n() ? 0 : t + i;
+var ee = (n, e, t, i) => n <= i && t - n <= e;
+var te = (n, e, t, i) => t <= i && -n <= e;
+var ne = (n, e, t, i, r, s) => {
+  const o = r - t - s, l = t - i, m = t + s - i + (r - t - s), c = o >= 0 ? r - i : l >= 0 ? t - i : t;
+  return n() ? 0 : e() ? m : c;
 };
-var te = (i, e, t, n) => i <= t && e - i - n >= i;
-var ne = (i, e) => i >= e;
-var ie = ({
-  placement: i,
+var ie = (n, e, t, i) => n <= t && e - n - i >= n;
+var se = (n, e) => n >= e;
+var re = ({
+  placement: n,
   refWidth: e,
   refTop: t,
-  refLeft: n,
+  refLeft: i,
   refHeight: r,
   popperWidth: s,
   popperHeight: o,
@@ -46,23 +46,23 @@ var ie = ({
   windowWidth: m,
   offsetDistance: c
 }) => {
-  const d = m - n - e, f = n, E = l - t - r, g = t, w = () => Q(
-    () => _(t, r, o, l),
-    () => Z(t, r, o, l),
+  const d = m - i - e, f = i, E = l - t - r, g = t, w = () => _(
+    () => te(t, r, o, l),
+    () => ee(t, r, o, l),
     t,
     r,
     o
-  ), b = () => ee(
-    () => te(n, m, s, e),
-    () => ne(n, s),
-    n,
+  ), b = () => ne(
+    () => ie(i, m, s, e),
+    () => se(i, s),
+    i,
     s,
     m,
     e
-  ), H = () => Y(s, e, n, m) ? n + e / 2 - s / 2 : b(), M = () => J(o, r, t, l) ? t + r / 2 - o / 2 : w(), A = () => n + s <= m ? n : b(), k = () => n + e - s >= 0 ? n + e - s : b(), L = () => t + o <= l ? t : w(), U = () => t + r - o >= 0 ? t + r - o : w();
+  ), H = () => Q(s, e, i, m) ? i + e / 2 - s / 2 : b(), M = () => Z(o, r, t, l) ? t + r / 2 - o / 2 : w(), C = () => i + s <= m ? i : b(), L = () => i + e - s >= 0 ? i + e - s : b(), x = () => t + o <= l ? t : w(), j = () => t + r - o >= 0 ? t + r - o : w();
   let u = 0, v = 0;
-  const C = t - o - c, x = t + r + c, I = n - s - c, D = n + e + c, W = g >= o + c, F = E >= o + c, R = f >= s + c, $ = d >= s + c;
-  switch (i.startsWith("top") ? v = W ? C : F ? x : Math.max(C, x) : i.startsWith("bottom") ? v = F ? x : W ? C : Math.max(x) : i.startsWith("left") ? u = R ? I : $ ? D : Math.max(I, D) : i.startsWith("right") && (u = $ ? D : R ? I : Math.max(D, I)), i) {
+  const T = t - o - c, A = t + r + c, I = i - s - c, D = i + e + c, W = g >= o + c, $ = E >= o + c, R = f >= s + c, N = d >= s + c;
+  switch (n.startsWith("top") ? v = W ? T : $ ? A : Math.max(T, A) : n.startsWith("bottom") ? v = $ ? A : W ? T : Math.max(A) : n.startsWith("left") ? u = R ? I : N ? D : Math.max(I, D) : n.startsWith("right") && (u = N ? D : R ? I : Math.max(D, I)), n) {
     case "bottom":
     case "bottom-middle":
     case "top":
@@ -77,24 +77,24 @@ var ie = ({
       break;
     case "bottom-start":
     case "top-start":
-      u = A();
+      u = C();
       break;
     case "bottom-end":
     case "top-end":
-      u = k();
+      u = L();
       break;
     case "left-start":
     case "right-start":
-      v = L();
+      v = x();
       break;
     case "left-end":
     case "right-end":
-      v = U();
+      v = j();
       break;
   }
   return { x: u, y: v };
 };
-var se = class {
+var oe = class {
   /**
    * Flexilla Popper 
    * @param reference 
@@ -113,7 +113,7 @@ var se = class {
    * @param {boolean} [options.eventEffect.disableOnScroll] - Disable position updates on scroll
    * @param {Function} [options.onUpdate] - Callback function when position updates
    */
-  constructor(e, t, n = {}) {
+  constructor(e, t, i = {}) {
     p(this, "reference"), p(this, "popper"), p(this, "offsetDistance"), p(this, "placement"), p(this, "disableOnResize"), p(this, "disableOnScroll"), p(this, "onUpdate"), p(this, "isWindowEventsRegistered"), p(this, "validateElements", () => {
       if (!(this.reference instanceof HTMLElement))
         throw new Error("Invalid HTMLElement for Reference Element");
@@ -128,11 +128,11 @@ var se = class {
     }), p(this, "initPlacement", () => {
       var d;
       this.validateElements(), this.setInitialStyles();
-      const f = window.innerWidth, E = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: b, refWidth: H, refLeft: M, refTop: A } = X({ reference: this.reference, popper: this.popper }), { x: k, y: L } = ie(
+      const f = window.innerWidth, E = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: b, refWidth: H, refLeft: M, refTop: C } = J({ reference: this.reference, popper: this.popper }), { x: L, y: x } = re(
         {
           placement: this.placement,
           refWidth: H,
-          refTop: A,
+          refTop: C,
           refLeft: M,
           popperWidth: w,
           refHeight: b,
@@ -142,7 +142,7 @@ var se = class {
           offsetDistance: this.offsetDistance
         }
       );
-      this.setPopperStyleProperty(k, L), (d = this.onUpdate) == null || d.call(this, { x: k, y: L, placement: this.placement });
+      this.setPopperStyleProperty(L, x), (d = this.onUpdate) == null || d.call(this, { x: L, y: x, placement: this.placement });
     }), p(this, "removeWindowEvents", () => {
       this.isWindowEventsRegistered && (!this.disableOnResize && window.removeEventListener("resize", this.updatePosition), !this.disableOnScroll && window.removeEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = false);
     }), p(this, "attachWindowEvent", () => {
@@ -156,15 +156,15 @@ var se = class {
     });
     const {
       offsetDistance: r = 10,
-      placement: s = V,
+      placement: s = Y,
       eventEffect: o = {},
       onUpdate: l
-    } = n;
+    } = i;
     if (!(e instanceof HTMLElement))
       throw new Error("Invalid HTMLElement for Reference Element");
     if (!(t instanceof HTMLElement))
       throw new Error("Invalid HTMLElement for Popper");
-    if (n.offsetDistance && typeof n.offsetDistance != "number")
+    if (i.offsetDistance && typeof i.offsetDistance != "number")
       throw new Error("OffsetDistance must be a number");
     const { disableOnResize: m, disableOnScroll: c } = o;
     this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = r, this.placement = s, this.disableOnResize = m || false, this.disableOnScroll = c || false, this.onUpdate = l;
@@ -180,53 +180,53 @@ var se = class {
     this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
   }
 };
-var re = Object.defineProperty;
-var oe = (i, e, t) => e in i ? re(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
-var h = (i, e, t) => oe(i, typeof e != "symbol" ? e + "" : e, t);
-var ae = (i, e = document.body) => e.querySelector(i);
-var N = (i, e) => {
-  for (const [t, n] of Object.entries(e))
-    i.setAttribute(t, n);
+var ae = Object.defineProperty;
+var le = (n, e, t) => e in n ? ae(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
+var h = (n, e, t) => le(n, typeof e != "symbol" ? e + "" : e, t);
+var he = (n, e = document.body) => e.querySelector(n);
+var z = (n, e) => {
+  for (const [t, i] of Object.entries(e))
+    n.setAttribute(t, i);
 };
-var le = ({
-  element: i,
+var de = ({
+  element: n,
   callback: e,
   type: t,
-  keysCheck: n
+  keysCheck: i
 }) => {
-  const r = getComputedStyle(i), s = r.transition;
-  if (s !== "none" && s !== "" && !n.includes(s)) {
+  const r = getComputedStyle(n), s = r.transition;
+  if (s !== "none" && s !== "" && !i.includes(s)) {
     const o = "transitionend", l = () => {
-      i.removeEventListener(o, l), e();
+      n.removeEventListener(o, l), e();
     };
-    i.addEventListener(o, l, { once: true });
+    n.addEventListener(o, l, { once: true });
   } else
     e();
 };
-var he = ({
-  element: i,
+var ce = ({
+  element: n,
   callback: e
 }) => {
-  le({
-    element: i,
+  de({
+    element: n,
     callback: e,
     type: "transition",
     keysCheck: ["all 0s ease 0s", "all"]
   });
 };
-var de = (i, e, t) => {
-  const n = new CustomEvent(e, { detail: t });
-  i.dispatchEvent(n);
+var pe = (n, e, t) => {
+  const i = new CustomEvent(e, { detail: t });
+  n.dispatchEvent(i);
 };
-var y = ({ state: i, trigger: e, popper: t }) => {
-  const n = i === "open";
-  N(t, {
-    "data-state": i
-  }), N(e, {
-    "aria-expanded": `${n}`
+var y = ({ state: n, trigger: e, popper: t }) => {
+  const i = n === "open";
+  z(t, {
+    "data-state": n
+  }), z(e, {
+    "aria-expanded": `${i}`
   });
 };
-var ce = class {
+var me = class {
   /**
    * Creates an instance of CreateOverlay
    * @param {Object} params - The initialization parameters
@@ -234,8 +234,8 @@ var ce = class {
    * @param {string | HTMLElement} params.content - The content element selector or HTMLElement
    * @param {OverlayOptions} [params.options] - Configuration options for the overlay
    */
-  constructor({ trigger: e, content: t, options: n = {} }) {
-    h(this, "triggerElement"), h(this, "contentElement"), h(this, "triggerStrategy"), h(this, "placement"), h(this, "offsetDistance"), h(this, "preventFromCloseOutside"), h(this, "preventFromCloseInside"), h(this, "options"), h(this, "defaultState"), h(this, "popper"), h(this, "eventEffect"), h(this, "getElement", (s) => typeof s == "string" ? ae(s) : s instanceof HTMLElement ? s : void 0), h(this, "handleDocumentClick", (s) => {
+  constructor({ trigger: e, content: t, options: i = {} }) {
+    h(this, "triggerElement"), h(this, "contentElement"), h(this, "triggerStrategy"), h(this, "placement"), h(this, "offsetDistance"), h(this, "preventFromCloseOutside"), h(this, "preventFromCloseInside"), h(this, "options"), h(this, "defaultState"), h(this, "popper"), h(this, "eventEffect"), h(this, "getElement", (s) => typeof s == "string" ? he(s) : s instanceof HTMLElement ? s : void 0), h(this, "handleDocumentClick", (s) => {
       this.contentElement.getAttribute("data-state") === "open" && (!this.triggerElement.contains(s.target) && !this.preventFromCloseInside && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(s.target) && !this.contentElement.contains(s.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(s.target) && !this.contentElement.contains(s.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(s.target) && this.contentElement.contains(s.target) && !this.preventFromCloseInside && this.hide());
     }), h(this, "handleKeyDown", (s) => {
       s.preventDefault(), this.triggerStrategy !== "hover" && s.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
@@ -281,7 +281,7 @@ var ce = class {
       throw new Error("Trigger element must be a valid HTML element");
     if (!(this.contentElement instanceof HTMLElement))
       throw new Error("Content element must be a valid HTML element");
-    this.options = n, this.triggerStrategy = this.options.triggerStrategy || "click", this.placement = this.options.placement || "bottom", this.offsetDistance = this.options.offsetDistance || 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.options.preventCloseFromInside || false, this.defaultState = this.options.defaultState || "close", this.eventEffect = (r = this.options.popper) == null ? void 0 : r.eventEffect, this.popper = new se(
+    this.options = i, this.triggerStrategy = this.options.triggerStrategy || "click", this.placement = this.options.placement || "bottom", this.offsetDistance = this.options.offsetDistance || 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.options.preventCloseFromInside || false, this.defaultState = this.options.defaultState || "close", this.eventEffect = (r = this.options.popper) == null ? void 0 : r.eventEffect, this.popper = new oe(
       this.triggerElement,
       this.contentElement,
       {
@@ -292,39 +292,39 @@ var ce = class {
     ), this.initInstance();
   }
   onToggleState(e) {
-    var t, n;
-    (n = (t = this.options).onToggle) == null || n.call(t, { isHidden: e });
+    var t, i;
+    (i = (t = this.options).onToggle) == null || i.call(t, { isHidden: e });
   }
   /**
    * Shows the overlay
    * Positions the overlay, adds event listeners, and triggers related callbacks
    */
   show() {
-    var e, t, n, r;
+    var e, t, i, r;
     this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), y({
       state: "open",
       popper: this.contentElement,
       trigger: this.triggerElement
-    }), this.onToggleState(false), (r = (n = this.options).onShow) == null || r.call(n);
+    }), this.onToggleState(false), (r = (i = this.options).onShow) == null || r.call(i);
   }
   /**
    * Hides the overlay
    * Removes event listeners and triggers related callbacks
    */
   hide() {
-    var e, t, n;
+    var e, t, i;
     let r = false;
-    de(this.contentElement, "before-hide", {
+    pe(this.contentElement, "before-hide", {
       setExitAction: (o) => {
         r = o;
       }
     });
-    const s = (n = (t = (e = this.options).beforeHide) == null ? void 0 : t.call(e)) == null ? void 0 : n.cancelAction;
+    const s = (i = (t = (e = this.options).beforeHide) == null ? void 0 : t.call(e)) == null ? void 0 : i.cancelAction;
     r || s || (y({
       state: "close",
       popper: this.contentElement,
       trigger: this.triggerElement
-    }), this.triggerStrategy === "click" && document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.triggerStrategy === "hover" && (this.triggerElement.removeEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.removeEventListener("mouseleave", this.hideOnMouseLeave)), he({
+    }), this.triggerStrategy === "click" && document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.triggerStrategy === "hover" && (this.triggerElement.removeEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.removeEventListener("mouseleave", this.hideOnMouseLeave)), ce({
       element: this.contentElement,
       callback: () => {
         var o, l;
@@ -344,12 +344,12 @@ var ce = class {
     }), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
   }
 };
-var P = (i, e = document.body) => e.querySelector(i);
-var O = (i, e = document.body) => Array.from(e.querySelectorAll(i));
-var pe = (i) => typeof i == "string" ? P(i) : i;
-var me = ({ containerElement: i, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
-  let n = false;
-  const r = pe(i) || document.body, s = typeof e == "string" ? O(e, r) : e, o = (l) => {
+var P = (n, e = document.body) => e.querySelector(n);
+var S = (n, e = document.body) => Array.from(e.querySelectorAll(n));
+var ge = (n) => typeof n == "string" ? P(n) : n;
+var fe = ({ containerElement: n, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
+  let i = false;
+  const r = ge(n) || document.body, s = typeof e == "string" ? S(e, r) : e, o = (l) => {
     if (l.preventDefault(), r.focus(), s.length === 0)
       return;
     const m = l.key, c = document.activeElement;
@@ -383,72 +383,100 @@ var me = ({ containerElement: i, targetChildren: e = "a:not([disabled]), button:
   };
   return {
     make: () => {
-      n || (document.addEventListener("keydown", o), n = true);
+      i || (document.addEventListener("keydown", o), i = true);
     },
     destroy: () => {
-      n && (document.removeEventListener("keydown", o), n = false);
+      i && (document.removeEventListener("keydown", o), i = false);
     }
   };
 };
-var K = (i, e, t) => {
-  const n = new CustomEvent(e, { detail: t });
-  i.dispatchEvent(n);
+var K = (n, e, t) => {
+  const i = new CustomEvent(e, { detail: t });
+  n.dispatchEvent(i);
 };
-function ge(i, e, t = "move") {
-  if (!(i instanceof HTMLElement))
+function ue(n) {
+  const e = () => {
+    document.querySelector(
+      "[data-fx-component]:not([data-component-initialized])"
+    ) ? requestAnimationFrame(e) : n();
+  };
+  e();
+}
+var U = "data-fx-teleport-root";
+var F = "data-fx-teleported";
+var ve = {
+  append: () => {
+  },
+  remove: () => {
+  },
+  restore: () => {
+  }
+};
+function Ee(n, e, t = "move") {
+  var i;
+  if (!(n instanceof HTMLElement))
     throw new Error("Source element must be an HTMLElement");
   if (!(e instanceof HTMLElement))
     throw new Error("Target element must be an HTMLElement");
   if (!["move", "detachable"].includes(t))
     throw new Error(`Invalid teleport mode: ${t}. Must be "move" or "detachable".`);
-  let n = document.createComment("teleporter-placeholder");
-  const r = i.parentNode;
-  return r ? r.insertBefore(n, i) : console.warn("Element has no parent; placeholder not inserted."), t === "move" ? (i.parentNode && e.appendChild(i), {
+  if ((i = n.parentElement) != null && i.closest(`[${U}]`))
+    return ve;
+  n.setAttribute(U, "");
+  let r = document.createComment("teleporter-placeholder");
+  const s = n.parentNode;
+  return s && s.insertBefore(r, n), t === "move" ? (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
     append() {
-      i.parentNode !== e && e.appendChild(i);
+      n.parentNode !== e && (e.appendChild(n), n.setAttribute(F, ""));
     },
     remove() {
-      n != null && n.parentNode && i.parentNode && n.parentNode.insertBefore(i, n);
+      r != null && r.parentNode && n.parentNode && r.parentNode.insertBefore(n, r);
     },
     restore() {
-      n != null && n.parentNode && i.parentNode !== r && n.parentNode.insertBefore(i, n);
+      r != null && r.parentNode && n.parentNode !== s && r.parentNode.insertBefore(n, r);
     }
-  }) : (i.parentNode && e.appendChild(i), {
+  }) : (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
     append() {
-      e.contains(i) || e.appendChild(i);
+      e.contains(n) || e.appendChild(n);
     },
     remove() {
-      i.parentNode && i.remove();
+      n.parentNode && n.remove();
     },
     restore() {
-      n != null && n.parentNode && !i.parentNode && n.parentNode.insertBefore(i, n);
+      r != null && r.parentNode && !n.parentNode && r.parentNode.insertBefore(n, r);
     }
   });
 }
-var T = class {
+var O = class {
   static initGlobalRegistry() {
     window.$flexillaInstances || (window.$flexillaInstances = {});
   }
-  static register(e, t, n) {
-    return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: n }), n);
+  static register(e, t, i) {
+    return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: i }), i);
   }
   static getInstance(e, t) {
-    var n, r;
-    return this.initGlobalRegistry(), (r = (n = window.$flexillaInstances[e]) == null ? void 0 : n.find(
+    var i, r;
+    return this.initGlobalRegistry(), (r = (i = window.$flexillaInstances[e]) == null ? void 0 : i.find(
       (s) => s.element === t
     )) == null ? void 0 : r.instance;
   }
   static removeInstance(e, t) {
     this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
-      (n) => n.element !== t
+      (i) => i.element !== t
     ));
   }
+  static setup(e) {
+    e.setAttribute("data-fx-component", "fx");
+  }
+  static initialized(e) {
+    e.setAttribute("data-component-initialized", "initialized");
+  }
 };
-var fe = {
+var we = {
   teleport: true,
   teleportMode: "move"
 };
-var S = class S2 {
+var k = class k2 {
   /**
    * Creates a new Dropdown instance
    * @param dropdown - The dropdown content element or selector
@@ -476,9 +504,9 @@ var S = class S2 {
       t2 === "add" ? (e2.setAttribute("data-current-subtrigger", ""), e2.setAttribute("data-focus", "active")) : (e2.removeAttribute("data-current-subtrigger"), e2.removeAttribute("data-focus"));
     });
     a(this, "updateObserverFor", (e2) => {
-      const t2 = O("[data-dropdown-trigger]", this.contentElement);
-      for (const n2 of t2)
-        e2.observe(n2, {
+      const t2 = S("[data-dropdown-trigger]", this.contentElement);
+      for (const i2 of t2)
+        e2.observe(i2, {
           attributes: true,
           attributeFilter: ["aria-expanded"]
         });
@@ -493,17 +521,19 @@ var S = class S2 {
       this.subtriggerObserver = new MutationObserver((e2) => {
         for (const t2 of e2)
           if (t2.type === "attributes" && t2.attributeName === "aria-expanded") {
-            const n2 = t2.target, r2 = n2.getAttribute("aria-expanded");
-            this.updateSubtriggerAttr(n2, r2 === "true" ? "add" : "remove");
+            const i2 = t2.target, r2 = i2.getAttribute("aria-expanded");
+            this.updateSubtriggerAttr(i2, r2 === "true" ? "add" : "remove");
           }
       }), this.updateObserverFor(this.subtriggerObserver);
     });
     a(this, "onToggle", ({ isHidden: e2 }) => {
-      var t2, n2;
-      (n2 = (t2 = this.options).onToggle) == null || n2.call(t2, { isHidden: e2 });
+      var t2, i2;
+      (i2 = (t2 = this.options).onToggle) == null || i2.call(t2, { isHidden: e2 });
     });
     a(this, "moveElOnInit", () => {
-      this.experimentalOptions.teleport && (this.experimentalOptions.teleportMode === "detachable" ? this.teleporter.remove() : this.teleporter.append());
+      this.experimentalOptions.teleport && ue(() => {
+        this.experimentalOptions.teleportMode === "detachable" ? this.teleporter.remove() : this.teleporter.append();
+      });
     });
     a(this, "moveEl", () => {
       this.experimentalOptions.teleport && this.experimentalOptions.teleportMode === "detachable" && this.teleporter.remove();
@@ -519,14 +549,14 @@ var S = class S2 {
     });
     a(this, "showHideOnArrow", (e2) => {
       e2.preventDefault();
-      const t2 = e2.key, n2 = document.activeElement;
-      if (n2 != null && n2.hasAttribute("data-dropdown-trigger"))
+      const t2 = e2.key, i2 = document.activeElement;
+      if (i2 != null && i2.hasAttribute("data-dropdown-trigger"))
         switch (t2) {
           case "ArrowRight":
-            n2.getAttribute("aria-expanded") !== "true" && (n2.click(), this.updateSubtriggerAttr(n2, "add"));
+            i2.getAttribute("aria-expanded") !== "true" && (i2.click(), this.updateSubtriggerAttr(i2, "add"));
             break;
           case "ArrowLeft":
-            n2.getAttribute("aria-expanded") === "true" && (n2.click(), this.updateSubtriggerAttr(n2, "remove"));
+            i2.getAttribute("aria-expanded") === "true" && (i2.click(), this.updateSubtriggerAttr(i2, "remove"));
             break;
           default:
             return;
@@ -573,23 +603,24 @@ var S = class S2 {
       this.keyObserver && this.keyObserver.disconnect(), this.subtriggerObserver && this.subtriggerObserver.disconnect();
     });
     a(this, "cleanup", () => {
-      this.disconnectObserver(), this.OverlayInstance.cleanup(), T.removeInstance("dropdown", this.contentElement);
+      this.disconnectObserver(), this.OverlayInstance.cleanup(), O.removeInstance("dropdown", this.contentElement);
     });
-    const n = typeof e == "string" ? P(e) : e;
-    if (!(n instanceof HTMLElement))
+    const i = typeof e == "string" ? P(e) : e;
+    if (!(i instanceof HTMLElement))
       throw new Error(
         "Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement"
       );
-    if (!n.id)
+    if (!i.id)
       throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
-    this.contentElement = n;
-    const r = T.getInstance("dropdown", this.contentElement);
+    this.contentElement = i;
+    const r = O.getInstance("dropdown", this.contentElement);
     if (r)
       return r;
+    O.setup(this.contentElement);
     const s = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
     if (this.triggerElement = P(s), !(this.triggerElement instanceof HTMLElement))
       throw new Error(`No valid trigger element found. Ensure a trigger element exists with attributes: data-dropdown-trigger and data-dropdown-id="${this.contentElement.id}"`);
-    this.options = t, this.triggerStrategy = this.contentElement.dataset.triggerStrategy || this.options.triggerStrategy || "click", this.placement = this.contentElement.dataset.placement || this.options.placement || "bottom-start", this.offsetDistance = parseInt(`${this.contentElement.dataset.offsetDistance}`) || this.options.offsetDistance || 6, this.preventFromCloseOutside = this.contentElement.hasAttribute("data-prevent-close-outside") || this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.contentElement.hasAttribute("data-prevent-close-inside") || this.options.preventCloseFromInside || false, this.defaultState = this.contentElement.dataset.defaultState || this.options.defaultState || "close", this.experimentalOptions = Object.assign({}, fe, t.experimental), this.teleporter = ge(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.OverlayInstance = new ce({
+    this.options = t, this.triggerStrategy = this.contentElement.dataset.triggerStrategy || this.options.triggerStrategy || "click", this.placement = this.contentElement.dataset.placement || this.options.placement || "bottom-start", this.offsetDistance = parseInt(`${this.contentElement.dataset.offsetDistance}`) || this.options.offsetDistance || 6, this.preventFromCloseOutside = this.contentElement.hasAttribute("data-prevent-close-outside") || this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.contentElement.hasAttribute("data-prevent-close-inside") || this.options.preventCloseFromInside || false, this.defaultState = this.contentElement.dataset.defaultState || this.options.defaultState || "close", this.experimentalOptions = Object.assign({}, we, t.experimental), this.teleporter = Ee(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.OverlayInstance = new me({
       trigger: this.triggerElement,
       content: this.contentElement,
       options: {
@@ -601,7 +632,7 @@ var S = class S2 {
         defaultState: this.defaultState,
         beforeShow: this.beforeShow,
         beforeHide: () => {
-          if (O("[data-dropdown-trigger][aria-expanded=true]", this.contentElement).length >= 1)
+          if (S("[data-dropdown-trigger][aria-expanded=true]", this.contentElement).length >= 1)
             return { cancelAction: true };
           this.beforeHide();
         },
@@ -612,11 +643,11 @@ var S = class S2 {
         },
         popper: this.options.popper
       }
-    }), this.moveElOnInit(), this.items = O("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys = me({
+    }), this.moveElOnInit(), this.items = S("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys = fe({
       containerElement: this.contentElement,
       targetChildren: this.items,
       direction: "up-down"
-    }), T.register("dropdown", this.contentElement, this);
+    }), O.register("dropdown", this.contentElement, this), O.initialized(this.contentElement);
   }
   /**
    * Initializes a single dropdown instance
@@ -625,20 +656,20 @@ var S = class S2 {
    * @returns A new Dropdown instance
    */
   static init(e, t = {}) {
-    new S2(e, t);
+    new k2(e, t);
   }
 };
-a(S, "autoInit", (e = "[data-fx-dropdown]") => {
-  const t = O(e);
-  for (const n of t)
-    new S(n);
+a(k, "autoInit", (e = "[data-fx-dropdown]") => {
+  const t = S(e);
+  for (const i of t)
+    new k(i);
 });
-var z = S;
+var B = k;
 
 // src/index.js
 function Dropdown(Alpine) {
   Alpine.directive("dropdown", (el, {}, { cleanup }) => {
-    const dropdown_ = new z(el);
+    const dropdown_ = new B(el);
     cleanup(() => {
       dropdown_.cleanup();
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-dropdown",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "AlpineJS plugin for adding Dropdown functionality to your AlpineJS components",
   "type": "module",
   "private": false,
@@ -60,7 +60,7 @@
     "Flexilla"
   ],
   "dependencies": {
-    "@flexilla/dropdown": "^2.2.3"
+    "@flexilla/dropdown": "^2.2.7"
   },
-  "gitHead": "869394b528d21d4842486a7396449aa9fbe3cbcb"
+  "gitHead": "ae2c044692676906202ec6d8bb7a61a553c3bf74"
 }