monobill-mintui 0.3.13 → 0.3.14

package/dist/index.js

@@ -146,10 +146,10 @@ class O extends HTMLElement {
     }
     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") || ((d = this.parentElement) == null ? void 0 : d.closest("mint-select"));
     if (!Array.from(this.classList).some(
-      (u) => u.startsWith("w-") || u.startsWith("h-")
+      (p) => p.startsWith("w-") || p.startsWith("h-")
     ) && !n) {
-      let u;
-      s ? u = "w-3 h-3" : i ? u = "w-5 h-5" : u = "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"), u.split(" ").forEach((h) => {
+      let p;
+      s ? p = "w-3 h-3" : i ? p = "w-5 h-5" : p = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), p.split(" ").forEach((h) => {
         h && this.classList.add(h);
       });
     }
@@ -713,7 +713,7 @@ class B extends HTMLElement {
     return this.isFullWidth() && l.push("w-full"), l.join(" ");
   }
   render() {
-    var c, d, u, h, m;
+    var c, d, p, h, m;
     const t = this.isDisabled() || this.isLoading(), e = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -726,10 +726,10 @@ class B 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 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);
+        const f = document.createElement("span");
+        f.className = "mr-2 inline-flex items-center";
+        const u = document.createElement("mint-spinner");
+        u.setAttribute("size", "default"), u.setAttribute("data-button-variant", this.getVariant()), u.setAttribute("data-button-tone", this.getTone()), u.style.width = "0.875rem", u.style.height = "0.875rem", f.appendChild(u), this._button.insertBefore(f, this._button.firstChild);
       }
     else i && ((c = i.parentElement) == null || c.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
@@ -740,34 +740,34 @@ class B extends HTMLElement {
     const r = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const p = n && n.tagName === "MINT-ICON";
+      const f = n && n.tagName === "MINT-ICON";
       if (n && !n.parentElement) {
-        const f = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.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) {
+        const u = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
+        f || r === "left" ? u ? u.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a) : a.insertAdjacentElement("afterend", n);
+      } else if (n && (f || r === "left") && n.nextSibling !== a) {
         n.remove();
-        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));
+        const u = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
+        u ? u.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a);
+      } else n && !f && r === "right" && n.previousSibling !== a && (n.remove(), a.insertAdjacentElement("afterend", n));
     } else {
-      const p = [];
-      for (let f = this._button.firstChild; f; f = f.nextSibling) {
-        if (f.nodeType !== Node.ELEMENT_NODE) {
-          p.push(f);
+      const f = [];
+      for (let u = this._button.firstChild; u; u = u.nextSibling) {
+        if (u.nodeType !== Node.ELEMENT_NODE) {
+          f.push(u);
           continue;
         }
-        const _ = f;
-        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && f !== n && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && p.push(f);
+        const _ = u;
+        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && u !== n && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && f.push(u);
       }
-      if (p.length > 0) {
-        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", p.forEach((_) => {
+      if (f.length > 0) {
+        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", f.forEach((_) => {
           a.appendChild(_);
         });
-        const f = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.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);
+        const u = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        n && r === "left" ? u ? (u.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(n, this._button.firstChild), n.insertAdjacentElement("afterend", a)) : n && r === "right" ? u ? (u.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", n)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", n)) : u ? u.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
       } else if (n && n.tagName === "MINT-ICON" && !n.parentElement) {
-        const f = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
-        f ? f.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, this._button.firstChild);
+        const u = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
+        u ? u.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, this._button.firstChild);
       }
     }
     const l = this.isIconOnly();
@@ -956,8 +956,8 @@ class z extends HTMLElement {
       let m = h.querySelector("mint-icon");
       m || (m = document.createElement("mint-icon"), h.appendChild(m)), m.setAttribute("name", r);
     } else d && d.remove();
-    let u = this.querySelector(".mint-switch-info");
-    n ? (u || (u = document.createElement("span"), u.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(u, l.nextSibling) : this.appendChild(u)), u.textContent = n, this.isDisabled() ? u.classList.add("opacity-40") : u.classList.remove("opacity-40")) : u && u.remove(), this._renderErrorState(), this._renderSkeleton(t);
+    let p = this.querySelector(".mint-switch-info");
+    n ? (p || (p = document.createElement("span"), p.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(p, l.nextSibling) : this.appendChild(p)), p.textContent = n, this.isDisabled() ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove(), this._renderErrorState(), this._renderSkeleton(t);
   }
   setupEventListeners() {
     this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
@@ -1969,23 +1969,23 @@ class X extends HTMLElement {
     }, r.addEventListener("click", c._wrapperClickHandler));
     let d = r.querySelector("mint-icon");
     d || (d = document.createElement("mint-icon"), d.setAttribute("name", "check"), d.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", d.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", d.style.zIndex = "1", r.appendChild(d)), this.updateVisualState();
-    let u = this.querySelector(".mint-checkbox-label-container");
+    let p = this.querySelector(".mint-checkbox-label-container");
     const h = this.querySelector(".mint-checkbox-container");
     if (e || i) {
-      u ? h && u.parentElement !== h && h.appendChild(u) : (u = document.createElement("div"), u.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", h ? h.appendChild(u) : this.appendChild(u));
-      let m = u.querySelector(".mint-checkbox-label");
-      e ? (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", u.insertBefore(m, u.firstChild)), m.textContent = e, s ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
-      let p = u.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", u.appendChild(p)), p.textContent = i, s ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove(), s)
-        u.style.cursor = "default", u._clickHandler && (u.removeEventListener("click", u._clickHandler), u._clickHandler = null);
+      p ? h && p.parentElement !== h && h.appendChild(p) : (p = document.createElement("div"), p.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", h ? h.appendChild(p) : this.appendChild(p));
+      let m = p.querySelector(".mint-checkbox-label");
+      e ? (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", p.insertBefore(m, p.firstChild)), m.textContent = e, s ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
+      let f = p.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", p.appendChild(f)), f.textContent = i, s ? f.classList.add("opacity-40") : f.classList.remove("opacity-40")) : f && f.remove(), s)
+        p.style.cursor = "default", p._clickHandler && (p.removeEventListener("click", p._clickHandler), p._clickHandler = null);
       else {
-        u.style.cursor = "pointer";
-        const f = u._clickHandler;
-        f && u.removeEventListener("click", f), u._clickHandler = (_) => {
+        p.style.cursor = "pointer";
+        const u = p._clickHandler;
+        u && p.removeEventListener("click", u), p._clickHandler = (_) => {
           this._checkbox && (_.target === this._checkbox || this._checkbox.contains(_.target) || _.composedPath().includes(this._checkbox)) || this.toggle();
-        }, u.addEventListener("click", u._clickHandler);
+        }, p.addEventListener("click", p._clickHandler);
       }
-    } else u && u.remove();
+    } else p && p.remove();
     this._renderErrorState(), this._renderSkeleton(t);
   }
   setupEventListeners() {
@@ -2136,31 +2136,31 @@ class Z extends HTMLElement {
     const t = this.isLoading(), e = 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 = ((m = a.textContent) == null ? void 0 : m.trim()) || "" : Array.from(this.childNodes).forEach((p) => {
-      var f;
-      if (p.nodeType === Node.TEXT_NODE) {
-        const _ = (f = p.textContent) == null ? void 0 : f.trim();
+    a ? r = ((m = a.textContent) == null ? void 0 : m.trim()) || "" : Array.from(this.childNodes).forEach((f) => {
+      var u;
+      if (f.nodeType === Node.TEXT_NODE) {
+        const _ = (u = f.textContent) == null ? void 0 : u.trim();
         _ && (r += _);
       }
     });
     const l = this.querySelectorAll(".mint-choice-option-wrapper");
     let o = null;
-    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();
+    if (l.length > 0 && (this._radio && (o = Array.from(l).find((f) => f.contains(this._radio))), o || (o = l[0]), l.forEach((f, u) => {
+      f !== o && f.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((f) => {
+      f !== this._radio && f.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 = (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._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 = (f) => {
+        const u = this.querySelector(".mint-choice-option-wrapper");
+        u && !this.isDisabled() && u.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }), this._blurHandler || (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._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()));
+        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._keydownHandler || (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.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 = (f) => {
+      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 = (u) => {
         const _ = this._checked;
         this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
         const g = this.closest("mint-choice");
@@ -2172,28 +2172,28 @@ class Z extends HTMLElement {
           }));
         }, 0);
       }, this._radio.addEventListener("change", this._changeHandler);
-      const p = () => {
+      const f = () => {
         this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState());
       };
-      this._radio.addEventListener("click", p), this._focusHandler = (f) => {
+      this._radio.addEventListener("click", f), this._focusHandler = (u) => {
         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("focus", this._focusHandler), this._blurHandler = () => {
-        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()));
+        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._radio.addEventListener("blur", this._blurHandler), 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()));
       }, 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 = e, e ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((p, f) => {
-      f > 0 && p.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 = e, e ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((f, u) => {
+      u > 0 && f.remove();
     });
-    let u = o.querySelector(".mint-choice-option-indicator");
-    u || (u = document.createElement("div"), u.className = "mint-choice-option-indicator", o.appendChild(u)), u.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", u.style.position = "absolute", u.style.top = "50%", u.style.left = "50%", u.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", u.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(t);
+    let p = o.querySelector(".mint-choice-option-indicator");
+    p || (p = document.createElement("div"), p.className = "mint-choice-option-indicator", o.appendChild(p)), p.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", p.style.position = "absolute", p.style.top = "50%", p.style.left = "50%", p.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", p.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(t);
     let h = this.querySelector(".mint-choice-option-label");
-    r && (h || (h = document.createElement("span"), h.className = "mint-choice-option-label", this.appendChild(h), Array.from(this.childNodes).forEach((p) => {
-      var f;
-      p.nodeType === Node.TEXT_NODE && ((f = p.textContent) != null && f.trim()) && (p.textContent = "");
+    r && (h || (h = document.createElement("span"), h.className = "mint-choice-option-label", this.appendChild(h), Array.from(this.childNodes).forEach((f) => {
+      var u;
+      f.nodeType === Node.TEXT_NODE && ((u = f.textContent) != null && u.trim()) && (f.textContent = "");
     })), h.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, h.textContent = r), e ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
   }
   _getWrapperClasses() {
@@ -2570,10 +2570,10 @@ class tt extends HTMLElement {
     return this.hasAttribute("loading");
   }
   render() {
-    var b, x, k, E;
+    var b, k, x, E;
     this.getType();
-    const t = this._getNormalizedType(), e = 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(), d = this.getAttribute("value") || (s ? "#000000" : ""), u = this.getRows(), h = this.getIcon(), m = this.getLabel(), p = this.getInfo(), f = this.isLoading();
-    if (this._renderSkeleton(f), s) {
+    const t = this._getNormalizedType(), e = 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(), d = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), h = this.getIcon(), m = this.getLabel(), f = this.getInfo(), u = this.isLoading();
+    if (this._renderSkeleton(u), s) {
       this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = d || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (v) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
           var w;
@@ -2645,7 +2645,7 @@ class tt extends HTMLElement {
       this._numberIncrementButton && (this._numberIncrementButton.disabled = r || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = r || a);
     } else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
     if (e) {
-      if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = u, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), d !== this._textarea.value && (this._textarea.value = d), 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) {
+      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 = p, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), d !== this._textarea.value && (this._textarea.value = d), 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 y = this.firstChild.textContent;
         y && !this._textarea.value && (this._textarea.value = y.trim()), this.removeChild(this.firstChild);
       }
@@ -2654,12 +2654,12 @@ class tt extends HTMLElement {
       y && !this._input.value && (this._input.value = y.trim()), this.removeChild(this.firstChild);
     }
     let g = this.querySelector(".mint-input-label-container");
-    if (m || p) {
+    if (m || f) {
       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 y = g.querySelector(".mint-input-label");
       if (m) {
         y || (y = document.createElement("label"), y.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", g.insertBefore(y, g.firstChild)), y.textContent = m;
-        const w = o || ((b = this._element) == null ? void 0 : b.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);
+        const w = o || ((b = this._element) == null ? void 0 : b.id) || ((k = this._colorTextInput) == null ? void 0 : k.id) || ((x = this._input) == null ? void 0 : x.id) || ((E = this._textarea) == null ? void 0 : E.id);
         if (w)
           y.setAttribute("for", w);
         else {
@@ -2669,9 +2669,9 @@ class tt extends HTMLElement {
         r ? y.classList.add("opacity-40") : y.classList.remove("opacity-40");
       } else y && y.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();
+      f ? (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 = f, r ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
     } else g && g.remove();
-    this._renderErrorState(), this._renderSkeleton(f);
+    this._renderErrorState(), this._renderSkeleton(u);
   }
   _renderErrorState() {
     const t = this.hasError(), e = this.getErrorMessage();
@@ -2944,12 +2944,12 @@ class et extends HTMLElement {
         const l = a.relatedTarget;
         l && (this.contains(l) || (c = this._popover) != null && c.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((d = this._hiddenInput) == null ? void 0 : d.value) || ""), this._exitInputMode(), setTimeout(() => {
           if (this._hiddenInput) {
-            const u = new FocusEvent("blur", {
+            const p = new FocusEvent("blur", {
               bubbles: !0,
               cancelable: !0,
               relatedTarget: a.relatedTarget
             });
-            this._hiddenInput.dispatchEvent(u);
+            this._hiddenInput.dispatchEvent(p);
           }
         }, 0));
       });
@@ -2977,11 +2977,11 @@ class et extends HTMLElement {
   _parseDateString(t, e) {
     const i = /[\/\-\.\s]+/;
     if (i.test(t)) {
-      const f = t.split(i).filter((g) => g.length > 0), _ = e.split(/[\/\-\.\s]+/).filter((g) => g.length > 0);
-      if (f.length === _.length) {
-        let g = 0, b = 0, x = 0;
-        for (let k = 0; k < _.length; k++) {
-          const E = _[k].toLowerCase(), y = f[k];
+      const u = t.split(i).filter((g) => g.length > 0), _ = e.split(/[\/\-\.\s]+/).filter((g) => g.length > 0);
+      if (u.length === _.length) {
+        let g = 0, b = 0, k = 0;
+        for (let x = 0; x < _.length; x++) {
+          const E = _[x].toLowerCase(), y = u[x];
           if (E.includes("d"))
             g = parseInt(y, 10);
           else if (E.includes("m"))
@@ -2989,13 +2989,13 @@ class et extends HTMLElement {
           else if (E.includes("y")) {
             let v = parseInt(y, 10);
             const w = E.length, A = y.length;
-            A === 2 && w === 4 ? v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v : A === 2 && w === 2 && (v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v), x = v;
+            A === 2 && w === 4 ? v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v : A === 2 && w === 2 && (v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v), k = v;
           }
         }
-        if (g && b >= 0 && b <= 11 && x) {
-          const k = new Date(x, b, g);
-          if (!isNaN(k.getTime()) && k.getDate() === g && k.getMonth() === b && k.getFullYear() === x)
-            return k;
+        if (g && b >= 0 && b <= 11 && k) {
+          const x = new Date(k, b, g);
+          if (!isNaN(x.getTime()) && x.getDate() === g && x.getMonth() === b && x.getFullYear() === k)
+            return x;
         }
       }
     }
@@ -3005,27 +3005,27 @@ class et extends HTMLElement {
       { char: "d", index: a },
       { char: "m", index: l },
       { char: "y", index: o }
-    ].sort((f, _) => f.index - _.index);
-    let d = 0, u = 0, h = 0, m = 0;
+    ].sort((u, _) => u.index - _.index);
+    let d = 0, p = 0, h = 0, m = 0;
     r.length, n.length;
-    for (const f of c)
-      if (f.char === "d") {
+    for (const u of c)
+      if (u.char === "d") {
         const _ = r.lastIndexOf("d") - r.indexOf("d") + 1, g = n.substr(m, _);
         if (g.length === 0) return null;
         d = parseInt(g, 10), m += g.length;
-      } else if (f.char === "m") {
+      } else if (u.char === "m") {
         const _ = r.lastIndexOf("m") - r.indexOf("m") + 1, g = n.substr(m, _);
         if (g.length === 0) return null;
-        u = parseInt(g, 10) - 1, m += g.length;
-      } else if (f.char === "y") {
-        const _ = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(m), b = Math.min(_, g.length), x = g.substr(0, b);
-        if (x.length === 0) return null;
-        let k = parseInt(x, 10);
-        b === 2 && _ === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : b === 2 && _ === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), h = k, m += b;
+        p = parseInt(g, 10) - 1, m += g.length;
+      } else if (u.char === "y") {
+        const _ = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(m), b = Math.min(_, g.length), k = g.substr(0, b);
+        if (k.length === 0) return null;
+        let x = parseInt(k, 10);
+        b === 2 && _ === 4 ? x = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + x : b === 2 && _ === 2 && (x = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + x), h = x, m += b;
       }
-    if (!d || u < 0 || u > 11 || !h) return null;
-    const p = new Date(h, u, d);
-    return isNaN(p.getTime()) || p.getDate() !== d || p.getMonth() !== u || p.getFullYear() !== h ? null : p;
+    if (!d || p < 0 || p > 11 || !h) return null;
+    const f = new Date(h, p, d);
+    return isNaN(f.getTime()) || f.getDate() !== d || f.getMonth() !== p || f.getFullYear() !== h ? null : f;
   }
   _formatDate(t, e) {
     const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = e.toLowerCase();
@@ -3035,94 +3035,94 @@ class et extends HTMLElement {
   // PHP-style formatter for display mode
   _formatDatePhp(t, e) {
     const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 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 = (h, m = 2) => h.toString().padStart(m, "0"), d = (h) => {
-      const m = h % 10, p = h % 100;
-      return m === 1 && p !== 11 ? "st" : m === 2 && p !== 12 ? "nd" : m === 3 && p !== 13 ? "rd" : "th";
+      const m = h % 10, f = h % 100;
+      return m === 1 && f !== 11 ? "st" : m === 2 && f !== 12 ? "nd" : m === 3 && f !== 13 ? "rd" : "th";
     };
-    let u = "";
+    let p = "";
     for (let h = 0; h < e.length; h++) {
       const m = e[h];
       if (m === "\\" && h + 1 < e.length) {
-        u += e[h + 1], h++;
+        p += e[h + 1], h++;
         continue;
       }
       switch (m) {
         case "Y":
-          u += n.toString();
+          p += n.toString();
           break;
         case "y":
-          u += n.toString().slice(-2);
+          p += n.toString().slice(-2);
           break;
         case "m":
-          u += c(s);
+          p += c(s);
           break;
         case "n":
-          u += s.toString();
+          p += s.toString();
           break;
         case "M":
-          u += o[s - 1];
+          p += o[s - 1];
           break;
         case "F":
-          u += l[s - 1];
+          p += l[s - 1];
           break;
         case "d":
-          u += c(i);
+          p += c(i);
           break;
         case "j":
-          u += i.toString();
+          p += i.toString();
           break;
         case "D":
-          u += a[t.getDay()];
+          p += a[t.getDay()];
           break;
         case "l":
-          u += r[t.getDay()];
+          p += r[t.getDay()];
           break;
         case "S":
-          u += d(i);
+          p += d(i);
           break;
         default:
-          u += m;
+          p += m;
           break;
       }
     }
-    return u;
+    return p;
   }
   _validateDateString(t, e) {
     const i = this._parseDateString(t, e);
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const t = this.isLoading(), e = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), c = this.getFormat(), d = this.hasError(), u = this.getErrorMessage();
+    const t = this.isLoading(), e = 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(), d = this.hasError(), p = this.getErrorMessage();
     this._isRange = this.isRange(), this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
     let h = this.querySelector(".mint-date-picker-label-container");
     if (e || i) {
       h || (h = document.createElement("div"), h.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(h, this._input) : this.appendChild(h));
       let b = h.querySelector(".mint-date-picker-label");
       e ? (b || (b = document.createElement("label"), b.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", h.insertBefore(b, h.firstChild)), b.textContent = e, l && this._textInput && b.setAttribute("for", l)) : b && b.remove();
-      let x = h.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", h.appendChild(x)), x.textContent = i) : x && x.remove();
+      let k = h.querySelector(".mint-date-picker-info");
+      i ? (k || (k = document.createElement("span"), k.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", h.appendChild(k)), k.textContent = i) : k && k.remove();
     } else h && h.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", d ? "true" : "false");
     let m = this._input.querySelector(".mint-date-fields");
-    m || (m = document.createElement("div"), this._input.appendChild(m)), this._fieldsContainer = m, this._applyErrorVisuals(d, u, 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", () => {
+    m || (m = document.createElement("div"), this._input.appendChild(m)), this._fieldsContainer = m, this._applyErrorVisuals(d, p, n), m.innerHTML = "", this._displayEl = document.createElement("div");
+    const f = r ? "select-text" : "select-none";
+    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${f} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
       n || r || this._enterInputMode();
     }), this._displayEl.addEventListener("keydown", (b) => {
       n || r || (b.key === "Enter" || b.key === " ") && (b.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const f = this._getFormatTokens(c);
+    const u = this._getFormatTokens(c);
     this._startPartInputs = [], this._endPartInputs = [];
     const _ = (b) => {
-      const x = document.createDocumentFragment();
-      return f.forEach((k) => {
-        if (k.type === "sep") {
+      const k = document.createDocumentFragment();
+      return u.forEach((x) => {
+        if (x.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);
+          E.textContent = x.value, E.className = "text-gray-400 dark:text-gray-500 select-none", k.appendChild(E);
         } else {
-          const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", y = this._createPartInput(k.len, E, n, r, a);
-          b === "start" ? this._startPartInputs.push(y) : this._endPartInputs.push(y), x.appendChild(y);
+          const E = x.part === "d" ? "dd" : x.part === "m" ? "mm" : x.len === 2 ? "yy" : "yyyy", y = this._createPartInput(x.len, E, n, r, a);
+          b === "start" ? this._startPartInputs.push(y) : this._endPartInputs.push(y), k.appendChild(y);
         }
-      }), x;
+      }), k;
     };
     if (this._inputsWrapperEl.appendChild(_("start")), this._isRange) {
       const b = document.createElement("span");
@@ -3131,18 +3131,18 @@ class et extends HTMLElement {
     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, f, m), this._isRange && this._attachPartInputHandlers(this._endPartInputs, f, m), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
+    }), this._attachPartInputHandlers(this._startPartInputs, u, m), this._isRange && this._attachPartInputHandlers(this._endPartInputs, u, 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";
       const b = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
       this._iconButton.id = b;
-      const x = document.createElement("mint-icon");
-      x.setAttribute("name", "calendar"), x.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(x), this._iconButton.addEventListener("click", () => {
+      const k = document.createElement("mint-icon");
+      k.setAttribute("name", "calendar"), k.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(k), this._iconButton.addEventListener("click", () => {
         n || r || this._enterInputMode();
       }), this._input.prepend(this._iconButton), this._iconButton.disabled = n || r;
     }
-    this._renderErrorState(d, u), this._renderSkeleton(t);
+    this._renderErrorState(d, p), this._renderSkeleton(t);
   }
   _renderErrorState(t, e) {
     let i = this.querySelector(".mint-date-picker-error");
@@ -3308,49 +3308,49 @@ class et extends HTMLElement {
     d.setAttribute("name", "caret-left"), d.className = "w-4 h-4", c.appendChild(d), c.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
     }), o.appendChild(c);
-    const u = document.createElement("div");
-    u.className = "flex items-center gap-2";
+    const p = document.createElement("div");
+    p.className = "flex items-center gap-2";
     const h = document.createElement("button");
     h.type = "button", h.tabIndex = 0, h.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", h.setAttribute("data-keep-popover-open", "true"), h.textContent = i[this._currentMonth], h.addEventListener("click", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), u.appendChild(h);
+    }), p.appendChild(h);
     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();
-    }), u.appendChild(m), o.appendChild(u);
-    const p = document.createElement("button");
-    p.type = "button", p.tabIndex = 0, p.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", p.setAttribute("data-keep-popover-open", "true");
-    const f = document.createElement("mint-icon");
-    f.setAttribute("name", "caret-right"), f.className = "w-4 h-4", p.appendChild(f), p.addEventListener("click", () => {
+    }), p.appendChild(m), o.appendChild(p);
+    const f = document.createElement("button");
+    f.type = "button", f.tabIndex = 0, f.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", f.setAttribute("data-keep-popover-open", "true");
+    const u = document.createElement("mint-icon");
+    u.setAttribute("name", "caret-right"), u.className = "w-4 h-4", f.appendChild(u), f.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), o.appendChild(p);
+    }), o.appendChild(f);
     const _ = document.createElement("div");
-    _.className = "grid grid-cols-7 mb-2", s.forEach((k) => {
+    _.className = "grid grid-cols-7 mb-2", s.forEach((x) => {
       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 = x, _.appendChild(E);
     });
     const g = document.createElement("div");
     g.className = "grid grid-cols-7";
-    for (let k = 0; k < e; k++) {
+    for (let x = 0; x < e; x++) {
       const E = document.createElement("div");
       E.className = "w-8 h-8", g.appendChild(E);
     }
-    const b = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, x = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
-    for (let k = 1; k <= t; k++) {
-      const E = new Date(this._currentYear, this._currentMonth, k), y = this._isToday(E), v = this._isDateSelected(E), w = this._isDateInRange(E), A = b && E < b || x && E > x;
+    const b = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, k = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
+    for (let x = 1; x <= t; x++) {
+      const E = new Date(this._currentYear, this._currentMonth, x), y = this._isToday(E), v = this._isDateSelected(E), w = this._isDateInRange(E), A = b && E < b || k && E > k;
       let I = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
         const H = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
         H && L ? I = "rounded-md" : H ? I = "rounded-l-md" : L ? I = "rounded-r-md" : w && (I = "rounded-none");
       } else v && !this._isRange && (I = "rounded-md");
       const S = document.createElement("button");
-      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${I} 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" : w ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : y ? "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 ${I} 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" : w ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : y ? "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 = x.toString(), A || S.addEventListener("click", () => {
         this._handleDateClick(E);
       }), 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 x = document.createElement("div");
+      x.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 y = document.createElement("div");
@@ -3423,7 +3423,7 @@ class et extends HTMLElement {
             }));
           }
         }), y.appendChild(D);
-      }), E.appendChild(y), k.appendChild(E), a.appendChild(k);
+      }), E.appendChild(y), x.appendChild(E), a.appendChild(x);
     }
     l.appendChild(o), l.appendChild(_), l.appendChild(g), a.appendChild(l), this._calendarContainer.appendChild(a);
   }
@@ -3451,8 +3451,8 @@ class et extends HTMLElement {
     l.className = "grid grid-cols-3 gap-2", t.forEach((o, c) => {
       const d = document.createElement("button");
       d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
-      const u = this._currentMonth === c;
-      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${u ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = o, d.addEventListener("click", () => {
+      const p = this._currentMonth === c;
+      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = o, d.addEventListener("click", () => {
         this._currentMonth = c, this._viewMode = "calendar", this._buildCalendar();
       }), l.appendChild(d);
     }), this._calendarContainer.appendChild(e), this._calendarContainer.appendChild(l);
@@ -3480,8 +3480,8 @@ class et extends HTMLElement {
     for (let c = t; c <= e; c++) {
       const d = document.createElement("button");
       d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
-      const u = this._currentYear === c;
-      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${u ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = String(c), d.addEventListener("click", () => {
+      const p = this._currentYear === c;
+      d.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${p ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, d.textContent = String(c), d.addEventListener("click", () => {
         this._currentYear = c, this._viewMode = "calendar", this._buildCalendar();
       }), o.appendChild(d);
     }
@@ -3737,17 +3737,17 @@ class it extends HTMLElement {
       h.appendChild(m), this.appendChild(h);
     }
     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", d ? "true" : "false");
-    const u = e.length > 0 ? e : i;
-    if (u.length > 0 && u.forEach((h) => {
+    const p = e.length > 0 ? e : i;
+    if (p.length > 0 && p.forEach((h) => {
       this._select.appendChild(h);
     }), this._select.options.length === 0) {
       const h = document.createElement("option");
       h.value = "", h.textContent = "Select an option", h.disabled = !0, h.selected = !0, this._select.appendChild(h);
     }
     if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
-      const p = h.target.value;
-      p ? this.setAttribute("value", p) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
-        detail: { value: p },
+      const f = h.target.value;
+      f ? this.setAttribute("value", f) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
+        detail: { value: f },
         bubbles: !0,
         cancelable: !0,
         composed: !0
@@ -3887,14 +3887,14 @@ class st extends HTMLElement {
   render() {
     const t = this.isLoading(), e = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), 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", e || "File upload dropzone")), this._dropzone.style.width = r, this._dropzone.style.height = a, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = n, l ? this._fileInput.name = l : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
-    const d = this._dropzone.querySelector(".mint-dropzone-icon"), u = this._dropzone.querySelector(".mint-dropzone-label");
-    d && d.remove(), u && u.remove();
+    const d = this._dropzone.querySelector(".mint-dropzone-icon"), p = this._dropzone.querySelector(".mint-dropzone-label");
+    d && d.remove(), p && p.remove();
     const h = document.createElement("div");
     h.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
     const m = document.createElement("mint-icon");
     if (m.setAttribute("name", "upload"), m.className = "w-12 h-12 text-gray-400 dark:text-gray-500", h.appendChild(m), this._dropzone.appendChild(h), e) {
-      const p = document.createElement("div");
-      p.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", p.textContent = e, this._dropzone.appendChild(p);
+      const f = document.createElement("div");
+      f.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", f.textContent = e, this._dropzone.appendChild(f);
     }
     this.setupEventListeners(), this._renderErrorState(o, c), this._renderPreviews(), this._renderSkeleton(t);
   }
@@ -4052,21 +4052,21 @@ class st extends HTMLElement {
     e.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o, c) => {
       const d = document.createElement("div");
       if (d.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", 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, d.appendChild(p);
+        const f = document.createElement("img");
+        f.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+        const u = URL.createObjectURL(o);
+        this._previewUrls.push(u), f.src = u, d.appendChild(f);
       } else {
-        const p = document.createElement("mint-icon");
-        p.setAttribute("name", "attach"), p.className = "w-5 h-5 text-gray-500 dark:text-gray-300", d.appendChild(p);
+        const f = document.createElement("mint-icon");
+        f.setAttribute("name", "attach"), f.className = "w-5 h-5 text-gray-500 dark:text-gray-300", d.appendChild(f);
       }
-      const u = document.createElement("div");
-      u.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", u.textContent = o.name, d.appendChild(u);
+      const p = document.createElement("div");
+      p.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", p.textContent = o.name, d.appendChild(p);
       const h = document.createElement("button");
       h.type = "button", h.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
       const m = document.createElement("mint-icon");
-      m.setAttribute("name", "close"), m.className = "w-4 h-4", h.appendChild(m), h.addEventListener("click", (p) => {
-        p.preventDefault(), p.stopPropagation(), this._removeFileAt(c);
+      m.setAttribute("name", "close"), m.className = "w-4 h-4", h.appendChild(m), h.addEventListener("click", (f) => {
+        f.preventDefault(), f.stopPropagation(), this._removeFileAt(c);
       }), d.appendChild(h), e.appendChild(d);
     });
     const i = this.hasError(), s = this._isDragging;
@@ -4255,7 +4255,7 @@ class rt extends HTMLElement {
     }
   }
   async _submitData(t, e) {
-    var d, u, h;
+    var d, p, h;
     const i = this.getAttribute("action"), s = this.getAttribute("method"), n = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
     if (!i)
       return { status: 0, ok: !0, data: { values: e } };
@@ -4263,10 +4263,10 @@ class rt extends HTMLElement {
     let a = null;
     const l = {};
     let o = i;
-    if (typeof window < "u" && ((h = (u = (d = window.mintForm) == null ? void 0 : d.defaults) == null ? void 0 : u.headers) != null && h.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
+    if (typeof window < "u" && ((h = (p = (d = window.mintForm) == null ? void 0 : d.defaults) == null ? void 0 : p.headers) != null && h.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
       const m = new URLSearchParams();
-      t.forEach((p, f) => {
-        p instanceof File || m.append(f, String(p));
+      t.forEach((f, u) => {
+        f instanceof File || m.append(u, String(f));
       }), o += (i.includes("?") ? "&" : "?") + m.toString();
     } else if (n === "multipart/form-data" || r)
       a = t;
@@ -4274,8 +4274,8 @@ class rt extends HTMLElement {
       a = JSON.stringify(e), l["Content-Type"] = "application/json";
     else {
       const m = new URLSearchParams();
-      t.forEach((p, f) => {
-        p instanceof File || m.append(f, String(p));
+      t.forEach((f, u) => {
+        f instanceof File || m.append(u, String(f));
       }), a = m, l["Content-Type"] = "application/x-www-form-urlencoded";
     }
     if (typeof fetch == "function")
@@ -4284,33 +4284,33 @@ class rt extends HTMLElement {
           method: s || "POST",
           body: s === "GET" ? null : a,
           headers: l
-        }), p = await m.text().catch(() => "");
-        let f = p;
+        }), f = await m.text().catch(() => "");
+        let u = f;
         try {
-          f = JSON.parse(p);
+          u = JSON.parse(f);
         } catch {
         }
         if (!m.ok) {
-          const g = { status: m.status, data: f, response: { status: m.status, data: f } };
+          const g = { status: m.status, data: u, response: { status: m.status, data: u } };
           throw await this._applyErrorInterceptors(g);
         }
-        const _ = { status: m.status, ok: m.ok, data: f };
+        const _ = { status: m.status, ok: m.ok, data: u };
         return await this._applySuccessInterceptors(_);
       } catch (m) {
         if (m.response)
           throw m;
-        const p = {
+        const f = {
           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(p);
+        throw await this._applyErrorInterceptors(f);
       }
     const c = this;
-    return await new Promise(async (m, p) => {
-      const f = new XMLHttpRequest();
-      f.open(s || "POST", o, !0), Object.entries(l).forEach(([_, g]) => f.setRequestHeader(_, g)), f.onload = async function() {
-        const { status: _, responseText: g } = f;
+    return await new Promise(async (m, f) => {
+      const u = new XMLHttpRequest();
+      u.open(s || "POST", o, !0), Object.entries(l).forEach(([_, g]) => u.setRequestHeader(_, g)), u.onload = async function() {
+        const { status: _, responseText: g } = u;
         if (_ >= 200 && _ < 300) {
           let b = g;
           try {
@@ -4318,10 +4318,10 @@ class rt extends HTMLElement {
           } catch {
           }
           try {
-            const x = { status: _, ok: !0, data: b }, k = await c._applySuccessInterceptors(x);
-            m(k);
-          } catch (x) {
-            p(x);
+            const k = { status: _, ok: !0, data: b }, x = await c._applySuccessInterceptors(k);
+            m(x);
+          } catch (k) {
+            f(k);
           }
         } else {
           let b = g;
@@ -4330,24 +4330,24 @@ class rt extends HTMLElement {
           } catch {
           }
           try {
-            const x = { status: _, data: b, response: { status: _, data: b } }, k = await c._applyErrorInterceptors(x);
-            p(k);
-          } catch (x) {
-            p(x);
+            const k = { status: _, data: b, response: { status: _, data: b } }, x = await c._applyErrorInterceptors(k);
+            f(x);
+          } catch (k) {
+            f(k);
           }
         }
-      }, f.onerror = async function() {
+      }, u.onerror = async function() {
         try {
           const _ = {
-            status: f.status || 0,
-            data: f.responseText || "Network error",
-            response: { status: f.status || 0, data: f.responseText || "Network error" }
+            status: u.status || 0,
+            data: u.responseText || "Network error",
+            response: { status: u.status || 0, data: u.responseText || "Network error" }
           }, g = await c._applyErrorInterceptors(_);
-          p(g);
+          f(g);
         } catch (_) {
-          p(_);
+          f(_);
         }
-      }, f.send(s === "GET" ? null : a);
+      }, u.send(s === "GET" ? null : a);
     });
   }
   async _applySuccessInterceptors(t) {
@@ -4390,7 +4390,7 @@ class rt extends HTMLElement {
           const o = Array.from(l);
           e[a] && Array.isArray(e[a]) ? o.forEach((c) => {
             e[a].some(
-              (u) => u.name === c.name && u.size === c.size && u.lastModified === c.lastModified
+              (p) => p.name === c.name && p.size === c.size && p.lastModified === c.lastModified
             ) || e[a].push(c);
           }) : e[a] = o;
         }
@@ -4737,8 +4737,8 @@ class rt 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), c = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), d = !!n.closest("mint-tags"), u = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), h = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
-      (o || c || d || u || h) && 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]")), d = !!n.closest("mint-tags"), p = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), h = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (o || c || d || p || h) && setTimeout(() => {
         this._validateField(r);
       }, 0);
     };
@@ -5012,7 +5012,7 @@ class nt extends HTMLElement {
       ]);
       const o = r.querySelectorAll("th");
       o.forEach((c, d) => {
-        const u = c.querySelector("mint-icon"), h = (u == null ? void 0 : u.getAttribute("name")) || "", m = u !== null && h !== "ellipsis";
+        const p = c.querySelector("mint-icon"), h = (p == null ? void 0 : p.getAttribute("name")) || "", m = p !== null && h !== "ellipsis";
         this._setClasses(c, [
           "text-left",
           "font-semibold",
@@ -5030,22 +5030,22 @@ class nt extends HTMLElement {
     if (a) {
       const o = Array.from(a.querySelectorAll("tr"));
       o.forEach((c, d) => {
-        const u = c.hasAttribute("data-row-clickable");
+        const p = c.hasAttribute("data-row-clickable");
         this._setClasses(c, [
           "bg-white",
           "dark:bg-gray-900",
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), u && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), d === o.length - 1 && c.classList.remove("border-b");
+        ]), p && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), d === o.length - 1 && c.classList.remove("border-b");
         const h = c.querySelectorAll("td");
-        h.forEach((m, p) => {
+        h.forEach((m, f) => {
           this._setClasses(m, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), p === 0 && m.classList.add("pl-6"), p === h.length - 1 && m.classList.add("pr-6"), e ? this._applyMobileCell(m, s) : this._restoreCell(m);
+          ]), f === 0 && m.classList.add("pl-6"), f === h.length - 1 && m.classList.add("pr-6"), e ? this._applyMobileCell(m, s) : this._restoreCell(m);
         });
       });
     }
@@ -5812,7 +5812,7 @@ class ht extends HTMLElement {
     }), this._configuration.sortBy || (this._configuration.sortBy = "id"), this._configuration.sort || (this._configuration.sort = "asc"));
   }
   async _fetchData(t, e = !0, i, s) {
-    var l, o, c, d, u, h, m, p;
+    var l, o, c, d, p, h, m, f;
     if (!this._configuration) return;
     const n = t || (typeof this._configuration.data == "string" ? this._configuration.data : null);
     if (!n || this._fetching || this._loading)
@@ -5820,7 +5820,7 @@ class ht extends HTMLElement {
     e && (this._fetching = !0, this.render()), this._loading = !0;
     const r = i || this._perPage, a = s !== void 0 ? s : this._offset;
     try {
-      const f = new URLSearchParams({
+      const u = new URLSearchParams({
         perPage: r.toString(),
         offset: a.toString(),
         search: this._search,
@@ -5830,20 +5830,20 @@ class ht extends HTMLElement {
         columns: this._columns.join(",")
       }), _ = {};
       this._configuration.headers && (_.headers = this._configuration.headers);
-      const g = await fetch(`${n}?${f.toString()}`, _);
+      const g = await fetch(`${n}?${u.toString()}`, _);
       if (!g.ok)
         throw new Error(`HTTP error! status: ${g.status}`);
-      const b = await g.json(), x = ((l = b.content) == null ? void 0 : l.rows) || [], k = ((o = b.content) == null ? void 0 : o.total) || 0;
+      const b = await g.json(), k = ((l = b.content) == null ? void 0 : l.rows) || [], x = ((o = b.content) == null ? void 0 : o.total) || 0;
       if (this._configuration.loadMore && a !== 0)
-        this._rows = this._rows.concat(x);
+        this._rows = this._rows.concat(k);
       else {
-        let v = x;
-        this._configuration.predefinedData ? (v = [...this._configuration.predefinedData, ...x], this._totalRows = k + this._configuration.predefinedData.length) : this._totalRows = k, this._rows = v;
+        let v = k;
+        this._configuration.predefinedData ? (v = [...this._configuration.predefinedData, ...k], this._totalRows = x + this._configuration.predefinedData.length) : this._totalRows = x, this._rows = v;
       }
       const E = Math.floor(a / r) + 1;
-      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === E ? this._currentPage = b.content.current_page : this._currentPage = E, this._offset = (this._currentPage - 1) * r), this._lastPage = ((d = b.content) == null ? void 0 : d.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1, this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), ((h = (u = this.querySelector(`#${this._tableId}`)) == null ? void 0 : u.closest("table")) == null ? void 0 : h.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
-    } catch (f) {
-      this._fetching = !1, this._loading = !1, this._loaded = !0, this._searching = !1, this._fetchError = f instanceof Error ? f.message : "Failed to fetch data", console.error("mint-resource-table: Error fetching data", f), this._updateSearchIcon(), ((p = (m = this.querySelector(`#${this._tableId}`)) == null ? void 0 : m.closest("table")) == null ? void 0 : p.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
+      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === E ? this._currentPage = b.content.current_page : this._currentPage = E, this._offset = (this._currentPage - 1) * r), this._lastPage = ((d = b.content) == null ? void 0 : d.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1, this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), ((h = (p = this.querySelector(`#${this._tableId}`)) == null ? void 0 : p.closest("table")) == null ? void 0 : h.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
+    } catch (u) {
+      this._fetching = !1, this._loading = !1, this._loaded = !0, this._searching = !1, this._fetchError = u instanceof Error ? u.message : "Failed to fetch data", console.error("mint-resource-table: Error fetching data", u), this._updateSearchIcon(), ((f = (m = this.querySelector(`#${this._tableId}`)) == null ? void 0 : m.closest("table")) == null ? void 0 : f.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
     }
   }
   _getRows() {
@@ -5874,8 +5874,8 @@ class ht extends HTMLElement {
         const h = c.getTime() - d.getTime();
         return i === "asc" ? h : -h;
       }
-      const u = String(r).localeCompare(String(a), void 0, { numeric: !0, sensitivity: "base" });
-      return i === "asc" ? u : -u;
+      const p = String(r).localeCompare(String(a), void 0, { numeric: !0, sensitivity: "base" });
+      return i === "asc" ? p : -p;
     }), this._perPage) {
       const s = Math.ceil(t.length / this._perPage);
       this._lastPage = s, t.forEach((n, r) => {
@@ -5948,50 +5948,50 @@ class ht extends HTMLElement {
     const i = this.querySelector(`#search-${this._tableId}`), s = document.activeElement === i || (i == null ? void 0 : i.querySelector("input")) === document.activeElement, n = this._search;
     let r = "";
     if (!(this._fetching || this._loading) && (t.forEach((o, c) => {
-      const d = typeof this._configuration.onRowClick == "function", u = d ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
-      r += `<tr data-row-index="${c}" ${d ? 'data-row-clickable="true"' : ""}${u ? ` class="${u}"` : ""}>`, this._configuration.columns.forEach((h, m) => {
+      const d = typeof this._configuration.onRowClick == "function", p = d ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
+      r += `<tr data-row-index="${c}" ${d ? 'data-row-clickable="true"' : ""}${p ? ` class="${p}"` : ""}>`, this._configuration.columns.forEach((h, m) => {
         if (h.hidden) return;
-        const p = !h.show || h.show(this, o);
-        if (r += `<td style="${this._getStyle(h)}" class="${this._getClasses(h, !0)}">`, p)
+        const f = !h.show || h.show(this, o);
+        if (r += `<td style="${this._getStyle(h)}" class="${this._getClasses(h, !0)}">`, f)
           if (h.raw)
             if (h.action)
-              (!h.action.show || h.action.show(this, o)) && (r += `<mint-button variant="default" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${h.action.label}</mint-button>`);
+              (!h.action.show || h.action.show(this, o)) && (r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${h.action.label}</mint-button>`);
             else if (h.actions)
               if (h.actionStyle !== "buttons") {
-                const f = `actions-popover-${this._tableId}-${c}`, _ = `actions-button-${this._tableId}-${c}`;
-                r += `<mint-button id="${_}" variant="link" class="text-muted">`, r += '<mint-icon name="ellipsis"></mint-icon>', r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${_}" direction="down">`, h.actions.forEach((g, b) => {
+                const u = `actions-popover-${this._tableId}-${c}`, _ = `actions-button-${this._tableId}-${c}`;
+                r += `<mint-button id="${_}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${u}" trigger-id="${_}" direction="down">`, h.actions.forEach((g, b) => {
                   if (!g.show || g.show(this, o)) {
-                    const x = typeof g.label == "function" ? g.label(this, o) : g.label;
-                    r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${x}</div>`;
+                    const k = typeof g.label == "function" ? g.label(this, o) : g.label;
+                    r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${k}</div>`;
                   }
                 }), r += "</mint-popover>";
               } else
-                h.actions.forEach((f, _) => {
-                  if (!f.show || f.show(this, o)) {
-                    const g = typeof f.label == "function" ? f.label(this, o) : f.label;
-                    r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${_}" data-column-key="${this._configuration.columns.indexOf(h)}">${g}</mint-button>`;
+                h.actions.forEach((u, _) => {
+                  if (!u.show || u.show(this, o)) {
+                    const g = u.label ? typeof u.label == "function" ? u.label(this, o) : u.label : "", b = u.icon ? ` icon="${this._escapeHtml(u.icon)}"` : "", k = u.tone ? ` tone="${this._escapeHtml(u.tone)}"` : "";
+                    r += `<mint-button variant="link" class="${u.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${_}" data-column-key="${this._configuration.columns.indexOf(h)}"${b}${k}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
                   }
                 });
             else typeof h.format == "function" ? r += h.format(this, o) : h.data && (r += this._escapeHtml(String(o[h.data] || "")));
           else if (h.action) {
             if (!h.action.show || h.action.show(this, o)) {
-              const f = typeof h.action.label == "function" ? h.action.label(this, o) : h.action.label;
-              r += `<mint-button variant="default" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${this._escapeHtml(String(f))}</mint-button>`;
+              const u = typeof h.action.label == "function" ? h.action.label(this, o) : h.action.label;
+              r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(h)}">${this._escapeHtml(String(u))}</mint-button>`;
             }
           } else if (h.actions)
             if (h.actionStyle !== "buttons") {
-              const f = `actions-popover-${this._tableId}-${c}`, _ = `actions-button-${this._tableId}-${c}`;
-              r += `<mint-button id="${_}" variant="link" class="text-muted">`, r += '<mint-icon name="ellipsis"></mint-icon>', r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${_}" direction="down">`, h.actions.forEach((g, b) => {
+              const u = `actions-popover-${this._tableId}-${c}`, _ = `actions-button-${this._tableId}-${c}`;
+              r += `<mint-button id="${_}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${u}" trigger-id="${_}" direction="down">`, h.actions.forEach((g, b) => {
                 if (!g.show || g.show(this, o)) {
-                  const x = typeof g.label == "function" ? g.label(this, o) : g.label;
-                  r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${x}</div>`;
+                  const k = typeof g.label == "function" ? g.label(this, o) : g.label;
+                  r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(h)}">${k}</div>`;
                 }
               }), r += "</mint-popover>";
             } else
-              h.actions.forEach((f, _) => {
-                if (!f.show || f.show(this, o)) {
-                  const g = typeof f.label == "function" ? f.label(this, o) : f.label;
-                  r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${_}" data-column-key="${this._configuration.columns.indexOf(h)}">${g}</mint-button>`;
+              h.actions.forEach((u, _) => {
+                if (!u.show || u.show(this, o)) {
+                  const g = u.label ? typeof u.label == "function" ? u.label(this, o) : u.label : "", b = u.icon ? ` icon="${this._escapeHtml(u.icon)}"` : "", k = u.tone ? ` tone="${this._escapeHtml(u.tone)}"` : "";
+                  r += `<mint-button variant="link" class="${u.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${_}" data-column-key="${this._configuration.columns.indexOf(h)}"${b}${k}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
                 }
               });
           else typeof h.format == "function" ? r += this._escapeHtml(h.format(this, o)) : h.data && (r += this._escapeHtml(String(o[h.data] || "")));
@@ -6025,17 +6025,17 @@ class ht extends HTMLElement {
       e = document.createElement("div"), e.className = "flex justify-end " + (this._inMintCard ? "p-3.5" : "mt-4"), r.insertAdjacentElement("afterend", e);
     }
     let i = "<nav>";
-    i += '<ul class="flex gap-1">', i += `<li><mint-button variant="default" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
+    i += '<ul class="flex gap-1">', i += `<li><mint-button variant="solid" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
     for (let r = 1; r <= Math.min(2, t); r++) {
       const l = this._currentPage === r ? ' disabled="true"' : "";
-      i += `<li><mint-button variant="default" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
+      i += `<li><mint-button variant="solid" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
     }
-    if (t > 2 && (i += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < t - 1 && (i += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, i += `<li><mint-button variant="default" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, i += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), t > 2)
+    if (t > 2 && (i += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < t - 1 && (i += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, i += `<li><mint-button variant="solid" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, i += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), t > 2)
       for (let r = Math.max(t - 1, this._currentPage + 2); r <= t; r++) {
         const l = this._currentPage === r ? ' disabled="true"' : "";
-        i += `<li><mint-button variant="default" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
+        i += `<li><mint-button variant="solid" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
       }
-    i += `<li><mint-button variant="default" size="sm" icon="caret-right" ${this._currentPage >= t ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, i += "</ul>", i += "</nav>", e.innerHTML = i, setTimeout(() => {
+    i += `<li><mint-button variant="solid" size="sm" icon="caret-right" ${this._currentPage >= t ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, i += "</ul>", i += "</nav>", e.innerHTML = i, setTimeout(() => {
       this._attachPaginationListeners(), e.querySelectorAll("mint-button[data-action]").forEach((r) => {
         "render" in r && typeof r.render == "function" && r.render();
       });
@@ -6099,8 +6099,8 @@ class ht extends HTMLElement {
     return (t.nowrap || t.actions) && (e += "white-space: nowrap;"), t.offsetLeft && (e += `left: ${t.offsetLeft} !important;`), t.offsetRight && (e += `right: ${t.offsetRight} !important;`), t.width && (e += `min-width: ${t.width}px; max-width: ${t.width}px;`), e;
   }
   _getClasses(t, e = !1) {
-    let i = t.class || "";
-    return t.sortable && !e && (i += " cursor-pointer"), t.stickLeft && (i += " sticky-left"), t.stickRight && (i += " sticky-right"), i.trim();
+    const i = [];
+    return t.class && i.push(t.class.trim()), t.sortable && !e && i.push("cursor-pointer"), t.stickLeft && i.push("sticky-left"), t.stickRight && i.push("sticky-right"), i.join(" ");
   }
   render() {
     if (!this._configuration) {
@@ -6115,11 +6115,11 @@ class ht extends HTMLElement {
         s += `<mint-input id="${r}" type="search" label="" placeholder="Search..." class="flex-1" icon="search" value="${this._escapeHtml(this._search)}"></mint-input>`;
       }
       if (this._configuration.buttons && this._configuration.buttons.forEach((r) => {
-        const a = r.icon ? ` icon="${this._escapeHtml(r.icon)}"` : "";
-        s += `<mint-button variant="default" class="${r.class || ""}" data-button-type="${r.type || "custom"}"${a}>`, r.label && (s += this._escapeHtml(r.label)), s += "</mint-button>";
+        const a = r.icon ? ` icon="${this._escapeHtml(r.icon)}"` : "", l = r.tone ? ` tone="${this._escapeHtml(r.tone)}"` : "";
+        s += `<mint-button variant="solid" class="${r.class || ""}" data-button-type="${r.type || "custom"}"${a}${l}>`, r.label && (s += this._escapeHtml(r.label)), s += "</mint-button>";
       }), s += "</div>", s += "</div>", this._configuration.editColumns !== !1) {
         const r = `edit-columns-popover-${this._tableId}`, a = `edit-columns-button-${this._tableId}`;
-        s += '<div class="ml-2">', s += `<mint-button id="${a}" variant="default" icon="edit"></mint-button>`, s += `<mint-popover id="${r}" trigger-id="${a}" direction="down">`, this._configuration.columns.forEach((l) => {
+        s += '<div class="ml-2">', s += `<mint-button id="${a}" variant="solid" icon="edit"></mint-button>`, s += `<mint-popover id="${r}" trigger-id="${a}" direction="down">`, this._configuration.columns.forEach((l) => {
           !l.actions && l.editable !== !1 && (s += '<div class="p-2">', s += `<mint-checkbox label="${l.label}" ${l.hidden ? "" : "checked"} data-column-key="${this._configuration.columns.indexOf(l)}"></mint-checkbox>`, s += "</div>");
         }), s += "</mint-popover>", s += "</div>";
       }
@@ -6135,17 +6135,17 @@ class ht extends HTMLElement {
         else if (i > 1 || this._lastPage > 0) {
           const r = this._lastPage > 0 ? this._lastPage : i;
           if (r > 1) {
-            s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="default" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
+            s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="solid" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
             for (let a = 1; a <= Math.min(2, r); a++) {
               const o = this._currentPage === a ? ' disabled="true"' : "";
-              s += `<li><mint-button variant="default" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
+              s += `<li><mint-button variant="solid" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
             }
-            if (r > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < r - 1 && (s += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="default" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), r > 2)
+            if (r > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < r - 1 && (s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), r > 2)
               for (let a = Math.max(r - 1, this._currentPage + 2); a <= r; a++) {
                 const o = this._currentPage === a ? ' disabled="true"' : "";
-                s += `<li><mint-button variant="default" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
+                s += `<li><mint-button variant="solid" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
               }
-            s += `<li><mint-button variant="default" size="sm" icon="caret-right" ${this._currentPage >= r ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
+            s += `<li><mint-button variant="solid" size="sm" icon="caret-right" ${this._currentPage >= r ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
           }
         }
       }
@@ -6156,70 +6156,72 @@ class ht extends HTMLElement {
         const l = typeof this._configuration.onRowClick == "function", o = l ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
         s += `<tr data-row-index="${a}" ${l ? 'data-row-clickable="true"' : ""}${o ? ` class="${o}"` : ""}>`, this._configuration.columns.forEach((c, d) => {
           if (c.hidden) return;
-          const u = !c.show || c.show(this, r);
-          if (s += `<td style="${this._getStyle(c)}" class="${this._getClasses(c, !0)}">`, u)
+          const p = !c.show || c.show(this, r);
+          if (s += `<td style="${this._getStyle(c)}" class="${this._getClasses(c, !0)}">`, p)
             if (c.raw)
               if (c.action) {
                 if (!c.action.show || c.action.show(this, r)) {
                   const h = typeof c.action.label == "function" ? c.action.label(this, r) : c.action.label;
-                  s += `<mint-button variant="default" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(h))}</mint-button>`;
+                  s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(h))}</mint-button>`;
                 }
               } else if (c.actions)
                 if (c.actionStyle !== "buttons") {
                   const h = `actions-popover-${this._tableId}-${a}`, m = `actions-button-${this._tableId}-${a}`;
-                  s += `<mint-button id="${m}" variant="link" class="text-muted">`, s += '<mint-icon name="ellipsis"></mint-icon>', s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${m}" direction="down">`, c.actions.forEach((p, f) => {
-                    if (!p.show || p.show(this, r)) {
-                      const _ = typeof p.label == "function" ? p.label(this, r) : p.label;
-                      s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(_))}</div>`;
+                  s += `<mint-button id="${m}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${m}" direction="down">`, c.actions.forEach((f, u) => {
+                    if (!f.show || f.show(this, r)) {
+                      const _ = typeof f.label == "function" ? f.label(this, r) : f.label;
+                      s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(_))}</div>`;
                     }
                   }), s += "</mint-popover>";
                 } else
                   c.actions.forEach((h, m) => {
                     if (!h.show || h.show(this, r)) {
-                      const p = typeof h.label == "function" ? h.label(this, r) : h.label;
-                      s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(p))}</mint-button>`;
+                      const f = h.label ? typeof h.label == "function" ? h.label(this, r) : h.label : "", u = h.icon ? ` icon="${this._escapeHtml(h.icon)}"` : "", _ = h.tone ? ` tone="${this._escapeHtml(h.tone)}"` : "";
+                      s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(c)}"${u}${_}>`, f && (s += this._escapeHtml(String(f))), s += "</mint-button>";
                     }
                   });
               else typeof c.format == "function" ? s += c.format(this, r) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
             else if (c.action)
-              (!c.action.show || c.action.show(this, r)) && (s += `<mint-button variant="default" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${c.action.label}</mint-button>`);
+              (!c.action.show || c.action.show(this, r)) && (s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${c.action.label}</mint-button>`);
             else if (c.actions)
               if (c.actionStyle !== "buttons") {
                 const h = `actions-popover-${this._tableId}-${a}`, m = `actions-button-${this._tableId}-${a}`;
-                s += `<mint-button id="${m}" variant="link" class="text-muted">`, s += '<mint-icon name="ellipsis"></mint-icon>', s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${m}" direction="down">`, c.actions.forEach((p, f) => {
-                  if (!p.show || p.show(this, r)) {
-                    const _ = typeof p.label == "function" ? p.label(this, r) : p.label;
-                    s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(_))}</div>`;
+                s += `<mint-button id="${m}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${h}" trigger-id="${m}" direction="down">`, c.actions.forEach((f, u) => {
+                  if (!f.show || f.show(this, r)) {
+                    const _ = typeof f.label == "function" ? f.label(this, r) : f.label;
+                    s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(_))}</div>`;
                   }
                 }), s += "</mint-popover>";
               } else
                 c.actions.forEach((h, m) => {
                   if (!h.show || h.show(this, r)) {
-                    const p = typeof h.label == "function" ? h.label(this, r) : h.label;
-                    s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(p))}</mint-button>`;
+                    const f = h.label ? typeof h.label == "function" ? h.label(this, r) : h.label : "", u = h.icon ? ` icon="${this._escapeHtml(h.icon)}"` : "", _ = h.tone ? ` tone="${this._escapeHtml(h.tone)}"` : "";
+                    s += `<mint-button variant="link" class="${h.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(c)}"${u}${_}>`, f && (s += this._escapeHtml(String(f))), s += "</mint-button>";
                   }
                 });
             else typeof c.format == "function" ? s += this._escapeHtml(c.format(this, r)) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
           s += "</td>";
         }), s += "</tr>";
       }), !this._fetching && !this._loading && e.length === 0 && (this._fetchError ? s += `<tr><td colspan="${this._configuration.columns.filter((r) => !r.hidden).length}" class="text-center py-8 text-red-500 dark:text-red-400">Failed to load data: ${this._escapeHtml(this._fetchError)}</td></tr>` : s += `<tr><td colspan="${this._configuration.columns.filter((r) => !r.hidden).length}" class="text-center py-8">No records found.</td></tr>`), s += "</tbody>", s += "</table>", this._configuration.loadMore && (this._loading || this._fetching ? (s += '<div class="flex justify-center ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<mint-spinner></mint-spinner>", s += "</div>") : (this._type === "ajax" ? this._lastPage > 0 && this._currentPage < this._lastPage : this._totalRows > 0 && this._rowsToShow < this._totalRows) && (s += '<div class="flex justify-center ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += '<mint-button variant="ghost" data-action="load-more">Load more</mint-button>', s += "</div>")), this._configuration.perPage && !this._configuration.loadMore && this._loaded && i > 1) {
-        s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="default" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
+        s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="solid" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
         for (let r = 1; r <= Math.min(2, i); r++) {
           const l = this._currentPage === r ? ' disabled="true"' : "";
-          s += `<li><mint-button variant="default" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
+          s += `<li><mint-button variant="solid" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
         }
-        if (i > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < i - 1 && (s += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="default" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="default" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), i > 2)
+        if (i > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < i - 1 && (s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), i > 2)
           for (let r = Math.max(i - 1, this._currentPage + 2); r <= i; r++) {
             const l = this._currentPage === r ? ' disabled="true"' : "";
-            s += `<li><mint-button variant="default" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
+            s += `<li><mint-button variant="solid" size="sm"${l} data-action="page" data-page="${r}">${r}</mint-button></li>`;
           }
-        s += `<li><mint-button variant="default" size="sm" icon="caret-right" ${this._currentPage >= i ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
+        s += `<li><mint-button variant="solid" size="sm" icon="caret-right" ${this._currentPage >= i ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
       }
       s += "</mint-table>";
     } else
       s += '<slot name="empty"></slot>';
     this.innerHTML = s, this.querySelectorAll("mint-button[data-action]").forEach((r) => {
       r.render && r.render();
+    }), this.querySelectorAll("mint-button[data-button-type]").forEach((r) => {
+      r.render && r.render();
     }), this._attachEventListeners(), this._type === "ajax" && !this._loaded && !this._fetching && !this._loading && this._fetchData();
   }
   _attachRowClickHandler() {
@@ -6286,18 +6288,6 @@ class ht extends HTMLElement {
         const s = parseInt(i.getAttribute("data-column-key") || "0"), n = (r = this._configuration) == null ? void 0 : r.columns[s];
         n && this._toggleSort(n);
       });
-    }), this.querySelectorAll('[data-action="row-action"]').forEach((i) => {
-      i.addEventListener("click", () => {
-        var c;
-        const s = parseInt(i.getAttribute("data-row-index") || "0"), n = parseInt(i.getAttribute("data-action-index") || "0"), r = parseInt(i.getAttribute("data-column-key") || "0"), l = this._getRows()[s], o = (c = this._configuration) == null ? void 0 : c.columns[r];
-        o && o.actions && o.actions[n] && o.actions[n].onClick(this, l);
-      });
-    }), this.querySelectorAll('[data-action="column-action"]').forEach((i) => {
-      i.addEventListener("click", () => {
-        var o;
-        const s = parseInt(i.getAttribute("data-row-index") || "0"), n = parseInt(i.getAttribute("data-column-key") || "0"), a = this._getRows()[s], l = (o = this._configuration) == null ? void 0 : o.columns[n];
-        l && l.action && l.action.onClick(this, a);
-      });
     }), this.querySelectorAll("[data-button-type]").forEach((i) => {
       i.addEventListener("click", () => {
         var r, a;