monobill-mintui 0.3.46 → 0.3.48

package/dist/index.js

@@ -227,11 +227,10 @@ const W = class W extends HTMLElement {
     return (t || e || "default") === "submit" ? "submit" : "button";
   }
   isFullWidth() {
-    return this.hasAttribute("full-width");
+    return this.getAttribute("full-width") === "true";
   }
   isActive() {
-    const t = this.getAttribute("active");
-    return !(t === null || t === "false" || t === "0");
+    return this.getAttribute("active") === "true";
   }
   // Convenience property for programmatic usage: button.active = true/false
   get active() {
@@ -455,16 +454,16 @@ const W = class W extends HTMLElement {
       ],
       "solid-neutral": [
         "bg-white",
-        "dark:bg-gray-700",
+        "dark:bg-gray-900",
         "text-gray-900",
         "dark:text-white",
         "hover:bg-gray-50",
-        "dark:hover:bg-gray-600",
+        "dark:hover:bg-gray-800",
         "active:bg-gray-100",
         "active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
         "dark:active:bg-gray-800",
         "disabled:active:bg-white",
-        "dark:disabled:active:bg-gray-700",
+        "dark:disabled:active:bg-gray-900",
         "disabled:active:shadow-none",
         "focus-visible:ring-gray-400",
         "dark:focus-visible:ring-gray-500",
@@ -473,7 +472,7 @@ const W = class W extends HTMLElement {
         "dark:shadow-gray-900/50",
         "border-2",
         "border-gray-200",
-        "dark:border-gray-600"
+        "dark:border-gray-700"
       ],
       "solid-info": [
         "bg-blue-800",
@@ -728,7 +727,7 @@ const W = class W extends HTMLElement {
     return this.isFullWidth() && o.push("w-full"), o.join(" ");
   }
   render() {
-    var h, p, d, u, _, f;
+    var h, p, d, f, u, m;
     const t = this.isDisabled() || this.isLoading(), e = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -742,10 +741,10 @@ const W = class W extends HTMLElement {
       if (i)
         i.setAttribute("data-button-variant", this.getVariant()), i.setAttribute("data-button-tone", this.getTone()), "render" in i && typeof i.render == "function" && i.render();
       else {
-        const m = document.createElement("span");
-        m.className = "mr-2 inline-flex items-center";
-        const g = document.createElement("mint-spinner");
-        g.setAttribute("size", "default"), g.setAttribute("data-button-variant", this.getVariant()), g.setAttribute("data-button-tone", this.getTone()), g.style.width = "0.875rem", g.style.height = "0.875rem", m.appendChild(g), this._button.insertBefore(m, this._button.firstChild);
+        const g = document.createElement("span");
+        g.className = "mr-2 inline-flex items-center";
+        const b = document.createElement("mint-spinner");
+        b.setAttribute("size", "default"), b.setAttribute("data-button-variant", this.getVariant()), b.setAttribute("data-button-tone", this.getTone()), b.style.width = "0.875rem", b.style.height = "0.875rem", g.appendChild(b), this._button.insertBefore(g, this._button.firstChild);
       }
     else i && ((h = i.parentElement) == null || h.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
@@ -756,40 +755,40 @@ const W = class W extends HTMLElement {
     const a = this.getIconPosition();
     let o = this._button.querySelector(".mint-button-content");
     if (o) {
-      const m = r && r.tagName === "MINT-ICON";
+      const g = r && r.tagName === "MINT-ICON";
       if (r && !r.parentElement) {
-        const g = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
-        m || a === "left" ? g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, o) : o.insertAdjacentElement("afterend", r);
-      } else if (r && (m || a === "left") && r.nextSibling !== o) {
+        const b = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
+        g || a === "left" ? b ? b.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, o) : o.insertAdjacentElement("afterend", r);
+      } else if (r && (g || a === "left") && r.nextSibling !== o) {
         r.remove();
-        const g = (_ = this._button.querySelector("mint-spinner")) == null ? void 0 : _.parentElement;
-        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, o);
-      } else r && !m && a === "right" && r.previousSibling !== o && (r.remove(), o.insertAdjacentElement("afterend", r));
+        const b = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
+        b ? b.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, o);
+      } else r && !g && a === "right" && r.previousSibling !== o && (r.remove(), o.insertAdjacentElement("afterend", r));
     } else {
-      const m = [];
-      for (let g = this._button.firstChild; g; g = g.nextSibling) {
-        if (g.nodeType !== Node.ELEMENT_NODE) {
-          m.push(g);
+      const g = [];
+      for (let b = this._button.firstChild; b; b = b.nextSibling) {
+        if (b.nodeType !== Node.ELEMENT_NODE) {
+          g.push(b);
           continue;
         }
-        const b = g;
-        b.tagName !== "MINT-SPINNER" && !b.querySelector("mint-spinner") && g !== r && !b.hasAttribute("slot") && !(b.className === "mr-2" && b.querySelector("mint-spinner")) && m.push(g);
+        const _ = b;
+        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && b !== r && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && g.push(b);
       }
-      if (m.length > 0) {
-        o = document.createElement("span"), o.className = "mint-button-content inline-flex items-center", m.forEach((b) => {
-          o.appendChild(b);
+      if (g.length > 0) {
+        o = document.createElement("span"), o.className = "mint-button-content inline-flex items-center", g.forEach((_) => {
+          o.appendChild(_);
         });
-        const g = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
-        r && a === "left" ? g ? (g.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", o)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", o)) : r && a === "right" ? g ? (g.insertAdjacentElement("afterend", o), o.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(o, this._button.firstChild), o.insertAdjacentElement("afterend", r)) : g ? g.insertAdjacentElement("afterend", o) : this._button.insertBefore(o, this._button.firstChild);
+        const b = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
+        r && a === "left" ? b ? (b.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", o)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", o)) : r && a === "right" ? b ? (b.insertAdjacentElement("afterend", o), o.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(o, this._button.firstChild), o.insertAdjacentElement("afterend", r)) : b ? b.insertAdjacentElement("afterend", o) : this._button.insertBefore(o, this._button.firstChild);
       } else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
-        const g = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
-        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
+        const b = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        b ? b.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
       }
     }
     const l = this.isIconOnly();
     if (r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), s ? r.style.display = "none" : r.style.display = "", r.classList.remove("mr-1.5", "ml-1.5"), l ? r.tagName === "MINT-ICON" ? (r.style.width = "1rem", r.style.height = "1rem", r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0") : (r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0", r.tagName === "svg" && (r.style.width = "1rem", r.style.height = "1rem")) : a === "left" ? r.classList.add("mr-1.5") : r.classList.add("ml-1.5")), s) {
-      const m = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
-      m && (l ? (m.classList.remove("mr-2"), m.classList.add("mr-0")) : m.classList.contains("mr-2") || (m.classList.remove("mr-0"), m.classList.add("mr-2")));
+      const g = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
+      g && (l ? (g.classList.remove("mr-2"), g.classList.add("mr-0")) : g.classList.contains("mr-2") || (g.classList.remove("mr-0"), g.classList.add("mr-2")));
     }
     const c = this.getButtonClasses();
     this._button.className = c, this.setAttribute("data-variant", this.getVariant()), this.setAttribute("data-tone", this.getTone()), this.isActive() ? this._button.classList.add("mint-button-active") : this._button.classList.remove("mint-button-active");
@@ -843,7 +842,9 @@ class tt extends HTMLElement {
     return ["checked", "disabled", "label", "icon", "info", "error", "error-message", "loading"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full"), this._checked = this.hasAttribute("checked"), this.render();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
+    const t = this.getAttribute("checked");
+    this._checked = t === "true", this.render();
   }
   _getSwitchContainer() {
     let t = this.querySelector(".mint-switch-container");
@@ -853,10 +854,10 @@ class tt extends HTMLElement {
     this.removeEventListeners();
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   attributeChangedCallback(t, e, i) {
-    if (t === "checked" && (this._checked = i !== null), e !== i) {
+    if (t === "checked" && (this._checked = i === "true"), e !== i) {
       if (t === "error" || t === "error-message") {
         this._renderErrorState();
         return;
@@ -877,12 +878,12 @@ class tt extends HTMLElement {
   }
   set checked(t) {
     try {
-      t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checked = !!t, this.render();
+      t ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false"), this._checked = !!t, this.render();
     } catch {
     }
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   getLabel() {
     return this.getAttribute("label") || "";
@@ -897,7 +898,7 @@ class tt extends HTMLElement {
     return !!this.getIcon();
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -981,8 +982,8 @@ class tt extends HTMLElement {
     if (r) {
       let d = h;
       d || (d = document.createElement("span"), d.className = this.getIconClasses(), c.appendChild(d));
-      let u = d.querySelector("mint-icon");
-      u || (u = document.createElement("mint-icon"), d.appendChild(u)), u.setAttribute("name", r);
+      let f = d.querySelector("mint-icon");
+      f || (f = document.createElement("mint-icon"), d.appendChild(f)), f.setAttribute("name", r);
     } else h && h.remove();
     let p = this.querySelector(".mint-switch-info");
     n ? (p || (p = document.createElement("span"), p.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", o && o.parentElement === this ? this.insertBefore(p, o.nextSibling) : this.appendChild(p)), p.textContent = n, this.isDisabled() ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove(), this._renderErrorState(), this._renderSkeleton(t);
@@ -1094,19 +1095,20 @@ class et extends HTMLElement {
     return this.getAttribute("size") || "regular";
   }
   isBold() {
-    return this.hasAttribute("bold");
+    return this.getAttribute("bold") === "true";
   }
   isUnderline() {
-    return this.hasAttribute("underline");
+    return this.getAttribute("underline") === "true";
   }
   isStrike() {
-    return this.hasAttribute("strike");
+    return this.getAttribute("strike") === "true";
   }
   isItalic() {
-    return this.hasAttribute("italic");
+    return this.getAttribute("italic") === "true";
   }
   getDisplay() {
-    return this.hasAttribute("display") ? this.getAttribute("display") : this.hasAttribute("inline") ? "inline-block" : "block";
+    const t = this.getAttribute("display");
+    return t || (this.getAttribute("inline") === "true" ? "inline-block" : "block");
   }
   getTextClasses() {
     const t = this.getSize(), e = this.getVariant(), i = document.documentElement.classList.contains("dark"), s = {
@@ -1284,7 +1286,7 @@ class st extends HTMLElement {
     return ["heading"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "border-0", "align-baseline", "block"), this.render();
+    this.classList.add("box-border", "m-0", "align-baseline", "block"), this.render();
   }
   attributeChangedCallback(t, e, i) {
     e !== i && this.render();
@@ -1302,7 +1304,7 @@ class st extends HTMLElement {
     );
   }
   render() {
-    this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-800", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200", "mb-6"), this.hasPaddingClass() || this.classList.add("p-4");
+    this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-900", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200", "mb-6"), this.hasPaddingClass() || this.classList.add("p-4");
     const t = this.getHeading();
     t ? (this._headingElement || (this._headingElement = document.createElement("mint-text"), this._headingElement.setAttribute("size", "sub-heading"), this.insertBefore(this._headingElement, this.firstChild)), this._headingElement.textContent = t) : this._headingElement && this._headingElement.parentNode && (this._headingElement.remove(), this._headingElement = null);
   }
@@ -1445,7 +1447,7 @@ class at extends HTMLElement {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render(), this._observeDarkMode(), this._setupBackButtonListener();
   }
   attributeChangedCallback(t, e, i) {
-    e !== i && this.render();
+    e !== i && (t === "containered" && this._applyContainerClasses(), this.render());
   }
   disconnectedCallback() {
     this._darkModeObserver && (this._darkModeObserver.disconnect(), this._darkModeObserver = null), this._removeBackButtonListener();
@@ -1457,7 +1459,7 @@ class at extends HTMLElement {
     return this.getAttribute("fallback-href") || "/";
   }
   shouldShowBackButton() {
-    return this.hasAttribute("show-back-button");
+    return this.getAttribute("show-back-button") === "true";
   }
   render() {
     const t = this.getHeading();
@@ -1468,7 +1470,7 @@ class at extends HTMLElement {
       const r = this.getFallbackHref();
       e.setAttribute("fallback-href", r), this._backButton = e;
     } else e && (e.remove(), e = null, this._backButton = null);
-    t ? (this._headingText ? (this._headingText.classList.add("truncate", "min-w-0"), e && e.parentElement === this._titleElement ? this._headingText.previousSibling !== e && this._titleElement.insertBefore(this._headingText, e.nextSibling) : this._headingText.previousSibling && this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)) : (this._headingText = document.createElement("mint-text"), this._headingText.setAttribute("size", "heading"), this._headingText.setAttribute("bold", ""), this._headingText.classList.add("truncate", "min-w-0"), e && e.parentElement === this._titleElement ? this._titleElement.insertBefore(this._headingText, e.nextSibling) : this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)), this._headingText.textContent = t) : this._headingText && (this._headingText.remove(), this._headingText = null), this._actionsSlot ? this._actionsSlot.classList.contains("ml-4") || this._actionsSlot.classList.add("ml-4") : (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "flex gap-2 items-center ml-4", this._actionsSlot.setAttribute("slot", "actions"), this._header.appendChild(this._actionsSlot)), Array.from(this.children).filter(
+    t ? (this._headingText ? (this._headingText.classList.add("truncate", "min-w-0"), e && e.parentElement === this._titleElement ? this._headingText.previousSibling !== e && this._titleElement.insertBefore(this._headingText, e.nextSibling) : this._headingText.previousSibling && this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)) : (this._headingText = document.createElement("mint-text"), this._headingText.setAttribute("size", "heading"), this._headingText.setAttribute("bold", "true"), this._headingText.classList.add("truncate", "min-w-0"), e && e.parentElement === this._titleElement ? this._titleElement.insertBefore(this._headingText, e.nextSibling) : this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)), this._headingText.textContent = t) : this._headingText && (this._headingText.remove(), this._headingText = null), this._actionsSlot ? this._actionsSlot.classList.contains("ml-4") || this._actionsSlot.classList.add("ml-4") : (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "flex gap-2 items-center ml-4", this._actionsSlot.setAttribute("slot", "actions"), this._header.appendChild(this._actionsSlot)), Array.from(this.children).filter(
       (r) => r !== this._pageContainer && r !== this._actionsSlot && r.getAttribute("slot") === "actions"
     ).forEach((r) => {
       this._actionsSlot && r.parentElement !== this._actionsSlot && this._actionsSlot.appendChild(r);
@@ -1478,9 +1480,7 @@ class at extends HTMLElement {
   }
   _applyContainerClasses() {
     if (!this._pageContainer) return;
-    this._pageContainer.classList.add("min-h-screen", "p-8", "transition-colors", "duration-200");
-    const t = this.getAttribute("containered");
-    t !== null && t !== "false" ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto", "w-full");
+    this._pageContainer.classList.add("min-h-screen", "p-8", "transition-colors", "duration-200"), this.getAttribute("containered") === "true" ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto", "w-full");
   }
   _updateBackgroundColor() {
     if (!this._pageContainer) return;
@@ -1591,10 +1591,10 @@ class lt extends HTMLElement {
     return this.getAttribute("heading") || "";
   }
   isOpen() {
-    return this.hasAttribute("open");
+    return this.getAttribute("open") === "true";
   }
   open() {
-    this.setAttribute("open", "");
+    this.setAttribute("open", "true");
   }
   close() {
     this.removeAttribute("open");
@@ -1603,13 +1603,13 @@ class lt extends HTMLElement {
     const t = this.getId(), e = this.getHeading(), i = this.isOpen();
     if (t && (this.id = t), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._modal || (this._modal = document.createElement("div"), this._modal.className = "fixed inset-0 flex items-center justify-center p-2 pointer-events-none z-50", this.appendChild(this._modal)), i) {
       let h = this._modal.querySelector(".modal-content");
-      h || (h = document.createElement("div"), h.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(h)), this._animateEnter();
+      h || (h = document.createElement("div"), h.className = "modal-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(h)), this._animateEnter();
     } else
       this._animateExit();
     let s = this._modal.querySelector(".modal-content");
-    s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
+    s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
     let n = this._headingSlot.querySelector("mint-text");
-    e ? (n || (n = document.createElement("mint-text"), n.setAttribute("size", "sub-heading"), n.setAttribute("bold", ""), this._headingSlot.appendChild(n)), n.textContent = e) : n && n.remove(), Array.from(this.children).filter(
+    e ? (n || (n = document.createElement("mint-text"), n.setAttribute("size", "sub-heading"), n.setAttribute("bold", "true"), this._headingSlot.appendChild(n)), n.textContent = e) : n && n.remove(), Array.from(this.children).filter(
       (h) => h !== this._overlay && h !== this._modal && h !== this._headingSlot && h.getAttribute("slot") === "heading"
     ).forEach((h) => {
       this._headingSlot && h.parentElement !== this._headingSlot && this._headingSlot.appendChild(h);
@@ -1632,7 +1632,7 @@ class lt extends HTMLElement {
   _updateBackgroundColor() {
     if (!this._modal) return;
     const t = document.documentElement.classList.contains("dark"), e = this._modal.querySelector(".modal-content");
-    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-800")) : (e.classList.remove("bg-gray-800"), e.classList.add("bg-white")));
+    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-900", "border", "border-gray-700")) : (e.classList.remove("bg-gray-900", "border", "border-gray-700"), e.classList.add("bg-white")));
   }
   _observeDarkMode() {
     this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -1734,13 +1734,13 @@ class ct extends HTMLElement {
     return this.getAttribute("trigger-id") || "";
   }
   isHoverEnabled() {
-    return this.hasAttribute("hover");
+    return this.getAttribute("hover") === "true";
   }
   isOpen() {
-    return this.hasAttribute("open");
+    return this.getAttribute("open") === "true";
   }
   open() {
-    this.setAttribute("open", "");
+    this.setAttribute("open", "true");
   }
   close() {
     this.removeAttribute("open");
@@ -1755,7 +1755,7 @@ class ct extends HTMLElement {
     if (this._triggerElement && !this._triggerClickHandler) {
       const t = this;
       this._triggerClickHandler = function(e) {
-        e.stopImmediatePropagation(), e.preventDefault(), t.hasAttribute("open") ? t.removeAttribute("open") : t.setAttribute("open", "");
+        e.stopImmediatePropagation(), e.preventDefault(), t.getAttribute("open") === "true" ? t.removeAttribute("open") : t.setAttribute("open", "true");
       }, this._triggerElement.addEventListener("click", this._triggerClickHandler, !0);
     }
   }
@@ -1879,7 +1879,7 @@ class ct extends HTMLElement {
     this.isHoverEnabled() && this._attachHoverListeners();
     let s = this._popover.querySelector(".popover-content");
     if (!s)
-      s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-800 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
+      s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
     else {
       const r = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], o = r.filter((l) => !a.includes(l));
       s.className = [...o, i].join(" ");
@@ -1897,7 +1897,7 @@ class ct extends HTMLElement {
   _updateBackgroundColor() {
     if (!this._popover) return;
     const t = document.documentElement.classList.contains("dark"), e = this._popover.querySelector(".popover-content");
-    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-800")) : (e.classList.remove("bg-gray-800"), e.classList.add("bg-white")));
+    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-900", "border", "border-gray-700")) : (e.classList.remove("bg-gray-900", "border", "border-gray-700"), e.classList.add("bg-white")));
   }
   _observeDarkMode() {
     this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -1961,16 +1961,16 @@ class ht extends HTMLElement {
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-flex", "items-start", "gap-2");
     const t = this.getAttribute("checked");
-    this._checked = t !== null && t !== "false", this.render();
+    this._checked = t === "true", this.render();
   }
   disconnectedCallback() {
     this.removeEventListeners();
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   attributeChangedCallback(t, e, i) {
-    if (t === "checked" && (this._checked = i !== null && i !== "false", this._checkbox && (this._checkbox.checked = this._checked)), e !== i) {
+    if (t === "checked" && (this._checked = i === "true", this._checkbox && (this._checkbox.checked = this._checked)), e !== i) {
       if (t === "error" || t === "error-message") {
         this._renderErrorState();
         return;
@@ -1991,12 +1991,12 @@ class ht extends HTMLElement {
   }
   set checked(t) {
     try {
-      t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checked = !!t, this._checkbox && (this._checkbox.checked = this._checked), this.updateVisualState();
+      t ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false"), this._checked = !!t, this._checkbox && (this._checkbox.checked = this._checked), this.updateVisualState();
     } catch {
     }
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   getLabel() {
     return this.getAttribute("label") || "";
@@ -2014,7 +2014,7 @@ class ht extends HTMLElement {
     return this.getAttribute("value") || "";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -2067,8 +2067,8 @@ class ht extends HTMLElement {
     const l = this.getValue();
     l ? this._checkbox.value = l : this._checkbox.removeAttribute("value"), e ? this._checkbox.setAttribute("aria-label", e) : this._checkbox.removeAttribute("aria-label"), r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, r.style.cursor = "pointer", r.style.pointerEvents = "auto", this._checkbox.style.pointerEvents = "auto";
     const c = r;
-    c._wrapperClickHandler || (c._wrapperClickHandler = (u) => {
-      u.target === r && !s && (u.preventDefault(), u.stopPropagation(), this.toggle());
+    c._wrapperClickHandler || (c._wrapperClickHandler = (f) => {
+      f.target === r && !s && (f.preventDefault(), f.stopPropagation(), this.toggle());
     }, r.addEventListener("click", c._wrapperClickHandler));
     let h = r.querySelector("mint-icon");
     h || (h = document.createElement("mint-icon"), h.setAttribute("name", "check"), h.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", h.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", h.style.zIndex = "1", r.appendChild(h)), this.updateVisualState();
@@ -2076,16 +2076,16 @@ class ht extends HTMLElement {
     const d = this.querySelector(".mint-checkbox-container");
     if (e || i) {
       p ? d && p.parentElement !== d && d.appendChild(p) : (p = document.createElement("div"), p.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", d ? d.appendChild(p) : this.appendChild(p));
-      let u = p.querySelector(".mint-checkbox-label");
-      e ? (u || (u = document.createElement("span"), u.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", p.insertBefore(u, p.firstChild)), u.textContent = e, s ? u.classList.add("opacity-40") : u.classList.remove("opacity-40")) : u && u.remove();
-      let _ = p.querySelector(".mint-checkbox-info");
-      if (i ? (_ || (_ = document.createElement("span"), _.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", p.appendChild(_)), _.textContent = i, s ? _.classList.add("opacity-40") : _.classList.remove("opacity-40")) : _ && _.remove(), s)
+      let f = p.querySelector(".mint-checkbox-label");
+      e ? (f || (f = document.createElement("span"), f.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", p.insertBefore(f, p.firstChild)), f.textContent = e, s ? f.classList.add("opacity-40") : f.classList.remove("opacity-40")) : f && f.remove();
+      let u = p.querySelector(".mint-checkbox-info");
+      if (i ? (u || (u = document.createElement("span"), u.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", p.appendChild(u)), u.textContent = i, s ? u.classList.add("opacity-40") : u.classList.remove("opacity-40")) : u && u.remove(), s)
         p.style.cursor = "default", p._clickHandler && (p.removeEventListener("click", p._clickHandler), p._clickHandler = null);
       else {
         p.style.cursor = "pointer";
-        const f = p._clickHandler;
-        f && p.removeEventListener("click", f), p._clickHandler = (m) => {
-          this._checkbox && (m.target === this._checkbox || this._checkbox.contains(m.target) || m.composedPath().includes(this._checkbox)) || this.toggle();
+        const m = p._clickHandler;
+        m && p.removeEventListener("click", m), p._clickHandler = (g) => {
+          this._checkbox && (g.target === this._checkbox || this._checkbox.contains(g.target) || g.composedPath().includes(this._checkbox)) || this.toggle();
         }, p.addEventListener("click", p._clickHandler);
       }
     } else p && p.remove();
@@ -2093,7 +2093,7 @@ class ht extends HTMLElement {
   }
   setupEventListeners() {
     this.removeEventListeners(), this._checkbox && (this._changeHandler = (t) => {
-      t.stopPropagation(), this._checked = this._checkbox.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState();
+      t.stopPropagation(), this._checked = this._checkbox.checked, this._checked ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false"), this.updateVisualState();
       const e = new Event("input", {
         bubbles: !0,
         cancelable: !0,
@@ -2154,7 +2154,7 @@ class ht extends HTMLElement {
   }
   toggle() {
     if (this._checkbox && !this.isDisabled()) {
-      this._checkbox.checked = !this._checked, this._checked = this._checkbox.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState(), this.dispatchEvent(new CustomEvent("input", {
+      this._checkbox.checked = !this._checked, this._checked = this._checkbox.checked, this._checked ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false"), this.updateVisualState(), this.dispatchEvent(new CustomEvent("input", {
         detail: { checked: this._checked },
         bubbles: !0,
         cancelable: !0,
@@ -2209,10 +2209,10 @@ class dt extends HTMLElement {
     this._clickHandler && (this.removeEventListener("click", this._clickHandler), this._clickHandler = null), this._radio && (this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._focusHandler && (this._radio.removeEventListener("focus", this._focusHandler), this._focusHandler = null), this._blurHandler && (this._radio.removeEventListener("blur", this._blurHandler), this._blurHandler = null), this._keydownHandler && (this._radio.removeEventListener("keydown", this._keydownHandler), this._keydownHandler = null));
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   attributeChangedCallback(t, e, i) {
-    if (t === "checked" && (this._checked = i !== null && i !== "false", this._radio && (this._radio.checked = this._checked), this._updateVisualState()), e !== i) {
+    if (t === "checked" && (this._checked = i === "true", this._radio && (this._radio.checked = this._checked), this._updateVisualState()), e !== i) {
       if (t === "loading") {
         this.render();
         return;
@@ -2233,7 +2233,7 @@ class dt extends HTMLElement {
   }
   set checked(t) {
     try {
-      this._checked = !!t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._radio && (this._radio.checked = this._checked), this.isConnected ? requestAnimationFrame(() => {
+      this._checked = !!t, t ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false"), this._radio && (this._radio.checked = this._checked), this.isConnected ? requestAnimationFrame(() => {
         this._updateVisualState();
       }) : this._updateVisualState();
     } catch {
@@ -2246,14 +2246,14 @@ class dt extends HTMLElement {
     return this.getAttribute("info") || "";
   }
   isDisabled() {
-    const t = this.closest("mint-choice");
-    return this.hasAttribute("disabled") || ((t == null ? void 0 : t.hasAttribute("disabled")) ?? !1);
+    const e = this.getAttribute("disabled") === "true", i = this.closest("mint-choice"), n = (i == null ? void 0 : i.getAttribute("disabled")) === "true";
+    return e || n;
   }
   _setupClickHandler() {
     this._clickHandler || (this._clickHandler = (t) => {
       t.target !== this._radio && (this.isDisabled() || this._radio && (this._radio.click(), requestAnimationFrame(() => {
         if (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._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "true") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
           const e = this.closest("mint-choice");
           e && e.dispatchEvent(new CustomEvent("choice-change", {
             detail: { checked: this._checked, value: this.getValue() },
@@ -2265,81 +2265,81 @@ class dt extends HTMLElement {
     }, this.addEventListener("click", this._clickHandler));
   }
   render() {
-    var _;
+    var u;
     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");
     if (a)
-      r = ((_ = a.textContent) == null ? void 0 : _.trim()) || "";
+      r = ((u = a.textContent) == null ? void 0 : u.trim()) || "";
     else {
-      const f = this.querySelector(".mint-choice-option-label-container");
-      Array.from(this.childNodes).forEach((m) => {
-        var g;
-        if (m !== f && m.nodeType === Node.TEXT_NODE) {
-          const b = (g = m.textContent) == null ? void 0 : g.trim();
-          b && (r += b);
+      const m = this.querySelector(".mint-choice-option-label-container");
+      Array.from(this.childNodes).forEach((g) => {
+        var b;
+        if (g !== m && g.nodeType === Node.TEXT_NODE) {
+          const _ = (b = g.textContent) == null ? void 0 : b.trim();
+          _ && (r += _);
         }
       });
     }
     const o = this.querySelectorAll(".mint-choice-option-wrapper");
     let l = null;
-    if (o.length > 0 && (this._radio && (l = Array.from(o).find((f) => f.contains(this._radio))), l || (l = o[0]), o.forEach((f, m) => {
-      f !== l && f.remove();
-    })), l || (l = document.createElement("div"), l.className = "mint-choice-option-wrapper", l.style.position = "relative", this.insertBefore(l, this.firstChild)), l.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, l.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((f) => {
-      f !== this._radio && f.remove();
+    if (o.length > 0 && (this._radio && (l = Array.from(o).find((m) => m.contains(this._radio))), l || (l = o[0]), o.forEach((m, g) => {
+      m !== l && m.remove();
+    })), l || (l = document.createElement("div"), l.className = "mint-choice-option-wrapper", l.style.position = "relative", this.insertBefore(l, this.firstChild)), l.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, l.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((m) => {
+      m !== this._radio && m.remove();
     }), this._radio)
-      this._radio.parentElement !== l && l.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 m = this.querySelector(".mint-choice-option-wrapper");
-        m && !this.isDisabled() && m.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      this._radio.parentElement !== l && l.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 = (m) => {
+        const g = this.querySelector(".mint-choice-option-wrapper");
+        g && !this.isDisabled() && g.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }), this._blurHandler || (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._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()));
+        const m = this.querySelector(".mint-choice-option-wrapper");
+        m && m.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }), this._keydownHandler || (this._keydownHandler = (m) => {
+        this.isDisabled() || (m.key === "ArrowDown" || m.key === "ArrowRight" ? (m.preventDefault(), this._focusNextOption()) : (m.key === "ArrowUp" || m.key === "ArrowLeft") && (m.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", l.appendChild(this._radio), this._changeHandler = (m) => {
-        const g = this._checked;
-        this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
-        const b = this.closest("mint-choice");
-        g !== this._checked && b && setTimeout(() => {
-          b.dispatchEvent(new CustomEvent("choice-change", {
+      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", l.appendChild(this._radio), this._changeHandler = (g) => {
+        const b = this._checked;
+        this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "true") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
+        const _ = this.closest("mint-choice");
+        b !== this._checked && _ && setTimeout(() => {
+          _.dispatchEvent(new CustomEvent("choice-change", {
             detail: { checked: this._checked, value: this.getValue() },
             bubbles: !0,
             cancelable: !0
           }));
         }, 0);
       }, this._radio.addEventListener("change", this._changeHandler);
-      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());
+      const m = () => {
+        this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "true") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState());
       };
-      this._radio.addEventListener("click", f), this._focusHandler = (m) => {
-        const g = this.querySelector(".mint-choice-option-wrapper");
-        g && !this.isDisabled() && g.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      this._radio.addEventListener("click", m), this._focusHandler = (g) => {
+        const b = this.querySelector(".mint-choice-option-wrapper");
+        b && !this.isDisabled() && b.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }, this._radio.addEventListener("focus", this._focusHandler), this._blurHandler = () => {
-        const m = this.querySelector(".mint-choice-option-wrapper");
-        m && m.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
-      }, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (m) => {
-        this.isDisabled() || (m.key === "ArrowDown" || m.key === "ArrowRight" ? (m.preventDefault(), this._focusNextOption()) : (m.key === "ArrowUp" || m.key === "ArrowLeft") && (m.preventDefault(), this._focusPreviousOption()));
+        const g = this.querySelector(".mint-choice-option-wrapper");
+        g && g.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (g) => {
+        this.isDisabled() || (g.key === "ArrowDown" || g.key === "ArrowRight" ? (g.preventDefault(), this._focusNextOption()) : (g.key === "ArrowUp" || g.key === "ArrowLeft") && (g.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"), l.querySelectorAll(".mint-choice-option-indicator").forEach((f, m) => {
-      m > 0 && f.remove();
+    this._radio.name = n, this._radio.value = i, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "true") : this.setAttribute("checked", "false")) : 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"), l.querySelectorAll(".mint-choice-option-indicator").forEach((m, g) => {
+      g > 0 && m.remove();
     });
     let p = l.querySelector(".mint-choice-option-indicator");
     p || (p = document.createElement("div"), p.className = "mint-choice-option-indicator", l.appendChild(p)), p.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", p.style.position = "absolute", p.style.top = "50%", p.style.left = "50%", p.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", p.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(t);
     const d = this.getInfo();
-    let u = this.querySelector(".mint-choice-option-label-container");
+    let f = this.querySelector(".mint-choice-option-label-container");
     if (r || d) {
-      u || (u = document.createElement("div"), u.className = "mint-choice-option-label-container flex flex-col gap-0.5", this.appendChild(u), Array.from(this.childNodes).forEach((g) => {
-        var b;
-        g.nodeType === Node.TEXT_NODE && ((b = g.textContent) != null && b.trim()) && g !== u && (g.textContent = "");
+      f || (f = document.createElement("div"), f.className = "mint-choice-option-label-container flex flex-col gap-0.5", this.appendChild(f), Array.from(this.childNodes).forEach((b) => {
+        var _;
+        b.nodeType === Node.TEXT_NODE && ((_ = b.textContent) != null && _.trim()) && b !== f && (b.textContent = "");
       }));
-      let f = u.querySelector(".mint-choice-option-label");
-      r ? (f || (f = document.createElement("span"), f.className = "mint-choice-option-label", u.appendChild(f)), f.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, f.textContent = r) : f && f.remove();
-      let m = u.querySelector(".mint-choice-option-info");
-      d ? (m || (m = document.createElement("span"), m.className = "mint-choice-option-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(m)), m.textContent = d, e ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove();
-    } else u && u.remove();
+      let m = f.querySelector(".mint-choice-option-label");
+      r ? (m || (m = document.createElement("span"), m.className = "mint-choice-option-label", f.appendChild(m)), m.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, m.textContent = r) : m && m.remove();
+      let g = f.querySelector(".mint-choice-option-info");
+      d ? (g || (g = document.createElement("span"), g.className = "mint-choice-option-info text-xs text-gray-500 dark:text-gray-400 select-none", f.appendChild(g)), g.textContent = d, e ? g.classList.add("opacity-40") : g.classList.remove("opacity-40")) : g && g.remove();
+    } else f && f.remove();
     e ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
   }
   _getWrapperClasses() {
@@ -2363,7 +2363,7 @@ class dt extends HTMLElement {
       "dark:border-slate-600"
     ) : e.push(
       "bg-white",
-      "dark:bg-gray-700",
+      "dark:bg-gray-900",
       "border-gray-300",
       "dark:border-gray-500"
     ), e.join(" ");
@@ -2401,7 +2401,7 @@ class dt extends HTMLElement {
     ).forEach((i) => {
       if (i === this._radio) return;
       const s = i.closest("mint-choice-option");
-      s && s !== this && (s._checked = i.checked, i.checked ? s.setAttribute("checked", "") : s.removeAttribute("checked"), s._updateVisualState());
+      s && s !== this && (s._checked = i.checked, i.checked ? s.setAttribute("checked", "true") : s.removeAttribute("checked"), s._updateVisualState());
     });
   }
   _focusNextOption() {
@@ -2415,7 +2415,7 @@ class dt extends HTMLElement {
       const n = i.closest("mint-choice-option");
       if (i.checked = !0, n) {
         const r = n._checked;
-        if (n._checked = !0, n.setAttribute("checked", ""), n._changeHandler) {
+        if (n._checked = !0, n.setAttribute("checked", "true"), n._changeHandler) {
           const o = new Event("change", { bubbles: !0 });
           n._changeHandler.call(n, o);
         } else
@@ -2443,7 +2443,7 @@ class dt extends HTMLElement {
       const n = i.closest("mint-choice-option");
       if (i.checked = !0, n) {
         const r = n._checked;
-        if (n._checked = !0, n.setAttribute("checked", ""), n._changeHandler) {
+        if (n._checked = !0, n.setAttribute("checked", "true"), n._changeHandler) {
           const o = new Event("change", { bubbles: !0 });
           n._changeHandler.call(n, o);
         } else
@@ -2499,7 +2499,7 @@ class ut extends HTMLElement {
   }
   attributeChangedCallback(t, e, i) {
     e !== i && (t === "error" || t === "error-message" ? this._renderErrorState() : t === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((n) => {
-      this.isLoading() ? n.setAttribute("loading", "") : n.removeAttribute("loading");
+      this.isLoading() ? n.setAttribute("loading", "true") : n.removeAttribute("loading");
     })) : (this.render(), t === "name" && this.querySelectorAll("mint-choice-option").forEach((n) => {
       typeof n.render == "function" && n.render();
     })));
@@ -2514,7 +2514,7 @@ class ut extends HTMLElement {
     return this.getAttribute("name") || "";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -2523,10 +2523,10 @@ class ut extends HTMLElement {
     return this.getAttribute("id") || "";
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   isRequired() {
-    return this.hasAttribute("required");
+    return this.getAttribute("required") === "true";
   }
   getValue() {
     const t = this.querySelector('input[type="radio"]:checked');
@@ -2690,16 +2690,16 @@ class pt extends HTMLElement {
     }
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   isReadonly() {
-    return this.hasAttribute("readonly");
+    return this.getAttribute("readonly") === "true";
   }
   isRequired() {
-    return this.hasAttribute("required");
+    return this.getAttribute("required") === "true";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -2731,7 +2731,7 @@ class pt extends HTMLElement {
       "rounded-lg",
       "box-border",
       "bg-white",
-      "dark:bg-gray-700",
+      "dark:bg-gray-900",
       "text-gray-900",
       "dark:text-white",
       // Use specific transitions for textarea to avoid animating resize
@@ -2747,7 +2747,7 @@ class pt extends HTMLElement {
       s ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
     ], a = [
       "border-2",
-      n ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
+      n ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700"
     ], o = [
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
@@ -2756,13 +2756,13 @@ class pt extends HTMLElement {
     return [...r, ...a, ...o].filter(Boolean).join(" ");
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   render() {
-    var b, v, k, A;
+    var _, v, k, A;
     this.getType();
-    const t = this._getNormalizedType(), e = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), l = this.getId(), c = this.getName(), h = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), d = this.getIcon(), u = this.getLabel(), _ = this.getInfo(), f = this.isLoading();
-    if (this._renderSkeleton(f), s) {
+    const t = this._getNormalizedType(), e = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), l = this.getId(), c = this.getName(), h = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), d = this.getIcon(), f = this.getLabel(), u = this.getInfo(), m = this.isLoading();
+    if (this._renderSkeleton(m), s) {
       this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = h || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (y) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
           var x;
@@ -2795,10 +2795,10 @@ class pt extends HTMLElement {
           cancelable: !0
         })));
       }), this._colorTextInput.addEventListener("blur", () => {
-        var x, T;
+        var x, I;
         const y = ((x = this._colorTextInput) == null ? void 0 : x.value) || "";
         /^#[0-9A-Fa-f]{6}$/.test(y) ? (this._colorPicker && (this._colorPicker.value = y), this.setAttribute("value", y)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
-          detail: { value: ((T = this._colorPicker) == null ? void 0 : T.value) || "#000000" },
+          detail: { value: ((I = this._colorPicker) == null ? void 0 : I.value) || "#000000" },
           bubbles: !0,
           cancelable: !0
         }));
@@ -2819,15 +2819,15 @@ class pt extends HTMLElement {
         const y = document.createElement("mint-icon");
         y.setAttribute("name", "caret-down"), y.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(y), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (x) => {
           if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, q = this._input.max ? parseFloat(this._input.max) : void 0;
-            let H = T + R;
-            q !== void 0 && H > q && (H = q), P !== void 0 && H < P && (H = P), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            const I = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, $ = this._input.max ? parseFloat(this._input.max) : void 0;
+            let H = I + R;
+            $ !== void 0 && H > $ && (H = $), P !== void 0 && H < P && (H = P), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         }), this._numberDecrementButton.addEventListener("click", (x) => {
           if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, q = this._input.max ? parseFloat(this._input.max) : void 0;
-            let H = T - R;
-            P !== void 0 && H < P && (H = P), q !== void 0 && H > q && (H = q), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            const I = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, $ = this._input.max ? parseFloat(this._input.max) : void 0;
+            let H = I - R;
+            P !== void 0 && H < P && (H = P), $ !== void 0 && H > $ && (H = $), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         });
       }
@@ -2842,25 +2842,25 @@ class pt extends HTMLElement {
       const E = this.firstChild.textContent;
       E && !this._input.value && (this._input.value = E.trim()), this.removeChild(this.firstChild);
     }
-    let g = this.querySelector(".mint-input-label-container");
-    if (u || _) {
-      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 E = g.querySelector(".mint-input-label");
-      if (u) {
-        E || (E = document.createElement("label"), E.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", g.insertBefore(E, g.firstChild)), E.textContent = u;
-        const x = l || ((b = this._element) == null ? void 0 : b.id) || ((v = this._colorTextInput) == null ? void 0 : v.id) || ((k = this._input) == null ? void 0 : k.id) || ((A = this._textarea) == null ? void 0 : A.id);
+    let b = this.querySelector(".mint-input-label-container");
+    if (f || u) {
+      b || (b = document.createElement("div"), b.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(b, this._wrapper) : this.insertBefore(b, this.firstChild));
+      let E = b.querySelector(".mint-input-label");
+      if (f) {
+        E || (E = document.createElement("label"), E.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", b.insertBefore(E, b.firstChild)), E.textContent = f;
+        const x = l || ((_ = this._element) == null ? void 0 : _.id) || ((v = this._colorTextInput) == null ? void 0 : v.id) || ((k = this._input) == null ? void 0 : k.id) || ((A = this._textarea) == null ? void 0 : A.id);
         if (x)
           E.setAttribute("for", x);
         else {
-          const T = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
-          this._element ? this._element.id = T : this._colorTextInput ? this._colorTextInput.id = T : this._input ? this._input.id = T : this._textarea && (this._textarea.id = T), E.setAttribute("for", T);
+          const I = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
+          this._element ? this._element.id = I : this._colorTextInput ? this._colorTextInput.id = I : this._input ? this._input.id = I : this._textarea && (this._textarea.id = I), E.setAttribute("for", I);
         }
         r ? E.classList.add("opacity-40") : E.classList.remove("opacity-40");
       } else E && E.remove();
-      let y = g.querySelector(".mint-input-info");
-      _ ? (y || (y = document.createElement("span"), y.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", g.appendChild(y)), y.textContent = _, r ? y.classList.add("opacity-40") : y.classList.remove("opacity-40")) : y && y.remove();
-    } else g && g.remove();
-    this._renderErrorState(), this._renderSkeleton(f);
+      let y = b.querySelector(".mint-input-info");
+      u ? (y || (y = document.createElement("span"), y.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", b.appendChild(y)), y.textContent = u, r ? y.classList.add("opacity-40") : y.classList.remove("opacity-40")) : y && y.remove();
+    } else b && b.remove();
+    this._renderErrorState(), this._renderSkeleton(m);
   }
   _renderErrorState() {
     const t = this.hasError(), e = this.getErrorMessage();
@@ -2943,7 +2943,7 @@ class ft extends HTMLElement {
     }
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   attributeChangedCallback(t, e, i) {
     if (e !== i) {
@@ -2990,16 +2990,16 @@ class ft extends HTMLElement {
     return this.getAttribute("info") || "";
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   isReadonly() {
-    return this.hasAttribute("readonly");
+    return this.getAttribute("readonly") === "true";
   }
   isRequired() {
-    return this.hasAttribute("required");
+    return this.getAttribute("required") === "true";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -3205,24 +3205,24 @@ class ft extends HTMLElement {
   _parseDateString(t, e) {
     const i = /[\/\-\.\s]+/;
     if (i.test(t)) {
-      const f = t.split(i).filter((g) => g.length > 0), m = e.split(/[\/\-\.\s]+/).filter((g) => g.length > 0);
-      if (f.length === m.length) {
-        let g = 0, b = 0, v = 0;
-        for (let k = 0; k < m.length; k++) {
-          const A = m[k].toLowerCase(), E = f[k];
+      const m = t.split(i).filter((b) => b.length > 0), g = e.split(/[\/\-\.\s]+/).filter((b) => b.length > 0);
+      if (m.length === g.length) {
+        let b = 0, _ = 0, v = 0;
+        for (let k = 0; k < g.length; k++) {
+          const A = g[k].toLowerCase(), E = m[k];
           if (A.includes("d"))
-            g = parseInt(E, 10);
+            b = parseInt(E, 10);
           else if (A.includes("m"))
-            b = parseInt(E, 10) - 1;
+            _ = parseInt(E, 10) - 1;
           else if (A.includes("y")) {
             let y = parseInt(E, 10);
-            const x = A.length, T = E.length;
-            T === 2 && x === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : T === 2 && x === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), v = y;
+            const x = A.length, I = E.length;
+            I === 2 && x === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : I === 2 && x === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), v = y;
           }
         }
-        if (g && b >= 0 && b <= 11 && v) {
-          const k = new Date(v, b, g);
-          if (!isNaN(k.getTime()) && k.getDate() === g && k.getMonth() === b && k.getFullYear() === v)
+        if (b && _ >= 0 && _ <= 11 && v) {
+          const k = new Date(v, _, b);
+          if (!isNaN(k.getTime()) && k.getDate() === b && k.getMonth() === _ && k.getFullYear() === v)
             return k;
         }
       }
@@ -3233,27 +3233,27 @@ class ft extends HTMLElement {
       { char: "d", index: a },
       { char: "m", index: o },
       { char: "y", index: l }
-    ].sort((f, m) => f.index - m.index);
-    let h = 0, p = 0, d = 0, u = 0;
+    ].sort((m, g) => m.index - g.index);
+    let h = 0, p = 0, d = 0, f = 0;
     r.length, n.length;
-    for (const f of c)
-      if (f.char === "d") {
-        const m = r.lastIndexOf("d") - r.indexOf("d") + 1, g = n.substr(u, m);
-        if (g.length === 0) return null;
-        h = parseInt(g, 10), u += g.length;
-      } else if (f.char === "m") {
-        const m = r.lastIndexOf("m") - r.indexOf("m") + 1, g = n.substr(u, m);
-        if (g.length === 0) return null;
-        p = parseInt(g, 10) - 1, u += g.length;
-      } else if (f.char === "y") {
-        const m = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(u), b = Math.min(m, g.length), v = g.substr(0, b);
+    for (const m of c)
+      if (m.char === "d") {
+        const g = r.lastIndexOf("d") - r.indexOf("d") + 1, b = n.substr(f, g);
+        if (b.length === 0) return null;
+        h = parseInt(b, 10), f += b.length;
+      } else if (m.char === "m") {
+        const g = r.lastIndexOf("m") - r.indexOf("m") + 1, b = n.substr(f, g);
+        if (b.length === 0) return null;
+        p = parseInt(b, 10) - 1, f += b.length;
+      } else if (m.char === "y") {
+        const g = r.lastIndexOf("y") - r.indexOf("y") + 1, b = n.substr(f), _ = Math.min(g, b.length), v = b.substr(0, _);
         if (v.length === 0) return null;
         let k = parseInt(v, 10);
-        b === 2 && m === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : b === 2 && m === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), d = k, u += b;
+        _ === 2 && g === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : _ === 2 && g === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), d = k, f += _;
       }
     if (!h || p < 0 || p > 11 || !d) return null;
-    const _ = new Date(d, p, h);
-    return isNaN(_.getTime()) || _.getDate() !== h || _.getMonth() !== p || _.getFullYear() !== d ? null : _;
+    const u = new Date(d, p, h);
+    return isNaN(u.getTime()) || u.getDate() !== h || u.getMonth() !== p || u.getFullYear() !== d ? null : u;
   }
   _formatDate(t, e) {
     const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = e.toLowerCase();
@@ -3262,18 +3262,18 @@ class ft extends HTMLElement {
   }
   // PHP-style formatter for display mode
   _formatDatePhp(t, e) {
-    const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], o = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], c = (d, u = 2) => d.toString().padStart(u, "0"), h = (d) => {
-      const u = d % 10, _ = d % 100;
-      return u === 1 && _ !== 11 ? "st" : u === 2 && _ !== 12 ? "nd" : u === 3 && _ !== 13 ? "rd" : "th";
+    const i = t.getDate(), s = t.getMonth() + 1, n = t.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], o = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], c = (d, f = 2) => d.toString().padStart(f, "0"), h = (d) => {
+      const f = d % 10, u = d % 100;
+      return f === 1 && u !== 11 ? "st" : f === 2 && u !== 12 ? "nd" : f === 3 && u !== 13 ? "rd" : "th";
     };
     let p = "";
     for (let d = 0; d < e.length; d++) {
-      const u = e[d];
-      if (u === "\\" && d + 1 < e.length) {
+      const f = e[d];
+      if (f === "\\" && d + 1 < e.length) {
         p += e[d + 1], d++;
         continue;
       }
-      switch (u) {
+      switch (f) {
         case "Y":
           p += n.toString();
           break;
@@ -3308,7 +3308,7 @@ class ft extends HTMLElement {
           p += h(i);
           break;
         default:
-          p += u;
+          p += f;
           break;
       }
     }
@@ -3321,28 +3321,28 @@ class ft extends HTMLElement {
   render() {
     const t = this.isLoading(), e = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), o = this.getId(), l = this.getName(), c = this.getFormat(), h = this.hasError(), p = this.getErrorMessage(), d = this.getSelectionMode();
     this._isRange = this.isRange() || d === "week" || d === "month", this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
-    let u = this.querySelector(".mint-date-picker-label-container");
+    let f = this.querySelector(".mint-date-picker-label-container");
     if (e || i) {
-      u || (u = document.createElement("div"), u.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(u, this._input) : this.appendChild(u));
-      let v = u.querySelector(".mint-date-picker-label");
-      e ? (v || (v = document.createElement("label"), v.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", u.insertBefore(v, u.firstChild)), v.textContent = e, o && this._textInput && v.setAttribute("for", o)) : v && v.remove();
-      let k = u.querySelector(".mint-date-picker-info");
-      i ? (k || (k = document.createElement("span"), k.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", u.appendChild(k)), k.textContent = i) : k && k.remove();
-    } else u && u.remove();
+      f || (f = document.createElement("div"), f.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(f, this._input) : this.appendChild(f));
+      let v = f.querySelector(".mint-date-picker-label");
+      e ? (v || (v = document.createElement("label"), v.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", f.insertBefore(v, f.firstChild)), v.textContent = e, o && this._textInput && v.setAttribute("for", o)) : v && v.remove();
+      let k = f.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", f.appendChild(k)), k.textContent = i) : k && k.remove();
+    } else f && f.remove();
     this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), o && (this._hiddenInput.id = o), l && (this._hiddenInput.name = l), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", h ? "true" : "false");
-    let _ = this._input.querySelector(".mint-date-fields");
-    _ || (_ = document.createElement("div"), this._input.appendChild(_)), this._fieldsContainer = _, this._applyErrorVisuals(h, p, n), _.innerHTML = "", this._displayEl = document.createElement("div");
-    const f = r ? "select-text" : "select-none";
-    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${f} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
+    let u = this._input.querySelector(".mint-date-fields");
+    u || (u = document.createElement("div"), this._input.appendChild(u)), this._fieldsContainer = u, this._applyErrorVisuals(h, p, n), u.innerHTML = "", this._displayEl = document.createElement("div");
+    const m = r ? "select-text" : "select-none";
+    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${m} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
       n || r || this._enterInputMode();
     }), this._displayEl.addEventListener("keydown", (v) => {
       n || r || (v.key === "Enter" || v.key === " ") && (v.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const m = this._getFormatTokens(c);
+    const g = this._getFormatTokens(c);
     this._startPartInputs = [], this._endPartInputs = [];
-    const g = (v) => {
+    const b = (v) => {
       const k = document.createDocumentFragment();
-      return m.forEach((A) => {
+      return g.forEach((A) => {
         if (A.type === "sep") {
           const E = document.createElement("span");
           E.textContent = A.value, E.className = "text-gray-400 dark:text-gray-500 select-none", k.appendChild(E);
@@ -3352,14 +3352,14 @@ class ft extends HTMLElement {
         }
       }), k;
     };
-    if (this._inputsWrapperEl.appendChild(g("start")), this._isRange) {
+    if (this._inputsWrapperEl.appendChild(b("start")), this._isRange) {
       const v = document.createElement("span");
-      v.textContent = " - ", v.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(v), this._inputsWrapperEl.appendChild(g("end"));
+      v.textContent = " - ", v.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(v), this._inputsWrapperEl.appendChild(b("end"));
     }
-    const b = document.createElement("div");
-    if (b.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", b.appendChild(this._displayEl), b.appendChild(this._inputsWrapperEl), _.appendChild(b), _.addEventListener("click", () => {
+    const _ = document.createElement("div");
+    if (_.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", _.appendChild(this._displayEl), _.appendChild(this._inputsWrapperEl), u.appendChild(_), u.addEventListener("click", () => {
       this._isInputMode || n || r || this._enterInputMode();
-    }), this._attachPartInputHandlers(this._startPartInputs, m, _), this._isRange && this._attachPartInputHandlers(this._endPartInputs, m, _), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
+    }), this._attachPartInputHandlers(this._startPartInputs, g, u), this._isRange && this._attachPartInputHandlers(this._endPartInputs, g, u), 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";
@@ -3396,9 +3396,9 @@ class ft extends HTMLElement {
   }
   _getFieldContainerClass(t, e) {
     return [
-      "mint-date-fields relative w-full pl-10 pr-3.5 py-1.5 min-h-[2rem] text-sm font-medium rounded-lg box-border bg-white dark:bg-gray-700 text-gray-900 dark:text-white",
+      "mint-date-fields relative w-full pl-10 pr-3.5 py-1.5 min-h-[2rem] text-sm font-medium rounded-lg box-border bg-white dark:bg-gray-900 dark:border dark:border-gray-700 text-gray-900 dark:text-white",
       "border-2",
-      t ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600",
+      t ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
       "transition-all duration-200 outline-none focus-within:ring-2 focus-within:ring-offset-1",
       t ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
       "flex items-center gap-1"
@@ -3511,7 +3511,7 @@ class ft extends HTMLElement {
   }
   _buildCalendar() {
     if (!this._popover) return;
-    this._calendarContainer && this._calendarContainer.parentNode && this._calendarContainer.remove(), this._calendarContainer = document.createElement("div"), this._calendarContainer.className = "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[22rem] md:w-auto md:min-w-[28rem]", this._viewMode === "calendar" ? this._buildCalendarView() : this._viewMode === "month" ? this._buildMonthView() : this._viewMode === "year" && this._buildYearView();
+    this._calendarContainer && this._calendarContainer.parentNode && this._calendarContainer.remove(), this._calendarContainer = document.createElement("div"), this._calendarContainer.className = "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[22rem] md:w-auto md:min-w-[28rem]", this._viewMode === "calendar" ? this._buildCalendarView() : this._viewMode === "month" ? this._buildMonthView() : this._viewMode === "year" && this._buildYearView();
     const t = this._popover.querySelector(".popover-content");
     if (t) {
       for (; t.firstChild; )
@@ -3523,7 +3523,7 @@ class ft extends HTMLElement {
   _buildCalendarView() {
     if (!this._calendarContainer) return;
     const t = this._getDaysInMonth(this._currentMonth, this._currentYear), e = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), i = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], s = this.getWeekStartDay(), n = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = [...n.slice(s), ...n.slice(0, s)], a = this.getShortcuts(), o = a.length > 0;
-    this._calendarContainer.className = o ? "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
+    this._calendarContainer.className = o ? "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
     const l = document.createElement("div");
     l.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
     const c = document.createElement("div");
@@ -3536,60 +3536,60 @@ class ft extends HTMLElement {
     d.setAttribute("name", "caret-left"), d.className = "w-4 h-4", p.appendChild(d), p.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
     }), h.appendChild(p);
-    const u = document.createElement("div");
-    u.className = "flex items-center gap-2";
-    const _ = document.createElement("button");
-    _.type = "button", _.tabIndex = 0, _.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", _.setAttribute("data-keep-popover-open", "true"), _.textContent = i[this._currentMonth], _.addEventListener("click", () => {
+    const f = document.createElement("div");
+    f.className = "flex items-center gap-2";
+    const u = document.createElement("button");
+    u.type = "button", u.tabIndex = 0, u.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", u.setAttribute("data-keep-popover-open", "true"), u.textContent = i[this._currentMonth], u.addEventListener("click", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), u.appendChild(_);
-    const f = document.createElement("button");
-    f.type = "button", f.tabIndex = 0, f.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", f.setAttribute("data-keep-popover-open", "true"), f.textContent = String(this._currentYear), f.addEventListener("click", () => {
-      this._viewMode = "year", this._buildCalendar();
-    }), u.appendChild(f), h.appendChild(u);
+    }), f.appendChild(u);
     const m = document.createElement("button");
-    m.type = "button", m.tabIndex = 0, m.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", m.setAttribute("data-keep-popover-open", "true");
-    const g = document.createElement("mint-icon");
-    g.setAttribute("name", "caret-right"), g.className = "w-4 h-4", m.appendChild(g), m.addEventListener("click", () => {
+    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();
+    }), f.appendChild(m), h.appendChild(f);
+    const g = document.createElement("button");
+    g.type = "button", g.tabIndex = 0, g.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", g.setAttribute("data-keep-popover-open", "true");
+    const b = document.createElement("mint-icon");
+    b.setAttribute("name", "caret-right"), b.className = "w-4 h-4", g.appendChild(b), g.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), h.appendChild(m);
-    const b = document.createElement("div");
-    b.className = "grid grid-cols-7 mb-2", r.forEach((C) => {
-      const I = document.createElement("div");
-      I.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", I.textContent = C, b.appendChild(I);
+    }), h.appendChild(g);
+    const _ = document.createElement("div");
+    _.className = "grid grid-cols-7 mb-2", r.forEach((w) => {
+      const T = document.createElement("div");
+      T.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", T.textContent = w, _.appendChild(T);
     });
     const v = document.createElement("div");
     v.className = "grid grid-cols-7";
-    const k = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, A = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null, E = this._currentMonth === 0 ? 11 : this._currentMonth - 1, y = this._currentMonth === 0 ? this._currentYear - 1 : this._currentYear, x = this._getDaysInMonth(E, y), T = this._currentMonth === 11 ? 0 : this._currentMonth + 1, R = this._currentMonth === 11 ? this._currentYear + 1 : this._currentYear, P = e + t, G = Math.ceil(P / 7) * 7 - P, j = (C, I, S) => {
-      const V = this._isToday(C), O = this._isDateSelected(C), $ = this._isDateInRange(C), F = k && C < k || A && C > A;
+    const k = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, A = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null, E = this._currentMonth === 0 ? 11 : this._currentMonth - 1, y = this._currentMonth === 0 ? this._currentYear - 1 : this._currentYear, x = this._getDaysInMonth(E, y), I = this._currentMonth === 11 ? 0 : this._currentMonth + 1, R = this._currentMonth === 11 ? this._currentYear + 1 : this._currentYear, P = e + t, G = Math.ceil(P / 7) * 7 - P, j = (w, T, S) => {
+      const V = this._isToday(w), O = this._isDateSelected(w), q = this._isDateInRange(w), F = k && w < k || A && w > A;
       let M = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const D = this._isSameDate(C, this._selectedStartDate), L = this._isSameDate(C, this._selectedEndDate);
-        D && L ? M = "rounded-md" : D ? M = "rounded-l-md" : L ? M = "rounded-r-md" : $ && (M = "rounded-none");
+        const D = this._isSameDate(w, this._selectedStartDate), L = this._isSameDate(w, this._selectedEndDate);
+        D && L ? M = "rounded-md" : D ? M = "rounded-l-md" : L ? M = "rounded-r-md" : q && (M = "rounded-none");
       } else O && !this._isRange && (M = "rounded-md");
       const N = document.createElement("button");
       N.type = "button", N.disabled = !!F, N.tabIndex = F ? -1 : 0;
       let B = `w-full h-8 ${M} 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`;
-      return S ? B += O ? " bg-slate-800 dark:bg-slate-600 text-white" : $ ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : V ? " 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" : B += O ? " bg-slate-800 dark:bg-slate-600 text-white" : $ ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700", B += F ? " opacity-40 cursor-not-allowed" : "", N.className = B, N.textContent = I.toString(), F || N.addEventListener("click", () => {
-        this._handleDateClick(C);
+      return S ? B += O ? " bg-slate-800 dark:bg-slate-600 text-white" : q ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : V ? " 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" : B += O ? " bg-slate-800 dark:bg-slate-600 text-white" : q ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700", B += F ? " opacity-40 cursor-not-allowed" : "", N.className = B, N.textContent = T.toString(), F || N.addEventListener("click", () => {
+        this._handleDateClick(w);
       }), N;
     };
-    for (let C = e - 1; C >= 0; C--) {
-      const I = x - C, S = new Date(y, E, I), V = j(S, I, !1);
+    for (let w = e - 1; w >= 0; w--) {
+      const T = x - w, S = new Date(y, E, T), V = j(S, T, !1);
       v.appendChild(V);
     }
-    for (let C = 1; C <= t; C++) {
-      const I = new Date(this._currentYear, this._currentMonth, C), S = j(I, C, !0);
+    for (let w = 1; w <= t; w++) {
+      const T = new Date(this._currentYear, this._currentMonth, w), S = j(T, w, !0);
       v.appendChild(S);
     }
-    for (let C = 1; C <= G; C++) {
-      const I = new Date(R, T, C), S = j(I, C, !1);
+    for (let w = 1; w <= G; w++) {
+      const T = new Date(R, I, w), S = j(T, w, !1);
       v.appendChild(S);
     }
     if (o) {
-      const C = document.createElement("div");
-      C.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 I = document.createElement("div");
-      I.className = "relative md:relative md:flex-1 md:min-h-0";
+      const w = document.createElement("div");
+      w.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 T = document.createElement("div");
+      T.className = "relative md:relative md:flex-1 md:min-h-0";
       const S = document.createElement("div");
       S.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", S.style.scrollbarWidth = "none", S.style.msOverflowStyle = "none", S.style.setProperty("-webkit-overflow-scrolling", "touch");
       const V = document.createElement("style");
@@ -3619,20 +3619,20 @@ class ft extends HTMLElement {
         }
       `, S.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (V.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(V));
       const O = document.createElement("div");
-      O.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", I.appendChild(O);
-      const $ = document.createElement("div");
-      $.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", I.appendChild($);
+      O.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", T.appendChild(O);
+      const q = document.createElement("div");
+      q.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", T.appendChild(q);
       const F = document.createElement("div");
-      F.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", I.appendChild(F);
+      F.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", T.appendChild(F);
       const M = document.createElement("div");
-      M.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", I.appendChild(M);
+      M.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", T.appendChild(M);
       const N = () => {
         if (window.innerWidth >= 768) {
           const D = S.scrollTop, L = S.scrollHeight, z = S.clientHeight;
-          D > 0 ? F.style.opacity = "1" : F.style.opacity = "0", D + z < L - 1 ? M.style.opacity = "1" : M.style.opacity = "0", O.style.opacity = "0", $.style.opacity = "0";
+          D > 0 ? F.style.opacity = "1" : F.style.opacity = "0", D + z < L - 1 ? M.style.opacity = "1" : M.style.opacity = "0", O.style.opacity = "0", q.style.opacity = "0";
         } else {
           const D = S.scrollLeft, L = S.scrollWidth, z = S.clientWidth;
-          D > 0 ? O.style.opacity = "1" : O.style.opacity = "0", D + z < L - 1 ? $.style.opacity = "1" : $.style.opacity = "0", F.style.opacity = "0", M.style.opacity = "0";
+          D > 0 ? O.style.opacity = "1" : O.style.opacity = "0", D + z < L - 1 ? q.style.opacity = "1" : q.style.opacity = "0", F.style.opacity = "0", M.style.opacity = "0";
         }
       };
       S.addEventListener("scroll", N), window.addEventListener("resize", N), setTimeout(N, 0), a.forEach((B) => {
@@ -3660,9 +3660,9 @@ class ft extends HTMLElement {
             }));
           }
         }), S.appendChild(D);
-      }), I.appendChild(S), C.appendChild(I), l.appendChild(C);
+      }), T.appendChild(S), w.appendChild(T), l.appendChild(w);
     }
-    c.appendChild(h), c.appendChild(b), c.appendChild(v), l.appendChild(c), this._calendarContainer.appendChild(l);
+    c.appendChild(h), c.appendChild(_), c.appendChild(v), l.appendChild(c), this._calendarContainer.appendChild(l);
   }
   _buildMonthView() {
     if (!this._calendarContainer) return;
@@ -3916,7 +3916,7 @@ class mt extends HTMLElement {
     this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver && (this._optionObserver.disconnect(), this._optionObserver = null), this._childrenObserver && (this._childrenObserver.disconnect(), this._childrenObserver = null);
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   attributeChangedCallback(t, e, i) {
     if (e !== i) {
@@ -3966,13 +3966,13 @@ class mt extends HTMLElement {
     }
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   isMultiple() {
-    return this.hasAttribute("multiple");
+    return this.getAttribute("multiple") === "true";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -3999,7 +3999,7 @@ class mt extends HTMLElement {
       "rounded-lg",
       "box-border",
       "bg-white",
-      "dark:bg-gray-700",
+      "dark:bg-gray-900",
       "text-gray-900",
       "dark:text-white",
       "transition-all",
@@ -4015,7 +4015,7 @@ class mt extends HTMLElement {
       "cursor-pointer"
     ], s = [
       "border-2",
-      t ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
+      t ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700"
     ], n = [
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
@@ -4036,8 +4036,8 @@ class mt extends HTMLElement {
     if (s) {
       const d = document.createElement("label");
       d.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && d.setAttribute("for", r);
-      const u = document.createTextNode(s);
-      d.appendChild(u), this.appendChild(d);
+      const f = document.createTextNode(s);
+      d.appendChild(f), this.appendChild(d);
     }
     this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), l && (this._select.disabled = !0), c && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", h ? "true" : "false");
     const p = i.length > 0 ? i : e;
@@ -4048,20 +4048,20 @@ class mt extends HTMLElement {
       d.value = "", d.textContent = "Select an option", d.disabled = !0, d.selected = !0, this._select.appendChild(d);
     }
     if (this._select.value = o || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
-      const _ = d.target.value;
-      (this.getAttribute("value") || "") !== _ && (_ ? this.setAttribute("value", _) : this.removeAttribute("value"));
-      const m = new Event("input", {
+      const u = d.target.value;
+      (this.getAttribute("value") || "") !== u && (u ? this.setAttribute("value", u) : this.removeAttribute("value"));
+      const g = new Event("input", {
         bubbles: !0,
         cancelable: !0,
         composed: !0
       });
-      this.dispatchEvent(m), this.dispatchEvent(new CustomEvent("input", {
-        detail: { value: _ },
+      this.dispatchEvent(g), this.dispatchEvent(new CustomEvent("input", {
+        detail: { value: u },
         bubbles: !0,
         cancelable: !0,
         composed: !0
       })), this.dispatchEvent(new CustomEvent("change", {
-        detail: { value: _ },
+        detail: { value: u },
         bubbles: !0,
         cancelable: !0,
         composed: !0
@@ -4070,7 +4070,7 @@ class mt extends HTMLElement {
       const d = this.getAttribute("value") || this.value || "";
       this._select && d && requestAnimationFrame(() => {
         this._select && Array.from(this._select.options).some(
-          (_) => _.value === d
+          (u) => u.value === d
         ) && this._select.value !== d && (this._select.value = d);
       });
     }), this._optionObserver.observe(this._select, {
@@ -4146,7 +4146,7 @@ class gt extends HTMLElement {
     return this.getAttribute("accept") || "";
   }
   isMultiple() {
-    return this.hasAttribute("multiple");
+    return this.getAttribute("multiple") === "true";
   }
   getWidth() {
     return this.getAttribute("width") || "200px";
@@ -4197,16 +4197,16 @@ class gt extends HTMLElement {
     return this.getAttribute("name") || "";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
   }
   isDisabled() {
-    return this.hasAttribute("disabled");
+    return this.getAttribute("disabled") === "true";
   }
   isLoading() {
-    return this.hasAttribute("loading");
+    return this.getAttribute("loading") === "true";
   }
   render() {
     const t = this.isLoading(), e = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), o = this.getName(), l = this.hasError(), c = this.getErrorMessage();
@@ -4215,10 +4215,10 @@ class gt extends HTMLElement {
     h && h.remove(), p && p.remove();
     const d = document.createElement("div");
     d.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
-    const u = document.createElement("mint-icon");
-    if (u.setAttribute("name", "upload"), u.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(u), this._dropzone.appendChild(d), e) {
-      const _ = document.createElement("div");
-      _.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", _.textContent = e, this._dropzone.appendChild(_);
+    const f = document.createElement("mint-icon");
+    if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(f), this._dropzone.appendChild(d), e) {
+      const u = document.createElement("div");
+      u.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", u.textContent = e, this._dropzone.appendChild(u);
     }
     this.setupEventListeners(), this._renderErrorState(l, c), this._renderPreviews(), this._renderSkeleton(t);
   }
@@ -4231,7 +4231,7 @@ class gt extends HTMLElement {
   }
   _updateDragStateClass() {
     if (!this._dropzone) return;
-    const t = this.isDisabled(), e = this.hasError(), n = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, r = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = e ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", o = t ? "opacity-40 cursor-not-allowed" : "", l = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
+    const t = this.isDisabled(), e = this.hasError(), n = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, r = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 dark:border-gray-700" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = e ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", o = t ? "opacity-40 cursor-not-allowed" : "", l = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
     this._dropzone.className = `${n} ${e ? a : r} ${o} ${l}`.trim();
   }
   setupEventListeners() {
@@ -4375,22 +4375,22 @@ class gt extends HTMLElement {
     const e = document.createElement("div");
     e.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((l, c) => {
       const h = document.createElement("div");
-      if (h.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", l.type.startsWith("image/")) {
-        const _ = document.createElement("img");
-        _.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
-        const f = URL.createObjectURL(l);
-        this._previewUrls.push(f), _.src = f, h.appendChild(_);
+      if (h.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900", l.type.startsWith("image/")) {
+        const u = document.createElement("img");
+        u.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+        const m = URL.createObjectURL(l);
+        this._previewUrls.push(m), u.src = m, h.appendChild(u);
       } else {
-        const _ = document.createElement("mint-icon");
-        _.setAttribute("name", "attach"), _.className = "w-5 h-5 text-gray-500 dark:text-gray-300", h.appendChild(_);
+        const u = document.createElement("mint-icon");
+        u.setAttribute("name", "attach"), u.className = "w-5 h-5 text-gray-500 dark:text-gray-300", h.appendChild(u);
       }
       const p = document.createElement("div");
       p.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", p.textContent = l.name, h.appendChild(p);
       const d = document.createElement("button");
       d.type = "button", d.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
-      const u = document.createElement("mint-icon");
-      u.setAttribute("name", "close"), u.className = "w-4 h-4", d.appendChild(u), d.addEventListener("click", (_) => {
-        _.preventDefault(), _.stopPropagation(), this._removeFileAt(c);
+      const f = document.createElement("mint-icon");
+      f.setAttribute("name", "close"), f.className = "w-4 h-4", d.appendChild(f), d.addEventListener("click", (u) => {
+        u.preventDefault(), u.stopPropagation(), this._removeFileAt(c);
       }), h.appendChild(d), e.appendChild(h);
     });
     const i = this.hasError(), s = this._isDragging;
@@ -4435,7 +4435,7 @@ class gt extends HTMLElement {
   }
 }
 customElements.get("mint-dropzone") || customElements.define("mint-dropzone", gt);
-class _t extends HTMLElement {
+class bt extends HTMLElement {
   constructor() {
     super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map(), this._reactiveDataProxy = null, this._reactiveDataObserver = null, this._lastDataSnapshot = null;
   }
@@ -4592,95 +4592,95 @@ class _t extends HTMLElement {
     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 } };
-    const r = Array.from(t.values()).some((u) => u instanceof File);
+    const r = Array.from(t.values()).some((f) => f instanceof File);
     let a = null;
     const o = {};
     let l = i;
     if (typeof window < "u" && ((d = (p = (h = window.mintForm) == null ? void 0 : h.defaults) == null ? void 0 : p.headers) != null && d.common) && Object.assign(o, window.mintForm.defaults.headers.common), this._headers && Object.assign(o, this._headers), s === "GET") {
-      const u = new URLSearchParams();
-      t.forEach((_, f) => {
-        _ instanceof File || u.append(f, String(_));
-      }), l += (i.includes("?") ? "&" : "?") + u.toString();
+      const f = new URLSearchParams();
+      t.forEach((u, m) => {
+        u instanceof File || f.append(m, String(u));
+      }), l += (i.includes("?") ? "&" : "?") + f.toString();
     } else if (n === "multipart/form-data" || r)
       a = t;
     else if (n === "application/json")
       a = JSON.stringify(e), o["Content-Type"] = "application/json";
     else {
-      const u = new URLSearchParams();
-      t.forEach((_, f) => {
-        _ instanceof File || u.append(f, String(_));
-      }), a = u, o["Content-Type"] = "application/x-www-form-urlencoded";
+      const f = new URLSearchParams();
+      t.forEach((u, m) => {
+        u instanceof File || f.append(m, String(u));
+      }), a = f, o["Content-Type"] = "application/x-www-form-urlencoded";
     }
     if (typeof fetch == "function")
       try {
-        const u = await fetch(l, {
+        const f = await fetch(l, {
           method: s || "POST",
           body: s === "GET" ? null : a,
           headers: o
-        }), _ = await u.text().catch(() => "");
-        let f = _;
+        }), u = await f.text().catch(() => "");
+        let m = u;
         try {
-          f = JSON.parse(_);
+          m = JSON.parse(u);
         } catch {
         }
-        if (!u.ok) {
-          const g = { status: u.status, data: f, response: { status: u.status, data: f } };
-          throw await this._applyErrorInterceptors(g);
+        if (!f.ok) {
+          const b = { status: f.status, data: m, response: { status: f.status, data: m } };
+          throw await this._applyErrorInterceptors(b);
         }
-        const m = { status: u.status, ok: u.ok, data: f };
-        return await this._applySuccessInterceptors(m);
-      } catch (u) {
-        if (u.response)
-          throw u;
-        const _ = {
-          status: u.status || 0,
-          data: u.data || u.message || "Network error",
-          response: { status: u.status || 0, data: u.data || u.message || "Network error" }
+        const g = { status: f.status, ok: f.ok, data: m };
+        return await this._applySuccessInterceptors(g);
+      } catch (f) {
+        if (f.response)
+          throw f;
+        const u = {
+          status: f.status || 0,
+          data: f.data || f.message || "Network error",
+          response: { status: f.status || 0, data: f.data || f.message || "Network error" }
         };
-        throw await this._applyErrorInterceptors(_);
+        throw await this._applyErrorInterceptors(u);
       }
     const c = this;
-    return await new Promise(async (u, _) => {
-      const f = new XMLHttpRequest();
-      f.open(s || "POST", l, !0), Object.entries(o).forEach(([m, g]) => f.setRequestHeader(m, g)), f.onload = async function() {
-        const { status: m, responseText: g } = f;
-        if (m >= 200 && m < 300) {
-          let b = g;
+    return await new Promise(async (f, u) => {
+      const m = new XMLHttpRequest();
+      m.open(s || "POST", l, !0), Object.entries(o).forEach(([g, b]) => m.setRequestHeader(g, b)), m.onload = async function() {
+        const { status: g, responseText: b } = m;
+        if (g >= 200 && g < 300) {
+          let _ = b;
           try {
-            b = JSON.parse(g);
+            _ = JSON.parse(b);
           } catch {
           }
           try {
-            const v = { status: m, ok: !0, data: b }, k = await c._applySuccessInterceptors(v);
-            u(k);
+            const v = { status: g, ok: !0, data: _ }, k = await c._applySuccessInterceptors(v);
+            f(k);
           } catch (v) {
-            _(v);
+            u(v);
           }
         } else {
-          let b = g;
+          let _ = b;
           try {
-            b = JSON.parse(g);
+            _ = JSON.parse(b);
           } catch {
           }
           try {
-            const v = { status: m, data: b, response: { status: m, data: b } }, k = await c._applyErrorInterceptors(v);
-            _(k);
+            const v = { status: g, data: _, response: { status: g, data: _ } }, k = await c._applyErrorInterceptors(v);
+            u(k);
           } catch (v) {
-            _(v);
+            u(v);
           }
         }
-      }, f.onerror = async function() {
+      }, m.onerror = async function() {
         try {
-          const m = {
-            status: f.status || 0,
-            data: f.responseText || "Network error",
-            response: { status: f.status || 0, data: f.responseText || "Network error" }
-          }, g = await c._applyErrorInterceptors(m);
-          _(g);
-        } catch (m) {
-          _(m);
+          const g = {
+            status: m.status || 0,
+            data: m.responseText || "Network error",
+            response: { status: m.status || 0, data: m.responseText || "Network error" }
+          }, b = await c._applyErrorInterceptors(g);
+          u(b);
+        } catch (g) {
+          u(g);
         }
-      }, f.send(s === "GET" ? null : a);
+      }, m.send(s === "GET" ? null : a);
     });
   }
   async _applySuccessInterceptors(t) {
@@ -4907,7 +4907,7 @@ class _t extends HTMLElement {
     t.length !== 0 && t.forEach((i) => {
       (i instanceof HTMLInputElement || i instanceof HTMLTextAreaElement || i instanceof HTMLSelectElement) && i.setAttribute("aria-invalid", "true");
       const s = this._resolveHost(i);
-      s && (s.setAttribute("error", ""), s.setAttribute("error-message", e), s.setAttribute("data-mint-form-error", "true"));
+      s && (s.setAttribute("error", "true"), s.setAttribute("error-message", e), s.setAttribute("data-mint-form-error", "true"));
     });
   }
   _clearFieldError(t) {
@@ -5011,7 +5011,7 @@ class _t extends HTMLElement {
           });
         else if (n === "MINT-CHECKBOX" || n === "MINT-SWITCH") {
           const a = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
-          typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "") : s.removeAttribute("checked");
+          typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "true") : s.removeAttribute("checked");
         } else n === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((a) => typeof a == "string" ? { value: a, label: a, dismissable: !0 } : a)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
       } catch (a) {
         console.warn(`Failed to set value for field ${e}:`, a);
@@ -5179,7 +5179,7 @@ class _t extends HTMLElement {
     Array.from(this._form.querySelectorAll(
       "mint-input, mint-select, mint-date-picker, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags"
     )).forEach((s) => {
-      e ? s.setAttribute("loading", "") : s.removeAttribute("loading"), typeof s.render == "function" && s.render();
+      e ? s.setAttribute("loading", "true") : s.removeAttribute("loading"), typeof s.render == "function" && s.render();
     });
   }
   _setButtonsSubmitting() {
@@ -5324,7 +5324,7 @@ class _t extends HTMLElement {
     this._reactiveDataObserver !== null && (cancelAnimationFrame(this._reactiveDataObserver), this._reactiveDataObserver = null), this._reactiveDataProxy = null, this._lastDataSnapshot = null;
   }
 }
-customElements.get("mint-form") || customElements.define("mint-form", _t);
+customElements.get("mint-form") || customElements.define("mint-form", bt);
 typeof window < "u" && (window.mintForm = window.mintForm || {
   defaults: {
     headers: {
@@ -5336,13 +5336,13 @@ typeof window < "u" && (window.mintForm = window.mintForm || {
       handlers: []
     }
   }
-}, window.mintForm.interceptors.response.use || (window.mintForm.interceptors.response.use = function(w, t) {
+}, window.mintForm.interceptors.response.use || (window.mintForm.interceptors.response.use = function(C, t) {
   return window.mintForm.interceptors.response.handlers.push({
-    fulfilled: w,
+    fulfilled: C,
     rejected: t
   }), window.mintForm.interceptors.response.handlers.length - 1;
 }));
-class bt extends HTMLElement {
+class _t extends HTMLElement {
   constructor() {
     super(...arguments), this._observer = null;
   }
@@ -5401,7 +5401,7 @@ class bt extends HTMLElement {
       ]);
       const l = r.querySelectorAll("th");
       l.forEach((c, h) => {
-        const p = c.querySelector("mint-icon"), d = (p == null ? void 0 : p.getAttribute("name")) || "", u = p !== null && d !== "ellipsis";
+        const p = c.querySelector("mint-icon"), d = (p == null ? void 0 : p.getAttribute("name")) || "", f = p !== null && d !== "ellipsis";
         this._setClasses(c, [
           "text-left",
           "font-semibold",
@@ -5412,7 +5412,7 @@ class bt extends HTMLElement {
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), u && c.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), h === 0 && c.classList.add("pl-6"), h === l.length - 1 && c.classList.add("pr-6");
+        ]), f && c.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), h === 0 && c.classList.add("pl-6"), h === l.length - 1 && c.classList.add("pr-6");
       });
     }
     const a = t.querySelector("tbody");
@@ -5428,13 +5428,13 @@ class bt extends HTMLElement {
           "dark:border-gray-700"
         ]), p && c.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), h === l.length - 1 && c.classList.remove("border-b");
         const d = c.querySelectorAll("td");
-        d.forEach((u, _) => {
-          this._setClasses(u, [
+        d.forEach((f, u) => {
+          this._setClasses(f, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), _ === 0 && u.classList.add("pl-6"), _ === d.length - 1 && u.classList.add("pr-6"), e ? this._applyMobileCell(u, s) : this._restoreCell(u);
+          ]), u === 0 && f.classList.add("pl-6"), u === d.length - 1 && f.classList.add("pr-6"), e ? this._applyMobileCell(f, s) : this._restoreCell(f);
         });
       });
     }
@@ -5553,7 +5553,7 @@ class bt extends HTMLElement {
     `, document.head.appendChild(t);
   }
 }
-customElements.get("mint-table") || customElements.define("mint-table", bt);
+customElements.get("mint-table") || customElements.define("mint-table", _t);
 class vt extends HTMLElement {
   constructor() {
     super(...arguments), this._root = null, this._textWrap = null, this._dismissBtn = null, this._clickHandler = null;
@@ -5571,7 +5571,7 @@ class vt extends HTMLElement {
     this._render();
   }
   _render() {
-    var e;
+    var i;
     if (this.classList.add(
       "inline-flex",
       "items-center",
@@ -5583,20 +5583,20 @@ class vt extends HTMLElement {
       "border-gray-200",
       "dark:border-gray-700",
       "bg-gray-100",
-      "dark:bg-gray-800",
+      "dark:bg-gray-900",
       "text-gray-900",
       "dark:text-gray-100",
       "text-sm",
       "font-medium"
     ), !this._root) {
       for (this._root = document.createElement("div"), this._root.className = "flex items-center gap-2 w-full", this._textWrap = document.createElement("span"), this._textWrap.className = "inline-flex items-center min-w-[0.5rem]", this._textWrap.setAttribute("data-mt-chip-text", ""); this.firstChild; ) {
-        const i = this.firstChild;
-        if (i === this._root) break;
-        this._textWrap.appendChild(i);
+        const s = this.firstChild;
+        if (s === this._root) break;
+        this._textWrap.appendChild(s);
       }
       this._root.appendChild(this._textWrap), this.appendChild(this._root);
     }
-    this.hasAttribute("dismissable") ? (this._dismissBtn || this._createDismissBtn(), this._dismissBtn && !this._dismissBtn.isConnected && ((e = this._root) == null || e.appendChild(this._dismissBtn))) : this._dismissBtn && this._dismissBtn.parentElement === this._root && this._dismissBtn.remove();
+    this.getAttribute("dismissable") === "true" ? (this._dismissBtn || this._createDismissBtn(), this._dismissBtn && !this._dismissBtn.isConnected && ((i = this._root) == null || i.appendChild(this._dismissBtn))) : this._dismissBtn && this._dismissBtn.parentElement === this._root && this._dismissBtn.remove();
   }
   _createDismissBtn() {
     const t = document.createElement("button");
@@ -5657,7 +5657,7 @@ class yt extends HTMLElement {
             "border-2",
             s ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
             "bg-white",
-            "dark:bg-gray-800",
+            "dark:bg-gray-900",
             "focus-within:ring-2",
             "focus-within:ring-offset-1",
             s ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
@@ -5703,7 +5703,7 @@ class yt extends HTMLElement {
     return this.getAttribute("info") || "";
   }
   hasError() {
-    return this.hasAttribute("error");
+    return this.getAttribute("error") === "true";
   }
   getErrorMessage() {
     return this.getAttribute("error-message") || "";
@@ -5715,7 +5715,7 @@ class yt extends HTMLElement {
     return this.getAttribute("id") || "";
   }
   isRequired() {
-    return this.hasAttribute("required");
+    return this.getAttribute("required") === "true";
   }
   isLoading() {
     return this.hasAttribute("loading");
@@ -5819,7 +5819,7 @@ class yt extends HTMLElement {
     let t = 0;
     this._tags.forEach((e) => {
       const i = document.createElement("mint-chip");
-      i.dataset.index = String(t++), i.dataset.value = e.value, i.draggable = this.hasAttribute("sortable"), i.draggable && i.classList.add("cursor-move"), e.dismissable && (i.setAttribute("dismissable", ""), i.addEventListener("dismissed", () => this._removeTag(e.value))), this._chipsWrap.appendChild(i);
+      i.dataset.index = String(t++), i.dataset.value = e.value, i.draggable = this.hasAttribute("sortable"), i.draggable && i.classList.add("cursor-move"), e.dismissable && (i.setAttribute("dismissable", "true"), i.addEventListener("dismissed", () => this._removeTag(e.value))), this._chipsWrap.appendChild(i);
       const s = i.querySelector("[data-mt-chip-text]");
       s && (s.textContent = e.label || e.value), this._setupChipEvents(i, e), i.draggable && (i.addEventListener("dragstart", (n) => this._onDragStart(n, i)), i.addEventListener("dragover", (n) => this._onDragOverChip(n, i)), i.addEventListener("drop", (n) => this._onDrop(n)), i.addEventListener("dragend", () => this._onDragEnd())), this.hasAttribute("sortable") && i.addEventListener("pointerdown", (n) => this._onPointerDown(n, i));
     }), this._input && (this.hasAttribute("sortable") && (this._input.addEventListener("dragover", (e) => this._onDragOverInput(e)), this._input.addEventListener("drop", (e) => this._onDrop(e)), this._input.addEventListener("dragend", () => this._onDragEnd())), this._chipsWrap.appendChild(this._input));
@@ -5974,18 +5974,18 @@ class kt extends HTMLElement {
       "focus-visible:ring-gray-400",
       "dark:focus-visible:ring-gray-500",
       "rounded"
-    ), this.hasAttribute("disabled") ? this.classList.add("cursor-not-allowed", "opacity-50") : this.classList.add("cursor-pointer"), this.hasAttribute("role") || this.setAttribute("role", "button"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+    ), this.getAttribute("disabled") === "true" ? this.classList.add("cursor-not-allowed", "opacity-50") : this.classList.add("cursor-pointer"), this.getAttribute("role") || this.setAttribute("role", "button"), this.getAttribute("tabindex") || this.setAttribute("tabindex", "0");
   }
   _setupEventListeners() {
     this._clickHandler = (t) => {
-      if (this.hasAttribute("disabled")) {
+      if (this.getAttribute("disabled") === "true") {
         t.preventDefault(), t.stopPropagation();
         return;
       }
       this._handleClick(t);
     }, this._keydownHandler = (t) => {
       if (t.key === "Enter" || t.key === " ") {
-        if (this.hasAttribute("disabled")) {
+        if (this.getAttribute("disabled") === "true") {
           t.preventDefault(), t.stopPropagation();
           return;
         }
@@ -6007,7 +6007,7 @@ class kt extends HTMLElement {
     return ["disabled"];
   }
   attributeChangedCallback(t, e, i) {
-    t === "disabled" && (i !== null ? (this.classList.remove("cursor-pointer"), this.classList.add("opacity-50", "cursor-not-allowed"), this.setAttribute("aria-disabled", "true")) : (this.classList.remove("opacity-50", "cursor-not-allowed"), this.classList.add("cursor-pointer"), this.removeAttribute("aria-disabled")));
+    t === "disabled" && (i === "true" ? (this.classList.remove("cursor-pointer"), this.classList.add("opacity-50", "cursor-not-allowed"), this.setAttribute("aria-disabled", "true")) : (this.classList.remove("opacity-50", "cursor-not-allowed"), this.classList.add("cursor-pointer"), this.removeAttribute("aria-disabled")));
   }
 }
 customElements.get("mint-clickable") || customElements.define("mint-clickable", kt);
@@ -6035,7 +6035,7 @@ class Et extends HTMLElement {
     return t === "info" || t === "success" || t === "warning" || t === "danger" ? t : "info";
   }
   isDismissable() {
-    return this.hasAttribute("dismissable");
+    return this.getAttribute("dismissable") === "true";
   }
   getIconName() {
     switch (this.getTone()) {
@@ -6121,7 +6121,7 @@ class Et extends HTMLElement {
         })), this.remove();
       }, this._dismissButton.addEventListener("click", this._dismissHandler), this._headerWrapper.appendChild(this._dismissButton);
     }
-    this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800", n.forEach((r) => {
+    this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-900", n.forEach((r) => {
       this._bodyWrapper.appendChild(r);
     }), this.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
   }
@@ -6210,7 +6210,7 @@ class xt extends HTMLElement {
     }), this._configuration.sortBy || (this._configuration.sortBy = "id"), this._configuration.sort || (this._configuration.sort = "asc"));
   }
   async _fetchData(t, e = !0, i, s) {
-    var o, l, c, h, p, d, u, _;
+    var o, l, c, h, p, d, f, u;
     if (!this._configuration) return;
     const n = t || (typeof this._configuration.data == "string" ? this._configuration.data : null);
     if (!n || this._fetching || this._loading)
@@ -6218,7 +6218,7 @@ class xt 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 m = new URLSearchParams({
         perPage: r.toString(),
         offset: a.toString(),
         search: this._search,
@@ -6226,12 +6226,12 @@ class xt extends HTMLElement {
         sort: this._configuration.sort || "asc",
         searchColumns: this._searchColumns.join(","),
         columns: this._columns.join(",")
-      }), m = {};
-      this._configuration.headers && (m.headers = this._configuration.headers);
-      const g = await fetch(`${n}?${f.toString()}`, m);
-      if (!g.ok)
-        throw new Error(`HTTP error! status: ${g.status}`);
-      const b = await g.json(), v = ((o = b.content) == null ? void 0 : o.rows) || [], k = ((l = b.content) == null ? void 0 : l.total) || 0;
+      }), g = {};
+      this._configuration.headers && (g.headers = this._configuration.headers);
+      const b = await fetch(`${n}?${m.toString()}`, g);
+      if (!b.ok)
+        throw new Error(`HTTP error! status: ${b.status}`);
+      const _ = await b.json(), v = ((o = _.content) == null ? void 0 : o.rows) || [], k = ((l = _.content) == null ? void 0 : l.total) || 0;
       if (this._configuration.loadMore && a !== 0)
         this._rows = this._rows.concat(v);
       else {
@@ -6239,19 +6239,19 @@ class xt extends HTMLElement {
         this._configuration.predefinedData ? (x = [...this._configuration.predefinedData, ...v], this._totalRows = k + this._configuration.predefinedData.length) : this._totalRows = k, this._rows = x;
       }
       const A = Math.floor(a / r) + 1;
-      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === A ? this._currentPage = b.content.current_page : this._currentPage = A, this._offset = (this._currentPage - 1) * r), this._lastPage = ((h = b.content) == null ? void 0 : h.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
+      this._configuration.loadMore || (((c = _.content) == null ? void 0 : c.current_page) !== void 0 && _.content.current_page === A ? this._currentPage = _.content.current_page : this._currentPage = A, this._offset = (this._currentPage - 1) * r), this._lastPage = ((h = _.content) == null ? void 0 : h.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
       const E = this._sorting;
       if (E && this._updateSortIcons(), this._sorting = !1, this._sortingColumn = null, E && this._updateSortIcons(), this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), (d = (p = this.querySelector(`#${this._tableId}`)) == null ? void 0 : p.closest("table")) == null ? void 0 : d.querySelector("tbody")) {
         if (E) {
-          const x = this._loading, T = this._fetching;
-          this._loading = !1, this._fetching = !1, this._updateTableBody(), this._loading = x, this._fetching = T;
+          const x = this._loading, I = this._fetching;
+          this._loading = !1, this._fetching = !1, this._updateTableBody(), this._loading = x, this._fetching = I;
         } else
           this._updateTableBody();
         this._updatePagination();
       } else
         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(), ((_ = (u = this.querySelector(`#${this._tableId}`)) == null ? void 0 : u.closest("table")) == null ? void 0 : _.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
+    } catch (m) {
+      this._fetching = !1, this._loading = !1, this._loaded = !0, this._searching = !1, this._fetchError = m instanceof Error ? m.message : "Failed to fetch data", console.error("mint-resource-table: Error fetching data", m), this._updateSearchIcon(), ((u = (f = this.querySelector(`#${this._tableId}`)) == null ? void 0 : f.closest("table")) == null ? void 0 : u.querySelector("tbody")) ? (this._updateTableBody(), this._updatePagination()) : this.render();
     }
   }
   _getRows() {
@@ -6375,49 +6375,49 @@ class xt extends HTMLElement {
     let r = "";
     if (!((this._fetching || this._loading) && !this._sorting) && (t.forEach((l, c) => {
       const h = typeof this._configuration.onRowClick == "function", p = h ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
-      r += `<tr data-row-index="${c}" ${h ? 'data-row-clickable="true"' : ""}${p ? ` class="${p}"` : ""}>`, this._configuration.columns.forEach((d, u) => {
+      r += `<tr data-row-index="${c}" ${h ? 'data-row-clickable="true"' : ""}${p ? ` class="${p}"` : ""}>`, this._configuration.columns.forEach((d, f) => {
         if (d.hidden) return;
-        const _ = !d.show || d.show(this, l);
-        if (r += `<td style="${this._getStyle(d)}" class="${this._getClasses(d, !0)}">`, _)
+        const u = !d.show || d.show(this, l);
+        if (r += `<td style="${this._getStyle(d)}" class="${this._getClasses(d, !0)}">`, u)
           if (d.raw)
             if (d.action)
               (!d.action.show || d.action.show(this, l)) && (r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(d)}">${d.action.label}</mint-button>`);
             else if (d.actions)
               if (d.actionStyle !== "buttons") {
-                const f = `actions-popover-${this._tableId}-${c}`, m = `actions-button-${this._tableId}-${c}`;
-                r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, d.actions.forEach((g, b) => {
-                  if (!g.show || g.show(this, l)) {
-                    const v = typeof g.label == "function" ? g.label(this, l) : g.label;
-                    r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
+                const m = `actions-popover-${this._tableId}-${c}`, g = `actions-button-${this._tableId}-${c}`;
+                r += `<mint-button id="${g}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${m}" trigger-id="${g}" direction="down">`, d.actions.forEach((b, _) => {
+                  if (!b.show || b.show(this, l)) {
+                    const v = typeof b.label == "function" ? b.label(this, l) : b.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="${_}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
                   }
                 }), r += "</mint-popover>";
               } else
-                d.actions.forEach((f, m) => {
-                  if (!f.show || f.show(this, l)) {
-                    const g = f.label ? typeof f.label == "function" ? f.label(this, l) : f.label : "", b = f.icon ? ` icon="${this._escapeHtml(f.icon)}"` : "", v = f.tone ? ` tone="${this._escapeHtml(f.tone)}"` : "";
-                    r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(d)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
+                d.actions.forEach((m, g) => {
+                  if (!m.show || m.show(this, l)) {
+                    const b = m.label ? typeof m.label == "function" ? m.label(this, l) : m.label : "", _ = m.icon ? ` icon="${this._escapeHtml(m.icon)}"` : "", v = m.tone ? ` tone="${this._escapeHtml(m.tone)}"` : "";
+                    r += `<mint-button variant="link" class="${m.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${g}" data-column-key="${this._configuration.columns.indexOf(d)}"${_}${v}>`, b && (r += this._escapeHtml(String(b))), r += "</mint-button>";
                   }
                 });
             else typeof d.format == "function" ? r += d.format(this, l) : d.data && (r += this._escapeHtml(String(l[d.data] || "")));
           else if (d.action) {
             if (!d.action.show || d.action.show(this, l)) {
-              const f = typeof d.action.label == "function" ? d.action.label(this, l) : d.action.label;
-              r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(d)}">${this._escapeHtml(String(f))}</mint-button>`;
+              const m = typeof d.action.label == "function" ? d.action.label(this, l) : d.action.label;
+              r += `<mint-button variant="solid" data-action="column-action" data-row-index="${c}" data-column-key="${this._configuration.columns.indexOf(d)}">${this._escapeHtml(String(m))}</mint-button>`;
             }
           } else if (d.actions)
             if (d.actionStyle !== "buttons") {
-              const f = `actions-popover-${this._tableId}-${c}`, m = `actions-button-${this._tableId}-${c}`;
-              r += `<mint-button id="${m}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${f}" trigger-id="${m}" direction="down">`, d.actions.forEach((g, b) => {
-                if (!g.show || g.show(this, l)) {
-                  const v = typeof g.label == "function" ? g.label(this, l) : g.label;
-                  r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${c}" data-action-index="${b}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
+              const m = `actions-popover-${this._tableId}-${c}`, g = `actions-button-${this._tableId}-${c}`;
+              r += `<mint-button id="${g}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${m}" trigger-id="${g}" direction="down">`, d.actions.forEach((b, _) => {
+                if (!b.show || b.show(this, l)) {
+                  const v = typeof b.label == "function" ? b.label(this, l) : b.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="${_}" data-column-key="${this._configuration.columns.indexOf(d)}">${v}</div>`;
                 }
               }), r += "</mint-popover>";
             } else
-              d.actions.forEach((f, m) => {
-                if (!f.show || f.show(this, l)) {
-                  const g = f.label ? typeof f.label == "function" ? f.label(this, l) : f.label : "", b = f.icon ? ` icon="${this._escapeHtml(f.icon)}"` : "", v = f.tone ? ` tone="${this._escapeHtml(f.tone)}"` : "";
-                  r += `<mint-button variant="link" class="${f.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${m}" data-column-key="${this._configuration.columns.indexOf(d)}"${b}${v}>`, g && (r += this._escapeHtml(String(g))), r += "</mint-button>";
+              d.actions.forEach((m, g) => {
+                if (!m.show || m.show(this, l)) {
+                  const b = m.label ? typeof m.label == "function" ? m.label(this, l) : m.label : "", _ = m.icon ? ` icon="${this._escapeHtml(m.icon)}"` : "", v = m.tone ? ` tone="${this._escapeHtml(m.tone)}"` : "";
+                  r += `<mint-button variant="link" class="${m.classes || ""}" data-action="row-action" data-row-index="${c}" data-action-index="${g}" data-column-key="${this._configuration.columns.indexOf(d)}"${_}${v}>`, b && (r += this._escapeHtml(String(b))), r += "</mint-button>";
                 }
               });
           else typeof d.format == "function" ? r += this._escapeHtml(d.format(this, l)) : d.data && (r += this._escapeHtml(String(l[d.data] || "")));
@@ -6604,18 +6604,18 @@ class xt extends HTMLElement {
                 }
               } else if (c.actions)
                 if (c.actionStyle !== "buttons") {
-                  const d = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
-                  s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
-                    if (!_.show || _.show(this, r)) {
-                      const m = typeof _.label == "function" ? _.label(this, r) : _.label;
-                      s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(m))}</div>`;
+                  const d = `actions-popover-${this._tableId}-${a}`, f = `actions-button-${this._tableId}-${a}`;
+                  s += `<mint-button id="${f}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${f}" direction="down">`, c.actions.forEach((u, m) => {
+                    if (!u.show || u.show(this, r)) {
+                      const g = typeof u.label == "function" ? u.label(this, r) : u.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="${m}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(g))}</div>`;
                     }
                   }), s += "</mint-popover>";
                 } else
-                  c.actions.forEach((d, u) => {
+                  c.actions.forEach((d, f) => {
                     if (!d.show || d.show(this, r)) {
-                      const _ = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", f = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", m = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
-                      s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
+                      const u = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", m = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", g = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
+                      s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}"${m}${g}>`, u && (s += this._escapeHtml(String(u))), s += "</mint-button>";
                     }
                   });
               else typeof c.format == "function" ? s += c.format(this, r) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
@@ -6623,18 +6623,18 @@ class xt extends HTMLElement {
               (!c.action.show || c.action.show(this, r)) && (s += `<mint-button variant="solid" data-action="column-action" data-row-index="${a}" data-column-key="${this._configuration.columns.indexOf(c)}">${c.action.label}</mint-button>`);
             else if (c.actions)
               if (c.actionStyle !== "buttons") {
-                const d = `actions-popover-${this._tableId}-${a}`, u = `actions-button-${this._tableId}-${a}`;
-                s += `<mint-button id="${u}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${u}" direction="down">`, c.actions.forEach((_, f) => {
-                  if (!_.show || _.show(this, r)) {
-                    const m = typeof _.label == "function" ? _.label(this, r) : _.label;
-                    s += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(m))}</div>`;
+                const d = `actions-popover-${this._tableId}-${a}`, f = `actions-button-${this._tableId}-${a}`;
+                s += `<mint-button id="${f}" variant="link" icon="ellipsis">`, s += "</mint-button>", s += `<mint-popover id="${d}" trigger-id="${f}" direction="down">`, c.actions.forEach((u, m) => {
+                  if (!u.show || u.show(this, r)) {
+                    const g = typeof u.label == "function" ? u.label(this, r) : u.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="${m}" data-column-key="${this._configuration.columns.indexOf(c)}">${this._escapeHtml(String(g))}</div>`;
                   }
                 }), s += "</mint-popover>";
               } else
-                c.actions.forEach((d, u) => {
+                c.actions.forEach((d, f) => {
                   if (!d.show || d.show(this, r)) {
-                    const _ = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", f = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", m = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
-                    s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${u}" data-column-key="${this._configuration.columns.indexOf(c)}"${f}${m}>`, _ && (s += this._escapeHtml(String(_))), s += "</mint-button>";
+                    const u = d.label ? typeof d.label == "function" ? d.label(this, r) : d.label : "", m = d.icon ? ` icon="${this._escapeHtml(d.icon)}"` : "", g = d.tone ? ` tone="${this._escapeHtml(d.tone)}"` : "";
+                    s += `<mint-button variant="link" class="${d.classes || ""}" data-action="row-action" data-row-index="${a}" data-action-index="${f}" data-column-key="${this._configuration.columns.indexOf(c)}"${m}${g}>`, u && (s += this._escapeHtml(String(u))), s += "</mint-button>";
                   }
                 });
             else typeof c.format == "function" ? s += this._escapeHtml(c.format(this, r)) : c.data && (s += this._escapeHtml(String(r[c.data] || "")));
@@ -6763,12 +6763,12 @@ class xt extends HTMLElement {
   }
 }
 customElements.get("mint-resource-table") || customElements.define("mint-resource-table", xt);
-class wt extends HTMLElement {
+class Ct extends HTMLElement {
   constructor() {
     super(), this._overlay = null, this._offCanvas = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._darkModeObserver = null;
   }
   static get observedAttributes() {
-    return ["id", "heading", "open", "position", "full-page"];
+    return ["id", "heading", "open", "position", "full-page", "width"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "inset-0", "z-50"), this.isOpen() || this.classList.add("hidden"), this.render(), this._observeDarkMode();
@@ -6791,13 +6791,16 @@ class wt extends HTMLElement {
     return t === "top" || t === "bottom" || t === "left" || t === "right" ? t : "right";
   }
   isFullPage() {
-    return this.hasAttribute("full-page");
+    return this.getAttribute("full-page") === "true";
+  }
+  getWidth() {
+    return this.getAttribute("width") || "w-80";
   }
   isOpen() {
-    return this.hasAttribute("open");
+    return this.getAttribute("open") === "true";
   }
   open() {
-    this.setAttribute("open", "");
+    this.setAttribute("open", "true");
   }
   close() {
     this.removeAttribute("open");
@@ -6808,9 +6811,17 @@ class wt extends HTMLElement {
     const r = this._getPositionClasses(s, n);
     this._offCanvas.className = r;
     let a = this._offCanvas.querySelector(".off-canvas-content");
-    a || (a = document.createElement("div"), a.className = "off-canvas-content bg-white dark:bg-gray-800 shadow-xl flex flex-col pointer-events-auto transition-all duration-300 ease-out", a.style.transform = this._getTransformValue(s, !1), this._offCanvas.appendChild(a)), i ? this._animateEnter() : this._animateExit(), a.classList.remove("w-full", "h-full", "max-w-sm", "max-w-md", "max-w-lg", "max-w-xl", "max-h-[90vh]", "max-h-screen"), n ? a.classList.add("w-full", "h-full") : s === "top" || s === "bottom" ? a.classList.add("w-full", "max-h-[90vh]") : a.classList.add("max-w-sm", "h-full"), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", a.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
-    let o = this._headingSlot.querySelector("mint-text");
-    e ? (o || (o = document.createElement("mint-text"), o.setAttribute("size", "sub-heading"), o.setAttribute("bold", ""), this._headingSlot.appendChild(o)), o.textContent = e) : o && o.remove(), Array.from(this.children).filter(
+    if (a || (a = document.createElement("div"), a.className = "off-canvas-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 shadow-xl flex flex-col pointer-events-auto transition-all duration-300 ease-out", a.style.transform = this._getTransformValue(s, !1), this._offCanvas.appendChild(a)), i ? this._animateEnter() : this._animateExit(), Array.from(a.classList).forEach((u) => {
+      (u.startsWith("w-") || u.startsWith("max-w-")) && a.classList.remove(u);
+    }), a.classList.remove("h-full", "max-h-[90vh]", "max-h-screen"), n)
+      a.classList.add("w-full", "h-full");
+    else {
+      const u = this.getWidth();
+      s === "top" || s === "bottom" ? a.classList.add("w-full", "max-h-[90vh]") : a.classList.add(u, "h-full");
+    }
+    this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", a.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
+    let l = this._headingSlot.querySelector("mint-text");
+    e ? (l || (l = document.createElement("mint-text"), l.setAttribute("size", "sub-heading"), l.setAttribute("bold", "true"), this._headingSlot.appendChild(l)), l.textContent = e) : l && l.remove(), Array.from(this.children).filter(
       (u) => u !== this._overlay && u !== this._offCanvas && u !== this._headingSlot && u.getAttribute("slot") === "heading"
     ).forEach((u) => {
       this._headingSlot && u.parentElement !== this._headingSlot && this._headingSlot.appendChild(u);
@@ -6819,12 +6830,12 @@ class wt extends HTMLElement {
     ).forEach((u) => {
       this._bodySlot && u.parentElement !== this._bodySlot && this._bodySlot.appendChild(u);
     }), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", this._actionsSlot.setAttribute("slot", "actions"), a.appendChild(this._actionsSlot));
-    let h = this._actionsSlot.querySelector("mint-stack");
-    h || (h = document.createElement("mint-stack"), h.setAttribute("direction", "horizontal"), h.className = "justify-end", this._actionsSlot.appendChild(h)), Array.from(this.children).filter(
+    let p = this._actionsSlot.querySelector("mint-stack");
+    p || (p = document.createElement("mint-stack"), p.setAttribute("direction", "horizontal"), p.className = "justify-end", this._actionsSlot.appendChild(p)), Array.from(this.children).filter(
       (u) => u !== this._overlay && u !== this._offCanvas && u !== this._actionsSlot && u.getAttribute("slot") === "actions"
     ).forEach((u) => {
-      Array.from(u.children).forEach((f) => {
-        f.parentElement !== h && h.appendChild(f);
+      Array.from(u.children).forEach((g) => {
+        g.parentElement !== p && p.appendChild(g);
       }), u.parentElement && u.remove();
     }), Array.from(this.children).forEach((u) => {
       u !== this._overlay && u !== this._offCanvas && u.getAttribute("slot") !== "heading" && u.getAttribute("slot") !== "body" && u.getAttribute("slot") !== "actions" && u !== this._headingSlot && u !== this._bodySlot && u !== this._actionsSlot && u.parentElement !== this._bodySlot && this._bodySlot.appendChild(u);
@@ -6876,7 +6887,7 @@ class wt extends HTMLElement {
   _updateBackgroundColor() {
     if (!this._offCanvas) return;
     const t = document.documentElement.classList.contains("dark"), e = this._offCanvas.querySelector(".off-canvas-content");
-    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-800")) : (e.classList.remove("bg-gray-800"), e.classList.add("bg-white")));
+    e && (t ? (e.classList.remove("bg-white"), e.classList.add("bg-gray-900", "border", "border-gray-700")) : (e.classList.remove("bg-gray-900", "border", "border-gray-700"), e.classList.add("bg-white")));
   }
   _observeDarkMode() {
     this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -6910,7 +6921,294 @@ class wt extends HTMLElement {
     }, 300);
   }
 }
-customElements.get("mint-off-canvas") || customElements.define("mint-off-canvas", wt);
+customElements.get("mint-off-canvas") || customElements.define("mint-off-canvas", Ct);
+class wt extends HTMLElement {
+  constructor() {
+    super(), this._clickHandler = null;
+  }
+  static get observedAttributes() {
+    return ["active", "disabled", "target"];
+  }
+  connectedCallback() {
+    this.render(), this.setupEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.render();
+  }
+  getTarget() {
+    return this.getAttribute("target") || "";
+  }
+  isActive() {
+    const t = this.getAttribute("active");
+    return t !== null && t !== "false";
+  }
+  isDisabled() {
+    return this.getAttribute("disabled") === "true";
+  }
+  get active() {
+    return this.isActive();
+  }
+  set active(t) {
+    t ? this.setAttribute("active", "true") : this.setAttribute("active", "false");
+  }
+  render() {
+    const t = this.isActive(), e = this.isDisabled();
+    this.className = "", this.classList.add(
+      "box-border",
+      "m-0",
+      "p-0",
+      "border-0",
+      "inline-block",
+      "cursor-pointer",
+      "px-4",
+      "py-1.5",
+      "text-sm",
+      "font-medium",
+      "transition-all",
+      "duration-200",
+      "rounded-lg",
+      "border",
+      "text-gray-700",
+      "dark:text-gray-300"
+    );
+    const i = this.closest("mint-tab-list"), s = (i == null ? void 0 : i.getAttribute("position")) || "top", n = s === "left" || s === "right";
+    e ? (this.classList.add(
+      "opacity-60",
+      "cursor-not-allowed",
+      "pointer-events-none",
+      "bg-gray-50",
+      "dark:bg-gray-900",
+      "border-gray-300",
+      "dark:border-gray-700",
+      "text-gray-400",
+      "dark:text-gray-500"
+    ), this.classList.remove("cursor-pointer")) : t ? (this.classList.add(
+      "bg-white",
+      "dark:bg-gray-900",
+      "border-gray-200",
+      "dark:border-gray-700",
+      "text-gray-900",
+      "dark:text-gray-100",
+      "shadow-sm",
+      "relative",
+      "z-10"
+    ), n ? s === "left" ? this.classList.add("mr-[-1px]") : this.classList.add("ml-[-1px]") : this.classList.add("mb-[-1px]")) : this.classList.add(
+      "bg-gray-100",
+      "dark:bg-gray-900",
+      "border-gray-200",
+      "dark:border-gray-700",
+      "text-gray-600",
+      "dark:text-gray-400",
+      "hover:bg-gray-50",
+      "dark:hover:bg-gray-600"
+    );
+  }
+  setupEventListeners() {
+    this.isDisabled() || this._clickHandler || (this._clickHandler = this.handleClick.bind(this), this.addEventListener("click", this._clickHandler));
+  }
+  removeEventListeners() {
+    this._clickHandler && (this.removeEventListener("click", this._clickHandler), this._clickHandler = null);
+  }
+  handleClick(t) {
+    if (this.isDisabled()) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    t.__mintTabsSynthetic || (t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("tab-click", {
+        detail: { tab: this, target: this.getTarget() },
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      })
+    ));
+  }
+}
+customElements.get("mint-tab") || customElements.define("mint-tab", wt);
+class At extends HTMLElement {
+  static get observedAttributes() {
+    return ["position"];
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.render();
+  }
+  getPosition() {
+    return this.getAttribute("position") || "top";
+  }
+  render() {
+    const t = this.getPosition();
+    this.classList.remove(
+      "flex",
+      "inline-flex",
+      "flex-row",
+      "flex-col",
+      "gap-1",
+      "gap-2",
+      "pb-0",
+      "pr-0",
+      "pl-0",
+      "mb-0",
+      "mr-0",
+      "ml-0",
+      "self-start"
+    ), this.classList.add("box-border", "m-0", "p-1", "border", "bg-gray-100", "dark:bg-gray-900", "dark:border-gray-700", "border-gray-200", "w-auto", "rounded-lg", "gap-2"), t === "top" ? this.classList.add(
+      "inline-flex",
+      "flex-row",
+      "mb-0",
+      "self-start"
+    ) : t === "left" ? this.classList.add(
+      "flex",
+      "flex-col",
+      "mr-0"
+    ) : t === "right" && this.classList.add(
+      "flex",
+      "flex-col",
+      "ml-0"
+    );
+  }
+}
+customElements.get("mint-tab-list") || customElements.define("mint-tab-list", At);
+class St extends HTMLElement {
+  static get observedAttributes() {
+    return ["id"];
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "block", "w-full"), this.render(), this.checkInitialVisibility();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && t === "id" && (this.render(), this.checkInitialVisibility());
+  }
+  getId() {
+    return this.getAttribute("id") || "";
+  }
+  show() {
+    this.style.display = "block";
+  }
+  hide() {
+    this.style.display = "none";
+  }
+  checkInitialVisibility() {
+    const t = this.closest("mint-tabs");
+    if (!t) {
+      this.style.display = "none";
+      return;
+    }
+    const e = t.querySelectorAll("mint-tab");
+    let i = !1;
+    if (e.forEach((s) => {
+      const n = s.getAttribute("active"), r = s.getAttribute("target"), a = this.getId();
+      n === "true" && r === a && (i = !0);
+    }), !i && e.length > 0) {
+      const n = e[0].getAttribute("target"), r = this.getId();
+      n === r && !t.querySelector('mint-tab[active="true"]') && (i = !0);
+    }
+    i ? this.style.display = "block" : this.style.display = "none";
+  }
+  render() {
+  }
+}
+customElements.get("mint-tab-content") || customElements.define("mint-tab-content", St);
+class Lt extends HTMLElement {
+  constructor() {
+    super(), this._tabClickHandler = null, this._mutationObserver = null;
+  }
+  connectedCallback() {
+    this.classList.add(
+      "box-border",
+      "m-0",
+      "p-0",
+      "border-0",
+      "block"
+    ), this.render(), this.setupEventListeners(), this.setupMutationObserver(), this.initializeActiveTab();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners(), this._mutationObserver && (this._mutationObserver.disconnect(), this._mutationObserver = null);
+  }
+  render() {
+    const t = this.querySelector("mint-tab-list");
+    if (this.querySelectorAll("mint-tab-content"), !t) {
+      console.warn("mint-tabs: mint-tab-list is required");
+      return;
+    }
+    const e = t.getAttribute("position") || "top";
+    this.classList.remove("flex", "flex-row", "flex-col", "gap-4", "gap-6"), e === "left" || e === "right" ? (this.classList.add("flex", "flex-row", "items-start"), e === "left" ? (t.classList.add("mr-4", "flex-shrink-0"), t.classList.remove("ml-4")) : (t.classList.add("ml-4", "flex-shrink-0", "order-2"), t.classList.remove("mr-4"), this.querySelectorAll("mint-tab-content").forEach((s) => {
+      s.classList.add("order-1");
+    }))) : (this.classList.add("flex", "flex-col"), t.classList.remove("mr-4", "ml-4", "flex-shrink-0", "order-2"), this.querySelectorAll("mint-tab-content").forEach((s) => {
+      s.classList.remove("order-1");
+    }));
+  }
+  initializeActiveTab() {
+    requestAnimationFrame(() => {
+      const t = this.querySelectorAll("mint-tab");
+      let e = null;
+      if (t.forEach((s) => {
+        s.getAttribute("active") === "true" && (e = s);
+      }), !e && t.length > 0 && (e = t[0], e.setAttribute("active", "true")), e) {
+        const s = e.getAttribute("target");
+        s ? this.showContent(s) : this.hideAllContent();
+      } else
+        this.hideAllContent();
+      this.querySelectorAll("mint-tab-content").forEach((s) => {
+        const n = s;
+        n.checkInitialVisibility && n.checkInitialVisibility();
+      });
+    });
+  }
+  hideAllContent() {
+    this.querySelectorAll("mint-tab-content").forEach((e) => {
+      const i = e;
+      i.hide ? i.hide() : e.style.display = "none";
+    });
+  }
+  showContent(t) {
+    this.querySelectorAll("mint-tab-content").forEach((s) => {
+      const n = s;
+      n.hide ? n.hide() : s.style.display = "none";
+    });
+    const i = this.querySelector(`mint-tab-content[id="${t}"]`);
+    i && (i.show ? i.show() : i.style.display = "block");
+  }
+  setupEventListeners() {
+    this._tabClickHandler || (this._tabClickHandler = this.handleTabClick.bind(this), this.addEventListener("tab-click", this._tabClickHandler));
+  }
+  removeEventListeners() {
+    this._tabClickHandler && (this.removeEventListener("tab-click", this._tabClickHandler), this._tabClickHandler = null);
+  }
+  setupMutationObserver() {
+    this._mutationObserver = new MutationObserver(() => {
+      this.render();
+    });
+    const t = this.querySelector("mint-tab-list");
+    t && this._mutationObserver.observe(t, {
+      attributes: !0,
+      attributeFilter: ["position"]
+    });
+  }
+  handleTabClick(t) {
+    var r, a;
+    const e = (r = t.detail) == null ? void 0 : r.tab, i = (a = t.detail) == null ? void 0 : a.target;
+    if (!e) return;
+    const s = e.closest("mint-tab-list");
+    if (!s) return;
+    s.querySelectorAll("mint-tab").forEach((o) => {
+      const l = o;
+      o === e ? l.active = !0 : l.active = !1;
+    }), i && this.showContent(i);
+  }
+}
+customElements.get("mint-tabs") || customElements.define("mint-tabs", Lt);
 export {
   Et as Alert,
   nt as BackButton,
@@ -6922,13 +7220,13 @@ export {
   kt as Clickable,
   ft as DatePicker,
   gt as Dropzone,
-  _t as Form,
+  bt as Form,
   ot as Grid,
   Q as Icon,
   pt as Input,
   rt as Link,
   lt as Modal,
-  wt as OffCanvas,
+  Ct as OffCanvas,
   at as Page,
   ct as Popover,
   xt as ResourceTable,
@@ -6936,7 +7234,11 @@ export {
   Z as Spinner,
   it as Stack,
   tt as Switch,
-  bt as Table,
+  wt as Tab,
+  St as TabContent,
+  At as TabList,
+  _t as Table,
+  Lt as Tabs,
   yt as Tags,
   et as Text,
   U as default