monobill-mintui 0.2.98 → 0.3.1

package/dist/index.js

@@ -35,8 +35,8 @@ class O extends HTMLElement {
     const e = this.getSize(), t = this.getAttribute("size") || "default", i = !!(this.style.width && this.style.height), s = this.getAttribute("data-button-variant"), n = document.documentElement.classList.contains("dark");
     let r;
     if (i) {
-      const h = this.getAttribute("data-button-tone") || "neutral";
-      s === "solid" ? h === "neutral" ? r = n ? "#ffffff" : "#0f172a" : r = "#ffffff" : r = n ? "#ffffff" : "#0f172a";
+      const c = this.getAttribute("data-button-tone") || "neutral";
+      s === "solid" ? c === "neutral" ? r = n ? "#ffffff" : "#0f172a" : r = "#ffffff" : r = n ? "#ffffff" : "#0f172a";
     } else
       r = n ? "#e2e8f0" : "#0f172a";
     const a = t === "large" ? "2" : "4", l = !!(this.style.width && this.style.height), o = `
@@ -118,39 +118,51 @@ class B extends HTMLElement {
   getName() {
     return this.getAttribute("name") || "";
   }
-  getIconUrl() {
-    var t;
-    const e = (t = document.querySelector('meta[name="mint-icon-base-url"]')) == null ? void 0 : t.getAttribute("content");
-    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`;
+  generateSVGMarkup(e) {
+    let t;
+    return e.fill && e.strokeWidth ? t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${e.viewBox}" fill="none" stroke="currentColor" stroke-width="${e.strokeWidth}" stroke-linecap="${e.strokeLinecap || "round"}" stroke-linejoin="${e.strokeLinejoin || "round"}">
+  <path d="${e.path}" />
+</svg>` : e.fill ? e.viewBox === "0 0 512 512" ? t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <g transform="scale(0.046875)">
+    <path d="${e.path}" />
+  </g>
+</svg>` : t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${e.viewBox}" fill="currentColor">
+  <path d="${e.path}" />
+</svg>` : t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${e.viewBox}" fill="none" stroke="currentColor" stroke-width="${e.strokeWidth || "2"}" stroke-linecap="${e.strokeLinecap || "round"}" stroke-linejoin="${e.strokeLinejoin || "round"}">
+  <path d="${e.path}" />
+</svg>`, t;
   }
   render() {
-    var l, o, h;
+    var o, c, h;
     const e = this.getName();
     if (!e) {
-      this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
+      this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
       return;
     }
-    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 = "";
+    const t = q(e);
+    if (!t) {
+      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 = "", this.style.backgroundColor = "";
       return;
     }
-    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")), n = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
+    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")), n = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
     if (!Array.from(this.classList).some(
-      (c) => c.startsWith("w-") || c.startsWith("h-")
+      (d) => d.startsWith("w-") || d.startsWith("h-")
     ) && !n) {
-      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((m) => {
-        m && this.classList.add(m);
+      let d;
+      s ? d = "w-3 h-3" : i ? d = "w-5 h-5" : d = "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"), d.split(" ").forEach((u) => {
+        u && this.classList.add(u);
       });
     }
-    const a = this.getIconUrl();
-    if (this.style.maskImage = `url(${a})`, this.style.webkitMaskImage = `url(${a})`, this.style.maskSize = "contain", this.style.webkitMaskSize = "contain", this.style.maskRepeat = "no-repeat", this.style.webkitMaskRepeat = "no-repeat", this.style.maskPosition = "center", this.style.webkitMaskPosition = "center", this.style.aspectRatio = "1 / 1", this.style.backgroundColor = "currentColor", this.innerHTML = "", s)
+    const a = this.generateSVGMarkup(t);
+    this.innerHTML = a, this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.maskSize = "", this.style.webkitMaskSize = "", this.style.maskRepeat = "", this.style.webkitMaskRepeat = "", this.style.maskPosition = "", this.style.webkitMaskPosition = "", this.style.backgroundColor = "", this.style.aspectRatio = "1 / 1";
+    const l = this.querySelector("svg");
+    if (l && (l.style.width = "100%", l.style.height = "100%"), s)
       this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add("text-gray-900");
     else if (i)
       this.classList.remove("text-gray-100", "text-gray-900");
     else {
-      const m = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
-      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(m);
+      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);
     }
   }
 }
@@ -172,7 +184,7 @@ class z extends HTMLElement {
     };
   }
   static get observedAttributes() {
-    return ["variant", "tone", "disabled", "loading", "button-type", "type", "full-width", "icon-position", "icon"];
+    return ["variant", "tone", "disabled", "loading", "button-type", "type", "full-width", "icon-position", "icon", "active"];
   }
   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");
@@ -202,6 +214,17 @@ class z extends HTMLElement {
   isFullWidth() {
     return this.hasAttribute("full-width");
   }
+  isActive() {
+    const e = this.getAttribute("active");
+    return !(e === null || e === "false" || e === "0");
+  }
+  // Convenience property for programmatic usage: button.active = true/false
+  get active() {
+    return this.isActive();
+  }
+  set active(e) {
+    e ? this.setAttribute("active", "true") : this.removeAttribute("active");
+  }
   getIconPosition() {
     return this.getAttribute("icon-position") || "left";
   }
@@ -225,6 +248,151 @@ class z extends HTMLElement {
       }
     return !0;
   }
+  getActiveStateClasses() {
+    const e = this.getVariant(), t = this.getTone(), i = `${e}-${t}`;
+    return {
+      "solid-action": [
+        "!bg-slate-900",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+        "dark:!bg-slate-700",
+        "hover:!bg-slate-900",
+        // Override hover to match active
+        "dark:hover:!bg-slate-700",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]"
+        // Override hover shadow with inset
+      ],
+      "solid-neutral": [
+        "!bg-gray-100",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "hover:!bg-gray-100",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
+        // Override hover shadow with inset
+      ],
+      "solid-info": [
+        "!bg-blue-900",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+        "dark:!bg-blue-700",
+        "hover:!bg-blue-900",
+        // Override hover to match active
+        "dark:hover:!bg-blue-700",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]"
+        // Override hover shadow with inset
+      ],
+      "solid-warning": [
+        "!bg-amber-900",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+        "dark:!bg-amber-700",
+        "hover:!bg-amber-900",
+        // Override hover to match active
+        "dark:hover:!bg-amber-700",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]"
+        // Override hover shadow with inset
+      ],
+      "solid-danger": [
+        "!bg-red-900",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+        "dark:!bg-red-700",
+        "hover:!bg-red-900",
+        // Override hover to match active
+        "dark:hover:!bg-red-700",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]"
+        // Override hover shadow with inset
+      ],
+      "ghost-action": [
+        "!bg-gray-100",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "hover:!bg-gray-100",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
+        // Override hover shadow
+      ],
+      "ghost-neutral": [
+        "!bg-gray-50",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "!text-gray-900",
+        "dark:!text-white",
+        "hover:!bg-gray-50",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        // Override hover shadow
+        "hover:!text-gray-900",
+        // Override hover text color
+        "dark:hover:!text-white"
+      ],
+      "ghost-info": [
+        "!bg-gray-100",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "hover:!bg-gray-100",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
+        // Override hover shadow
+      ],
+      "ghost-warning": [
+        "!bg-gray-100",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "hover:!bg-gray-100",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
+        // Override hover shadow
+      ],
+      "ghost-danger": [
+        "!bg-gray-100",
+        "!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+        "dark:!bg-gray-800",
+        "hover:!bg-gray-100",
+        // Override hover to match active
+        "dark:hover:!bg-gray-800",
+        "hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
+        // Override hover shadow
+      ],
+      "link-action": [
+        "!text-slate-900",
+        "dark:!text-slate-300",
+        "hover:!text-slate-900",
+        // Override hover to match active
+        "dark:hover:!text-slate-300"
+      ],
+      "link-neutral": [
+        "!text-gray-950",
+        "dark:!text-gray-200",
+        "hover:!text-gray-950",
+        // Override hover to match active
+        "dark:hover:!text-gray-200"
+      ],
+      "link-info": [
+        "!text-blue-900",
+        "dark:!text-blue-200",
+        "hover:!text-blue-900",
+        // Override hover to match active
+        "dark:hover:!text-blue-200"
+      ],
+      "link-warning": [
+        "!text-amber-900",
+        "dark:!text-amber-200",
+        "hover:!text-amber-900",
+        // Override hover to match active
+        "dark:hover:!text-amber-200"
+      ],
+      "link-danger": [
+        "!text-red-900",
+        "dark:!text-red-200",
+        "hover:!text-red-900",
+        // Override hover to match active
+        "dark:hover:!text-red-200"
+      ]
+    }[i] || [];
+  }
   getButtonClasses() {
     const e = this.isIconOnly(), t = this.getVariant(), i = [
       "inline-flex",
@@ -235,7 +403,7 @@ class z extends HTMLElement {
       // All buttons have rounded corners
       "box-border",
       // Ensure border is included in size calculation
-      ...e ? ["p-1.5", "aspect-square", "w-[2rem]", "h-[2rem]"] : ["px-3.5", "py-1.5", "min-h-[2rem]"],
+      ...e ? ["p-1.5", "aspect-square", "w-[2.25rem]", "h-[2.25rem]"] : ["px-3.5", "py-1.5", "min-h-[2.25rem]"],
       // Square for icon-only, normal padding otherwise
       "text-sm",
       "transition-all",
@@ -538,10 +706,14 @@ class z extends HTMLElement {
       ...i,
       ...a
     ];
+    if (this.isActive()) {
+      const o = this.getActiveStateClasses();
+      l.push(...o), l.push("[&>*]:scale-95");
+    }
     return this.isFullWidth() && l.push("w-full"), l.join(" ");
   }
   render() {
-    var h, c, m, d, f;
+    var c, h, d, u, m;
     const e = this.isDisabled() || this.isLoading(), t = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -554,12 +726,12 @@ class z 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 u = document.createElement("span");
-        u.className = "mr-2 inline-flex items-center";
-        const p = document.createElement("mint-spinner");
-        p.setAttribute("size", "default"), p.setAttribute("data-button-variant", this.getVariant()), p.setAttribute("data-button-tone", this.getTone()), p.style.width = "0.875rem", p.style.height = "0.875rem", u.appendChild(p), this._button.insertBefore(u, this._button.firstChild);
+        const p = document.createElement("span");
+        p.className = "mr-2 inline-flex items-center";
+        const f = document.createElement("mint-spinner");
+        f.setAttribute("size", "default"), f.setAttribute("data-button-variant", this.getVariant()), f.setAttribute("data-button-tone", this.getTone()), f.style.width = "0.875rem", f.style.height = "0.875rem", p.appendChild(f), this._button.insertBefore(p, this._button.firstChild);
       }
-    else i && ((h = i.parentElement) == null || h.remove());
+    else i && ((c = i.parentElement) == null || c.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
       this._button.appendChild(this.firstChild);
     const s = this.getIcon();
@@ -568,34 +740,34 @@ class z extends HTMLElement {
     const r = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const u = n && n.tagName === "MINT-ICON";
+      const p = n && n.tagName === "MINT-ICON";
       if (n && !n.parentElement) {
-        const p = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
-        u || r === "left" ? p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a) : a.insertAdjacentElement("afterend", n);
-      } else if (n && (u || r === "left") && n.nextSibling !== a) {
+        const f = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
+        p || r === "left" ? f ? f.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a) : a.insertAdjacentElement("afterend", n);
+      } else if (n && (p || r === "left") && n.nextSibling !== a) {
         n.remove();
-        const p = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
-        p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a);
-      } else n && !u && r === "right" && n.previousSibling !== a && (n.remove(), a.insertAdjacentElement("afterend", n));
+        const f = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
+        f ? f.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a);
+      } else n && !p && r === "right" && n.previousSibling !== a && (n.remove(), a.insertAdjacentElement("afterend", n));
     } else {
-      const u = [];
-      for (let p = this._button.firstChild; p; p = p.nextSibling) {
-        if (p.nodeType !== Node.ELEMENT_NODE) {
-          u.push(p);
+      const p = [];
+      for (let f = this._button.firstChild; f; f = f.nextSibling) {
+        if (f.nodeType !== Node.ELEMENT_NODE) {
+          p.push(f);
           continue;
         }
-        const _ = p;
-        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !== n && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && u.push(p);
+        const b = f;
+        b.tagName !== "MINT-SPINNER" && !b.querySelector("mint-spinner") && f !== n && !b.hasAttribute("slot") && !(b.className === "mr-2" && b.querySelector("mint-spinner")) && p.push(f);
       }
-      if (u.length > 0) {
-        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", u.forEach((_) => {
-          a.appendChild(_);
+      if (p.length > 0) {
+        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", p.forEach((b) => {
+          a.appendChild(b);
         });
-        const p = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
-        n && r === "left" ? p ? (p.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(n, this._button.firstChild), n.insertAdjacentElement("afterend", a)) : n && r === "right" ? p ? (p.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", n)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", n)) : p ? p.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
+        const f = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
+        n && r === "left" ? f ? (f.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(n, this._button.firstChild), n.insertAdjacentElement("afterend", a)) : n && r === "right" ? f ? (f.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", n)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", n)) : f ? f.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
       } else if (n && n.tagName === "MINT-ICON" && !n.parentElement) {
-        const p = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
-        p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, this._button.firstChild);
+        const f = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        f ? f.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, this._button.firstChild);
       }
     }
     const l = this.isIconOnly();
@@ -775,17 +947,17 @@ class W extends HTMLElement {
     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");
+    let c = this._button.querySelector("span");
+    c || (c = document.createElement("span"), this._button.appendChild(c)), c.className = i;
+    const h = c.querySelector("span");
     if (r) {
-      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", r);
-    } else c && c.remove();
-    let m = this.querySelector(".mint-switch-info");
-    n ? (m || (m = document.createElement("span"), m.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(m, l.nextSibling) : this.appendChild(m)), m.textContent = n, this.isDisabled() ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove(), this._renderErrorState(), this._renderSkeleton(e);
+      let u = h;
+      u || (u = document.createElement("span"), u.className = this.getIconClasses(), c.appendChild(u));
+      let m = u.querySelector("mint-icon");
+      m || (m = document.createElement("mint-icon"), u.appendChild(m)), m.setAttribute("name", r);
+    } else h && h.remove();
+    let d = this.querySelector(".mint-switch-info");
+    n ? (d || (d = document.createElement("span"), d.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(d, l.nextSibling) : this.appendChild(d)), d.textContent = n, this.isDisabled() ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove(), this._renderErrorState(), this._renderSkeleton(e);
   }
   setupEventListeners() {
     this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
@@ -1087,7 +1259,7 @@ class j extends HTMLElement {
     );
   }
   render() {
-    this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-800", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200"), this.hasPaddingClass() || this.classList.add("p-6");
+    this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-800", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200", "mb-6"), this.hasPaddingClass() || this.classList.add("p-4");
     const e = this.getHeading();
     e ? (this._headingElement || (this._headingElement = document.createElement("mint-text"), this._headingElement.setAttribute("size", "sub-heading"), this.insertBefore(this._headingElement, this.firstChild)), this._headingElement.textContent = e) : this._headingElement && this._headingElement.parentNode && (this._headingElement.remove(), this._headingElement = null);
   }
@@ -1384,31 +1556,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 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();
+      let h = this._modal.querySelector(".modal-content");
+      h || (h = document.createElement("div"), h.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(h)), this._animateEnter();
     } else
       this._animateExit();
     let s = this._modal.querySelector(".modal-content");
     s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
     let n = this._headingSlot.querySelector("mint-text");
     t ? (n || (n = document.createElement("mint-text"), n.setAttribute("size", "sub-heading"), n.setAttribute("bold", ""), this._headingSlot.appendChild(n)), n.textContent = t) : n && n.remove(), Array.from(this.children).filter(
-      (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);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._headingSlot && h.getAttribute("slot") === "heading"
+    ).forEach((h) => {
+      this._headingSlot && h.parentElement !== this._headingSlot && this._headingSlot.appendChild(h);
     }), this._closeButton || (this._closeButton = document.createElement("mint-button"), this._closeButton.setAttribute("variant", "ghost"), this._closeButton.setAttribute("icon", "close"), this._closeButton.addEventListener("click", () => this.close()), this._header.appendChild(this._closeButton)), this._bodySlot || (this._bodySlot = document.createElement("div"), this._bodySlot.className = "flex-1 overflow-y-auto p-4", this._bodySlot.setAttribute("slot", "body"), s.appendChild(this._bodySlot)), Array.from(this.children).filter(
-      (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);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._bodySlot && h.getAttribute("slot") === "body"
+    ).forEach((h) => {
+      this._bodySlot && h.parentElement !== this._bodySlot && this._bodySlot.appendChild(h);
     }), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700", this._actionsSlot.setAttribute("slot", "actions"), s.appendChild(this._actionsSlot));
     let 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);
+      (h) => h !== this._overlay && h !== this._modal && h !== this._actionsSlot && h.getAttribute("slot") === "actions"
+    ).forEach((h) => {
+      Array.from(h.children).forEach((u) => {
+        u.parentElement !== l && l.appendChild(u);
+      }), h.parentElement && h.remove();
+    }), Array.from(this.children).forEach((h) => {
+      h !== this._overlay && h !== this._modal && h.getAttribute("slot") !== "heading" && h.getAttribute("slot") !== "body" && h.getAttribute("slot") !== "actions" && h !== this._headingSlot && h !== this._bodySlot && h !== this._actionsSlot && h.parentElement !== this._bodySlot && this._bodySlot.appendChild(h);
     }), this._updateBackgroundColor();
   }
   _updateBackgroundColor() {
@@ -1558,38 +1730,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(), n = window.innerWidth, r = window.innerHeight, a = 8;
-    let l = this.getDirection(), o = 0, h = 0;
+    let l = this.getDirection(), o = 0, c = 0;
     switch (l) {
       case "down":
-        if (o = e.bottom + a, h = e.left + e.width / 2 - s.width / 2, o + s.height > r) {
-          const c = e.top - s.height - a;
-          c >= 0 ? (l = "up", o = c) : (o = Math.max(0, r - s.height - a), o + s.height > r && (o = 0));
+        if (o = e.bottom + a, c = e.left + e.width / 2 - s.width / 2, o + s.height > r) {
+          const h = e.top - s.height - a;
+          h >= 0 ? (l = "up", o = h) : (o = Math.max(0, r - s.height - a), o + s.height > r && (o = 0));
         }
-        h < 0 && (h = a), h + s.width > n && (h = Math.max(a, n - s.width - a), h + s.width > n && (h = n - s.width));
+        c < 0 && (c = a), c + s.width > n && (c = Math.max(a, n - s.width - a), c + s.width > n && (c = n - s.width));
         break;
       case "up":
-        if (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 <= r ? (l = "down", o = c) : (o = Math.min(r - s.height - a, r - s.height), o < 0 && (o = r - s.height));
+        if (o = e.top - s.height - a, c = e.left + e.width / 2 - s.width / 2, o < 0) {
+          const h = e.bottom + a;
+          h + s.height <= r ? (l = "down", o = h) : (o = Math.min(r - s.height - a, r - s.height), o < 0 && (o = r - s.height));
         }
-        h < 0 && (h = a), h + s.width > n && (h = Math.max(a, n - s.width - a), h + s.width > n && (h = n - s.width));
+        c < 0 && (c = a), c + s.width > n && (c = Math.max(a, n - s.width - a), c + s.width > n && (c = n - s.width));
         break;
       case "right":
-        if (o = e.top + e.height / 2 - s.height / 2, h = e.right + a, h + s.width > n) {
-          const c = e.left - s.width - a;
-          c >= 0 ? (l = "left", h = c) : (h = Math.max(0, n - s.width - a), h + s.width > n && (h = n - s.width));
+        if (o = e.top + e.height / 2 - s.height / 2, c = e.right + a, c + s.width > n) {
+          const h = e.left - s.width - a;
+          h >= 0 ? (l = "left", c = h) : (c = Math.max(0, n - s.width - a), c + s.width > n && (c = n - s.width));
         }
         o < 0 && (o = a), o + s.height > r && (o = Math.max(a, r - s.height - a), o + s.height > r && (o = r - s.height));
         break;
       case "left":
-        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 <= n ? (l = "right", h = c) : (h = Math.min(n - s.width - a, n - s.width), h < 0 && (h = 0));
+        if (o = e.top + e.height / 2 - s.height / 2, c = e.left - s.width - a, c < 0) {
+          const h = e.right + a;
+          h + s.width <= n ? (l = "right", c = h) : (c = Math.min(n - s.width - a, n - s.width), c < 0 && (c = 0));
         }
         o < 0 && (o = a), o + s.height > r && (o = Math.max(a, r - s.height - a), o + s.height > r && (o = r - s.height));
         break;
     }
-    return { top: o, left: h, direction: l };
+    return { top: o, left: c, direction: l };
   }
   render() {
     const e = this.getId(), t = this.isOpen(), i = this.getPadding();
@@ -1790,26 +1962,30 @@ class K extends HTMLElement {
     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"), r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, r.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
+    o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"), r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, r.style.cursor = "pointer", r.style.pointerEvents = "auto", this._checkbox.style.pointerEvents = "auto";
+    const c = r;
+    c._wrapperClickHandler || (c._wrapperClickHandler = (m) => {
+      m.target === r && !s && (m.preventDefault(), m.stopPropagation(), this.toggle());
+    }, r.addEventListener("click", c._wrapperClickHandler));
     let h = r.querySelector("mint-icon");
     h || (h = document.createElement("mint-icon"), h.setAttribute("name", "check"), h.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", h.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", h.style.zIndex = "1", r.appendChild(h)), this.updateVisualState();
-    let c = this.querySelector(".mint-checkbox-label-container");
-    const m = this.querySelector(".mint-checkbox-container");
+    let d = this.querySelector(".mint-checkbox-label-container");
+    const u = this.querySelector(".mint-checkbox-container");
     if (t || i) {
-      c ? m && c.parentElement !== m && m.appendChild(c) : (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", m ? m.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);
+      d ? u && d.parentElement !== u && u.appendChild(d) : (d = document.createElement("div"), d.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", u ? u.appendChild(d) : this.appendChild(d));
+      let m = d.querySelector(".mint-checkbox-label");
+      t ? (m || (m = document.createElement("span"), m.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", d.insertBefore(m, d.firstChild)), m.textContent = t, s ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
+      let p = d.querySelector(".mint-checkbox-info");
+      if (i ? (p || (p = document.createElement("span"), p.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", d.appendChild(p)), p.textContent = i, s ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove(), s)
+        d.style.cursor = "default", d._clickHandler && (d.removeEventListener("click", d._clickHandler), d._clickHandler = null);
       else {
-        c.style.cursor = "pointer";
-        const u = c._clickHandler;
-        u && c.removeEventListener("click", u), c._clickHandler = (p) => {
-          this._checkbox && (p.target === this._checkbox || this._checkbox.contains(p.target) || p.composedPath().includes(this._checkbox)) || this.toggle();
-        }, c.addEventListener("click", c._clickHandler);
+        d.style.cursor = "pointer";
+        const f = d._clickHandler;
+        f && d.removeEventListener("click", f), d._clickHandler = (b) => {
+          this._checkbox && (b.target === this._checkbox || this._checkbox.contains(b.target) || b.composedPath().includes(this._checkbox)) || this.toggle();
+        }, d.addEventListener("click", d._clickHandler);
       }
-    } else c && c.remove();
+    } else d && d.remove();
     this._renderErrorState(), this._renderSkeleton(e);
   }
   setupEventListeners() {
@@ -1852,6 +2028,11 @@ class K extends HTMLElement {
   }
   removeEventListeners() {
     this._checkbox && (this._changeHandler && (this._checkbox.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._mousedownHandler && (this._checkbox.removeEventListener("mousedown", this._mousedownHandler), this._mousedownHandler = null), this._mouseupHandler && (this._checkbox.removeEventListener("mouseup", this._mouseupHandler), this._mouseupHandler = null), this._mouseleaveHandler && (this._checkbox.removeEventListener("mouseleave", this._mouseleaveHandler), this._mouseleaveHandler = null), this._touchstartHandler && (this._checkbox.removeEventListener("touchstart", this._touchstartHandler), this._touchstartHandler = null), this._touchendHandler && (this._checkbox.removeEventListener("touchend", this._touchendHandler), this._touchendHandler = null), this._focusHandler && (this._checkbox.removeEventListener("focus", this._focusHandler), this._focusHandler = null), this._blurHandler && (this._checkbox.removeEventListener("blur", this._blurHandler), this._blurHandler = null));
+    const e = this.querySelector(".mint-checkbox-wrapper");
+    if (e) {
+      const t = e;
+      t._wrapperClickHandler && (e.removeEventListener("click", t._wrapperClickHandler), t._wrapperClickHandler = null);
+    }
   }
   updateVisualState() {
     const e = this.querySelector(".mint-checkbox-wrapper"), t = e == null ? void 0 : e.querySelector("mint-icon");
@@ -1951,69 +2132,69 @@ class Z extends HTMLElement {
     }, this.addEventListener("click", this._clickHandler));
   }
   render() {
-    var f;
+    var m;
     const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"), n = (s == null ? void 0 : s.getAttribute("name")) || "";
     let r = "";
     const a = this.querySelector(".mint-choice-option-label");
-    a ? r = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((u) => {
-      var p;
-      if (u.nodeType === Node.TEXT_NODE) {
-        const _ = (p = u.textContent) == null ? void 0 : p.trim();
-        _ && (r += _);
+    a ? r = ((m = a.textContent) == null ? void 0 : m.trim()) || "" : Array.from(this.childNodes).forEach((p) => {
+      var f;
+      if (p.nodeType === Node.TEXT_NODE) {
+        const b = (f = p.textContent) == null ? void 0 : f.trim();
+        b && (r += b);
       }
     });
     const l = this.querySelectorAll(".mint-choice-option-wrapper");
     let o = null;
-    if (l.length > 0 && (this._radio && (o = Array.from(l).find((u) => u.contains(this._radio))), o || (o = l[0]), l.forEach((u, p) => {
-      u !== o && u.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((u) => {
-      u !== this._radio && u.remove();
+    if (l.length > 0 && (this._radio && (o = Array.from(l).find((p) => p.contains(this._radio))), o || (o = l[0]), l.forEach((p, f) => {
+      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();
     }), this._radio)
-      this._radio.parentElement !== o && o.appendChild(this._radio), this._radio && this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._radio.addEventListener("change", this._changeHandler)), this._radio && (this._focusHandler || (this._focusHandler = (u) => {
-        const p = this.querySelector(".mint-choice-option-wrapper");
-        p && !this.isDisabled() && p.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      this._radio.parentElement !== o && o.appendChild(this._radio), this._radio && this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._radio.addEventListener("change", this._changeHandler)), this._radio && (this._focusHandler || (this._focusHandler = (p) => {
+        const f = this.querySelector(".mint-choice-option-wrapper");
+        f && !this.isDisabled() && f.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }), this._blurHandler || (this._blurHandler = () => {
-        const u = this.querySelector(".mint-choice-option-wrapper");
-        u && u.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
-      }), this._keydownHandler || (this._keydownHandler = (u) => {
-        this.isDisabled() || (u.key === "ArrowDown" || u.key === "ArrowRight" ? (u.preventDefault(), this._focusNextOption()) : (u.key === "ArrowUp" || u.key === "ArrowLeft") && (u.preventDefault(), this._focusPreviousOption()));
+        const p = this.querySelector(".mint-choice-option-wrapper");
+        p && p.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }), this._keydownHandler || (this._keydownHandler = (p) => {
+        this.isDisabled() || (p.key === "ArrowDown" || p.key === "ArrowRight" ? (p.preventDefault(), this._focusNextOption()) : (p.key === "ArrowUp" || p.key === "ArrowLeft") && (p.preventDefault(), this._focusPreviousOption()));
       }), 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 = (p) => {
-        const _ = this._checked;
+      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 = (f) => {
+        const b = this._checked;
         this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
-        const b = this.closest("mint-choice");
-        _ !== this._checked && b && setTimeout(() => {
-          b.dispatchEvent(new CustomEvent("choice-change", {
+        const g = this.closest("mint-choice");
+        b !== this._checked && g && setTimeout(() => {
+          g.dispatchEvent(new CustomEvent("choice-change", {
             detail: { checked: this._checked, value: this.getValue() },
             bubbles: !0,
             cancelable: !0
           }));
         }, 0);
       }, this._radio.addEventListener("change", this._changeHandler);
-      const u = () => {
+      const p = () => {
         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", u), this._focusHandler = (p) => {
-        const _ = this.querySelector(".mint-choice-option-wrapper");
-        _ && !this.isDisabled() && _.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      this._radio.addEventListener("click", p), this._focusHandler = (f) => {
+        const b = this.querySelector(".mint-choice-option-wrapper");
+        b && !this.isDisabled() && b.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }, this._radio.addEventListener("focus", this._focusHandler), this._blurHandler = () => {
-        const p = this.querySelector(".mint-choice-option-wrapper");
-        p && p.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
-      }, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (p) => {
-        this.isDisabled() || (p.key === "ArrowDown" || p.key === "ArrowRight" ? (p.preventDefault(), this._focusNextOption()) : (p.key === "ArrowUp" || p.key === "ArrowLeft") && (p.preventDefault(), this._focusPreviousOption()));
+        const f = this.querySelector(".mint-choice-option-wrapper");
+        f && f.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (f) => {
+        this.isDisabled() || (f.key === "ArrowDown" || f.key === "ArrowRight" ? (f.preventDefault(), this._focusNextOption()) : (f.key === "ArrowUp" || f.key === "ArrowLeft") && (f.preventDefault(), this._focusPreviousOption()));
       }, this._radio.addEventListener("keydown", this._keydownHandler);
     }
-    this._radio.name = n, 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"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((u, p) => {
-      p > 0 && u.remove();
+    this._radio.name = n, 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"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((p, f) => {
+      f > 0 && p.remove();
     });
-    let m = o.querySelector(".mint-choice-option-indicator");
-    m || (m = document.createElement("div"), m.className = "mint-choice-option-indicator", o.appendChild(m)), m.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", m.style.position = "absolute", m.style.top = "50%", m.style.left = "50%", m.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", m.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((u) => {
-      var p;
-      u.nodeType === Node.TEXT_NODE && ((p = u.textContent) != null && p.trim()) && (u.textContent = "");
-    })), d.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, d.textContent = r), 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();
+    let d = o.querySelector(".mint-choice-option-indicator");
+    d || (d = document.createElement("div"), d.className = "mint-choice-option-indicator", o.appendChild(d)), d.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", d.style.position = "absolute", d.style.top = "50%", d.style.left = "50%", d.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", d.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
+    let u = this.querySelector(".mint-choice-option-label");
+    r && (u || (u = document.createElement("span"), u.className = "mint-choice-option-label", this.appendChild(u), Array.from(this.childNodes).forEach((p) => {
+      var f;
+      p.nodeType === Node.TEXT_NODE && ((f = p.textContent) != null && f.trim()) && (p.textContent = "");
+    })), u.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, u.textContent = r), 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 = [
@@ -2218,8 +2399,8 @@ class Q extends HTMLElement {
       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 o = r.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", r.insertBefore(o, r.firstChild)), o.textContent = t, o.setAttribute("for", s), n ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
-      let h = r.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", r.appendChild(h)), h.textContent = i, n ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
+      let c = r.querySelector(".mint-choice-info");
+      i ? (c || (c = document.createElement("span"), c.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", r.appendChild(c)), c.textContent = i, n ? c.classList.add("opacity-40") : c.classList.remove("opacity-40")) : c && c.remove();
     } else r && r.remove();
     let a = this.querySelector(".mint-choice-options-wrapper");
     if (!a) {
@@ -2265,7 +2446,7 @@ class ee extends HTMLElement {
     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();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render();
   }
   disconnectedCallback() {
     this.removeEventListeners();
@@ -2391,9 +2572,9 @@ class ee extends HTMLElement {
   render() {
     var y, x, k, E;
     this.getType();
-    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), h = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), m = this.getRows(), d = this.getIcon(), f = this.getLabel(), u = this.getInfo(), p = this.isLoading();
-    if (this._renderSkeleton(p), 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 = (v) => {
+    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), c = this.getName(), h = this.getAttribute("value") || (s ? "#000000" : ""), d = this.getRows(), u = this.getIcon(), m = this.getLabel(), p = this.getInfo(), f = this.isLoading();
+    if (this._renderSkeleton(f), s) {
+      this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = h || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (v) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
           var C;
           this._colorPicker && this._colorPicker.matches(":focus-visible") && ((C = this._colorPickerWrapper) == null || C.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
@@ -2433,64 +2614,64 @@ class ee extends HTMLElement {
           cancelable: !0
         }));
       }));
-      const g = c || "#000000";
-      if (this._colorPicker && this._colorPicker.value !== g && (this._colorPicker.value = g), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this._colorTextInput && this._colorTextInput.value !== g && (this._colorTextInput.value = g), this._colorPicker && (this._colorPicker.disabled = r), this._colorPickerWrapper && (r ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = r, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
+      const _ = h || "#000000";
+      if (this._colorPicker && this._colorPicker.value !== _ && (this._colorPicker.value = _), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = _), this._colorTextInput && this._colorTextInput.value !== _ && (this._colorTextInput.value = _), this._colorPicker && (this._colorPicker.disabled = r), this._colorPickerWrapper && (r ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = r, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
         const v = this._colorTextInput;
-        o ? v.id = o : v.removeAttribute("id"), h ? v.name = h : v.removeAttribute("name"), v.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = v;
+        o ? v.id = o : v.removeAttribute("id"), c ? v.name = c : v.removeAttribute("name"), v.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = v;
       }
       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), 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._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._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 g = document.createElement("mint-icon");
-        g.setAttribute("name", "caret-up"), g.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(g), 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 _ = document.createElement("mint-icon");
+        _.setAttribute("name", "caret-up"), _.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(_), 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 v = document.createElement("mint-icon");
         v.setAttribute("name", "caret-down"), v.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(v), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (C) => {
           if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, T = this._input.max ? parseFloat(this._input.max) : void 0;
+            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, I = this._input.max ? parseFloat(this._input.max) : void 0;
             let L = A + D;
-            T !== void 0 && L > T && (L = T), 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 }));
+            I !== void 0 && L > I && (L = I), 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", (C) => {
           if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, T = this._input.max ? parseFloat(this._input.max) : void 0;
+            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, I = this._input.max ? parseFloat(this._input.max) : void 0;
             let L = A - D;
-            S !== void 0 && L < S && (L = S), T !== void 0 && L > T && (L = T), 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 }));
+            S !== void 0 && L < S && (L = S), I !== void 0 && L > I && (L = I), 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 = r || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = r || a);
     } else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
     if (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 = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = m, 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 g = this.firstChild.textContent;
-        g && !this._textarea.value && (this._textarea.value = g.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 = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = d, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), h !== this._textarea.value && (this._textarea.value = h), o ? this._textarea.id = o : this._textarea.removeAttribute("id"), c ? this._textarea.name = c : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+        const _ = this.firstChild.textContent;
+        _ && !this._textarea.value && (this._textarea.value = _.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 = n, this._input.disabled = r, 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 g = this.firstChild.textContent;
-      g && !this._input.value && (this._input.value = g.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 = n, this._input.disabled = r, 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")), h !== this._input.value && (this._input.value = h), o ? this._input.id = o : this._input.removeAttribute("id"), c ? this._input.name = c : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+      const _ = this.firstChild.textContent;
+      _ && !this._input.value && (this._input.value = _.trim()), this.removeChild(this.firstChild);
     }
-    let b = this.querySelector(".mint-input-label-container");
-    if (f || u) {
-      b || (b = document.createElement("div"), b.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(b, this._wrapper) : this.insertBefore(b, this.firstChild));
-      let g = b.querySelector(".mint-input-label");
-      if (f) {
-        g || (g = document.createElement("label"), g.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", b.insertBefore(g, b.firstChild)), g.textContent = f;
+    let g = this.querySelector(".mint-input-label-container");
+    if (m || p) {
+      g || (g = document.createElement("div"), g.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(g, this._wrapper) : this.insertBefore(g, this.firstChild));
+      let _ = g.querySelector(".mint-input-label");
+      if (m) {
+        _ || (_ = document.createElement("label"), _.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", g.insertBefore(_, g.firstChild)), _.textContent = m;
         const C = o || ((y = this._element) == null ? void 0 : y.id) || ((x = this._colorTextInput) == null ? void 0 : x.id) || ((k = this._input) == null ? void 0 : k.id) || ((E = this._textarea) == null ? void 0 : E.id);
         if (C)
-          g.setAttribute("for", C);
+          _.setAttribute("for", C);
         else {
           const A = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
-          this._element ? this._element.id = A : this._colorTextInput ? this._colorTextInput.id = A : this._input ? this._input.id = A : this._textarea && (this._textarea.id = A), g.setAttribute("for", A);
+          this._element ? this._element.id = A : this._colorTextInput ? this._colorTextInput.id = A : this._input ? this._input.id = A : this._textarea && (this._textarea.id = A), _.setAttribute("for", A);
         }
-        r ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
-      } else g && g.remove();
-      let v = b.querySelector(".mint-input-info");
-      u ? (v || (v = document.createElement("span"), v.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", b.appendChild(v)), v.textContent = u, r ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
-    } else b && b.remove();
-    this._renderErrorState(), this._renderSkeleton(p);
+        r ? _.classList.add("opacity-40") : _.classList.remove("opacity-40");
+      } else _ && _.remove();
+      let v = g.querySelector(".mint-input-info");
+      p ? (v || (v = document.createElement("span"), v.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", g.appendChild(v)), v.textContent = p, r ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
+    } else g && g.remove();
+    this._renderErrorState(), this._renderSkeleton(f);
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -2758,17 +2939,17 @@ class te extends HTMLElement {
       }), s.addEventListener("keydown", (a) => {
         a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e, n), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(e, n), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(e, n), a.preventDefault());
       }), s.addEventListener("blur", (a) => {
-        var h, c;
+        var c, h;
         this._syncHiddenInput();
         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(() => {
+        l && (this.contains(l) || (c = this._popover) != null && c.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((h = this._hiddenInput) == null ? void 0 : h.value) || ""), this._exitInputMode(), setTimeout(() => {
           if (this._hiddenInput) {
-            const m = new FocusEvent("blur", {
+            const d = new FocusEvent("blur", {
               bubbles: !0,
               cancelable: !0,
               relatedTarget: a.relatedTarget
             });
-            this._hiddenInput.dispatchEvent(m);
+            this._hiddenInput.dispatchEvent(d);
           }
         }, 0));
       });
@@ -2796,55 +2977,55 @@ class te extends HTMLElement {
   _parseDateString(e, t) {
     const i = /[\/\-\.\s]+/;
     if (i.test(e)) {
-      const p = e.split(i).filter((b) => b.length > 0), _ = t.split(/[\/\-\.\s]+/).filter((b) => b.length > 0);
-      if (p.length === _.length) {
-        let b = 0, y = 0, x = 0;
-        for (let k = 0; k < _.length; k++) {
-          const E = _[k].toLowerCase(), g = p[k];
+      const f = e.split(i).filter((g) => g.length > 0), b = t.split(/[\/\-\.\s]+/).filter((g) => g.length > 0);
+      if (f.length === b.length) {
+        let g = 0, y = 0, x = 0;
+        for (let k = 0; k < b.length; k++) {
+          const E = b[k].toLowerCase(), _ = f[k];
           if (E.includes("d"))
-            b = parseInt(g, 10);
+            g = parseInt(_, 10);
           else if (E.includes("m"))
-            y = parseInt(g, 10) - 1;
+            y = parseInt(_, 10) - 1;
           else if (E.includes("y")) {
-            let v = parseInt(g, 10);
-            const C = E.length, A = g.length;
+            let v = parseInt(_, 10);
+            const C = E.length, A = _.length;
             A === 2 && C === 4 ? v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v : A === 2 && C === 2 && (v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v), x = v;
           }
         }
-        if (b && y >= 0 && y <= 11 && x) {
-          const k = new Date(x, y, b);
-          if (!isNaN(k.getTime()) && k.getDate() === b && k.getMonth() === y && k.getFullYear() === x)
+        if (g && y >= 0 && y <= 11 && x) {
+          const k = new Date(x, y, g);
+          if (!isNaN(k.getTime()) && k.getDate() === g && k.getMonth() === y && k.getFullYear() === x)
             return k;
         }
       }
     }
     const n = e.replace(/[\/\-\.]/g, ""), r = t.replace(/[\/\-\.]/g, "").toLowerCase();
     let a = r.indexOf("d"), l = r.indexOf("m"), o = r.indexOf("y");
-    const h = [
+    const c = [
       { char: "d", index: a },
       { char: "m", index: l },
       { char: "y", index: o }
-    ].sort((p, _) => p.index - _.index);
-    let c = 0, m = 0, d = 0, f = 0;
+    ].sort((f, b) => f.index - b.index);
+    let h = 0, d = 0, u = 0, m = 0;
     r.length, n.length;
-    for (const p of h)
-      if (p.char === "d") {
-        const _ = r.lastIndexOf("d") - r.indexOf("d") + 1, b = n.substr(f, _);
-        if (b.length === 0) return null;
-        c = parseInt(b, 10), f += b.length;
-      } else if (p.char === "m") {
-        const _ = r.lastIndexOf("m") - r.indexOf("m") + 1, b = n.substr(f, _);
-        if (b.length === 0) return null;
-        m = parseInt(b, 10) - 1, f += b.length;
-      } else if (p.char === "y") {
-        const _ = r.lastIndexOf("y") - r.indexOf("y") + 1, b = n.substr(f), y = Math.min(_, b.length), x = b.substr(0, y);
+    for (const f of c)
+      if (f.char === "d") {
+        const b = r.lastIndexOf("d") - r.indexOf("d") + 1, g = n.substr(m, b);
+        if (g.length === 0) return null;
+        h = parseInt(g, 10), m += g.length;
+      } else if (f.char === "m") {
+        const b = r.lastIndexOf("m") - r.indexOf("m") + 1, g = n.substr(m, b);
+        if (g.length === 0) return null;
+        d = parseInt(g, 10) - 1, m += g.length;
+      } else if (f.char === "y") {
+        const b = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(m), y = Math.min(b, g.length), x = g.substr(0, y);
         if (x.length === 0) return null;
         let k = parseInt(x, 10);
-        y === 2 && _ === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : y === 2 && _ === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), d = k, f += y;
+        y === 2 && b === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : y === 2 && b === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), u = k, m += y;
       }
-    if (!c || m < 0 || m > 11 || !d) return null;
-    const u = new Date(d, m, c);
-    return isNaN(u.getTime()) || u.getDate() !== c || u.getMonth() !== m || u.getFullYear() !== d ? null : u;
+    if (!h || d < 0 || d > 11 || !u) return null;
+    const p = new Date(u, d, h);
+    return isNaN(p.getTime()) || p.getDate() !== h || p.getMonth() !== d || p.getFullYear() !== u ? null : p;
   }
   _formatDate(e, t) {
     const i = e.getDate(), s = e.getMonth() + 1, n = e.getFullYear(), r = t.toLowerCase();
@@ -2853,104 +3034,104 @@ class te extends HTMLElement {
   }
   // PHP-style formatter for display mode
   _formatDatePhp(e, t) {
-    const i = e.getDate(), s = e.getMonth() + 1, n = e.getFullYear(), r = ["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, u = d % 100;
-      return f === 1 && u !== 11 ? "st" : f === 2 && u !== 12 ? "nd" : f === 3 && u !== 13 ? "rd" : "th";
+    const i = e.getDate(), s = e.getMonth() + 1, n = e.getFullYear(), r = ["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"], c = (u, m = 2) => u.toString().padStart(m, "0"), h = (u) => {
+      const m = u % 10, p = u % 100;
+      return m === 1 && p !== 11 ? "st" : m === 2 && p !== 12 ? "nd" : m === 3 && p !== 13 ? "rd" : "th";
     };
-    let m = "";
-    for (let d = 0; d < t.length; d++) {
-      const f = t[d];
-      if (f === "\\" && d + 1 < t.length) {
-        m += t[d + 1], d++;
+    let d = "";
+    for (let u = 0; u < t.length; u++) {
+      const m = t[u];
+      if (m === "\\" && u + 1 < t.length) {
+        d += t[u + 1], u++;
         continue;
       }
-      switch (f) {
+      switch (m) {
         case "Y":
-          m += n.toString();
+          d += n.toString();
           break;
         case "y":
-          m += n.toString().slice(-2);
+          d += n.toString().slice(-2);
           break;
         case "m":
-          m += h(s);
+          d += c(s);
           break;
         case "n":
-          m += s.toString();
+          d += s.toString();
           break;
         case "M":
-          m += o[s - 1];
+          d += o[s - 1];
           break;
         case "F":
-          m += l[s - 1];
+          d += l[s - 1];
           break;
         case "d":
-          m += h(i);
+          d += c(i);
           break;
         case "j":
-          m += i.toString();
+          d += i.toString();
           break;
         case "D":
-          m += a[e.getDay()];
+          d += a[e.getDay()];
           break;
         case "l":
-          m += r[e.getDay()];
+          d += r[e.getDay()];
           break;
         case "S":
-          m += c(i);
+          d += h(i);
           break;
         default:
-          m += f;
+          d += m;
           break;
       }
     }
-    return m;
+    return d;
   }
   _validateDateString(e, t) {
     const i = this._parseDateString(e, t);
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), h = this.getFormat(), c = this.hasError(), m = this.getErrorMessage();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), c = this.getFormat(), h = this.hasError(), d = 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");
+    let u = this.querySelector(".mint-date-picker-label-container");
     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 y = d.querySelector(".mint-date-picker-label");
-      t ? (y || (y = document.createElement("label"), y.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", d.insertBefore(y, d.firstChild)), y.textContent = t, l && this._textInput && y.setAttribute("for", l)) : y && y.remove();
-      let x = d.querySelector(".mint-date-picker-info");
-      i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", d.appendChild(x)), x.textContent = i) : x && x.remove();
-    } else d && d.remove();
-    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), 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, m, n), f.innerHTML = "", this._displayEl = document.createElement("div");
-    const u = r ? "select-text" : "select-none";
-    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${u} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
+      u || (u = document.createElement("div"), u.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(u, this._input) : this.appendChild(u));
+      let y = u.querySelector(".mint-date-picker-label");
+      t ? (y || (y = document.createElement("label"), y.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", u.insertBefore(y, u.firstChild)), y.textContent = t, l && this._textInput && y.setAttribute("for", l)) : y && y.remove();
+      let x = u.querySelector(".mint-date-picker-info");
+      i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(x)), x.textContent = i) : x && x.remove();
+    } else u && u.remove();
+    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), l && (this._hiddenInput.id = l), o && (this._hiddenInput.name = o), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", h ? "true" : "false");
+    let m = this._input.querySelector(".mint-date-fields");
+    m || (m = document.createElement("div"), this._input.appendChild(m)), this._fieldsContainer = m, this._applyErrorVisuals(h, d, n), m.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 = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
       n || r || this._enterInputMode();
     }), this._displayEl.addEventListener("keydown", (y) => {
       n || r || (y.key === "Enter" || y.key === " ") && (y.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const p = this._getFormatTokens(h);
+    const f = this._getFormatTokens(c);
     this._startPartInputs = [], this._endPartInputs = [];
-    const _ = (y) => {
+    const b = (y) => {
       const x = document.createDocumentFragment();
-      return p.forEach((k) => {
+      return f.forEach((k) => {
         if (k.type === "sep") {
           const E = document.createElement("span");
           E.textContent = k.value, E.className = "text-gray-400 dark:text-gray-500 select-none", x.appendChild(E);
         } else {
-          const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", g = this._createPartInput(k.len, E, n, r, a);
-          y === "start" ? this._startPartInputs.push(g) : this._endPartInputs.push(g), x.appendChild(g);
+          const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", _ = this._createPartInput(k.len, E, n, r, a);
+          y === "start" ? this._startPartInputs.push(_) : this._endPartInputs.push(_), x.appendChild(_);
         }
       }), x;
     };
-    if (this._inputsWrapperEl.appendChild(_("start")), this._isRange) {
+    if (this._inputsWrapperEl.appendChild(b("start")), this._isRange) {
       const y = document.createElement("span");
-      y.textContent = " - ", y.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(y), this._inputsWrapperEl.appendChild(_("end"));
+      y.textContent = " - ", y.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(y), this._inputsWrapperEl.appendChild(b("end"));
     }
-    const b = document.createElement("div");
-    if (b.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", b.appendChild(this._displayEl), b.appendChild(this._inputsWrapperEl), f.appendChild(b), f.addEventListener("click", () => {
+    const g = document.createElement("div");
+    if (g.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", g.appendChild(this._displayEl), g.appendChild(this._inputsWrapperEl), m.appendChild(g), m.addEventListener("click", () => {
       this._isInputMode || n || r || this._enterInputMode();
-    }), this._attachPartInputHandlers(this._startPartInputs, p, f), this._isRange && this._attachPartInputHandlers(this._endPartInputs, p, f), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
+    }), this._attachPartInputHandlers(this._startPartInputs, f, m), this._isRange && this._attachPartInputHandlers(this._endPartInputs, f, m), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
       this._iconButton.disabled = n || r, !n && !r ? 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";
@@ -2961,7 +3142,7 @@ class te extends HTMLElement {
         n || r || this._enterInputMode();
       }), this._input.prepend(this._iconButton), this._iconButton.disabled = n || r;
     }
-    this._renderErrorState(c, m), this._renderSkeleton(e);
+    this._renderErrorState(h, d), this._renderSkeleton(e);
   }
   _renderErrorState(e, t) {
     let i = this.querySelector(".mint-date-picker-error");
@@ -3009,8 +3190,8 @@ class te extends HTMLElement {
     if (this._isRange) {
       const [i, s] = this._splitRangeInput(e, t), n = i ? this._parseDateString(i, t) : null, r = s ? this._parseDateString(s, t) : null;
       if (n && r) {
-        const [a, l] = n <= r ? [n, r] : [r, n], 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();
+        const [a, l] = n <= r ? [n, r] : [r, n], o = this._formatDate(a, t), c = this._formatDate(l, t), h = `${o} - ${c}`;
+        this.setValue(h), 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 (n) {
         const a = this._formatDate(n, t);
         this.setValue(a), this._applyDateToParts(n, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear();
@@ -3121,59 +3302,59 @@ class te extends HTMLElement {
     l.className = "flex-1 min-w-0";
     const o = document.createElement("div");
     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 c = document.createElement("mint-icon");
-    c.setAttribute("name", "caret-left"), c.className = "w-4 h-4", h.appendChild(c), h.addEventListener("click", () => {
+    const c = document.createElement("button");
+    c.type = "button", c.tabIndex = 0, c.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", c.setAttribute("data-keep-popover-open", "true");
+    const h = document.createElement("mint-icon");
+    h.setAttribute("name", "caret-left"), h.className = "w-4 h-4", c.appendChild(h), c.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
-    }), o.appendChild(h);
-    const m = document.createElement("div");
-    m.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", () => {
+    }), o.appendChild(c);
+    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", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), m.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", () => {
+    }), d.appendChild(u);
+    const m = document.createElement("button");
+    m.type = "button", m.tabIndex = 0, m.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", m.setAttribute("data-keep-popover-open", "true"), m.textContent = String(this._currentYear), m.addEventListener("click", () => {
       this._viewMode = "year", this._buildCalendar();
-    }), m.appendChild(f), o.appendChild(m);
-    const u = document.createElement("button");
-    u.type = "button", u.tabIndex = 0, u.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", u.setAttribute("data-keep-popover-open", "true");
-    const p = document.createElement("mint-icon");
-    p.setAttribute("name", "caret-right"), p.className = "w-4 h-4", u.appendChild(p), u.addEventListener("click", () => {
+    }), d.appendChild(m), o.appendChild(d);
+    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 f = document.createElement("mint-icon");
+    f.setAttribute("name", "caret-right"), f.className = "w-4 h-4", p.appendChild(f), p.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), o.appendChild(u);
-    const _ = document.createElement("div");
-    _.className = "grid grid-cols-7 mb-2", s.forEach((k) => {
+    }), o.appendChild(p);
+    const b = document.createElement("div");
+    b.className = "grid grid-cols-7 mb-2", s.forEach((k) => {
       const E = document.createElement("div");
-      E.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", E.textContent = k, _.appendChild(E);
+      E.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", E.textContent = k, b.appendChild(E);
     });
-    const b = document.createElement("div");
-    b.className = "grid grid-cols-7";
+    const g = document.createElement("div");
+    g.className = "grid grid-cols-7";
     for (let k = 0; k < t; k++) {
       const E = document.createElement("div");
-      E.className = "w-8 h-8", b.appendChild(E);
+      E.className = "w-8 h-8", g.appendChild(E);
     }
     const y = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, x = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
     for (let k = 1; k <= e; k++) {
-      const E = new Date(this._currentYear, this._currentMonth, k), g = this._isToday(E), v = this._isDateSelected(E), C = this._isDateInRange(E), A = y && E < y || x && E > x;
+      const E = new Date(this._currentYear, this._currentMonth, k), _ = this._isToday(E), v = this._isDateSelected(E), C = this._isDateInRange(E), A = y && E < y || x && E > x;
       let D = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const T = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
-        T && L ? D = "rounded-md" : T ? D = "rounded-l-md" : L ? D = "rounded-r-md" : C && (D = "rounded-none");
+        const I = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
+        I && L ? D = "rounded-md" : I ? D = "rounded-l-md" : L ? D = "rounded-r-md" : C && (D = "rounded-none");
       } else v && !this._isRange && (D = "rounded-md");
       const S = document.createElement("button");
-      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${D} 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 ${v ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : g ? "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"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = k.toString(), A || S.addEventListener("click", () => {
+      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${D} 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 ${v ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : _ ? "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"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = k.toString(), A || S.addEventListener("click", () => {
         this._handleDateClick(E);
-      }), b.appendChild(S);
+      }), g.appendChild(S);
     }
     if (r) {
       const k = document.createElement("div");
       k.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 E = document.createElement("div");
       E.className = "relative md:relative md:flex-1 md:min-h-0";
-      const g = document.createElement("div");
-      g.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", g.style.scrollbarWidth = "none", g.style.msOverflowStyle = "none", g.style.setProperty("-webkit-overflow-scrolling", "touch");
+      const _ = document.createElement("div");
+      _.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", _.style.scrollbarWidth = "none", _.style.msOverflowStyle = "none", _.style.setProperty("-webkit-overflow-scrolling", "touch");
       const v = document.createElement("style");
       v.textContent = `
         .mint-date-shortcuts-row::-webkit-scrollbar {
@@ -3199,7 +3380,7 @@ class te extends HTMLElement {
             background: rgba(255, 255, 255, 0.2);
           }
         }
-      `, g.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (v.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(v));
+      `, _.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (v.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(v));
       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", E.appendChild(C);
       const A = document.createElement("div");
@@ -3208,28 +3389,28 @@ class te extends HTMLElement {
       D.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", E.appendChild(D);
       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", E.appendChild(S);
-      const T = () => {
+      const I = () => {
         if (window.innerWidth >= 768) {
-          const H = g.scrollTop, I = g.scrollHeight, N = g.clientHeight;
-          H > 0 ? D.style.opacity = "1" : D.style.opacity = "0", H + N < I - 1 ? S.style.opacity = "1" : S.style.opacity = "0", C.style.opacity = "0", A.style.opacity = "0";
+          const H = _.scrollTop, T = _.scrollHeight, N = _.clientHeight;
+          H > 0 ? D.style.opacity = "1" : D.style.opacity = "0", H + N < T - 1 ? S.style.opacity = "1" : S.style.opacity = "0", C.style.opacity = "0", A.style.opacity = "0";
         } else {
-          const H = g.scrollLeft, I = g.scrollWidth, N = g.clientWidth;
-          H > 0 ? C.style.opacity = "1" : C.style.opacity = "0", H + N < I - 1 ? A.style.opacity = "1" : A.style.opacity = "0", D.style.opacity = "0", S.style.opacity = "0";
+          const H = _.scrollLeft, T = _.scrollWidth, N = _.clientWidth;
+          H > 0 ? C.style.opacity = "1" : C.style.opacity = "0", H + N < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", D.style.opacity = "0", S.style.opacity = "0";
         }
       };
-      g.addEventListener("scroll", T), window.addEventListener("resize", T), setTimeout(T, 0), n.forEach((L) => {
+      _.addEventListener("scroll", I), window.addEventListener("resize", I), setTimeout(I, 0), n.forEach((L) => {
         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 = L.label, H.setAttribute("data-keep-popover-open", "true"), H.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();
+          const T = L.action();
+          if (T) {
+            if (this._isRange && "start" in T && "end" in T) {
+              this._selectedStartDate = T.start, this._selectedEndDate = T.end;
+              const N = this.getFormat(), M = this._formatDate(T.start, N), F = this._formatDate(T.end, N), 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 N = this.getFormat(), M = this._formatDate(T, N);
+              this.setValue(M), this._currentMonth = T.getMonth(), this._currentYear = T.getFullYear();
             }
             this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
               detail: { value: this.getValue() },
@@ -3241,10 +3422,10 @@ class te extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), g.appendChild(H);
-      }), E.appendChild(g), k.appendChild(E), a.appendChild(k);
+        }), _.appendChild(H);
+      }), E.appendChild(_), k.appendChild(E), a.appendChild(k);
     }
-    l.appendChild(o), l.appendChild(_), l.appendChild(b), a.appendChild(l), this._calendarContainer.appendChild(a);
+    l.appendChild(o), l.appendChild(b), l.appendChild(g), a.appendChild(l), this._calendarContainer.appendChild(a);
   }
   _buildMonthView() {
     if (!this._calendarContainer) return;
@@ -3267,13 +3448,13 @@ class te extends HTMLElement {
       this._currentYear++, this._buildCalendar();
     }), t.appendChild(r);
     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 m = 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 ${m ? "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();
-      }), l.appendChild(c);
+    l.className = "grid grid-cols-3 gap-2", e.forEach((o, c) => {
+      const h = document.createElement("button");
+      h.type = "button", h.tabIndex = 0, h.setAttribute("data-keep-popover-open", "true");
+      const d = this._currentMonth === c;
+      h.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${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"}`, h.textContent = o, h.addEventListener("click", () => {
+        this._currentMonth = c, this._viewMode = "calendar", this._buildCalendar();
+      }), l.appendChild(h);
     }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(l);
   }
   _buildYearView() {
@@ -3296,13 +3477,13 @@ class te extends HTMLElement {
     }), i.appendChild(a);
     const o = document.createElement("div");
     o.className = "grid grid-cols-3 gap-2";
-    for (let h = e; h <= t; h++) {
-      const c = document.createElement("button");
-      c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
-      const m = 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 ${m ? "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();
-      }), o.appendChild(c);
+    for (let c = e; c <= t; c++) {
+      const h = document.createElement("button");
+      h.type = "button", h.tabIndex = 0, h.setAttribute("data-keep-popover-open", "true");
+      const d = this._currentYear === c;
+      h.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${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"}`, h.textContent = String(c), h.addEventListener("click", () => {
+        this._currentYear = c, this._viewMode = "calendar", this._buildCalendar();
+      }), o.appendChild(h);
     }
     this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(o);
   }
@@ -3541,45 +3722,45 @@ class ie extends HTMLElement {
   }
   render() {
     const e = this.isLoading(), t = [];
-    this._select && Array.from(this._select.children).forEach((d) => {
-      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && t.push(d.cloneNode(!0));
+    this._select && Array.from(this._select.children).forEach((u) => {
+      (u.tagName === "OPTION" || u.tagName === "OPTGROUP") && t.push(u.cloneNode(!0));
     });
-    const i = Array.from(this.children).filter((d) => d.tagName === "OPTION" || d.tagName === "OPTGROUP").map((d) => d.cloneNode(!0));
+    const i = Array.from(this.children).filter((u) => u.tagName === "OPTION" || u.tagName === "OPTGROUP").map((u) => u.cloneNode(!0));
     for (; this.firstChild; )
       this.removeChild(this.firstChild);
     this._wrapper = null, this._select = null;
-    const s = this.getLabel(), n = this.getInfo(), r = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), h = this.isMultiple(), c = this.hasError();
+    const s = this.getLabel(), n = this.getInfo(), r = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), c = this.isMultiple(), h = 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 f = document.createTextNode(s);
-      d.appendChild(f), this.appendChild(d);
+      const u = document.createElement("label");
+      u.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && u.setAttribute("for", r);
+      const m = document.createTextNode(s);
+      u.appendChild(m), this.appendChild(u);
     }
-    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), o && (this._select.disabled = !0), h && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", c ? "true" : "false");
-    const m = t.length > 0 ? t : i;
-    if (m.length > 0 && m.forEach((d) => {
-      this._select.appendChild(d);
+    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), o && (this._select.disabled = !0), c && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", h ? "true" : "false");
+    const d = t.length > 0 ? t : i;
+    if (d.length > 0 && d.forEach((u) => {
+      this._select.appendChild(u);
     }), 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);
+      const u = document.createElement("option");
+      u.value = "", u.textContent = "Select an option", u.disabled = !0, u.selected = !0, this._select.appendChild(u);
     }
-    if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
-      const u = d.target.value;
-      u ? this.setAttribute("value", u) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
-        detail: { value: u },
+    if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (u) => {
+      const p = u.target.value;
+      p ? this.setAttribute("value", p) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
+        detail: { value: p },
         bubbles: !0,
         cancelable: !0,
         composed: !0
       }));
-    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), h)
+    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), c)
       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);
+      const u = document.createElement("div");
+      u.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]", u.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]", u.appendChild(this._caretDownIcon), this._wrapper.appendChild(u);
     }
     if (n) {
-      const d = document.createElement("div");
-      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = n, this.appendChild(d);
+      const u = document.createElement("div");
+      u.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", u.textContent = n, this.appendChild(u);
     }
     this._renderErrorState(), this._renderSkeleton(e);
   }
@@ -3704,18 +3885,18 @@ class se extends HTMLElement {
     return this.hasAttribute("loading");
   }
   render() {
-    const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), l = this.getName(), o = this.hasError(), h = this.getErrorMessage();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), l = 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"), n ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", t || "File upload dropzone")), this._dropzone.style.width = r, this._dropzone.style.height = a, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = n, 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"), m = this._dropzone.querySelector(".mint-dropzone-label");
-    c && c.remove(), m && m.remove();
-    const d = document.createElement("div");
-    d.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
-    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 u = document.createElement("div");
-      u.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", u.textContent = t, this._dropzone.appendChild(u);
+    const h = this._dropzone.querySelector(".mint-dropzone-icon"), d = this._dropzone.querySelector(".mint-dropzone-label");
+    h && h.remove(), d && d.remove();
+    const u = document.createElement("div");
+    u.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
+    const m = document.createElement("mint-icon");
+    if (m.setAttribute("name", "upload"), m.className = "w-12 h-12 text-gray-400 dark:text-gray-500", u.appendChild(m), this._dropzone.appendChild(u), 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 = t, this._dropzone.appendChild(p);
     }
-    this.setupEventListeners(), this._renderErrorState(o, h), this._renderPreviews(), this._renderSkeleton(e);
+    this.setupEventListeners(), this._renderErrorState(o, c), this._renderPreviews(), this._renderSkeleton(e);
   }
   _updateDragState() {
     this._dropzone && this._updateDragStateClass();
@@ -3868,25 +4049,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((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 u = document.createElement("img");
-        u.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
-        const p = URL.createObjectURL(o);
-        this._previewUrls.push(p), u.src = p, c.appendChild(u);
+    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, c) => {
+      const h = document.createElement("div");
+      if (h.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", 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 f = URL.createObjectURL(o);
+        this._previewUrls.push(f), p.src = f, h.appendChild(p);
       } else {
-        const u = document.createElement("mint-icon");
-        u.setAttribute("name", "attach"), u.className = "w-5 h-5 text-gray-500 dark:text-gray-300", c.appendChild(u);
+        const p = document.createElement("mint-icon");
+        p.setAttribute("name", "attach"), p.className = "w-5 h-5 text-gray-500 dark:text-gray-300", h.appendChild(p);
       }
-      const m = document.createElement("div");
-      m.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", m.textContent = o.name, c.appendChild(m);
-      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", (u) => {
-        u.preventDefault(), u.stopPropagation(), this._removeFileAt(h);
-      }), c.appendChild(d), t.appendChild(c);
+      const d = document.createElement("div");
+      d.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", d.textContent = o.name, h.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 m = document.createElement("mint-icon");
+      m.setAttribute("name", "close"), m.className = "w-4 h-4", u.appendChild(m), u.addEventListener("click", (p) => {
+        p.preventDefault(), p.stopPropagation(), this._removeFileAt(c);
+      }), h.appendChild(u), t.appendChild(h);
     });
     const i = this.hasError(), s = this._isDragging;
     let n = "from-white dark:from-gray-700";
@@ -3896,8 +4077,8 @@ class se extends HTMLElement {
     const a = document.createElement("div");
     a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${n} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(a);
     const l = () => {
-      const o = t.scrollTop, h = t.scrollHeight, c = t.clientHeight;
-      o > 0 ? r.style.opacity = "1" : r.style.opacity = "0", o + c < h - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
+      const o = t.scrollTop, c = t.scrollHeight, h = t.clientHeight;
+      o > 0 ? r.style.opacity = "1" : r.style.opacity = "0", o + h < c - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
     };
     l(), t.addEventListener("scroll", l), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
   }
@@ -4074,99 +4255,99 @@ class re extends HTMLElement {
     }
   }
   async _submitData(e, t) {
-    var c, m, d;
+    var h, d, u;
     const i = this.getAttribute("action"), s = this.getAttribute("method"), n = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
     if (!i)
       return { status: 0, ok: !0, data: { values: t } };
-    const r = Array.from(e.values()).some((f) => f instanceof File);
+    const r = Array.from(e.values()).some((m) => m instanceof File);
     let a = null;
     const l = {};
     let o = i;
-    if (typeof window < "u" && ((d = (m = (c = window.mintForm) == null ? void 0 : c.defaults) == null ? void 0 : m.headers) != null && d.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
-      const f = new URLSearchParams();
-      e.forEach((u, p) => {
-        u instanceof File || f.append(p, String(u));
-      }), o += (i.includes("?") ? "&" : "?") + f.toString();
+    if (typeof window < "u" && ((u = (d = (h = window.mintForm) == null ? void 0 : h.defaults) == null ? void 0 : d.headers) != null && u.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
+      const m = new URLSearchParams();
+      e.forEach((p, f) => {
+        p instanceof File || m.append(f, String(p));
+      }), o += (i.includes("?") ? "&" : "?") + m.toString();
     } else if (n === "multipart/form-data" || r)
       a = e;
     else if (n === "application/json")
       a = JSON.stringify(t), l["Content-Type"] = "application/json";
     else {
-      const f = new URLSearchParams();
-      e.forEach((u, p) => {
-        u instanceof File || f.append(p, String(u));
-      }), a = f, l["Content-Type"] = "application/x-www-form-urlencoded";
+      const m = new URLSearchParams();
+      e.forEach((p, f) => {
+        p instanceof File || m.append(f, String(p));
+      }), a = m, l["Content-Type"] = "application/x-www-form-urlencoded";
     }
     if (typeof fetch == "function")
       try {
-        const f = await fetch(o, {
+        const m = await fetch(o, {
           method: s || "POST",
           body: s === "GET" ? null : a,
           headers: l
-        }), u = await f.text().catch(() => "");
-        let p = u;
+        }), p = await m.text().catch(() => "");
+        let f = p;
         try {
-          p = JSON.parse(u);
+          f = JSON.parse(p);
         } catch {
         }
-        if (!f.ok) {
-          const b = { status: f.status, data: p, response: { status: f.status, data: p } };
-          throw await this._applyErrorInterceptors(b);
+        if (!m.ok) {
+          const g = { status: m.status, data: f, response: { status: m.status, data: f } };
+          throw await this._applyErrorInterceptors(g);
         }
-        const _ = { status: f.status, ok: f.ok, data: p };
-        return await this._applySuccessInterceptors(_);
-      } catch (f) {
-        if (f.response)
-          throw f;
-        const u = {
-          status: f.status || 0,
-          data: f.data || f.message || "Network error",
-          response: { status: f.status || 0, data: f.data || f.message || "Network error" }
+        const b = { status: m.status, ok: m.ok, data: f };
+        return await this._applySuccessInterceptors(b);
+      } catch (m) {
+        if (m.response)
+          throw m;
+        const p = {
+          status: m.status || 0,
+          data: m.data || m.message || "Network error",
+          response: { status: m.status || 0, data: m.data || m.message || "Network error" }
         };
-        throw await this._applyErrorInterceptors(u);
+        throw await this._applyErrorInterceptors(p);
       }
-    const h = this;
-    return await new Promise(async (f, u) => {
-      const p = new XMLHttpRequest();
-      p.open(s || "POST", o, !0), Object.entries(l).forEach(([_, b]) => p.setRequestHeader(_, b)), p.onload = async function() {
-        const { status: _, responseText: b } = p;
-        if (_ >= 200 && _ < 300) {
-          let y = b;
+    const c = this;
+    return await new Promise(async (m, p) => {
+      const f = new XMLHttpRequest();
+      f.open(s || "POST", o, !0), Object.entries(l).forEach(([b, g]) => f.setRequestHeader(b, g)), f.onload = async function() {
+        const { status: b, responseText: g } = f;
+        if (b >= 200 && b < 300) {
+          let y = g;
           try {
-            y = JSON.parse(b);
+            y = JSON.parse(g);
           } catch {
           }
           try {
-            const x = { status: _, ok: !0, data: y }, k = await h._applySuccessInterceptors(x);
-            f(k);
+            const x = { status: b, ok: !0, data: y }, k = await c._applySuccessInterceptors(x);
+            m(k);
           } catch (x) {
-            u(x);
+            p(x);
           }
         } else {
-          let y = b;
+          let y = g;
           try {
-            y = JSON.parse(b);
+            y = JSON.parse(g);
           } catch {
           }
           try {
-            const x = { status: _, data: y, response: { status: _, data: y } }, k = await h._applyErrorInterceptors(x);
-            u(k);
+            const x = { status: b, data: y, response: { status: b, data: y } }, k = await c._applyErrorInterceptors(x);
+            p(k);
           } catch (x) {
-            u(x);
+            p(x);
           }
         }
-      }, p.onerror = async function() {
+      }, f.onerror = async function() {
         try {
-          const _ = {
-            status: p.status || 0,
-            data: p.responseText || "Network error",
-            response: { status: p.status || 0, data: p.responseText || "Network error" }
-          }, b = await h._applyErrorInterceptors(_);
-          u(b);
-        } catch (_) {
-          u(_);
+          const b = {
+            status: f.status || 0,
+            data: f.responseText || "Network error",
+            response: { status: f.status || 0, data: f.responseText || "Network error" }
+          }, g = await c._applyErrorInterceptors(b);
+          p(g);
+        } catch (b) {
+          p(b);
         }
-      }, p.send(s === "GET" ? null : a);
+      }, f.send(s === "GET" ? null : a);
     });
   }
   async _applySuccessInterceptors(e) {
@@ -4207,10 +4388,10 @@ class re extends HTMLElement {
         const l = r.files;
         if (l.length > 0) {
           const o = Array.from(l);
-          t[a] && Array.isArray(t[a]) ? o.forEach((h) => {
+          t[a] && Array.isArray(t[a]) ? o.forEach((c) => {
             t[a].some(
-              (m) => m.name === h.name && m.size === h.size && m.lastModified === h.lastModified
-            ) || t[a].push(h);
+              (d) => d.name === c.name && d.size === c.size && d.lastModified === c.lastModified
+            ) || t[a].push(c);
           }) : t[a] = o;
         }
       }
@@ -4220,7 +4401,7 @@ class re extends HTMLElement {
         const l = Array.from(r.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
+            (h) => h.name === o.name && h.size === o.size && h.lastModified === o.lastModified
           ) || t[a].push(o);
         }) : t[a] = l;
       }
@@ -4229,7 +4410,7 @@ class re extends HTMLElement {
       if (a) {
         let l = [];
         if (typeof r.tags < "u" ? l = r.tags : typeof r.getTags == "function" && (l = r.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() !== "");
+          const o = l.map((c) => typeof c == "string" ? c : (c == null ? void 0 : c.value) || (c == null ? void 0 : c.label) || "").filter((c) => c.trim() !== "");
           t[a] = o;
         } else
           t[a] = [];
@@ -4556,8 +4737,8 @@ class re extends HTMLElement {
       if (!n) return;
       const r = this._getFieldName(n);
       if (!r || !this._collectValidationRules()[r]) return;
-      const l = this._extractFieldValue([n]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), h = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), c = !!n.closest("mint-tags"), m = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), d = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
-      (o || h || c || m || d) && setTimeout(() => {
+      const l = this._extractFieldValue([n]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), c = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), h = !!n.closest("mint-tags"), d = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), u = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (o || c || h || d || u) && setTimeout(() => {
         this._validateField(r);
       }, 0);
     };
@@ -4566,38 +4747,38 @@ class re extends HTMLElement {
       const s = i.target;
       if (!s) return;
       if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
-        const h = s, c = this._getFieldName(h);
-        if (!c || !this._collectValidationRules()[c]) return;
+        const c = s, h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(c);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
-        const h = this._findFieldElement(s);
-        if (!h) return;
-        const c = this._getFieldName(h);
-        if (!c || !this._collectValidationRules()[c]) return;
+        const c = this._findFieldElement(s);
+        if (!c) return;
+        const h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(c);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
-        const h = s, c = this._getFieldName(h);
-        if (!c || !this._collectValidationRules()[c]) return;
+        const c = s, h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(c);
+          this._validateField(h);
         }, 0);
         return;
       }
       if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
-        const h = this._findFieldElement(s);
-        if (!h) return;
-        const c = this._getFieldName(h);
-        if (!c || !this._collectValidationRules()[c]) return;
+        const c = this._findFieldElement(s);
+        if (!c) return;
+        const h = this._getFieldName(c);
+        if (!h || !this._collectValidationRules()[h]) return;
         setTimeout(() => {
-          this._validateField(c);
+          this._validateField(h);
         }, 0);
         return;
       }
@@ -4787,11 +4968,7 @@ class ne extends HTMLElement {
       "align-baseline",
       "block",
       "w-full",
-      "overflow-x-auto",
-      "border",
-      "border-gray-200",
-      "rounded-lg",
-      "dark:border-gray-700"
+      "overflow-x-auto"
     ), this.hasAttribute("collapse") && !this.hasAttribute("scroll") && this._ensureResponsiveStyles(), this._observeChanges(), this._applyStyles(), requestAnimationFrame(() => {
       this._applyStyles(), setTimeout(() => this._applyStyles(), 0);
     });
@@ -4819,52 +4996,56 @@ class ne extends HTMLElement {
     const t = this.hasAttribute("collapse") && !this.hasAttribute("scroll"), i = this.hasAttribute("scroll");
     i ? this.classList.add("relative") : this.classList.remove("relative");
     const s = [], n = e.querySelector("thead tr");
-    n && n.querySelectorAll("th").forEach((h) => s.push((h.textContent || "").trim())), this._setClasses(e, [
+    n && n.querySelectorAll("th").forEach((c) => s.push((c.textContent || "").trim())), this._setClasses(e, [
       "w-full",
       i ? "min-w-[1200px]" : "",
       "border-collapse",
       "text-sm",
       "font-medium",
-      "rounded-lg",
-      "border-2",
-      "border-gray-200",
-      "dark:border-gray-700",
       "overflow-hidden"
     ]);
     const r = e.querySelector("thead");
-    r && (this._setClasses(r, [
-      "bg-[#F7F7F7]",
-      "dark:bg-gray-800"
-    ]), r.querySelectorAll("th").forEach((h) => {
-      this._setClasses(h, [
-        "text-left",
-        "font-semibold",
-        "text-gray-900",
-        "dark:text-white",
-        "px-3",
-        "py-2",
-        "border-b",
-        "border-gray-200",
-        "dark:border-gray-700"
+    if (r) {
+      this._setClasses(r, [
+        "bg-[#F7F7F7]",
+        "dark:bg-gray-800"
       ]);
-    }));
+      const o = r.querySelectorAll("th");
+      o.forEach((c, h) => {
+        const d = c.querySelector("mint-icon"), u = (d == null ? void 0 : d.getAttribute("name")) || "", m = d !== null && u !== "ellipsis";
+        this._setClasses(c, [
+          "text-left",
+          "font-semibold",
+          "text-gray-900",
+          "dark:text-white",
+          "px-3",
+          "py-2",
+          "border-b",
+          "border-gray-200",
+          "dark:border-gray-700"
+        ]), m && c.classList.add("cursor-pointer", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), h === 0 && c.classList.add("pl-6"), h === o.length - 1 && c.classList.add("pr-6");
+      });
+    }
     const a = e.querySelector("tbody");
     if (a) {
       const o = Array.from(a.querySelectorAll("tr"));
-      o.forEach((h, c) => {
-        this._setClasses(h, [
+      o.forEach((c, h) => {
+        const d = c.hasAttribute("data-row-clickable");
+        this._setClasses(c, [
           "bg-white",
           "dark:bg-gray-900",
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), c === o.length - 1 && h.classList.remove("border-b"), h.querySelectorAll("td").forEach((d) => {
-          this._setClasses(d, [
+        ]), d && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), h === o.length - 1 && c.classList.remove("border-b");
+        const u = c.querySelectorAll("td");
+        u.forEach((m, p) => {
+          this._setClasses(m, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), t ? this._applyMobileCell(d, s) : this._restoreCell(d);
+          ]), p === 0 && m.classList.add("pl-6"), p === u.length - 1 && m.classList.add("pr-6"), t ? this._applyMobileCell(m, s) : this._restoreCell(m);
         });
       });
     }
@@ -4873,8 +5054,8 @@ class ne extends HTMLElement {
       "bg-[#F7F7F7]",
       "dark:bg-gray-800",
       "font-semibold"
-    ]), l.querySelectorAll("td").forEach((h) => {
-      this._setClasses(h, [
+    ]), l.querySelectorAll("td").forEach((c) => {
+      this._setClasses(c, [
         "text-gray-900",
         "dark:text-gray-100",
         "px-3",
@@ -4882,22 +5063,34 @@ class ne extends HTMLElement {
         "border-t",
         "border-gray-200",
         "dark:border-gray-700"
-      ]), this._restoreCell(h);
+      ]), this._restoreCell(c);
     })), this._observer && this._observeChanges();
   }
   _applyMobileCell(e, t) {
     if (e.closest("tfoot") || e.dataset.mtProcessed === "true") return;
-    const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"), n = s !== null ? s : e.innerHTML;
-    e.setAttribute("data-original", n), e.dataset.mtProcessed = "true", e.innerHTML = "";
-    const r = document.createElement("span");
-    r.className = "mt-label font-semibold text-gray-700 dark:text-gray-200 hidden", r.textContent = i;
+    const i = t[e.cellIndex] || "", s = {};
+    Array.from(e.attributes).forEach((o) => {
+      o.name.startsWith("data-") && o.name !== "data-original" && o.name !== "data-mt-processed" && (s[o.name] = o.value);
+    });
+    const n = e.getAttribute("data-original"), r = n !== null ? n : e.innerHTML;
+    e.setAttribute("data-original", r), e.dataset.mtProcessed = "true", e.innerHTML = "";
     const a = document.createElement("span");
-    a.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", a.innerHTML = n, e.appendChild(r), e.appendChild(a);
+    a.className = "mt-label font-semibold text-gray-700 dark:text-gray-200 hidden", a.textContent = i;
+    const l = document.createElement("span");
+    l.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", l.innerHTML = r, e.appendChild(a), e.appendChild(l), Object.entries(s).forEach(([o, c]) => {
+      e.setAttribute(o, c);
+    });
   }
   _restoreCell(e) {
     if (e.dataset.mtProcessed !== "true") return;
-    const t = e.getAttribute("data-original") || "";
-    e.dataset.mtProcessed = "", e.innerHTML = t;
+    const t = {};
+    Array.from(e.attributes).forEach((s) => {
+      s.name.startsWith("data-") && s.name !== "data-original" && s.name !== "data-mt-processed" && (t[s.name] = s.value);
+    });
+    const i = e.getAttribute("data-original") || "";
+    e.dataset.mtProcessed = "", e.innerHTML = i, Object.entries(t).forEach(([s, n]) => {
+      e.setAttribute(s, n);
+    });
   }
   _setClasses(e, t) {
     e.className = "", t.filter(Boolean).forEach((i) => e.classList.add(...i.split(" ")));
@@ -5165,10 +5358,10 @@ class oe extends HTMLElement {
         "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", (h) => {
-        this.hasAttribute("sortable") && h.preventDefault();
-      }), this._chipsWrap.addEventListener("drop", (h) => {
-        this.hasAttribute("sortable") && h.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", (c) => {
+        this.hasAttribute("sortable") && c.preventDefault();
+      }), this._chipsWrap.addEventListener("drop", (c) => {
+        this.hasAttribute("sortable") && c.preventDefault();
       }), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
         "min-w-[6rem]",
         "flex-1",
@@ -5181,8 +5374,8 @@ class oe extends HTMLElement {
         "placeholder:text-gray-400",
         "dark:placeholder:text-gray-500",
         "p-1.5"
-      ].join(" "), this._input.addEventListener("keydown", (h) => {
-        h.key === "Enter" && (h.preventDefault(), this._addFromInput());
+      ].join(" "), this._input.addEventListener("keydown", (c) => {
+        c.key === "Enter" && (c.preventDefault(), this._addFromInput());
       }), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
     }
     if (this._container) {