monobill-mintui 0.6.522 → 0.6.540

package/dist/index.js

@@ -1965,13 +1965,18 @@ var g = class extends HTMLElement {
 customElements.get("mint-modal") || customElements.define("mint-modal", g);
 //#endregion
 //#region src/components/popover/Popover.ts
-var _ = class extends HTMLElement {
+var _ = class e extends HTMLElement {
+	static {
+		this.VIEWPORT_EDGE_MARGIN = 12;
+	}
 	static get observedAttributes() {
 		return [
 			"id",
 			"direction",
 			"open",
 			"trigger-id",
+			"trigger-toggle",
+			"trigger-align",
 			"padding",
 			"hover",
 			"distance"
@@ -2008,7 +2013,7 @@ var _ = class extends HTMLElement {
 				let e = this._isInsideModal() ? "z-[80]" : "z-[60]";
 				this.classList.remove("z-50", "z-[60]", "z-[80]"), this.classList.add(e);
 			}
-			this.render(), (e === "trigger-id" || e === "hover") && this._setupTrigger(), e === "open" && this.isOpen() && this._closeOtherPopovers();
+			this.render(), (e === "trigger-id" || e === "hover" || e === "trigger-toggle") && this._setupTrigger(), e === "open" && this.isOpen() && this._closeOtherPopovers();
 		}
 	}
 	getId() {
@@ -2060,6 +2065,13 @@ var _ = class extends HTMLElement {
 	isHoverEnabled() {
 		return this.getAttribute("hover") === "true";
 	}
+	getTriggerAlign() {
+		let e = (this.getAttribute("trigger-align") || "center").toLowerCase();
+		return e === "start" || e === "end" ? e : "center";
+	}
+	isTriggerToggleEnabled() {
+		return this.getAttribute("trigger-toggle") !== "false";
+	}
 	isOpen() {
 		return this.getAttribute("open") === "true";
 	}
@@ -2076,7 +2088,7 @@ var _ = class extends HTMLElement {
 		}, 10));
 	}
 	_attachTriggerListener() {
-		if (this._triggerElement && !this._triggerClickHandler) {
+		if (this.isTriggerToggleEnabled() && this._triggerElement && !this._triggerClickHandler) {
 			let e = this;
 			this._triggerClickHandler = function(t) {
 				t.stopImmediatePropagation(), t.preventDefault(), e.getAttribute("open") === "true" ? e.removeAttribute("open") : e.setAttribute("open", "true");
@@ -2120,53 +2132,59 @@ var _ = class extends HTMLElement {
 			left: 0,
 			direction: "down"
 		};
-		let e = this._triggerElement.getBoundingClientRect(), t = this._popover.querySelector(".popover-content");
-		if (!t) return {
+		let t = this._triggerElement.getBoundingClientRect(), n = this._popover.querySelector(".popover-content");
+		if (!n) return {
 			top: 0,
 			left: 0,
 			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._getDistancePx(), o = this.getDirection(), s = 0, c = 0;
-		switch (o) {
+		n.style.removeProperty("max-height"), n.style.removeProperty("overflow-y"), this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
+		let r = n.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, o = e.VIEWPORT_EDGE_MARGIN, s = this._getDistancePx(), c = this.getDirection(), l = 0, u = 0, d = this.getTriggerAlign();
+		switch (c) {
 			case "down":
-				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));
+				if (l = t.bottom + s, u = d === "start" ? t.left : d === "end" ? t.right - r.width : t.left + t.width / 2 - r.width / 2, l + r.height > a - o) {
+					let e = t.top - r.height - s;
+					e >= o ? (c = "up", l = e) : (l = Math.max(o, a - r.height - s - o), l + r.height > a - o && (l = o));
 				}
-				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
+				u < 0 && (u = s), u + r.width > i && (u = Math.max(s, i - r.width - s), u + r.width > i && (u = i - r.width));
 				break;
 			case "up":
-				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));
+				if (l = t.top - r.height - s, u = d === "start" ? t.left : d === "end" ? t.right - r.width : t.left + t.width / 2 - r.width / 2, l < o) {
+					let e = t.bottom + s;
+					e + r.height <= a - o ? (c = "down", l = e) : (l = Math.min(a - r.height - s - o, a - r.height - o), l < o && (l = Math.max(o, a - r.height - o)));
 				}
-				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
+				u < 0 && (u = s), u + r.width > i && (u = Math.max(s, i - r.width - s), u + r.width > i && (u = i - r.width));
 				break;
 			case "right":
-				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));
+				if (l = d === "start" ? t.top : d === "end" ? t.bottom - r.height : t.top + t.height / 2 - r.height / 2, u = t.right + s, u + r.width > i) {
+					let e = t.left - r.width - s;
+					e >= 0 ? (c = "left", u = e) : (u = Math.max(0, i - r.width - s), u + r.width > i && (u = i - r.width));
 				}
-				s < 0 && (s = a), s + n.height > i && (s = Math.max(a, i - n.height - a), s + n.height > i && (s = i - n.height));
+				l < o && (l = o), l + r.height > a - o && (l = Math.max(o, a - r.height - s - o), l + r.height > a - o && (l = o));
 				break;
 			case "left":
-				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));
+				if (l = d === "start" ? t.top : d === "end" ? t.bottom - r.height : t.top + t.height / 2 - r.height / 2, u = t.left - r.width - s, u < 0) {
+					let e = t.right + s;
+					e + r.width <= i ? (c = "right", u = e) : (u = Math.min(i - r.width - s, i - r.width), u < 0 && (u = 0));
 				}
-				s < 0 && (s = a), s + n.height > i && (s = Math.max(a, i - n.height - a), s + n.height > i && (s = i - n.height));
+				l < o && (l = o), l + r.height > a - o && (l = Math.max(o, a - r.height - s - o), l + r.height > a - o && (l = o));
 				break;
 		}
 		return {
-			top: s,
-			left: c,
-			direction: o
+			top: l,
+			left: u,
+			direction: c
 		};
 	}
+	_applyViewportHeightConstraint(t, n) {
+		let r = window.innerHeight, i = e.VIEWPORT_EDGE_MARGIN, a = n;
+		a < i && (a = i);
+		let o = r - 2 * i, s = r - i - a, c = Math.max(48, Math.min(o, s));
+		return t.style.maxHeight = `${Math.floor(c)}px`, t.style.overflowY = "auto", t.style.overflowX = "hidden", t.style.overscrollBehavior = "contain", a;
+	}
 	render() {
-		let e = this.getId(), t = this.isOpen(), n = this.getPadding();
-		if (e && (this.id = e), t) {
+		let t = this.getId(), n = this.isOpen(), r = this.getPadding();
+		if (t && (this.id = t), n) {
 			if (this.classList.remove("hidden"), this.style.pointerEvents = "auto", this._triggerElement && this._triggerElement.tagName === "MINT-BUTTON" && requestAnimationFrame(() => {
 				this._triggerElement.setAttribute("active", "true");
 				let e = this._triggerElement;
@@ -2209,10 +2227,10 @@ var _ = class extends HTMLElement {
 			this._popover.className = `fixed ${e} pointer-events-auto`, this.appendChild(this._popover);
 		}
 		this.isHoverEnabled() && this._attachHoverListeners();
-		let r = this._popover.querySelector(".popover-content");
-		if (!r) r = document.createElement("div"), r.className = `popover-content bg-white dark:bg-mint-elevated border border-gray-200 dark:border-mint-divider rounded-lg shadow-xl ${n} transform`, this._popover.appendChild(r);
+		let i = this._popover.querySelector(".popover-content");
+		if (!i) i = document.createElement("div"), i.className = `popover-content min-h-0 bg-white dark:bg-mint-elevated border border-gray-200 dark:border-mint-divider rounded-lg shadow-xl ${r} transform`, this._popover.appendChild(i);
 		else {
-			let e = r.className.split(/\s+/).filter(Boolean), t = [
+			let e = i.className.split(/\s+/).filter(Boolean), t = [
 				"p-0",
 				"p-0.5",
 				"p-1",
@@ -2230,23 +2248,30 @@ var _ = class extends HTMLElement {
 				"p-16",
 				"p-20",
 				"p-24"
-			], i = e.filter((e) => !t.includes(e)), a = [
+			], n = e.filter((e) => !t.includes(e)), a = [
 				"border",
 				"border-gray-200",
 				"dark:border-mint-divider"
-			], o = [...i];
+			], o = [...n];
 			for (let e of a) o.includes(e) || o.push(e);
-			r.className = [...o, n].join(" ");
+			o.includes("min-h-0") || o.push("min-h-0"), i.className = [...o, r].join(" ");
 		}
-		Array.from(this.children).forEach((e) => {
-			e !== this._overlay && e !== this._popover && e.parentElement === this && r.appendChild(e);
-		}), t ? (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement ? this._updatePosition(r) : (this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", r.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				r.style.transform = "scale(1) translateY(0)", r.style.opacity = "1";
+		if (Array.from(this.children).forEach((e) => {
+			e !== this._overlay && e !== this._popover && e.parentElement === this && i.appendChild(e);
+		}), n) if (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement) this._updatePosition(i);
+		else {
+			this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block";
+			let t = e.VIEWPORT_EDGE_MARGIN, n = Math.max(48, window.innerHeight - 2 * t);
+			i.style.maxHeight = `${Math.floor(n)}px`, i.style.overflowY = "auto", i.style.overflowX = "hidden", i.style.overscrollBehavior = "contain", i.style.transform = "scale(0.97) translateY(10px)", i.style.opacity = "0", i.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					i.style.transform = "scale(1) translateY(0)", i.style.opacity = "1";
+				});
 			});
-		}))) : !t && r && (this._removePositionListeners(), r.style.opacity !== "0" && r.style.opacity !== "" && (r.style.transition = "opacity 200ms ease-in, transform 200ms ease-in", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", setTimeout(() => {
-			r.style.transform = "", r.style.opacity = "", r.style.transition = "", this._popover.style.visibility = "", this._popover.style.display = "";
-		}, 200))), this._updateBackgroundColor();
+		}
+		else !n && i && (this._removePositionListeners(), i.style.opacity !== "0" && i.style.opacity !== "" && (i.style.transition = "opacity 200ms ease-in, transform 200ms ease-in", i.style.transform = "scale(0.97) translateY(10px)", i.style.opacity = "0", setTimeout(() => {
+			i.style.transform = "", i.style.opacity = "", i.style.transition = "", this._popover.style.visibility = "", this._popover.style.display = "";
+		}, 200)));
+		this._updateBackgroundColor();
 	}
 	_updateBackgroundColor() {
 		if (!this._popover) return;
@@ -2265,8 +2290,8 @@ var _ = class extends HTMLElement {
 		if (!this._triggerElement || !this._popover) return;
 		let t = this._popover.style.visibility !== "hidden";
 		t || (this._popover.style.visibility = "hidden", this._popover.style.display = "block", this._popover.style.top = "0", this._popover.style.left = "0"), this._popover.offsetHeight;
-		let n = this._calculatePosition();
-		this._popover.style.top = `${n.top}px`, this._popover.style.left = `${n.left}px`, t || (this._popover.style.visibility = "visible", e && (!e.style.opacity || e.style.opacity === "") && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
+		let n = this._calculatePosition(), r = this._applyViewportHeightConstraint(e, n.top);
+		this._popover.style.top = `${r}px`, this._popover.style.left = `${n.left}px`, t || (this._popover.style.visibility = "visible", e && (!e.style.opacity || e.style.opacity === "") && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				e.style.transform = "scale(1) translateY(0)", e.style.opacity = "1";
 			});
@@ -6013,8 +6038,12 @@ var E = class extends HTMLElement {
 				let n = this._getFieldElements(e);
 				if (n.length === 0) {
 					setTimeout(() => {
-						let n = this._getFieldElements(e);
-						n.length > 0 && this._applyValueToField(n, e, t);
+						let t = this._getFieldElements(e);
+						if (t.length === 0) return;
+						let n = this._formData ? this._getReactiveValue(this._formData) : null;
+						if (!n || typeof n != "object" || Array.isArray(n)) return;
+						let r = n[e];
+						this._applyValueToField(t, e, r);
 					}, 300);
 					return;
 				}
@@ -6573,12 +6602,14 @@ customElements.get("mint-chip") || customElements.define("mint-chip", O);
 //#region src/components/tags/Tags.ts
 var k = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._placeholder = "Add tag", this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null;
+		super(...e), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._predefinedTags = [], this._placeholder = "Add tag", this._predefinedPopoverOpenListenersAttached = !1, this._predefinedBlurCloseTimer = null, this._suppressNextPredefinedBlurClose = !1, this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null, this._containerFocusRingListeners = !1;
 	}
 	static get observedAttributes() {
 		return [
 			"tags",
 			"placeholder",
+			"predefined-tags",
+			"predefined-only",
 			"sortable",
 			"label",
 			"info",
@@ -6611,9 +6642,7 @@ var k = class extends HTMLElement {
 						e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 						"bg-white",
 						"dark:bg-mint-elevated",
-						"focus-within:ring-2",
-						"focus-within:ring-offset-1",
-						e ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
+						...this._containerRingClasses(e)
 					];
 					this._container.className = t.join(" ");
 				}
@@ -6634,15 +6663,36 @@ var k = class extends HTMLElement {
 	}
 	_parseAttrs() {
 		let e = this.getAttribute("tags");
-		if (!e) return;
+		e && (this._tags = this._parseTagItems(e, "tags"));
+		let t = this.getAttribute("placeholder");
+		t !== null && (this._placeholder = t);
+		let n = this.getAttribute("predefined-tags");
+		this._predefinedTags = this._parseTagItems(n, "predefined-tags");
+	}
+	_parseTagItems(e, t) {
+		if (!e) return [];
 		try {
 			let t = JSON.parse(e);
-			Array.isArray(t) && (this._tags = t);
+			return Array.isArray(t) ? t.map((e) => {
+				if (typeof e == "string") {
+					let t = e.trim();
+					return t ? {
+						value: t,
+						label: t,
+						dismissable: !0
+					} : null;
+				}
+				if (!e || typeof e != "object") return null;
+				let t = e, n = String(t.value ?? "").trim();
+				return n ? {
+					value: n,
+					label: String(t.label ?? n),
+					dismissable: t.dismissable !== !1
+				} : null;
+			}).filter((e) => e !== null) : [];
 		} catch (e) {
-			console.warn("mint-tags: failed to parse tags attribute", e);
+			return console.warn(`mint-tags: failed to parse ${t} attribute`, e), [];
 		}
-		let t = this.getAttribute("placeholder");
-		t !== null && (this._placeholder = t);
 	}
 	_syncAttr() {
 		this.setAttribute("tags", JSON.stringify(this._tags));
@@ -6656,6 +6706,36 @@ var k = class extends HTMLElement {
 	hasError() {
 		return this.getAttribute("error") === "true";
 	}
+	_containerRingClasses(e) {
+		return e ? [
+			"focus-within:ring-2",
+			"focus-within:ring-offset-1",
+			"focus-within:ring-red-400",
+			"dark:focus-within:ring-red-500",
+			"data-[mint-tags-active=true]:ring-2",
+			"data-[mint-tags-active=true]:ring-offset-1",
+			"data-[mint-tags-active=true]:ring-red-400",
+			"dark:data-[mint-tags-active=true]:ring-red-500"
+		] : [
+			"focus-within:ring-2",
+			"focus-within:ring-offset-1",
+			"focus-within:ring-gray-400",
+			"dark:focus-within:ring-gray-500",
+			"data-[mint-tags-active=true]:ring-2",
+			"data-[mint-tags-active=true]:ring-offset-1",
+			"data-[mint-tags-active=true]:ring-gray-400",
+			"dark:data-[mint-tags-active=true]:ring-gray-500"
+		];
+	}
+	_attachContainerFocusRingListeners() {
+		!this._container || this._containerFocusRingListeners || (this._containerFocusRingListeners = !0, this._container.addEventListener("focusin", () => {
+			this._container?.setAttribute("data-mint-tags-active", "true");
+		}), this._container.addEventListener("focusout", () => {
+			requestAnimationFrame(() => {
+				this._container && (this._container.contains(document.activeElement) || this._container.removeAttribute("data-mint-tags-active"));
+			});
+		}));
+	}
 	getErrorMessage() {
 		return this.getAttribute("error-message") || "";
 	}
@@ -6671,6 +6751,9 @@ var k = class extends HTMLElement {
 	isLoading() {
 		return this.hasAttribute("loading");
 	}
+	isPredefinedOnly() {
+		return this.getAttribute("predefined-only") === "true";
+	}
 	_render() {
 		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
 		let e = this.isLoading(), t = this.getLabel(), n = this.getInfo(), r = this.hasError(), i = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
@@ -6691,11 +6774,9 @@ var k = class extends HTMLElement {
 				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 				"bg-white",
 				"dark:bg-mint-elevated",
-				"focus-within:ring-2",
-				"focus-within:ring-offset-1",
-				r ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
+				...this._containerRingClasses(r)
 			];
-			this._container.className = e.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (e) => {
+			this._container.className = e.join(" "), this._container.addEventListener("pointerdown", (e) => this._onContainerPointerDown(e)), this._attachContainerFocusRingListeners(), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (e) => {
 				this.hasAttribute("sortable") && e.preventDefault();
 			}), this._chipsWrap.addEventListener("drop", (e) => {
 				this.hasAttribute("sortable") && e.preventDefault();
@@ -6715,7 +6796,7 @@ var k = class extends HTMLElement {
 				e.key === "Enter" && (e.preventDefault(), this._addFromInput());
 			}), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
 		}
-		if (this._container) {
+		if (this._input && (this.isPredefinedOnly() && this._predefinedTags.length > 0 ? this._input.setAttribute("readonly", "true") : this._input.removeAttribute("readonly")), this._container) {
 			let e = [
 				"flex",
 				"flex-wrap",
@@ -6730,9 +6811,7 @@ var k = class extends HTMLElement {
 				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 				"bg-white",
 				"dark:bg-mint-elevated",
-				"focus-within:ring-2",
-				"focus-within:ring-offset-1",
-				r ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
+				...this._containerRingClasses(r)
 			];
 			this._container.className = e.join(" ");
 		}
@@ -6745,7 +6824,56 @@ var k = class extends HTMLElement {
 		let o = this.querySelector(".mint-tags-info");
 		n ? (o || (o = document.createElement("span"), o.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", this._container && this._container.parentElement === this ? this.insertBefore(o, this._container.nextSibling) : this.appendChild(o)), o.textContent = n) : o && o.remove();
 		let s = this.getName();
-		s ? (this.setAttribute("name", s), this._input && (this._input.name = s, this._input.id = i)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = i)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState(), this._renderSkeleton(e);
+		s ? (this.setAttribute("name", s), this._input && (this._input.name = s, this._input.id = i)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = i)), this._wireInputBackspace(), this._renderChips(), this._renderPredefinedPopover(), this._renderErrorState(), this._renderSkeleton(e);
+	}
+	_getAvailablePredefinedTags() {
+		let e = new Set(this._tags.map((e) => e.value.toLowerCase()));
+		return this._predefinedTags.filter((t) => !e.has(t.value.toLowerCase()));
+	}
+	_renderPredefinedPopover() {
+		if (!this._container || !this._chipsWrap || (this.querySelectorAll("[data-mint-tags-predefined=\"true\"]").forEach((e) => e.remove()), !this._predefinedTags.length) || !this._input || !this._input.id) return;
+		let e = `${this.getAttribute("id") || this._input.id}-tags-field`;
+		this._container.id = e;
+		let t = document.createElement("mint-popover");
+		t.setAttribute("trigger-id", e), t.setAttribute("trigger-toggle", "false"), t.setAttribute("trigger-align", "start"), t.setAttribute("direction", "down"), t.setAttribute("padding", "0"), t.setAttribute("distance", "6px"), t.dataset.mintTagsPredefined = "true";
+		let n = document.createElement("div"), r = this._container.offsetWidth;
+		n.className = "box-border flex w-full min-w-0 flex-col gap-0.5 bg-white p-1 dark:bg-mint-elevated", r > 0 ? n.style.minWidth = `${Math.max(r, 200)}px` : n.style.minWidth = "12rem", n.addEventListener("mousedown", (e) => {
+			e.preventDefault();
+		});
+		let i = this._getAvailablePredefinedTags();
+		if (i.length) i.forEach((e) => {
+			let r = document.createElement("mint-button");
+			r.setAttribute("type", "button"), r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.className = "w-full justify-start", r.textContent = e.label || e.value, r.addEventListener("mousedown", (e) => {
+				e.preventDefault();
+			}, !0), r.addEventListener("click", () => {
+				this._addTag(e), t.removeAttribute("open"), requestAnimationFrame(() => {
+					this._input?.focus({ preventScroll: !0 }), this._container?.setAttribute("data-mint-tags-active", "true");
+				});
+			}), n.appendChild(r);
+		});
+		else {
+			let e = document.createElement("div");
+			e.className = "px-2 py-1 text-xs text-gray-500 dark:text-gray-400", e.textContent = "No tags available", n.appendChild(e);
+		}
+		t.appendChild(n), this._container.appendChild(t), this._attachPredefinedPopoverOpenOnInputFocus();
+	}
+	_getPredefinedPopoverEl() {
+		return this.querySelector("mint-popover[data-mint-tags-predefined=\"true\"]");
+	}
+	_attachPredefinedPopoverOpenOnInputFocus() {
+		!this._input || !this._predefinedTags.length || this._predefinedPopoverOpenListenersAttached || (this._predefinedPopoverOpenListenersAttached = !0, this._input.addEventListener("focus", () => {
+			if (this._predefinedBlurCloseTimer !== null && (window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = null), this.isLoading()) return;
+			let e = this._getPredefinedPopoverEl();
+			e && e.setAttribute("open", "true");
+		}), this._input.addEventListener("blur", () => {
+			this._predefinedBlurCloseTimer !== null && window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = window.setTimeout(() => {
+				if (this._predefinedBlurCloseTimer = null, this._suppressNextPredefinedBlurClose) {
+					this._suppressNextPredefinedBlurClose = !1;
+					return;
+				}
+				this._getPredefinedPopoverEl()?.removeAttribute("open");
+			}, 150);
+		}));
 	}
 	_renderSkeleton(e) {
 		let t = this._container;
@@ -6772,22 +6900,36 @@ var k = class extends HTMLElement {
 	_addFromInput() {
 		if (!this._input) return;
 		let e = this._input.value.trim();
-		if (e) {
-			if (this._tags.some((t) => t.value.toLowerCase() === e.toLowerCase())) {
+		if (!e) return;
+		if (this._tags.some((t) => t.value.toLowerCase() === e.toLowerCase())) {
+			this._input.value = "";
+			return;
+		}
+		let t = this._predefinedTags.find((t) => t.value.toLowerCase() === e.toLowerCase());
+		if (this.isPredefinedOnly()) {
+			if (!t) {
 				this._input.value = "";
 				return;
 			}
-			this._tags.push({
-				value: e,
-				label: e,
-				dismissable: !0
-			}), this._syncAttr(), this._renderChips(), this._emitChange(), this._input.value = "", setTimeout(() => {
-				this._input?.focus();
-			}, 10);
-		}
+			this._addTag(t);
+		} else this._addTag(t || {
+			value: e,
+			label: e,
+			dismissable: !0
+		});
+		this._input.value = "", setTimeout(() => {
+			this._input?.focus();
+		}, 10);
+	}
+	_addTag(e) {
+		this._tags.some((t) => t.value.toLowerCase() === e.value.toLowerCase()) || (this._tags.push({
+			value: e.value,
+			label: e.label || e.value,
+			dismissable: e.dismissable !== !1
+		}), this._syncAttr(), this._renderChips(), this._renderPredefinedPopover(), this._emitChange());
 	}
 	_removeTag(e) {
-		this._tags = this._tags.filter((t) => t.value !== e), this._syncAttr(), this._renderChips(), this._emitChange();
+		this._tags = this._tags.filter((t) => t.value !== e), this._syncAttr(), this._renderChips(), this._renderPredefinedPopover(), this._emitChange();
 	}
 	_emitChange() {
 		this.dispatchEvent(new CustomEvent("tags-change", {
@@ -6815,6 +6957,15 @@ var k = class extends HTMLElement {
 			(e.key === "Backspace" || e.key === "Delete") && t.dismissable && (e.preventDefault(), this._removeTag(t.value), this._focusInput());
 		});
 	}
+	_onContainerPointerDown(e) {
+		if (this._input && e.button === 0 && !e.defaultPrevented && !e.composedPath().some((e) => e === this._input)) {
+			this._predefinedBlurCloseTimer !== null && (window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = null), this._suppressNextPredefinedBlurClose = !0, e.preventDefault();
+			try {
+				this._input.focus({ preventScroll: !0 });
+			} catch {}
+			this._predefinedTags.length > 0 && this._getPredefinedPopoverEl()?.setAttribute("open", "true");
+		}
+	}
 	_onDragStart(e, t) {
 		this.hasAttribute("sortable") && (this._dragChip = t, this._dragIndex = Number(t.dataset.index), e.dataTransfer?.setData("text/plain", t.dataset.index || ""), e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.dropEffect = "move"), t.classList.add("opacity-60"));
 	}