@nonoun/native-ui 0.1.0 → 0.2.2

package/dist/dialog-controller.js

@@ -1,16 +1,21 @@
 import { i as e, o as t, t as n } from "./uid.js";
-var r = /* @__PURE__ */ new Map();
-function i(e) {
+var r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Set();
+function a(e) {
 	if (r.has(e.name)) {
 		console.warn(`[native-ui] Trait "${e.name}" is already registered.`);
 		return;
 	}
 	r.set(e.name, e);
+	for (let t of i) t(e.name);
 }
-function a(e) {
+/** Subscribe to trait registration events. Returns unsubscribe function. */
+function o(e) {
+	return i.add(e), () => i.delete(e);
+}
+function s(e) {
 	return r.get(e);
 }
-function o() {
+function c() {
 	return new Set(r.keys());
 }
 /**
@@ -18,8 +23,8 @@ function o() {
 * { trait: "draggable", key: "axis" }. Returns null if the attribute
 * doesn't match any registered trait name prefix.
 */
-function s(e) {
-	let t = o();
+function l(e) {
+	let t = c();
 	for (let n of t) if (e.startsWith(n + "-")) return {
 		trait: n,
 		key: e.slice(n.length + 1)
@@ -33,28 +38,30 @@ function s(e) {
 * Example: element has `draggable-axis="x"` and `draggable-mode="slot"`
 * → collectTraitOptions(el, 'draggable') returns { axis: 'x', mode: 'slot' }
 */
-function c(e, t) {
+function u(e, t) {
 	let n = t + "-", r = {};
 	for (let t of e.attributes) t.name.startsWith(n) && (r[t.name.slice(n.length)] = t.value);
 	return r;
 }
 /** Base custom element class with reactive effect lifecycle, child deferral, and trait protocol. */
-var l = class extends HTMLElement {
+var d = class extends HTMLElement {
 	#e = [];
 	#t = /* @__PURE__ */ new Map();
 	#n = null;
-	#r = !1;
+	#r = /* @__PURE__ */ new Set();
+	#i = null;
+	#a = !1;
 	addEffect(t) {
 		this.#e.push(e(t));
 	}
 	connectedCallback() {
-		if (this.#r) return;
-		this.#r = !0, this.setup();
+		if (this.#a) return;
+		this.#a = !0, this.setup();
 		let e = this.getAttribute("traits");
-		e !== null && this.#i(e);
+		e !== null && this.#o(e);
 	}
 	disconnectedCallback() {
-		this.#r = !1, this.#o(), this.#n?.disconnect(), this.#n = null, this.teardown();
+		this.#a = !1, this.#c(), this.#n?.disconnect(), this.#n = null, this.#i?.(), this.#i = null, this.#r.clear(), this.teardown();
 		for (let e of this.#e) e();
 		this.#e = [];
 	}
@@ -73,47 +80,51 @@ var l = class extends HTMLElement {
 	getTraitController(e) {
 		return this.#t.get(e) ?? null;
 	}
-	#i(e) {
-		this.#a(e), this.#n = new MutationObserver((e) => {
-			for (let t of e) if (t.attributeName === "traits") this.#a(this.getAttribute("traits") ?? "");
+	#o(e) {
+		this.#s(e), this.#n = new MutationObserver((e) => {
+			for (let t of e) if (t.attributeName === "traits") this.#s(this.getAttribute("traits") ?? "");
 			else if (t.attributeName) {
-				let e = s(t.attributeName);
+				let e = l(t.attributeName);
 				if (e) {
-					let t = a(e.trait), n = this.#t.get(e.trait);
-					t && n && t.update && t.update(n, c(this, e.trait));
+					let t = s(e.trait), n = this.#t.get(e.trait);
+					t && n && t.update && t.update(n, u(this, e.trait));
 				}
 			}
 		}), this.#n.observe(this, { attributes: !0 });
 	}
-	#a(e) {
+	#s(e) {
 		let t = new Set(e.split(/\s+/).filter(Boolean));
 		for (let [e, n] of this.#t) if (!t.has(e)) {
-			let t = a(e);
+			let t = s(e);
 			t && t.destroy(n), this.#t.delete(e);
 		}
+		this.#r.clear();
 		for (let e of t) {
 			if (this.#t.has(e)) continue;
-			let t = a(e);
+			let t = s(e);
 			if (!t) {
-				console.warn(`[native-ui] Unknown trait "${e}". Is it registered?`);
+				this.#r.add(e);
 				continue;
 			}
-			for (let [n] of this.#t) if (a(n)?.conflicts?.includes(e) || t.conflicts?.includes(n)) {
+			for (let [n] of this.#t) if (s(n)?.conflicts?.includes(e) || t.conflicts?.includes(n)) {
 				let t = `[native-ui] Trait conflict: "${e}" and "${n}" are incompatible.`;
 				console.warn(t);
 			}
-			let n = c(this, e), r = t.create(this, n);
+			let n = u(this, e), r = t.create(this, n);
 			this.#t.set(e, r);
 		}
+		this.#r.size > 0 && !this.#i ? this.#i = o((e) => {
+			this.#r.has(e) && (this.#r.delete(e), this.#s(this.getAttribute("traits") ?? ""), this.#r.size === 0 && (this.#i?.(), this.#i = null));
+		}) : this.#r.size === 0 && this.#i && (this.#i(), this.#i = null);
 	}
-	#o() {
+	#c() {
 		for (let [e, t] of this.#t) {
-			let n = a(e);
+			let n = s(e);
 			n && n.destroy(t);
 		}
 		this.#t.clear();
 	}
-}, u = class {
+}, f = class {
 	#e = /* @__PURE__ */ new Set();
 	#t = null;
 	#n = !1;
@@ -153,7 +164,7 @@ var l = class extends HTMLElement {
 	#o() {
 		this.#n &&= (document.removeEventListener("pointerdown", this.#r, !0), document.removeEventListener("pointerup", this.#i, !0), document.removeEventListener("pointercancel", this.#i, !0), !1);
 	}
-}, d = class {
+}, p = class {
 	#e = [];
 	#t = !1;
 	#n = (e) => {
@@ -185,7 +196,7 @@ var l = class extends HTMLElement {
 	#a() {
 		this.#e.length > 0 || (document.removeEventListener("pointerdown", this.#n, !0), document.removeEventListener("keydown", this.#r), this.#t = !1);
 	}
-}, f = class {
+}, m = class {
 	#e = null;
 	#t = 0;
 	#n = [];
@@ -225,16 +236,16 @@ var l = class extends HTMLElement {
 	dismissAll() {
 		for (let e of [...this.#n]) this.dismiss(e.id);
 	}
-}, p = null;
-function m() {
-	return p ||= {
-		dismissStack: new d(),
-		toastManager: new f(),
-		gestureRouter: new u()
-	}, p;
+}, h = null;
+function g() {
+	return h ||= {
+		dismissStack: new p(),
+		toastManager: new m(),
+		gestureRouter: new f()
+	}, h;
 }
-/** Enables pointer-driven drag-and-drop with drop mode or slot-based reordering. */
-var h = class {
+/** Enables pointer-driven drag-and-drop with drop, slot, or preview reordering. */
+var _ = class {
 	host;
 	selector;
 	dropZoneSelector;
@@ -251,55 +262,58 @@ var h = class {
 	#s = -1;
 	#c = -1;
 	#l = !1;
+	#u = null;
+	#d = null;
+	#f = -1;
 	constructor(e, t) {
 		this.host = e, this.selector = t.selector, this.dropZoneSelector = t.dropZoneSelector ?? "", this.axis = t.axis ?? "both", this.mode = t.mode ?? "drop", this.disabled = t.disabled ?? !1, this.attach();
 	}
 	attach() {
-		this.#l || (this.#l = !0, this.host.addEventListener("pointerdown", this.#m), this.host.addEventListener("pointerenter", this.#f, !0), this.host.addEventListener("pointerleave", this.#p, !0));
+		this.#l || (this.#l = !0, this.host.addEventListener("pointerdown", this.#_), this.host.addEventListener("pointerenter", this.#h, !0), this.host.addEventListener("pointerleave", this.#g, !0));
 	}
 	detach() {
-		this.#l && (this.#l = !1, this.host.removeEventListener("pointerdown", this.#m), this.host.removeEventListener("pointerenter", this.#f, !0), this.host.removeEventListener("pointerleave", this.#p, !0), this.#C());
+		this.#l && (this.#l = !1, this.host.removeEventListener("pointerdown", this.#_), this.host.removeEventListener("pointerenter", this.#h, !0), this.host.removeEventListener("pointerleave", this.#g, !0), this.#O());
 	}
 	destroy() {
 		this.detach();
 	}
-	#u() {
+	#p() {
 		return this.selector ? [...this.host.querySelectorAll(this.selector)] : [];
 	}
-	#d() {
-		return this.dropZoneSelector ? [...this.host.querySelectorAll(this.dropZoneSelector)] : this.#u();
+	#m() {
+		return this.dropZoneSelector ? [...this.host.querySelectorAll(this.dropZoneSelector)] : this.#p();
 	}
-	#f = (e) => {
+	#h = (e) => {
 		if (this.disabled || !this.selector || this.#t) return;
 		let t = e.target.closest?.(this.selector);
 		!t || !this.host.contains(t) || (t.style.outline = "2px solid var(--ui-focus-ring, highlight)", t.style.outlineOffset = "2px");
 	};
-	#p = (e) => {
+	#g = (e) => {
 		if (!this.selector) return;
 		let t = e.target.closest?.(this.selector);
 		!t || !this.host.contains(t) || (t.style.removeProperty("outline"), t.style.removeProperty("outline-offset"));
 	};
-	#m = (e) => {
+	#_ = (e) => {
 		if (e.button !== 0 || this.disabled || !this.selector) return;
 		let t = e.target.closest?.(this.selector);
 		if (!t || !this.host.contains(t)) return;
-		let n = this.#u().indexOf(t);
+		let n = this.#p().indexOf(t);
 		if (n === -1) return;
 		e.preventDefault(), this.#e = t, this.#s = n, this.#r = e.clientX, this.#i = e.clientY;
 		let r = t.getBoundingClientRect();
-		this.#a = r.left + r.width / 2 - e.clientX, this.#o = r.top + r.height / 2 - e.clientY, document.addEventListener("pointermove", this.#h), document.addEventListener("pointerup", this.#y), document.addEventListener("pointercancel", this.#b), document.addEventListener("keydown", this.#x);
+		this.#a = r.left + r.width / 2 - e.clientX, this.#o = r.top + r.height / 2 - e.clientY, document.addEventListener("pointermove", this.#v), document.addEventListener("pointerup", this.#w), document.addEventListener("pointercancel", this.#T), document.addEventListener("keydown", this.#E);
 	};
-	#h = (e) => {
+	#v = (e) => {
 		if (!this.#e) return;
 		if (!this.#t) {
 			this.#e.style.removeProperty("outline"), this.#e.style.removeProperty("outline-offset");
 			try {
-				this.#S(e);
+				this.#D(e);
 			} catch {
-				this.#C();
+				this.#O();
 				return;
 			}
-			this.#e.setAttribute("dragging", ""), this.host.dispatchEvent(new CustomEvent("ui-drag-start", {
+			this.#e.setAttribute("dragging", ""), this.mode === "preview" && (this.#u = this.#e.parentElement, this.#d = this.#e.nextElementSibling, this.#f = -1), this.host.dispatchEvent(new CustomEvent("ui-drag-start", {
 				bubbles: !0,
 				composed: !0,
 				detail: {
@@ -318,7 +332,7 @@ var h = class {
 				y: e.clientY
 			}
 		}));
-		let r = this.#d();
+		let r = this.#m().filter((e) => e !== this.#t);
 		if (this.mode === "slot") {
 			let t = e.clientX + this.#a, n = e.clientY + this.#o, i = r.filter((e) => e !== this.#e), a = 0;
 			for (let e = 0; e < i.length; e++) {
@@ -326,7 +340,10 @@ var h = class {
 				if (this.axis === "horizontal" ? t > o : (this.axis === "vertical" || t > o) && n > s) a = e + 1;
 				else break;
 			}
-			this.#_(r, a);
+			this.#b(r, a);
+		} else if (this.mode === "preview") {
+			let t = e.clientX + this.#a, n = e.clientY + this.#o;
+			this.#S(r, t, n);
 		} else {
 			let t = null, n = -1;
 			for (let i = 0; i < r.length; i++) {
@@ -336,10 +353,10 @@ var h = class {
 					break;
 				}
 			}
-			this.#g(r, t, n);
+			this.#y(r, t, n);
 		}
 	};
-	#g(e, t, n) {
+	#y(e, t, n) {
 		for (let n of e) n !== t && (n.removeAttribute("drag-over"), n.style.removeProperty("outline"), n.style.removeProperty("outline-offset"));
 		t && (t.setAttribute("drag-over", ""), t.style.outline = "2px solid var(--ui-focus-ring, highlight)", t.style.outlineOffset = "2px", this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
 			bubbles: !0,
@@ -351,9 +368,9 @@ var h = class {
 			}
 		})));
 	}
-	#_(e, t) {
+	#b(e, t) {
 		if (t === -1 || t === this.#c) return;
-		this.#c = t, this.#v(e), this.#n || (this.#n = document.createElement("div"), this.#n.className = "drag-placeholder", this.#n.setAttribute("aria-hidden", "true"));
+		this.#c = t, this.#x(e), this.#n || (this.#n = document.createElement("div"), this.#n.className = "drag-placeholder", this.#n.setAttribute("aria-hidden", "true"));
 		let n = e.filter((e) => e !== this.#e), r = Math.min(t, n.length);
 		r < n.length ? n[r].before(this.#n) : n.length > 0 ? n[n.length - 1].after(this.#n) : this.host.appendChild(this.#n), r < n.length && n[r].setAttribute("drag-slot-before", ""), r > 0 && r - 1 < n.length && n[r - 1].setAttribute("drag-slot-after", "");
 		let i = r < n.length ? n[r] : null;
@@ -367,13 +384,41 @@ var h = class {
 			}
 		}));
 	}
-	#v(e) {
+	#x(e) {
 		for (let t of e) t.removeAttribute("drag-slot-before"), t.removeAttribute("drag-slot-after");
 	}
-	#y = (e) => {
+	#S(e, t, n) {
+		let r = e.filter((e) => e !== this.#e);
+		if (r.length === 0) return;
+		let i = e[0].getBoundingClientRect(), a = 1;
+		for (let t = 1; t < e.length && Math.abs(e[t].getBoundingClientRect().top - i.top) < i.height * .5; t++) a = t + 1;
+		let o = a > 1 ? e[1].getBoundingClientRect().left - i.left : i.width, s = a < e.length ? e[a].getBoundingClientRect().top - i.top : i.height, c = Math.round((t - (i.left + i.width / 2)) / o), l = Math.round((n - (i.top + i.height / 2)) / s), u = Math.ceil(r.length / a) - 1, d = Math.max(0, Math.min(c, a - 1)), f = Math.max(0, Math.min(l, u)) * a + d;
+		if (f = Math.max(0, Math.min(f, r.length)), f === this.#f) return;
+		this.#f = f;
+		let p = f < r.length ? r[f] : null, m = () => {
+			p ? p.before(this.#e) : r[r.length - 1].after(this.#e);
+		};
+		typeof document.startViewTransition == "function" ? document.startViewTransition(m) : m(), this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				item: this.#e,
+				index: f,
+				insertBefore: p
+			}
+		}));
+	}
+	#C() {
+		if (this.mode !== "preview" || !this.#e || !this.#u) return;
+		let e = this.#e, t = this.#d, n = this.#u, r = () => {
+			t && t.isConnected ? t.before(e) : n.appendChild(e);
+		};
+		typeof document.startViewTransition == "function" ? document.startViewTransition(r) : r();
+	}
+	#w = (e) => {
 		if (this.#e) {
 			if (this.#t) if (this.mode === "slot") {
-				let e = this.#u().filter((e) => e !== this.#e), t = this.#c >= 0 && this.#c < e.length ? e[this.#c] : null;
+				let e = this.#p().filter((e) => e !== this.#e), t = this.#c >= 0 && this.#c < e.length ? e[this.#c] : null;
 				this.host.dispatchEvent(new CustomEvent("ui-drop", {
 					bubbles: !0,
 					composed: !0,
@@ -384,8 +429,19 @@ var h = class {
 						insertBefore: t
 					}
 				}));
+			} else if (this.mode === "preview") {
+				let e = this.#p(), t = this.#e ? e.indexOf(this.#e) : -1;
+				this.#u = null, this.#d = null, this.host.dispatchEvent(new CustomEvent("ui-drop", {
+					bubbles: !0,
+					composed: !0,
+					detail: {
+						item: this.#e,
+						fromIndex: this.#s,
+						toIndex: t
+					}
+				}));
 			} else {
-				let e = this.#d(), t = e.find((e) => e.hasAttribute("drag-over")) ?? null, n = t ? e.indexOf(t) : -1;
+				let e = this.#m(), t = e.find((e) => e.hasAttribute("drag-over")) ?? null, n = t ? e.indexOf(t) : -1;
 				this.host.dispatchEvent(new CustomEvent("ui-drop", {
 					bubbles: !0,
 					composed: !0,
@@ -397,29 +453,29 @@ var h = class {
 					}
 				}));
 			}
-			this.#C();
+			this.#O();
 		}
 	};
-	#b = () => {
-		this.#e && (this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
+	#T = () => {
+		this.#e && (this.#C(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
 			bubbles: !0,
 			composed: !0,
 			detail: { item: this.#e }
-		})), this.#C());
+		})), this.#O());
 	};
-	#x = (e) => {
-		e.key === "Escape" && this.#e && (e.preventDefault(), this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
+	#E = (e) => {
+		e.key === "Escape" && this.#e && (e.preventDefault(), this.#C(), this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
 			bubbles: !0,
 			composed: !0,
 			detail: { item: this.#e }
-		})), this.#C());
+		})), this.#O());
 	};
-	#S(e) {
+	#D(e) {
 		if (!this.#e) return;
 		let t = this.#e.getBoundingClientRect(), n = this.#e.cloneNode(!0);
-		n.setAttribute("popover", "manual"), n.setAttribute("aria-hidden", "true"), this.host.appendChild(n), n.showPopover(), n.style.position = "fixed", n.style.inset = "unset", n.style.left = `${t.left}px`, n.style.top = `${t.top}px`, n.style.width = `${t.width}px`, n.style.height = `${t.height}px`, n.style.margin = "0", n.style.pointerEvents = "none", n.style.opacity = "0.8", n.style.transformOrigin = "center center", n.style.border = "none", n.style.outline = "none", this.#t = n, this.#r = e.clientX, this.#i = e.clientY;
+		n.setAttribute("popover", "manual"), n.setAttribute("aria-hidden", "true"), document.body.appendChild(n), n.showPopover(), n.style.position = "fixed", n.style.inset = "unset", n.style.left = `${t.left}px`, n.style.top = `${t.top}px`, n.style.width = `${t.width}px`, n.style.height = `${t.height}px`, n.style.margin = "0", n.style.pointerEvents = "none", n.style.opacity = "0.8", n.style.transformOrigin = "center center", n.style.border = "none", n.style.outline = "none", this.#t = n, this.#r = e.clientX, this.#i = e.clientY;
 	}
-	#C() {
+	#O() {
 		if (this.#t) {
 			if (this.#t.isConnected) try {
 				this.#t.hidePopover();
@@ -427,12 +483,12 @@ var h = class {
 			this.#t.remove(), this.#t = null;
 		}
 		this.#e && this.#e.removeAttribute("dragging");
-		let e = this.#d();
-		if (this.mode === "slot") this.#v(e);
+		let e = this.#m();
+		if (this.mode === "slot") this.#x(e);
 		else for (let t of e) t.removeAttribute("drag-over"), t.style.removeProperty("outline"), t.style.removeProperty("outline-offset");
-		this.#n &&= (this.#n.remove(), null), this.#e = null, this.#s = -1, this.#c = -1, document.removeEventListener("pointermove", this.#h), document.removeEventListener("pointerup", this.#y), document.removeEventListener("pointercancel", this.#b), document.removeEventListener("keydown", this.#x);
+		this.#n &&= (this.#n.remove(), null), this.#e = null, this.#s = -1, this.#c = -1, this.#u = null, this.#d = null, this.#f = -1, document.removeEventListener("pointermove", this.#v), document.removeEventListener("pointerup", this.#w), document.removeEventListener("pointercancel", this.#T), document.removeEventListener("keydown", this.#E);
 	}
-}, g = class {
+}, v = class {
 	host;
 	handleSelector;
 	axis;
@@ -515,7 +571,7 @@ var h = class {
 	#d() {
 		this.#i = !1, this.host.removeAttribute("resizing"), document.removeEventListener("pointermove", this.#s), document.removeEventListener("pointerup", this.#c), document.removeEventListener("pointercancel", this.#l), document.removeEventListener("keydown", this.#u);
 	}
-}, _ = class {
+}, y = class {
 	host;
 	disabled;
 	#e = !1;
@@ -562,7 +618,7 @@ var h = class {
 			detail: { pointerType: "keyboard" }
 		})));
 	};
-}, v = class {
+}, b = class {
 	host;
 	selector;
 	orientation;
@@ -616,7 +672,7 @@ var h = class {
 		let r = e[t];
 		r && (r.setAttribute("tabindex", "0"), r.focus());
 	}
-}, y = class {
+}, x = class {
 	host;
 	#e = 0;
 	constructor(e) {
@@ -624,21 +680,21 @@ var h = class {
 	}
 	enable() {
 		this.#e = requestAnimationFrame(() => {
-			this.#e = 0, m().dismissStack.push(this.host);
+			this.#e = 0, g().dismissStack.push(this.host);
 		});
 	}
 	disable() {
-		this.#e &&= (cancelAnimationFrame(this.#e), 0), m().dismissStack.remove(this.host);
+		this.#e &&= (cancelAnimationFrame(this.#e), 0), g().dismissStack.remove(this.host);
 	}
 	destroy() {
-		this.#e &&= (cancelAnimationFrame(this.#e), 0), m().dismissStack.remove(this.host);
+		this.#e &&= (cancelAnimationFrame(this.#e), 0), g().dismissStack.remove(this.host);
 	}
-}, b = class {
+}, S = class {
 	host;
 	#e;
 	#t = null;
 	constructor(e) {
-		this.host = e, this.#e = new y(e);
+		this.host = e, this.#e = new x(e);
 	}
 	wirePopover(e, t) {
 		this.#t = t;
@@ -661,7 +717,7 @@ var h = class {
 	destroy() {
 		this.#e.destroy(), this.#t = null;
 	}
-}, x = class {
+}, C = class {
 	host;
 	listValue = t(null);
 	itemSelector;
@@ -678,7 +734,7 @@ var h = class {
 				cancelable: !0,
 				detail: t
 			}));
-		}), this.#e = new v(e, {
+		}), this.#e = new b(e, {
 			selector: this.itemSelector,
 			orientation: t.orientation ?? "vertical",
 			wrap: t.wrap ?? !0,
@@ -689,7 +745,7 @@ var h = class {
 				n(() => {
 					let t = this.listValue.value, n = e.querySelectorAll(this.itemSelector), r = this.ariaAttr === "aria-current";
 					for (let e of n) {
-						let n = e.value;
+						let n = e.getAttribute("value") ?? e.value;
 						if (n !== void 0) {
 							let i = n === t;
 							r ? i ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current") : e.setAttribute(this.ariaAttr, i ? "true" : "false");
@@ -717,7 +773,7 @@ var h = class {
 		let t = e.detail;
 		this.onChildSelect(t);
 	};
-}, S = class {
+}, w = class {
 	host;
 	#e = null;
 	#t;
@@ -751,4 +807,4 @@ var h = class {
 		t !== e && e.appendChild(t), this.host.appendChild(e), this.#e = e, e.addEventListener("cancel", this.#n), e.addEventListener("click", this.#r), this.host.addEventListener("ui-dismiss", this.#i);
 	}
 };
-export { a as _, v as a, h as c, m as d, u as f, o as g, s as h, y as i, d as l, c as m, x as n, _ as o, l as p, b as r, g as s, S as t, f as u, i as v };
+export { s as _, b as a, _ as c, g as d, f, c as g, l as h, x as i, p as l, u as m, C as n, y as o, d as p, S as r, v as s, w as t, m as u, o as v, a as y };

package/dist/native-ui-lean.css

@@ -7008,6 +7008,14 @@
     height: 100%;
   }
 
+  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
+     so surrounding buttons/slots don't render with phantom dimensions */
+  :where(ui-icon:empty) {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
   /* ── Icon Size Variants ── */
 
   :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }

package/dist/native-ui.css

@@ -7084,6 +7084,14 @@
     height: 100%;
   }
 
+  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
+     so surrounding buttons/slots don't render with phantom dimensions */
+  :where(ui-icon:empty) {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
   /* ── Icon Size Variants ── */
 
   :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }

package/dist/native-ui.js

@@ -1,6 +1,6 @@
 import { a as e, i as t, n, o as ee, r as te, t as ne } from "./uid.js";
 import { A as re, B as ie, C as r, D as i, E as a, F as o, G as s, H as c, I as l, L as u, M as d, N as f, O as p, P as m, R as h, S as g, T as _, U as v, V as y, W as b, _ as x, a as S, b as C, c as w, d as T, f as E, g as D, h as O, i as k, j as A, k as j, l as M, m as N, n as P, o as F, p as I, r as L, s as R, t as z, u as B, v as V, w as H, x as U, y as W, z as G } from "./register-all2.js";
-import { _ as K, a as q, c as J, d as Y, f as ae, g as oe, h as se, i as ce, l as le, m as ue, n as de, o as fe, p as X, r as pe, s as Z, t as me, u as he, v as ge } from "./dialog-controller.js";
+import { _ as K, a as q, c as J, d as Y, f as ae, g as oe, h as se, i as ce, l as le, m as ue, n as de, o as fe, p as X, r as pe, s as Z, t as me, u as he, y as ge } from "./dialog-controller.js";
 import { $ as _e, A as ve, B as ye, C as be, Ct as xe, D as Se, E as Ce, F as we, G as Te, H as Ee, I as De, J as Oe, K as ke, L as Ae, M as je, N as Q, O as Me, P as Ne, Q as Pe, R as Fe, S as Ie, St as Le, T as Re, Tt as ze, U as Be, V as Ve, W as He, X as Ue, Y as We, Z as Ge, _ as Ke, _t as qe, a as Je, at as Ye, b as Xe, bt as Ze, c as Qe, ct as $e, d as et, dt as tt, et as nt, f as rt, ft as it, g as at, gt as ot, h as st, ht as ct, i as lt, it as ut, j as dt, k as ft, l as pt, lt as mt, m as ht, mt as gt, n as _t, nt as vt, o as yt, ot as bt, p as xt, pt as St, q as Ct, r as wt, rt as Tt, s as Et, st as Dt, t as Ot, tt as kt, u as At, ut as jt, v as Mt, vt as Nt, w as Pt, wt as Ft, x as It, xt as Lt, y as Rt, yt as zt, z as Bt } from "./ui-icon-element.js";
 var $ = class extends Event {
 	context;

package/dist/register-all2.js

@@ -1,5 +1,5 @@
 import { c as e, l as t, s as n, u as r } from "./uid.js";
-import { a as i, c as a, d as o, i as s, n as c, o as l, r as ee, s as te, t as u, v as d } from "./dialog-controller.js";
+import { a as i, c as a, d as o, i as s, n as c, o as l, r as ee, s as te, t as u, y as d } from "./dialog-controller.js";
 function f(t) {
 	let n = e();
 	r(null);

package/dist/traits/drag-controller.d.ts

@@ -2,17 +2,17 @@ export interface DragOptions {
     selector: string;
     dropZoneSelector?: string;
     axis?: 'vertical' | 'horizontal' | 'both';
-    mode?: 'drop' | 'slot';
+    mode?: 'drop' | 'slot' | 'preview';
     disabled?: boolean;
 }
-/** Enables pointer-driven drag-and-drop with drop mode or slot-based reordering. */
+/** Enables pointer-driven drag-and-drop with drop, slot, or preview reordering. */
 export declare class DragController {
     #private;
     readonly host: HTMLElement;
     selector: string;
     dropZoneSelector: string;
     axis: 'vertical' | 'horizontal' | 'both';
-    mode: 'drop' | 'slot';
+    mode: 'drop' | 'slot' | 'preview';
     disabled: boolean;
     constructor(host: HTMLElement, options: DragOptions);
     attach(): void;

package/dist/traits/drag-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-controller.d.ts","sourceRoot":"","sources":["../../src/traits/drag-controller.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oFAAoF;AACpF,qBAAa,cAAc;;IACzB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACzC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;gBAaN,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IAUnD,MAAM,IAAI,IAAI;IAQd,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;CAoYhB"}
+{"version":3,"file":"drag-controller.d.ts","sourceRoot":"","sources":["../../src/traits/drag-controller.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,mFAAmF;AACnF,qBAAa,cAAc;;IACzB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACzC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;gBAkBN,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IAUnD,MAAM,IAAI,IAAI;IAQd,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;CA8fhB"}

package/dist/traits/list-navigate-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-navigate-controller.d.ts","sourceRoot":"","sources":["../../src/traits/list-navigate-controller.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED,wGAAwG;AACxG,qBAAa,sBAAsB;;IACjC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAgB;IAEzD,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;gBAKtD,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,mBAAwB;IAoDhE,MAAM,IAAI,IAAI;IAMd,MAAM,IAAI,IAAI;IAMd,OAAO,IAAI,IAAI;IAKf,8EAA8E;IAC9E,IAAI,WAAW,IAAI,qBAAqB,CAEvC;CAOF"}
+{"version":3,"file":"list-navigate-controller.d.ts","sourceRoot":"","sources":["../../src/traits/list-navigate-controller.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED,wGAAwG;AACxG,qBAAa,sBAAsB;;IACjC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAgB;IAEzD,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;gBAKtD,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,mBAAwB;IAuDhE,MAAM,IAAI,IAAI;IAMd,MAAM,IAAI,IAAI;IAMd,OAAO,IAAI,IAAI;IAKf,8EAA8E;IAC9E,IAAI,WAAW,IAAI,qBAAqB,CAEvC;CAOF"}

package/dist/traits.js

@@ -1,4 +1,4 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./uid.js";
 import { A as o, B as s, C as c, D as l, E as u, F as d, G as f, H as p, I as m, L as h, M as g, N as _, O as v, P as y, R as b, S as x, T as S, U as C, V as w, W as T, _ as E, a as D, b as O, c as k, d as A, f as j, g as M, h as N, i as P, j as F, k as I, l as L, m as R, n as z, o as B, p as V, r as H, s as U, t as W, u as G, v as K, w as q, x as J, y as Y, z as X } from "./register-all2.js";
-import { _ as Z, a as Q, c as $, d as ee, g as te, h as ne, i as re, l as ie, m as ae, n as oe, o as se, p as ce, r as le, s as ue, t as de, u as fe, v as pe } from "./dialog-controller.js";
+import { _ as Z, a as Q, c as $, d as ee, g as te, h as ne, i as re, l as ie, m as ae, n as oe, o as se, p as ce, r as le, s as ue, t as de, u as fe, y as pe } from "./dialog-controller.js";
 export { d as ClipboardController, l as CollapsibleController, _ as CopyController, de as DialogController, re as DismissController, ie as DismissStack, $ as DragController, F as DropZoneController, m as EditController, v as FocusTrapController, y as HoverController, g as IntersectController, oe as ListNavigateController, le as PopoverController, se as PressController, w as RangeSelectController, ue as ResizeController, Q as RovingFocusController, b as SearchController, X as SelectionController, o as SortController, h as SwipeController, u as ToastController, fe as ToastManager, ce as UIElement, I as ValidateController, s as VirtualScrollController, i as batch, P as clippableAdapter, E as collapsibleAdapter, ae as collectTraitOptions, e as computed, c as copyableAdapter, p as debugReactive, n as define, A as dialogableAdapter, N as dismissableAdapter, G as draggableAdapter, J as droppableAdapter, z as editableAdapter, t as effect, K as focusTrappableAdapter, te as getRegisteredTraitNames, Z as getTrait, ee as getTraitRuntime, q as hoverableAdapter, x as intersectableAdapter, C as isComputed, T as isSignal, j as listNavigableAdapter, ne as parseTraitAttribute, V as popoverableAdapter, S as pressableAdapter, L as rangeSelectableAdapter, W as registerAllTraits, pe as registerTrait, k as resizableAdapter, M as rovingFocusableAdapter, D as searchableAdapter, B as selectableAdapter, r as signal, O as sortableAdapter, H as swipeableAdapter, R as toastableAdapter, a as uid, f as untrack, Y as validatableAdapter, U as virtualizableAdapter };