npm - @flexilla/alpine-dropdown - Versions diffs - 0.0.1 → 0.1.0 - Mend

@flexilla/alpine-dropdown 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -1,9 +1,21 @@
-<h1 align="center">Alpine Offcanvas</h1>
+<h1 align="center">Alpine Dropdown</h1>
 <p align="center">
-  Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
+  Simple Interactive Dropdown Component for <a href="https://alpinejs.dev">Alpine.js</a>
 </p>
+<p align="center">
+  Part of the <a href="https://flexilla-docs.vercel.app">Flexilla</a> library - A collection of UI components for Alpine.js
+</p>
+## Overview
+The Alpine Dropdown component provides a lightweight and flexible dropdown menu implementation for Alpine.js applications. It features:
+- 🎯 Precise positioning
+- 🎨 Customizable styling with Tailwind CSS support
+- ⌨️ Keyboard navigation support
+- 🔄 Smooth transitions and animations
 ## Installation
@@ -12,32 +24,48 @@
 Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
 ```html
+<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-dropdown@latest/dist/cdn.min.js" defer></script>
 ```
 ### NPM
 ```shell
-npm install @flexilla/alpine-offcanvas
+npm install @flexilla/alpine-dropdown
 ```
-Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.
+Add the `x-dropdown` directive to your project by importing the package **before** starting Alpine.
 ```js
 import Alpine from 'alpinejs';
-import PluginOffcanvas from '@flexilla/alpine-offcanvas';
+import PluginDropdown from '@flexilla/alpine-dropdown';
-Alpine.plugin(PluginOffcanvas);
+Alpine.plugin(PluginDropdown);
 Alpine.start();
 ```
-##  Usage
+## Basic Usage
 ```html
+<button data-dropdown-trigger data-dropdown-id="dropdown-1"
+    class="border border-zinc-800 hover:bg-zinc-950 bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm">
+    Open Dropdown
+</button>
+<div x-dropdown x-data role="list" id="dropdown-1" data-fx-popper
+    class="fixed top-[--fx-popper-placement-y] left-[--fx-popper-placement-x] z-20 w-56 border border-zinc-800 bg-zinc-900/80 text-zinc-50 backdrop-filter backdrop-blur-xl rounded-lg flex flex-col overflow-hidden opacity-0 invisible fx-open:opacity-100 fx-open:visible ease-linear transition-transform translate-y-4 fx-open:translate-y-0">
+    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">
+      Item 1
+    </a>
+    <a href="/" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 2</a>
+    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 3</a>
+    <a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 4</a>
+</div>
 ```
+## Documentation
+For detailed documentation, customization options, and advanced usage examples, visit the [Flexilla Dropdown documentation](https://flexilla-docs.vercel.app/docs/components/dropdown).
 ## License
 Copyright (c) 2025 Johnkat MJ and contributors.

package/dist/cdn.js CHANGED Viewed

@@ -2,12 +2,12 @@
   // ../../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 l = (s, e, t) => q(s, typeof e != "symbol" ? e + "" : 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 h = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t);
-  var J = "bottom";
-  var Q = ({ reference: s, popper: e }) => {
+  var d = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t);
+  var V = "bottom";
+  var X = ({ reference: s, popper: e }) => {
     if (!s || !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);
@@ -21,24 +21,21 @@
       refRight: i.right
     };
   };
-  var V = Object.defineProperty;
-  var X = (s, e, t) => e in s ? V(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
-  var p = (s, e, t) => X(s, typeof e != "symbol" ? e + "" : e, t);
   var Y = (s, e, t, n) => {
     const o = t, i = n - (t + e);
     return o >= (s - e) / 2 && i >= (s - e) / 2;
   };
-  var Z = (s, e, t, n) => (s - e) / 2 <= t && t + s / 2 + e / 2 <= n;
-  var _ = (s, e, t, n, o) => t > o - n ? e() ? window.innerHeight - o : t - o : s() ? 0 : t + n;
-  var ee = (s, e, t, n) => s <= n && t - s <= e;
-  var te = (s, e, t, n) => t <= n && -s <= e;
-  var ne = (s, e, t, n, o, i) => {
-    const r = o - t - i, a = t - n, m = t + i - n + (o - t - i), d = r >= 0 ? o - n : a >= 0 ? t - n : t;
-    return s() ? 0 : e() ? m : d;
+  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 se = (s, e, t, n) => s <= t && e - s - n >= s;
-  var ie = (s, e) => s >= e;
-  var oe = ({
+  var te = (s, e, t, n) => s <= t && e - s - n >= s;
+  var ne = (s, e) => s >= e;
+  var se = ({
     placement: s,
     refWidth: e,
     refTop: t,
@@ -46,27 +43,27 @@
     refHeight: o,
     popperWidth: i,
     popperHeight: r,
-    windowHeight: a,
-    windowWidth: m,
-    offsetDistance: d
+    windowHeight: h,
+    windowWidth: g,
+    offsetDistance: p
   }) => {
-    const c = m - n - e, f = n, v = a - t - o, g = t, w = () => _(
-      () => te(t, o, r, a),
-      () => ee(t, o, r, a),
+    const c = g - n - e, f = n, v = h - t - o, m = t, w = () => Q(
+      () => _(t, o, r, h),
+      () => Z(t, o, r, h),
       t,
       o,
       r
-    ), y = () => ne(
-      () => se(n, m, i, e),
-      () => ie(n, i),
+    ), y = () => ee(
+      () => te(n, g, i, e),
+      () => ne(n, i),
       n,
       i,
-      m,
+      g,
       e
-    ), H = () => Y(i, e, n, m) ? n + e / 2 - i / 2 : y(), C = () => Z(r, o, t, a) ? t + o / 2 - r / 2 : w(), T = () => n + i <= m ? n : y(), O = () => n + e - i >= 0 ? n + e - i : y(), L = () => t + r <= a ? t : w(), G = () => t + o - r >= 0 ? t + o - r : w();
+    ), 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 - d, k = t + o + d, I = n - i - d, D = n + e + d, P = g >= r + d, F = v >= r + d, R = f >= i + d, $ = c >= i + d;
-    switch (s.startsWith("top") ? E = P ? M : F ? k : Math.max(M, k) : s.startsWith("bottom") ? E = F ? k : P ? M : Math.max(k) : s.startsWith("left") ? u = R ? I : $ ? D : Math.max(I, D) : s.startsWith("right") && (u = $ ? D : R ? I : Math.max(D, I)), s) {
+    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) {
       case "bottom":
       case "bottom-middle":
       case "top":
@@ -77,11 +74,11 @@
       case "left-middle":
       case "right":
       case "right-middle":
-        E = C();
+        E = T();
         break;
       case "bottom-start":
       case "top-start":
-        u = T();
+        u = C();
         break;
       case "bottom-end":
       case "top-end":
@@ -98,7 +95,7 @@
     }
     return { x: u, y: E };
   };
-  var re = class {
+  var ie = class {
     /**
      * Flexilla Popper
      * @param reference
@@ -118,51 +115,51 @@
      * @param {Function} [options.onUpdate] - Callback function when position updates
      */
     constructor(e, t, n = {}) {
-      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", () => {
+      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", () => {
         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");
-      }), p(this, "setPopperStyleProperty", (c, f) => {
+      }), 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`);
-      }), p(this, "setInitialStyles", () => {
+      }), d(this, "setInitialStyles", () => {
         this.popper.style.setProperty("--fx-popper-placement-x", ""), this.popper.style.setProperty("--fx-popper-placement-y", "");
-      }), p(this, "initPlacement", () => {
+      }), d(this, "initPlacement", () => {
         var c;
         this.validateElements(), this.setInitialStyles();
-        const f = window.innerWidth, v = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: y, refWidth: H, refLeft: C, refTop: T } = Q({ reference: this.reference, popper: this.popper }), { x: O, y: L } = oe(
+        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(
           {
             placement: this.placement,
             refWidth: H,
-            refTop: T,
-            refLeft: C,
+            refTop: C,
+            refLeft: T,
             popperWidth: w,
             refHeight: y,
-            popperHeight: g,
+            popperHeight: m,
             windowHeight: v,
             windowWidth: f,
             offsetDistance: this.offsetDistance
           }
         );
         this.setPopperStyleProperty(O, L), (c = this.onUpdate) == null || c.call(this, { x: O, y: L, placement: this.placement });
-      }), p(this, "removeWindowEvents", () => {
+      }), d(this, "removeWindowEvents", () => {
         this.isWindowEventsRegistered && (!this.disableOnResize && window.removeEventListener("resize", this.updatePosition), !this.disableOnScroll && window.removeEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = false);
-      }), p(this, "attachWindowEvent", () => {
+      }), d(this, "attachWindowEvent", () => {
         this.isWindowEventsRegistered && this.removeWindowEvents(), this.disableOnResize || window.addEventListener("resize", this.updatePosition), this.disableOnScroll || window.addEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = true;
-      }), p(this, "resetPosition", () => {
+      }), d(this, "resetPosition", () => {
         this.setInitialStyles();
-      }), p(this, "updatePosition", () => {
+      }), d(this, "updatePosition", () => {
         this.initPlacement(), this.attachWindowEvent();
-      }), p(this, "cleanupEvents", () => {
+      }), d(this, "cleanupEvents", () => {
         this.setInitialStyles(), this.removeWindowEvents();
       });
       const {
         offsetDistance: o = 10,
-        placement: i = J,
+        placement: i = V,
         eventEffect: r = {},
-        onUpdate: a
+        onUpdate: h
       } = n;
       if (!(e instanceof HTMLElement))
         throw new Error("Invalid HTMLElement for Reference Element");
@@ -170,8 +167,8 @@
         throw new Error("Invalid HTMLElement for Popper");
       if (n.offsetDistance && typeof n.offsetDistance != "number")
         throw new Error("OffsetDistance must be a number");
-      const { disableOnResize: m, disableOnScroll: d } = r;
-      this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = o, this.placement = i, this.disableOnResize = m || false, this.disableOnScroll = d || false, this.onUpdate = a;
+      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;
     }
     /**
      * Updates popper configuration and recalculates position
@@ -184,6 +181,9 @@
       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) => {
     for (const [t, n] of Object.entries(e))
@@ -197,10 +197,10 @@
   }) => {
     const o = getComputedStyle(s), i = o.transition;
     if (i !== "none" && i !== "" && !n.includes(i)) {
-      const r = "transitionend", a = () => {
-        s.removeEventListener(r, a), e();
+      const r = "transitionend", h = () => {
+        s.removeEventListener(r, h), e();
       };
-      s.addEventListener(r, a, { once: true });
+      s.addEventListener(r, h, { once: true });
     } else
       e();
   };
@@ -216,10 +216,11 @@
     });
   };
   var b = ({ state: s, trigger: e, popper: t }) => {
+    const n = s === "open";
     A(t, {
       "data-state": s
     }), A(e, {
-      "aria-expanded": `${s}`
+      "aria-expanded": `${n}`
     });
   };
   var ce = class {
@@ -229,43 +230,47 @@
      * @param {string | HTMLElement} params.trigger - The trigger element selector or HTMLElement
      * @param {string | HTMLElement} params.content - The content element selector or HTMLElement
      * @param {OverlayOptions} [params.options] - Configuration options for the overlay
-     * @throws {Error} When trigger or content elements are invalid
      */
     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", (i) => typeof i == "string" ? ae(i) : i instanceof HTMLElement ? i : void 0), h(this, "handleDocumentClick", (i) => {
+      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());
-      }), h(this, "handleKeyDown", (i) => {
+      }), l(this, "handleKeyDown", (i) => {
         i.preventDefault(), this.triggerStrategy !== "hover" && i.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
-      }), h(this, "toggleStateOnClick", () => {
+      }), l(this, "toggleStateOnClick", () => {
         (this.contentElement.dataset.state || "close") === "close" ? (this.show(), this.triggerStrategy === "hover" && this.addEventOnMouseEnter()) : this.hide();
-      }), h(this, "hideOnMouseLeaseTrigger", () => {
+      }), l(this, "hideOnMouseLeaseTrigger", () => {
         setTimeout(() => {
           this.contentElement.matches(":hover") || this.hide();
         }, 150);
-      }), h(this, "hideOnMouseLeave", () => {
+      }), l(this, "hideOnMouseLeave", () => {
         setTimeout(() => {
           this.triggerElement.matches(":hover") || this.hide();
         }, 150);
-      }), h(this, "addEventOnMouseEnter", () => {
+      }), l(this, "addEventOnMouseEnter", () => {
         this.triggerElement.addEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.addEventListener("mouseleave", this.hideOnMouseLeave);
-      }), h(this, "showOnMouseEnter", () => {
+      }), l(this, "showOnMouseEnter", () => {
         this.show(), this.addEventOnMouseEnter();
-      }), h(this, "setShowOptions", ({ placement: i, offsetDistance: r }) => {
-        var a, m, d, c;
+      }), l(this, "setShowOptions", ({ placement: i, offsetDistance: r }) => {
+        var h, g, p, c;
         this.popper.setOptions({
           placement: i,
           offsetDistance: r
-        }), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (m = (a = this.options).beforeShow) == null || m.call(a), b({
+        }), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (g = (h = this.options).beforeShow) == null || g.call(h), b({
           state: "open",
           popper: this.contentElement,
           trigger: this.triggerElement
-        }), this.onToggleState(false), (c = (d = this.options).onShow) == null || c.call(d);
-      }), h(this, "setPopperOptions", ({ placement: i, offsetDistance: r }) => {
+        }), this.onToggleState(false), (c = (p = this.options).onShow) == null || c.call(p);
+      }), l(this, "setPopperOptions", ({ placement: i, offsetDistance: r }) => {
         this.popper.setOptions({
           placement: i,
-          offsetDistance: r
+          offsetDistance: r || this.offsetDistance
         });
-      }), h(this, "cleanup", () => {
+      }), l(this, "setPopperTrigger", (i, r) => {
+        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", () => {
         this.triggerElement.removeEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.removeEventListener("mouseenter", this.showOnMouseEnter);
       });
       var o;
@@ -273,7 +278,7 @@
         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 re(
+      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.triggerElement,
         this.contentElement,
         {
@@ -329,42 +334,42 @@
       }), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
     }
   };
-  var W = (s, e = document.body) => e.querySelector(s);
+  var P = (s, e = document.body) => e.querySelector(s);
   var U = (s, e = document.body) => Array.from(e.querySelectorAll(s));
-  var de = (s) => typeof s == "string" ? W(s) : s;
-  var pe = ({ containerElement: s, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
+  var pe = (s) => typeof s == "string" ? P(s) : s;
+  var de = ({ containerElement: s, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
     let n = false;
-    const o = de(s) || document.body, i = typeof e == "string" ? U(e, o) : e, r = (a) => {
-      if (a.preventDefault(), o.focus(), i.length === 0)
+    const o = pe(s) || document.body, i = typeof e == "string" ? U(e, o) : e, r = (h) => {
+      if (h.preventDefault(), o.focus(), i.length === 0)
         return;
-      const m = a.key, d = document.activeElement;
-      let c = i.findIndex((g) => g === d);
+      const g = h.key, p = document.activeElement;
+      let c = i.findIndex((m) => m === p);
       if (c === -1) {
-        m === "ArrowUp" || m === "ArrowLeft" ? i[i.length - 1].focus() : i[0].focus();
+        g === "ArrowUp" || g === "ArrowLeft" ? i[i.length - 1].focus() : i[0].focus();
         return;
       }
-      const f = (g) => g > 0 ? g - 1 : i.length - 1, v = (g) => g < i.length - 1 ? g + 1 : 0;
-      switch (m) {
+      const f = (m) => m > 0 ? m - 1 : i.length - 1, v = (m) => m < i.length - 1 ? m + 1 : 0;
+      switch (g) {
         case "ArrowDown":
-          a.preventDefault(), c = v(c);
+          h.preventDefault(), c = v(c);
           break;
         case "ArrowRight":
           break;
         case "ArrowUp":
-          a.preventDefault(), c = f(c);
+          h.preventDefault(), c = f(c);
           break;
         case "ArrowLeft":
           break;
         case "Home":
-          a.preventDefault(), c = 0;
+          h.preventDefault(), c = 0;
           break;
         case "End":
-          a.preventDefault(), c = i.length - 1;
+          h.preventDefault(), c = i.length - 1;
           break;
         default:
           return;
       }
-      i[c] !== d && i[c].focus();
+      i[c] !== p && i[c].focus();
     };
     return {
       make: () => {
@@ -375,7 +380,7 @@
       }
     };
   };
-  var K = (s, e, t) => {
+  var z = (s, e, t) => {
     const n = new CustomEvent(e, { detail: t });
     s.dispatchEvent(n);
   };
@@ -406,52 +411,58 @@
      * @throws {Error} If provided elements are not valid HTMLElements
      */
     constructor(e, t = {}) {
-      l(this, "triggerElement");
-      l(this, "contentElement");
-      l(this, "options");
-      l(this, "OverlayInstance");
-      l(this, "navigationKeys");
-      l(this, "triggerStrategy");
-      l(this, "placement");
-      l(this, "offsetDistance");
-      l(this, "preventFromCloseOutside");
-      l(this, "preventFromCloseInside");
-      l(this, "defaultState");
-      l(this, "onToggle", ({ isHidden: e2 }) => {
+      a(this, "triggerElement");
+      a(this, "contentElement");
+      a(this, "options");
+      a(this, "OverlayInstance");
+      a(this, "navigationKeys");
+      a(this, "triggerStrategy");
+      a(this, "placement");
+      a(this, "offsetDistance");
+      a(this, "preventFromCloseOutside");
+      a(this, "preventFromCloseInside");
+      a(this, "defaultState");
+      a(this, "onToggle", ({ isHidden: e2 }) => {
         var t2, n2;
         (n2 = (t2 = this.options).onToggle) == null || n2.call(t2, { isHidden: e2 });
       });
-      l(this, "beforeShow", () => {
+      a(this, "beforeShow", () => {
         this.contentElement.focus(), this.navigationKeys.make();
       });
-      l(this, "beforeHide", () => {
+      a(this, "beforeHide", () => {
         this.contentElement.blur(), this.navigationKeys.destroy();
       });
-      l(this, "onShow", () => {
+      a(this, "onShow", () => {
         var e2, t2;
-        K(this.contentElement, "dropdown-show", {
+        z(this.contentElement, "dropdown-show", {
           isHidden: false
         }), (t2 = (e2 = this.options).onShow) == null || t2.call(e2);
       });
-      l(this, "onHide", () => {
+      a(this, "onHide", () => {
         var e2, t2;
-        K(this.contentElement, "dropdown-hide", {
+        z(this.contentElement, "dropdown-hide", {
           isHidden: true
         }), (t2 = (e2 = this.options).onHide) == null || t2.call(e2);
       });
-      l(this, "show", () => {
+      a(this, "show", () => {
         this.OverlayInstance.show();
       });
-      l(this, "hide", () => {
+      a(this, "hide", () => {
         this.OverlayInstance.hide();
       });
-      l(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
+      a(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
         this.OverlayInstance.setShowOptions({ placement: e2, offsetDistance: t2 });
       });
-      l(this, "cleanup", () => {
+      a(this, "setOptions", ({ placement: e2, offsetDistance: t2 }) => {
+        this.OverlayInstance.setPopperOptions({ placement: e2, offsetDistance: t2 });
+      });
+      a(this, "setPopperTrigger", (e2, t2) => {
+        this.OverlayInstance.setPopperTrigger(e2, t2);
+      });
+      a(this, "cleanup", () => {
         this.OverlayInstance.cleanup(), x.removeInstance("dropdown", this.contentElement);
       });
-      const n = typeof e == "string" ? W(e) : e;
+      const n = typeof e == "string" ? P(e) : e;
       if (!(n 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"
@@ -463,7 +474,7 @@
       if (o)
         return o;
       const i = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
-      if (this.triggerElement = W(i), !(this.triggerElement instanceof HTMLElement))
+      if (this.triggerElement = P(i), !(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({
         trigger: this.triggerElement,
@@ -484,7 +495,7 @@
           },
           popper: this.options.popper
         }
-      }), this.navigationKeys = pe({
+      }), this.navigationKeys = de({
         containerElement: this.contentElement,
         targetChildren: "a:not([disabled]), button:not([disabled])",
         direction: "up-down"
@@ -500,17 +511,17 @@
       new S2(e, t);
     }
   };
-  l(S, "autoInit", (e = "[data-fx-dropdown]") => {
+  a(S, "autoInit", (e = "[data-fx-dropdown]") => {
     const t = U(e);
     for (const n of t)
       new S(n);
   });
-  var z = S;
+  var K = S;
   // src/index.js
   function Dropdown(Alpine) {
     Alpine.directive("dropdown", (el, {}, { cleanup }) => {
-      const dropdown_ = new z(el);
+      const dropdown_ = new K(el);
       cleanup(() => {
         dropdown_.cleanup();
       });