@flexilla/alpine-offcanvas 0.2.0 → 0.3.0

package/dist/cdn.js

@@ -4,7 +4,7 @@
   var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
   var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
   var m = (t, e = document.body) => e.querySelector(t);
-  var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
+  var h = (t, e = document.body) => Array.from(e.querySelectorAll(t));
   var y = ({
     newElement: t,
     existingElement: e
@@ -25,10 +25,10 @@
   }) => {
     const a = getComputedStyle(t), i = a.transition;
     if (i !== "none" && i !== "" && !s.includes(i)) {
-      const l = "transitionend", r = () => {
-        t.removeEventListener(l, r), e();
+      const l = "transitionend", c = () => {
+        t.removeEventListener(l, c), e();
       };
-      t.addEventListener(l, r, { once: true });
+      t.addEventListener(l, c, { once: true });
     } else
       e();
   };
@@ -43,11 +43,11 @@
       keysCheck: ["all 0s ease 0s", "all"]
     });
   };
-  var h = (t, e, n) => {
+  var v = (t, e, n) => {
     const s = new CustomEvent(e, { detail: n });
     t.dispatchEvent(s);
   };
-  function A(t) {
+  function B(t) {
     const e = () => {
       document.querySelector(
         "[data-fx-component]:not([data-component-initialized])"
@@ -55,7 +55,7 @@
     };
     e();
   }
-  function B(t, e, n = "move") {
+  function A(t, e, n = "move") {
     if (!(t instanceof HTMLElement))
       throw new Error("Source element must be an HTMLElement");
     if (!(e instanceof HTMLElement))
@@ -86,7 +86,7 @@
       }
     });
   }
-  var S = (t) => {
+  var I = (t) => {
     var e;
     return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
   };
@@ -94,11 +94,11 @@
     t.setAttribute("data-state", "invisible"), O({
       element: t,
       callback() {
-        S(t);
+        I(t);
       }
     });
   };
-  var x = (t, e) => {
+  var L = (t, e) => {
     const n = t;
     if (n === "" || !n)
       return;
@@ -109,23 +109,23 @@
     return n !== "" && s.classList.add(...a), s;
   };
   var u = (t, e, n) => {
-    t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
+    t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || S(n);
   };
-  var L = (t) => {
+  var S = (t) => {
     document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
   };
-  var I = (t, e) => {
+  var T = (t, e) => {
     if (t === e)
       return;
     t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
     const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
     n instanceof HTMLElement && C(n);
   };
-  var T = (t) => {
-    const e = v("[data-fx-offcanvas][data-state=open]");
+  var x = (t) => {
+    const e = h("[data-fx-offcanvas][data-state=open]");
     if (!(e.length <= 0))
       for (const n of e)
-        I(n, t);
+        T(n, t);
   };
   var d = class {
     static initGlobalRegistry() {
@@ -174,41 +174,52 @@
       o(this, "offCanvasElement");
       o(this, "offCanvasTriggers");
       o(this, "offCanvasCloseBtns");
+      o(this, "offCanvasId", "");
+      o(this, "dispatchEventToDocument");
       o(this, "allowBodyScroll");
       o(this, "staticBackdrop");
       o(this, "backdrop");
       o(this, "options");
       o(this, "teleporter");
       o(this, "moveElOnInit", () => {
-        A(() => this.teleporter.append());
+        B(() => this.teleporter.append());
       });
       o(this, "closeWhenClickOutSide", (e2) => {
         const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
         n2 && s2 && this.closeOffCanvas();
       });
       o(this, "closeOffCanvas", () => {
-        var i2, l2, r2, c2, p;
+        var i2, l2, c2, r2, p;
         let e2 = false;
-        if (h(this.offCanvasElement, "offcanvas-before-hide", {
+        if (v(this.offCanvasElement, "offcanvas-before-hide", {
           offcanvasId: this.offCanvasElement.id,
           setExitAction: (b) => {
             e2 = b;
           }
-        }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
+        }), ((c2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : c2.cancelAction) || e2)
           return;
         const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
         a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
           this.offCanvasElement,
           this.allowBodyScroll,
           "close"
-        ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
+        ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
       });
       o(this, "closeWithEsc", (e2) => {
         e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
       });
+      o(this, "closeFromCloseBtn", (e2) => {
+        e2.target.blur(), this.closeOffCanvas();
+      });
       o(this, "changeState", () => {
         this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
       });
+      o(this, "open", () => {
+        this.openOffCanvas();
+      });
+      o(this, "close", () => {
+        this.closeOffCanvas();
+      });
       o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
         e2 !== void 0 && (this.allowBodyScroll = e2);
       });
@@ -220,65 +231,42 @@
       if (a)
         return a;
       d.setup(this.offCanvasElement), this.options = n;
-      const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
+      const { staticBackdrop: i, allowBodyScroll: l, backdrop: c } = this.options;
       this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
-      const c = this.offCanvasElement.getAttribute("id");
-      this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
+      const r = this.offCanvasElement.getAttribute("id");
+      if (!r || r === "")
+        throw new Error("\u274C id is required but missing on element:");
+      this.offCanvasId = r, this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = c || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = A(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
     }
     findOffCanvasElements(e, n, s, a) {
-      return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
+      return n ? h(`${e}`, a) : h(`${e}[data-target=${s}]`);
     }
     setupAttributes() {
       this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
     }
     openOffCanvas() {
       var s, a, i, l;
-      (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
+      (a = (s = this.options).beforeShow) == null || a.call(s), x(this.offCanvasElement), u(
         this.offCanvasElement,
         this.allowBodyScroll,
         "open"
       );
-      const e = this.offCanvasElement.getAttribute("id"), n = x(
+      const e = this.offCanvasElement.getAttribute("id"), n = L(
         this.backdrop,
         e
       );
-      n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
+      n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
     }
     initCloseBtns() {
       for (const e of this.offCanvasCloseBtns)
-        e.addEventListener("click", this.closeOffCanvas);
+        e.addEventListener("click", this.closeFromCloseBtn);
     }
     initTriggers() {
       for (const e of this.offCanvasTriggers)
         e.addEventListener("click", this.changeState);
     }
     setupOffcanvas() {
-      this.initTriggers(), this.initCloseBtns();
-    }
-    /**
-     * Opens the offcanvas element.
-     * @example
-     * ```ts
-     * const offcanvas = new Offcanvas('#sidebar');
-     * offcanvas.open();
-     * ```
-     */
-    open() {
-      this.openOffCanvas();
-    }
-    /**
-     * Closes the offcanvas element.
-     * This method will trigger the beforeHide callback if provided,
-     * remove the backdrop if present, and finally trigger the onHide callback.
-     * 
-     * @example
-     * ```ts
-     * const offcanvas = new Offcanvas('#sidebar');
-     * offcanvas.close();
-     * ```
-     */
-    close() {
-      this.closeOffCanvas();
+      this.initTriggers(), this.initCloseBtns(), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:close`, this.close);
     }
     /**
      * Cleans up the offcanvas instance by removing event listeners and references.
@@ -296,11 +284,11 @@
         e.removeEventListener("click", this.changeState);
       for (const e of this.offCanvasCloseBtns)
         e.removeEventListener("click", this.closeOffCanvas);
-      document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
+      document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:close`, this.close), d.removeInstance("offcanvas", this.offCanvasElement);
     }
   };
   o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
-    const n = v(e);
+    const n = h(e);
     for (const s of n)
       new f(s);
   }), /**

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var I=Object.defineProperty,A=(t,e,s)=>e in t?I(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e,s)=>A(t,typeof e!="symbol"?e+"":e,s),E=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),S=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let s=e.parentElement;if(s)s.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},T=({element:t,callback:e,type:s,keysCheck:n})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!n.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},$=({element:t,callback:e})=>{T({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},p=(t,e,s)=>{let n=new CustomEvent(e,{detail:s});t.dispatchEvent(n)};function H(t){let e=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(e):t()};e()}function N(t,e,s="move"){if(!(t 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(s))throw new Error(`Invalid teleport mode: ${s}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),a=t.parentNode;return a?a.insertBefore(n,t):console.warn("Element has no parent; placeholder not inserted."),s==="move"?(t.parentNode&&e.appendChild(t),{append(){t.parentNode!==e&&e.appendChild(t)},remove(){n!=null&&n.parentNode&&t.parentNode&&n.parentNode.insertBefore(t,n)},restore(){n!=null&&n.parentNode&&t.parentNode!==a&&n.parentNode.insertBefore(t,n)}}):(t.parentNode&&e.appendChild(t),{append(){e.contains(t)||e.appendChild(t)},remove(){t.parentNode&&t.remove()},restore(){n!=null&&n.parentNode&&!t.parentNode&&n.parentNode.insertBefore(t,n)}})}var M=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),$({element:t,callback(){M(t)}})},W=(t,e)=>{let s=t;if(s===""||!s)return;let n=document.createElement("div");if(n.setAttribute("aria-hidden","true"),n.setAttribute("data-state","visible"),n.setAttribute("data-fx-offcanvas-overlay",""),n.setAttribute("data-offcanvas-el",e),s==="")return;let a=s.split(" ");return s!==""&&n.classList.add(...a),n},y=(t,e,s)=>{t.setAttribute("aria-hidden",s==="open"?"false":"true"),t.setAttribute("data-state",s),e||z(s)},z=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},q=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let s=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);s instanceof HTMLElement&&k(s)},G=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let s of e)q(s,t)},f=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,n){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:n}),n)}static getInstance(e,s){var n,a;return this.initGlobalRegistry(),(a=(n=window.$flexillaInstances[e])==null?void 0:n.find(i=>i.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(n=>n.element!==s))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}},c=class{constructor(e,s={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"teleporter"),o(this,"moveElOnInit",()=>{H(()=>this.teleporter.append())}),o(this,"closeWhenClickOutSide",r=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(r.target)&&![...this.offCanvasTriggers].includes(r.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var r,v,h,b,w;let g=!1;if(p(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:x=>{g=x}}),((h=(v=(r=this.options).beforeHide)==null?void 0:v.call(r))==null?void 0:h.cancelAction)||g)return;let B=this.offCanvasElement.getAttribute("id"),u=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${B}]`);u instanceof HTMLElement&&k(u),this.offCanvasElement.blur(),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),p(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",r=>{r.key==="Escape"&&(r.preventDefault(),this.closeOffCanvas())}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"setOptions",({allowBodyscroll:r})=>{r!==void 0&&(this.allowBodyScroll=r)});let n=typeof e=="string"?E(e):e;if(!(n instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");this.offCanvasElement=n;let a=f.getInstance("offcanvas",n);if(a)return a;f.setup(this.offCanvasElement),this.options=s;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.setupAttributes(),this.staticBackdrop=i||n.hasAttribute("data-static-backdrop")&&n.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||n.hasAttribute("data-allow-body-scroll")&&n.dataset.allowBodyScroll!=="false"||!1;let C=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,C),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,C,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.teleporter=N(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),f.register("offcanvas",this.offCanvasElement,this),f.initialized(this.offCanvasElement)}findOffCanvasElements(e,s,n,a){return s?m(`${e}`,a):m(`${e}[data-target=${n}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,s,n,a;(s=(e=this.options).beforeShow)==null||s.call(e),G(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),l=W(this.backdrop,i);l instanceof HTMLElement&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(n=this.options).onShow)==null||a.call(n),p(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),f.removeInstance("offcanvas",this.offCanvasElement)}};o(c,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let s of e)new c(s)}),o(c,"init",(t,e={})=>new c(t,e));var L=c;function R(t){t.directive("offcanvas",(e,{},{cleanup:s})=>{let n=e.getAttribute("id");if(!n){console.error("\u274C id is required but missing on element:",e);return}let a=new L(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[n]=a;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${n}:open`,i),document.addEventListener(`sheet:${n}:close`,l),s(()=>{document.removeEventListener(`sheet:${n}:open`,i),document.removeEventListener(`sheet:${n}:close`,l),a.cleanup(),delete t.store("sheets")[n]})}),t.magic("offcanvas",e=>s=>t.store("sheets")?t.store("sheets")[s]?t.store("sheets")[s]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${s}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var O=R;document.addEventListener("alpine:init",()=>{O(window.Alpine)});})();
+(()=>{var T=Object.defineProperty,x=(t,e,s)=>e in t?T(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e,s)=>x(t,typeof e!="symbol"?e+"":e,s),C=(t,e=document.body)=>e.querySelector(t),u=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),A=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let s=e.parentElement;if(s)s.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},$=({element:t,callback:e,type:s,keysCheck:n})=>{let a=getComputedStyle(t),l=a.transition;if(l!=="none"&&l!==""&&!n.includes(l)){let r="transitionend",h=()=>{t.removeEventListener(r,h),e()};t.addEventListener(r,h,{once:!0})}else e()},S=({element:t,callback:e})=>{$({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(t,e,s)=>{let n=new CustomEvent(e,{detail:s});t.dispatchEvent(n)};function H(t){let e=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(e):t()};e()}function N(t,e,s="move"){if(!(t 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(s))throw new Error(`Invalid teleport mode: ${s}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),a=t.parentNode;return a?a.insertBefore(n,t):console.warn("Element has no parent; placeholder not inserted."),s==="move"?(t.parentNode&&e.appendChild(t),{append(){t.parentNode!==e&&e.appendChild(t)},remove(){n!=null&&n.parentNode&&t.parentNode&&n.parentNode.insertBefore(t,n)},restore(){n!=null&&n.parentNode&&t.parentNode!==a&&n.parentNode.insertBefore(t,n)}}):(t.parentNode&&e.appendChild(t),{append(){e.contains(t)||e.appendChild(t)},remove(){t.parentNode&&t.remove()},restore(){n!=null&&n.parentNode&&!t.parentNode&&n.parentNode.insertBefore(t,n)}})}var M=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},L=t=>{t.setAttribute("data-state","invisible"),S({element:t,callback(){M(t)}})},D=(t,e)=>{let s=t;if(s===""||!s)return;let n=document.createElement("div");if(n.setAttribute("aria-hidden","true"),n.setAttribute("data-state","visible"),n.setAttribute("data-fx-offcanvas-overlay",""),n.setAttribute("data-offcanvas-el",e),s==="")return;let a=s.split(" ");return s!==""&&n.classList.add(...a),n},y=(t,e,s)=>{t.setAttribute("aria-hidden",s==="open"?"false":"true"),t.setAttribute("data-state",s),e||W(s)},W=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},q=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let s=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);s instanceof HTMLElement&&L(s)},z=t=>{let e=u("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let s of e)q(s,t)},c=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,n){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:n}),n)}static getInstance(e,s){var n,a;return this.initGlobalRegistry(),(a=(n=window.$flexillaInstances[e])==null?void 0:n.find(l=>l.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(n=>n.element!==s))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}},d=class{constructor(e,s={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"offCanvasId",""),o(this,"dispatchEventToDocument"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"teleporter"),o(this,"moveElOnInit",()=>{H(()=>this.teleporter.append())}),o(this,"closeWhenClickOutSide",i=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",m=!this.offCanvasElement.contains(i.target)&&![...this.offCanvasTriggers].includes(i.target);v&&m&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var i,v,m,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:O=>{g=O}}),((m=(v=(i=this.options).beforeHide)==null?void 0:v.call(i))==null?void 0:m.cancelAction)||g)return;let I=this.offCanvasElement.getAttribute("id"),p=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${I}]`);p instanceof HTMLElement&&L(p),this.offCanvasElement.blur(),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!p&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",i=>{i.key==="Escape"&&(i.preventDefault(),this.closeOffCanvas())}),o(this,"closeFromCloseBtn",i=>{i.target.blur(),this.closeOffCanvas()}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"open",()=>{this.openOffCanvas()}),o(this,"close",()=>{this.closeOffCanvas()}),o(this,"setOptions",({allowBodyscroll:i})=>{i!==void 0&&(this.allowBodyScroll=i)});let n=typeof e=="string"?C(e):e;if(!(n instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");this.offCanvasElement=n;let a=c.getInstance("offcanvas",n);if(a)return a;c.setup(this.offCanvasElement),this.options=s;let{staticBackdrop:l,allowBodyScroll:r,backdrop:h}=this.options;this.setupAttributes(),this.staticBackdrop=l||n.hasAttribute("data-static-backdrop")&&n.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=r||n.hasAttribute("data-allow-body-scroll")&&n.dataset.allowBodyScroll!=="false"||!1;let f=this.offCanvasElement.getAttribute("id");if(!f||f==="")throw new Error("\u274C id is required but missing on element:");this.offCanvasId=f,this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,f),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,f,this.offCanvasElement),this.backdrop=h||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.dispatchEventToDocument=this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.teleporter=N(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),c.register("offcanvas",this.offCanvasElement,this),c.initialized(this.offCanvasElement)}findOffCanvasElements(e,s,n,a){return s?u(`${e}`,a):u(`${e}[data-target=${n}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,s,n,a;(s=(e=this.options).beforeShow)==null||s.call(e),z(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let l=this.offCanvasElement.getAttribute("id"),r=D(this.backdrop,l);r instanceof HTMLElement&&(A({newElement:r,existingElement:this.offCanvasElement}),this.staticBackdrop||r.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(n=this.options).onShow)==null||a.call(n),E(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeFromCloseBtn)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns(),this.dispatchEventToDocument&&document.addEventListener(`sheet:${this.offCanvasId}:open`,this.open),this.dispatchEventToDocument&&document.addEventListener(`sheet:${this.offCanvasId}:close`,this.close)}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),this.dispatchEventToDocument&&document.removeEventListener(`sheet:${this.offCanvasId}:open`,this.open),this.dispatchEventToDocument&&document.removeEventListener(`sheet:${this.offCanvasId}:close`,this.close),c.removeInstance("offcanvas",this.offCanvasElement)}};o(d,"autoInit",(t="[data-fx-offcanvas]")=>{let e=u(t);for(let s of e)new d(s)}),o(d,"init",(t,e={})=>new d(t,e));var k=d;function F(t){t.directive("offcanvas",(e,{},{cleanup:s})=>{let n=e.getAttribute("id");if(!n){console.error("\u274C id is required but missing on element:",e);return}let a=new k(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[n]=a;let l=()=>a.open(),r=()=>a.close();document.addEventListener(`sheet:${n}:open`,l),document.addEventListener(`sheet:${n}:close`,r),s(()=>{document.removeEventListener(`sheet:${n}:open`,l),document.removeEventListener(`sheet:${n}:close`,r),a.cleanup(),delete t.store("sheets")[n]})}),t.magic("offcanvas",e=>s=>t.store("sheets")?t.store("sheets")[s]?t.store("sheets")[s]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${s}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var B=F;document.addEventListener("alpine:init",()=>{B(window.Alpine)});})();

package/dist/module.cjs.js

@@ -28,7 +28,7 @@ var g = Object.defineProperty;
 var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
 var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
 var m = (t, e = document.body) => e.querySelector(t);
-var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
+var h = (t, e = document.body) => Array.from(e.querySelectorAll(t));
 var y = ({
   newElement: t,
   existingElement: e
@@ -49,10 +49,10 @@ var k = ({
 }) => {
   const a = getComputedStyle(t), i = a.transition;
   if (i !== "none" && i !== "" && !s.includes(i)) {
-    const l = "transitionend", r = () => {
-      t.removeEventListener(l, r), e();
+    const l = "transitionend", c = () => {
+      t.removeEventListener(l, c), e();
     };
-    t.addEventListener(l, r, { once: true });
+    t.addEventListener(l, c, { once: true });
   } else
     e();
 };
@@ -67,11 +67,11 @@ var O = ({
     keysCheck: ["all 0s ease 0s", "all"]
   });
 };
-var h = (t, e, n) => {
+var v = (t, e, n) => {
   const s = new CustomEvent(e, { detail: n });
   t.dispatchEvent(s);
 };
-function A(t) {
+function B(t) {
   const e = () => {
     document.querySelector(
       "[data-fx-component]:not([data-component-initialized])"
@@ -79,7 +79,7 @@ function A(t) {
   };
   e();
 }
-function B(t, e, n = "move") {
+function A(t, e, n = "move") {
   if (!(t instanceof HTMLElement))
     throw new Error("Source element must be an HTMLElement");
   if (!(e instanceof HTMLElement))
@@ -110,7 +110,7 @@ function B(t, e, n = "move") {
     }
   });
 }
-var S = (t) => {
+var I = (t) => {
   var e;
   return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
 };
@@ -118,11 +118,11 @@ var C = (t) => {
   t.setAttribute("data-state", "invisible"), O({
     element: t,
     callback() {
-      S(t);
+      I(t);
     }
   });
 };
-var x = (t, e) => {
+var L = (t, e) => {
   const n = t;
   if (n === "" || !n)
     return;
@@ -133,23 +133,23 @@ var x = (t, e) => {
   return n !== "" && s.classList.add(...a), s;
 };
 var u = (t, e, n) => {
-  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
+  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || S(n);
 };
-var L = (t) => {
+var S = (t) => {
   document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
 };
-var I = (t, e) => {
+var T = (t, e) => {
   if (t === e)
     return;
   t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
   const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
   n instanceof HTMLElement && C(n);
 };
-var T = (t) => {
-  const e = v("[data-fx-offcanvas][data-state=open]");
+var x = (t) => {
+  const e = h("[data-fx-offcanvas][data-state=open]");
   if (!(e.length <= 0))
     for (const n of e)
-      I(n, t);
+      T(n, t);
 };
 var d = class {
   static initGlobalRegistry() {
@@ -198,41 +198,52 @@ var f = class f2 {
     o(this, "offCanvasElement");
     o(this, "offCanvasTriggers");
     o(this, "offCanvasCloseBtns");
+    o(this, "offCanvasId", "");
+    o(this, "dispatchEventToDocument");
     o(this, "allowBodyScroll");
     o(this, "staticBackdrop");
     o(this, "backdrop");
     o(this, "options");
     o(this, "teleporter");
     o(this, "moveElOnInit", () => {
-      A(() => this.teleporter.append());
+      B(() => this.teleporter.append());
     });
     o(this, "closeWhenClickOutSide", (e2) => {
       const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
       n2 && s2 && this.closeOffCanvas();
     });
     o(this, "closeOffCanvas", () => {
-      var i2, l2, r2, c2, p;
+      var i2, l2, c2, r2, p;
       let e2 = false;
-      if (h(this.offCanvasElement, "offcanvas-before-hide", {
+      if (v(this.offCanvasElement, "offcanvas-before-hide", {
         offcanvasId: this.offCanvasElement.id,
         setExitAction: (b) => {
           e2 = b;
         }
-      }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
+      }), ((c2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : c2.cancelAction) || e2)
         return;
       const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
       a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
         this.offCanvasElement,
         this.allowBodyScroll,
         "close"
-      ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
+      ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
     });
     o(this, "closeWithEsc", (e2) => {
       e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
     });
+    o(this, "closeFromCloseBtn", (e2) => {
+      e2.target.blur(), this.closeOffCanvas();
+    });
     o(this, "changeState", () => {
       this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
     });
+    o(this, "open", () => {
+      this.openOffCanvas();
+    });
+    o(this, "close", () => {
+      this.closeOffCanvas();
+    });
     o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
       e2 !== void 0 && (this.allowBodyScroll = e2);
     });
@@ -244,65 +255,42 @@ var f = class f2 {
     if (a)
       return a;
     d.setup(this.offCanvasElement), this.options = n;
-    const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
+    const { staticBackdrop: i, allowBodyScroll: l, backdrop: c } = this.options;
     this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
-    const c = this.offCanvasElement.getAttribute("id");
-    this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
+    const r = this.offCanvasElement.getAttribute("id");
+    if (!r || r === "")
+      throw new Error("\u274C id is required but missing on element:");
+    this.offCanvasId = r, this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = c || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = A(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
   }
   findOffCanvasElements(e, n, s, a) {
-    return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
+    return n ? h(`${e}`, a) : h(`${e}[data-target=${s}]`);
   }
   setupAttributes() {
     this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
   }
   openOffCanvas() {
     var s, a, i, l;
-    (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
+    (a = (s = this.options).beforeShow) == null || a.call(s), x(this.offCanvasElement), u(
       this.offCanvasElement,
       this.allowBodyScroll,
       "open"
     );
-    const e = this.offCanvasElement.getAttribute("id"), n = x(
+    const e = this.offCanvasElement.getAttribute("id"), n = L(
       this.backdrop,
       e
     );
-    n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
+    n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
   }
   initCloseBtns() {
     for (const e of this.offCanvasCloseBtns)
-      e.addEventListener("click", this.closeOffCanvas);
+      e.addEventListener("click", this.closeFromCloseBtn);
   }
   initTriggers() {
     for (const e of this.offCanvasTriggers)
       e.addEventListener("click", this.changeState);
   }
   setupOffcanvas() {
-    this.initTriggers(), this.initCloseBtns();
-  }
-  /**
-   * Opens the offcanvas element.
-   * @example
-   * ```ts
-   * const offcanvas = new Offcanvas('#sidebar');
-   * offcanvas.open();
-   * ```
-   */
-  open() {
-    this.openOffCanvas();
-  }
-  /**
-   * Closes the offcanvas element.
-   * This method will trigger the beforeHide callback if provided,
-   * remove the backdrop if present, and finally trigger the onHide callback.
-   * 
-   * @example
-   * ```ts
-   * const offcanvas = new Offcanvas('#sidebar');
-   * offcanvas.close();
-   * ```
-   */
-  close() {
-    this.closeOffCanvas();
+    this.initTriggers(), this.initCloseBtns(), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:close`, this.close);
   }
   /**
    * Cleans up the offcanvas instance by removing event listeners and references.
@@ -320,11 +308,11 @@ var f = class f2 {
       e.removeEventListener("click", this.changeState);
     for (const e of this.offCanvasCloseBtns)
       e.removeEventListener("click", this.closeOffCanvas);
-    document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
+    document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:close`, this.close), d.removeInstance("offcanvas", this.offCanvasElement);
   }
 };
 o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
-  const n = v(e);
+  const n = h(e);
   for (const s of n)
     new f(s);
 }), /**

package/dist/module.esm.js

@@ -3,7 +3,7 @@ var g = Object.defineProperty;
 var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
 var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
 var m = (t, e = document.body) => e.querySelector(t);
-var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
+var h = (t, e = document.body) => Array.from(e.querySelectorAll(t));
 var y = ({
   newElement: t,
   existingElement: e
@@ -24,10 +24,10 @@ var k = ({
 }) => {
   const a = getComputedStyle(t), i = a.transition;
   if (i !== "none" && i !== "" && !s.includes(i)) {
-    const l = "transitionend", r = () => {
-      t.removeEventListener(l, r), e();
+    const l = "transitionend", c = () => {
+      t.removeEventListener(l, c), e();
     };
-    t.addEventListener(l, r, { once: true });
+    t.addEventListener(l, c, { once: true });
   } else
     e();
 };
@@ -42,11 +42,11 @@ var O = ({
     keysCheck: ["all 0s ease 0s", "all"]
   });
 };
-var h = (t, e, n) => {
+var v = (t, e, n) => {
   const s = new CustomEvent(e, { detail: n });
   t.dispatchEvent(s);
 };
-function A(t) {
+function B(t) {
   const e = () => {
     document.querySelector(
       "[data-fx-component]:not([data-component-initialized])"
@@ -54,7 +54,7 @@ function A(t) {
   };
   e();
 }
-function B(t, e, n = "move") {
+function A(t, e, n = "move") {
   if (!(t instanceof HTMLElement))
     throw new Error("Source element must be an HTMLElement");
   if (!(e instanceof HTMLElement))
@@ -85,7 +85,7 @@ function B(t, e, n = "move") {
     }
   });
 }
-var S = (t) => {
+var I = (t) => {
   var e;
   return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
 };
@@ -93,11 +93,11 @@ var C = (t) => {
   t.setAttribute("data-state", "invisible"), O({
     element: t,
     callback() {
-      S(t);
+      I(t);
     }
   });
 };
-var x = (t, e) => {
+var L = (t, e) => {
   const n = t;
   if (n === "" || !n)
     return;
@@ -108,23 +108,23 @@ var x = (t, e) => {
   return n !== "" && s.classList.add(...a), s;
 };
 var u = (t, e, n) => {
-  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
+  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || S(n);
 };
-var L = (t) => {
+var S = (t) => {
   document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
 };
-var I = (t, e) => {
+var T = (t, e) => {
   if (t === e)
     return;
   t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
   const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
   n instanceof HTMLElement && C(n);
 };
-var T = (t) => {
-  const e = v("[data-fx-offcanvas][data-state=open]");
+var x = (t) => {
+  const e = h("[data-fx-offcanvas][data-state=open]");
   if (!(e.length <= 0))
     for (const n of e)
-      I(n, t);
+      T(n, t);
 };
 var d = class {
   static initGlobalRegistry() {
@@ -173,41 +173,52 @@ var f = class f2 {
     o(this, "offCanvasElement");
     o(this, "offCanvasTriggers");
     o(this, "offCanvasCloseBtns");
+    o(this, "offCanvasId", "");
+    o(this, "dispatchEventToDocument");
     o(this, "allowBodyScroll");
     o(this, "staticBackdrop");
     o(this, "backdrop");
     o(this, "options");
     o(this, "teleporter");
     o(this, "moveElOnInit", () => {
-      A(() => this.teleporter.append());
+      B(() => this.teleporter.append());
     });
     o(this, "closeWhenClickOutSide", (e2) => {
       const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
       n2 && s2 && this.closeOffCanvas();
     });
     o(this, "closeOffCanvas", () => {
-      var i2, l2, r2, c2, p;
+      var i2, l2, c2, r2, p;
       let e2 = false;
-      if (h(this.offCanvasElement, "offcanvas-before-hide", {
+      if (v(this.offCanvasElement, "offcanvas-before-hide", {
         offcanvasId: this.offCanvasElement.id,
         setExitAction: (b) => {
           e2 = b;
         }
-      }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
+      }), ((c2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : c2.cancelAction) || e2)
         return;
       const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
       a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
         this.offCanvasElement,
         this.allowBodyScroll,
         "close"
-      ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
+      ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
     });
     o(this, "closeWithEsc", (e2) => {
       e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
     });
+    o(this, "closeFromCloseBtn", (e2) => {
+      e2.target.blur(), this.closeOffCanvas();
+    });
     o(this, "changeState", () => {
       this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
     });
+    o(this, "open", () => {
+      this.openOffCanvas();
+    });
+    o(this, "close", () => {
+      this.closeOffCanvas();
+    });
     o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
       e2 !== void 0 && (this.allowBodyScroll = e2);
     });
@@ -219,65 +230,42 @@ var f = class f2 {
     if (a)
       return a;
     d.setup(this.offCanvasElement), this.options = n;
-    const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
+    const { staticBackdrop: i, allowBodyScroll: l, backdrop: c } = this.options;
     this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
-    const c = this.offCanvasElement.getAttribute("id");
-    this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
+    const r = this.offCanvasElement.getAttribute("id");
+    if (!r || r === "")
+      throw new Error("\u274C id is required but missing on element:");
+    this.offCanvasId = r, this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = c || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = A(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
   }
   findOffCanvasElements(e, n, s, a) {
-    return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
+    return n ? h(`${e}`, a) : h(`${e}[data-target=${s}]`);
   }
   setupAttributes() {
     this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
   }
   openOffCanvas() {
     var s, a, i, l;
-    (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
+    (a = (s = this.options).beforeShow) == null || a.call(s), x(this.offCanvasElement), u(
       this.offCanvasElement,
       this.allowBodyScroll,
       "open"
     );
-    const e = this.offCanvasElement.getAttribute("id"), n = x(
+    const e = this.offCanvasElement.getAttribute("id"), n = L(
       this.backdrop,
       e
     );
-    n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
+    n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
   }
   initCloseBtns() {
     for (const e of this.offCanvasCloseBtns)
-      e.addEventListener("click", this.closeOffCanvas);
+      e.addEventListener("click", this.closeFromCloseBtn);
   }
   initTriggers() {
     for (const e of this.offCanvasTriggers)
       e.addEventListener("click", this.changeState);
   }
   setupOffcanvas() {
-    this.initTriggers(), this.initCloseBtns();
-  }
-  /**
-   * Opens the offcanvas element.
-   * @example
-   * ```ts
-   * const offcanvas = new Offcanvas('#sidebar');
-   * offcanvas.open();
-   * ```
-   */
-  open() {
-    this.openOffCanvas();
-  }
-  /**
-   * Closes the offcanvas element.
-   * This method will trigger the beforeHide callback if provided,
-   * remove the backdrop if present, and finally trigger the onHide callback.
-   * 
-   * @example
-   * ```ts
-   * const offcanvas = new Offcanvas('#sidebar');
-   * offcanvas.close();
-   * ```
-   */
-  close() {
-    this.closeOffCanvas();
+    this.initTriggers(), this.initCloseBtns(), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:close`, this.close);
   }
   /**
    * Cleans up the offcanvas instance by removing event listeners and references.
@@ -295,11 +283,11 @@ var f = class f2 {
       e.removeEventListener("click", this.changeState);
     for (const e of this.offCanvasCloseBtns)
       e.removeEventListener("click", this.closeOffCanvas);
-    document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
+    document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:close`, this.close), d.removeInstance("offcanvas", this.offCanvasElement);
   }
 };
 o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
-  const n = v(e);
+  const n = h(e);
   for (const s of n)
     new f(s);
 }), /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-offcanvas",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
   "type": "module",
   "private": false,
@@ -61,7 +61,7 @@
   ],
   "dependencies": {
     "@flexilla/alpine-offcanvas": "^0.0.3",
-    "@flexilla/offcanvas": "^2.1.4"
+    "@flexilla/offcanvas": "^2.2.0"
   },
-  "gitHead": "9ac916234e8bb129724224819f3b59420b34081f"
+  "gitHead": "c8e56ff1b93e24b1ab969b09b35afab38ca71d4c"
 }