@flexilla/alpine-dropdown 0.1.0 → 0.2.0

package/dist/module.cjs.js

@@ -24,70 +24,70 @@ __export(module_exports, {
 module.exports = __toCommonJS(module_exports);
 
 // ../../node_modules/@flexilla/dropdown/dist/dropdown.js
-var j = Object.defineProperty;
-var q = (s, e, t) => e in s ? j(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
-var a = (s, e, t) => q(s, typeof e != "symbol" ? e + "" : e, t);
 var B = Object.defineProperty;
-var N = (s, e, t) => e in s ? B(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
-var d = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t);
+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: s, popper: e }) => {
-  if (!s || !e)
+var X = ({ reference: i, popper: e }) => {
+  if (!i || !e)
     throw new Error("Reference or popper element is null or undefined");
-  const t = /* @__PURE__ */ new WeakMap(), n = (r) => (t.has(r) || t.set(r, r.getBoundingClientRect()), t.get(r)), o = n(e), i = n(s);
+  const t = /* @__PURE__ */ new WeakMap(), n = (o) => (t.has(o) || t.set(o, o.getBoundingClientRect()), t.get(o)), r = n(e), s = n(i);
   return {
-    popperHeight: o.height,
-    popperWidth: o.width,
-    refHeight: i.height,
-    refWidth: i.width,
-    refLeft: i.left,
-    refTop: i.top,
-    refRight: i.right
+    popperHeight: r.height,
+    popperWidth: r.width,
+    refHeight: s.height,
+    refWidth: s.width,
+    refLeft: s.left,
+    refTop: s.top,
+    refRight: s.right
   };
 };
-var Y = (s, e, t, n) => {
-  const o = t, i = n - (t + e);
-  return o >= (s - e) / 2 && i >= (s - e) / 2;
+var Y = (i, e, t, n) => {
+  const r = t, s = n - (t + e);
+  return r >= (i - e) / 2 && s >= (i - e) / 2;
 };
-var J = (s, e, t, n) => (s - e) / 2 <= t && t + s / 2 + e / 2 <= n;
-var Q = (s, e, t, n, o) => t > o - n ? e() ? window.innerHeight - o : t - o : s() ? 0 : t + n;
-var Z = (s, e, t, n) => s <= n && t - s <= e;
-var _ = (s, e, t, n) => t <= n && -s <= e;
-var ee = (s, e, t, n, o, i) => {
-  const r = o - t - i, h = t - n, g = t + i - n + (o - t - i), p = r >= 0 ? o - n : h >= 0 ? t - n : t;
-  return s() ? 0 : e() ? g : p;
+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 te = (s, e, t, n) => s <= t && e - s - n >= s;
-var ne = (s, e) => s >= e;
-var se = ({
-  placement: s,
+var te = (i, e, t, n) => i <= t && e - i - n >= i;
+var ne = (i, e) => i >= e;
+var ie = ({
+  placement: i,
   refWidth: e,
   refTop: t,
   refLeft: n,
-  refHeight: o,
-  popperWidth: i,
-  popperHeight: r,
-  windowHeight: h,
-  windowWidth: g,
-  offsetDistance: p
+  refHeight: r,
+  popperWidth: s,
+  popperHeight: o,
+  windowHeight: l,
+  windowWidth: m,
+  offsetDistance: c
 }) => {
-  const c = g - n - e, f = n, v = h - t - o, m = t, w = () => Q(
-    () => _(t, o, r, h),
-    () => Z(t, o, r, h),
+  const d = m - n - e, f = n, E = l - t - r, g = t, w = () => Q(
+    () => _(t, r, o, l),
+    () => Z(t, r, o, l),
     t,
-    o,
-    r
-  ), y = () => ee(
-    () => te(n, g, i, e),
-    () => ne(n, i),
+    r,
+    o
+  ), b = () => ee(
+    () => te(n, m, s, e),
+    () => ne(n, s),
     n,
-    i,
-    g,
+    s,
+    m,
     e
-  ), H = () => Y(i, e, n, g) ? n + e / 2 - i / 2 : y(), T = () => J(r, o, t, h) ? t + o / 2 - r / 2 : w(), C = () => n + i <= g ? n : y(), O = () => n + e - i >= 0 ? n + e - i : y(), L = () => t + r <= h ? t : w(), G = () => t + o - r >= 0 ? t + o - r : w();
-  let u = 0, E = 0;
-  const M = t - r - p, k = t + o + p, D = n - i - p, I = n + e + p, W = m >= r + p, F = v >= r + p, R = f >= i + p, $ = c >= i + p;
-  switch (s.startsWith("top") ? E = W ? M : F ? k : Math.max(M, k) : s.startsWith("bottom") ? E = F ? k : W ? M : Math.max(k) : s.startsWith("left") ? u = R ? D : $ ? I : Math.max(D, I) : s.startsWith("right") && (u = $ ? I : R ? D : Math.max(I, D)), s) {
+  ), 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();
+  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) {
     case "bottom":
     case "bottom-middle":
     case "top":
@@ -98,28 +98,28 @@ var se = ({
     case "left-middle":
     case "right":
     case "right-middle":
-      E = T();
+      v = M();
       break;
     case "bottom-start":
     case "top-start":
-      u = C();
+      u = A();
       break;
     case "bottom-end":
     case "top-end":
-      u = O();
+      u = k();
       break;
     case "left-start":
     case "right-start":
-      E = L();
+      v = L();
       break;
     case "left-end":
     case "right-end":
-      E = G();
+      v = U();
       break;
   }
-  return { x: u, y: E };
+  return { x: u, y: v };
 };
-var ie = class {
+var se = class {
   /**
    * Flexilla Popper 
    * @param reference 
@@ -139,51 +139,51 @@ var ie = class {
    * @param {Function} [options.onUpdate] - Callback function when position updates
    */
   constructor(e, t, n = {}) {
-    d(this, "reference"), d(this, "popper"), d(this, "offsetDistance"), d(this, "placement"), d(this, "disableOnResize"), d(this, "disableOnScroll"), d(this, "onUpdate"), d(this, "isWindowEventsRegistered"), d(this, "validateElements", () => {
+    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");
       if (!(this.popper instanceof HTMLElement))
         throw new Error("Invalid HTMLElement for Popper");
       if (typeof this.offsetDistance != "number")
         throw new Error("OffsetDistance must be a number");
-    }), d(this, "setPopperStyleProperty", (c, f) => {
-      this.popper.style.setProperty("--fx-popper-placement-x", `${c}px`), this.popper.style.setProperty("--fx-popper-placement-y", `${f}px`);
-    }), d(this, "setInitialStyles", () => {
+    }), p(this, "setPopperStyleProperty", (d, f) => {
+      this.popper.style.setProperty("--fx-popper-placement-x", `${d}px`), this.popper.style.setProperty("--fx-popper-placement-y", `${f}px`);
+    }), p(this, "setInitialStyles", () => {
       this.popper.style.setProperty("--fx-popper-placement-x", ""), this.popper.style.setProperty("--fx-popper-placement-y", "");
-    }), d(this, "initPlacement", () => {
-      var c;
+    }), p(this, "initPlacement", () => {
+      var d;
       this.validateElements(), this.setInitialStyles();
-      const f = window.innerWidth, v = window.innerHeight, { popperHeight: m, popperWidth: w, refHeight: y, refWidth: H, refLeft: T, refTop: C } = X({ reference: this.reference, popper: this.popper }), { x: O, y: L } = se(
+      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(
         {
           placement: this.placement,
           refWidth: H,
-          refTop: C,
-          refLeft: T,
+          refTop: A,
+          refLeft: M,
           popperWidth: w,
-          refHeight: y,
-          popperHeight: m,
-          windowHeight: v,
+          refHeight: b,
+          popperHeight: g,
+          windowHeight: E,
           windowWidth: f,
           offsetDistance: this.offsetDistance
         }
       );
-      this.setPopperStyleProperty(O, L), (c = this.onUpdate) == null || c.call(this, { x: O, y: L, placement: this.placement });
-    }), d(this, "removeWindowEvents", () => {
+      this.setPopperStyleProperty(k, L), (d = this.onUpdate) == null || d.call(this, { x: k, y: L, 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);
-    }), d(this, "attachWindowEvent", () => {
+    }), p(this, "attachWindowEvent", () => {
       this.isWindowEventsRegistered && this.removeWindowEvents(), this.disableOnResize || window.addEventListener("resize", this.updatePosition), this.disableOnScroll || window.addEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = true;
-    }), d(this, "resetPosition", () => {
+    }), p(this, "resetPosition", () => {
       this.setInitialStyles();
-    }), d(this, "updatePosition", () => {
+    }), p(this, "updatePosition", () => {
       this.initPlacement(), this.attachWindowEvent();
-    }), d(this, "cleanupEvents", () => {
+    }), p(this, "cleanupEvents", () => {
       this.setInitialStyles(), this.removeWindowEvents();
     });
     const {
-      offsetDistance: o = 10,
-      placement: i = V,
-      eventEffect: r = {},
-      onUpdate: h
+      offsetDistance: r = 10,
+      placement: s = V,
+      eventEffect: o = {},
+      onUpdate: l
     } = n;
     if (!(e instanceof HTMLElement))
       throw new Error("Invalid HTMLElement for Reference Element");
@@ -191,8 +191,8 @@ var ie = class {
       throw new Error("Invalid HTMLElement for Popper");
     if (n.offsetDistance && typeof n.offsetDistance != "number")
       throw new Error("OffsetDistance must be a number");
-    const { disableOnResize: g, disableOnScroll: p } = r;
-    this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = o, this.placement = i, this.disableOnResize = g || false, this.disableOnScroll = p || false, this.onUpdate = h;
+    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;
   }
   /**
    * Updates popper configuration and recalculates position
@@ -205,45 +205,49 @@ var ie = class {
     this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
   }
 };
-var oe = Object.defineProperty;
-var re = (s, e, t) => e in s ? oe(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
-var l = (s, e, t) => re(s, typeof e != "symbol" ? e + "" : e, t);
-var ae = (s, e = document.body) => e.querySelector(s);
-var A = (s, e) => {
+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))
-    s.setAttribute(t, n);
+    i.setAttribute(t, n);
 };
 var le = ({
-  element: s,
+  element: i,
   callback: e,
   type: t,
   keysCheck: n
 }) => {
-  const o = getComputedStyle(s), i = o.transition;
-  if (i !== "none" && i !== "" && !n.includes(i)) {
-    const r = "transitionend", h = () => {
-      s.removeEventListener(r, h), e();
+  const r = getComputedStyle(i), s = r.transition;
+  if (s !== "none" && s !== "" && !n.includes(s)) {
+    const o = "transitionend", l = () => {
+      i.removeEventListener(o, l), e();
     };
-    s.addEventListener(r, h, { once: true });
+    i.addEventListener(o, l, { once: true });
   } else
     e();
 };
 var he = ({
-  element: s,
+  element: i,
   callback: e
 }) => {
   le({
-    element: s,
+    element: i,
     callback: e,
     type: "transition",
     keysCheck: ["all 0s ease 0s", "all"]
   });
 };
-var b = ({ state: s, trigger: e, popper: t }) => {
-  const n = s === "open";
-  A(t, {
-    "data-state": s
-  }), A(e, {
+var de = (i, e, t) => {
+  const n = new CustomEvent(e, { detail: t });
+  i.dispatchEvent(n);
+};
+var y = ({ state: i, trigger: e, popper: t }) => {
+  const n = i === "open";
+  N(t, {
+    "data-state": i
+  }), N(e, {
     "aria-expanded": `${n}`
   });
 };
@@ -256,53 +260,53 @@ var ce = class {
    * @param {OverlayOptions} [params.options] - Configuration options for the overlay
    */
   constructor({ trigger: e, content: t, options: n = {} }) {
-    l(this, "triggerElement"), l(this, "contentElement"), l(this, "triggerStrategy"), l(this, "placement"), l(this, "offsetDistance"), l(this, "preventFromCloseOutside"), l(this, "preventFromCloseInside"), l(this, "options"), l(this, "defaultState"), l(this, "popper"), l(this, "eventEffect"), l(this, "getElement", (i) => typeof i == "string" ? ae(i) : i instanceof HTMLElement ? i : void 0), l(this, "handleDocumentClick", (i) => {
-      this.contentElement.getAttribute("data-state") === "open" && (!this.triggerElement.contains(i.target) && !this.preventFromCloseInside && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && !this.contentElement.contains(i.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && !this.contentElement.contains(i.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && this.contentElement.contains(i.target) && !this.preventFromCloseInside && this.hide());
-    }), l(this, "handleKeyDown", (i) => {
-      i.preventDefault(), this.triggerStrategy !== "hover" && i.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
-    }), l(this, "toggleStateOnClick", () => {
+    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) => {
+      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());
+    }), h(this, "toggleStateOnClick", () => {
       (this.contentElement.dataset.state || "close") === "close" ? (this.show(), this.triggerStrategy === "hover" && this.addEventOnMouseEnter()) : this.hide();
-    }), l(this, "hideOnMouseLeaseTrigger", () => {
+    }), h(this, "hideOnMouseLeaseTrigger", () => {
       setTimeout(() => {
         this.contentElement.matches(":hover") || this.hide();
       }, 150);
-    }), l(this, "hideOnMouseLeave", () => {
+    }), h(this, "hideOnMouseLeave", () => {
       setTimeout(() => {
         this.triggerElement.matches(":hover") || this.hide();
       }, 150);
-    }), l(this, "addEventOnMouseEnter", () => {
+    }), h(this, "addEventOnMouseEnter", () => {
       this.triggerElement.addEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.addEventListener("mouseleave", this.hideOnMouseLeave);
-    }), l(this, "showOnMouseEnter", () => {
+    }), h(this, "showOnMouseEnter", () => {
       this.show(), this.addEventOnMouseEnter();
-    }), l(this, "setShowOptions", ({ placement: i, offsetDistance: r }) => {
-      var h, g, p, c;
+    }), h(this, "setShowOptions", ({ placement: s, offsetDistance: o }) => {
+      var l, m, c, d;
       this.popper.setOptions({
-        placement: i,
-        offsetDistance: r
-      }), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (g = (h = this.options).beforeShow) == null || g.call(h), b({
+        placement: s,
+        offsetDistance: o
+      }), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (m = (l = this.options).beforeShow) == null || m.call(l), y({
         state: "open",
         popper: this.contentElement,
         trigger: this.triggerElement
-      }), this.onToggleState(false), (c = (p = this.options).onShow) == null || c.call(p);
-    }), l(this, "setPopperOptions", ({ placement: i, offsetDistance: r }) => {
+      }), this.onToggleState(false), (d = (c = this.options).onShow) == null || d.call(c);
+    }), h(this, "setPopperOptions", ({ placement: s, offsetDistance: o }) => {
       this.popper.setOptions({
-        placement: i,
-        offsetDistance: r || this.offsetDistance
+        placement: s,
+        offsetDistance: o || this.offsetDistance
       });
-    }), l(this, "setPopperTrigger", (i, r) => {
+    }), h(this, "setPopperTrigger", (s, o) => {
       this.cleanup(), this.popper.setOptions({
-        placement: r.placement || this.placement,
-        offsetDistance: r.offsetDistance || this.offsetDistance
-      }), this.triggerElement = i, this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
-    }), l(this, "cleanup", () => {
+        placement: o.placement || this.placement,
+        offsetDistance: o.offsetDistance || this.offsetDistance
+      }), this.triggerElement = s, this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
+    }), h(this, "cleanup", () => {
       this.triggerElement.removeEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.removeEventListener("mouseenter", this.showOnMouseEnter);
     });
-    var o;
+    var r;
     if (this.contentElement = this.getElement(t), this.triggerElement = this.getElement(e), !(this.triggerElement instanceof HTMLElement))
       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 = (o = this.options.popper) == null ? void 0 : o.eventEffect, this.popper = new ie(
+    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.triggerElement,
       this.contentElement,
       {
@@ -321,94 +325,132 @@ var ce = class {
    * Positions the overlay, adds event listeners, and triggers related callbacks
    */
   show() {
-    var e, t, n, o;
-    this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), b({
+    var e, t, n, 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), (o = (n = this.options).onShow) == null || o.call(n);
+    }), this.onToggleState(false), (r = (n = this.options).onShow) == null || r.call(n);
   }
   /**
    * Hides the overlay
    * Removes event listeners and triggers related callbacks
    */
   hide() {
-    var e, t;
-    (t = (e = this.options).beforeHide) == null || t.call(e), b({
+    var e, t, n;
+    let r = false;
+    de(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;
+    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({
       element: this.contentElement,
       callback: () => {
-        var n, o;
-        this.onToggleState(true), this.popper.cleanupEvents(), (o = (n = this.options).onHide) == null || o.call(n);
+        var o, l;
+        this.onToggleState(true), this.popper.cleanupEvents(), (l = (o = this.options).onHide) == null || l.call(o);
       }
-    });
+    }));
   }
   initInstance() {
-    b({
+    y({
       state: this.defaultState,
       popper: this.contentElement,
       trigger: this.triggerElement
-    }), this.defaultState === "open" ? this.show() : b({
+    }), this.defaultState === "open" ? this.show() : y({
       state: "close",
       popper: this.contentElement,
       trigger: this.triggerElement
     }), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
   }
 };
-var P = (s, e = document.body) => e.querySelector(s);
-var U = (s, e = document.body) => Array.from(e.querySelectorAll(s));
-var pe = (s) => typeof s == "string" ? P(s) : s;
-var de = ({ containerElement: s, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
+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 o = pe(s) || document.body, i = typeof e == "string" ? U(e, o) : e, r = (h) => {
-    if (h.preventDefault(), o.focus(), i.length === 0)
+  const r = pe(i) || document.body, s = typeof e == "string" ? O(e, r) : e, o = (l) => {
+    if (l.preventDefault(), r.focus(), s.length === 0)
       return;
-    const g = h.key, p = document.activeElement;
-    let c = i.findIndex((m) => m === p);
-    if (c === -1) {
-      g === "ArrowUp" || g === "ArrowLeft" ? i[i.length - 1].focus() : i[0].focus();
+    const m = l.key, c = document.activeElement;
+    let d = s.findIndex((g) => g === c);
+    if (d === -1) {
+      m === "ArrowUp" || m === "ArrowLeft" ? s[s.length - 1].focus() : s[0].focus();
       return;
     }
-    const f = (m) => m > 0 ? m - 1 : i.length - 1, v = (m) => m < i.length - 1 ? m + 1 : 0;
-    switch (g) {
+    const f = (g) => g > 0 ? g - 1 : s.length - 1, E = (g) => g < s.length - 1 ? g + 1 : 0;
+    switch (m) {
       case "ArrowDown":
-        h.preventDefault(), c = v(c);
+        l.preventDefault(), d = E(d);
         break;
       case "ArrowRight":
         break;
       case "ArrowUp":
-        h.preventDefault(), c = f(c);
+        l.preventDefault(), d = f(d);
         break;
       case "ArrowLeft":
         break;
       case "Home":
-        h.preventDefault(), c = 0;
+        l.preventDefault(), d = 0;
         break;
       case "End":
-        h.preventDefault(), c = i.length - 1;
+        l.preventDefault(), d = s.length - 1;
         break;
       default:
         return;
     }
-    i[c] !== p && i[c].focus();
+    s[d] !== c && s[d].focus();
   };
   return {
     make: () => {
-      n || (document.addEventListener("keydown", r), n = true);
+      n || (document.addEventListener("keydown", o), n = true);
     },
     destroy: () => {
-      n && (document.removeEventListener("keydown", r), n = false);
+      n && (document.removeEventListener("keydown", o), n = false);
     }
   };
 };
-var z = (s, e, t) => {
+var K = (i, e, t) => {
   const n = new CustomEvent(e, { detail: t });
-  s.dispatchEvent(n);
+  i.dispatchEvent(n);
 };
-var x = class {
+function ge(i, e, t = "move") {
+  if (!(i 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), {
+    append() {
+      i.parentNode !== e && e.appendChild(i);
+    },
+    remove() {
+      n != null && n.parentNode && i.parentNode && n.parentNode.insertBefore(i, n);
+    },
+    restore() {
+      n != null && n.parentNode && i.parentNode !== r && n.parentNode.insertBefore(i, n);
+    }
+  }) : (i.parentNode && e.appendChild(i), {
+    append() {
+      e.contains(i) || e.appendChild(i);
+    },
+    remove() {
+      i.parentNode && i.remove();
+    },
+    restore() {
+      n != null && n.parentNode && !i.parentNode && n.parentNode.insertBefore(i, n);
+    }
+  });
+}
+var T = class {
   static initGlobalRegistry() {
     window.$flexillaInstances || (window.$flexillaInstances = {});
   }
@@ -416,10 +458,10 @@ var x = class {
     return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: n }), n);
   }
   static getInstance(e, t) {
-    var n, o;
-    return this.initGlobalRegistry(), (o = (n = window.$flexillaInstances[e]) == null ? void 0 : n.find(
-      (i) => i.element === t
-    )) == null ? void 0 : o.instance;
+    var n, r;
+    return this.initGlobalRegistry(), (r = (n = window.$flexillaInstances[e]) == null ? void 0 : n.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(
@@ -427,6 +469,10 @@ var x = class {
     ));
   }
 };
+var fe = {
+  teleport: true,
+  teleportMode: "move"
+};
 var S = class S2 {
   /**
    * Creates a new Dropdown instance
@@ -437,43 +483,108 @@ var S = class S2 {
   constructor(e, t = {}) {
     a(this, "triggerElement");
     a(this, "contentElement");
+    a(this, "items", []);
     a(this, "options");
     a(this, "OverlayInstance");
     a(this, "navigationKeys");
+    a(this, "keyObserver");
+    a(this, "subtriggerObserver");
     a(this, "triggerStrategy");
     a(this, "placement");
     a(this, "offsetDistance");
     a(this, "preventFromCloseOutside");
     a(this, "preventFromCloseInside");
     a(this, "defaultState");
+    a(this, "experimentalOptions");
+    a(this, "teleporter");
+    a(this, "updateSubtriggerAttr", (e2, t2) => {
+      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, {
+          attributes: true,
+          attributeFilter: ["aria-expanded"]
+        });
+    });
+    a(this, "observeEl", () => {
+      this.keyObserver = new MutationObserver((e2) => {
+        for (const t2 of e2)
+          t2.type === "attributes" && t2.attributeName === "aria-expanded" && (t2.target.getAttribute("aria-expanded") === "true" ? this.navigationKeys.destroy() : this.contentElement.dataset.state === "open" && this.navigationKeys.make());
+      }), this.updateObserverFor(this.keyObserver);
+    });
+    a(this, "observeSubtriggers", () => {
+      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");
+          }
+      }), this.updateObserverFor(this.subtriggerObserver);
+    });
     a(this, "onToggle", ({ isHidden: e2 }) => {
       var t2, n2;
       (n2 = (t2 = this.options).onToggle) == null || n2.call(t2, { isHidden: e2 });
     });
+    a(this, "moveElOnInit", () => {
+      this.experimentalOptions.teleport && (this.experimentalOptions.teleportMode === "detachable" ? this.teleporter.remove() : this.teleporter.append());
+    });
+    a(this, "moveEl", () => {
+      this.experimentalOptions.teleport && this.experimentalOptions.teleportMode === "detachable" && this.teleporter.remove();
+    });
+    a(this, "restoreEl", () => {
+      this.experimentalOptions.teleport && this.experimentalOptions.teleportMode === "detachable" && this.teleporter.append();
+    });
     a(this, "beforeShow", () => {
-      this.contentElement.focus(), this.navigationKeys.make();
+      this.restoreEl(), this.contentElement.focus(), this.navigationKeys.make(), this.addArrowEvent();
     });
     a(this, "beforeHide", () => {
-      this.contentElement.blur(), this.navigationKeys.destroy();
+      this.contentElement.blur(), this.navigationKeys.destroy(), this.removeArrowEvent();
+    });
+    a(this, "showHideOnArrow", (e2) => {
+      e2.preventDefault();
+      const t2 = e2.key, n2 = document.activeElement;
+      if (n2 != null && n2.hasAttribute("data-dropdown-trigger"))
+        switch (t2) {
+          case "ArrowRight":
+            n2.getAttribute("aria-expanded") !== "true" && (n2.click(), this.updateSubtriggerAttr(n2, "add"));
+            break;
+          case "ArrowLeft":
+            n2.getAttribute("aria-expanded") === "true" && (n2.click(), this.updateSubtriggerAttr(n2, "remove"));
+            break;
+          default:
+            return;
+        }
+      if (this.triggerElement.hasAttribute("data-current-subtrigger"))
+        switch (t2) {
+          case "ArrowLeft":
+            this.triggerElement.click(), this.triggerElement.focus(), this.updateSubtriggerAttr(this.triggerElement, "remove");
+            break;
+          default:
+            return;
+        }
+    });
+    a(this, "addArrowEvent", () => {
+      document.addEventListener("keydown", this.showHideOnArrow);
+    });
+    a(this, "removeArrowEvent", () => {
+      document.removeEventListener("keydown", this.showHideOnArrow);
     });
     a(this, "onShow", () => {
       var e2, t2;
-      z(this.contentElement, "dropdown-show", {
+      K(this.contentElement, "dropdown-show", {
         isHidden: false
-      }), (t2 = (e2 = this.options).onShow) == null || t2.call(e2);
+      }), (t2 = (e2 = this.options).onShow) == null || t2.call(e2), this.observeEl(), this.observeSubtriggers();
     });
     a(this, "onHide", () => {
       var e2, t2;
-      z(this.contentElement, "dropdown-hide", {
+      K(this.contentElement, "dropdown-hide", {
         isHidden: true
-      }), (t2 = (e2 = this.options).onHide) == null || t2.call(e2);
-    });
-    a(this, "show", () => {
-      this.OverlayInstance.show();
-    });
-    a(this, "hide", () => {
-      this.OverlayInstance.hide();
+      }), (t2 = (e2 = this.options).onHide) == null || t2.call(e2), this.moveEl(), this.triggerElement.hasAttribute("data-current-subtrigger") && this.updateSubtriggerAttr(this.triggerElement, "remove"), this.disconnectObserver();
     });
+    a(this, "show", () => this.OverlayInstance.show());
+    a(this, "hide", () => this.OverlayInstance.hide());
     a(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
       this.OverlayInstance.setShowOptions({ placement: e2, offsetDistance: t2 });
     });
@@ -483,8 +594,11 @@ var S = class S2 {
     a(this, "setPopperTrigger", (e2, t2) => {
       this.OverlayInstance.setPopperTrigger(e2, t2);
     });
+    a(this, "disconnectObserver", () => {
+      this.keyObserver && this.keyObserver.disconnect(), this.subtriggerObserver && this.subtriggerObserver.disconnect();
+    });
     a(this, "cleanup", () => {
-      this.OverlayInstance.cleanup(), x.removeInstance("dropdown", this.contentElement);
+      this.disconnectObserver(), this.OverlayInstance.cleanup(), T.removeInstance("dropdown", this.contentElement);
     });
     const n = typeof e == "string" ? P(e) : e;
     if (!(n instanceof HTMLElement))
@@ -494,13 +608,13 @@ var S = class S2 {
     if (!n.id)
       throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
     this.contentElement = n;
-    const o = x.getInstance("dropdown", this.contentElement);
-    if (o)
-      return o;
-    const i = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
-    if (this.triggerElement = P(i), !(this.triggerElement instanceof HTMLElement))
+    const r = T.getInstance("dropdown", this.contentElement);
+    if (r)
+      return r;
+    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.options.triggerStrategy || this.contentElement.dataset.triggerStrategy || "click", this.placement = this.options.placement || this.contentElement.dataset.placement || "bottom-start", this.offsetDistance = this.options.offsetDistance || parseInt(`${this.contentElement.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || this.contentElement.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || this.contentElement.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || this.contentElement.dataset.defaultState || "close", 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({}, fe, t.experimental), this.teleporter = ge(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.OverlayInstance = new ce({
       trigger: this.triggerElement,
       content: this.contentElement,
       options: {
@@ -511,19 +625,23 @@ var S = class S2 {
         preventCloseFromInside: this.preventFromCloseInside,
         defaultState: this.defaultState,
         beforeShow: this.beforeShow,
-        beforeHide: this.beforeHide,
+        beforeHide: () => {
+          if (O("[data-dropdown-trigger][aria-expanded=true]", this.contentElement).length >= 1)
+            return { cancelAction: true };
+          this.beforeHide();
+        },
         onShow: this.onShow,
         onHide: this.onHide,
-        onToggle: ({ isHidden: r }) => {
-          this.onToggle({ isHidden: r });
+        onToggle: ({ isHidden: o }) => {
+          this.onToggle({ isHidden: o });
         },
         popper: this.options.popper
       }
-    }), this.navigationKeys = de({
+    }), this.moveElOnInit(), this.items = O("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys = me({
       containerElement: this.contentElement,
-      targetChildren: "a:not([disabled]), button:not([disabled])",
+      targetChildren: this.items,
       direction: "up-down"
-    }), x.register("dropdown", this.contentElement, this);
+    }), T.register("dropdown", this.contentElement, this);
   }
   /**
    * Initializes a single dropdown instance
@@ -536,16 +654,16 @@ var S = class S2 {
   }
 };
 a(S, "autoInit", (e = "[data-fx-dropdown]") => {
-  const t = U(e);
+  const t = O(e);
   for (const n of t)
     new S(n);
 });
-var K = S;
+var z = S;
 
 // src/index.js
 function Dropdown(Alpine) {
   Alpine.directive("dropdown", (el, {}, { cleanup }) => {
-    const dropdown_ = new K(el);
+    const dropdown_ = new z(el);
     cleanup(() => {
       dropdown_.cleanup();
     });