monobill-mintui 0.3.43 → 0.3.45

package/dist/index.js

@@ -133,7 +133,7 @@ class Q extends HTMLElement {
 </svg>`, e;
   }
   render() {
-    var l, c, d;
+    var l, c, h;
     const t = this.getName();
     if (!t) {
       this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
@@ -144,13 +144,13 @@ class Q extends HTMLElement {
       console.warn(`Icon "${t}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${t}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
       return;
     }
-    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((c = this.parentElement) == null ? void 0 : c.closest("mint-switch")), n = this.closest("mint-select") || ((d = this.parentElement) == null ? void 0 : d.closest("mint-select"));
+    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((c = this.parentElement) == null ? void 0 : c.closest("mint-switch")), n = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
     if (!Array.from(this.classList).some(
       (p) => p.startsWith("w-") || p.startsWith("h-")
     ) && !n) {
       let p;
-      s ? p = "w-3 h-3" : i ? p = "w-5 h-5" : p = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), p.split(" ").forEach((h) => {
-        h && this.classList.add(h);
+      s ? p = "w-3 h-3" : i ? p = "w-5 h-5" : p = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), p.split(" ").forEach((d) => {
+        d && this.classList.add(d);
       });
     }
     const a = this.generateSVGMarkup(e);
@@ -161,8 +161,8 @@ class Q extends HTMLElement {
     else if (i)
       this.classList.remove("text-gray-100", "text-gray-900");
     else {
-      const h = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
-      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(h);
+      const d = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
+      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(d);
     }
   }
 }
@@ -728,7 +728,7 @@ const W = class W extends HTMLElement {
     return this.isFullWidth() && o.push("w-full"), o.join(" ");
   }
   render() {
-    var d, p, h, u, _, f;
+    var h, p, d, u, _, f;
     const t = this.isDisabled() || this.isLoading(), e = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -747,7 +747,7 @@ const W = class W extends HTMLElement {
         const g = document.createElement("mint-spinner");
         g.setAttribute("size", "default"), g.setAttribute("data-button-variant", this.getVariant()), g.setAttribute("data-button-tone", this.getTone()), g.style.width = "0.875rem", g.style.height = "0.875rem", m.appendChild(g), this._button.insertBefore(m, this._button.firstChild);
       }
-    else i && ((d = i.parentElement) == null || d.remove());
+    else i && ((h = i.parentElement) == null || h.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
       this._button.appendChild(this.firstChild);
     const n = this.getIcon();
@@ -782,7 +782,7 @@ const W = class W extends HTMLElement {
         const g = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
         r && a === "left" ? g ? (g.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", o)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", o)) : r && a === "right" ? g ? (g.insertAdjacentElement("afterend", o), o.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(o, this._button.firstChild), o.insertAdjacentElement("afterend", r)) : g ? g.insertAdjacentElement("afterend", o) : this._button.insertBefore(o, this._button.firstChild);
       } else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
-        const g = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
+        const g = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
         g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
       }
     }
@@ -977,13 +977,13 @@ class tt extends HTMLElement {
     s ? (l || (l = document.createElement("label"), l.className = "mint-switch-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", this._button && this._button.parentElement === o ? o.insertBefore(l, this._button.nextSibling) : o.appendChild(l)), l.textContent = s, l.setAttribute("for", a), this.isDisabled() ? l.classList.add("opacity-40") : l.classList.remove("opacity-40")) : l && l.remove(), this._button.className = e, this._button.disabled = this.isDisabled(), this._button.id = a, this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", s || "Toggle switch"), this._button.setAttribute("role", "switch"), this._button.type = "button";
     let c = this._button.querySelector("span");
     c || (c = document.createElement("span"), this._button.appendChild(c)), c.className = i;
-    const d = c.querySelector("span");
+    const h = c.querySelector("span");
     if (r) {
-      let h = d;
-      h || (h = document.createElement("span"), h.className = this.getIconClasses(), c.appendChild(h));
-      let u = h.querySelector("mint-icon");
-      u || (u = document.createElement("mint-icon"), h.appendChild(u)), u.setAttribute("name", r);
-    } else d && d.remove();
+      let d = h;
+      d || (d = document.createElement("span"), d.className = this.getIconClasses(), c.appendChild(d));
+      let u = d.querySelector("mint-icon");
+      u || (u = document.createElement("mint-icon"), d.appendChild(u)), u.setAttribute("name", r);
+    } else h && h.remove();
     let p = this.querySelector(".mint-switch-info");
     n ? (p || (p = document.createElement("span"), p.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", o && o.parentElement === this ? this.insertBefore(p, o.nextSibling) : this.appendChild(p)), p.textContent = n, this.isDisabled() ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove(), this._renderErrorState(), this._renderSkeleton(t);
   }
@@ -1477,7 +1477,10 @@ class at extends HTMLElement {
     }), this._updateBackgroundColor();
   }
   _applyContainerClasses() {
-    this._pageContainer && (this._pageContainer.classList.add("min-h-screen", "p-8", "transition-colors", "duration-200"), this.hasAttribute("containered") ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto"));
+    if (!this._pageContainer) return;
+    this._pageContainer.classList.add("min-h-screen", "p-8", "transition-colors", "duration-200");
+    const t = this.getAttribute("containered");
+    t !== null && t !== "false" ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto", "w-full");
   }
   _updateBackgroundColor() {
     if (!this._pageContainer) return;
@@ -1599,31 +1602,31 @@ class lt extends HTMLElement {
   render() {
     const t = this.getId(), e = this.getHeading(), i = this.isOpen();
     if (t && (this.id = t), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._modal || (this._modal = document.createElement("div"), this._modal.className = "fixed inset-0 flex items-center justify-center p-2 pointer-events-none z-50", this.appendChild(this._modal)), i) {
-      let d = this._modal.querySelector(".modal-content");
-      d || (d = document.createElement("div"), d.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(d)), this._animateEnter();
+      let h = this._modal.querySelector(".modal-content");
+      h || (h = document.createElement("div"), h.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(h)), this._animateEnter();
     } else
       this._animateExit();
     let s = this._modal.querySelector(".modal-content");
     s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
     let n = this._headingSlot.querySelector("mint-text");
     e ? (n || (n = document.createElement("mint-text"), n.setAttribute("size", "sub-heading"), n.setAttribute("bold", ""), this._headingSlot.appendChild(n)), n.textContent = e) : n && n.remove(), Array.from(this.children).filter(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._headingSlot && d.getAttribute("slot") === "heading"
-    ).forEach((d) => {
-      this._headingSlot && d.parentElement !== this._headingSlot && this._headingSlot.appendChild(d);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._headingSlot && h.getAttribute("slot") === "heading"
+    ).forEach((h) => {
+      this._headingSlot && h.parentElement !== this._headingSlot && this._headingSlot.appendChild(h);
     }), this._closeButton || (this._closeButton = document.createElement("mint-button"), this._closeButton.setAttribute("variant", "ghost"), this._closeButton.setAttribute("icon", "close"), this._closeButton.addEventListener("click", () => this.close()), this._header.appendChild(this._closeButton)), this._bodySlot || (this._bodySlot = document.createElement("div"), this._bodySlot.className = "flex-1 overflow-y-auto p-4", this._bodySlot.setAttribute("slot", "body"), s.appendChild(this._bodySlot)), Array.from(this.children).filter(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._bodySlot && d.getAttribute("slot") === "body"
-    ).forEach((d) => {
-      this._bodySlot && d.parentElement !== this._bodySlot && this._bodySlot.appendChild(d);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._bodySlot && h.getAttribute("slot") === "body"
+    ).forEach((h) => {
+      this._bodySlot && h.parentElement !== this._bodySlot && this._bodySlot.appendChild(h);
     }), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700", this._actionsSlot.setAttribute("slot", "actions"), s.appendChild(this._actionsSlot));
     let o = this._actionsSlot.querySelector("mint-stack");
     o || (o = document.createElement("mint-stack"), o.setAttribute("direction", "horizontal"), o.className = "justify-end", this._actionsSlot.appendChild(o)), Array.from(this.children).filter(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._actionsSlot && d.getAttribute("slot") === "actions"
-    ).forEach((d) => {
-      Array.from(d.children).forEach((h) => {
-        h.parentElement !== o && o.appendChild(h);
-      }), d.parentElement && d.remove();
-    }), Array.from(this.children).forEach((d) => {
-      d !== this._overlay && d !== this._modal && d.getAttribute("slot") !== "heading" && d.getAttribute("slot") !== "body" && d.getAttribute("slot") !== "actions" && d !== this._headingSlot && d !== this._bodySlot && d !== this._actionsSlot && d.parentElement !== this._bodySlot && this._bodySlot.appendChild(d);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._actionsSlot && h.getAttribute("slot") === "actions"
+    ).forEach((h) => {
+      Array.from(h.children).forEach((d) => {
+        d.parentElement !== o && o.appendChild(d);
+      }), h.parentElement && h.remove();
+    }), Array.from(this.children).forEach((h) => {
+      h !== this._overlay && h !== this._modal && h.getAttribute("slot") !== "heading" && h.getAttribute("slot") !== "body" && h.getAttribute("slot") !== "actions" && h !== this._headingSlot && h !== this._bodySlot && h !== this._actionsSlot && h.parentElement !== this._bodySlot && this._bodySlot.appendChild(h);
     }), this._updateBackgroundColor();
   }
   _updateBackgroundColor() {
@@ -1799,29 +1802,29 @@ class ct extends HTMLElement {
     switch (o) {
       case "down":
         if (l = t.bottom + a, c = t.left + t.width / 2 - s.width / 2, l + s.height > r) {
-          const d = t.top - s.height - a;
-          d >= 0 ? (o = "up", l = d) : (l = Math.max(0, r - s.height - a), l + s.height > r && (l = 0));
+          const h = t.top - s.height - a;
+          h >= 0 ? (o = "up", l = h) : (l = Math.max(0, r - s.height - a), l + s.height > r && (l = 0));
         }
         c < 0 && (c = a), c + s.width > n && (c = Math.max(a, n - s.width - a), c + s.width > n && (c = n - s.width));
         break;
       case "up":
         if (l = t.top - s.height - a, c = t.left + t.width / 2 - s.width / 2, l < 0) {
-          const d = t.bottom + a;
-          d + s.height <= r ? (o = "down", l = d) : (l = Math.min(r - s.height - a, r - s.height), l < 0 && (l = r - s.height));
+          const h = t.bottom + a;
+          h + s.height <= r ? (o = "down", l = h) : (l = Math.min(r - s.height - a, r - s.height), l < 0 && (l = r - s.height));
         }
         c < 0 && (c = a), c + s.width > n && (c = Math.max(a, n - s.width - a), c + s.width > n && (c = n - s.width));
         break;
       case "right":
         if (l = t.top + t.height / 2 - s.height / 2, c = t.right + a, c + s.width > n) {
-          const d = t.left - s.width - a;
-          d >= 0 ? (o = "left", c = d) : (c = Math.max(0, n - s.width - a), c + s.width > n && (c = n - s.width));
+          const h = t.left - s.width - a;
+          h >= 0 ? (o = "left", c = h) : (c = Math.max(0, n - s.width - a), c + s.width > n && (c = n - s.width));
         }
         l < 0 && (l = a), l + s.height > r && (l = Math.max(a, r - s.height - a), l + s.height > r && (l = r - s.height));
         break;
       case "left":
         if (l = t.top + t.height / 2 - s.height / 2, c = t.left - s.width - a, c < 0) {
-          const d = t.right + a;
-          d + s.width <= n ? (o = "right", c = d) : (c = Math.min(n - s.width - a, n - s.width), c < 0 && (c = 0));
+          const h = t.right + a;
+          h + s.width <= n ? (o = "right", c = h) : (c = Math.min(n - s.width - a, n - s.width), c < 0 && (c = 0));
         }
         l < 0 && (l = a), l + s.height > r && (l = Math.max(a, r - s.height - a), l + s.height > r && (l = r - s.height));
         break;
@@ -2067,12 +2070,12 @@ class ht extends HTMLElement {
     c._wrapperClickHandler || (c._wrapperClickHandler = (u) => {
       u.target === r && !s && (u.preventDefault(), u.stopPropagation(), this.toggle());
     }, r.addEventListener("click", c._wrapperClickHandler));
-    let d = r.querySelector("mint-icon");
-    d || (d = document.createElement("mint-icon"), d.setAttribute("name", "check"), d.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", d.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", d.style.zIndex = "1", r.appendChild(d)), this.updateVisualState();
+    let h = r.querySelector("mint-icon");
+    h || (h = document.createElement("mint-icon"), h.setAttribute("name", "check"), h.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", h.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", h.style.zIndex = "1", r.appendChild(h)), this.updateVisualState();
     let p = this.querySelector(".mint-checkbox-label-container");
-    const h = this.querySelector(".mint-checkbox-container");
+    const d = this.querySelector(".mint-checkbox-container");
     if (e || i) {
-      p ? h && p.parentElement !== h && h.appendChild(p) : (p = document.createElement("div"), p.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", h ? h.appendChild(p) : this.appendChild(p));
+      p ? d && p.parentElement !== d && d.appendChild(p) : (p = document.createElement("div"), p.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", d ? d.appendChild(p) : this.appendChild(p));
       let u = p.querySelector(".mint-checkbox-label");
       e ? (u || (u = document.createElement("span"), u.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", p.insertBefore(u, p.firstChild)), u.textContent = e, s ? u.classList.add("opacity-40") : u.classList.remove("opacity-40")) : u && u.remove();
       let _ = p.querySelector(".mint-checkbox-info");
@@ -2325,9 +2328,9 @@ class dt extends HTMLElement {
     });
     let p = l.querySelector(".mint-choice-option-indicator");
     p || (p = document.createElement("div"), p.className = "mint-choice-option-indicator", l.appendChild(p)), p.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", p.style.position = "absolute", p.style.top = "50%", p.style.left = "50%", p.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", p.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(t);
-    const h = this.getInfo();
+    const d = this.getInfo();
     let u = this.querySelector(".mint-choice-option-label-container");
-    if (r || h) {
+    if (r || d) {
       u || (u = document.createElement("div"), u.className = "mint-choice-option-label-container flex flex-col gap-0.5", this.appendChild(u), Array.from(this.childNodes).forEach((g) => {
         var b;
         g.nodeType === Node.TEXT_NODE && ((b = g.textContent) != null && b.trim()) && g !== u && (g.textContent = "");
@@ -2335,7 +2338,7 @@ class dt extends HTMLElement {
       let f = u.querySelector(".mint-choice-option-label");
       r ? (f || (f = document.createElement("span"), f.className = "mint-choice-option-label", u.appendChild(f)), f.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, f.textContent = r) : f && f.remove();
       let m = u.querySelector(".mint-choice-option-info");
-      h ? (m || (m = document.createElement("span"), m.className = "mint-choice-option-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(m)), m.textContent = h, e ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
+      d ? (m || (m = document.createElement("span"), m.className = "mint-choice-option-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(m)), m.textContent = d, e ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
     } else u && u.remove();
     e ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
   }
@@ -2758,9 +2761,9 @@ class pt extends HTMLElement {
   render() {
     var b, v, k, A;
     this.getType();
-    const t = this._getNormalizedType(), e = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), l = this.getId(), c = this.getName(), d = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), h = this.getIcon(), u = this.getLabel(), _ = this.getInfo(), f = this.isLoading();
+    const t = this._getNormalizedType(), e = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), l = this.getId(), c = this.getName(), h = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), d = this.getIcon(), u = this.getLabel(), _ = this.getInfo(), f = this.isLoading();
     if (this._renderSkeleton(f), s) {
-      this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = d || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (y) => {
+      this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = h || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (y) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
           var x;
           this._colorPicker && this._colorPicker.matches(":focus-visible") && ((x = this._colorPickerWrapper) == null || x.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
@@ -2800,7 +2803,7 @@ class pt extends HTMLElement {
           cancelable: !0
         }));
       }));
-      const E = d || "#000000";
+      const E = h || "#000000";
       if (this._colorPicker && this._colorPicker.value !== E && (this._colorPicker.value = E), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = E), this._colorTextInput && this._colorTextInput.value !== E && (this._colorTextInput.value = E), this._colorPicker && (this._colorPicker.disabled = r), this._colorPickerWrapper && (r ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = r, this._colorTextInput.readOnly = a, this._colorTextInput.required = o), this._colorTextInput) {
         const y = this._colorTextInput;
         l ? y.id = l : y.removeAttribute("id"), c ? y.name = c : y.removeAttribute("name"), y.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = y;
@@ -2808,7 +2811,7 @@ class pt extends HTMLElement {
       this._renderErrorState();
       return;
     }
-    if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), h && !e ? this._icon ? this._icon.setAttribute("name", h) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", h), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon && (this._icon.remove(), this._icon = null), this._isNumber() && !e) {
+    if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), d && !e ? this._icon ? this._icon.setAttribute("name", d) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", d), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon && (this._icon.remove(), this._icon = null), this._isNumber() && !e) {
       if (!this._numberSpinnerContainer) {
         this._numberSpinnerContainer = document.createElement("div"), this._numberSpinnerContainer.className = "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col h-8 pointer-events-none", this._wrapper.appendChild(this._numberSpinnerContainer), this._numberIncrementButton = document.createElement("button"), this._numberIncrementButton.type = "button", this._numberIncrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors pointer-events-auto bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 rounded";
         const E = document.createElement("mint-icon");
@@ -2831,11 +2834,11 @@ class pt extends HTMLElement {
       this._numberIncrementButton && (this._numberIncrementButton.disabled = r || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = r || a);
     } else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
     if (e) {
-      if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = o, this._textarea.rows = p, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), d !== this._textarea.value && (this._textarea.value = d), l ? this._textarea.id = l : this._textarea.removeAttribute("id"), c ? this._textarea.name = c : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+      if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = o, this._textarea.rows = p, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), h !== this._textarea.value && (this._textarea.value = h), l ? this._textarea.id = l : this._textarea.removeAttribute("id"), c ? this._textarea.name = c : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
         const E = this.firstChild.textContent;
         E && !this._textarea.value && (this._textarea.value = E.trim()), this.removeChild(this.firstChild);
       }
-    } else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = t, this._input.placeholder = n, this._input.disabled = r, this._input.readOnly = a, this._input.required = o, this._input.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), i ? (this._input.inputMode = "decimal", this._input.pattern = "[0-9]*\\.?[0-9]*") : (this._input.removeAttribute("inputmode"), this._input.removeAttribute("pattern")), d !== this._input.value && (this._input.value = d), l ? this._input.id = l : this._input.removeAttribute("id"), c ? this._input.name = c : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+    } else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = t, this._input.placeholder = n, this._input.disabled = r, this._input.readOnly = a, this._input.required = o, this._input.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), i ? (this._input.inputMode = "decimal", this._input.pattern = "[0-9]*\\.?[0-9]*") : (this._input.removeAttribute("inputmode"), this._input.removeAttribute("pattern")), h !== this._input.value && (this._input.value = h), l ? this._input.id = l : this._input.removeAttribute("id"), c ? this._input.name = c : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
       const E = this.firstChild.textContent;
       E && !this._input.value && (this._input.value = E.trim()), this.removeChild(this.firstChild);
     }
@@ -3164,10 +3167,10 @@ class ft extends HTMLElement {
       }), s.addEventListener("keydown", (a) => {
         a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(t, n), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(t, n), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(t, n), a.preventDefault());
       }), s.addEventListener("blur", (a) => {
-        var c, d;
+        var c, h;
         this._syncHiddenInput();
         const o = a.relatedTarget;
-        o && (this.contains(o) || (c = this._popover) != null && c.contains(o) || this._calendarContainer && this._calendarContainer.contains(o)) || (this._handleBlur(((d = this._hiddenInput) == null ? void 0 : d.value) || ""), this._exitInputMode(), setTimeout(() => {
+        o && (this.contains(o) || (c = this._popover) != null && c.contains(o) || this._calendarContainer && this._calendarContainer.contains(o)) || (this._handleBlur(((h = this._hiddenInput) == null ? void 0 : h.value) || ""), this._exitInputMode(), setTimeout(() => {
           if (this._hiddenInput) {
             const p = new FocusEvent("blur", {
               bubbles: !0,
@@ -3189,8 +3192,8 @@ class ft extends HTMLElement {
     if (this._isRange || s === "week" || s === "month") {
       const [r, a] = this._splitRangeInput(t, e), o = r ? this._parseDateString(r, e) : null, l = a ? this._parseDateString(a, e) : null;
       if (o && l) {
-        const [c, d] = o <= l ? [o, l] : [l, o];
-        this._selectedStartDate = c, this._selectedEndDate = d, this._currentMonth = c.getMonth(), this._currentYear = c.getFullYear();
+        const [c, h] = o <= l ? [o, l] : [l, o];
+        this._selectedStartDate = c, this._selectedEndDate = h, this._currentMonth = c.getMonth(), this._currentYear = c.getFullYear();
       } else o && (this._selectedStartDate = o, this._selectedEndDate = null, this._currentMonth = o.getMonth(), this._currentYear = o.getFullYear());
       this._applyDateToParts(this._selectedStartDate, this._startPartInputs, i, e), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, i, e);
     } else {
@@ -3231,13 +3234,13 @@ class ft extends HTMLElement {
       { char: "m", index: o },
       { char: "y", index: l }
     ].sort((f, m) => f.index - m.index);
-    let d = 0, p = 0, h = 0, u = 0;
+    let h = 0, p = 0, d = 0, u = 0;
     r.length, n.length;
     for (const f of c)
       if (f.char === "d") {
         const m = r.lastIndexOf("d") - r.indexOf("d") + 1, g = n.substr(u, m);
         if (g.length === 0) return null;
-        d = parseInt(g, 10), u += g.length;
+        h = parseInt(g, 10), u += g.length;
       } else if (f.char === "m") {
         const m = r.lastIndexOf("m") - r.indexOf("m") + 1, g = n.substr(u, m);
         if (g.length === 0) return null;
@@ -3246,11 +3249,11 @@ class ft extends HTMLElement {
         const m = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(u), b = Math.min(m, g.length), v = g.substr(0, b);
         if (v.length === 0) return null;
         let k = parseInt(v, 10);
-        b === 2 && m === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : b === 2 && m === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), h = k, u += b;
+        b === 2 && m === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : b === 2 && m === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), d = k, u += b;
       }
-    if (!d || p < 0 || p > 11 || !h) return null;
-    const _ = new Date(h, p, d);
-    return isNaN(_.getTime()) || _.getDate() !== d || _.getMonth() !== p || _.getFullYear() !== h ? null : _;
+    if (!h || p < 0 || p > 11 || !d) return null;
+    const _ = new Date(d, p, h);
+    return isNaN(_.getTime()) || _.getDate() !== h || _.getMonth() !== p || _.getFullYear() !== d ? null : _;
   }
   _formatDate(t, e) {
     const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = e.toLowerCase();
@@ -3259,15 +3262,15 @@ class ft extends HTMLElement {
   }
   // PHP-style formatter for display mode
   _formatDatePhp(t, e) {
-    const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], o = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], c = (h, u = 2) => h.toString().padStart(u, "0"), d = (h) => {
-      const u = h % 10, _ = h % 100;
+    const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], o = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], c = (d, u = 2) => d.toString().padStart(u, "0"), h = (d) => {
+      const u = d % 10, _ = d % 100;
       return u === 1 && _ !== 11 ? "st" : u === 2 && _ !== 12 ? "nd" : u === 3 && _ !== 13 ? "rd" : "th";
     };
     let p = "";
-    for (let h = 0; h < e.length; h++) {
-      const u = e[h];
-      if (u === "\\" && h + 1 < e.length) {
-        p += e[h + 1], h++;
+    for (let d = 0; d < e.length; d++) {
+      const u = e[d];
+      if (u === "\\" && d + 1 < e.length) {
+        p += e[d + 1], d++;
         continue;
       }
       switch (u) {
@@ -3302,7 +3305,7 @@ class ft extends HTMLElement {
           p += r[t.getDay()];
           break;
         case "S":
-          p += d(i);
+          p += h(i);
           break;
         default:
           p += u;
@@ -3316,8 +3319,8 @@ class ft extends HTMLElement {
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const t = this.isLoading(), e = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), o = this.getId(), l = this.getName(), c = this.getFormat(), d = this.hasError(), p = this.getErrorMessage(), h = this.getSelectionMode();
-    this._isRange = this.isRange() || h === "week" || h === "month", this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
+    const t = this.isLoading(), e = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), o = this.getId(), l = this.getName(), c = this.getFormat(), h = this.hasError(), p = this.getErrorMessage(), d = this.getSelectionMode();
+    this._isRange = this.isRange() || d === "week" || d === "month", this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
     let u = this.querySelector(".mint-date-picker-label-container");
     if (e || i) {
       u || (u = document.createElement("div"), u.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(u, this._input) : this.appendChild(u));
@@ -3326,9 +3329,9 @@ class ft extends HTMLElement {
       let k = u.querySelector(".mint-date-picker-info");
       i ? (k || (k = document.createElement("span"), k.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(k)), k.textContent = i) : k && k.remove();
     } else u && u.remove();
-    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), o && (this._hiddenInput.id = o), l && (this._hiddenInput.name = l), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", d ? "true" : "false");
+    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), o && (this._hiddenInput.id = o), l && (this._hiddenInput.name = l), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", h ? "true" : "false");
     let _ = this._input.querySelector(".mint-date-fields");
-    _ || (_ = document.createElement("div"), this._input.appendChild(_)), this._fieldsContainer = _, this._applyErrorVisuals(d, p, n), _.innerHTML = "", this._displayEl = document.createElement("div");
+    _ || (_ = document.createElement("div"), this._input.appendChild(_)), this._fieldsContainer = _, this._applyErrorVisuals(h, p, n), _.innerHTML = "", this._displayEl = document.createElement("div");
     const f = r ? "select-text" : "select-none";
     this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${f} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
       n || r || this._enterInputMode();
@@ -3367,7 +3370,7 @@ class ft extends HTMLElement {
         n || r || this._enterInputMode();
       }), this._input.prepend(this._iconButton), this._iconButton.disabled = n || r;
     }
-    this._renderErrorState(d, p), this._renderSkeleton(t);
+    this._renderErrorState(h, p), this._renderSkeleton(t);
   }
   _renderErrorState(t, e) {
     let i = this.querySelector(".mint-date-picker-error");
@@ -3415,8 +3418,8 @@ class ft extends HTMLElement {
     if (s) {
       const [n, r] = this._splitRangeInput(t, e), a = n ? this._parseDateString(n, e) : null, o = r ? this._parseDateString(r, e) : null;
       if (a && o) {
-        const [l, c] = a <= o ? [a, o] : [o, a], d = this._formatDate(l, e), p = this._formatDate(c, e), h = `${d} - ${p}`;
-        this.setValue(h), this._applyDateToParts(l, this._startPartInputs, this._getFormatTokens(e), e), this._applyDateToParts(c, this._endPartInputs, this._getFormatTokens(e), e), this._selectedStartDate = l, this._selectedEndDate = c, this._currentMonth = l.getMonth(), this._currentYear = l.getFullYear();
+        const [l, c] = a <= o ? [a, o] : [o, a], h = this._formatDate(l, e), p = this._formatDate(c, e), d = `${h} - ${p}`;
+        this.setValue(d), this._applyDateToParts(l, this._startPartInputs, this._getFormatTokens(e), e), this._applyDateToParts(c, this._endPartInputs, this._getFormatTokens(e), e), this._selectedStartDate = l, this._selectedEndDate = c, this._currentMonth = l.getMonth(), this._currentYear = l.getFullYear();
       } else if (a) {
         const l = this._formatDate(a, e);
         this.setValue(l), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(e), e), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(e), e), this._selectedStartDate = a, this._selectedEndDate = null, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
@@ -3525,14 +3528,14 @@ class ft extends HTMLElement {
     l.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
     const c = document.createElement("div");
     c.className = "flex-1 min-w-0";
-    const d = document.createElement("div");
-    d.className = "flex items-center justify-between mb-4";
+    const h = document.createElement("div");
+    h.className = "flex items-center justify-between mb-4";
     const p = document.createElement("button");
     p.type = "button", p.tabIndex = 0, p.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", p.setAttribute("data-keep-popover-open", "true");
-    const h = document.createElement("mint-icon");
-    h.setAttribute("name", "caret-left"), h.className = "w-4 h-4", p.appendChild(h), p.addEventListener("click", () => {
+    const d = document.createElement("mint-icon");
+    d.setAttribute("name", "caret-left"), d.className = "w-4 h-4", p.appendChild(d), p.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
-    }), d.appendChild(p);
+    }), h.appendChild(p);
     const u = document.createElement("div");
     u.className = "flex items-center gap-2";
     const _ = document.createElement("button");
@@ -3542,13 +3545,13 @@ class ft extends HTMLElement {
     const f = document.createElement("button");
     f.type = "button", f.tabIndex = 0, f.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", f.setAttribute("data-keep-popover-open", "true"), f.textContent = String(this._currentYear), f.addEventListener("click", () => {
       this._viewMode = "year", this._buildCalendar();
-    }), u.appendChild(f), d.appendChild(u);
+    }), u.appendChild(f), h.appendChild(u);
     const m = document.createElement("button");
     m.type = "button", m.tabIndex = 0, m.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", m.setAttribute("data-keep-popover-open", "true");
     const g = document.createElement("mint-icon");
     g.setAttribute("name", "caret-right"), g.className = "w-4 h-4", m.appendChild(g), m.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), d.appendChild(m);
+    }), h.appendChild(m);
     const b = document.createElement("div");
     b.className = "grid grid-cols-7 mb-2", r.forEach((C) => {
       const I = document.createElement("div");
@@ -3659,7 +3662,7 @@ class ft extends HTMLElement {
         }), S.appendChild(D);
       }), I.appendChild(S), C.appendChild(I), l.appendChild(C);
     }
-    c.appendChild(d), c.appendChild(b), c.appendChild(v), l.appendChild(c), this._calendarContainer.appendChild(l);
+    c.appendChild(h), c.appendChild(b), c.appendChild(v), l.appendChild(c), this._calendarContainer.appendChild(l);
   }
   _buildMonthView() {
     if (!this._calendarContainer) return;
@@ -3683,12 +3686,12 @@ class ft extends HTMLElement {
     }), e.appendChild(r);
     const o = document.createElement("div");
     o.className = "grid grid-cols-3 gap-2", t.forEach((l, c) => {
-      const d = document.createElement("button");
-      d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
+      const h = document.createElement("button");
+      h.type = "button", h.tabIndex = 0, h.setAttribute("data-keep-popover-open", "true");
       const p = this._currentMonth === c;
-      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = l, d.addEventListener("click", () => {
+      h.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, h.textContent = l, h.addEventListener("click", () => {
         this._currentMonth = c, this._viewMode = "calendar", this._buildCalendar();
-      }), o.appendChild(d);
+      }), o.appendChild(h);
     }), this._calendarContainer.appendChild(e), this._calendarContainer.appendChild(o);
   }
   _buildYearView() {
@@ -3712,12 +3715,12 @@ class ft extends HTMLElement {
     const l = document.createElement("div");
     l.className = "grid grid-cols-3 gap-2";
     for (let c = t; c <= e; c++) {
-      const d = document.createElement("button");
-      d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
+      const h = document.createElement("button");
+      h.type = "button", h.tabIndex = 0, h.setAttribute("data-keep-popover-open", "true");
       const p = this._currentYear === c;
-      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = String(c), d.addEventListener("click", () => {
+      h.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, h.textContent = String(c), h.addEventListener("click", () => {
         this._currentYear = c, this._viewMode = "calendar", this._buildCalendar();
-      }), l.appendChild(d);
+      }), l.appendChild(h);
     }
     this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(l);
   }
@@ -4022,30 +4025,30 @@ class mt extends HTMLElement {
   }
   render() {
     const t = this.isLoading(), e = [];
-    this._select && Array.from(this._select.children).forEach((h) => {
-      (h.tagName === "OPTION" || h.tagName === "OPTGROUP") && e.push(h.cloneNode(!0));
+    this._select && Array.from(this._select.children).forEach((d) => {
+      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && e.push(d.cloneNode(!0));
     });
-    const i = Array.from(this.children).filter((h) => h.tagName === "OPTION" || h.tagName === "OPTGROUP").map((h) => h.cloneNode(!0));
+    const i = Array.from(this.children).filter((d) => d.tagName === "OPTION" || d.tagName === "OPTGROUP").map((d) => d.cloneNode(!0));
     for (; this.firstChild; )
       this.removeChild(this.firstChild);
     this._wrapper = null, this._select = null;
-    const s = this.getLabel(), n = this.getInfo(), r = this.getId(), a = this.getName(), o = this.getValue(), l = this.isDisabled(), c = this.isMultiple(), d = this.hasError();
+    const s = this.getLabel(), n = this.getInfo(), r = this.getId(), a = this.getName(), o = this.getValue(), l = this.isDisabled(), c = this.isMultiple(), h = this.hasError();
     if (s) {
-      const h = document.createElement("label");
-      h.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && h.setAttribute("for", r);
+      const d = document.createElement("label");
+      d.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && d.setAttribute("for", r);
       const u = document.createTextNode(s);
-      h.appendChild(u), this.appendChild(h);
+      d.appendChild(u), this.appendChild(d);
     }
-    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), l && (this._select.disabled = !0), c && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", d ? "true" : "false");
+    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), l && (this._select.disabled = !0), c && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", h ? "true" : "false");
     const p = i.length > 0 ? i : e;
-    if (p.length > 0 && p.forEach((h) => {
-      this._select.appendChild(h);
+    if (p.length > 0 && p.forEach((d) => {
+      this._select.appendChild(d);
     }), this._select.options.length === 0) {
-      const h = document.createElement("option");
-      h.value = "", h.textContent = "Select an option", h.disabled = !0, h.selected = !0, this._select.appendChild(h);
+      const d = document.createElement("option");
+      d.value = "", d.textContent = "Select an option", d.disabled = !0, d.selected = !0, this._select.appendChild(d);
     }
-    if (this._select.value = o || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
-      const _ = h.target.value;
+    if (this._select.value = o || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
+      const _ = d.target.value;
       (this.getAttribute("value") || "") !== _ && (_ ? this.setAttribute("value", _) : this.removeAttribute("value"));
       const m = new Event("input", {
         bubbles: !0,
@@ -4064,11 +4067,11 @@ class mt extends HTMLElement {
         composed: !0
       }));
     }, this._select.addEventListener("change", this._changeHandler), this._optionObserver && this._optionObserver.disconnect(), this._optionObserver = new MutationObserver(() => {
-      const h = this.getAttribute("value") || this.value || "";
-      this._select && h && requestAnimationFrame(() => {
+      const d = this.getAttribute("value") || this.value || "";
+      this._select && d && requestAnimationFrame(() => {
         this._select && Array.from(this._select.options).some(
-          (_) => _.value === h
-        ) && this._select.value !== h && (this._select.value = h);
+          (_) => _.value === d
+        ) && this._select.value !== d && (this._select.value = d);
       });
     }), this._optionObserver.observe(this._select, {
       childList: !0,
@@ -4076,12 +4079,12 @@ class mt extends HTMLElement {
     }), this._wrapper.appendChild(this._select), c)
       this._caretUpIcon = null, this._caretDownIcon = null;
     else {
-      const h = document.createElement("div");
-      h.className = "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none z-10 flex flex-col", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]", h.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", h.appendChild(this._caretDownIcon), this._wrapper.appendChild(h);
+      const d = document.createElement("div");
+      d.className = "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none z-10 flex flex-col", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]", d.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", d.appendChild(this._caretDownIcon), this._wrapper.appendChild(d);
     }
     if (n) {
-      const h = document.createElement("div");
-      h.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", h.textContent = n, this.appendChild(h);
+      const d = document.createElement("div");
+      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = n, this.appendChild(d);
     }
     this._renderErrorState(), this._renderSkeleton(t);
   }
@@ -4208,12 +4211,12 @@ class gt extends HTMLElement {
   render() {
     const t = this.isLoading(), e = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), o = this.getName(), l = this.hasError(), c = this.getErrorMessage();
     this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", l ? "true" : "false"), n ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", e || "File upload dropzone")), this._dropzone.style.width = r, this._dropzone.style.height = a, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = n, o ? this._fileInput.name = o : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", l ? "true" : "false");
-    const d = this._dropzone.querySelector(".mint-dropzone-icon"), p = this._dropzone.querySelector(".mint-dropzone-label");
-    d && d.remove(), p && p.remove();
-    const h = document.createElement("div");
-    h.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
+    const h = this._dropzone.querySelector(".mint-dropzone-icon"), p = this._dropzone.querySelector(".mint-dropzone-label");
+    h && h.remove(), p && p.remove();
+    const d = document.createElement("div");
+    d.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
     const u = document.createElement("mint-icon");
-    if (u.setAttribute("name", "upload"), u.className = "w-12 h-12 text-gray-400 dark:text-gray-500", h.appendChild(u), this._dropzone.appendChild(h), e) {
+    if (u.setAttribute("name", "upload"), u.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(u), this._dropzone.appendChild(d), e) {
       const _ = document.createElement("div");
       _.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", _.textContent = e, this._dropzone.appendChild(_);
     }
@@ -4371,24 +4374,24 @@ class gt extends HTMLElement {
     t.className = "mint-dropzone-previews-wrapper mt-3 w-full relative max-h-48";
     const e = document.createElement("div");
     e.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((l, c) => {
-      const d = document.createElement("div");
-      if (d.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", l.type.startsWith("image/")) {
+      const h = document.createElement("div");
+      if (h.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", l.type.startsWith("image/")) {
         const _ = document.createElement("img");
         _.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
         const f = URL.createObjectURL(l);
-        this._previewUrls.push(f), _.src = f, d.appendChild(_);
+        this._previewUrls.push(f), _.src = f, h.appendChild(_);
       } else {
         const _ = document.createElement("mint-icon");
-        _.setAttribute("name", "attach"), _.className = "w-5 h-5 text-gray-500 dark:text-gray-300", d.appendChild(_);
+        _.setAttribute("name", "attach"), _.className = "w-5 h-5 text-gray-500 dark:text-gray-300", h.appendChild(_);
       }
       const p = document.createElement("div");
-      p.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", p.textContent = l.name, d.appendChild(p);
-      const h = document.createElement("button");
-      h.type = "button", h.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
+      p.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", p.textContent = l.name, h.appendChild(p);
+      const d = document.createElement("button");
+      d.type = "button", d.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
       const u = document.createElement("mint-icon");
-      u.setAttribute("name", "close"), u.className = "w-4 h-4", h.appendChild(u), h.addEventListener("click", (_) => {
+      u.setAttribute("name", "close"), u.className = "w-4 h-4", d.appendChild(u), d.addEventListener("click", (_) => {
         _.preventDefault(), _.stopPropagation(), this._removeFileAt(c);
-      }), d.appendChild(h), e.appendChild(d);
+      }), h.appendChild(d), e.appendChild(h);
     });
     const i = this.hasError(), s = this._isDragging;
     let n = "from-white dark:from-gray-700";
@@ -4398,8 +4401,8 @@ class gt extends HTMLElement {
     const a = document.createElement("div");
     a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${n} to-transparent opacity-100 transition-opacity duration-200`, t.appendChild(a);
     const o = () => {
-      const l = e.scrollTop, c = e.scrollHeight, d = e.clientHeight;
-      l > 0 ? r.style.opacity = "1" : r.style.opacity = "0", l + d < c - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
+      const l = e.scrollTop, c = e.scrollHeight, h = e.clientHeight;
+      l > 0 ? r.style.opacity = "1" : r.style.opacity = "0", l + h < c - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
     };
     o(), e.addEventListener("scroll", o), t.appendChild(e), this._previewContainer = t, this._dropzone.appendChild(t), this._updateDragStateClass();
   }
@@ -4530,14 +4533,14 @@ class _t extends HTMLElement {
     t && (this._form.action = t), e && (this._form.method = e), this._form.enctype = i;
   }
   async _handleSubmit(t) {
-    var l;
+    var c;
     if (t.preventDefault(), !this._form) return;
     this._clearErrors(), this._syncDropzoneFiles();
     const e = this._collectValidationRules(), i = new FormData(this._form);
     let s = this._formDataToValues(i);
     if (this._formData) {
-      const c = this._getReactiveValue(this._formData);
-      c && typeof c == "object" && !Array.isArray(c) && (s = { ...this._extractReactiveData(c), ...s });
+      const h = this._getReactiveValue(this._formData);
+      h && typeof h == "object" && !Array.isArray(h) && (s = { ...this._extractReactiveData(h), ...s });
     }
     if (!this._validate(s, e)) {
       this.dispatchEvent(new CustomEvent("invalid", {
@@ -4549,26 +4552,33 @@ class _t extends HTMLElement {
       return;
     }
     const r = new CustomEvent("submit", {
-      detail: { formData: i, values: s },
+      detail: { formData: i, values: s, form: this },
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r), r.form = this;
+    const a = new CustomEvent("mintFormSubmit", {
+      detail: { formData: i, values: s, form: this },
       bubbles: !0,
       cancelable: !0,
       composed: !0
     });
-    if (this.dispatchEvent(r), r.defaultPrevented)
+    if (a.form = this, this.dispatchEvent(a), r.defaultPrevented || a.defaultPrevented)
       return;
-    const a = this.getAttribute("action"), o = this.getAttribute("method");
-    if (!(!a || !o)) {
+    const o = this.getAttribute("action"), l = this.getAttribute("method");
+    if (!(!o || !l)) {
       this._setButtonsSubmitting();
       try {
-        const c = await this._submitData(i, s);
+        const h = await this._submitData(i, s);
         this.dispatchEvent(new CustomEvent("submitsuccess", {
-          detail: c,
+          detail: h,
           bubbles: !0,
           cancelable: !0
         }));
-      } catch (c) {
-        (c == null ? void 0 : c.status) === 422 && ((l = c == null ? void 0 : c.data) != null && l.errors) && this._applyServerErrors(c.data.errors), this.dispatchEvent(new CustomEvent("submiterror", {
-          detail: { error: c },
+      } catch (h) {
+        (h == null ? void 0 : h.status) === 422 && ((c = h == null ? void 0 : h.data) != null && c.errors) && this._applyServerErrors(h.data.errors), this.dispatchEvent(new CustomEvent("submiterror", {
+          detail: { error: h },
           bubbles: !0,
           cancelable: !0
         }));
@@ -4578,7 +4588,7 @@ class _t extends HTMLElement {
     }
   }
   async _submitData(t, e) {
-    var d, p, h;
+    var h, p, d;
     const i = this.getAttribute("action"), s = this.getAttribute("method"), n = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
     if (!i)
       return { status: 0, ok: !0, data: { values: e } };
@@ -4586,7 +4596,7 @@ class _t extends HTMLElement {
     let a = null;
     const o = {};
     let l = i;
-    if (typeof window < "u" && ((h = (p = (d = window.mintForm) == null ? void 0 : d.defaults) == null ? void 0 : p.headers) != null && h.common) && Object.assign(o, window.mintForm.defaults.headers.common), this._headers && Object.assign(o, this._headers), s === "GET") {
+    if (typeof window < "u" && ((d = (p = (h = window.mintForm) == null ? void 0 : h.defaults) == null ? void 0 : p.headers) != null && d.common) && Object.assign(o, window.mintForm.defaults.headers.common), this._headers && Object.assign(o, this._headers), s === "GET") {
       const u = new URLSearchParams();
       t.forEach((_, f) => {
         _ instanceof File || u.append(f, String(_));
@@ -4724,7 +4734,7 @@ class _t extends HTMLElement {
         const o = Array.from(r.files);
         e[a] && Array.isArray(e[a]) ? o.forEach((l) => {
           e[a].some(
-            (d) => d.name === l.name && d.size === l.size && d.lastModified === l.lastModified
+            (h) => h.name === l.name && h.size === l.size && h.lastModified === l.lastModified
           ) || e[a].push(l);
         }) : e[a] = o;
       }
@@ -4915,6 +4925,13 @@ class _t extends HTMLElement {
       t.removeAttribute("aria-invalid");
     }), this._errors = {};
   }
+  /**
+   * Public method to set form errors programmatically
+   * Can be called from event handlers to set validation errors
+   */
+  setFormErrors(t) {
+    this._applyServerErrors(t);
+  }
   _applyServerErrors(t) {
     this._clearErrors(), Object.entries(t).forEach(([e, i]) => {
       const s = Array.isArray(i) ? i[0] || "Validation error" : i || "Validation error", n = this._getFieldElements(e);
@@ -5066,8 +5083,8 @@ class _t extends HTMLElement {
       if (!n) return;
       const r = this._getFieldName(n);
       if (!r || !this._collectValidationRules()[r]) return;
-      const o = this._extractFieldValue([n]), l = o != null && (typeof o == "string" ? o.trim() !== "" : o instanceof FileList || Array.isArray(o) ? o.length > 0 : !0), c = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), d = !!n.closest("mint-tags"), p = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), h = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
-      (l || c || d || p || h) && setTimeout(() => {
+      const o = this._extractFieldValue([n]), l = o != null && (typeof o == "string" ? o.trim() !== "" : o instanceof FileList || Array.isArray(o) ? o.length > 0 : !0), c = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), h = !!n.closest("mint-tags"), p = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), d = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (l || c || h || p || d) && setTimeout(() => {
         this._validateField(r);
       }, 0);
     };
@@ -5076,38 +5093,38 @@ class _t extends HTMLElement {
       const s = i.target;
       if (!s) return;
       if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
-        const c = s, d = this._getFieldName(c);
-        if (!d || !this._collectValidationRules()[d]) return;
+        const c = s, h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(d);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
         const c = this._findFieldElement(s);
         if (!c) return;
-        const d = this._getFieldName(c);
-        if (!d || !this._collectValidationRules()[d]) return;
+        const h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(d);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
-        const c = s, d = this._getFieldName(c);
-        if (!d || !this._collectValidationRules()[d]) return;
+        const c = s, h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(d);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
         const c = this._findFieldElement(s);
         if (!c) return;
-        const d = this._getFieldName(c);
-        if (!d || !this._collectValidationRules()[d]) return;
+        const h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(d);
+          this._validateField(h);
         }, 0);
         return;
       }
@@ -5383,8 +5400,8 @@ class bt extends HTMLElement {
         "dark:bg-gray-800"
       ]);
       const l = r.querySelectorAll("th");
-      l.forEach((c, d) => {
-        const p = c.querySelector("mint-icon"), h = (p == null ? void 0 : p.getAttribute("name")) || "", u = p !== null && h !== "ellipsis";
+      l.forEach((c, h) => {
+        const p = c.querySelector("mint-icon"), d = (p == null ? void 0 : p.getAttribute("name")) || "", u = p !== null && d !== "ellipsis";
         this._setClasses(c, [
           "text-left",
           "font-semibold",
@@ -5395,13 +5412,13 @@ class bt extends HTMLElement {
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), u && c.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), d === 0 && c.classList.add("pl-6"), d === l.length - 1 && c.classList.add("pr-6");
+        ]), u && c.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), h === 0 && c.classList.add("pl-6"), h === l.length - 1 && c.classList.add("pr-6");
       });
     }
     const a = t.querySelector("tbody");
     if (a) {
       const l = Array.from(a.querySelectorAll("tr"));
-      l.forEach((c, d) => {
+      l.forEach((c, h) => {
         const p = c.hasAttribute("data-row-clickable");
         this._setClasses(c, [
           "bg-white",
@@ -5409,15 +5426,15 @@ class bt extends HTMLElement {
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), p && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), d === l.length - 1 && c.classList.remove("border-b");
-        const h = c.querySelectorAll("td");
-        h.forEach((u, _) => {
+        ]), p && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), h === l.length - 1 && c.classList.remove("border-b");
+        const d = c.querySelectorAll("td");
+        d.forEach((u, _) => {
           this._setClasses(u, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), _ === 0 && u.classList.add("pl-6"), _ === h.length - 1 && u.classList.add("pr-6"), e ? this._applyMobileCell(u, s) : this._restoreCell(u);
+          ]), _ === 0 && u.classList.add("pl-6"), _ === d.length - 1 && u.classList.add("pr-6"), e ? this._applyMobileCell(u, s) : this._restoreCell(u);
         });
       });
     }
@@ -6193,7 +6210,7 @@ class xt extends HTMLElement {
     }), this._configuration.sortBy || (this._configuration.sortBy = "id"), this._configuration.sort || (this._configuration.sort = "asc"));
   }
   async _fetchData(t, e = !0, i, s) {
-    var o, l, c, d, p, h, u, _;
+    var o, l, c, h, p, d, u, _;
     if (!this._configuration) return;
     const n = t || (typeof this._configuration.data == "string" ? this._configuration.data : null);
     if (!n || this._fetching || this._loading)
@@ -6222,9 +6239,9 @@ class xt extends HTMLElement {
         this._configuration.predefinedData ? (x = [...this._configuration.predefinedData, ...v], this._totalRows = k + this._configuration.predefinedData.length) : this._totalRows = k, this._rows = x;
       }
       const A = Math.floor(a / r) + 1;
-      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === A ? this._currentPage = b.content.current_page : this._currentPage = A, this._offset = (this._currentPage - 1) * r), this._lastPage = ((d = b.content) == null ? void 0 : d.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
+      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === A ? this._currentPage = b.content.current_page : this._currentPage = A, this._offset = (this._currentPage - 1) * r), this._lastPage = ((h = b.content) == null ? void 0 : h.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
       const E = this._sorting;
-      if (E && this._updateSortIcons(), this._sorting = !1, this._sortingColumn = null, E && this._updateSortIcons(), this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), (h = (p = this.querySelector(`#${this._tableId}`)) == null ? void 0 : p.closest("table")) == null ? void 0 : h.querySelector("tbody")) {
+      if (E && this._updateSortIcons(), this._sorting = !1, this._sortingColumn = null, E && this._updateSortIcons(), this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), (d = (p = this.querySelector(`#${this._tableId}`)) == null ? void 0 : p.closest("table")) == null ? void 0 : d.querySelector("tbody")) {
         if (E) {
           const x = this._loading, T = this._fetching;
           this._loading = !1, this._fetching = !1, this._updateTableBody(), this._loading = x, this._fetching = T;
@@ -6257,13 +6274,13 @@ class xt extends HTMLElement {
       if (a == null) return -1;
       const o = typeof r == "number" ? r : typeof r == "string" && !isNaN(Number(r)) && r.trim() !== "" ? Number(r) : null, l = typeof a == "number" ? a : typeof a == "string" && !isNaN(Number(a)) && a.trim() !== "" ? Number(a) : null;
       if (o !== null && l !== null) {
-        const h = o - l;
-        return i === "asc" ? h : -h;
+        const d = o - l;
+        return i === "asc" ? d : -d;
       }
-      const c = r instanceof Date ? r : typeof r == "string" ? new Date(r) : null, d = a instanceof Date ? a : typeof a == "string" ? new Date(a) : null;
-      if (c && d && !isNaN(c.getTime()) && !isNaN(d.getTime())) {
-        const h = c.getTime() - d.getTime();
-        return i === "asc" ? h : -h;
+      const c = r instanceof Date ? r : typeof r == "string" ? new Date(r) : null, h = a instanceof Date ? a : typeof a == "string" ? new Date(a) : null;
+      if (c && h && !isNaN(c.getTime()) && !isNaN(h.getTime())) {
+        const d = c.getTime() - h.getTime();
+        return i === "asc" ? d : -d;
       }
       const p = String(r).localeCompare(String(a), void 0, { numeric: !0, sensitivity: "base" });
       return i === "asc" ? p : -p;
@@ -6357,53 +6374,53 @@ class xt extends HTMLElement {
     const i = this.querySelector(`#search-${this._tableId}`), s = document.activeElement === i || (i == null ? void 0 : i.querySelector("input")) === document.activeElement, n = this._search;
     let r = "";
     if (!((this._fetching || this._loading) && !this._sorting) && (t.forEach((l, c) => {
-      const d = typeof this._configuration.onRowClick == "function", p = d ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
-      r += `<tr data-row-index="${c}" ${d ? 'data-row-clickable="true"' : ""}${p ? ` class="${p}"` : ""}>`, this._configuration.columns.forEach((h, u) => {
-        if (h.hidden) return;
-        const _ = !h.show || h.show(this, l);
-        if (r += `<td style="${this._getStyle(h)}" class="${this._getClasses(h, !0)}">`, _)
-          if (h.raw)
-            if (h.action)
-              (!h.action.show || h.action.show(this, l)) && (r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${h.action.label}</mint-button>`);
-            else if (h.actions)
-              if (h.actionStyle !== "buttons") {
+      const h = typeof this._configuration.onRowClick == "function", p = h ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
+      r += `<tr data-row-index="${c}" ${h ? 'data-row-clickable="true"' : ""}${p ? ` class="${p}"` : ""}>`, this._configuration.columns.forEach((d, u) => {
+        if (d.hidden) return;
+        const _ = !d.show || d.show(this, l);
+        if (r += `<td style="${this._getStyle(d)}" class="${this._getClasses(d, !0)}">`, _)
+          if (d.raw)
+            if (d.action)
+              (!d.action.show || d.action.show(this, l)) && (r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(d)}">${d.action.label}</mint-button>`);
+            else if (d.actions)
+              if (d.actionStyle !== "buttons") {
                 const f = `actions-popover-${this._tableId}-${c}`, m = `actions-button-${this._tableId}-${c}`;
-                r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, h.actions.forEach((g, b) => {
+                r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, d.actions.forEach((g, b) => {
                   if (!g.show || g.show(this, l)) {
                     const v = typeof g.label == "function" ? g.label(this, l) : g.label;
-                    r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${v}</div>`;
+                    r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
                   }
                 }), r += "</mint-popover>";
               } else
-                h.actions.forEach((f, m) => {
+                d.actions.forEach((f, m) => {
                   if (!f.show || f.show(this, l)) {
                     const g = f.label ? typeof f.label == "function" ? f.label(this, l) : f.label : "", b = f.icon ? ` icon="${this._escapeHtml(f.icon)}"` : "", v = f.tone ? ` tone="${this._escapeHtml(f.tone)}"` : "";
-                    r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(h)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
+                    r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(d)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
                   }
                 });
-            else typeof h.format == "function" ? r += h.format(this, l) : h.data && (r += this._escapeHtml(String(l[h.data] || "")));
-          else if (h.action) {
-            if (!h.action.show || h.action.show(this, l)) {
-              const f = typeof h.action.label == "function" ? h.action.label(this, l) : h.action.label;
-              r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${this._escapeHtml(String(f))}</mint-button>`;
+            else typeof d.format == "function" ? r += d.format(this, l) : d.data && (r += this._escapeHtml(String(l[d.data] || "")));
+          else if (d.action) {
+            if (!d.action.show || d.action.show(this, l)) {
+              const f = typeof d.action.label == "function" ? d.action.label(this, l) : d.action.label;
+              r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(d)}">${this._escapeHtml(String(f))}</mint-button>`;
             }
-          } else if (h.actions)
-            if (h.actionStyle !== "buttons") {
+          } else if (d.actions)
+            if (d.actionStyle !== "buttons") {
               const f = `actions-popover-${this._tableId}-${c}`, m = `actions-button-${this._tableId}-${c}`;
-              r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, h.actions.forEach((g, b) => {
+              r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, d.actions.forEach((g, b) => {
                 if (!g.show || g.show(this, l)) {
                   const v = typeof g.label == "function" ? g.label(this, l) : g.label;
-                  r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${v}</div>`;
+                  r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
                 }
               }), r += "</mint-popover>";
             } else
-              h.actions.forEach((f, m) => {
+              d.actions.forEach((f, m) => {
                 if (!f.show || f.show(this, l)) {
                   const g = f.label ? typeof f.label == "function" ? f.label(this, l) : f.label : "", b = f.icon ? ` icon="${this._escapeHtml(f.icon)}"` : "", v = f.tone ? ` tone="${this._escapeHtml(f.tone)}"` : "";
-                  r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(h)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
+                  r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(d)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
                 }
               });
-          else typeof h.format == "function" ? r += this._escapeHtml(h.format(this, l)) : h.data && (r += this._escapeHtml(String(l[h.data] || "")));
+          else typeof d.format == "function" ? r += this._escapeHtml(d.format(this, l)) : d.data && (r += this._escapeHtml(String(l[d.data] || "")));
         r += "</td>";
       }), r += "</tr>";
     }), t.length === 0 && (this._fetchError ? r += `<tr><td colspan="${this._configuration.columns.filter((l) => !l.hidden).length}" class="text-center py-8 text-red-500 dark:text-red-400">Failed to load data: ${this._escapeHtml(this._fetchError)}</td></tr>` : r += `<tr><td colspan="${this._configuration.columns.filter((l) => !l.hidden).length}" class="text-center py-8">No records found.</td></tr>`), e.innerHTML = r, this._attachTableEventListeners(), this._attachRowClickHandler(), s && i)) {
@@ -6485,7 +6502,7 @@ class xt extends HTMLElement {
         var c;
         const l = o.getAttribute("colspan");
         if (l)
-          for (let d = 0; d < parseInt(l) - 1; d++)
+          for (let h = 0; h < parseInt(l) - 1; h++)
             a.push("");
         a.push('"' + ((c = o.textContent) == null ? void 0 : c.trim().replace(/"/g, '""')) + '"');
       }), i += a.join(",") + `
@@ -6575,30 +6592,30 @@ class xt extends HTMLElement {
         }
       }), s += "</tr></thead>", s += "<tbody>", !this._fetching && !this._loading && e.forEach((r, a) => {
         const o = typeof this._configuration.onRowClick == "function", l = o ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
-        s += `<tr data-row-index="${a}" ${o ? 'data-row-clickable="true"' : ""}${l ? ` class="${l}"` : ""}>`, this._configuration.columns.forEach((c, d) => {
+        s += `<tr data-row-index="${a}" ${o ? 'data-row-clickable="true"' : ""}${l ? ` class="${l}"` : ""}>`, this._configuration.columns.forEach((c, h) => {
           if (c.hidden) return;
           const p = !c.show || c.show(this, r);
           if (s += `<td style="${this._getStyle(c)}" class="${this._getClasses(c, !0)}">`, p)
             if (c.raw)
               if (c.action) {
                 if (!c.action.show || c.action.show(this, r)) {
-                  const h = typeof c.action.label == "function" ? c.action.label(this, r) : c.action.label;
-                  s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(h))}</mint-button>`;
+                  const d = typeof c.action.label == "function" ? c.action.label(this, r) : c.action.label;
+                  s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(d))}</mint-button>`;
                 }
               } else if (c.actions)
                 if (c.actionStyle !== "buttons") {
-                  const h = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
-                  s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
+                  const d = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
+                  s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
                     if (!_.show || _.show(this, r)) {
                       const m = typeof _.label == "function" ? _.label(this, r) : _.label;
                       s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(m))}</div>`;
                     }
                   }), s += "</mint-popover>";
                 } else
-                  c.actions.forEach((h, u) => {
-                    if (!h.show || h.show(this, r)) {
-                      const _ = h.label ? typeof h.label == "function" ? h.label(this, r) : h.label : "", f = h.icon ? ` icon="${this._escapeHtml(h.icon)}"` : "", m = h.tone ? ` tone="${this._escapeHtml(h.tone)}"` : "";
-                      s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
+                  c.actions.forEach((d, u) => {
+                    if (!d.show || d.show(this, r)) {
+                      const _ = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", f = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", m = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
+                      s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
                     }
                   });
               else typeof c.format == "function" ? s += c.format(this, r) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
@@ -6606,18 +6623,18 @@ class xt extends HTMLElement {
               (!c.action.show || c.action.show(this, r)) && (s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${c.action.label}</mint-button>`);
             else if (c.actions)
               if (c.actionStyle !== "buttons") {
-                const h = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
-                s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
+                const d = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
+                s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
                   if (!_.show || _.show(this, r)) {
                     const m = typeof _.label == "function" ? _.label(this, r) : _.label;
                     s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(m))}</div>`;
                   }
                 }), s += "</mint-popover>";
               } else
-                c.actions.forEach((h, u) => {
-                  if (!h.show || h.show(this, r)) {
-                    const _ = h.label ? typeof h.label == "function" ? h.label(this, r) : h.label : "", f = h.icon ? ` icon="${this._escapeHtml(h.icon)}"` : "", m = h.tone ? ` tone="${this._escapeHtml(h.tone)}"` : "";
-                    s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
+                c.actions.forEach((d, u) => {
+                  if (!d.show || d.show(this, r)) {
+                    const _ = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", f = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", m = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
+                    s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
                   }
                 });
             else typeof c.format == "function" ? s += this._escapeHtml(c.format(this, r)) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
@@ -6802,12 +6819,12 @@ class wt extends HTMLElement {
     ).forEach((u) => {
       this._bodySlot && u.parentElement !== this._bodySlot && this._bodySlot.appendChild(u);
     }), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", this._actionsSlot.setAttribute("slot", "actions"), a.appendChild(this._actionsSlot));
-    let d = this._actionsSlot.querySelector("mint-stack");
-    d || (d = document.createElement("mint-stack"), d.setAttribute("direction", "horizontal"), d.className = "justify-end", this._actionsSlot.appendChild(d)), Array.from(this.children).filter(
+    let h = this._actionsSlot.querySelector("mint-stack");
+    h || (h = document.createElement("mint-stack"), h.setAttribute("direction", "horizontal"), h.className = "justify-end", this._actionsSlot.appendChild(h)), Array.from(this.children).filter(
       (u) => u !== this._overlay && u !== this._offCanvas && u !== this._actionsSlot && u.getAttribute("slot") === "actions"
     ).forEach((u) => {
       Array.from(u.children).forEach((f) => {
-        f.parentElement !== d && d.appendChild(f);
+        f.parentElement !== h && h.appendChild(f);
       }), u.parentElement && u.remove();
     }), Array.from(this.children).forEach((u) => {
       u !== this._overlay && u !== this._offCanvas && u.getAttribute("slot") !== "heading" && u.getAttribute("slot") !== "body" && u.getAttribute("slot") !== "actions" && u !== this._headingSlot && u !== this._bodySlot && u !== this._actionsSlot && u.parentElement !== this._bodySlot && this._bodySlot.appendChild(u);