monobill-mintui 0.5.4 → 0.5.6

package/dist/index.js

@@ -1,4 +1,4 @@
-import { m as e } from "./search-Dva9OynX.js";
+import { m as e } from "./search-CzN2cZZy.js";
 //#region src/components/spinner/Spinner.ts
 var t = class extends HTMLElement {
 	static get observedAttributes() {
@@ -1227,7 +1227,7 @@ var s = class extends HTMLElement {
 		return Array.from(this.classList).some((e) => /^p-\d+|^px-|^py-|^pt-|^pb-|^pl-|^pr-/.test(e));
 	}
 	render() {
-		this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-mint-elevated", "border", "border-gray-200", "dark:border-mint-divider", "overflow-hidden"), this.hasPaddingClass() || this.classList.add("p-4");
+		this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-mint-elevated", "border", "border-gray-200", "dark:border-mint-divider"), this.hasPaddingClass() || this.classList.add("p-4");
 		let e = this.getHeading();
 		e ? (this._headingElement || (this._headingElement = document.createElement("mint-text"), this._headingElement.setAttribute("size", "sub-heading"), this.insertBefore(this._headingElement, this.firstChild)), this._headingElement.textContent = e) : this._headingElement && this._headingElement.parentNode && (this._headingElement.remove(), this._headingElement = null);
 	}
@@ -1406,7 +1406,7 @@ var u = class extends HTMLElement {
 		}), this._updateBackgroundColor();
 	}
 	_applyContainerClasses() {
-		this._pageContainer && (this._pageContainer.classList.add("p-8"), 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"));
+		this._pageContainer && (this._pageContainer.classList.add("p-5"), 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() {
 		this._pageContainer && (document.documentElement.classList.contains("dark") ? (this._pageContainer.classList.remove("bg-gray-20"), this._pageContainer.classList.add("bg-mint-canvas")) : (this._pageContainer.classList.remove("bg-mint-canvas"), this._pageContainer.classList.add("bg-gray-20")));
@@ -1603,7 +1603,8 @@ var p = class extends HTMLElement {
 			"open",
 			"trigger-id",
 			"padding",
-			"hover"
+			"hover",
+			"distance"
 		];
 	}
 	constructor() {
@@ -1671,6 +1672,21 @@ var p = class extends HTMLElement {
 	getTriggerId() {
 		return this.getAttribute("trigger-id") || "";
 	}
+	getDistance() {
+		return (this.getAttribute("distance") || "").trim();
+	}
+	_getDistancePx() {
+		let e = this.getDistance();
+		if (!e) return 8;
+		let t = e.match(/^(-?\d*\.?\d+)\s*(px|rem)$/i);
+		if (!t) return 8;
+		let n = parseFloat(t[1]), r = t[2].toLowerCase();
+		if (!Number.isFinite(n)) return 8;
+		let i = Math.max(0, n);
+		if (r === "px") return i;
+		let a = parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
+		return i * (Number.isFinite(a) ? a : 16);
+	}
 	isHoverEnabled() {
 		return this.getAttribute("hover") === "true";
 	}
@@ -1741,41 +1757,41 @@ var p = class extends HTMLElement {
 			direction: "down"
 		};
 		this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
-		let n = t.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this.getDirection(), o = 0, s = 0;
-		switch (a) {
+		let n = t.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this._getDistancePx(), o = this.getDirection(), s = 0, c = 0;
+		switch (o) {
 			case "down":
-				if (o = e.bottom + 8, s = e.left + e.width / 2 - n.width / 2, o + n.height > i) {
-					let t = e.top - n.height - 8;
-					t >= 0 ? (a = "up", o = t) : (o = Math.max(0, i - n.height - 8), o + n.height > i && (o = 0));
+				if (s = e.bottom + a, c = e.left + e.width / 2 - n.width / 2, s + n.height > i) {
+					let t = e.top - n.height - a;
+					t >= 0 ? (o = "up", s = t) : (s = Math.max(0, i - n.height - a), s + n.height > i && (s = 0));
 				}
-				s < 0 && (s = 8), s + n.width > r && (s = Math.max(8, r - n.width - 8), s + n.width > r && (s = r - n.width));
+				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
 				break;
 			case "up":
-				if (o = e.top - n.height - 8, s = e.left + e.width / 2 - n.width / 2, o < 0) {
-					let t = e.bottom + 8;
-					t + n.height <= i ? (a = "down", o = t) : (o = Math.min(i - n.height - 8, i - n.height), o < 0 && (o = i - n.height));
+				if (s = e.top - n.height - a, c = e.left + e.width / 2 - n.width / 2, s < 0) {
+					let t = e.bottom + a;
+					t + n.height <= i ? (o = "down", s = t) : (s = Math.min(i - n.height - a, i - n.height), s < 0 && (s = i - n.height));
 				}
-				s < 0 && (s = 8), s + n.width > r && (s = Math.max(8, r - n.width - 8), s + n.width > r && (s = r - n.width));
+				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
 				break;
 			case "right":
-				if (o = e.top + e.height / 2 - n.height / 2, s = e.right + 8, s + n.width > r) {
-					let t = e.left - n.width - 8;
-					t >= 0 ? (a = "left", s = t) : (s = Math.max(0, r - n.width - 8), s + n.width > r && (s = r - n.width));
+				if (s = e.top + e.height / 2 - n.height / 2, c = e.right + a, c + n.width > r) {
+					let t = e.left - n.width - a;
+					t >= 0 ? (o = "left", c = t) : (c = Math.max(0, r - n.width - a), c + n.width > r && (c = r - n.width));
 				}
-				o < 0 && (o = 8), o + n.height > i && (o = Math.max(8, i - n.height - 8), o + n.height > i && (o = i - n.height));
+				s < 0 && (s = a), s + n.height > i && (s = Math.max(a, i - n.height - a), s + n.height > i && (s = i - n.height));
 				break;
 			case "left":
-				if (o = e.top + e.height / 2 - n.height / 2, s = e.left - n.width - 8, s < 0) {
-					let t = e.right + 8;
-					t + n.width <= r ? (a = "right", s = t) : (s = Math.min(r - n.width - 8, r - n.width), s < 0 && (s = 0));
+				if (s = e.top + e.height / 2 - n.height / 2, c = e.left - n.width - a, c < 0) {
+					let t = e.right + a;
+					t + n.width <= r ? (o = "right", c = t) : (c = Math.min(r - n.width - a, r - n.width), c < 0 && (c = 0));
 				}
-				o < 0 && (o = 8), o + n.height > i && (o = Math.max(8, i - n.height - 8), o + n.height > i && (o = i - n.height));
+				s < 0 && (s = a), s + n.height > i && (s = Math.max(a, i - n.height - a), s + n.height > i && (s = i - n.height));
 				break;
 		}
 		return {
-			top: o,
-			left: s,
-			direction: a
+			top: s,
+			left: c,
+			direction: o
 		};
 	}
 	render() {
@@ -2587,13 +2603,13 @@ var _ = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
+		super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._prependSlotContainer = null, this._appendSlotContainer = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._slotResizeObserver = null, this._slotMutationObserver = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
 	}
 	connectedCallback() {
 		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render();
 	}
 	disconnectedCallback() {
-		this.removeEventListeners();
+		this.removeEventListeners(), this._slotResizeObserver &&= (this._slotResizeObserver.disconnect(), null), this._slotMutationObserver &&= (this._slotMutationObserver.disconnect(), null);
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
@@ -2635,7 +2651,7 @@ var _ = class extends HTMLElement {
 		return this.getAttribute("placeholder") || "";
 	}
 	getValue() {
-		return this._isColor() ? this._colorPicker?.value || this._colorTextInput?.value || this.getAttribute("value") || "#000000" : this._element?.value || this.getAttribute("value") || "";
+		return this._isColor() ? this._colorTextInput ? this._colorTextInput.value : this._colorPicker ? this._colorPicker.value : this.getAttribute("value") || "#000000" : this._element ? this._element.value : this.getAttribute("value") || "";
 	}
 	set value(e) {
 		try {
@@ -2680,13 +2696,14 @@ var _ = class extends HTMLElement {
 		return this.getAttribute("info") || "";
 	}
 	getInputClasses() {
-		let e = this._isTextarea(), t = !!this.getIcon(), n = this._isColor(), r = this._isNumber(), i = this.hasError(), a = [
+		let e = this._isTextarea(), t = !!this.getIcon(), n = this.querySelector("[slot=\"prepend\"]") !== null, r = this.querySelector("[slot=\"append\"]") !== null, i = this._isColor(), a = this._isNumber(), o = this.hasError(), s = [
 			"w-full",
-			t || n ? "pl-10" : "px-3.5",
-			t || n ? "pr-3.5" : r ? "pr-10" : "",
+			t || i || n ? "pl-10" : "px-3.5",
+			r ? "pr-10" : t || i ? "pr-3.5" : a ? "pr-10" : "",
 			e ? "py-2" : "py-1.5",
 			e ? "min-h-[6rem]" : "min-h-[2rem]",
-			"text-sm",
+			"text-base",
+			"min-[1100px]:text-sm",
 			"font-medium",
 			"rounded-lg",
 			"box-border",
@@ -2700,18 +2717,59 @@ var _ = class extends HTMLElement {
 			"disabled:cursor-not-allowed",
 			"readonly:cursor-default",
 			e ? "resize-y" : "",
-			r ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
-		], o = ["border-2", i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider"], s = [
+			a ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
+		], c = ["border-2", o ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider"], l = [
 			"focus-visible:ring-2",
 			"focus-visible:ring-offset-1",
-			i ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
+			o ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
 		];
 		return [
-			...a,
-			...o,
-			...s
+			...s,
+			...c,
+			...l
 		].filter(Boolean).join(" ");
 	}
+	_syncSlotAdornments(e, t) {
+		if (!this._wrapper || e || this._isColor()) {
+			this._prependSlotContainer &&= (this._prependSlotContainer.remove(), null), this._appendSlotContainer &&= (this._appendSlotContainer.remove(), null), this._clearAdornmentPadding();
+			return;
+		}
+		this._prependSlotContainer || (this._prependSlotContainer = document.createElement("div"), this._prependSlotContainer.className = "mint-input-prepend-slot absolute top-1/2 z-[1] flex -translate-y-1/2 items-center gap-1.5 text-gray-500 dark:text-gray-400 pointer-events-auto", this._wrapper.appendChild(this._prependSlotContainer)), this._appendSlotContainer || (this._appendSlotContainer = document.createElement("div"), this._appendSlotContainer.className = "mint-input-append-slot absolute right-3 top-1/2 z-[1] flex -translate-y-1/2 items-center gap-1.5 text-gray-500 dark:text-gray-400 pointer-events-auto", this._wrapper.appendChild(this._appendSlotContainer)), this._prependSlotContainer.classList.remove("left-3", "left-10"), this._prependSlotContainer.classList.add(t ? "left-10" : "left-3");
+		let n = Array.from(this.querySelectorAll("[slot=\"prepend\"]")), r = Array.from(this.querySelectorAll("[slot=\"append\"]"));
+		this._prependSlotContainer.replaceChildren(), this._appendSlotContainer.replaceChildren(), n.forEach((e) => this._prependSlotContainer.appendChild(e)), r.forEach((e) => this._appendSlotContainer.appendChild(e)), this._prependSlotContainer.classList.toggle("hidden", n.length === 0), this._appendSlotContainer.classList.toggle("hidden", r.length === 0), this._ensureSlotObservers(), this._applyAdornmentPadding(t);
+	}
+	_clearAdornmentPadding() {
+		this._element && (this._element.style.removeProperty("padding-left"), this._element.style.removeProperty("padding-right")), this._colorTextInput && (this._colorTextInput.style.removeProperty("padding-left"), this._colorTextInput.style.removeProperty("padding-right"));
+	}
+	_applyAdornmentPadding(e) {
+		this._element && requestAnimationFrame(() => {
+			if (this._element) {
+				if (this._prependSlotContainer && !this._prependSlotContainer.classList.contains("hidden")) {
+					let t = (e ? 40 : 12) + this._prependSlotContainer.offsetWidth + 8;
+					this._element.style.paddingLeft = `${t}px`;
+				} else this._element.style.removeProperty("padding-left");
+				if (this._appendSlotContainer && !this._appendSlotContainer.classList.contains("hidden")) {
+					let e = 12 + this._appendSlotContainer.offsetWidth + 8;
+					this._element.style.paddingRight = `${e}px`;
+				} else this._element.style.removeProperty("padding-right");
+			}
+		});
+	}
+	_ensureSlotObservers() {
+		!this._prependSlotContainer && !this._appendSlotContainer || (this._slotResizeObserver ||= new ResizeObserver(() => {
+			this._applyAdornmentPadding(!!this.getIcon());
+		}), this._slotResizeObserver.disconnect(), this._prependSlotContainer && this._slotResizeObserver.observe(this._prependSlotContainer), this._appendSlotContainer && this._slotResizeObserver.observe(this._appendSlotContainer), this._slotMutationObserver ||= new MutationObserver(() => {
+			this._applyAdornmentPadding(!!this.getIcon());
+		}), this._slotMutationObserver.disconnect(), this._prependSlotContainer && this._slotMutationObserver.observe(this._prependSlotContainer, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}), this._appendSlotContainer && this._slotMutationObserver.observe(this._appendSlotContainer, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}));
+	}
 	isLoading() {
 		return this.getAttribute("loading") === "true";
 	}
@@ -2779,7 +2837,7 @@ var _ = class extends HTMLElement {
 			} else t && t.remove();
 			return;
 		}
-		if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !r && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), f && !t ? this._icon ? this._icon.setAttribute("name", f) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", f), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon &&= (this._icon.remove(), null), this._isNumber() && !t) {
+		if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !r && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), f && !t ? this._icon ? this._icon.setAttribute("name", f) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", f), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon &&= (this._icon.remove(), null), this._syncSlotAdornments(t, !!f), this._isNumber() && !t) {
 			if (!this._numberSpinnerContainer) {
 				this._numberSpinnerContainer = document.createElement("div"), this._numberSpinnerContainer.className = "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col h-8 pointer-events-none", this._wrapper.appendChild(this._numberSpinnerContainer), this._numberIncrementButton = document.createElement("button"), this._numberIncrementButton.type = "button", this._numberIncrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed pointer-events-auto bg-gray-100 dark:bg-mint-hover active:bg-gray-200 dark:active:bg-mint-elevated rounded";
 				let e = document.createElement("mint-icon");
@@ -2825,7 +2883,7 @@ var _ = class extends HTMLElement {
 			let t = g.querySelector(".mint-input-info");
 			m ? (t || (t = document.createElement("span"), t.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", g.appendChild(t)), t.textContent = m, a ? t.classList.add("opacity-40") : t.classList.remove("opacity-40")) : t && t.remove();
 		} else g && g.remove();
-		this._renderErrorState(), this._renderSkeleton(h);
+		this._syncSlotAdornments(t, !!f), this._renderErrorState(), this._renderSkeleton(h);
 	}
 	_renderErrorState() {
 		let e = this.hasError(), t = this.getErrorMessage(), n = this.querySelector(".mint-input-error");
@@ -5685,7 +5743,8 @@ var C = class extends HTMLElement {
 			}
 			this._root.appendChild(this._textWrap), this.appendChild(this._root);
 		}
-		this.getAttribute("dismissable") === "true" ? (this._dismissBtn || this._createDismissBtn(), this._dismissBtn && !this._dismissBtn.isConnected && this._root?.appendChild(this._dismissBtn)) : this._dismissBtn && this._dismissBtn.parentElement === this._root && this._dismissBtn.remove();
+		let e = this.getAttribute("dismissable");
+		e === "" || e === "true" || this.hasAttribute("dismissable") ? (this._dismissBtn || this._createDismissBtn(), this._dismissBtn && !this._dismissBtn.isConnected && this._root?.appendChild(this._dismissBtn)) : this._dismissBtn && this._dismissBtn.parentElement === this._root && this._dismissBtn.remove();
 	}
 	_createDismissBtn() {
 		let e = document.createElement("button");
@@ -5712,10 +5771,13 @@ var C = class extends HTMLElement {
 		].join(" ");
 		let t = document.createElement("mint-icon");
 		t.setAttribute("name", "close"), t.className = "w-3 h-3", e.appendChild(t), this._clickHandler = (e) => {
-			e.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", {
+			e.stopPropagation(), this.dispatchEvent(new CustomEvent("dismiss", {
 				bubbles: !0,
 				composed: !0
-			}));
+			})), this.dispatchEvent(new CustomEvent("dismissed", {
+				bubbles: !0,
+				composed: !0
+			})), this.remove();
 		}, e.addEventListener("click", this._clickHandler), this._dismissBtn = e;
 	}
 };
@@ -7236,14 +7298,14 @@ var N = class e extends HTMLElement {
 			values: null,
 			dataHash: ""
 		}, this._renderScheduled = !1, this._datasetVisibility = /* @__PURE__ */ new Map(), this._widthValue = "100%", this._heightValue = 400, this._defaultColors = [
-			"#525252",
-			"#737373",
-			"#a3a3a3",
-			"#d4d4d4",
-			"#ef4444",
-			"#f59e0b",
-			"#22c55e",
-			"#eab308"
+			"#2563eb",
+			"#3b82f6",
+			"#0d9488",
+			"#7c3aed",
+			"#d97706",
+			"#059669",
+			"#dc2626",
+			"#c026d3"
 		], this._legendHeight = 0, this._rotatedLabelHeight = 0;
 	}
 	connectedCallback() {
@@ -8124,7 +8186,7 @@ var N = class e extends HTMLElement {
 			let i = this._getDatasetColor(t, r), a = -f / 2 + (u + d) * p;
 			p++, t.data.forEach((o) => {
 				let s = this._scaleXForBarChart(o.x, e), c = this._scaleY(o.y, e), l = e.y + e.height - c, d = s + a, f = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-				f.setAttribute("x", d.toString()), f.setAttribute("y", c.toString()), f.setAttribute("width", u.toString()), f.setAttribute("height", l.toString()), f.setAttribute("fill", i), f.setAttribute("rx", "2"), f.setAttribute("class", "chart-bar"), f.setAttribute("data-dataset", r.toString()), f.setAttribute("data-x", String(o.x)), f.setAttribute("data-y", o.y.toString()), f.setAttribute("data-name", t.name), f.style.cursor = "pointer", this._showTooltip && (f.addEventListener("mouseenter", (e) => {
+				f.setAttribute("x", d.toString()), f.setAttribute("y", c.toString()), f.setAttribute("width", u.toString()), f.setAttribute("height", l.toString()), f.setAttribute("fill", i), f.setAttribute("rx", "2"), f.setAttribute("class", "chart-bar"), f.setAttribute("data-dataset", r.toString()), f.setAttribute("data-x", String(o.x)), f.setAttribute("data-y", o.y.toString()), f.setAttribute("data-name", t.name), f.style.cursor = "pointer", this._showTooltip && f.addEventListener("mouseenter", (e) => {
 					let t = this._getAllDatasetsAtX(o.x), n = `<strong>${o.x}</strong><br/>`;
 					t.forEach((e) => {
 						n += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
@@ -8132,9 +8194,7 @@ var N = class e extends HTMLElement {
                 <span>${e.name}: ${e.formattedValue}</span>
               </div>`;
 					}), this._showTooltipAt(e.clientX, e.clientY, n);
-				}), f.addEventListener("mouseleave", () => {
-					this._hideTooltip();
-				})), n.appendChild(f);
+				}), n.appendChild(f);
 			});
 		}), t.appendChild(n), this._svg.appendChild(t);
 	}
@@ -9041,25 +9101,25 @@ var z = class extends HTMLElement {
 			let e = document.createElement("span");
 			e.className = "text-sm font-semibold text-gray-400 dark:text-gray-500", e.textContent = "Logo", this._logoLink.appendChild(e);
 		}
-		let n = this._isSearchEnabled(), r = this._bar.querySelector("[data-mint-topnav-center]");
-		if (r || (r = document.createElement("div"), r.setAttribute("data-mint-topnav-center", "true"), r.className = "max-[1099.98px]:hidden min-[1100px]:flex min-[1100px]:min-w-0 min-[1100px]:flex-1 min-[1100px]:justify-center min-[1100px]:px-4", this._bar.appendChild(r)), r.classList.toggle("min-[1100px]:hidden", !n), n && !this._desktopSearchInput) {
+		let n = Array.from(this.querySelectorAll("[slot=\"center\"]")), r = n.length > 0, i = this._isSearchEnabled() && !r, a = this._bar.querySelector("[data-mint-topnav-center]");
+		if (a || (a = document.createElement("div"), a.setAttribute("data-mint-topnav-center", "true"), this._bar.appendChild(a)), a.className = r ? "min-w-0 flex-1 px-2 min-[1100px]:flex min-[1100px]:justify-center min-[1100px]:px-4" : "max-[1099.98px]:hidden min-[1100px]:flex min-[1100px]:min-w-0 min-[1100px]:flex-1 min-[1100px]:justify-center min-[1100px]:px-4", a.classList.toggle("min-[1100px]:hidden", !i && !r), r && (a.replaceChildren(...n), this._closeSearch()), i && !this._desktopSearchInput) {
 			let e = document.createElement("div");
 			e.className = "relative w-full max-w-xl rounded-xl border border-gray-300 bg-gray-50 px-3 py-2 dark:border-mint-divider dark:bg-mint-hover", this._desktopSearchShell = e;
 			let t = document.createElement("mint-icon");
 			t.setAttribute("name", "search"), t.className = "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400", this._desktopSearchInput = document.createElement("input"), this._desktopSearchInput.type = "search", this._desktopSearchInput.className = "w-full bg-transparent pl-6 pr-20 text-sm text-gray-900 outline-none placeholder:text-gray-500 dark:text-gray-100 dark:placeholder:text-gray-400", this._desktopSearchInput.placeholder = this._getSearchPlaceholder(), this._desktopSearchInput.addEventListener("focus", () => this._openSearch(!1)), this._desktopSearchInput.addEventListener("input", (e) => this._scheduleSearch(e.target.value));
 			let n = document.createElement("span");
-			n.className = "absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-400", n.textContent = "⌘K", e.appendChild(t), e.appendChild(this._desktopSearchInput), e.appendChild(n), r.appendChild(e);
+			n.className = "absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-400", n.textContent = "⌘K", e.appendChild(t), e.appendChild(this._desktopSearchInput), e.appendChild(n), a.appendChild(e);
 		}
-		this._desktopSearchInput && (this._desktopSearchInput.placeholder = this._getSearchPlaceholder(), this._desktopSearchShell = this._desktopSearchInput.closest("div"), this._syncDesktopSearchOpenState());
-		let i = this._bar.querySelector("[data-mint-topnav-mobile-spacer]");
-		i || (i = document.createElement("div"), i.setAttribute("data-mint-topnav-mobile-spacer", "true"), i.className = "min-w-0 flex-1 min-[1100px]:hidden", this._bar.appendChild(i));
-		let a = Array.from(this.querySelectorAll("[slot=\"actions\"]")), o = this._bar.querySelector("[data-mint-topnav-actions]");
-		if (o || (o = document.createElement("div"), o.setAttribute("data-mint-topnav-actions", "true"), o.className = "flex shrink-0 items-center gap-2", this._bar.appendChild(o)), n && !this._mobileSearchButton) {
+		i && this._desktopSearchInput && (this._desktopSearchInput.placeholder = this._getSearchPlaceholder(), this._desktopSearchShell = this._desktopSearchInput.closest("div"), this._syncDesktopSearchOpenState());
+		let o = this._bar.querySelector("[data-mint-topnav-mobile-spacer]");
+		o || (o = document.createElement("div"), o.setAttribute("data-mint-topnav-mobile-spacer", "true"), o.className = "min-w-0 flex-1 min-[1100px]:hidden", this._bar.appendChild(o));
+		let s = Array.from(this.querySelectorAll("[slot=\"actions\"]")), c = this._bar.querySelector("[data-mint-topnav-actions]");
+		if (c || (c = document.createElement("div"), c.setAttribute("data-mint-topnav-actions", "true"), c.className = "flex shrink-0 items-center gap-2", this._bar.appendChild(c)), i && !this._mobileSearchButton) {
 			this._mobileSearchButton = document.createElement("button"), this._mobileSearchButton.type = "button", this._mobileSearchButton.className = "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10", this._mobileSearchButton.setAttribute("aria-label", "Open search");
 			let e = document.createElement("mint-icon");
-			e.setAttribute("name", "search"), e.className = "h-5 w-5", this._mobileSearchButton.appendChild(e), this._mobileSearchButton.addEventListener("click", () => this._openSearch(!0)), o.insertBefore(this._mobileSearchButton, o.firstChild);
+			e.setAttribute("name", "search"), e.className = "h-5 w-5", this._mobileSearchButton.appendChild(e), this._mobileSearchButton.addEventListener("click", () => this._openSearch(!0)), c.insertBefore(this._mobileSearchButton, c.firstChild);
 		}
-		if (this._mobileSearchButton && this._mobileSearchButton.classList.toggle("hidden", !n), o.replaceChildren(...a), n && this._mobileSearchButton && !a.includes(this._mobileSearchButton) && o.insertBefore(this._mobileSearchButton, o.firstChild), n && !this._searchPanel) {
+		if (this._mobileSearchButton && this._mobileSearchButton.classList.toggle("hidden", !i), c.replaceChildren(...s), i && this._mobileSearchButton && !s.includes(this._mobileSearchButton) && c.insertBefore(this._mobileSearchButton, c.firstChild), i && !this._searchPanel) {
 			this._searchPanel = document.createElement("div"), this._searchPanel.className = "fixed left-0 right-0 top-14 z-[90] hidden p-3 min-[1100px]:p-0";
 			let e = document.createElement("div");
 			e.className = "mx-auto w-full rounded-2xl border border-gray-200 bg-white shadow-xl dark:border-mint-divider dark:bg-mint-elevated min-[1100px]:rounded-t-none";
@@ -9084,8 +9144,524 @@ var z = class extends HTMLElement {
 };
 customElements.get("mint-top-navigation") || customElements.define("mint-top-navigation", z);
 //#endregion
-//#region src/components/bottom-navigation/BottomNavigation.ts
+//#region src/components/search/Search.ts
 var B = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._shell = null, this._desktopInput = null, this._panel = null, this._panelInner = null, this._panelInput = null, this._panelFiltersWrap = null, this._desktopFilterWrap = null, this._mobileFilterWrap = null, this._resultsWrap = null, this._stateWrap = null, this._customResultsWrap = null, this._query = "", this._searchOpen = !1, this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._debounceId = null, this._abortController = null, this._docPointerDownHandler = null, this._globalKeydownHandler = null, this._focusOutHandler = null, this._resizeHandler = null, this._desktopShortcutHint = null, this._panelSearchBar = null;
+	}
+	static get observedAttributes() {
+		return [
+			"endpoint",
+			"search-param",
+			"placeholder",
+			"filters",
+			"filter-param",
+			"open-shortcut",
+			"open-shortcut-hint",
+			"collapse-on-mobile"
+		];
+	}
+	connectedCallback() {
+		this.classList.add("relative", "block", "w-full", "max-w-xl"), this._attachGlobalHandlers(), this._attachFocusOutHandler(), this._attachResizeHandler(), this.render();
+	}
+	disconnectedCallback() {
+		this._docPointerDownHandler &&= (document.removeEventListener("pointerdown", this._docPointerDownHandler, !0), null), this._globalKeydownHandler &&= (document.removeEventListener("keydown", this._globalKeydownHandler), null), this._resizeHandler &&= (window.removeEventListener("resize", this._resizeHandler), null), this._focusOutHandler &&= (this.removeEventListener("focusout", this._focusOutHandler, !0), null), this._cancelDebounce(), this._abortSearch();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_getEndpoint() {
+		return (this.getAttribute("endpoint") || "").trim();
+	}
+	_getSearchParam() {
+		return (this.getAttribute("search-param") || "q").trim() || "q";
+	}
+	_getPlaceholder() {
+		return this.getAttribute("placeholder") || "Search";
+	}
+	_getFilterParam() {
+		return (this.getAttribute("filter-param") || "").trim();
+	}
+	_getFilterOptions() {
+		return (this.getAttribute("filters") || "").split(",").map((e) => e.trim()).filter(Boolean);
+	}
+	_hasSelectedFilters() {
+		return this._selectedFilters.length > 0;
+	}
+	_getFilterParamValue() {
+		return this._selectedFilters.join(",");
+	}
+	_getFilterChipLabelText() {
+		return this._selectedFilters.join(", ");
+	}
+	_getCondensedFilterChipLabel(e = 22) {
+		if (!this._hasSelectedFilters()) return "";
+		let [t = ""] = this._selectedFilters, n = this._selectedFilters.length - 1, r = Math.max(8, e - 2), i = t;
+		if (n <= 0) return i.length <= r ? i : `${i.slice(0, Math.max(1, r - 3))}...`;
+		let a = `${t}, and ${n} more`;
+		return a.length <= r ? a : `${a.slice(0, Math.max(1, r - 3))}...`;
+	}
+	_isMobileViewport() {
+		return window.matchMedia("(max-width: 1099.98px)").matches;
+	}
+	_collapseOnMobile() {
+		let e = this.getAttribute("collapse-on-mobile");
+		if (e === null) return !1;
+		let t = e.trim().toLowerCase();
+		return !(t === "false" || t === "0" || t === "off" || t === "none");
+	}
+	_primarySearchInput() {
+		return this._isMobileViewport() && this._collapseOnMobile() ? this._panelInput : this._desktopInput;
+	}
+	_isApplePlatform() {
+		return typeof navigator > "u" ? !1 : /Mac|iPhone|iPad|iPod/i.test(navigator.platform) || /Mac OS/i.test(navigator.userAgent);
+	}
+	_parseOpenShortcut() {
+		let e = (this.getAttribute("open-shortcut") ?? "mod+k").trim().toLowerCase();
+		if (!e || e === "none" || e === "false" || e === "off") return {
+			disabled: !0,
+			wantMod: !1,
+			wantMeta: !1,
+			wantCtrl: !1,
+			wantAlt: !1,
+			wantShift: !1,
+			key: ""
+		};
+		let t = e.split("+").map((e) => e.trim()).filter(Boolean);
+		if (t.length === 0) return {
+			disabled: !0,
+			wantMod: !1,
+			wantMeta: !1,
+			wantCtrl: !1,
+			wantAlt: !1,
+			wantShift: !1,
+			key: ""
+		};
+		let n = t[t.length - 1], r = new Set(t.slice(0, -1).map((e) => e.toLowerCase()));
+		return {
+			disabled: !1,
+			wantMod: r.has("mod"),
+			wantMeta: r.has("meta") || r.has("cmd") || r.has("super"),
+			wantCtrl: r.has("ctrl") || r.has("control"),
+			wantAlt: r.has("alt"),
+			wantShift: r.has("shift"),
+			key: n.toLowerCase()
+		};
+	}
+	_eventKeyMatchesShortcutKey(e, t) {
+		let n = t.toLowerCase();
+		return (e.key.length, e.key.toLowerCase()) === n;
+	}
+	_openShortcutMatches(e) {
+		let t = this._parseOpenShortcut();
+		return t.disabled || !t.key || e.repeat || !this._eventKeyMatchesShortcutKey(e, t.key) || t.wantShift !== e.shiftKey || t.wantAlt !== e.altKey ? !1 : t.wantMod || t.wantMeta || t.wantCtrl ? !(t.wantMod && !(e.metaKey || e.ctrlKey) || t.wantMeta && !e.metaKey || t.wantCtrl && !e.ctrlKey) : !!t.wantAlt;
+	}
+	_getOpenShortcutHintText() {
+		let e = this.getAttribute("open-shortcut-hint");
+		if (e === "none" || e === "false") return "";
+		if (e !== null && e.trim() !== "") return e.trim();
+		let t = this._parseOpenShortcut();
+		if (t.disabled) return "";
+		let n = this._isApplePlatform(), r = [];
+		t.wantMod && r.push(n ? "⌘" : "Ctrl"), t.wantMeta && !t.wantMod && r.push(n ? "⌘" : "Meta"), t.wantCtrl && !t.wantMod && r.push("Ctrl"), t.wantAlt && r.push("Alt"), t.wantShift && r.push("Shift");
+		let i = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+		return i ? t.wantMod && !t.wantMeta && !t.wantCtrl && !t.wantAlt && !t.wantShift && t.key.length === 1 ? `${n ? "⌘" : "Ctrl+"}${i}` : [...r, i].join("+") : "";
+	}
+	_attachGlobalHandlers() {
+		this._globalKeydownHandler || (this._globalKeydownHandler = (e) => {
+			if (this._openShortcutMatches(e)) {
+				e.preventDefault(), this._openSearch(!0);
+				return;
+			}
+			e.key.toLowerCase() === "escape" && this._searchOpen && this._closeSearch();
+		}, document.addEventListener("keydown", this._globalKeydownHandler)), this._docPointerDownHandler || (this._docPointerDownHandler = (e) => {
+			if (!this._searchOpen) return;
+			let t = e.composedPath();
+			this._shell && t.includes(this._shell) || this._panelInner && t.includes(this._panelInner) || this._closeSearch();
+		}, document.addEventListener("pointerdown", this._docPointerDownHandler, !0));
+	}
+	_attachResizeHandler() {
+		this._resizeHandler || (this._resizeHandler = () => {
+			this._syncPanelVisibility();
+		}, window.addEventListener("resize", this._resizeHandler, { passive: !0 }));
+	}
+	_attachFocusOutHandler() {
+		this._focusOutHandler || (this._focusOutHandler = (e) => {
+			if (!this._searchOpen) return;
+			let t = e.relatedTarget;
+			t && (this._shell && this._shell.contains(t) || this._panelInner && this._panelInner.contains(t) || this._closeSearch());
+		}, this.addEventListener("focusout", this._focusOutHandler, !0));
+	}
+	_emitSearchOpenChange() {
+		this.dispatchEvent(new CustomEvent("search-open-change", {
+			detail: { open: this._searchOpen },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_openSearch(e = !1) {
+		this._getEndpoint() && (this._searchOpen || (this._searchOpen = !0, this._syncPanelVisibility(), this._emitSearchOpenChange(), e && this._primarySearchInput()?.focus()));
+	}
+	_closeSearch() {
+		this._searchOpen && (this._searchOpen = !1, this._syncPanelVisibility(), this._emitSearchOpenChange());
+	}
+	_syncPanelVisibility() {
+		if (!this._panel) return;
+		let e = this._panelLayoutBaseClass();
+		this._panel.className = this._searchOpen ? e : `${e} hidden`, this._shell && (this._shell.classList.toggle("rounded-b-none", this._searchOpen), this._shell.classList.toggle("border-b-transparent", this._searchOpen)), this._positionPanel();
+	}
+	_panelLayoutBaseClass() {
+		return !this._isMobileViewport() || !this._collapseOnMobile() ? "absolute left-0 right-0 top-full z-[90] p-0 -mt-[9px]" : "fixed left-0 right-0 top-12 z-[90] p-3";
+	}
+	_positionPanel() {
+		this._panel && (!this._isMobileViewport() || !this._collapseOnMobile()) && (this._panel.style.left = "", this._panel.style.right = "", this._panel.style.top = "", this._panel.style.width = "", this._panel.style.maxWidth = "", this._panel.style.transform = "");
+	}
+	_setQuery(e) {
+		let t = this._query;
+		this._query = e, e !== t && (this._selectedFilterBackspaceArmed = !1), this._desktopInput && (this._desktopInput.value = e), this._panelInput && (this._panelInput.value = e);
+	}
+	_cancelDebounce() {
+		this._debounceId !== null && (window.clearTimeout(this._debounceId), this._debounceId = null);
+	}
+	_abortSearch() {
+		this._abortController &&= (this._abortController.abort(), null);
+	}
+	_normalizeResults(e) {
+		return ((e) => {
+			if (Array.isArray(e)) return e;
+			if (!e || typeof e != "object") return [];
+			let t = e;
+			for (let e of [
+				"results",
+				"items",
+				"data",
+				"products"
+			]) {
+				let n = t[e];
+				if (Array.isArray(n)) return n;
+			}
+			return [];
+		})(e).map((e) => {
+			let t = e || {};
+			return {
+				title: String(t.title || t.name || t.label || t.email || t.id || "").trim() || "Untitled",
+				subtitle: String(t.description || t.category || t.username || "").trim(),
+				parent: String(t.parent || t.type || t.entity || t.kind || t.category || "").trim() || void 0
+			};
+		}).slice(0, 8);
+	}
+	_emitResultsChange(e, t) {
+		let n = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+		this.dispatchEvent(new CustomEvent("search-results-change", {
+			detail: {
+				query: this._query,
+				filter: n,
+				filters: [...this._selectedFilters],
+				results: e,
+				raw: t ?? null
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_emitFilterChange() {
+		let e = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+		this.dispatchEvent(new CustomEvent("search-filter-change", {
+			detail: {
+				query: this._query,
+				filter: e,
+				filters: [...this._selectedFilters]
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_renderState(e) {
+		if (this._customResultsWrap && this._customResultsWrap.childElementCount > 0) {
+			this._stateWrap && this._stateWrap.classList.add("hidden"), this._resultsWrap && this._resultsWrap.classList.add("hidden");
+			return;
+		}
+		this._stateWrap && (this._stateWrap.textContent = e, this._stateWrap.classList.remove("hidden"), this._resultsWrap && (this._resultsWrap.classList.remove("hidden"), this._resultsWrap.innerHTML = ""));
+	}
+	_renderResults(e) {
+		if (this._customResultsWrap && this._customResultsWrap.childElementCount > 0) {
+			this._stateWrap && this._stateWrap.classList.add("hidden"), this._resultsWrap && this._resultsWrap.classList.add("hidden");
+			return;
+		}
+		if (!(!this._resultsWrap || !this._stateWrap)) {
+			if (this._resultsWrap.innerHTML = "", e.length === 0) {
+				this._renderState("No results found");
+				return;
+			}
+			this._stateWrap.classList.add("hidden");
+			for (let t of e) {
+				let e = document.createElement("button");
+				e.type = "button", e.className = "flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-white/10";
+				let n = document.createElement("mint-icon");
+				n.setAttribute("name", "search"), n.className = "mt-0.5 h-4 w-4 text-gray-500 dark:text-gray-400";
+				let r = document.createElement("div");
+				r.className = "min-w-0";
+				let i = document.createElement("div");
+				if (i.className = "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", i.textContent = t.title, r.appendChild(i), t.subtitle) {
+					let e = document.createElement("div");
+					e.className = "truncate text-xs text-gray-500 dark:text-gray-400", e.textContent = t.subtitle, r.appendChild(e);
+				}
+				e.appendChild(n), e.appendChild(r), e.addEventListener("keydown", (t) => {
+					if (t.key === "ArrowDown") {
+						t.preventDefault(), this._moveFocusInResults(e, 1);
+						return;
+					}
+					if (t.key === "ArrowUp") {
+						t.preventDefault(), this._moveFocusInResults(e, -1);
+						return;
+					}
+				}), e.addEventListener("click", () => {
+					let e = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+					this.dispatchEvent(new CustomEvent("search-select", {
+						detail: {
+							query: this._query,
+							filter: e,
+							filters: [...this._selectedFilters],
+							result: t
+						},
+						bubbles: !0,
+						composed: !0
+					})), this._closeSearch();
+				}), this._resultsWrap.appendChild(e);
+			}
+		}
+	}
+	_fetchSearchResults(e) {
+		let t = this._getEndpoint();
+		if (!t) return;
+		let n = e.trim();
+		if (!n) {
+			this._emitResultsChange([]), this._renderState("Start typing to search");
+			return;
+		}
+		this._abortSearch(), this._abortController = new AbortController(), this._renderState("Searching...");
+		let r = new URLSearchParams();
+		r.set(this._getSearchParam(), n);
+		let i = this._getFilterParam();
+		i && this._hasSelectedFilters() && r.set(i, this._getFilterParamValue());
+		let a = t.includes("{query}") ? t.replace("{query}", encodeURIComponent(n)) : `${t}${t.includes("?") ? "&" : "?"}${r.toString()}`;
+		fetch(a, { signal: this._abortController.signal }).then((e) => {
+			if (!e.ok) throw Error(`Request failed: ${e.status}`);
+			return e.json();
+		}).then((e) => {
+			let t = this._normalizeResults(e);
+			this._emitResultsChange(t, e), this._renderResults(t);
+		}).catch((e) => {
+			e?.name !== "AbortError" && (this._emitResultsChange([]), this._renderState("Unable to load results"));
+		});
+	}
+	_scheduleSearch(e) {
+		this._setQuery(e), this._cancelDebounce(), this._debounceId = window.setTimeout(() => this._fetchSearchResults(e), 220);
+	}
+	_getNativeInputValue(e) {
+		if (!e) return "";
+		let t = e.querySelector("input, textarea");
+		return t ? t.value || "" : e.value || "";
+	}
+	_getCurrentInputValue() {
+		let e = document.activeElement;
+		return e && this._desktopInput && this._desktopInput.contains(e) ? this._getNativeInputValue(this._desktopInput) : e && this._panelInput && this._panelInput.contains(e) ? this._getNativeInputValue(this._panelInput) : this._getNativeInputValue(this._primarySearchInput());
+	}
+	_applyFilterSelectionChange() {
+		let e = this._getCurrentInputValue();
+		if (this._setQuery(e), this._emitFilterChange(), this.render(), e.trim()) {
+			this._scheduleSearch(e);
+			return;
+		}
+		this._cancelDebounce(), this._abortSearch(), this._emitResultsChange([]), this._renderState("Start typing to search");
+	}
+	_clearAllSelectedFilters() {
+		this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._applyFilterSelectionChange();
+	}
+	_popLastSelectedFilter() {
+		this._selectedFilters.length !== 0 && (this._selectedFilters.pop(), this._selectedFilterBackspaceArmed = !1, this._applyFilterSelectionChange());
+	}
+	_focusActiveInput() {
+		let e = this._primarySearchInput();
+		e && requestAnimationFrame(() => {
+			e.focus();
+		});
+	}
+	_getFilterChipElements() {
+		return this._panelFiltersWrap ? Array.from(this._panelFiltersWrap.querySelectorAll("mint-chip")) : [];
+	}
+	_getResultFocusableElements() {
+		let e = this._customResultsWrap && !this._customResultsWrap.classList.contains("hidden") ? this._customResultsWrap : this._resultsWrap;
+		return e ? Array.from(e.querySelectorAll("button:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])")) : [];
+	}
+	_focusFirstChipOrResult(e = !1) {
+		let t = this._getFilterChipElements(), n = this._getResultFocusableElements();
+		if (!e) {
+			(t[0] || n[0])?.focus();
+			return;
+		}
+		(n[n.length - 1] || t[t.length - 1])?.focus();
+	}
+	_moveFocusInResults(e, t) {
+		let n = this._getResultFocusableElements();
+		if (n.length === 0) return;
+		let r = n.indexOf(e);
+		if (r === -1) return;
+		let i = n[r + t];
+		if (i) {
+			i.focus();
+			return;
+		}
+		if (t === -1) {
+			let e = this._getFilterChipElements(), t = e[e.length - 1];
+			t ? t.focus() : this._focusActiveInput();
+		}
+	}
+	_renderSelectedFilter() {
+		let e = (e) => {
+			if (!e || (e.innerHTML = "", !this._hasSelectedFilters())) return;
+			let t = document.createElement("mint-chip");
+			t.setAttribute("dismissable", ""), t.title = this._getFilterChipLabelText();
+			let n = this._getCondensedFilterChipLabel();
+			t.classList.add("max-w-[min(20rem,85vw)]", "whitespace-nowrap", "overflow-hidden", "text-ellipsis", "text-xs", "px-2", "py-0.5"), t.style.fontSize = "0.75rem", t.style.padding = "0.125rem 0.375rem", t.style.height = "1.375rem", t.style.lineHeight = "1", t.style.whiteSpace = "nowrap", t.style.overflow = "hidden", t.style.textOverflow = "ellipsis", this._selectedFilterBackspaceArmed && t.classList.add("ring-2", "ring-brand-400", "dark:ring-brand-300"), t.textContent = n, t.addEventListener("dismiss", (e) => {
+				e.stopPropagation(), this._clearAllSelectedFilters();
+			}), e.appendChild(t);
+		};
+		e(this._desktopFilterWrap), e(this._mobileFilterWrap);
+	}
+	_bindInputHandlers(e) {
+		let t = () => {
+			this._scheduleSearch(this._getNativeInputValue(e));
+		};
+		e.addEventListener("focusin", () => this._openSearch(!1)), e.addEventListener("input", t), e.addEventListener("search", t), e.addEventListener("change", t), e.addEventListener("keydown", (t) => {
+			if (t.key === "ArrowDown") {
+				this._searchOpen || this._openSearch(!1), t.preventDefault(), this._focusFirstChipOrResult(!1);
+				return;
+			}
+			if (t.key === "ArrowUp") {
+				this._searchOpen || this._openSearch(!1), t.preventDefault(), this._focusFirstChipOrResult(!0);
+				return;
+			}
+			if (t.key === "Tab" && !t.shiftKey && this._searchOpen) {
+				let e = this._getFilterChipElements(), n = this._getResultFocusableElements();
+				if (e.length > 0 || n.length > 0) {
+					t.preventDefault(), this._focusFirstChipOrResult(!1);
+					return;
+				}
+			}
+			if (t.key !== "Backspace") return;
+			let n = this._getNativeInputValue(e);
+			if (n !== this._query && this._setQuery(n), !(n.length > 0) && this._hasSelectedFilters()) {
+				if (!this._selectedFilterBackspaceArmed) {
+					t.preventDefault(), this._selectedFilterBackspaceArmed = !0, this._renderSelectedFilter();
+					return;
+				}
+				t.preventDefault(), this._popLastSelectedFilter();
+			}
+		});
+	}
+	openSearch(e = !0) {
+		this._openSearch(e);
+	}
+	closeSearch() {
+		this._closeSearch();
+	}
+	toggleSearch(e = !0) {
+		if (this._searchOpen) {
+			this._closeSearch();
+			return;
+		}
+		this._openSearch(e);
+	}
+	isSearchOpen() {
+		return this._searchOpen;
+	}
+	render() {
+		let e = this._getEndpoint();
+		if (this.classList.toggle("hidden", !e), !e) return;
+		if (!this._shell) {
+			this._shell = document.createElement("div"), this._shell.className = "relative z-[91] flex h-10 w-full", this._desktopFilterWrap = document.createElement("div"), this._desktopFilterWrap.className = "inline-flex shrink-0 max-w-[8.5rem]", this._desktopFilterWrap.setAttribute("slot", "prepend"), this._desktopInput = document.createElement("mint-input"), this._desktopInput.setAttribute("type", "search"), this._desktopInput.setAttribute("icon", "search"), this._desktopInput.className = "h-full min-w-0 flex-1";
+			let e = document.createElement("span");
+			e.className = "shrink-0 text-xs text-gray-500 dark:text-gray-400", e.setAttribute("slot", "append"), this._desktopShortcutHint = e, this._bindInputHandlers(this._desktopInput), this._desktopInput.appendChild(this._desktopFilterWrap), this._desktopInput.appendChild(e), this._shell.appendChild(this._desktopInput), this.appendChild(this._shell);
+		}
+		if (!this._panel) {
+			this._panel = document.createElement("div"), this._panel.className = "absolute left-0 right-0 top-full z-[90] hidden p-0 -mt-[9px]";
+			let e = document.createElement("div");
+			e.className = "mx-auto flex max-h-[calc(100dvh-4rem)] w-full flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl dark:border-mint-divider dark:bg-mint-elevated min-[1100px]:rounded-t-none min-[1100px]:border-t-0", this._panelInner = e;
+			let t = document.createElement("div");
+			this._panelSearchBar = t, t.className = "hidden", this._mobileFilterWrap = document.createElement("div"), this._mobileFilterWrap.className = "inline-flex shrink-0 max-w-[8.5rem]", this._mobileFilterWrap.setAttribute("slot", "prepend"), this._panelInput = document.createElement("mint-input"), this._panelInput.setAttribute("type", "search"), this._panelInput.className = "min-w-0 flex-1", this._bindInputHandlers(this._panelInput), this._panelInput.appendChild(this._mobileFilterWrap), t.appendChild(this._panelInput), this._panelFiltersWrap = document.createElement("div"), this._panelFiltersWrap.className = "flex shrink-0 flex-wrap gap-2 px-3 pb-3 pt-5", this._customResultsWrap = document.createElement("div"), this._customResultsWrap.className = "min-h-0 flex-1 overflow-y-auto px-2 pb-2", this._stateWrap = document.createElement("div"), this._stateWrap.className = "px-4 pb-4 text-sm text-gray-500 dark:text-gray-400", this._stateWrap.textContent = "Start typing to search", this._resultsWrap = document.createElement("div"), this._resultsWrap.className = "min-h-0 flex-1 overflow-y-auto px-2 pb-2", e.appendChild(t), e.appendChild(this._panelFiltersWrap), e.appendChild(this._customResultsWrap), e.appendChild(this._stateWrap), e.appendChild(this._resultsWrap), this._panel.appendChild(e), this.appendChild(this._panel);
+		}
+		let t = this._hasSelectedFilters() ? "" : this._getPlaceholder();
+		if (this._desktopInput && this._desktopInput.setAttribute("placeholder", t), this._panelInput && this._panelInput.setAttribute("placeholder", t), this._desktopShortcutHint) {
+			let e = this._getOpenShortcutHintText();
+			this._desktopShortcutHint.textContent = e, this._desktopShortcutHint.classList.toggle("hidden", !e);
+		}
+		if (this._panelFiltersWrap) {
+			let e = this._getFilterOptions();
+			this._selectedFilters = this._selectedFilters.filter((t) => e.includes(t));
+			let t = e.length > 0;
+			this._panelFiltersWrap.classList.toggle("hidden", !t), this._stateWrap?.classList.toggle("pt-4", !t), this._resultsWrap?.classList.toggle("pt-4", !t), this._customResultsWrap?.classList.toggle("pt-5", !t), this._panelFiltersWrap.innerHTML = "";
+			for (let t of e) {
+				let e = document.createElement("mint-chip"), n = this._selectedFilters.includes(t);
+				if (n && e.classList.add("ring-2", "ring-brand-400", "dark:ring-brand-300"), e.classList.add("cursor-pointer", "focus-visible:outline-none", "focus-visible:ring-2", "focus-visible:ring-brand-400", "inline-flex", "items-center", "gap-1"), n) {
+					let n = document.createElement("span");
+					n.textContent = t;
+					let r = document.createElement("mint-icon");
+					r.setAttribute("name", "close"), r.className = "h-4 w-4 ml-2 shrink-0", r.setAttribute("aria-hidden", "true"), e.append(n, r);
+				} else e.textContent = t;
+				e.tabIndex = 0, e.setAttribute("role", "button"), e.setAttribute("aria-label", n ? `Remove filter ${t}` : `Filter by ${t}`), e.addEventListener("pointerdown", (e) => {
+					e.preventDefault();
+				});
+				let r = (e) => {
+					e && e.stopPropagation();
+					let n = this._selectedFilters.indexOf(t);
+					n >= 0 ? this._selectedFilters.splice(n, 1) : this._selectedFilters.push(t), this._selectedFilterBackspaceArmed = !1, this._emitFilterChange(), this._renderSelectedFilter(), this.render(), this._query.trim() && this._scheduleSearch(this._query), this._focusActiveInput();
+				};
+				e.addEventListener("click", (e) => r(e)), e.addEventListener("keydown", (t) => {
+					let n = this._getFilterChipElements(), i = n.indexOf(e);
+					if (t.key === "Enter" || t.key === " ") {
+						t.preventDefault(), r(t);
+						return;
+					}
+					if (t.key === "ArrowRight") {
+						t.preventDefault();
+						let e = n[i + 1];
+						e && e.focus();
+						return;
+					}
+					if (t.key === "ArrowLeft") {
+						t.preventDefault();
+						let e = n[i - 1];
+						e ? e.focus() : this._focusActiveInput();
+						return;
+					}
+					if (t.key === "ArrowDown") {
+						t.preventDefault(), this._getResultFocusableElements()[0]?.focus();
+						return;
+					}
+					if (t.key === "ArrowUp") {
+						t.preventDefault(), this._focusActiveInput();
+						return;
+					}
+				}), this._panelFiltersWrap.appendChild(e);
+			}
+		}
+		if (this._customResultsWrap) {
+			Array.from(this.children).filter((e) => e === this._shell || e === this._panel ? !1 : e.getAttribute("slot") === "results").forEach((e) => this._customResultsWrap.appendChild(e));
+			let e = this._customResultsWrap.childElementCount > 0;
+			this._customResultsWrap.classList.toggle("hidden", !e), e ? (this._stateWrap?.classList.add("hidden"), this._resultsWrap?.classList.add("hidden")) : this._resultsWrap?.classList.remove("hidden");
+		}
+		this._renderSelectedFilter(), this._syncResponsiveChrome(), this._syncPanelVisibility();
+	}
+	_syncResponsiveChrome() {
+		let e = this._collapseOnMobile();
+		this._shell && (this._shell.className = e ? "relative z-[91] hidden h-10 w-full min-[1100px]:flex" : "relative z-[91] flex h-10 w-full"), this._panelSearchBar && (this._panelSearchBar.className = e ? "flex shrink-0 items-center gap-2 border-b border-gray-200 p-3 dark:border-mint-divider min-[1100px]:hidden" : "hidden");
+	}
+};
+customElements.get("mint-search") || customElements.define("mint-search", B);
+//#endregion
+//#region src/components/bottom-navigation/BottomNavigation.ts
+var V = class extends HTMLElement {
 	constructor(...e) {
 		super(...e), this._lastScrollY = 0, this._scrollHandler = null;
 	}
@@ -9110,10 +9686,10 @@ var B = class extends HTMLElement {
 		this._scrollHandler &&= (window.removeEventListener("scroll", this._scrollHandler), null);
 	}
 };
-customElements.get("mint-bottom-navigation") || customElements.define("mint-bottom-navigation", B);
+customElements.get("mint-bottom-navigation") || customElements.define("mint-bottom-navigation", V);
 //#endregion
 //#region src/components/bottom-navigation/BottomNavItem.ts
-var V = class extends HTMLElement {
+var H = class extends HTMLElement {
 	constructor(...e) {
 		super(...e), this._root = null;
 	}
@@ -9155,6 +9731,6 @@ var V = class extends HTMLElement {
 		s.className = "block w-full truncate", s.textContent = t, a.appendChild(o), a.appendChild(s), this.replaceChildren(a), this._root = a;
 	}
 };
-customElements.get("mint-bottom-nav-item") || customElements.define("mint-bottom-nav-item", V);
+customElements.get("mint-bottom-nav-item") || customElements.define("mint-bottom-nav-item", H);
 //#endregion
-export { E as Alert, l as BackButton, V as BottomNavItem, B as BottomNavigation, r as Button, r as default, s as Card, N as Chart, m as Checkbox, C as Chip, g as Choice, T as Clickable, v as DatePicker, b as Dropzone, x as Form, d as Grid, n as Icon, _ as Input, c as Link, f as Modal, O as OffCanvas, u as Page, p as Popover, D as ResourceTable, y as Select, R as SideNavigation, I as SideNavigationActionLinks, L as SideNavigationActionMenu, P as SideNavigationLink, F as SideNavigationLinks, t as Spinner, o as Stack, i as Switch, k as Tab, j as TabContent, A as TabList, S as Table, M as Tabs, w as Tags, a as Text, z as TopNavigation };
+export { E as Alert, l as BackButton, H as BottomNavItem, V as BottomNavigation, r as Button, r as default, s as Card, N as Chart, m as Checkbox, C as Chip, g as Choice, T as Clickable, v as DatePicker, b as Dropzone, x as Form, d as Grid, n as Icon, _ as Input, c as Link, f as Modal, O as OffCanvas, u as Page, p as Popover, D as ResourceTable, B as Search, y as Select, R as SideNavigation, I as SideNavigationActionLinks, L as SideNavigationActionMenu, P as SideNavigationLink, F as SideNavigationLinks, t as Spinner, o as Stack, i as Switch, k as Tab, j as TabContent, A as TabList, S as Table, M as Tabs, w as Tags, a as Text, z as TopNavigation };