monobill-mintui 0.4.2 → 0.4.3

package/dist/Icon-BTuYBm_3.cjs

@@ -0,0 +1 @@
+var e=new Map;function t(t){e.set(t.name,t)}function n(t){return e.get(t)}function r(t){return e.has(t)}function i(){return Array.from(e.values())}var a=class extends HTMLElement{static get observedAttributes(){return[`name`]}constructor(){super(),this._darkModeObserver=null}connectedCallback(){this.classList.add(`box-border`,`m-0`,`p-0`,`border-0`,`inline-flex`,`items-center`,`leading-none`),this.render(),this._observeDarkMode()}attributeChangedCallback(e,t,n){t!==n&&this.render()}disconnectedCallback(){this._darkModeObserver&&=(this._darkModeObserver.disconnect(),null)}_observeDarkMode(){this._darkModeObserver||(this._darkModeObserver=new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`&&t.attributeName===`class`){this.render();break}}),this._darkModeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}))}getName(){return this.getAttribute(`name`)||``}getIconUrl(){let e=document.documentElement.getAttribute(`data-icon-base-url`)||document.querySelector(`meta[name="icon-base-url"]`)?.getAttribute(`content`);return e?`${e}/${this.getName()}.svg`:`/icons/${this.getName()}.svg`}render(){let e=this.getName();if(!e){this.innerHTML=``,this.style.maskImage=``,this.style.webkitMaskImage=``;return}if(!n(e)){console.warn(`Icon "${e}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${e}'`),this.innerHTML=``,this.style.maskImage=``,this.style.webkitMaskImage=``;return}let t=this.closest(`mint-button`)||this.parentElement?.closest(`mint-button`),r=this.closest(`mint-switch`)||this.parentElement?.closest(`mint-switch`),i;i=r?`w-3 h-3`:t?`w-5 h-5`:`w-[1.3em] h-[1.3em]`,this.classList.remove(`w-4`,`h-4`,`w-5`,`h-5`,`w-[1em]`,`h-[1em]`),i.split(` `).forEach(e=>{e&&this.classList.add(e)});let a=this.getIconUrl();if(this.style.maskImage=`url(${a})`,this.style.webkitMaskImage=`url(${a})`,this.style.maskSize=`contain`,this.style.webkitMaskSize=`contain`,this.style.maskRepeat=`no-repeat`,this.style.webkitMaskRepeat=`no-repeat`,this.style.maskPosition=`center`,this.style.webkitMaskPosition=`center`,this.style.aspectRatio=`1 / 1`,this.style.backgroundColor=`currentColor`,r)this.classList.remove(`text-gray-100`,`text-gray-900`),this.classList.add(`text-gray-900`);else if(t)this.classList.remove(`text-gray-100`,`text-gray-900`);else{let e=document.documentElement.classList.contains(`dark`)?`text-gray-100`:`text-gray-900`;this.classList.remove(`text-gray-100`,`text-gray-900`),this.classList.add(e)}this.innerHTML=``}};customElements.get(`mint-icon`)||customElements.define(`mint-icon`,a),Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/dist/Icon-ByNhn8tE.js

@@ -0,0 +1,77 @@
+//#region src/components/icon/registry.js
+var e = /* @__PURE__ */ new Map();
+function t(t) {
+	e.set(t.name, t);
+}
+function n(t) {
+	return e.get(t);
+}
+function r(t) {
+	return e.has(t);
+}
+function i() {
+	return Array.from(e.values());
+}
+//#endregion
+//#region src/components/icon/Icon.js
+var a = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["name"];
+	}
+	constructor() {
+		super(), this._darkModeObserver = null;
+	}
+	connectedCallback() {
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "inline-flex", "items-center", "leading-none"), this.render(), this._observeDarkMode();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	disconnectedCallback() {
+		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null);
+	}
+	_observeDarkMode() {
+		this._darkModeObserver || (this._darkModeObserver = new MutationObserver((e) => {
+			for (let t of e) if (t.type === "attributes" && t.attributeName === "class") {
+				this.render();
+				break;
+			}
+		}), this._darkModeObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}));
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getIconUrl() {
+		let e = document.documentElement.getAttribute("data-icon-base-url") || document.querySelector("meta[name=\"icon-base-url\"]")?.getAttribute("content");
+		return e ? `${e}/${this.getName()}.svg` : `/icons/${this.getName()}.svg`;
+	}
+	render() {
+		let e = this.getName();
+		if (!e) {
+			this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
+			return;
+		}
+		if (!n(e)) {
+			console.warn(`Icon "${e}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${e}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
+			return;
+		}
+		let t = this.closest("mint-button") || this.parentElement?.closest("mint-button"), r = this.closest("mint-switch") || this.parentElement?.closest("mint-switch"), i;
+		i = r ? "w-3 h-3" : t ? "w-5 h-5" : "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]"), i.split(" ").forEach((e) => {
+			e && this.classList.add(e);
+		});
+		let a = this.getIconUrl();
+		if (this.style.maskImage = `url(${a})`, this.style.webkitMaskImage = `url(${a})`, this.style.maskSize = "contain", this.style.webkitMaskSize = "contain", this.style.maskRepeat = "no-repeat", this.style.webkitMaskRepeat = "no-repeat", this.style.maskPosition = "center", this.style.webkitMaskPosition = "center", this.style.aspectRatio = "1 / 1", this.style.backgroundColor = "currentColor", r) this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add("text-gray-900");
+		else if (t) this.classList.remove("text-gray-100", "text-gray-900");
+		else {
+			let e = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
+			this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(e);
+		}
+		this.innerHTML = "";
+	}
+};
+customElements.get("mint-icon") || customElements.define("mint-icon", a);
+//#endregion
+export { t as a, r as i, i as n, n as r, a as t };

package/dist/button-CAQ8mBQ2.js

@@ -0,0 +1,575 @@
+import "./spinner-DqXU-cr-.js";
+import "./icon-D8dpuFVm.js";
+//#region src/components/button/Button.js
+var e = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"variant",
+			"tone",
+			"disabled",
+			"loading",
+			"button-type",
+			"full-width",
+			"icon-position",
+			"icon"
+		];
+	}
+	constructor() {
+		super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1;
+	}
+	connectedCallback() {
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._button && this.setupEventListeners(), this.isFullWidth() && this.classList.add("w-full");
+	}
+	disconnectedCallback() {
+		this.removeEventListeners();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	getVariant() {
+		return this.getAttribute("variant") || "solid";
+	}
+	getTone() {
+		return this.getAttribute("tone") || "neutral";
+	}
+	isDisabled() {
+		return this.hasAttribute("disabled");
+	}
+	isLoading() {
+		return this.hasAttribute("loading");
+	}
+	getType() {
+		return (this.getAttribute("button-type") || "default") === "submit" ? "submit" : "button";
+	}
+	isFullWidth() {
+		return this.hasAttribute("full-width");
+	}
+	getIconPosition() {
+		return this.getAttribute("icon-position") || "left";
+	}
+	getIcon() {
+		return this.getAttribute("icon") || "";
+	}
+	isIconOnly() {
+		if (!(this.getIcon() || this._button?.querySelector("[slot=\"icon\"], .mint-button-icon, mint-icon"))) return !1;
+		let e = this._button?.querySelector(".mint-button-content");
+		if (e && e.textContent.trim()) return !1;
+		if (this._button) {
+			for (let e = this._button.firstChild; e; e = e.nextSibling) if (e.nodeType === Node.TEXT_NODE && e.textContent.trim() || e.nodeType === Node.ELEMENT_NODE && e.tagName !== "MINT-ICON" && e.tagName !== "MINT-SPINNER" && !e.querySelector?.("mint-spinner") && !e.hasAttribute?.("slot") && e.className !== "mint-button-icon" && !(e.className === "mr-2" && e.querySelector("mint-spinner")) && e.textContent.trim()) return !1;
+		}
+		return !0;
+	}
+	getButtonClasses() {
+		let e = this.isIconOnly(), t = this.getVariant(), n = [
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"font-medium",
+			"rounded-lg",
+			"box-border",
+			...e ? [
+				"p-1.5",
+				"aspect-square",
+				"w-[2rem]",
+				"h-[2rem]"
+			] : [
+				"px-3.5",
+				"py-1.5",
+				"min-h-[2rem]"
+			],
+			"text-sm",
+			"transition-all",
+			"duration-200",
+			"outline-none",
+			"focus:outline-none",
+			"focus-visible:ring-2",
+			"focus-visible:ring-offset-2",
+			"[&.mint-button-active>*]:scale-95",
+			"[&>*]:transition-transform",
+			"[&>*]:duration-100",
+			"disabled:opacity-50",
+			"disabled:cursor-not-allowed"
+		], r = this.getTone(), i = {
+			"solid-action": [
+				"bg-slate-800",
+				"dark:bg-slate-600",
+				"text-white",
+				"hover:bg-slate-950",
+				"dark:hover:bg-slate-700",
+				"active:bg-slate-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-slate-700",
+				"disabled:active:bg-slate-800",
+				"dark:disabled:active:bg-slate-600",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-slate-500",
+				"dark:focus-visible:ring-slate-400",
+				"shadow-sm",
+				"hover:shadow",
+				"dark:shadow-gray-900/50",
+				"border-2",
+				"border-transparent"
+			],
+			"solid-neutral": [
+				"bg-white",
+				"dark:bg-gray-700",
+				"text-gray-900",
+				"dark:text-white",
+				"hover:bg-gray-50",
+				"dark:hover:bg-gray-600",
+				"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",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-sm",
+				"hover:shadow",
+				"dark:shadow-gray-900/50",
+				"border-2",
+				"border-gray-200",
+				"dark:border-gray-600"
+			],
+			"solid-info": [
+				"bg-blue-800",
+				"dark:bg-blue-600",
+				"text-white",
+				"hover:bg-blue-950",
+				"dark:hover:bg-blue-700",
+				"active:bg-blue-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-blue-700",
+				"disabled:active:bg-blue-800",
+				"dark:disabled:active:bg-blue-600",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-blue-500",
+				"dark:focus-visible:ring-blue-400",
+				"shadow-sm",
+				"hover:shadow",
+				"dark:shadow-gray-900/50",
+				"border-2",
+				"border-transparent"
+			],
+			"solid-warning": [
+				"bg-amber-800",
+				"dark:bg-amber-600",
+				"text-white",
+				"hover:bg-amber-950",
+				"dark:hover:bg-amber-700",
+				"active:bg-amber-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-amber-700",
+				"disabled:active:bg-amber-800",
+				"dark:disabled:active:bg-amber-600",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-amber-500",
+				"dark:focus-visible:ring-amber-400",
+				"shadow-sm",
+				"hover:shadow",
+				"dark:shadow-gray-900/50",
+				"border-2",
+				"border-transparent"
+			],
+			"solid-danger": [
+				"bg-red-800",
+				"dark:bg-red-600",
+				"text-white",
+				"hover:bg-red-950",
+				"dark:hover:bg-red-700",
+				"active:bg-red-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-red-700",
+				"disabled:active:bg-red-800",
+				"dark:disabled:active:bg-red-600",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-red-500",
+				"dark:focus-visible:ring-red-400",
+				"shadow-sm",
+				"hover:shadow",
+				"dark:shadow-gray-900/50",
+				"border-2",
+				"border-transparent"
+			],
+			"outline-action": [
+				"bg-transparent",
+				"border-2",
+				"border-slate-700",
+				"dark:border-slate-500",
+				"text-slate-800",
+				"dark:text-slate-600",
+				"hover:bg-slate-800",
+				"dark:hover:bg-slate-600",
+				"hover:text-white",
+				"active:bg-slate-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-slate-700",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-slate-500",
+				"dark:focus-visible:ring-slate-400",
+				"shadow-none",
+				"hover:shadow-sm"
+			],
+			"outline-neutral": [
+				"bg-transparent",
+				"border-2",
+				"border-gray-300",
+				"dark:border-gray-500",
+				"text-gray-700",
+				"dark:text-gray-200",
+				"hover:bg-white",
+				"dark:hover:bg-gray-700",
+				"hover:text-gray-900",
+				"dark:hover:text-white",
+				"active:bg-gray-50",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-sm"
+			],
+			"outline-info": [
+				"bg-transparent",
+				"border-2",
+				"border-blue-700",
+				"dark:border-blue-500",
+				"text-blue-800",
+				"dark:text-blue-600",
+				"hover:bg-blue-800",
+				"dark:hover:bg-blue-600",
+				"hover:text-white",
+				"active:bg-blue-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-blue-700",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-blue-500",
+				"dark:focus-visible:ring-blue-400",
+				"shadow-none",
+				"hover:shadow-sm"
+			],
+			"outline-warning": [
+				"bg-transparent",
+				"border-2",
+				"border-amber-700",
+				"dark:border-amber-500",
+				"text-amber-800",
+				"dark:text-amber-600",
+				"hover:bg-amber-800",
+				"dark:hover:bg-amber-600",
+				"hover:text-white",
+				"active:bg-amber-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-amber-700",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-amber-500",
+				"dark:focus-visible:ring-amber-400",
+				"shadow-none",
+				"hover:shadow-sm"
+			],
+			"outline-danger": [
+				"bg-transparent",
+				"border-2",
+				"border-red-700",
+				"dark:border-red-500",
+				"text-red-800",
+				"dark:text-red-600",
+				"hover:bg-red-800",
+				"dark:hover:bg-red-600",
+				"hover:text-white",
+				"active:bg-red-900",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
+				"dark:active:bg-red-700",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-red-500",
+				"dark:focus-visible:ring-red-400",
+				"shadow-none",
+				"hover:shadow-sm"
+			],
+			"ghost-action": [
+				"bg-transparent",
+				"text-slate-800",
+				"dark:text-slate-400",
+				"active:bg-gray-100",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"ghost-neutral": [
+				"bg-transparent",
+				"text-gray-700",
+				"dark:text-gray-200",
+				"active:bg-gray-50",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"active:text-gray-900",
+				"dark:active:text-white",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"ghost-info": [
+				"bg-transparent",
+				"text-blue-800",
+				"dark:text-blue-400",
+				"active:bg-gray-100",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"ghost-warning": [
+				"bg-transparent",
+				"text-amber-800",
+				"dark:text-amber-400",
+				"active:bg-gray-100",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"ghost-danger": [
+				"bg-transparent",
+				"text-red-800",
+				"dark:text-red-400",
+				"active:bg-gray-100",
+				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
+				"dark:active:bg-gray-800",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"link-action": [
+				"bg-transparent",
+				"text-slate-800",
+				"dark:text-slate-400",
+				"hover:text-slate-950",
+				"dark:hover:text-slate-200",
+				"active:text-slate-900",
+				"dark:active:text-slate-300",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-slate-500",
+				"dark:focus-visible:ring-slate-400",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"link-neutral": [
+				"bg-transparent",
+				"text-gray-700",
+				"dark:text-gray-300",
+				"hover:text-gray-900",
+				"dark:hover:text-gray-100",
+				"active:text-gray-950",
+				"dark:active:text-gray-200",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-gray-400",
+				"dark:focus-visible:ring-gray-500",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"link-info": [
+				"bg-transparent",
+				"text-blue-800",
+				"dark:text-blue-400",
+				"hover:text-blue-950",
+				"dark:hover:text-blue-300",
+				"active:text-blue-900",
+				"dark:active:text-blue-200",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-blue-500",
+				"dark:focus-visible:ring-blue-400",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"link-warning": [
+				"bg-transparent",
+				"text-amber-800",
+				"dark:text-amber-400",
+				"hover:text-amber-950",
+				"dark:hover:text-amber-300",
+				"active:text-amber-900",
+				"dark:active:text-amber-200",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-amber-500",
+				"dark:focus-visible:ring-amber-400",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			],
+			"link-danger": [
+				"bg-transparent",
+				"text-red-800",
+				"dark:text-red-400",
+				"hover:text-red-950",
+				"dark:hover:text-red-300",
+				"active:text-red-900",
+				"dark:active:text-red-200",
+				"disabled:active:bg-transparent",
+				"dark:disabled:active:bg-transparent",
+				"disabled:active:shadow-none",
+				"focus-visible:ring-red-500",
+				"dark:focus-visible:ring-red-400",
+				"shadow-none",
+				"hover:shadow-none",
+				"border-2",
+				"border-transparent"
+			]
+		}, a = i[`${t}-${r}`] || i["solid-neutral"], o = [...n, ...a];
+		return this.isFullWidth() && o.push("w-full"), o.join(" ");
+	}
+	render() {
+		let e = this.isDisabled() || this.isLoading(), t = this.getType();
+		if (!this._button) {
+			for (this._button = document.createElement("button"); this.firstChild;) this._button.appendChild(this.firstChild);
+			this.appendChild(this._button), this.setupEventListeners();
+		}
+		this._button.type = t, this._button.disabled = e;
+		let n = this._button.querySelector("mint-spinner");
+		if (this.isLoading()) if (n) n.setAttribute("data-button-variant", this.getVariant()), n.setAttribute("data-button-tone", this.getTone()), n.render();
+		else {
+			let e = document.createElement("span");
+			e.className = "mr-2 inline-flex items-center";
+			let t = document.createElement("mint-spinner");
+			t.setAttribute("size", "default"), t.setAttribute("data-button-variant", this.getVariant()), t.setAttribute("data-button-tone", this.getTone()), t.style.width = "0.875rem", t.style.height = "0.875rem", e.appendChild(t), this._button.insertBefore(e, this._button.firstChild);
+		}
+		else n && n.parentElement?.remove();
+		for (; this.firstChild && this.firstChild !== this._button;) this._button.appendChild(this.firstChild);
+		let r = this.getIcon(), i = this._button.querySelector("[slot=\"icon\"], .mint-button-icon, mint-icon");
+		r ? (i && i.tagName !== "MINT-ICON" && (i.remove(), i = null), !i || i.tagName !== "MINT-ICON" ? (i = document.createElement("mint-icon"), i.setAttribute("name", r), i.className = "mint-button-icon") : i.setAttribute("name", r)) : i && i.tagName === "MINT-ICON" && (i.remove(), i = null), i ||= this._button.querySelector("[slot=\"icon\"], .mint-button-icon");
+		let a = this.getIconPosition(), o = this._button.querySelector(".mint-button-content");
+		if (o) {
+			let e = i && i.tagName === "MINT-ICON";
+			if (i && !i.parentElement) {
+				let t = this._button.querySelector("mint-spinner")?.parentElement;
+				e || a === "left" ? t ? t.insertAdjacentElement("afterend", i) : this._button.insertBefore(i, o) : o.insertAdjacentElement("afterend", i);
+			} else if (i && (e || a === "left") && i.nextSibling !== o) {
+				i.remove();
+				let e = this._button.querySelector("mint-spinner")?.parentElement;
+				e ? e.insertAdjacentElement("afterend", i) : this._button.insertBefore(i, o);
+			} else i && !e && a === "right" && i.previousSibling !== o && (i.remove(), o.insertAdjacentElement("afterend", i));
+		} else {
+			let e = [];
+			for (let t = this._button.firstChild; t; t = t.nextSibling) t.tagName !== "MINT-SPINNER" && !t.querySelector?.("mint-spinner") && t !== i && !t.hasAttribute?.("slot") && !(t.className === "mr-2" && t.querySelector("mint-spinner")) && e.push(t);
+			if (e.length > 0) {
+				o = document.createElement("span"), o.className = "mint-button-content inline-flex items-center", e.forEach((e) => {
+					o.appendChild(e);
+				});
+				let t = this._button.querySelector("mint-spinner")?.parentElement;
+				i && a === "left" ? t ? (t.insertAdjacentElement("afterend", i), i.insertAdjacentElement("afterend", o)) : (this._button.insertBefore(i, this._button.firstChild), i.insertAdjacentElement("afterend", o)) : i && a === "right" ? t ? (t.insertAdjacentElement("afterend", o), o.insertAdjacentElement("afterend", i)) : (this._button.insertBefore(o, this._button.firstChild), o.insertAdjacentElement("afterend", i)) : t ? t.insertAdjacentElement("afterend", o) : this._button.insertBefore(o, this._button.firstChild);
+			} else if (i && i.tagName === "MINT-ICON" && !i.parentElement) {
+				let e = this._button.querySelector("mint-spinner")?.parentElement;
+				e ? e.insertAdjacentElement("afterend", i) : this._button.insertBefore(i, this._button.firstChild);
+			}
+		}
+		let s = this.isIconOnly();
+		i && (i.classList.contains("mint-button-icon") || i.classList.add("mint-button-icon"), i.classList.remove("mr-1.5", "ml-1.5"), s ? i.tagName === "MINT-ICON" ? (i.style.width = "1rem", i.style.height = "1rem", i.style.maxWidth = "1rem", i.style.maxHeight = "1rem", i.style.flexShrink = "0") : (i.style.maxWidth = "1rem", i.style.maxHeight = "1rem", i.style.flexShrink = "0", i.tagName === "svg" && (i.style.width = "1rem", i.style.height = "1rem")) : a === "left" ? i.classList.add("mr-1.5") : i.classList.add("ml-1.5"));
+		let c = this.getButtonClasses();
+		this._button.className = c;
+	}
+	setupEventListeners() {
+		this._button && !this._clickHandler && (this._clickHandler = this.handleClick.bind(this), this._button.addEventListener("click", this._clickHandler, !0), this._button.addEventListener("mousedown", this._handleMouseDown), this._button.addEventListener("mouseup", this._handleMouseUp), this._button.addEventListener("mouseleave", this._handleMouseLeave), this._button.addEventListener("touchstart", this._handleTouchStart), this._button.addEventListener("touchend", this._handleTouchEnd), this._button.addEventListener("touchcancel", this._handleTouchCancel));
+	}
+	removeEventListeners() {
+		this._button && (this._clickHandler &&= (this._button.removeEventListener("click", this._clickHandler, !0), null), this._button.removeEventListener("mousedown", this._handleMouseDown), this._button.removeEventListener("mouseup", this._handleMouseUp), this._button.removeEventListener("mouseleave", this._handleMouseLeave), this._button.removeEventListener("touchstart", this._handleTouchStart), this._button.removeEventListener("touchend", this._handleTouchEnd), this._button.removeEventListener("touchcancel", this._handleTouchCancel));
+	}
+	_handleMouseDown = () => {
+		this._button && !this.isDisabled() && !this.isLoading() && this._button.classList.add("mint-button-active");
+	};
+	_handleMouseUp = () => {
+		this._button && this._button.classList.remove("mint-button-active");
+	};
+	_handleMouseLeave = () => {
+		this._button && this._button.classList.remove("mint-button-active");
+	};
+	_handleTouchStart = () => {
+		this._button && !this.isDisabled() && !this.isLoading() && this._button.classList.add("mint-button-active");
+	};
+	_handleTouchEnd = () => {
+		this._button && this._button.classList.remove("mint-button-active");
+	};
+	_handleTouchCancel = () => {
+		this._button && this._button.classList.remove("mint-button-active");
+	};
+	handleClick(e) {
+		if (this.isDisabled() || this.isLoading()) {
+			e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
+			return;
+		}
+		if (e.stopPropagation(), e.stopImmediatePropagation(), this._isHandlingClick) {
+			e.preventDefault();
+			return;
+		}
+		this._isHandlingClick = !0, e.preventDefault(), this.dispatchEvent(new CustomEvent("click", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		})), requestAnimationFrame(() => {
+			this._isHandlingClick = !1;
+		});
+	}
+};
+customElements.get("mint-button") || customElements.define("mint-button", e);
+//#endregion
+export { e as t };