@flexilla/alpine-modal 0.1.0 → 0.2.0

package/dist/cdn.js

@@ -1,7 +1,7 @@
 (() => {
   // ../../node_modules/@flexilla/modal/dist/modal.js
-  var p = Object.defineProperty;
-  var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
+  var w = Object.defineProperty;
+  var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
   var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
   var r = (o, t = document.body) => t.querySelector(o);
   var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
@@ -32,7 +32,7 @@
     } else
       t();
   };
-  var y = ({ element: o, callback: t }) => {
+  var p = ({ element: o, callback: t }) => {
     g({
       element: o,
       callback: t,
@@ -44,6 +44,37 @@
     const n = new CustomEvent(t, { detail: e });
     o.dispatchEvent(n);
   };
+  function A(o, t, e = "move") {
+    if (!(o instanceof HTMLElement))
+      throw new Error("Source element must be an HTMLElement");
+    if (!(t instanceof HTMLElement))
+      throw new Error("Target element must be an HTMLElement");
+    if (!["move", "detachable"].includes(e))
+      throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
+    let n = document.createComment("teleporter-placeholder");
+    const a = o.parentNode;
+    return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
+      append() {
+        o.parentNode !== t && t.appendChild(o);
+      },
+      remove() {
+        n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
+      },
+      restore() {
+        n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
+      }
+    }) : (o.parentNode && t.appendChild(o), {
+      append() {
+        t.contains(o) || t.appendChild(o);
+      },
+      remove() {
+        o.parentNode && o.remove();
+      },
+      restore() {
+        n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
+      }
+    });
+  }
   var E = (o, t, e) => {
     if (!(t instanceof HTMLElement))
       throw new Error("No modal-content found");
@@ -51,7 +82,7 @@
     const n = r("[data-modal-overlay]", o);
     n instanceof HTMLElement && n.setAttribute("data-state", e);
   };
-  var A = (o, t, e) => {
+  var C = (o, t, e) => {
     if (!o) {
       t || (document.body.style.overflowY = "auto");
       return;
@@ -77,11 +108,11 @@
       ));
     }
   };
-  var C = (o) => {
+  var L = (o) => {
     var t;
     o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
   };
-  var x = ({ modalContent: o, overlayClassName: t }) => {
+  var T = ({ modalContent: o, overlayClassName: t }) => {
     const e = document.createElement("span");
     return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
   };
@@ -112,6 +143,10 @@
       s(this, "overlayClassName");
       s(this, "allowBodyScroll");
       s(this, "initAsOpen");
+      s(this, "teleporter");
+      s(this, "moveElOnInit", () => {
+        this.teleporter.append();
+      });
       s(this, "closeAll", (t2) => {
         if (this.enableStackedModals)
           return;
@@ -149,12 +184,12 @@
       s(this, "showModal", () => {
         var e2, n2, a2, i2, l2;
         if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
-          if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
+          if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
             modalContent: this.modalContent,
             overlayClassName: this.overlayClassName
           }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
             const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
-            d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
+            d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
               element: this.modalContent,
               callback: () => {
                 this.modalContent.style.removeProperty("--un-modal-animation");
@@ -166,7 +201,7 @@
         }
       });
       s(this, "closeModal", () => {
-        this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
+        this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
       });
       s(this, "closeLastAction", () => {
         var t2, e2, n2, a2;
@@ -189,7 +224,7 @@
           const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
           this.modalContent.style.setProperty("--un-modal-animation", u);
         }
-        y({
+        p({
           element: this.modalContent,
           callback: () => {
             n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
@@ -220,7 +255,7 @@
         throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
       this.modalContent = l;
       const d = a.dataset.modalId;
-      this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
+      this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
     }
     initializeTriggers(t, e) {
       if (!t && e) {
@@ -252,7 +287,7 @@
   * Creates and initializes a new Modal instance
   */
   s(m, "init", (t, e = {}, n) => new m(t, e, n));
-  var w = m;
+  var y = m;
 
   // src/index.js
   function Modal(Alpine) {
@@ -280,7 +315,7 @@
         );
         return;
       }
-      const modalInstance = new w(el, {
+      const modalInstance = new y(el, {
         dispatchEventToDocument: false
       });
       if (!Alpine.store("modals")) {

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var I=Object.defineProperty,T=(e,t,o)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t,o)=>T(e,typeof t!="symbol"?t+"":t,o),v=(e,t=document.body)=>t.querySelector(e),y=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let o=t.parentElement;if(o)o.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},k=({element:e,callback:t,type:o,keysCheck:s})=>{let l=getComputedStyle(e),d=l.animation;if(d!=="none"&&d!==""&&!s.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},A=({element:e,callback:t})=>{k({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,o)=>{let s=new CustomEvent(t,{detail:o});e.dispatchEvent(s)},C=(e,t,o)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",o==="open"?"false":"true"),e.setAttribute("data-state",o),t.setAttribute("data-state",o);let s=v("[data-modal-overlay]",e);s instanceof HTMLElement&&s.setAttribute("data-state",o)},$=(e,t,o)=>{if(!e){t||(document.body.style.overflowY="auto");return}y("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(s=>s!==o).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,o,s){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,o)||(window.$flexillaInstances[t].push({element:o,instance:s}),s)}static getInstance(t,o){var s,l;return this.initGlobalRegistry(),(l=(s=window.$flexillaInstances[t])==null?void 0:s.find(d=>d.element===o))==null?void 0:l.instance}static removeInstance(t,o){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(s=>s.element!==o))}},H=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},B=({modalContent:e,overlayClassName:t})=>{let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),D({newElement:o,existingElement:e}),o.classList.add(...t),o.setAttribute("data-modal-overlay",""),o},f=class{constructor(t,o={},s){a(this,"modalElement"),a(this,"modalId"),a(this,"modalContent"),a(this,"triggerButtons",[]),a(this,"overlayElement"),a(this,"dispatchEventToDocument"),a(this,"options"),a(this,"state"),a(this,"animationEnter"),a(this,"animationExit"),a(this,"animateContent"),a(this,"hasDefaultOverlay"),a(this,"enableStackedModals"),a(this,"preventCloseModal"),a(this,"isKeyDownEventRegistered"),a(this,"closeButtons"),a(this,"overlayClassName"),a(this,"allowBodyScroll"),a(this,"initAsOpen"),a(this,"closeAll",n=>{if(this.enableStackedModals)return;let r=y("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==n.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),a(this,"closeModalEsc",n=>{n.key==="Escape"&&(n.preventDefault(),this.preventCloseModal||this.hideModal())}),a(this,"initModal",(n,r)=>{var i;if(!(n instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:p,enableStackedModals:b}=r;this.allowBodyScroll=n.hasAttribute("data-allow-body-scroll")&&n.getAttribute("data-allow-body-scroll")!=="false"||m||!1,this.preventCloseModal=n.hasAttribute("data-prevent-close-modal")&&n.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=n.hasAttribute("data-enable-stacked")&&n.getAttribute("data-enable-stacked")!=="false"||b||!1,this.overlayClassName=((i=n.dataset.modalOverlay)==null?void 0:i.split(" "))||p?.split(" ")||"",this.isKeyDownEventRegistered=!1,n.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=y("[data-close-modal]",n),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",n)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",n),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),a(this,"closeModalOnX",n=>{n.preventDefault(),this.hideModal()}),a(this,"addEvents",()=>{for(let n of this.triggerButtons)n.addEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),a(this,"showModal",()=>{var n,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:B({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(n=this.overlayElement)==null||n.setAttribute("data-state","open"),g(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),C(this.modalElement,this.modalContent,"open"),A({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),a(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),$(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||H(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),a(this,"closeLastAction",()=>{var n,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(n=this.options).onHide)==null||r.call(n),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),a(this,"hideModal",()=>{var n,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let p=(i=(r=(n=this.options).beforeHide)==null?void 0:r.call(n))==null?void 0:i.cancelAction;if(E||p)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}A({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),a(this,"cleanup",()=>{for(let n of this.triggerButtons)n.removeEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.removeEventListener("click",this.closeModalOnX);!this.preventCloseModal&&this.overlayElement instanceof HTMLElement&&this.overlayElement.removeEventListener("click",this.hideModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:close`,this.hideModal),w.removeInstance("modal",this.modalElement)}),a(this,"setOptions",({state:n,allowBodyscroll:r})=>{n&&(this.state=n),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let l=typeof t=="string"?v(t):t;if(!(l instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=l,this.options=o,this.state=o?.defaultState||this.modalElement.dataset.state||"close";let d=w.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",l);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=l.dataset.modalId;this.modalId=`${u}`,this.initializeTriggers(s,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),w.register("modal",this.modalElement,this)}initializeTriggers(t,o){if(!t&&o){let l=y(`[data-modal-target='${o}'], [data-modal-trigger][data-modal-id='${o}']`);this.triggerButtons=l;return}if(!t)return;let s=Array.isArray(t)?t:[t];this.triggerButtons=s.map(l=>{if(typeof l=="string"){let d=v(l);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${l}`);return d}if(!(l instanceof HTMLElement))throw new Error("Invalid trigger element provided");return l})}};a(f,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new f(o)}),a(f,"init",(e,t={},o)=>new f(e,t,o));var L=f;function S(e){e.directive("modal",(t,{},{cleanup:o})=>{let s=t.getAttribute("data-modal-id");if(!s){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!(t instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let d=new L(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[s]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${s}:open`,c),document.addEventListener(`modal:${s}:close`,u),o(()=>{d.cleanup(),delete e.store("modals")[s],document.removeEventListener(`modal:${s}:open`,c),document.removeEventListener(`modal:${s}:close`,u)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var x=S;document.addEventListener("alpine:init",()=>{x(window.Alpine)});})();
+(()=>{var I=Object.defineProperty,x=(e,t,n)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,l=(e,t,n)=>x(e,typeof t!="symbol"?t+"":t,n),v=(e,t=document.body)=>t.querySelector(e),p=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=t.parentElement;if(n)n.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},H=({element:e,callback:t,type:n,keysCheck:o})=>{let s=getComputedStyle(e),d=s.animation;if(d!=="none"&&d!==""&&!o.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},L=({element:e,callback:t})=>{H({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,n)=>{let o=new CustomEvent(t,{detail:n});e.dispatchEvent(o)};function k(e,t,n="move"){if(!(e instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(t instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(n))throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);let o=document.createComment("teleporter-placeholder"),s=e.parentNode;return s?s.insertBefore(o,e):console.warn("Element has no parent; placeholder not inserted."),n==="move"?(e.parentNode&&t.appendChild(e),{append(){e.parentNode!==t&&t.appendChild(e)},remove(){o!=null&&o.parentNode&&e.parentNode&&o.parentNode.insertBefore(e,o)},restore(){o!=null&&o.parentNode&&e.parentNode!==s&&o.parentNode.insertBefore(e,o)}}):(e.parentNode&&t.appendChild(e),{append(){t.contains(e)||t.appendChild(e)},remove(){e.parentNode&&e.remove()},restore(){o!=null&&o.parentNode&&!e.parentNode&&o.parentNode.insertBefore(e,o)}})}var C=(e,t,n)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",n==="open"?"false":"true"),e.setAttribute("data-state",n),t.setAttribute("data-state",n);let o=v("[data-modal-overlay]",e);o instanceof HTMLElement&&o.setAttribute("data-state",n)},B=(e,t,n)=>{if(!e){t||(document.body.style.overflowY="auto");return}p("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(o=>o!==n).length===0&&!t&&(document.body.style.overflowY="auto")},y=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,n,o){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,n)||(window.$flexillaInstances[t].push({element:n,instance:o}),o)}static getInstance(t,n){var o,s;return this.initGlobalRegistry(),(s=(o=window.$flexillaInstances[t])==null?void 0:o.find(d=>d.element===n))==null?void 0:s.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(o=>o.element!==n))}},$=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},N=({modalContent:e,overlayClassName:t})=>{let n=document.createElement("span");return n.setAttribute("aria-hidden","true"),D({newElement:n,existingElement:e}),n.classList.add(...t),n.setAttribute("data-modal-overlay",""),n},f=class{constructor(t,n={},o){l(this,"modalElement"),l(this,"modalId"),l(this,"modalContent"),l(this,"triggerButtons",[]),l(this,"overlayElement"),l(this,"dispatchEventToDocument"),l(this,"options"),l(this,"state"),l(this,"animationEnter"),l(this,"animationExit"),l(this,"animateContent"),l(this,"hasDefaultOverlay"),l(this,"enableStackedModals"),l(this,"preventCloseModal"),l(this,"isKeyDownEventRegistered"),l(this,"closeButtons"),l(this,"overlayClassName"),l(this,"allowBodyScroll"),l(this,"initAsOpen"),l(this,"teleporter"),l(this,"moveElOnInit",()=>{this.teleporter.append()}),l(this,"closeAll",a=>{if(this.enableStackedModals)return;let r=p("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==a.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),l(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),l(this,"initModal",(a,r)=>{var i;if(!(a instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:w,enableStackedModals:b}=r;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||m||!1,this.preventCloseModal=a.hasAttribute("data-prevent-close-modal")&&a.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=a.hasAttribute("data-enable-stacked")&&a.getAttribute("data-enable-stacked")!=="false"||b||!1,this.overlayClassName=((i=a.dataset.modalOverlay)==null?void 0:i.split(" "))||w?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=p("[data-close-modal]",a),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",a)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",a),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),l(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),l(this,"addEvents",()=>{for(let a of this.triggerButtons)a.addEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let a of this.closeButtons)a.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),l(this,"showModal",()=>{var a,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:N({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.setAttribute("data-state","open"),g(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),C(this.modalElement,this.modalContent,"open"),L({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),l(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),B(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||$(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),l(this,"closeLastAction",()=>{var a,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(a=this.options).onHide)==null||r.call(a),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),l(this,"hideModal",()=>{var a,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let w=(i=(r=(a=this.options).beforeHide)==null?void 0:r.call(a))==null?void 0:i.cancelAction;if(E||w)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}L({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),l(this,"cleanup",()=>{for(let a of this.triggerButtons)a.removeEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let a of this.closeButtons)a.removeEventListener("click",this.closeModalOnX);!this.preventCloseModal&&this.overlayElement instanceof HTMLElement&&this.overlayElement.removeEventListener("click",this.hideModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:close`,this.hideModal),y.removeInstance("modal",this.modalElement)}),l(this,"setOptions",({state:a,allowBodyscroll:r})=>{a&&(this.state=a),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let s=typeof t=="string"?v(t):t;if(!(s instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=s,this.options=n,this.state=n?.defaultState||this.modalElement.dataset.state||"close";let d=y.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",s);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=s.dataset.modalId;this.modalId=`${u}`,this.teleporter=k(this.modalElement,document.body,"move"),this.initializeTriggers(o,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),this.moveElOnInit(),y.register("modal",this.modalElement,this)}initializeTriggers(t,n){if(!t&&n){let s=p(`[data-modal-target='${n}'], [data-modal-trigger][data-modal-id='${n}']`);this.triggerButtons=s;return}if(!t)return;let o=Array.isArray(t)?t:[t];this.triggerButtons=o.map(s=>{if(typeof s=="string"){let d=v(s);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${s}`);return d}if(!(s instanceof HTMLElement))throw new Error("Invalid trigger element provided");return s})}};l(f,"autoInit",(e="[data-fx-modal]")=>{let t=p(e);for(let n of t)new f(n)}),l(f,"init",(e,t={},n)=>new f(e,t,n));var A=f;function S(e){e.directive("modal",(t,{},{cleanup:n})=>{let o=t.getAttribute("data-modal-id");if(!o){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!(t instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let d=new A(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[o]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${o}:open`,c),document.addEventListener(`modal:${o}:close`,u),n(()=>{d.cleanup(),delete e.store("modals")[o],document.removeEventListener(`modal:${o}:open`,c),document.removeEventListener(`modal:${o}:close`,u)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var T=S;document.addEventListener("alpine:init",()=>{T(window.Alpine)});})();

package/dist/module.cjs.js

@@ -24,8 +24,8 @@ __export(module_exports, {
 module.exports = __toCommonJS(module_exports);
 
 // ../../node_modules/@flexilla/modal/dist/modal.js
-var p = Object.defineProperty;
-var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
+var w = Object.defineProperty;
+var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
 var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
 var r = (o, t = document.body) => t.querySelector(o);
 var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
@@ -56,7 +56,7 @@ var g = ({
   } else
     t();
 };
-var y = ({ element: o, callback: t }) => {
+var p = ({ element: o, callback: t }) => {
   g({
     element: o,
     callback: t,
@@ -68,6 +68,37 @@ var f = (o, t, e) => {
   const n = new CustomEvent(t, { detail: e });
   o.dispatchEvent(n);
 };
+function A(o, t, e = "move") {
+  if (!(o instanceof HTMLElement))
+    throw new Error("Source element must be an HTMLElement");
+  if (!(t instanceof HTMLElement))
+    throw new Error("Target element must be an HTMLElement");
+  if (!["move", "detachable"].includes(e))
+    throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
+  let n = document.createComment("teleporter-placeholder");
+  const a = o.parentNode;
+  return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
+    append() {
+      o.parentNode !== t && t.appendChild(o);
+    },
+    remove() {
+      n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
+    },
+    restore() {
+      n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
+    }
+  }) : (o.parentNode && t.appendChild(o), {
+    append() {
+      t.contains(o) || t.appendChild(o);
+    },
+    remove() {
+      o.parentNode && o.remove();
+    },
+    restore() {
+      n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
+    }
+  });
+}
 var E = (o, t, e) => {
   if (!(t instanceof HTMLElement))
     throw new Error("No modal-content found");
@@ -75,7 +106,7 @@ var E = (o, t, e) => {
   const n = r("[data-modal-overlay]", o);
   n instanceof HTMLElement && n.setAttribute("data-state", e);
 };
-var A = (o, t, e) => {
+var C = (o, t, e) => {
   if (!o) {
     t || (document.body.style.overflowY = "auto");
     return;
@@ -101,11 +132,11 @@ var v = class {
     ));
   }
 };
-var C = (o) => {
+var L = (o) => {
   var t;
   o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
 };
-var x = ({ modalContent: o, overlayClassName: t }) => {
+var T = ({ modalContent: o, overlayClassName: t }) => {
   const e = document.createElement("span");
   return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
 };
@@ -136,6 +167,10 @@ var m = class m2 {
     s(this, "overlayClassName");
     s(this, "allowBodyScroll");
     s(this, "initAsOpen");
+    s(this, "teleporter");
+    s(this, "moveElOnInit", () => {
+      this.teleporter.append();
+    });
     s(this, "closeAll", (t2) => {
       if (this.enableStackedModals)
         return;
@@ -173,12 +208,12 @@ var m = class m2 {
     s(this, "showModal", () => {
       var e2, n2, a2, i2, l2;
       if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
-        if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
+        if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
           modalContent: this.modalContent,
           overlayClassName: this.overlayClassName
         }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
           const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
-          d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
+          d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
             element: this.modalContent,
             callback: () => {
               this.modalContent.style.removeProperty("--un-modal-animation");
@@ -190,7 +225,7 @@ var m = class m2 {
       }
     });
     s(this, "closeModal", () => {
-      this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
+      this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
     });
     s(this, "closeLastAction", () => {
       var t2, e2, n2, a2;
@@ -213,7 +248,7 @@ var m = class m2 {
         const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
         this.modalContent.style.setProperty("--un-modal-animation", u);
       }
-      y({
+      p({
         element: this.modalContent,
         callback: () => {
           n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
@@ -244,7 +279,7 @@ var m = class m2 {
       throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
     this.modalContent = l;
     const d = a.dataset.modalId;
-    this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
+    this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
   }
   initializeTriggers(t, e) {
     if (!t && e) {
@@ -276,7 +311,7 @@ s(m, "autoInit", (t = "[data-fx-modal]") => {
 * Creates and initializes a new Modal instance
 */
 s(m, "init", (t, e = {}, n) => new m(t, e, n));
-var w = m;
+var y = m;
 
 // src/index.js
 function Modal(Alpine) {
@@ -304,7 +339,7 @@ function Modal(Alpine) {
       );
       return;
     }
-    const modalInstance = new w(el, {
+    const modalInstance = new y(el, {
       dispatchEventToDocument: false
     });
     if (!Alpine.store("modals")) {

package/dist/module.esm.js

@@ -1,6 +1,6 @@
 // ../../node_modules/@flexilla/modal/dist/modal.js
-var p = Object.defineProperty;
-var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
+var w = Object.defineProperty;
+var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
 var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
 var r = (o, t = document.body) => t.querySelector(o);
 var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
@@ -31,7 +31,7 @@ var g = ({
   } else
     t();
 };
-var y = ({ element: o, callback: t }) => {
+var p = ({ element: o, callback: t }) => {
   g({
     element: o,
     callback: t,
@@ -43,6 +43,37 @@ var f = (o, t, e) => {
   const n = new CustomEvent(t, { detail: e });
   o.dispatchEvent(n);
 };
+function A(o, t, e = "move") {
+  if (!(o instanceof HTMLElement))
+    throw new Error("Source element must be an HTMLElement");
+  if (!(t instanceof HTMLElement))
+    throw new Error("Target element must be an HTMLElement");
+  if (!["move", "detachable"].includes(e))
+    throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
+  let n = document.createComment("teleporter-placeholder");
+  const a = o.parentNode;
+  return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
+    append() {
+      o.parentNode !== t && t.appendChild(o);
+    },
+    remove() {
+      n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
+    },
+    restore() {
+      n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
+    }
+  }) : (o.parentNode && t.appendChild(o), {
+    append() {
+      t.contains(o) || t.appendChild(o);
+    },
+    remove() {
+      o.parentNode && o.remove();
+    },
+    restore() {
+      n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
+    }
+  });
+}
 var E = (o, t, e) => {
   if (!(t instanceof HTMLElement))
     throw new Error("No modal-content found");
@@ -50,7 +81,7 @@ var E = (o, t, e) => {
   const n = r("[data-modal-overlay]", o);
   n instanceof HTMLElement && n.setAttribute("data-state", e);
 };
-var A = (o, t, e) => {
+var C = (o, t, e) => {
   if (!o) {
     t || (document.body.style.overflowY = "auto");
     return;
@@ -76,11 +107,11 @@ var v = class {
     ));
   }
 };
-var C = (o) => {
+var L = (o) => {
   var t;
   o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
 };
-var x = ({ modalContent: o, overlayClassName: t }) => {
+var T = ({ modalContent: o, overlayClassName: t }) => {
   const e = document.createElement("span");
   return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
 };
@@ -111,6 +142,10 @@ var m = class m2 {
     s(this, "overlayClassName");
     s(this, "allowBodyScroll");
     s(this, "initAsOpen");
+    s(this, "teleporter");
+    s(this, "moveElOnInit", () => {
+      this.teleporter.append();
+    });
     s(this, "closeAll", (t2) => {
       if (this.enableStackedModals)
         return;
@@ -148,12 +183,12 @@ var m = class m2 {
     s(this, "showModal", () => {
       var e2, n2, a2, i2, l2;
       if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
-        if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
+        if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
           modalContent: this.modalContent,
           overlayClassName: this.overlayClassName
         }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
           const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
-          d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
+          d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
             element: this.modalContent,
             callback: () => {
               this.modalContent.style.removeProperty("--un-modal-animation");
@@ -165,7 +200,7 @@ var m = class m2 {
       }
     });
     s(this, "closeModal", () => {
-      this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
+      this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
     });
     s(this, "closeLastAction", () => {
       var t2, e2, n2, a2;
@@ -188,7 +223,7 @@ var m = class m2 {
         const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
         this.modalContent.style.setProperty("--un-modal-animation", u);
       }
-      y({
+      p({
         element: this.modalContent,
         callback: () => {
           n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
@@ -219,7 +254,7 @@ var m = class m2 {
       throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
     this.modalContent = l;
     const d = a.dataset.modalId;
-    this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
+    this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
   }
   initializeTriggers(t, e) {
     if (!t && e) {
@@ -251,7 +286,7 @@ s(m, "autoInit", (t = "[data-fx-modal]") => {
 * Creates and initializes a new Modal instance
 */
 s(m, "init", (t, e = {}, n) => new m(t, e, n));
-var w = m;
+var y = m;
 
 // src/index.js
 function Modal(Alpine) {
@@ -279,7 +314,7 @@ function Modal(Alpine) {
       );
       return;
     }
-    const modalInstance = new w(el, {
+    const modalInstance = new y(el, {
       dispatchEventToDocument: false
     });
     if (!Alpine.store("modals")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-modal",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
   "type": "module",
   "private": false,
@@ -66,7 +66,7 @@
     "Dissmiss"
   ],
   "dependencies": {
-    "@flexilla/modal": "^2.2.0"
+    "@flexilla/modal": "^2.3.1"
   },
-  "gitHead": "34cb017e7b29fb1ee10ded1d4317256fa7167093"
+  "gitHead": "869394b528d21d4842486a7396449aa9fbe3cbcb"
 }