monobill-mintui 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { g as O } from "./error-BiWD2g35.js";
-class B extends HTMLElement {
+import { g as q } from "./error-BiWD2g35.js";
+class O extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -39,13 +39,13 @@ class B extends HTMLElement {
       s === "solid" ? h === "neutral" ? n = r ? "#ffffff" : "#0f172a" : n = "#ffffff" : n = r ? "#ffffff" : "#0f172a";
     } else
       n = r ? "#e2e8f0" : "#0f172a";
-    const a = t === "large" ? "2" : "4", o = !!(this.style.width && this.style.height), c = `
+    const a = t === "large" ? "2" : "4", l = !!(this.style.width && this.style.height), o = `
       <svg 
         xmlns="http://www.w3.org/2000/svg" 
         fill="none" 
         viewBox="0 0 24 24"
-        class="animate-spin ${o ? "" : e}"
-        style="${o ? `width: ${this.style.width}; height: ${this.style.height}; animation-duration: 0.8s;` : "animation-duration: 0.8s;"}"
+        class="animate-spin ${l ? "" : e}"
+        style="${l ? `width: ${this.style.width}; height: ${this.style.height}; animation-duration: 0.8s;` : "animation-duration: 0.8s;"}"
       >
         <circle
           cx="12"
@@ -83,11 +83,11 @@ class B extends HTMLElement {
         </circle>
       </svg>
     `;
-    this.innerHTML = c.trim();
+    this.innerHTML = o.trim();
   }
 }
-customElements.get("mint-spinner") || customElements.define("mint-spinner", B);
-class q extends HTMLElement {
+customElements.get("mint-spinner") || customElements.define("mint-spinner", O);
+class B extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -124,23 +124,23 @@ class q extends HTMLElement {
     return e ? e === "local" ? `/icons/${this.getName()}.svg` : e === "cdn" ? `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg` : `${e.endsWith("/") ? e : `${e}/`}${this.getName()}.svg` : `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg`;
   }
   render() {
-    var o, c, h;
+    var l, o, h;
     const e = this.getName();
     if (!e) {
       this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
       return;
     }
-    if (!O(e)) {
+    if (!q(e)) {
       console.warn(`Icon "${e}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${e}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
       return;
     }
-    const i = this.closest("mint-button") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-button")), s = this.closest("mint-switch") || ((c = this.parentElement) == null ? void 0 : c.closest("mint-switch")), r = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
+    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")), r = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
     if (!Array.from(this.classList).some(
-      (l) => l.startsWith("w-") || l.startsWith("h-")
+      (c) => c.startsWith("w-") || c.startsWith("h-")
     ) && !r) {
-      let l;
-      s ? l = "w-3 h-3" : i ? l = "w-5 h-5" : l = "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"), l.split(" ").forEach((d) => {
-        d && this.classList.add(d);
+      let c;
+      s ? c = "w-3 h-3" : i ? c = "w-5 h-5" : c = "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"), c.split(" ").forEach((u) => {
+        u && this.classList.add(u);
       });
     }
     const a = this.getIconUrl();
@@ -149,13 +149,13 @@ class q extends HTMLElement {
     else if (i)
       this.classList.remove("text-gray-100", "text-gray-900");
     else {
-      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);
+      const u = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
+      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(u);
     }
   }
 }
-customElements.get("mint-icon") || customElements.define("mint-icon", q);
-class W extends HTMLElement {
+customElements.get("mint-icon") || customElements.define("mint-icon", B);
+class z extends HTMLElement {
   constructor() {
     super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1, this._handleMouseDown = () => {
       this._button && !this.isDisabled() && !this.isLoading() && this._button.classList.add("mint-button-active");
@@ -172,7 +172,7 @@ class W extends HTMLElement {
     };
   }
   static get observedAttributes() {
-    return ["variant", "tone", "disabled", "loading", "button-type", "full-width", "icon-position", "icon"];
+    return ["variant", "tone", "disabled", "loading", "button-type", "type", "full-width", "icon-position", "icon"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._button && this.setupEventListeners(), this.isFullWidth() && this.classList.add("w-full");
@@ -198,7 +198,8 @@ class W extends HTMLElement {
     return e === null ? !1 : e !== "false";
   }
   getType() {
-    return (this.getAttribute("button-type") || "default") === "submit" ? "submit" : "button";
+    const e = this.getAttribute("type"), t = this.getAttribute("button-type");
+    return (e || t || "default") === "submit" ? "submit" : "button";
   }
   isFullWidth() {
     return this.hasAttribute("full-width");
@@ -215,12 +216,12 @@ class W extends HTMLElement {
     const t = (s = this._button) == null ? void 0 : s.querySelector(".mint-button-content");
     if (t && ((r = t.textContent) != null && r.trim())) return !1;
     if (this._button)
-      for (let o = this._button.firstChild; o; o = o.nextSibling) {
-        if (o.nodeType === Node.TEXT_NODE && ((n = o.textContent) != null && n.trim()))
+      for (let l = this._button.firstChild; l; l = l.nextSibling) {
+        if (l.nodeType === Node.TEXT_NODE && ((n = l.textContent) != null && n.trim()))
           return !1;
-        if (o.nodeType === Node.ELEMENT_NODE) {
-          const c = o;
-          if (c.tagName !== "MINT-ICON" && c.tagName !== "MINT-SPINNER" && !c.querySelector("mint-spinner") && !c.hasAttribute("slot") && c.className !== "mint-button-icon" && !(c.className === "mr-2" && c.querySelector("mint-spinner")) && (a = c.textContent) != null && a.trim())
+        if (l.nodeType === Node.ELEMENT_NODE) {
+          const o = l;
+          if (o.tagName !== "MINT-ICON" && o.tagName !== "MINT-SPINNER" && !o.querySelector("mint-spinner") && !o.hasAttribute("slot") && o.className !== "mint-button-icon" && !(o.className === "mr-2" && o.querySelector("mint-spinner")) && (a = o.textContent) != null && a.trim())
             return !1;
         }
       }
@@ -535,14 +536,14 @@ class W extends HTMLElement {
         "border-transparent"
         // Match other button border width
       ]
-    }, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], o = [
+    }, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], l = [
       ...i,
       ...a
     ];
-    return this.isFullWidth() && o.push("w-full"), o.join(" ");
+    return this.isFullWidth() && l.push("w-full"), l.join(" ");
   }
   render() {
-    var h, l, d, u, p;
+    var h, c, u, d, f;
     const e = this.isDisabled() || this.isLoading(), t = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -555,10 +556,10 @@ class W extends HTMLElement {
       if (i)
         i.setAttribute("data-button-variant", this.getVariant()), i.setAttribute("data-button-tone", this.getTone()), "render" in i && typeof i.render == "function" && i.render();
       else {
-        const m = document.createElement("span");
-        m.className = "mr-2 inline-flex items-center";
-        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);
+        const p = document.createElement("span");
+        p.className = "mr-2 inline-flex items-center";
+        const m = document.createElement("mint-spinner");
+        m.setAttribute("size", "default"), m.setAttribute("data-button-variant", this.getVariant()), m.setAttribute("data-button-tone", this.getTone()), m.style.width = "0.875rem", m.style.height = "0.875rem", p.appendChild(m), this._button.insertBefore(p, this._button.firstChild);
       }
     else i && ((h = i.parentElement) == null || h.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
@@ -569,40 +570,40 @@ class W extends HTMLElement {
     const n = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const m = r && r.tagName === "MINT-ICON";
+      const p = r && r.tagName === "MINT-ICON";
       if (r && !r.parentElement) {
-        const g = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
-        m || n === "left" ? g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
-      } else if (r && (m || n === "left") && r.nextSibling !== a) {
+        const m = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        p || n === "left" ? m ? m.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
+      } else if (r && (p || n === "left") && r.nextSibling !== a) {
         r.remove();
-        const g = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
-        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
-      } else r && !m && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
+        const m = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
+        m ? m.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
+      } else r && !p && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
     } else {
-      const m = [];
-      for (let g = this._button.firstChild; g; g = g.nextSibling) {
-        if (g.nodeType !== Node.ELEMENT_NODE) {
-          m.push(g);
+      const p = [];
+      for (let m = this._button.firstChild; m; m = m.nextSibling) {
+        if (m.nodeType !== Node.ELEMENT_NODE) {
+          p.push(m);
           continue;
         }
-        const v = g;
-        v.tagName !== "MINT-SPINNER" && !v.querySelector("mint-spinner") && g !== r && !v.hasAttribute("slot") && !(v.className === "mr-2" && v.querySelector("mint-spinner")) && m.push(g);
+        const k = m;
+        k.tagName !== "MINT-SPINNER" && !k.querySelector("mint-spinner") && m !== r && !k.hasAttribute("slot") && !(k.className === "mr-2" && k.querySelector("mint-spinner")) && p.push(m);
       }
-      if (m.length > 0) {
-        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", m.forEach((v) => {
-          a.appendChild(v);
+      if (p.length > 0) {
+        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", p.forEach((k) => {
+          a.appendChild(k);
         });
-        const g = (l = this._button.querySelector("mint-spinner")) == null ? void 0 : l.parentElement;
-        r && n === "left" ? g ? (g.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? g ? (g.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : g ? g.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
+        const m = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
+        r && n === "left" ? m ? (m.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? m ? (m.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : m ? m.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
       } else if (r && r.tagName === "MINT-ICON" && !r.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);
+        const m = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
+        m ? m.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
       }
     }
-    const o = this.isIconOnly();
-    r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), o ? r.tagName === "MINT-ICON" ? (r.style.width = "1rem", r.style.height = "1rem", r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0") : (r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0", r.tagName === "svg" && (r.style.width = "1rem", r.style.height = "1rem")) : n === "left" ? r.classList.add("mr-1.5") : r.classList.add("ml-1.5"));
-    const c = this.getButtonClasses();
-    this._button.className = c;
+    const l = this.isIconOnly();
+    r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), l ? r.tagName === "MINT-ICON" ? (r.style.width = "1rem", r.style.height = "1rem", r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0") : (r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0", r.tagName === "svg" && (r.style.width = "1rem", r.style.height = "1rem")) : n === "left" ? r.classList.add("mr-1.5") : r.classList.add("ml-1.5"));
+    const o = this.getButtonClasses();
+    this._button.className = o;
   }
   setupEventListeners() {
     this._button && !this._clickHandler && (this._clickHandler = this.handleClick.bind(this), this._clickHandler && this._button.addEventListener("click", this._clickHandler, !0), this._button.addEventListener("mousedown", this._handleMouseDown), this._button.addEventListener("mouseup", this._handleMouseUp), this._button.addEventListener("mouseleave", this._handleMouseLeave), this._button.addEventListener("touchstart", this._handleTouchStart), this._button.addEventListener("touchend", this._handleTouchEnd), this._button.addEventListener("touchcancel", this._handleTouchCancel));
@@ -615,6 +616,17 @@ class W extends HTMLElement {
       e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
       return;
     }
+    if (this.getType() === "submit") {
+      this.dispatchEvent(
+        new CustomEvent("click", {
+          detail: { originalEvent: e },
+          bubbles: !0,
+          cancelable: !0,
+          composed: !0
+        })
+      );
+      return;
+    }
     if (e.stopPropagation(), e.stopImmediatePropagation(), this._isHandlingClick) {
       e.preventDefault();
       return;
@@ -631,13 +643,13 @@ class W extends HTMLElement {
     });
   }
 }
-customElements.get("mint-button") || customElements.define("mint-button", W);
-class z extends HTMLElement {
+customElements.get("mint-button") || customElements.define("mint-button", z);
+class W extends HTMLElement {
   constructor() {
     super(), this._button = null, this._checked = !1;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "icon", "info", "error", "error-message"];
+    return ["checked", "disabled", "label", "icon", "info", "error", "error-message", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full"), this._checked = this.hasAttribute("checked"), this.render();
@@ -649,12 +661,19 @@ class z extends HTMLElement {
   disconnectedCallback() {
     this.removeEventListeners();
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
     if (e === "checked" && (this._checked = i !== null), t !== i) {
       if (e === "error" || e === "error-message") {
         this._renderErrorState();
         return;
       }
+      if (e === "loading") {
+        this.render();
+        return;
+      }
       this.render();
     }
   }
@@ -752,23 +771,23 @@ class z extends HTMLElement {
     ].join(" ");
   }
   render() {
-    const e = this.getSwitchClasses(), t = this.getThumbClasses(), i = this.getLabel(), s = this.getInfo(), r = this.getIcon(), n = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
-    this.getAttribute("id") || this.setAttribute("id", n);
-    const a = this._getSwitchContainer();
-    this._button ? this._button.parentElement !== a && a.appendChild(this._button) : (this._button = document.createElement("button"), a.appendChild(this._button), this.setupEventListeners());
-    let o = a.querySelector(".mint-switch-label");
-    i ? (o || (o = document.createElement("label"), o.className = "mint-switch-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", this._button && this._button.parentElement === a ? a.insertBefore(o, this._button.nextSibling) : a.appendChild(o)), o.textContent = i, o.setAttribute("for", n), this.isDisabled() ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove(), this._button.className = e, this._button.disabled = this.isDisabled(), this._button.id = n, this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", i || "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 = t;
-    const h = c.querySelector("span");
-    if (r) {
-      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 l = this.querySelector(".mint-switch-info");
-    s ? (l || (l = document.createElement("span"), l.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", a && a.parentElement === this ? this.insertBefore(l, a.nextSibling) : this.appendChild(l)), l.textContent = s, this.isDisabled() ? l.classList.add("opacity-40") : l.classList.remove("opacity-40")) : l && l.remove(), this._renderErrorState();
+    const e = this.isLoading(), t = this.getSwitchClasses(), i = this.getThumbClasses(), s = this.getLabel(), r = this.getInfo(), n = this.getIcon(), a = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
+    this.getAttribute("id") || this.setAttribute("id", a);
+    const l = this._getSwitchContainer();
+    this._button ? this._button.parentElement !== l && l.appendChild(this._button) : (this._button = document.createElement("button"), l.appendChild(this._button), this.setupEventListeners());
+    let o = l.querySelector(".mint-switch-label");
+    s ? (o || (o = document.createElement("label"), o.className = "mint-switch-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", this._button && this._button.parentElement === l ? l.insertBefore(o, this._button.nextSibling) : l.appendChild(o)), o.textContent = s, o.setAttribute("for", a), this.isDisabled() ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove(), this._button.className = t, 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 h = this._button.querySelector("span");
+    h || (h = document.createElement("span"), this._button.appendChild(h)), h.className = i;
+    const c = h.querySelector("span");
+    if (n) {
+      let d = c;
+      d || (d = document.createElement("span"), d.className = this.getIconClasses(), h.appendChild(d));
+      let f = d.querySelector("mint-icon");
+      f || (f = document.createElement("mint-icon"), d.appendChild(f)), f.setAttribute("name", n);
+    } else c && c.remove();
+    let u = this.querySelector(".mint-switch-info");
+    r ? (u || (u = document.createElement("span"), u.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(u, l.nextSibling) : this.appendChild(u)), u.textContent = r, this.isDisabled() ? u.classList.add("opacity-40") : u.classList.remove("opacity-40")) : u && u.remove(), this._renderErrorState(), this._renderSkeleton(e);
   }
   setupEventListeners() {
     this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
@@ -791,13 +810,42 @@ class z extends HTMLElement {
       })
     ));
   }
+  _renderSkeleton(e) {
+    const t = this._getSwitchContainer(), i = this.getLabel(), s = this.getInfo();
+    let r = t.querySelector(".mint-switch-skeleton-container"), n = this.querySelector(".mint-switch-info-skeleton");
+    if (e) {
+      t.classList.contains("relative") || t.classList.add("relative"), r || (r = document.createElement("div"), r.className = "mint-switch-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", t.appendChild(r));
+      let a = r.querySelector(".mint-switch-skeleton-box");
+      if (a || (a = document.createElement("div"), a.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(a)), i) {
+        let o = r.querySelector(".mint-switch-skeleton-label");
+        o || (o = document.createElement("div"), o.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(o));
+      } else {
+        const o = r.querySelector(".mint-switch-skeleton-label");
+        o && o.remove();
+      }
+      r.style.display = "flex", this._button && (this._button.style.visibility = "hidden", this._button.style.pointerEvents = "none");
+      const l = t.querySelector(".mint-switch-label");
+      if (l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), s) {
+        n || (n = document.createElement("div"), n.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(n, t.nextSibling) : this.appendChild(n)), n.style.display = "block";
+        const o = this.querySelector(".mint-switch-info");
+        o && (o.style.display = "none");
+      } else
+        n && (n.style.display = "none");
+    } else {
+      r && (r.style.display = "none"), n && (n.style.display = "none"), this._button && (this._button.style.visibility = "visible", this._button.style.pointerEvents = "auto");
+      const a = t.querySelector(".mint-switch-label");
+      a && (a.style.visibility = "visible", a.style.pointerEvents = "auto");
+      const l = this.querySelector(".mint-switch-info");
+      l && (l.style.display = "");
+    }
+  }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
     let i = this.querySelector(".mint-switch-error");
     e && t ? (i || (i = document.createElement("div"), i.className = "mint-switch-error mt-1 text-xs text-red-600 dark:text-red-400", this.appendChild(i)), i.textContent = t) : i && i.remove(), this._button && (this._button.className = this.getSwitchClasses());
   }
 }
-customElements.get("mint-switch") || customElements.define("mint-switch", z);
+customElements.get("mint-switch") || customElements.define("mint-switch", W);
 class V extends HTMLElement {
   // Store classes set via class attribute
   constructor() {
@@ -886,14 +934,14 @@ class V extends HTMLElement {
       "text-green-600"
       // success
     ], i = ["text-2xl", "text-lg", "text-sm"];
-    i.forEach((c) => {
-      this.classList.remove(c), this._userClasses.delete(c);
-    }), t.forEach((c) => {
-      this.classList.remove(c), this._userClasses.delete(c);
+    i.forEach((o) => {
+      this.classList.remove(o), this._userClasses.delete(o);
+    }), t.forEach((o) => {
+      this.classList.remove(o), this._userClasses.delete(o);
     });
-    const s = this.getTextClasses().split(" ").filter((c) => c.trim());
-    Array.from(this.classList).forEach((c) => {
-      !t.includes(c) && !i.includes(c) && this._userClasses.add(c);
+    const s = this.getTextClasses().split(" ").filter((o) => o.trim());
+    Array.from(this.classList).forEach((o) => {
+      !t.includes(o) && !i.includes(o) && this._userClasses.add(o);
     });
     const n = [.../* @__PURE__ */ new Set([...s, ...Array.from(this._userClasses)])];
     this.className = n.join(" ");
@@ -904,8 +952,8 @@ class V extends HTMLElement {
       // Scales between 1rem (16px) and 1.125rem (18px)
       regular: "clamp(0.875rem, 1vw + 0.5rem, 0.875rem)"
       // Scales between 0.875rem (14px) and 0.875rem (14px)
-    }, o = a[e] || a.regular;
-    this.style.setProperty("font-size", o);
+    }, l = a[e] || a.regular;
+    this.style.setProperty("font-size", l);
   }
 }
 customElements.get("mint-text") || customElements.define("mint-text", V);
@@ -1231,13 +1279,17 @@ class U extends HTMLElement {
   }
   _setupBackButtonListener() {
     this._backButtonHandler || (this._backButtonHandler = (e) => {
-      const t = new CustomEvent("back", {
-        detail: e.detail,
-        bubbles: !0,
-        cancelable: !0,
-        composed: !0
-      });
-      this.dispatchEvent(t);
+      const t = e.target;
+      if (t && t.tagName === "MINT-BACK-BUTTON") {
+        e.stopPropagation();
+        const i = new CustomEvent("back", {
+          detail: e.detail,
+          bubbles: !0,
+          cancelable: !0,
+          composed: !0
+        });
+        this.dispatchEvent(i);
+      }
     }), this.addEventListener("back", this._backButtonHandler, !0);
   }
   _removeBackButtonListener() {
@@ -1333,31 +1385,31 @@ class J extends HTMLElement {
   render() {
     const e = this.getId(), t = this.getHeading(), i = this.isOpen();
     if (e && (this.id = e), 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 l = this._modal.querySelector(".modal-content");
-      l || (l = document.createElement("div"), l.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(l)), this._animateEnter();
+      let c = this._modal.querySelector(".modal-content");
+      c || (c = document.createElement("div"), c.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(c)), 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 r = this._headingSlot.querySelector("mint-text");
     t ? (r || (r = document.createElement("mint-text"), r.setAttribute("size", "sub-heading"), r.setAttribute("bold", ""), this._headingSlot.appendChild(r)), r.textContent = t) : r && r.remove(), Array.from(this.children).filter(
-      (l) => l !== this._overlay && l !== this._modal && l !== this._headingSlot && l.getAttribute("slot") === "heading"
-    ).forEach((l) => {
-      this._headingSlot && l.parentElement !== this._headingSlot && this._headingSlot.appendChild(l);
+      (c) => c !== this._overlay && c !== this._modal && c !== this._headingSlot && c.getAttribute("slot") === "heading"
+    ).forEach((c) => {
+      this._headingSlot && c.parentElement !== this._headingSlot && this._headingSlot.appendChild(c);
     }), 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(
-      (l) => l !== this._overlay && l !== this._modal && l !== this._bodySlot && l.getAttribute("slot") === "body"
-    ).forEach((l) => {
-      this._bodySlot && l.parentElement !== this._bodySlot && this._bodySlot.appendChild(l);
+      (c) => c !== this._overlay && c !== this._modal && c !== this._bodySlot && c.getAttribute("slot") === "body"
+    ).forEach((c) => {
+      this._bodySlot && c.parentElement !== this._bodySlot && this._bodySlot.appendChild(c);
     }), 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(
-      (l) => l !== this._overlay && l !== this._modal && l !== this._actionsSlot && l.getAttribute("slot") === "actions"
-    ).forEach((l) => {
-      Array.from(l.children).forEach((u) => {
-        u.parentElement !== o && o.appendChild(u);
-      }), l.parentElement && l.remove();
-    }), Array.from(this.children).forEach((l) => {
-      l !== this._overlay && l !== this._modal && l.getAttribute("slot") !== "heading" && l.getAttribute("slot") !== "body" && l.getAttribute("slot") !== "actions" && l !== this._headingSlot && l !== this._bodySlot && l !== this._actionsSlot && l.parentElement !== this._bodySlot && this._bodySlot.appendChild(l);
+    let l = this._actionsSlot.querySelector("mint-stack");
+    l || (l = document.createElement("mint-stack"), l.setAttribute("direction", "horizontal"), l.className = "justify-end", this._actionsSlot.appendChild(l)), Array.from(this.children).filter(
+      (c) => c !== this._overlay && c !== this._modal && c !== this._actionsSlot && c.getAttribute("slot") === "actions"
+    ).forEach((c) => {
+      Array.from(c.children).forEach((d) => {
+        d.parentElement !== l && l.appendChild(d);
+      }), c.parentElement && c.remove();
+    }), Array.from(this.children).forEach((c) => {
+      c !== this._overlay && c !== this._modal && c.getAttribute("slot") !== "heading" && c.getAttribute("slot") !== "body" && c.getAttribute("slot") !== "actions" && c !== this._headingSlot && c !== this._bodySlot && c !== this._actionsSlot && c.parentElement !== this._bodySlot && this._bodySlot.appendChild(c);
     }), this._updateBackgroundColor();
   }
   _updateBackgroundColor() {
@@ -1507,38 +1559,38 @@ class X extends HTMLElement {
     if (!t) return { top: 0, left: 0, direction: "down" };
     this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
     const s = t.getBoundingClientRect(), r = window.innerWidth, n = window.innerHeight, a = 8;
-    let o = this.getDirection(), c = 0, h = 0;
-    switch (o) {
+    let l = this.getDirection(), o = 0, h = 0;
+    switch (l) {
       case "down":
-        if (c = e.bottom + a, h = e.left + e.width / 2 - s.width / 2, c + s.height > n) {
-          const l = e.top - s.height - a;
-          l >= 0 ? (o = "up", c = l) : (c = Math.max(0, n - s.height - a), c + s.height > n && (c = 0));
+        if (o = e.bottom + a, h = e.left + e.width / 2 - s.width / 2, o + s.height > n) {
+          const c = e.top - s.height - a;
+          c >= 0 ? (l = "up", o = c) : (o = Math.max(0, n - s.height - a), o + s.height > n && (o = 0));
         }
         h < 0 && (h = a), h + s.width > r && (h = Math.max(a, r - s.width - a), h + s.width > r && (h = r - s.width));
         break;
       case "up":
-        if (c = e.top - s.height - a, h = e.left + e.width / 2 - s.width / 2, c < 0) {
-          const l = e.bottom + a;
-          l + s.height <= n ? (o = "down", c = l) : (c = Math.min(n - s.height - a, n - s.height), c < 0 && (c = n - s.height));
+        if (o = e.top - s.height - a, h = e.left + e.width / 2 - s.width / 2, o < 0) {
+          const c = e.bottom + a;
+          c + s.height <= n ? (l = "down", o = c) : (o = Math.min(n - s.height - a, n - s.height), o < 0 && (o = n - s.height));
         }
         h < 0 && (h = a), h + s.width > r && (h = Math.max(a, r - s.width - a), h + s.width > r && (h = r - s.width));
         break;
       case "right":
-        if (c = e.top + e.height / 2 - s.height / 2, h = e.right + a, h + s.width > r) {
-          const l = e.left - s.width - a;
-          l >= 0 ? (o = "left", h = l) : (h = Math.max(0, r - s.width - a), h + s.width > r && (h = r - s.width));
+        if (o = e.top + e.height / 2 - s.height / 2, h = e.right + a, h + s.width > r) {
+          const c = e.left - s.width - a;
+          c >= 0 ? (l = "left", h = c) : (h = Math.max(0, r - s.width - a), h + s.width > r && (h = r - s.width));
         }
-        c < 0 && (c = a), c + s.height > n && (c = Math.max(a, n - s.height - a), c + s.height > n && (c = n - s.height));
+        o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
         break;
       case "left":
-        if (c = e.top + e.height / 2 - s.height / 2, h = e.left - s.width - a, h < 0) {
-          const l = e.right + a;
-          l + s.width <= r ? (o = "right", h = l) : (h = Math.min(r - s.width - a, r - s.width), h < 0 && (h = 0));
+        if (o = e.top + e.height / 2 - s.height / 2, h = e.left - s.width - a, h < 0) {
+          const c = e.right + a;
+          c + s.width <= r ? (l = "right", h = c) : (h = Math.min(r - s.width - a, r - s.width), h < 0 && (h = 0));
         }
-        c < 0 && (c = a), c + s.height > n && (c = Math.max(a, n - s.height - a), c + s.height > n && (c = n - s.height));
+        o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
         break;
     }
-    return { top: c, left: h, direction: o };
+    return { top: o, left: h, direction: l };
   }
   render() {
     const e = this.getId(), t = this.isOpen(), i = this.getPadding();
@@ -1546,8 +1598,8 @@ class X extends HTMLElement {
       if (this.classList.remove("hidden"), this.style.pointerEvents = "auto", !this._clickOutsideHandler) {
         const n = this;
         this._clickOutsideHandler = function(a) {
-          const o = a.composedPath(), c = o.includes(n);
-          if (!(n._triggerElement && o.includes(n._triggerElement)) && !c) {
+          const l = a.composedPath(), o = l.includes(n);
+          if (!(n._triggerElement && l.includes(n._triggerElement)) && !o) {
             n.close();
             return;
           }
@@ -1562,8 +1614,8 @@ class X extends HTMLElement {
     if (!s)
       s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-800 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
     else {
-      const n = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], o = n.filter((c) => !a.includes(c));
-      s.className = [...o, i].join(" ");
+      const n = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], l = n.filter((o) => !a.includes(o));
+      s.className = [...l, i].join(" ");
     }
     Array.from(this.children).forEach((n) => {
       n !== this._overlay && n !== this._popover && n.parentElement === this && s.appendChild(n);
@@ -1637,7 +1689,7 @@ class K extends HTMLElement {
     super(), this._checkbox = null, this._checked = !1, this._clickHandler = null, this._changeHandler = null, this._mousedownHandler = null, this._mouseupHandler = null, this._mouseleaveHandler = null, this._touchstartHandler = null, this._touchendHandler = null, this._focusHandler = null, this._blurHandler = null;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "info", "id", "name", "value", "error", "error-message"];
+    return ["checked", "disabled", "label", "info", "id", "name", "value", "error", "error-message", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-flex", "items-start", "gap-2");
@@ -1647,12 +1699,19 @@ class K extends HTMLElement {
   disconnectedCallback() {
     this.removeEventListeners();
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
     if (e === "checked" && (this._checked = i !== null && i !== "false", this._checkbox && (this._checkbox.checked = this._checked)), t !== i) {
       if (e === "error" || e === "error-message") {
         this._renderErrorState();
         return;
       }
+      if (e === "loading") {
+        this.render();
+        return;
+      }
       this.render(), e === "checked" && this._checkbox && this.updateVisualState();
     }
   }
@@ -1722,34 +1781,37 @@ class K extends HTMLElement {
     ].join(" ");
   }
   render() {
-    const e = this.getLabel(), t = this.getInfo(), i = this.isDisabled();
-    let s = this.querySelector(".mint-checkbox-wrapper");
-    s || (s = document.createElement("div"), s.className = "mint-checkbox-wrapper", this.insertBefore(s, this.firstChild)), this._checkbox ? this._checkbox.parentElement !== s && s.appendChild(this._checkbox) : (this._checkbox = document.createElement("input"), this._checkbox.type = "checkbox", s.appendChild(this._checkbox), this.setupEventListeners()), this._checkbox.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._checkbox.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._checkbox.checked = this._checked, this._checkbox.disabled = i, this._changeHandler || this.setupEventListeners();
-    const r = this.getId();
-    r ? this._checkbox.id = r : this._checkbox.removeAttribute("id");
-    const n = this.getName();
-    n ? this._checkbox.name = n : this._checkbox.removeAttribute("name");
-    const a = this.getValue();
-    a ? this._checkbox.value = a : this._checkbox.removeAttribute("value"), e ? this._checkbox.setAttribute("aria-label", e) : this._checkbox.removeAttribute("aria-label"), s.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, s.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
-    let o = s.querySelector("mint-icon");
-    o || (o = document.createElement("mint-icon"), o.setAttribute("name", "check"), o.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", o.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", o.style.zIndex = "1", s.appendChild(o)), this.updateVisualState();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.isDisabled();
+    let r = this.querySelector(".mint-checkbox-container");
+    r || (r = document.createElement("div"), r.className = "mint-checkbox-container relative inline-flex items-start gap-2", this.insertBefore(r, this.firstChild));
+    let n = this.querySelector(".mint-checkbox-wrapper");
+    n ? n.parentElement !== r && r.appendChild(n) : (n = document.createElement("div"), n.className = "mint-checkbox-wrapper", r.appendChild(n)), this._checkbox ? this._checkbox.parentElement !== n && n.appendChild(this._checkbox) : (this._checkbox = document.createElement("input"), this._checkbox.type = "checkbox", n.appendChild(this._checkbox), this.setupEventListeners()), this._checkbox.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._checkbox.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._checkbox.checked = this._checked, this._checkbox.disabled = s, this._changeHandler || this.setupEventListeners();
+    const a = this.getId();
+    a ? this._checkbox.id = a : this._checkbox.removeAttribute("id");
+    const l = this.getName();
+    l ? this._checkbox.name = l : this._checkbox.removeAttribute("name");
+    const o = this.getValue();
+    o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"), n.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, n.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
+    let h = n.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", n.appendChild(h)), this.updateVisualState();
     let c = this.querySelector(".mint-checkbox-label-container");
-    if (e || t) {
-      c || (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", this.appendChild(c));
-      let h = c.querySelector(".mint-checkbox-label");
-      e ? (h || (h = document.createElement("span"), h.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", c.insertBefore(h, c.firstChild)), h.textContent = e, i ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
-      let l = c.querySelector(".mint-checkbox-info");
-      if (t ? (l || (l = document.createElement("span"), l.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", c.appendChild(l)), l.textContent = t, i ? l.classList.add("opacity-40") : l.classList.remove("opacity-40")) : l && l.remove(), i)
+    const u = this.querySelector(".mint-checkbox-container");
+    if (t || i) {
+      c ? u && c.parentElement !== u && u.appendChild(c) : (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", u ? u.appendChild(c) : this.appendChild(c));
+      let d = c.querySelector(".mint-checkbox-label");
+      t ? (d || (d = document.createElement("span"), d.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", c.insertBefore(d, c.firstChild)), d.textContent = t, s ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove();
+      let f = c.querySelector(".mint-checkbox-info");
+      if (i ? (f || (f = document.createElement("span"), f.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", c.appendChild(f)), f.textContent = i, s ? f.classList.add("opacity-40") : f.classList.remove("opacity-40")) : f && f.remove(), s)
         c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
       else {
         c.style.cursor = "pointer";
-        const d = c._clickHandler;
-        d && c.removeEventListener("click", d), c._clickHandler = (u) => {
-          this._checkbox && (u.target === this._checkbox || this._checkbox.contains(u.target) || u.composedPath().includes(this._checkbox)) || this.toggle();
+        const p = c._clickHandler;
+        p && c.removeEventListener("click", p), c._clickHandler = (m) => {
+          this._checkbox && (m.target === this._checkbox || this._checkbox.contains(m.target) || m.composedPath().includes(this._checkbox)) || this.toggle();
         }, c.addEventListener("click", c._clickHandler);
       }
     } else c && c.remove();
-    this._renderErrorState();
+    this._renderErrorState(), this._renderSkeleton(e);
   }
   setupEventListeners() {
     this.removeEventListeners(), this._checkbox && (this._changeHandler = (e) => {
@@ -1807,6 +1869,20 @@ class K extends HTMLElement {
       this.dispatchEvent(e);
     }
   }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-checkbox-skeleton-container");
+    const i = this.querySelector(".mint-checkbox-container"), s = this.querySelector(".mint-checkbox-wrapper"), r = this.querySelector(".mint-checkbox-label-container");
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-checkbox-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t)));
+      let n = t.querySelector(".mint-checkbox-skeleton-box");
+      if (n || (n = document.createElement("div"), n.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(n)), r) {
+        let a = t.querySelector(".mint-checkbox-skeleton-label");
+        a || (a = document.createElement("div"), a.className = "mint-checkbox-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(a));
+      }
+      t.style.display = "flex", s && (s.style.visibility = "hidden", s.style.pointerEvents = "none"), r && (r.style.visibility = "hidden", r.style.pointerEvents = "none");
+    } else
+      t && (t.style.display = "none"), s && (s.style.visibility = "visible", s.style.pointerEvents = "auto"), r && (r.style.visibility = "visible", r.style.pointerEvents = "auto");
+  }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
     let i = this.querySelector(".mint-checkbox-label-container");
@@ -1823,7 +1899,7 @@ class Z extends HTMLElement {
     super(), this._radio = null, this._checked = !1, this._changeHandler = null, this._clickHandler = null, this._focusHandler = null, this._blurHandler = null, this._keydownHandler = null;
   }
   static get observedAttributes() {
-    return ["value", "checked", "disabled"];
+    return ["value", "checked", "disabled", "loading"];
   }
   connectedCallback() {
     this.classList.add("inline-flex", "items-center", "gap-2", "cursor-pointer", "select-none");
@@ -1833,8 +1909,17 @@ class Z extends HTMLElement {
   disconnectedCallback() {
     this._clickHandler && (this.removeEventListener("click", this._clickHandler), this._clickHandler = null), this._radio && (this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._focusHandler && (this._radio.removeEventListener("focus", this._focusHandler), this._focusHandler = null), this._blurHandler && (this._radio.removeEventListener("blur", this._blurHandler), this._blurHandler = null), this._keydownHandler && (this._radio.removeEventListener("keydown", this._keydownHandler), this._keydownHandler = null));
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
-    e === "checked" && (this._checked = i !== null && i !== "false", this._radio && (this._radio.checked = this._checked), this._updateVisualState()), t !== i && this.render();
+    if (e === "checked" && (this._checked = i !== null && i !== "false", this._radio && (this._radio.checked = this._checked), this._updateVisualState()), t !== i) {
+      if (e === "loading") {
+        this.render();
+        return;
+      }
+      this.render();
+    }
   }
   get checked() {
     return this._checked;
@@ -1867,20 +1952,20 @@ class Z extends HTMLElement {
     }, this.addEventListener("click", this._clickHandler));
   }
   render() {
-    var u;
-    const e = this.isDisabled(), t = this.getValue(), i = this.closest("mint-choice"), s = (i == null ? void 0 : i.getAttribute("name")) || "";
-    let r = "";
-    const n = this.querySelector(".mint-choice-option-label");
-    n ? r = ((u = n.textContent) == null ? void 0 : u.trim()) || "" : Array.from(this.childNodes).forEach((p) => {
+    var f;
+    const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"), r = (s == null ? void 0 : s.getAttribute("name")) || "";
+    let n = "";
+    const a = this.querySelector(".mint-choice-option-label");
+    a ? n = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((p) => {
       var m;
       if (p.nodeType === Node.TEXT_NODE) {
-        const g = (m = p.textContent) == null ? void 0 : m.trim();
-        g && (r += g);
+        const k = (m = p.textContent) == null ? void 0 : m.trim();
+        k && (n += k);
       }
     });
-    const a = this.querySelectorAll(".mint-choice-option-wrapper");
+    const l = this.querySelectorAll(".mint-choice-option-wrapper");
     let o = null;
-    if (a.length > 0 && (this._radio && (o = Array.from(a).find((p) => p.contains(this._radio))), o || (o = a[0]), a.forEach((p, m) => {
+    if (l.length > 0 && (this._radio && (o = Array.from(l).find((p) => p.contains(this._radio))), o || (o = l[0]), l.forEach((p, m) => {
       p !== o && p.remove();
     })), o || (o = document.createElement("div"), o.className = "mint-choice-option-wrapper", o.style.position = "relative", this.insertBefore(o, this.firstChild)), o.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, o.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((p) => {
       p !== this._radio && p.remove();
@@ -1896,11 +1981,11 @@ class Z extends HTMLElement {
       }), this._radio.removeEventListener("focus", this._focusHandler), this._radio.removeEventListener("blur", this._blurHandler), this._radio.removeEventListener("keydown", this._keydownHandler), this._radio.addEventListener("focus", this._focusHandler), this._radio.addEventListener("blur", this._blurHandler), this._radio.addEventListener("keydown", this._keydownHandler));
     else {
       this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "sr-only", this._radio.style.position = "absolute", this._radio.style.width = "1px", this._radio.style.height = "1px", this._radio.style.padding = "0", this._radio.style.margin = "-1px", this._radio.style.overflow = "hidden", this._radio.style.clip = "rect(0, 0, 0, 0)", this._radio.style.whiteSpace = "nowrap", this._radio.style.border = "0", o.appendChild(this._radio), this._changeHandler = (m) => {
-        const g = this._checked;
+        const k = this._checked;
         this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
-        const v = this.closest("mint-choice");
-        g !== this._checked && v && setTimeout(() => {
-          v.dispatchEvent(new CustomEvent("choice-change", {
+        const _ = this.closest("mint-choice");
+        k !== this._checked && _ && setTimeout(() => {
+          _.dispatchEvent(new CustomEvent("choice-change", {
             detail: { checked: this._checked, value: this.getValue() },
             bubbles: !0,
             cancelable: !0
@@ -1911,8 +1996,8 @@ class Z extends HTMLElement {
         this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState());
       };
       this._radio.addEventListener("click", p), this._focusHandler = (m) => {
-        const g = this.querySelector(".mint-choice-option-wrapper");
-        g && !this.isDisabled() && g.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+        const k = this.querySelector(".mint-choice-option-wrapper");
+        k && !this.isDisabled() && k.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }, this._radio.addEventListener("focus", this._focusHandler), this._blurHandler = () => {
         const m = this.querySelector(".mint-choice-option-wrapper");
         m && m.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
@@ -1920,16 +2005,16 @@ class Z extends HTMLElement {
         this.isDisabled() || (m.key === "ArrowDown" || m.key === "ArrowRight" ? (m.preventDefault(), this._focusNextOption()) : (m.key === "ArrowUp" || m.key === "ArrowLeft") && (m.preventDefault(), this._focusPreviousOption()));
       }, this._radio.addEventListener("keydown", this._keydownHandler);
     }
-    this._radio.name = s, this._radio.value = t, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked")) : this._radio.checked = this._checked, this._radio.disabled = e, e ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((p, m) => {
+    this._radio.name = r, this._radio.value = i, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked")) : this._radio.checked = this._checked, this._radio.disabled = t, t ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), n ? this._radio.setAttribute("aria-label", n) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((p, m) => {
       m > 0 && p.remove();
     });
-    let l = o.querySelector(".mint-choice-option-indicator");
-    l || (l = document.createElement("div"), l.className = "mint-choice-option-indicator", o.appendChild(l)), l.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", l.style.position = "absolute", l.style.top = "50%", l.style.left = "50%", l.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", l.style.opacity = this._checked ? "1" : "0";
+    let u = o.querySelector(".mint-choice-option-indicator");
+    u || (u = document.createElement("div"), u.className = "mint-choice-option-indicator", o.appendChild(u)), u.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", u.style.position = "absolute", u.style.top = "50%", u.style.left = "50%", u.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", u.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
     let d = this.querySelector(".mint-choice-option-label");
-    r && (d || (d = document.createElement("span"), d.className = "mint-choice-option-label", this.appendChild(d), Array.from(this.childNodes).forEach((p) => {
+    n && (d || (d = document.createElement("span"), d.className = "mint-choice-option-label", this.appendChild(d), Array.from(this.childNodes).forEach((p) => {
       var m;
       p.nodeType === Node.TEXT_NODE && ((m = p.textContent) != null && m.trim()) && (p.textContent = "");
-    })), d.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, d.textContent = r), 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();
+    })), d.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, d.textContent = n), t ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
   }
   _getWrapperClasses() {
     const e = this.isDisabled(), t = [
@@ -1962,6 +2047,25 @@ class Z extends HTMLElement {
     const t = this.querySelector(".mint-choice-option-indicator");
     t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)");
   }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-choice-option-skeleton-container");
+    const i = this.querySelector(".mint-choice-option-wrapper");
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-choice-option-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
+      let s = t.querySelector(".mint-choice-option-skeleton-radio");
+      if (s || (s = document.createElement("div"), s.className = "mint-choice-option-skeleton-radio flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(s)), t.style.display = "flex", i) {
+        const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
+        r && (r.style.visibility = "hidden"), n && (n.style.visibility = "hidden"), i.style.pointerEvents = "none";
+      }
+    } else {
+      if (t && (t.style.display = "none"), i) {
+        const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
+        r && (r.style.visibility = "visible"), n && (n.style.visibility = "visible"), i.style.pointerEvents = "auto";
+      }
+      const s = this.querySelector(".mint-choice-option-label");
+      s && !(i != null && i.contains(s)) && (s.style.visibility = "visible", s.style.pointerEvents = "auto");
+    }
+  }
   _updateGroupState() {
     var t;
     if (!((t = this._radio) != null && t.name)) return;
@@ -1985,8 +2089,8 @@ class Z extends HTMLElement {
       if (i.checked = !0, r) {
         const n = r._checked;
         if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
-          const o = new Event("change", { bubbles: !0 });
-          r._changeHandler.call(r, o);
+          const l = new Event("change", { bubbles: !0 });
+          r._changeHandler.call(r, l);
         } else
           r._updateVisualState(), r._updateGroupState();
         const a = r.closest("mint-choice");
@@ -2013,8 +2117,8 @@ class Z extends HTMLElement {
       if (i.checked = !0, r) {
         const n = r._checked;
         if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
-          const o = new Event("change", { bubbles: !0 });
-          r._changeHandler.call(r, o);
+          const l = new Event("change", { bubbles: !0 });
+          r._changeHandler.call(r, l);
         } else
           r._updateVisualState(), r._updateGroupState();
         const a = r.closest("mint-choice");
@@ -2036,15 +2140,20 @@ class Q extends HTMLElement {
     super(), this._optionsContainer = null;
   }
   static get observedAttributes() {
-    return ["label", "name", "info", "error", "error-message", "id", "disabled", "required"];
+    return ["label", "name", "info", "error", "error-message", "id", "disabled", "required", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "block", "w-full"), this.render();
   }
   disconnectedCallback() {
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
-    t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((r) => {
+    t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : e === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((r) => {
+      this.isLoading() ? r.setAttribute("loading", "") : r.removeAttribute("loading");
+    })) : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((r) => {
       typeof r.render == "function" && r.render();
     })));
   }
@@ -2102,27 +2211,45 @@ class Q extends HTMLElement {
     });
   }
   render() {
-    const e = this.getLabel(), t = this.getInfo(), i = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
-    this.getId() || this.setAttribute("id", i);
-    const s = this.isDisabled();
-    let r = this.querySelector(".mint-choice-label-container");
-    if (e || t) {
-      r || (r = document.createElement("div"), r.className = "mint-choice-label-container flex flex-col gap-0.5 mb-2", this.insertBefore(r, this.firstChild));
-      let a = r.querySelector(".mint-choice-label");
-      e ? (a || (a = document.createElement("label"), a.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", r.insertBefore(a, r.firstChild)), a.textContent = e, a.setAttribute("for", i), s ? a.classList.add("opacity-40") : a.classList.remove("opacity-40")) : a && a.remove();
-      let o = r.querySelector(".mint-choice-info");
-      t ? (o || (o = document.createElement("span"), o.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", r.appendChild(o)), o.textContent = t, s ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
-    } else r && r.remove();
-    if (!this._optionsContainer) {
-      this._optionsContainer = document.createElement("div"), this._optionsContainer.className = "mint-choice-options flex flex-col gap-3";
-      const a = this.querySelector(".mint-choice-label-container");
-      a && a.parentElement === this ? this.insertBefore(this._optionsContainer, a.nextSibling) : this.insertBefore(this._optionsContainer, this.firstChild);
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
+    this.getId() || this.setAttribute("id", s);
+    const r = this.isDisabled();
+    let n = this.querySelector(".mint-choice-label-container");
+    if (t || i) {
+      n || (n = document.createElement("div"), n.className = "mint-choice-label-container flex flex-col gap-0.5 mb-2", this.insertBefore(n, this.firstChild));
+      let o = n.querySelector(".mint-choice-label");
+      t ? (o || (o = document.createElement("label"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.insertBefore(o, n.firstChild)), o.textContent = t, o.setAttribute("for", s), r ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
+      let h = n.querySelector(".mint-choice-info");
+      i ? (h || (h = document.createElement("span"), h.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", n.appendChild(h)), h.textContent = i, r ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
+    } else n && n.remove();
+    let a = this.querySelector(".mint-choice-options-wrapper");
+    if (!a) {
+      a = document.createElement("div"), a.className = "mint-choice-options-wrapper relative";
+      const o = this.querySelector(".mint-choice-label-container");
+      o && o.parentElement === this ? this.insertBefore(a, o.nextSibling) : this.insertBefore(a, this.firstChild);
     }
-    Array.from(this.children).filter(
-      (a) => a.tagName === "MINT-CHOICE-OPTION" && a.parentElement !== this._optionsContainer
-    ).forEach((a) => {
-      this._optionsContainer.appendChild(a);
-    }), this._renderErrorState();
+    this._optionsContainer ? this._optionsContainer.parentElement !== a && a.appendChild(this._optionsContainer) : (this._optionsContainer = document.createElement("div"), this._optionsContainer.className = "mint-choice-options-container flex flex-col gap-3", a.appendChild(this._optionsContainer)), Array.from(this.children).filter(
+      (o) => o.tagName === "MINT-CHOICE-OPTION" && o.parentElement !== this._optionsContainer
+    ).forEach((o) => {
+      this._optionsContainer.appendChild(o);
+    }), this._renderErrorState(), this._renderSkeleton(e);
+  }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-choice-skeleton-container");
+    const i = this.querySelector(".mint-choice-options-wrapper"), s = this.querySelector(".mint-choice-options-container");
+    if (e) {
+      if (t || (t = document.createElement("div"), t.className = "mint-choice-skeleton-container absolute inset-0 z-10 pointer-events-none flex flex-col gap-3", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t))), t.querySelectorAll(".mint-choice-option-skeleton").length === 0)
+        for (let n = 0; n < 3; n++) {
+          const a = document.createElement("div");
+          a.className = "mint-choice-option-skeleton flex items-center gap-3";
+          const l = document.createElement("div");
+          l.className = "flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", a.appendChild(l);
+          const o = document.createElement("div");
+          o.className = "h-4 w-20 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", a.appendChild(o), t.appendChild(a);
+        }
+      t.style.display = "flex", s && (s.style.opacity = "0", s.style.pointerEvents = "none");
+    } else
+      t && (t.style.display = "none"), s && (s.style.opacity = "1", s.style.pointerEvents = "auto");
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -2136,7 +2263,7 @@ class ee extends HTMLElement {
     super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
   }
   static get observedAttributes() {
-    return ["type", "placeholder", "value", "disabled", "id", "name", "required", "readonly", "rows", "icon", "label", "info", "error", "error-message"];
+    return ["type", "placeholder", "value", "disabled", "id", "name", "required", "readonly", "rows", "icon", "label", "info", "error", "error-message", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.getLabel() || console.error('mint-input: The "label" attribute is required. Please provide a label for the input.'), this.render();
@@ -2150,6 +2277,10 @@ class ee extends HTMLElement {
         this._renderErrorState(), this._element && (this._element.className = this.getInputClasses()), this._colorTextInput && (this._colorTextInput.className = this.getInputClasses());
         return;
       }
+      if (e === "loading") {
+        this.render();
+        return;
+      }
       this.render();
     }
   }
@@ -2248,116 +2379,119 @@ class ee extends HTMLElement {
     ], a = [
       "border-2",
       r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
-    ], o = [
+    ], l = [
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
       r ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
     ];
-    return [...n, ...a, ...o].filter(Boolean).join(" ");
+    return [...n, ...a, ...l].filter(Boolean).join(" ");
+  }
+  isLoading() {
+    return this.hasAttribute("loading");
   }
   render() {
-    var _, E, L, y;
+    var E, C, v, y;
     this.getType();
-    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), c = this.getId(), h = this.getName(), l = this.getAttribute("value") || (s ? "#000000" : ""), d = this.getRows(), u = this.getIcon(), p = this.getLabel(), m = this.getInfo();
-    if (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 = l || "#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 = (b) => {
+    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), h = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), u = this.getRows(), d = this.getIcon(), f = this.getLabel(), p = this.getInfo(), m = this.isLoading();
+    if (this._renderSkeleton(m), 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 = c || "#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 = (g) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
-          var k;
-          this._colorPicker && this._colorPicker.matches(":focus-visible") && ((k = this._colorPickerWrapper) == null || k.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
+          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"));
         });
       }, this._blurHandler = () => {
         this._colorPickerWrapper && this._colorPickerWrapper.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }, this._colorPicker.addEventListener("focus", this._focusHandler), this._colorPicker.addEventListener("blur", this._blurHandler), this._colorPicker.addEventListener("input", () => {
-        var k;
-        const b = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
-        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = b), this._colorTextInput && (this._colorTextInput.value = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("input", {
-          detail: { value: b },
+        var x;
+        const g = ((x = this._colorPicker) == null ? void 0 : x.value) || "#000000";
+        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this._colorTextInput && (this._colorTextInput.value = g), this.setAttribute("value", g), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: g },
           bubbles: !0,
           cancelable: !0
         }));
       }), this._colorPicker.addEventListener("change", () => {
-        var k;
-        const b = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
-        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("change", {
-          detail: { value: b },
+        var x;
+        const g = ((x = this._colorPicker) == null ? void 0 : x.value) || "#000000";
+        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this.setAttribute("value", g), this.dispatchEvent(new CustomEvent("change", {
+          detail: { value: g },
           bubbles: !0,
           cancelable: !0
         }));
       })), this._colorTextInput || (this._colorTextInput = document.createElement("input"), this._colorTextInput.type = "text", this._colorTextInput.className = this.getInputClasses(), this._colorTextInput.placeholder = r || "#000000", this._colorTextInput.pattern = "^#[0-9A-Fa-f]{6}$", this._wrapper.appendChild(this._colorTextInput), this._colorTextInput.addEventListener("input", () => {
-        var k;
-        const b = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
-        /^#[0-9A-Fa-f]{6}$/.test(b) && (this._colorPicker && (this._colorPicker.value = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("input", {
-          detail: { value: b },
+        var x;
+        const g = ((x = this._colorTextInput) == null ? void 0 : x.value) || "";
+        /^#[0-9A-Fa-f]{6}$/.test(g) && (this._colorPicker && (this._colorPicker.value = g), this.setAttribute("value", g), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: g },
           bubbles: !0,
           cancelable: !0
         })));
       }), this._colorTextInput.addEventListener("blur", () => {
-        var k, C;
-        const b = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
-        /^#[0-9A-Fa-f]{6}$/.test(b) ? (this._colorPicker && (this._colorPicker.value = b), this.setAttribute("value", b)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
-          detail: { value: ((C = this._colorPicker) == null ? void 0 : C.value) || "#000000" },
+        var x, w;
+        const g = ((x = this._colorTextInput) == null ? void 0 : x.value) || "";
+        /^#[0-9A-Fa-f]{6}$/.test(g) ? (this._colorPicker && (this._colorPicker.value = g), this.setAttribute("value", g)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
+          detail: { value: ((w = this._colorPicker) == null ? void 0 : w.value) || "#000000" },
           bubbles: !0,
           cancelable: !0
         }));
       }));
-      const f = l || "#000000";
-      if (this._colorPicker && this._colorPicker.value !== f && (this._colorPicker.value = f), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = f), this._colorTextInput && this._colorTextInput.value !== f && (this._colorTextInput.value = f), this._colorPicker && (this._colorPicker.disabled = n), this._colorPickerWrapper && (n ? (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 = n, this._colorTextInput.readOnly = a, this._colorTextInput.required = o), this._colorTextInput) {
-        const b = this._colorTextInput;
-        c ? b.id = c : b.removeAttribute("id"), h ? b.name = h : b.removeAttribute("name"), b.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = b;
+      const b = c || "#000000";
+      if (this._colorPicker && this._colorPicker.value !== b && (this._colorPicker.value = b), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = b), this._colorTextInput && this._colorTextInput.value !== b && (this._colorTextInput.value = b), this._colorPicker && (this._colorPicker.disabled = n), this._colorPickerWrapper && (n ? (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 = n, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
+        const g = this._colorTextInput;
+        o ? g.id = o : g.removeAttribute("id"), h ? g.name = h : g.removeAttribute("name"), g.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = g;
       }
       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), u && !t ? this._icon ? this._icon.setAttribute("name", u) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", u), 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() && !t) {
+    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 && !t ? 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() && !t) {
       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 f = document.createElement("mint-icon");
-        f.setAttribute("name", "caret-up"), f.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(f), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.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 b = document.createElement("mint-icon");
-        b.setAttribute("name", "caret-down"), b.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(b), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (k) => {
-          if (k.preventDefault(), k.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const C = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, w = this._input.min ? parseFloat(this._input.min) : void 0, A = this._input.max ? parseFloat(this._input.max) : void 0;
-            let S = C + I;
-            A !== void 0 && S > A && (S = A), w !== void 0 && S < w && (S = w), this._input.value = S.toString(), this.setAttribute("value", S.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+        b.setAttribute("name", "caret-up"), b.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(b), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.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 g = document.createElement("mint-icon");
+        g.setAttribute("name", "caret-down"), g.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(g), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (x) => {
+          if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
+            const w = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
+            let L = w + T;
+            H !== void 0 && L > H && (L = H), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
-        }), this._numberDecrementButton.addEventListener("click", (k) => {
-          if (k.preventDefault(), k.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const C = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, w = this._input.min ? parseFloat(this._input.min) : void 0, A = this._input.max ? parseFloat(this._input.max) : void 0;
-            let S = C - I;
-            w !== void 0 && S < w && (S = w), A !== void 0 && S > A && (S = A), this._input.value = S.toString(), this.setAttribute("value", S.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+        }), this._numberDecrementButton.addEventListener("click", (x) => {
+          if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
+            const w = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
+            let L = w - T;
+            S !== void 0 && L < S && (L = S), H !== void 0 && L > H && (L = H), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         });
       }
       this._numberIncrementButton && (this._numberIncrementButton.disabled = n || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = n || a);
     } else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
     if (t) {
-      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 = r, this._textarea.disabled = n, this._textarea.readOnly = a, this._textarea.required = o, this._textarea.rows = d, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), l !== this._textarea.value && (this._textarea.value = l), c ? this._textarea.id = c : this._textarea.removeAttribute("id"), h ? this._textarea.name = h : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
-        const f = this.firstChild.textContent;
-        f && !this._textarea.value && (this._textarea.value = f.trim()), this.removeChild(this.firstChild);
+      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 = r, this._textarea.disabled = n, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = u, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), c !== this._textarea.value && (this._textarea.value = c), o ? this._textarea.id = o : this._textarea.removeAttribute("id"), h ? this._textarea.name = h : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+        const b = this.firstChild.textContent;
+        b && !this._textarea.value && (this._textarea.value = b.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 = e, this._input.placeholder = r, this._input.disabled = n, 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")), l !== this._input.value && (this._input.value = l), c ? this._input.id = c : this._input.removeAttribute("id"), h ? this._input.name = h : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
-      const f = this.firstChild.textContent;
-      f && !this._input.value && (this._input.value = f.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 = e, this._input.placeholder = r, this._input.disabled = n, this._input.readOnly = a, this._input.required = l, 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")), c !== this._input.value && (this._input.value = c), o ? this._input.id = o : this._input.removeAttribute("id"), h ? this._input.name = h : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+      const b = this.firstChild.textContent;
+      b && !this._input.value && (this._input.value = b.trim()), this.removeChild(this.firstChild);
     }
-    let v = this.querySelector(".mint-input-label-container");
-    if (p || m) {
-      v || (v = document.createElement("div"), v.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(v, this._wrapper) : this.insertBefore(v, this.firstChild));
-      let f = v.querySelector(".mint-input-label");
-      if (p) {
-        f || (f = document.createElement("label"), f.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", v.insertBefore(f, v.firstChild)), f.textContent = p;
-        const k = c || ((_ = this._element) == null ? void 0 : _.id) || ((E = this._colorTextInput) == null ? void 0 : E.id) || ((L = this._input) == null ? void 0 : L.id) || ((y = this._textarea) == null ? void 0 : y.id);
-        if (k)
-          f.setAttribute("for", k);
+    let _ = this.querySelector(".mint-input-label-container");
+    if (f || p) {
+      _ || (_ = document.createElement("div"), _.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(_, this._wrapper) : this.insertBefore(_, this.firstChild));
+      let b = _.querySelector(".mint-input-label");
+      if (f) {
+        b || (b = document.createElement("label"), b.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", _.insertBefore(b, _.firstChild)), b.textContent = f;
+        const x = o || ((E = this._element) == null ? void 0 : E.id) || ((C = this._colorTextInput) == null ? void 0 : C.id) || ((v = this._input) == null ? void 0 : v.id) || ((y = this._textarea) == null ? void 0 : y.id);
+        if (x)
+          b.setAttribute("for", x);
         else {
-          const C = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
-          this._element ? this._element.id = C : this._colorTextInput ? this._colorTextInput.id = C : this._input ? this._input.id = C : this._textarea && (this._textarea.id = C), f.setAttribute("for", C);
+          const w = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
+          this._element ? this._element.id = w : this._colorTextInput ? this._colorTextInput.id = w : this._input ? this._input.id = w : this._textarea && (this._textarea.id = w), b.setAttribute("for", w);
         }
-        n ? f.classList.add("opacity-40") : f.classList.remove("opacity-40");
-      } else f && f.remove();
-      let b = v.querySelector(".mint-input-info");
-      m ? (b || (b = document.createElement("span"), b.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", v.appendChild(b)), b.textContent = m, n ? b.classList.add("opacity-40") : b.classList.remove("opacity-40")) : b && b.remove();
-    } else v && v.remove();
-    this._renderErrorState();
+        n ? b.classList.add("opacity-40") : b.classList.remove("opacity-40");
+      } else b && b.remove();
+      let g = _.querySelector(".mint-input-info");
+      p ? (g || (g = document.createElement("span"), g.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", _.appendChild(g)), g.textContent = p, n ? g.classList.add("opacity-40") : g.classList.remove("opacity-40")) : g && g.remove();
+    } else _ && _.remove();
+    this._renderErrorState(), this._renderSkeleton(m);
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -2394,6 +2528,26 @@ class ee extends HTMLElement {
     var e;
     this._isColor() && this._colorTextInput ? this._colorTextInput.blur() : (e = this._element) == null || e.blur();
   }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-input-skeleton-container");
+    const i = this._wrapper || this.querySelector(".relative.w-full");
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-input-skeleton-container absolute inset-0 z-10 pointer-events-none", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
+      let s = t.querySelector(".mint-input-skeleton");
+      if (!s) {
+        s = document.createElement("div"), s.className = "mint-input-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
+        const r = this._isTextarea(), n = this.getRows();
+        if (r) {
+          const a = n * 24 + 12;
+          s.style.height = `${a}px`;
+        } else
+          s.style.height = "2.2rem";
+        t.appendChild(s);
+      }
+      t.style.display = "block", this._element && (this._element.style.opacity = "0", this._element.style.pointerEvents = "none"), this._colorTextInput && (this._colorTextInput.style.opacity = "0", this._colorTextInput.style.pointerEvents = "none");
+    } else
+      t && (t.style.display = "none"), this._element && (this._element.style.opacity = "1", this._element.style.pointerEvents = "auto"), this._colorTextInput && (this._colorTextInput.style.opacity = "1", this._colorTextInput.style.pointerEvents = "auto");
+  }
 }
 customElements.get("mint-input") || customElements.define("mint-input", ee);
 class te extends HTMLElement {
@@ -2401,7 +2555,7 @@ class te extends HTMLElement {
     super(), this._input = null, this._textInput = null, this._popover = null, this._calendarContainer = null, this._iconButton = null, this._hiddenInput = null, this._startPartInputs = [], this._endPartInputs = [], this._displayEl = null, this._inputsWrapperEl = null, this._fieldsContainer = null, this._resetHandler = null, this._isInputMode = !1, this._currentMonth = (/* @__PURE__ */ new Date()).getMonth(), this._currentYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMode = "calendar", this._selectedStartDate = null, this._selectedEndDate = null, this._isRange = !1, this._popoverObserver = null, this._focusTrapHandler = null, this._escapeHandler = null;
   }
   static get observedAttributes() {
-    return ["value", "label", "info", "disabled", "id", "name", "required", "readonly", "format", "min", "max", "range", "shortcuts", "display-format", "error", "error-message"];
+    return ["value", "label", "info", "disabled", "id", "name", "required", "readonly", "format", "min", "max", "range", "shortcuts", "display-format", "error", "error-message", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._setupPopoverWithRetry(), this._attachFormResetListener();
@@ -2412,6 +2566,9 @@ class te extends HTMLElement {
       e && e.removeEventListener("reset", this._resetHandler), this._resetHandler = null;
     }
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
       if (e === "error" || e === "error-message") {
@@ -2419,6 +2576,10 @@ class te extends HTMLElement {
         this._applyErrorVisuals(s, r, this.isDisabled());
         return;
       }
+      if (e === "loading") {
+        this.render();
+        return;
+      }
       this.render(), this._input && this._setupPopoverWithRetry();
     }
   }
@@ -2555,17 +2716,17 @@ class te extends HTMLElement {
   _applyDateToParts(e, t, i, s) {
     if (!t.length) return;
     if (!e) {
-      t.forEach((o) => o.value = "");
+      t.forEach((l) => l.value = "");
       return;
     }
     const r = this._formatDate(e, s);
     let n = 0, a = 0;
-    i.forEach((o) => {
-      if (o.type === "sep")
-        n += o.value.length;
+    i.forEach((l) => {
+      if (l.type === "sep")
+        n += l.value.length;
       else {
-        const c = r.substr(n, o.len);
-        t[a] && (t[a].value = c), a++, n += o.len;
+        const o = r.substr(n, l.len);
+        t[a] && (t[a].value = o), a++, n += l.len;
       }
     });
   }
@@ -2598,17 +2759,17 @@ class te extends HTMLElement {
       }), s.addEventListener("keydown", (a) => {
         a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e, r), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(e, r), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(e, r), a.preventDefault());
       }), s.addEventListener("blur", (a) => {
-        var h, l;
+        var h, c;
         this._syncHiddenInput();
-        const o = a.relatedTarget;
-        o && (this.contains(o) || (h = this._popover) != null && h.contains(o) || this._calendarContainer && this._calendarContainer.contains(o)) || (this._handleBlur(((l = this._hiddenInput) == null ? void 0 : l.value) || ""), this._exitInputMode(), setTimeout(() => {
+        const l = a.relatedTarget;
+        l && (this.contains(l) || (h = this._popover) != null && h.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((c = this._hiddenInput) == null ? void 0 : c.value) || ""), this._exitInputMode(), setTimeout(() => {
           if (this._hiddenInput) {
-            const d = new FocusEvent("blur", {
+            const u = new FocusEvent("blur", {
               bubbles: !0,
               cancelable: !0,
               relatedTarget: a.relatedTarget
             });
-            this._hiddenInput.dispatchEvent(d);
+            this._hiddenInput.dispatchEvent(u);
           }
         }, 0));
       });
@@ -2623,8 +2784,8 @@ class te extends HTMLElement {
     if (this._isRange) {
       const [s, r] = this._splitRangeInput(e, t), n = s ? this._parseDateString(s, t) : null, a = r ? this._parseDateString(r, t) : null;
       if (n && a) {
-        const [o, c] = n <= a ? [n, a] : [a, n];
-        this._selectedStartDate = o, this._selectedEndDate = c, this._currentMonth = o.getMonth(), this._currentYear = o.getFullYear();
+        const [l, o] = n <= a ? [n, a] : [a, n];
+        this._selectedStartDate = l, this._selectedEndDate = o, this._currentMonth = l.getMonth(), this._currentYear = l.getFullYear();
       } else n && (this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear());
       this._applyDateToParts(this._selectedStartDate, this._startPartInputs, i, t), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, i, t);
     } else {
@@ -2636,55 +2797,55 @@ class te extends HTMLElement {
   _parseDateString(e, t) {
     const i = /[\/\-\.\s]+/;
     if (i.test(e)) {
-      const g = e.split(i).filter((_) => _.length > 0), v = t.split(/[\/\-\.\s]+/).filter((_) => _.length > 0);
-      if (g.length === v.length) {
-        let _ = 0, E = 0, L = 0;
-        for (let y = 0; y < v.length; y++) {
-          const f = v[y].toLowerCase(), b = g[y];
-          if (f.includes("d"))
+      const m = e.split(i).filter((_) => _.length > 0), k = t.split(/[\/\-\.\s]+/).filter((_) => _.length > 0);
+      if (m.length === k.length) {
+        let _ = 0, E = 0, C = 0;
+        for (let v = 0; v < k.length; v++) {
+          const y = k[v].toLowerCase(), b = m[v];
+          if (y.includes("d"))
             _ = parseInt(b, 10);
-          else if (f.includes("m"))
+          else if (y.includes("m"))
             E = parseInt(b, 10) - 1;
-          else if (f.includes("y")) {
-            let k = parseInt(b, 10);
-            const C = f.length, I = b.length;
-            I === 2 && C === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : I === 2 && C === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), L = k;
+          else if (y.includes("y")) {
+            let g = parseInt(b, 10);
+            const x = y.length, w = b.length;
+            w === 2 && x === 4 ? g = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + g : w === 2 && x === 2 && (g = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + g), C = g;
           }
         }
-        if (_ && E >= 0 && E <= 11 && L) {
-          const y = new Date(L, E, _);
-          if (!isNaN(y.getTime()) && y.getDate() === _ && y.getMonth() === E && y.getFullYear() === L)
-            return y;
+        if (_ && E >= 0 && E <= 11 && C) {
+          const v = new Date(C, E, _);
+          if (!isNaN(v.getTime()) && v.getDate() === _ && v.getMonth() === E && v.getFullYear() === C)
+            return v;
         }
       }
     }
     const r = e.replace(/[\/\-\.]/g, ""), n = t.replace(/[\/\-\.]/g, "").toLowerCase();
-    let a = n.indexOf("d"), o = n.indexOf("m"), c = n.indexOf("y");
+    let a = n.indexOf("d"), l = n.indexOf("m"), o = n.indexOf("y");
     const h = [
       { char: "d", index: a },
-      { char: "m", index: o },
-      { char: "y", index: c }
-    ].sort((g, v) => g.index - v.index);
-    let l = 0, d = 0, u = 0, p = 0;
+      { char: "m", index: l },
+      { char: "y", index: o }
+    ].sort((m, k) => m.index - k.index);
+    let c = 0, u = 0, d = 0, f = 0;
     n.length, r.length;
-    for (const g of h)
-      if (g.char === "d") {
-        const v = n.lastIndexOf("d") - n.indexOf("d") + 1, _ = r.substr(p, v);
+    for (const m of h)
+      if (m.char === "d") {
+        const k = n.lastIndexOf("d") - n.indexOf("d") + 1, _ = r.substr(f, k);
         if (_.length === 0) return null;
-        l = parseInt(_, 10), p += _.length;
-      } else if (g.char === "m") {
-        const v = n.lastIndexOf("m") - n.indexOf("m") + 1, _ = r.substr(p, v);
+        c = parseInt(_, 10), f += _.length;
+      } else if (m.char === "m") {
+        const k = n.lastIndexOf("m") - n.indexOf("m") + 1, _ = r.substr(f, k);
         if (_.length === 0) return null;
-        d = parseInt(_, 10) - 1, p += _.length;
-      } else if (g.char === "y") {
-        const v = n.lastIndexOf("y") - n.indexOf("y") + 1, _ = r.substr(p), E = Math.min(v, _.length), L = _.substr(0, E);
-        if (L.length === 0) return null;
-        let y = parseInt(L, 10);
-        E === 2 && v === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : E === 2 && v === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), u = y, p += E;
+        u = parseInt(_, 10) - 1, f += _.length;
+      } else if (m.char === "y") {
+        const k = n.lastIndexOf("y") - n.indexOf("y") + 1, _ = r.substr(f), E = Math.min(k, _.length), C = _.substr(0, E);
+        if (C.length === 0) return null;
+        let v = parseInt(C, 10);
+        E === 2 && k === 4 ? v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v : E === 2 && k === 2 && (v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v), d = v, f += E;
       }
-    if (!l || d < 0 || d > 11 || !u) return null;
-    const m = new Date(u, d, l);
-    return isNaN(m.getTime()) || m.getDate() !== l || m.getMonth() !== d || m.getFullYear() !== u ? null : m;
+    if (!c || u < 0 || u > 11 || !d) return null;
+    const p = new Date(d, u, c);
+    return isNaN(p.getTime()) || p.getDate() !== c || p.getMonth() !== u || p.getFullYear() !== d ? null : p;
   }
   _formatDate(e, t) {
     const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = t.toLowerCase();
@@ -2693,115 +2854,115 @@ class te extends HTMLElement {
   }
   // PHP-style formatter for display mode
   _formatDatePhp(e, t) {
-    const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = ["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"], c = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], h = (u, p = 2) => u.toString().padStart(p, "0"), l = (u) => {
-      const p = u % 10, m = u % 100;
-      return p === 1 && m !== 11 ? "st" : p === 2 && m !== 12 ? "nd" : p === 3 && m !== 13 ? "rd" : "th";
+    const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], l = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], o = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], h = (d, f = 2) => d.toString().padStart(f, "0"), c = (d) => {
+      const f = d % 10, p = d % 100;
+      return f === 1 && p !== 11 ? "st" : f === 2 && p !== 12 ? "nd" : f === 3 && p !== 13 ? "rd" : "th";
     };
-    let d = "";
-    for (let u = 0; u < t.length; u++) {
-      const p = t[u];
-      if (p === "\\" && u + 1 < t.length) {
-        d += t[u + 1], u++;
+    let u = "";
+    for (let d = 0; d < t.length; d++) {
+      const f = t[d];
+      if (f === "\\" && d + 1 < t.length) {
+        u += t[d + 1], d++;
         continue;
       }
-      switch (p) {
+      switch (f) {
         case "Y":
-          d += r.toString();
+          u += r.toString();
           break;
         case "y":
-          d += r.toString().slice(-2);
+          u += r.toString().slice(-2);
           break;
         case "m":
-          d += h(s);
+          u += h(s);
           break;
         case "n":
-          d += s.toString();
+          u += s.toString();
           break;
         case "M":
-          d += c[s - 1];
+          u += o[s - 1];
           break;
         case "F":
-          d += o[s - 1];
+          u += l[s - 1];
           break;
         case "d":
-          d += h(i);
+          u += h(i);
           break;
         case "j":
-          d += i.toString();
+          u += i.toString();
           break;
         case "D":
-          d += a[e.getDay()];
+          u += a[e.getDay()];
           break;
         case "l":
-          d += n[e.getDay()];
+          u += n[e.getDay()];
           break;
         case "S":
-          d += l(i);
+          u += c(i);
           break;
         default:
-          d += p;
+          u += f;
           break;
       }
     }
-    return d;
+    return u;
   }
   _validateDateString(e, t) {
     const i = this._parseDateString(e, t);
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const e = this.getLabel(), t = this.getInfo(), i = this.getValue(), s = this.isDisabled(), r = this.isReadonly(), n = this.isRequired(), a = this.getId(), o = this.getName(), c = this.getFormat(), h = this.hasError(), l = this.getErrorMessage();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), r = this.isDisabled(), n = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), h = this.getFormat(), c = this.hasError(), u = this.getErrorMessage();
     this._isRange = this.isRange(), this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
     let d = this.querySelector(".mint-date-picker-label-container");
-    if (e || t) {
-      d || (d = document.createElement("div"), d.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.insertBefore(d, this._input));
-      let _ = d.querySelector(".mint-date-picker-label");
-      e ? (_ || (_ = document.createElement("label"), _.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", d.insertBefore(_, d.firstChild)), _.textContent = e, a && this._textInput && _.setAttribute("for", a)) : _ && _.remove();
-      let E = d.querySelector(".mint-date-picker-info");
-      t ? (E || (E = document.createElement("span"), E.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", d.appendChild(E)), E.textContent = t) : E && E.remove();
+    if (t || i) {
+      d || (d = document.createElement("div"), d.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(d, this._input) : this.appendChild(d));
+      let E = d.querySelector(".mint-date-picker-label");
+      t ? (E || (E = document.createElement("label"), E.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", d.insertBefore(E, d.firstChild)), E.textContent = t, l && this._textInput && E.setAttribute("for", l)) : E && E.remove();
+      let C = d.querySelector(".mint-date-picker-info");
+      i ? (C || (C = document.createElement("span"), C.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", d.appendChild(C)), C.textContent = i) : C && C.remove();
     } else d && d.remove();
-    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = i || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), a && (this._hiddenInput.id = a), o && (this._hiddenInput.name = o), this._hiddenInput.value = i || "", this._hiddenInput.setAttribute("aria-invalid", h ? "true" : "false");
-    let u = this._input.querySelector(".mint-date-fields");
-    u || (u = document.createElement("div"), this._input.appendChild(u)), this._fieldsContainer = u, this._applyErrorVisuals(h, l, s), u.innerHTML = "", this._displayEl = document.createElement("div");
-    const p = r ? "select-text" : "select-none";
-    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${p} focus:outline-none`, this._displayEl.tabIndex = s || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
-      s || r || this._enterInputMode();
-    }), this._displayEl.addEventListener("keydown", (_) => {
-      s || r || (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._enterInputMode());
+    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), l && (this._hiddenInput.id = l), o && (this._hiddenInput.name = o), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", c ? "true" : "false");
+    let f = this._input.querySelector(".mint-date-fields");
+    f || (f = document.createElement("div"), this._input.appendChild(f)), this._fieldsContainer = f, this._applyErrorVisuals(c, u, r), f.innerHTML = "", this._displayEl = document.createElement("div");
+    const p = n ? "select-text" : "select-none";
+    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${n ? "cursor-default" : "cursor-text"} ${p} focus:outline-none`, this._displayEl.tabIndex = r || n ? -1 : 0, this._displayEl.addEventListener("click", () => {
+      r || n || this._enterInputMode();
+    }), this._displayEl.addEventListener("keydown", (E) => {
+      r || n || (E.key === "Enter" || E.key === " ") && (E.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const m = this._getFormatTokens(c);
+    const m = this._getFormatTokens(h);
     this._startPartInputs = [], this._endPartInputs = [];
-    const g = (_) => {
-      const E = document.createDocumentFragment();
-      return m.forEach((L) => {
-        if (L.type === "sep") {
+    const k = (E) => {
+      const C = document.createDocumentFragment();
+      return m.forEach((v) => {
+        if (v.type === "sep") {
           const y = document.createElement("span");
-          y.textContent = L.value, y.className = "text-gray-400 dark:text-gray-500 select-none", E.appendChild(y);
+          y.textContent = v.value, y.className = "text-gray-400 dark:text-gray-500 select-none", C.appendChild(y);
         } else {
-          const y = L.part === "d" ? "dd" : L.part === "m" ? "mm" : L.len === 2 ? "yy" : "yyyy", f = this._createPartInput(L.len, y, s, r, n);
-          _ === "start" ? this._startPartInputs.push(f) : this._endPartInputs.push(f), E.appendChild(f);
+          const y = v.part === "d" ? "dd" : v.part === "m" ? "mm" : v.len === 2 ? "yy" : "yyyy", b = this._createPartInput(v.len, y, r, n, a);
+          E === "start" ? this._startPartInputs.push(b) : this._endPartInputs.push(b), C.appendChild(b);
         }
-      }), E;
+      }), C;
     };
-    if (this._inputsWrapperEl.appendChild(g("start")), this._isRange) {
-      const _ = document.createElement("span");
-      _.textContent = " - ", _.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(_), this._inputsWrapperEl.appendChild(g("end"));
+    if (this._inputsWrapperEl.appendChild(k("start")), this._isRange) {
+      const E = document.createElement("span");
+      E.textContent = " - ", E.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(E), this._inputsWrapperEl.appendChild(k("end"));
     }
-    const v = document.createElement("div");
-    if (v.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", v.appendChild(this._displayEl), v.appendChild(this._inputsWrapperEl), u.appendChild(v), u.addEventListener("click", () => {
-      this._isInputMode || s || r || this._enterInputMode();
-    }), this._attachPartInputHandlers(this._startPartInputs, m, u), this._isRange && this._attachPartInputHandlers(this._endPartInputs, m, u), this._parseValue(i), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
-      this._iconButton.disabled = s || r, !s && !r ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
+    const _ = document.createElement("div");
+    if (_.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", _.appendChild(this._displayEl), _.appendChild(this._inputsWrapperEl), f.appendChild(_), f.addEventListener("click", () => {
+      this._isInputMode || r || n || this._enterInputMode();
+    }), this._attachPartInputHandlers(this._startPartInputs, m, f), this._isRange && this._attachPartInputHandlers(this._endPartInputs, m, f), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
+      this._iconButton.disabled = r || n, !r && !n ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
     else {
       this._iconButton = document.createElement("button"), this._iconButton.type = "button", this._iconButton.tabIndex = 0, this._iconButton.className = "absolute left-2 top-[.55rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 pointer-events-auto disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center rounded-sm";
-      const _ = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
-      this._iconButton.id = _;
-      const E = document.createElement("mint-icon");
-      E.setAttribute("name", "calendar"), E.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(E), this._iconButton.addEventListener("click", () => {
-        s || r || this._enterInputMode();
-      }), this._input.prepend(this._iconButton), this._iconButton.disabled = s || r;
+      const E = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
+      this._iconButton.id = E;
+      const C = document.createElement("mint-icon");
+      C.setAttribute("name", "calendar"), C.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(C), this._iconButton.addEventListener("click", () => {
+        r || n || this._enterInputMode();
+      }), this._input.prepend(this._iconButton), this._iconButton.disabled = r || n;
     }
-    this._renderErrorState(h, l);
+    this._renderErrorState(c, u), this._renderSkeleton(e);
   }
   _renderErrorState(e, t) {
     let i = this.querySelector(".mint-date-picker-error");
@@ -2849,8 +3010,8 @@ class te extends HTMLElement {
     if (this._isRange) {
       const [i, s] = this._splitRangeInput(e, t), r = i ? this._parseDateString(i, t) : null, n = s ? this._parseDateString(s, t) : null;
       if (r && n) {
-        const [a, o] = r <= n ? [r, n] : [n, r], c = this._formatDate(a, t), h = this._formatDate(o, t), l = `${c} - ${h}`;
-        this.setValue(l), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(o, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = o, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
+        const [a, l] = r <= n ? [r, n] : [n, r], o = this._formatDate(a, t), h = this._formatDate(l, t), c = `${o} - ${h}`;
+        this.setValue(c), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(l, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = l, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
       } else if (r) {
         const a = this._formatDate(r, t);
         this.setValue(a), this._applyDateToParts(r, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = r, this._selectedEndDate = null, this._currentMonth = r.getMonth(), this._currentYear = r.getFullYear();
@@ -2913,13 +3074,13 @@ class te extends HTMLElement {
                   requestAnimationFrame(() => {
                     this._buildCalendar();
                   }), this._hiddenInput && (this._syncHiddenInput(), setTimeout(() => {
-                    var o;
+                    var l;
                     const a = new FocusEvent("blur", {
                       bubbles: !0,
                       cancelable: !0,
                       relatedTarget: null
                     });
-                    (o = this._hiddenInput) == null || o.dispatchEvent(a);
+                    (l = this._hiddenInput) == null || l.dispatchEvent(a);
                   }, 0));
                 }
             });
@@ -2957,65 +3118,65 @@ class te extends HTMLElement {
     this._calendarContainer.className = n ? "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
     const a = document.createElement("div");
     a.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
+    const l = document.createElement("div");
+    l.className = "flex-1 min-w-0";
     const o = document.createElement("div");
-    o.className = "flex-1 min-w-0";
-    const c = document.createElement("div");
-    c.className = "flex items-center justify-between mb-4";
+    o.className = "flex items-center justify-between mb-4";
     const h = document.createElement("button");
     h.type = "button", h.tabIndex = 0, h.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", h.setAttribute("data-keep-popover-open", "true");
-    const l = document.createElement("mint-icon");
-    l.setAttribute("name", "caret-left"), l.className = "w-4 h-4", h.appendChild(l), h.addEventListener("click", () => {
+    const c = document.createElement("mint-icon");
+    c.setAttribute("name", "caret-left"), c.className = "w-4 h-4", h.appendChild(c), h.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
-    }), c.appendChild(h);
-    const d = document.createElement("div");
-    d.className = "flex items-center gap-2";
-    const u = document.createElement("button");
-    u.type = "button", u.tabIndex = 0, u.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", u.setAttribute("data-keep-popover-open", "true"), u.textContent = i[this._currentMonth], u.addEventListener("click", () => {
+    }), o.appendChild(h);
+    const u = document.createElement("div");
+    u.className = "flex items-center gap-2";
+    const d = document.createElement("button");
+    d.type = "button", d.tabIndex = 0, d.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", d.setAttribute("data-keep-popover-open", "true"), d.textContent = i[this._currentMonth], d.addEventListener("click", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), d.appendChild(u);
-    const p = document.createElement("button");
-    p.type = "button", p.tabIndex = 0, p.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", p.setAttribute("data-keep-popover-open", "true"), p.textContent = String(this._currentYear), p.addEventListener("click", () => {
+    }), u.appendChild(d);
+    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();
-    }), d.appendChild(p), c.appendChild(d);
-    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", () => {
+    }), u.appendChild(f), o.appendChild(u);
+    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 m = document.createElement("mint-icon");
+    m.setAttribute("name", "caret-right"), m.className = "w-4 h-4", p.appendChild(m), p.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), c.appendChild(m);
-    const v = document.createElement("div");
-    v.className = "grid grid-cols-7 mb-2", s.forEach((y) => {
-      const f = document.createElement("div");
-      f.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", f.textContent = y, v.appendChild(f);
+    }), o.appendChild(p);
+    const k = document.createElement("div");
+    k.className = "grid grid-cols-7 mb-2", s.forEach((v) => {
+      const y = document.createElement("div");
+      y.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", y.textContent = v, k.appendChild(y);
     });
     const _ = document.createElement("div");
     _.className = "grid grid-cols-7";
-    for (let y = 0; y < t; y++) {
-      const f = document.createElement("div");
-      f.className = "w-8 h-8", _.appendChild(f);
+    for (let v = 0; v < t; v++) {
+      const y = document.createElement("div");
+      y.className = "w-8 h-8", _.appendChild(y);
     }
-    const E = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, L = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
-    for (let y = 1; y <= e; y++) {
-      const f = new Date(this._currentYear, this._currentMonth, y), b = this._isToday(f), k = this._isDateSelected(f), C = this._isDateInRange(f), I = E && f < E || L && f > L;
-      let w = "rounded-md";
+    const E = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, C = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
+    for (let v = 1; v <= e; v++) {
+      const y = new Date(this._currentYear, this._currentMonth, v), b = this._isToday(y), g = this._isDateSelected(y), x = this._isDateInRange(y), w = E && y < E || C && y > C;
+      let T = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const S = this._isSameDate(f, this._selectedStartDate), N = this._isSameDate(f, this._selectedEndDate);
-        S && N ? w = "rounded-md" : S ? w = "rounded-l-md" : N ? w = "rounded-r-md" : C && (w = "rounded-none");
-      } else k && !this._isRange && (w = "rounded-md");
-      const A = document.createElement("button");
-      A.type = "button", A.disabled = !!I, A.tabIndex = I ? -1 : 0, A.className = `w-full h-8 ${w} border-0 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 ${k ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : b ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${I ? "opacity-40 cursor-not-allowed" : ""}`, A.textContent = y.toString(), I || A.addEventListener("click", () => {
-        this._handleDateClick(f);
-      }), _.appendChild(A);
+        const H = this._isSameDate(y, this._selectedStartDate), L = this._isSameDate(y, this._selectedEndDate);
+        H && L ? T = "rounded-md" : H ? T = "rounded-l-md" : L ? T = "rounded-r-md" : x && (T = "rounded-none");
+      } else g && !this._isRange && (T = "rounded-md");
+      const S = document.createElement("button");
+      S.type = "button", S.disabled = !!w, S.tabIndex = w ? -1 : 0, S.className = `w-full h-8 ${T} border-0 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 ${g ? "bg-slate-800 dark:bg-slate-600 text-white" : x ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : b ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${w ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = v.toString(), w || S.addEventListener("click", () => {
+        this._handleDateClick(y);
+      }), _.appendChild(S);
     }
     if (n) {
+      const v = document.createElement("div");
+      v.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
       const y = document.createElement("div");
-      y.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
-      const f = document.createElement("div");
-      f.className = "relative md:relative md:flex-1 md:min-h-0";
+      y.className = "relative md:relative md:flex-1 md:min-h-0";
       const b = document.createElement("div");
       b.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", b.style.scrollbarWidth = "none", b.style.msOverflowStyle = "none", b.style.setProperty("-webkit-overflow-scrolling", "touch");
-      const k = document.createElement("style");
-      k.textContent = `
+      const g = document.createElement("style");
+      g.textContent = `
         .mint-date-shortcuts-row::-webkit-scrollbar {
           display: none;
         }
@@ -3039,37 +3200,37 @@ class te extends HTMLElement {
             background: rgba(255, 255, 255, 0.2);
           }
         }
-      `, b.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (k.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(k));
-      const C = document.createElement("div");
-      C.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", f.appendChild(C);
-      const I = document.createElement("div");
-      I.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", f.appendChild(I);
+      `, b.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (g.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(g));
+      const x = document.createElement("div");
+      x.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", y.appendChild(x);
       const w = document.createElement("div");
-      w.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", f.appendChild(w);
-      const A = document.createElement("div");
-      A.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", f.appendChild(A);
-      const S = () => {
+      w.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", y.appendChild(w);
+      const T = document.createElement("div");
+      T.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", y.appendChild(T);
+      const S = document.createElement("div");
+      S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", y.appendChild(S);
+      const H = () => {
         if (window.innerWidth >= 768) {
-          const H = b.scrollTop, T = b.scrollHeight, D = b.clientHeight;
-          H > 0 ? w.style.opacity = "1" : w.style.opacity = "0", H + D < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", C.style.opacity = "0", I.style.opacity = "0";
+          const D = b.scrollTop, I = b.scrollHeight, N = b.clientHeight;
+          D > 0 ? T.style.opacity = "1" : T.style.opacity = "0", D + N < I - 1 ? S.style.opacity = "1" : S.style.opacity = "0", x.style.opacity = "0", w.style.opacity = "0";
         } else {
-          const H = b.scrollLeft, T = b.scrollWidth, D = b.clientWidth;
-          H > 0 ? C.style.opacity = "1" : C.style.opacity = "0", H + D < T - 1 ? I.style.opacity = "1" : I.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
+          const D = b.scrollLeft, I = b.scrollWidth, N = b.clientWidth;
+          D > 0 ? x.style.opacity = "1" : x.style.opacity = "0", D + N < I - 1 ? w.style.opacity = "1" : w.style.opacity = "0", T.style.opacity = "0", S.style.opacity = "0";
         }
       };
-      b.addEventListener("scroll", S), window.addEventListener("resize", S), setTimeout(S, 0), r.forEach((N) => {
-        const H = document.createElement("button");
-        H.type = "button", H.tabIndex = 0, H.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", H.textContent = N.label, H.setAttribute("data-keep-popover-open", "true"), H.addEventListener("click", () => {
-          const T = N.action();
-          if (T) {
-            if (this._isRange && "start" in T && "end" in T) {
-              this._selectedStartDate = T.start, this._selectedEndDate = T.end;
-              const D = this.getFormat(), M = this._formatDate(T.start, D), F = this._formatDate(T.end, D), P = `${M} - ${F}`;
-              this.setValue(P), this._currentMonth = T.start.getMonth(), this._currentYear = T.start.getFullYear();
-            } else if (T instanceof Date) {
-              this._selectedStartDate = T, this._selectedEndDate = null;
-              const D = this.getFormat(), M = this._formatDate(T, D);
-              this.setValue(M), this._currentMonth = T.getMonth(), this._currentYear = T.getFullYear();
+      b.addEventListener("scroll", H), window.addEventListener("resize", H), setTimeout(H, 0), r.forEach((L) => {
+        const D = document.createElement("button");
+        D.type = "button", D.tabIndex = 0, D.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", D.textContent = L.label, D.setAttribute("data-keep-popover-open", "true"), D.addEventListener("click", () => {
+          const I = L.action();
+          if (I) {
+            if (this._isRange && "start" in I && "end" in I) {
+              this._selectedStartDate = I.start, this._selectedEndDate = I.end;
+              const N = this.getFormat(), M = this._formatDate(I.start, N), F = this._formatDate(I.end, N), P = `${M} - ${F}`;
+              this.setValue(P), this._currentMonth = I.start.getMonth(), this._currentYear = I.start.getFullYear();
+            } else if (I instanceof Date) {
+              this._selectedStartDate = I, this._selectedEndDate = null;
+              const N = this.getFormat(), M = this._formatDate(I, N);
+              this.setValue(M), this._currentMonth = I.getMonth(), this._currentYear = I.getFullYear();
             }
             this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
               detail: { value: this.getValue() },
@@ -3081,10 +3242,10 @@ class te extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), b.appendChild(H);
-      }), f.appendChild(b), y.appendChild(f), a.appendChild(y);
+        }), b.appendChild(D);
+      }), y.appendChild(b), v.appendChild(y), a.appendChild(v);
     }
-    o.appendChild(c), o.appendChild(v), o.appendChild(_), a.appendChild(o), this._calendarContainer.appendChild(a);
+    l.appendChild(o), l.appendChild(k), l.appendChild(_), a.appendChild(l), this._calendarContainer.appendChild(a);
   }
   _buildMonthView() {
     if (!this._calendarContainer) return;
@@ -3106,15 +3267,15 @@ class te extends HTMLElement {
     a.setAttribute("name", "caret-right"), a.className = "w-4 h-4", n.appendChild(a), n.addEventListener("click", () => {
       this._currentYear++, this._buildCalendar();
     }), t.appendChild(n);
-    const o = document.createElement("div");
-    o.className = "grid grid-cols-3 gap-2", e.forEach((c, h) => {
-      const l = document.createElement("button");
-      l.type = "button", l.tabIndex = 0, l.setAttribute("data-keep-popover-open", "true");
-      const d = this._currentMonth === h;
-      l.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 ${d ? "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"}`, l.textContent = c, l.addEventListener("click", () => {
+    const l = document.createElement("div");
+    l.className = "grid grid-cols-3 gap-2", e.forEach((o, h) => {
+      const c = document.createElement("button");
+      c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
+      const u = this._currentMonth === h;
+      c.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 ${u ? "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"}`, c.textContent = o, c.addEventListener("click", () => {
         this._currentMonth = h, this._viewMode = "calendar", this._buildCalendar();
-      }), o.appendChild(l);
-    }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(o);
+      }), l.appendChild(c);
+    }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(l);
   }
   _buildYearView() {
     if (!this._calendarContainer) return;
@@ -3130,21 +3291,21 @@ class te extends HTMLElement {
     n.className = "text-sm font-medium text-gray-900 dark:text-gray-100", n.textContent = `${e} - ${t}`, i.appendChild(n);
     const a = document.createElement("button");
     a.type = "button", a.tabIndex = 0, a.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 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", a.setAttribute("data-keep-popover-open", "true");
-    const o = document.createElement("mint-icon");
-    o.setAttribute("name", "caret-right"), o.className = "w-4 h-4", a.appendChild(o), a.addEventListener("click", () => {
+    const l = document.createElement("mint-icon");
+    l.setAttribute("name", "caret-right"), l.className = "w-4 h-4", a.appendChild(l), a.addEventListener("click", () => {
       this._currentYear += 12, this._buildCalendar();
     }), i.appendChild(a);
-    const c = document.createElement("div");
-    c.className = "grid grid-cols-3 gap-2";
+    const o = document.createElement("div");
+    o.className = "grid grid-cols-3 gap-2";
     for (let h = e; h <= t; h++) {
-      const l = document.createElement("button");
-      l.type = "button", l.tabIndex = 0, l.setAttribute("data-keep-popover-open", "true");
-      const d = this._currentYear === h;
-      l.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 ${d ? "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"}`, l.textContent = String(h), l.addEventListener("click", () => {
+      const c = document.createElement("button");
+      c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
+      const u = this._currentYear === h;
+      c.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 ${u ? "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"}`, c.textContent = String(h), c.addEventListener("click", () => {
         this._currentYear = h, this._viewMode = "calendar", this._buildCalendar();
-      }), c.appendChild(l);
+      }), o.appendChild(c);
     }
-    this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(c);
+    this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(o);
   }
   _getDaysInMonth(e, t) {
     return new Date(t, e + 1, 0).getDate();
@@ -3215,6 +3376,16 @@ class te extends HTMLElement {
   _exitInputMode() {
     this._isInputMode && (this._isInputMode = !1, this._displayEl && this._inputsWrapperEl && (this._displayEl.style.display = "flex", this._inputsWrapperEl.style.display = "none"), this._updateDisplayText());
   }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-date-picker-skeleton-container");
+    const i = this._fieldsContainer, s = this._input;
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-date-picker-skeleton-container absolute inset-0 z-10 pointer-events-none", s ? (s.classList.contains("relative") || s.classList.add("relative"), s.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
+      let r = t.querySelector(".mint-date-picker-skeleton");
+      r || (r = document.createElement("div"), r.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", r.style.height = "2.25rem", t.appendChild(r)), t.style.display = "block", i && (i.style.visibility = "hidden", i.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
+    } else
+      t && (t.style.display = "none"), i && (i.style.visibility = "visible", i.style.pointerEvents = "auto"), this._displayEl && (this._displayEl.style.visibility = "visible", this._displayEl.style.pointerEvents = "auto");
+  }
   _getFocusableElements() {
     if (!this._calendarContainer) return [];
     const e = [
@@ -3235,7 +3406,7 @@ class te extends HTMLElement {
     this._removeFocusTrap();
     const e = this;
     this._focusTrapHandler = function(t) {
-      var o;
+      var l;
       if (t.key !== "Tab") return;
       if (!e._popover || !e._popover.hasAttribute("open")) {
         e._removeFocusTrap();
@@ -3244,7 +3415,7 @@ class te extends HTMLElement {
       const i = e._getFocusableElements();
       if (i.length === 0) return;
       const s = i[0], r = i[i.length - 1], n = document.activeElement;
-      if (!(((o = e._calendarContainer) == null ? void 0 : o.contains(n)) || !1)) {
+      if (!(((l = e._calendarContainer) == null ? void 0 : l.contains(n)) || !1)) {
         t.preventDefault(), s.focus();
         return;
       }
@@ -3273,7 +3444,7 @@ class ie extends HTMLElement {
     super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null;
   }
   static get observedAttributes() {
-    return ["name", "value", "disabled", "id", "required", "label", "info", "error", "error-message", "multiple"];
+    return ["name", "value", "disabled", "id", "required", "label", "info", "error", "error-message", "multiple", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block", "w-full"), this.getLabel() || console.error('mint-select: The "label" attribute is required. Please provide a label for the select.'), this.render();
@@ -3281,14 +3452,21 @@ class ie extends HTMLElement {
   disconnectedCallback() {
     this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null);
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
       if (e === "error" || e === "error-message") {
         this._renderErrorState(), this._select && (this._select.className = this.getSelectClasses(), this._select.setAttribute("aria-invalid", this.hasError() ? "true" : "false"));
         return;
       }
-      if (e === "value" && this._select) {
-        this._select.value = i || "";
+      if (e === "loading") {
+        this.render();
+        return;
+      }
+      if (e === "value") {
+        this._select && (this._select.value = i || "");
         return;
       }
       this.render();
@@ -3298,10 +3476,11 @@ class ie extends HTMLElement {
     return this.getAttribute("name") || "";
   }
   getValue() {
-    return this.getAttribute("value") || (this._select ? this._select.value : "");
+    return this.hasAttribute("value") ? this.getAttribute("value") || "" : this._select ? this._select.value : "";
   }
   setValue(e) {
-    this._select && (this._select.value = e, this.setAttribute("value", e));
+    const t = e || "";
+    this.setAttribute("value", t), this._select && (this._select.value = t);
   }
   isDisabled() {
     return this.hasAttribute("disabled");
@@ -3362,30 +3541,30 @@ class ie extends HTMLElement {
     return [...i, ...s, ...r].filter(Boolean).join(" ");
   }
   render() {
-    const e = [];
+    const e = this.isLoading(), t = [];
     this._select && Array.from(this._select.children).forEach((d) => {
-      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && e.push(d.cloneNode(!0));
+      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && t.push(d.cloneNode(!0));
     });
-    const t = Array.from(this.children).filter((d) => d.tagName === "OPTION" || d.tagName === "OPTGROUP").map((d) => d.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 i = this.getLabel(), s = this.getInfo(), r = this.getId(), n = this.getName(), a = this.getValue(), o = this.isDisabled(), c = this.isMultiple(), h = this.hasError();
-    if (i) {
+    const s = this.getLabel(), r = this.getInfo(), n = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), h = this.isMultiple(), c = this.hasError();
+    if (s) {
       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(i);
-      d.appendChild(u), this.appendChild(d);
+      d.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", n && d.setAttribute("for", n);
+      const f = document.createTextNode(s);
+      d.appendChild(f), 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), n && (this._select.name = n), o && (this._select.disabled = !0), c && (this._select.multiple = !0), a && (this._select.value = a), this._select.setAttribute("aria-invalid", h ? "true" : "false");
-    const l = e.length > 0 ? e : t;
-    if (l.length > 0 && l.forEach((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(), n && (this._select.id = n), a && (this._select.name = a), o && (this._select.disabled = !0), h && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", c ? "true" : "false");
+    const u = t.length > 0 ? t : i;
+    if (u.length > 0 && u.forEach((d) => {
       this._select.appendChild(d);
     }), this._select.options.length === 0) {
       const d = document.createElement("option");
       d.value = "", d.textContent = "Select an option", d.disabled = !0, d.selected = !0, this._select.appendChild(d);
     }
-    if (this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
+    if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
       const p = d.target.value;
       p ? this.setAttribute("value", p) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
         detail: { value: p },
@@ -3393,17 +3572,32 @@ class ie extends HTMLElement {
         cancelable: !0,
         composed: !0
       }));
-    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), c)
+    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), h)
       this._caretUpIcon = null, this._caretDownIcon = null;
     else {
       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 (s) {
+    if (r) {
       const d = document.createElement("div");
-      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = s, this.appendChild(d);
+      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = r, this.appendChild(d);
     }
-    this._renderErrorState();
+    this._renderErrorState(), this._renderSkeleton(e);
+  }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-select-skeleton-container");
+    const i = this._wrapper;
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-select-skeleton-container absolute inset-0 z-10 pointer-events-none", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
+      let s = t.querySelector(".mint-select-skeleton");
+      if (!s) {
+        s = document.createElement("div"), s.className = "mint-select-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
+        const r = this.isMultiple();
+        s.style.height = r ? "6rem" : "2.25rem", t.appendChild(s);
+      }
+      t.style.display = "block", this._select && (this._select.style.opacity = "0", this._select.style.pointerEvents = "none");
+    } else
+      t && (t.style.display = "none"), this._select && (this._select.style.opacity = "1", this._select.style.pointerEvents = "auto");
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -3417,7 +3611,7 @@ class se extends HTMLElement {
     super(), this._dropzone = null, this._fileInput = null, this._previewContainer = null, this._isDragging = !1, this._wasDragging = !1, this._isUpdatingFiles = !1, this._listenersInitialized = !1, this._selectedFiles = [], this._previewUrls = [], this._resetHandler = null;
   }
   static get observedAttributes() {
-    return ["label", "accept", "multiple", "width", "height", "disabled", "name", "error", "error-message"];
+    return ["label", "accept", "multiple", "width", "height", "disabled", "name", "error", "error-message", "loading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._attachFormResetListener();
@@ -3434,6 +3628,10 @@ class se extends HTMLElement {
         this._updateDragStateClass(), this._renderErrorState(this.hasError(), this.getErrorMessage());
         return;
       }
+      if (e === "loading") {
+        this.render();
+        return;
+      }
       this.render();
     }
   }
@@ -3452,6 +3650,45 @@ class se extends HTMLElement {
   getHeight() {
     return this.getAttribute("height") || "200px";
   }
+  _renderSkeleton(e) {
+    let t = this.querySelector(".mint-dropzone-skeleton-container");
+    const i = this._dropzone;
+    if (e) {
+      t || (t = document.createElement("div"), t.className = "mint-dropzone-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center justify-center", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
+      let s = t.querySelector(".mint-dropzone-skeleton");
+      if (s || (s = document.createElement("div"), s.className = "mint-dropzone-skeleton rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 animate-pulse", s.style.width = "100%", s.style.height = "100%", t.appendChild(s)), t.style.display = "flex", i) {
+        const r = i.querySelector(".mint-dropzone-icon"), n = i.querySelector(".mint-dropzone-label"), a = i.querySelector(".mint-dropzone-previews-wrapper"), l = this._fileInput;
+        if (r) {
+          const o = r;
+          o.style.visibility = "hidden", o.style.pointerEvents = "none";
+        }
+        if (n) {
+          const o = n;
+          o.style.visibility = "hidden", o.style.pointerEvents = "none";
+        }
+        if (a) {
+          const o = a;
+          o.style.visibility = "hidden", o.style.pointerEvents = "none";
+        }
+        l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), i.style.pointerEvents = "none";
+      }
+    } else if (t && (t.style.display = "none"), i) {
+      const s = i.querySelector(".mint-dropzone-icon"), r = i.querySelector(".mint-dropzone-label"), n = i.querySelector(".mint-dropzone-previews-wrapper"), a = this._fileInput;
+      if (s) {
+        const l = s;
+        l.style.visibility = "visible", l.style.pointerEvents = "auto";
+      }
+      if (r) {
+        const l = r;
+        l.style.visibility = "visible", l.style.pointerEvents = "auto";
+      }
+      if (n) {
+        const l = n;
+        l.style.visibility = "visible", l.style.pointerEvents = "auto";
+      }
+      a && (a.style.visibility = "visible", a.style.pointerEvents = "auto"), i.style.pointerEvents = "auto";
+    }
+  }
   getName() {
     return this.getAttribute("name") || "";
   }
@@ -3464,19 +3701,22 @@ class se extends HTMLElement {
   isDisabled() {
     return this.hasAttribute("disabled");
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   render() {
-    const e = this.getLabel(), t = this.getAccept(), i = this.isMultiple(), s = this.isDisabled(), r = this.getWidth(), n = this.getHeight(), a = this.getName(), o = this.hasError(), c = this.getErrorMessage();
-    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), s ? (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 = n, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = n, 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 = t, this._fileInput.multiple = i, this._fileInput.disabled = s, a ? this._fileInput.name = a : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
-    const h = this._dropzone.querySelector(".mint-dropzone-icon"), l = this._dropzone.querySelector(".mint-dropzone-label");
-    h && h.remove(), l && l.remove();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), r = this.isDisabled(), n = this.getWidth(), a = this.getHeight(), l = this.getName(), o = this.hasError(), h = this.getErrorMessage();
+    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), r ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", t || "File upload dropzone")), this._dropzone.style.width = n, this._dropzone.style.height = a, this._dropzone.style.minWidth = n, 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 = r, l ? this._fileInput.name = l : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
+    const c = this._dropzone.querySelector(".mint-dropzone-icon"), u = this._dropzone.querySelector(".mint-dropzone-label");
+    c && c.remove(), u && u.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", d.appendChild(u), this._dropzone.appendChild(d), e) {
+    const f = document.createElement("mint-icon");
+    if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(f), this._dropzone.appendChild(d), t) {
       const p = document.createElement("div");
-      p.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", p.textContent = e, this._dropzone.appendChild(p);
+      p.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", p.textContent = t, this._dropzone.appendChild(p);
     }
-    this.setupEventListeners(), this._renderErrorState(o, c), this._renderPreviews();
+    this.setupEventListeners(), this._renderErrorState(o, h), this._renderPreviews(), this._renderSkeleton(e);
   }
   _updateDragState() {
     this._dropzone && this._updateDragStateClass();
@@ -3487,8 +3727,8 @@ class se extends HTMLElement {
   }
   _updateDragStateClass() {
     if (!this._dropzone) return;
-    const e = this.isDisabled(), t = this.hasError(), r = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, n = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", o = e ? "opacity-40 cursor-not-allowed" : "", c = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
-    this._dropzone.className = `${r} ${t ? a : n} ${o} ${c}`.trim();
+    const e = this.isDisabled(), t = this.hasError(), r = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, n = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", l = e ? "opacity-40 cursor-not-allowed" : "", o = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
+    this._dropzone.className = `${r} ${t ? a : n} ${l} ${o}`.trim();
   }
   setupEventListeners() {
     this._listenersInitialized || (this._listenersInitialized = !0, this.removeEventListeners(), !(!this._dropzone || !this._fileInput || this.isDisabled()) && (this._onDropzoneClick || (this._onDropzoneClick = (e) => {
@@ -3529,17 +3769,17 @@ class se extends HTMLElement {
       const i = e.target.files;
       if (i && i.length > 0) {
         const s = this.getAccept(), r = this.isMultiple(), n = [], a = [];
-        for (let o = 0; o < i.length; o++) {
-          const c = i[o];
-          this._isFileAccepted(c, s) ? n.push(c) : a.push(c);
+        for (let l = 0; l < i.length; l++) {
+          const o = i[l];
+          this._isFileAccepted(o, s) ? n.push(o) : a.push(o);
         }
         if (!r && n.length > 1 && (a.push(...n.slice(1)), n.splice(1)), a.length > 0) {
-          const o = new CustomEvent("dropRejected", {
+          const l = new CustomEvent("dropRejected", {
             detail: { files: a, reason: "File type not accepted or multiple files not allowed" },
             bubbles: !0,
             cancelable: !0
           });
-          this.dispatchEvent(o);
+          this.dispatchEvent(l);
         }
         n.length > 0 && this._applyValidFiles(n);
       }
@@ -3629,25 +3869,25 @@ class se extends HTMLElement {
     const e = document.createElement("div");
     e.className = "mint-dropzone-previews-wrapper mt-3 w-full relative max-h-48";
     const t = document.createElement("div");
-    t.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((c, h) => {
-      const l = document.createElement("div");
-      if (l.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", c.type.startsWith("image/")) {
-        const m = document.createElement("img");
-        m.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
-        const g = URL.createObjectURL(c);
-        this._previewUrls.push(g), m.src = g, l.appendChild(m);
+    t.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((o, h) => {
+      const c = document.createElement("div");
+      if (c.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", o.type.startsWith("image/")) {
+        const p = document.createElement("img");
+        p.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+        const m = URL.createObjectURL(o);
+        this._previewUrls.push(m), p.src = m, c.appendChild(p);
       } else {
-        const m = document.createElement("mint-icon");
-        m.setAttribute("name", "attach"), m.className = "w-5 h-5 text-gray-500 dark:text-gray-300", l.appendChild(m);
+        const p = document.createElement("mint-icon");
+        p.setAttribute("name", "attach"), p.className = "w-5 h-5 text-gray-500 dark:text-gray-300", c.appendChild(p);
       }
-      const d = document.createElement("div");
-      d.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", d.textContent = c.name, l.appendChild(d);
-      const u = document.createElement("button");
-      u.type = "button", u.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 p = document.createElement("mint-icon");
-      p.setAttribute("name", "close"), p.className = "w-4 h-4", u.appendChild(p), u.addEventListener("click", (m) => {
-        m.preventDefault(), m.stopPropagation(), this._removeFileAt(h);
-      }), l.appendChild(u), t.appendChild(l);
+      const u = document.createElement("div");
+      u.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", u.textContent = o.name, c.appendChild(u);
+      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 f = document.createElement("mint-icon");
+      f.setAttribute("name", "close"), f.className = "w-4 h-4", d.appendChild(f), d.addEventListener("click", (p) => {
+        p.preventDefault(), p.stopPropagation(), this._removeFileAt(h);
+      }), c.appendChild(d), t.appendChild(c);
     });
     const i = this.hasError(), s = this._isDragging;
     let r = "from-white dark:from-gray-700";
@@ -3656,11 +3896,11 @@ class se extends HTMLElement {
     n.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${r} to-transparent opacity-0 transition-opacity duration-200`, e.appendChild(n);
     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 ${r} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(a);
-    const o = () => {
-      const c = t.scrollTop, h = t.scrollHeight, l = t.clientHeight;
-      c > 0 ? n.style.opacity = "1" : n.style.opacity = "0", c + l < h - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
+    const l = () => {
+      const o = t.scrollTop, h = t.scrollHeight, c = t.clientHeight;
+      o > 0 ? n.style.opacity = "1" : n.style.opacity = "0", o + c < h - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
     };
-    o(), t.addEventListener("scroll", o), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
+    l(), t.addEventListener("scroll", l), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
   }
   _removeFileAt(e) {
     if (e < 0 || e >= this._selectedFiles.length) return;
@@ -3696,7 +3936,7 @@ class re extends HTMLElement {
     super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null;
   }
   static get observedAttributes() {
-    return ["action", "method", "enctype", "data-form-data"];
+    return ["action", "method", "enctype", "data-form-data", "loading"];
   }
   connectedCallback() {
     this._render(), this._setupBlurValidation(), requestAnimationFrame(() => {
@@ -3707,6 +3947,7 @@ class re extends HTMLElement {
           const e = this.getAttribute("data-form-data");
           e && (this._parseFormData(e), this._applyFormData());
         }
+        this._propagateLoadingState();
       });
     });
   }
@@ -3714,9 +3955,17 @@ class re extends HTMLElement {
     this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._cleanupBlurValidation();
   }
   /**
-   * Public reset helper to clear errors and reset child fields.
+   * Public reset helper to restore all fields to their original values from the data property.
+   * This clears errors and re-applies the form data.
    */
   reset() {
+    this._clearErrors(), this._formData ? this._applyFormData() : this.clear();
+  }
+  /**
+   * Public clear helper to completely clear all form values and errors.
+   * This resets all fields to empty/default values.
+   */
+  clear() {
     this._clearErrors(), this._form && this._form.reset(), this._resetCustomFields();
   }
   attributeChangedCallback(e, t, i) {
@@ -3724,7 +3973,9 @@ class re extends HTMLElement {
       requestAnimationFrame(() => {
         this._applyFormData();
       });
-    })) : this._applyFormAttributes();
+    })) : e === "loading" ? this.isConnected && this._form ? requestAnimationFrame(() => {
+      this._propagateLoadingState();
+    }) : this._propagateLoadingState() : this._applyFormAttributes();
   }
   // Property getter/setter for reactive data binding (Vue :data)
   get data() {
@@ -3743,10 +3994,7 @@ class re extends HTMLElement {
     if (this.classList.add("block", "w-full"), !this._form) {
       for (this._form = document.createElement("form"), this._form.noValidate = !0; this.firstChild; )
         this._form.appendChild(this.firstChild);
-      this.appendChild(this._form), this._submitHandler = (e) => this._handleSubmit(e), this._form.addEventListener("submit", function(e) {
-        var t;
-        (t = this.closest("mint-form")) == null || t._handleSubmit(e);
-      });
+      this.appendChild(this._form), this._submitHandler = (e) => this._handleSubmit(e), this._form.addEventListener("submit", this._submitHandler, !0);
     }
     this._applyFormAttributes();
   }
@@ -3756,7 +4004,7 @@ class re extends HTMLElement {
     e && (this._form.action = e), this._form.method = t, this._form.enctype = i;
   }
   async _handleSubmit(e) {
-    if (e.preventDefault(), !this._form) return;
+    if (e.preventDefault(), e.stopPropagation(), !this._form) return;
     this._clearErrors(), this._syncDropzoneFiles();
     const t = this._collectValidationRules(), i = new FormData(this._form), s = this._formDataToValues(i);
     if (!this._validate(s, t)) {
@@ -3774,17 +4022,20 @@ class re extends HTMLElement {
       cancelable: !0,
       composed: !0
     });
-    if (this.dispatchEvent(n), !n.defaultPrevented)
+    if (this.dispatchEvent(n), n.defaultPrevented)
+      return;
+    const a = this.getAttribute("action"), l = this.getAttribute("method");
+    if (!(!a || !l))
       try {
-        const a = await this._submitData(i, s);
+        const o = await this._submitData(i, s);
         this.dispatchEvent(new CustomEvent("submitsuccess", {
-          detail: a,
+          detail: o,
           bubbles: !0,
           cancelable: !0
         }));
-      } catch (a) {
+      } catch (o) {
         this.dispatchEvent(new CustomEvent("submiterror", {
-          detail: { error: a },
+          detail: { error: o },
           bubbles: !0,
           cancelable: !0
         }));
@@ -3796,82 +4047,92 @@ class re extends HTMLElement {
       return { status: 0, ok: !0, data: { values: t } };
     const n = Array.from(e.values()).some((h) => h instanceof File);
     let a = null;
-    const o = {};
-    let c = i;
+    const l = {};
+    let o = i;
     if (s === "GET") {
       const h = new URLSearchParams();
-      e.forEach((l, d) => {
-        l instanceof File || h.append(d, String(l));
-      }), c += (i.includes("?") ? "&" : "?") + h.toString();
+      e.forEach((c, u) => {
+        c instanceof File || h.append(u, String(c));
+      }), o += (i.includes("?") ? "&" : "?") + h.toString();
     } else if (r === "multipart/form-data" || n)
       a = e;
     else if (r === "application/json")
-      a = JSON.stringify(t), o["Content-Type"] = "application/json";
+      a = JSON.stringify(t), l["Content-Type"] = "application/json";
     else {
       const h = new URLSearchParams();
-      e.forEach((l, d) => {
-        l instanceof File || h.append(d, String(l));
-      }), a = h, o["Content-Type"] = "application/x-www-form-urlencoded";
+      e.forEach((c, u) => {
+        c instanceof File || h.append(u, String(c));
+      }), a = h, l["Content-Type"] = "application/x-www-form-urlencoded";
     }
     if (typeof fetch == "function") {
-      const h = await fetch(c, {
+      const h = await fetch(o, {
         method: s,
         body: s === "GET" ? null : a,
-        headers: o
-      }), l = await h.text().catch(() => "");
-      let d = l;
+        headers: l
+      }), c = await h.text().catch(() => "");
+      let u = c;
       try {
-        d = JSON.parse(l);
+        u = JSON.parse(c);
       } catch {
       }
       if (!h.ok)
-        throw { status: h.status, data: d };
-      return { status: h.status, ok: h.ok, data: d };
+        throw { status: h.status, data: u };
+      return { status: h.status, ok: h.ok, data: u };
     }
-    return await new Promise((h, l) => {
-      const d = new XMLHttpRequest();
-      d.open(s, c, !0), Object.entries(o).forEach(([u, p]) => d.setRequestHeader(u, p)), d.onload = function() {
-        const { status: u, responseText: p } = d;
-        if (u >= 200 && u < 300) {
-          let m = p;
+    return await new Promise((h, c) => {
+      const u = new XMLHttpRequest();
+      u.open(s, o, !0), Object.entries(l).forEach(([d, f]) => u.setRequestHeader(d, f)), u.onload = function() {
+        const { status: d, responseText: f } = u;
+        if (d >= 200 && d < 300) {
+          let p = f;
           try {
-            m = JSON.parse(p);
+            p = JSON.parse(f);
           } catch {
           }
-          h({ status: u, ok: !0, data: m });
+          h({ status: d, ok: !0, data: p });
         } else
-          l({ status: u, data: p });
-      }, d.onerror = function() {
-        l({ status: d.status, data: d.responseText });
-      }, d.send(s === "GET" ? null : a);
+          c({ status: d, data: f });
+      }, u.onerror = function() {
+        c({ status: u.status, data: u.responseText });
+      }, u.send(s === "GET" ? null : a);
     });
   }
   _formDataToValues(e) {
     const t = {};
     return e.forEach((i, s) => {
       i instanceof File ? (t[s] || (t[s] = []), t[s].push(i)) : s in t ? Array.isArray(t[s]) ? (t[s].length > 0 && t[s][0] instanceof File, t[s].push(i)) : t[s] = [t[s], i] : t[s] = i;
-    }), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((r) => {
-      const n = r.getAttribute("name");
-      if (n && typeof r.files < "u" && r.files) {
-        const a = r.files;
-        if (a.length > 0) {
-          const o = Array.from(a);
-          t[n] && Array.isArray(t[n]) ? o.forEach((c) => {
-            t[n].some(
-              (l) => l.name === c.name && l.size === c.size && l.lastModified === c.lastModified
-            ) || t[n].push(c);
-          }) : t[n] = o;
+    }), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((n) => {
+      const a = n.getAttribute("name");
+      if (a && typeof n.files < "u" && n.files) {
+        const l = n.files;
+        if (l.length > 0) {
+          const o = Array.from(l);
+          t[a] && Array.isArray(t[a]) ? o.forEach((h) => {
+            t[a].some(
+              (u) => u.name === h.name && u.size === h.size && u.lastModified === h.lastModified
+            ) || t[a].push(h);
+          }) : t[a] = o;
         }
       }
-    }), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((r) => {
-      const n = r.getAttribute("name");
-      if (n) {
-        let a = [];
-        if (typeof r.tags < "u" ? a = r.tags : typeof r.getTags == "function" && (a = r.getTags()), Array.isArray(a) && a.length > 0) {
-          const o = a.map((c) => typeof c == "string" ? c : (c == null ? void 0 : c.value) || (c == null ? void 0 : c.label) || "").filter((c) => c.trim() !== "");
-          t[n] = o;
+    }), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((n) => {
+      const a = n.name;
+      if (a && n.files && n.files.length > 0) {
+        const l = Array.from(n.files);
+        t[a] && Array.isArray(t[a]) ? l.forEach((o) => {
+          t[a].some(
+            (c) => c.name === o.name && c.size === o.size && c.lastModified === o.lastModified
+          ) || t[a].push(o);
+        }) : t[a] = l;
+      }
+    }), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((n) => {
+      const a = n.getAttribute("name");
+      if (a) {
+        let l = [];
+        if (typeof n.tags < "u" ? l = n.tags : typeof n.getTags == "function" && (l = n.getTags()), Array.isArray(l) && l.length > 0) {
+          const o = l.map((h) => typeof h == "string" ? h : (h == null ? void 0 : h.value) || (h == null ? void 0 : h.label) || "").filter((h) => h.trim() !== "");
+          t[a] = o;
         } else
-          t[n] = [];
+          t[a] = [];
       }
     })), t;
   }
@@ -3897,8 +4158,8 @@ class re extends HTMLElement {
   _validate(e, t) {
     let i = !0;
     return this._errors = {}, Object.entries(t || {}).forEach(([s, r]) => {
-      const n = Array.isArray(r) ? r : [r], a = this._getFieldElements(s), o = this._extractFieldValue(a), c = this._validateRules(o, n);
-      c ? (i = !1, this._errors[s] = c, this._flagFieldError(a, c)) : this._clearFieldError(a);
+      const n = Array.isArray(r) ? r : [r], a = this._getFieldElements(s), l = this._extractFieldValue(a), o = this._validateRules(l, n);
+      o ? (i = !1, this._errors[s] = o, this._flagFieldError(a, o)) : this._clearFieldError(a);
     }), i;
   }
   _validateField(e) {
@@ -3957,8 +4218,8 @@ class re extends HTMLElement {
     if (i.length > 0) {
       const n = [];
       return i.forEach((a) => {
-        const o = a.querySelector('select[name="' + e + '"]');
-        o && n.push(o);
+        const l = a.querySelector('select[name="' + e + '"]');
+        l && n.push(l);
       }), t.filter((a) => a.tagName !== "MINT-SELECT").concat(n);
     }
     if (t.filter((n) => n.tagName === "MINT-TAGS").length > 0)
@@ -3967,8 +4228,8 @@ class re extends HTMLElement {
     if (r.length > 0) {
       const n = [];
       return r.forEach((a) => {
-        const o = a.closest("mint-tags");
-        o && !n.includes(o) && n.push(o);
+        const l = a.closest("mint-tags");
+        l && !n.includes(l) && n.push(l);
       }), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(n);
     }
     return t;
@@ -3981,27 +4242,27 @@ class re extends HTMLElement {
     if (e.length > 1) {
       const s = e.filter((a) => a instanceof HTMLInputElement);
       if (s.length > 0 && s.length === e.length) {
-        const a = s.filter((o) => o.checked);
-        if (s.every((o) => o.type === "radio"))
+        const a = s.filter((l) => l.checked);
+        if (s.every((l) => l.type === "radio"))
           return a.length > 0 ? a[0].value || "on" : "";
-        if (s.every((o) => o.type === "checkbox"))
-          return a.map((o) => o.value || "on");
+        if (s.every((l) => l.type === "checkbox"))
+          return a.map((l) => l.value || "on");
       }
       const r = e.filter((a) => a.tagName === "MINT-CHOICE");
       if (r.length > 0 && r.length === e.length) {
-        const a = r.find((o) => typeof o.getValue == "function" ? o.getValue() !== "" : o.querySelector("mint-choice-option[checked]") !== null);
+        const a = r.find((l) => typeof l.getValue == "function" ? l.getValue() !== "" : l.querySelector("mint-choice-option[checked]") !== null);
         if (a) {
           if (typeof a.getValue == "function")
             return a.getValue();
-          const o = a.querySelector("mint-choice-option[checked]");
-          if (o)
-            return o.getAttribute("value") || "";
+          const l = a.querySelector("mint-choice-option[checked]");
+          if (l)
+            return l.getAttribute("value") || "";
         }
         return "";
       }
       const n = e.filter((a) => a.tagName === "MINT-CHECKBOX");
       if (n.length > 0 && n.length === e.length)
-        return n.filter((o) => typeof o.checked < "u" ? o.checked : o.hasAttribute("checked")).map((o) => o.getAttribute("value") || "on");
+        return n.filter((l) => typeof l.checked < "u" ? l.checked : l.hasAttribute("checked")).map((l) => l.getAttribute("value") || "on");
     }
     const i = e[0];
     if (i instanceof HTMLInputElement)
@@ -4091,24 +4352,26 @@ class re extends HTMLElement {
   }
   _applyValueToField(e, t, i) {
     e.forEach((s) => {
+      var n;
       const r = s.tagName;
+      console.log(r);
       try {
         if (r === "MINT-INPUT")
           typeof s.value < "u" && (s.value = i || "");
         else if (r === "MINT-DATE-PICKER")
           typeof s.setValue == "function" && s.setValue(i || "");
-        else if (r === "MINT-SELECT")
-          typeof s.setValue == "function" && s.setValue(i || "");
+        else if (r === "MINT-SELECT" || r === "SELECT")
+          r === "SELECT" ? (n = s.closest("mint-select")) == null || n.setValue(i || "") : typeof s.setValue == "function" && s.setValue(i || "");
         else if (r === "MINT-CHOICE")
-          typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((a) => {
-            a.checked = a.getAttribute("value") === i;
+          typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((l) => {
+            l.checked = l.getAttribute("value") === i;
           });
         else if (r === "MINT-CHECKBOX" || r === "MINT-SWITCH") {
-          const n = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
-          typeof s.checked < "u" ? s.checked = n : n ? s.setAttribute("checked", "") : s.removeAttribute("checked");
-        } else r === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((n) => typeof n == "string" ? { value: n, label: n, dismissable: !0 } : n)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
-      } catch (n) {
-        console.warn(`Failed to set value for field ${t}:`, n);
+          const a = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
+          typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "") : s.removeAttribute("checked");
+        } else r === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((a) => typeof a == "string" ? { value: a, label: a, dismissable: !0 } : a)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
+      } catch (a) {
+        console.warn(`Failed to set value for field ${t}:`, a);
       }
     });
   }
@@ -4177,8 +4440,8 @@ class re extends HTMLElement {
       if (!r) return;
       const n = this._getFieldName(r);
       if (!n || !this._collectValidationRules()[n]) return;
-      const o = this._extractFieldValue([r]), c = o != null && (typeof o == "string" ? o.trim() !== "" : o instanceof FileList || Array.isArray(o) ? o.length > 0 : !0), h = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), l = !!r.closest("mint-tags"), d = r.tagName === "MINT-CHECKBOX" || r.tagName === "MINT-SWITCH" || r.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), u = r.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
-      (c || h || l || d || u) && setTimeout(() => {
+      const l = this._extractFieldValue([r]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), h = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), c = !!r.closest("mint-tags"), u = r.tagName === "MINT-CHECKBOX" || r.tagName === "MINT-SWITCH" || r.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), d = r.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (o || h || c || u || d) && setTimeout(() => {
         this._validateField(n);
       }, 0);
     };
@@ -4187,46 +4450,46 @@ class re extends HTMLElement {
       const s = i.target;
       if (!s) return;
       if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
-        const h = s, l = this._getFieldName(h);
-        if (!l || !this._collectValidationRules()[l]) return;
+        const h = s, c = this._getFieldName(h);
+        if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
-          this._validateField(l);
+          this._validateField(c);
         }, 0);
         return;
       }
       if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
         const h = this._findFieldElement(s);
         if (!h) return;
-        const l = this._getFieldName(h);
-        if (!l || !this._collectValidationRules()[l]) return;
+        const c = this._getFieldName(h);
+        if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
-          this._validateField(l);
+          this._validateField(c);
         }, 0);
         return;
       }
       if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
-        const h = s, l = this._getFieldName(h);
-        if (!l || !this._collectValidationRules()[l]) return;
+        const h = s, c = this._getFieldName(h);
+        if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
-          this._validateField(l);
+          this._validateField(c);
         }, 0);
         return;
       }
       if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
         const h = this._findFieldElement(s);
         if (!h) return;
-        const l = this._getFieldName(h);
-        if (!l || !this._collectValidationRules()[l]) return;
+        const c = this._getFieldName(h);
+        if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
-          this._validateField(l);
+          this._validateField(c);
         }, 0);
         return;
       }
       const a = this._findFieldElement(s);
       if (!a) return;
-      const o = this._getFieldName(a);
-      !o || !this._collectValidationRules()[o] || (a.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && s.hasAttribute("aria-invalid")) && setTimeout(() => {
-        this._validateField(o);
+      const l = this._getFieldName(a);
+      !l || !this._collectValidationRules()[l] || (a.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && s.hasAttribute("aria-invalid")) && setTimeout(() => {
+        this._validateField(l);
       }, 0);
     };
     this._form.addEventListener("change", t, !0), this._form.addEventListener("tags-change", t, !0), this._form.addEventListener("choice-change", t, !0), this._fieldChangeHandlers.set(this._form, t);
@@ -4267,6 +4530,15 @@ class re extends HTMLElement {
       typeof t.syncFiles == "function" && t.syncFiles();
     });
   }
+  _propagateLoadingState() {
+    if (!this._form) return;
+    const e = this.getAttribute("loading"), t = e !== null && e !== "false";
+    Array.from(this._form.querySelectorAll(
+      "mint-input, mint-select, mint-date-picker, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags"
+    )).forEach((s) => {
+      t ? s.setAttribute("loading", "") : s.removeAttribute("loading"), typeof s.render == "function" && s.render();
+    });
+  }
 }
 customElements.get("mint-form") || customElements.define("mint-form", re);
 class ne extends HTMLElement {
@@ -4347,30 +4619,30 @@ class ne extends HTMLElement {
     }));
     const a = e.querySelector("tbody");
     if (a) {
-      const c = Array.from(a.querySelectorAll("tr"));
-      c.forEach((h, l) => {
+      const o = Array.from(a.querySelectorAll("tr"));
+      o.forEach((h, c) => {
         this._setClasses(h, [
           "bg-white",
           "dark:bg-gray-900",
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), l === c.length - 1 && h.classList.remove("border-b"), h.querySelectorAll("td").forEach((u) => {
-          this._setClasses(u, [
+        ]), c === o.length - 1 && h.classList.remove("border-b"), h.querySelectorAll("td").forEach((d) => {
+          this._setClasses(d, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), t ? this._applyMobileCell(u, s) : this._restoreCell(u);
+          ]), t ? this._applyMobileCell(d, s) : this._restoreCell(d);
         });
       });
     }
-    const o = e.querySelector("tfoot");
-    o && (this._setClasses(o, [
+    const l = e.querySelector("tfoot");
+    l && (this._setClasses(l, [
       "bg-[#F7F7F7]",
       "dark:bg-gray-800",
       "font-semibold"
-    ]), o.querySelectorAll("td").forEach((h) => {
+    ]), l.querySelectorAll("td").forEach((h) => {
       this._setClasses(h, [
         "text-gray-900",
         "dark:text-gray-100",
@@ -4550,7 +4822,7 @@ class oe extends HTMLElement {
     super(...arguments), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._placeholder = "Add tag", this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null;
   }
   static get observedAttributes() {
-    return ["tags", "placeholder", "sortable", "label", "info", "error", "error-message", "name", "id", "required"];
+    return ["tags", "placeholder", "sortable", "label", "info", "error", "error-message", "name", "id", "required", "loading"];
   }
   connectedCallback() {
     this._parseAttrs(), this._render(), this._pointerMoveHandler || (this._pointerMoveHandler = (e) => this._onPointerMove(e), window.addEventListener("pointermove", this._pointerMoveHandler)), this._pointerUpHandler || (this._pointerUpHandler = (e) => this._onPointerUp(e), window.addEventListener("pointerup", this._pointerUpHandler), window.addEventListener("pointercancel", this._pointerUpHandler));
@@ -4583,6 +4855,10 @@ class oe extends HTMLElement {
         }
         return;
       }
+      if (e === "loading") {
+        this._parseAttrs(), this._render();
+        return;
+      }
       this._parseAttrs(), this._render();
     }
   }
@@ -4628,10 +4904,13 @@ class oe extends HTMLElement {
   isRequired() {
     return this.hasAttribute("required");
   }
+  isLoading() {
+    return this.hasAttribute("loading");
+  }
   _render() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
-    const e = this.getLabel(), t = this.getInfo(), i = this.hasError(), s = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
-    if (this.getId() || this.setAttribute("id", s), this._container)
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(), r = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
+    if (this.getId() || this.setAttribute("id", r), this._container)
       this._input && (this._input.placeholder = this._placeholder);
     else {
       this._container = document.createElement("div");
@@ -4641,22 +4920,24 @@ class oe extends HTMLElement {
         "items-center",
         "gap-2",
         "w-full",
-        "p-2",
+        "px-2",
+        "py-1",
+        "min-h-[2rem]",
         "rounded-lg",
         "border-2",
-        i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+        s ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
         "bg-white",
         "dark:bg-gray-800",
         "focus-within:ring-2",
         "focus-within:ring-offset-1",
-        i ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
+        s ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
         "transition-colors",
         "duration-200"
       ];
-      this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (c) => {
-        this.hasAttribute("sortable") && c.preventDefault();
-      }), this._chipsWrap.addEventListener("drop", (c) => {
-        this.hasAttribute("sortable") && c.preventDefault();
+      this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (h) => {
+        this.hasAttribute("sortable") && h.preventDefault();
+      }), this._chipsWrap.addEventListener("drop", (h) => {
+        this.hasAttribute("sortable") && h.preventDefault();
       }), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
         "min-w-[6rem]",
         "flex-1",
@@ -4669,8 +4950,8 @@ class oe extends HTMLElement {
         "placeholder:text-gray-400",
         "dark:placeholder:text-gray-500",
         "p-1.5"
-      ].join(" "), this._input.addEventListener("keydown", (c) => {
-        c.key === "Enter" && (c.preventDefault(), this._addFromInput());
+      ].join(" "), this._input.addEventListener("keydown", (h) => {
+        h.key === "Enter" && (h.preventDefault(), this._addFromInput());
       }), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
     }
     if (this._container) {
@@ -4685,27 +4966,34 @@ class oe extends HTMLElement {
         "min-h-[2rem]",
         "rounded-lg",
         "border-2",
-        i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+        s ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
         "bg-white",
         "dark:bg-gray-800",
         "focus-within:ring-2",
         "focus-within:ring-offset-1",
-        i ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
+        s ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
         "transition-colors",
         "duration-200"
       ];
       this._container.className = o.join(" ");
     }
-    let r = this.querySelector(".mint-tags-label-container");
-    if (e) {
-      r || (r = document.createElement("div"), r.className = "mint-tags-label-container mb-[.25rem]", this._container && this._container.parentElement === this ? this.insertBefore(r, this._container) : this.insertBefore(r, this.firstChild));
-      let o = r.querySelector(".mint-tags-label");
-      e ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", r.appendChild(o)), o.textContent = e, o.setAttribute("for", s)) : o && o.remove();
-    } else r && r.remove();
-    let n = this.querySelector(".mint-tags-info");
-    t ? (n || (n = document.createElement("span"), n.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", this._container && this._container.parentElement === this ? this.insertBefore(n, this._container.nextSibling) : this.appendChild(n)), n.textContent = t) : n && n.remove();
-    const a = this.getName();
-    a ? (this.setAttribute("name", a), this._input && (this._input.name = a, this._input.id = s)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = s)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState();
+    let n = this.querySelector(".mint-tags-label-container");
+    if (t) {
+      n || (n = document.createElement("div"), n.className = "mint-tags-label-container mb-[.25rem]", this._container && this._container.parentElement === this ? this.insertBefore(n, this._container) : this.insertBefore(n, this.firstChild));
+      let o = n.querySelector(".mint-tags-label");
+      t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.appendChild(o)), o.textContent = t, o.setAttribute("for", r)) : o && o.remove();
+    } else n && n.remove();
+    let a = this.querySelector(".mint-tags-info");
+    i ? (a || (a = document.createElement("span"), a.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", this._container && this._container.parentElement === this ? this.insertBefore(a, this._container.nextSibling) : this.appendChild(a)), a.textContent = i) : a && a.remove();
+    const l = this.getName();
+    l ? (this.setAttribute("name", l), this._input && (this._input.name = l, this._input.id = r)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = r)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState(), this._renderSkeleton(e);
+  }
+  _renderSkeleton(e) {
+    const t = this._container;
+    if (!t) return;
+    t.classList.contains("relative") || t.classList.add("relative");
+    let i = t.querySelector(".mint-tags-skeleton");
+    e ? (i || (i = document.createElement("div"), i.className = "mint-tags-skeleton absolute inset-0 z-10 pointer-events-none rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(i)), i.style.display = "block", this._chipsWrap && (this._chipsWrap.style.visibility = "hidden", this._chipsWrap.style.pointerEvents = "none"), this._input && (this._input.style.visibility = "hidden", this._input.style.pointerEvents = "none")) : (i && (i.style.display = "none"), this._chipsWrap && (this._chipsWrap.style.visibility = "visible", this._chipsWrap.style.pointerEvents = "auto"), this._input && (this._input.style.visibility = "visible", this._input.style.pointerEvents = "auto"));
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -5029,7 +5317,7 @@ customElements.get("mint-alert") || customElements.define("mint-alert", ce);
 export {
   ce as Alert,
   Y as BackButton,
-  W as Button,
+  z as Button,
   j as Card,
   K as Checkbox,
   ae as Chip,
@@ -5039,18 +5327,18 @@ export {
   se as Dropzone,
   re as Form,
   G as Grid,
-  q as Icon,
+  B as Icon,
   ee as Input,
   $ as Link,
   J as Modal,
   U as Page,
   X as Popover,
   ie as Select,
-  B as Spinner,
+  O as Spinner,
   R as Stack,
-  z as Switch,
+  W as Switch,
   ne as Table,
   oe as Tags,
   V as Text,
-  W as default
+  z as default
 };