⚡ build

dist/dde-with-signals.js

@@ -1,7 +1,7 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 // src/signals-common.js
-var N = {
+var T = {
 	isSignal(t) {
 		return !1;
 	},
@@ -10,15 +10,15 @@ var N = {
 	}
 };
 function H(t, e = !0) {
-	return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t);
+	return e ? Object.assign(T, t) : (Object.setPrototypeOf(t, T), t);
 }
 function j(t) {
-	return N.isPrototypeOf(t) && t !== N ? t : N;
+	return T.isPrototypeOf(t) && t !== T ? t : T;
 }
 
 // src/helpers.js
 var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function A(t) {
+function S(t) {
 	return typeof t > "u";
 }
 function X(t) {
@@ -55,20 +55,20 @@ var d = {
 	q: (t) => t || Promise.resolve()
 };
 function pt(t, e, r) {
-	if (Reflect.set(t, e, r), !!A(r)) {
+	if (Reflect.set(t, e, r), !!S(r)) {
 		if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
+var O = "__dde_lifecyclesToEvents", w = "dde:connected", y = "dde:disconnected", k = "dde:attributeChanged";
 
 // src/dom.js
 function Mt(t) {
 	return d.q(t);
 }
-var y = [{
+var A = [{
 	get scope() {
 		return d.D.body;
 	},
@@ -76,7 +76,7 @@ var y = [{
 	prevent: !0
 }], x = {
 	get current() {
-		return y[y.length - 1];
+		return A[A.length - 1];
 	},
 	get host() {
 		return this.current.host;
@@ -86,17 +86,17 @@ var y = [{
 		return t.prevent = !0, t;
 	},
 	get state() {
-		return [...y];
+		return [...A];
 	},
 	push(t = {}) {
-		return y.push(Object.assign({}, this.current, { prevent: !1 }, t));
+		return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
 	},
 	pushRoot() {
-		return y.push(y[0]);
+		return A.push(A[0]);
 	},
 	pop() {
-		if (y.length !== 1)
+		if (A.length !== 1)
-			return y.pop();
+			return A.pop();
 	}
 };
 function Y(...t) {
@@ -111,16 +111,16 @@ function M(t, e, ...r) {
 	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
 			o = 1;
-			let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(u)), void 0) : u;
+			let i = (...h) => h.length ? (o === 1 ? r.unshift(...h) : h.forEach((E) => E(u)), void 0) : u;
-			x.push({ scope: t, host: a }), c = t(e || void 0);
+			x.push({ scope: t, host: i }), c = t(e || void 0);
-			let h = c instanceof d.F;
+			let p = c instanceof d.F;
 			if (c.nodeName === "#comment") break;
 			let v = M.mark({
 				type: "component",
 				name: t.name,
-				host: h ? "this" : "parentElement"
+				host: p ? "this" : "parentElement"
 			});
-			c.prepend(v), h && (u = v);
+			c.prepend(v), p && (u = v);
 			break;
 		}
 		case t === "#text":
@@ -135,7 +135,7 @@ function M(t, e, ...r) {
 		case !c:
 			c = q.call(this, d.D.createElement(t), e);
 	}
-	return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c;
+	return lt(c), u || (u = c), r.forEach((i) => i(u)), o && x.pop(), o = 2, c;
 }
 M.mark = function(t, e = !1) {
 	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@@ -155,17 +155,17 @@ function Pt(t, e = t) {
 		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
 	);
 	if (t.append = new Proxy(t.append, {
-		apply(c, u, a) {
+		apply(c, u, i) {
-			if (a[0] === e) return c.apply(t, a);
+			if (i[0] === e) return c.apply(t, i);
-			for (let h of a) {
+			for (let p of i) {
-				let v = (h.slot || "") + r;
+				let v = (p.slot || "") + r;
 				try {
-					bt(h, "remove", "slot");
+					bt(p, "remove", "slot");
 				} catch {
 				}
-				let l = o[v];
+				let h = o[v];
-				if (!l) return;
+				if (!h) return;
-				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h);
+				h.name.startsWith(n) || (h.childNodes.forEach((E) => E.remove()), h.name = n + v), h.append(p);
 			}
 			return t.append = c, t;
 		}
@@ -189,7 +189,7 @@ function nt(t, e, r) {
 		t,
 		e,
 		r,
-		(a, h) => nt.call(c, t, a, h)
+		(i, p) => nt.call(c, t, i, p)
 	);
 	let [u] = e;
 	if (u === "=") return n(e.slice(1), r);
@@ -205,9 +205,9 @@ function nt(t, e, r) {
 			if (typeof r != "object") break;
 		/* falls through */
 		case "dataset":
-			return B(o, r, et.bind(null, t[e]));
+			return B(o, e, t, r, et.bind(null, t[e]));
 		case "ariaset":
-			return B(o, r, (a, h) => n("aria-" + a, h));
+			return B(o, e, t, r, (i, p) => n("aria-" + i, p));
 		case "classList":
 			return ht.call(c, t, r);
 	}
@@ -222,6 +222,8 @@ function ht(t, e) {
 	let r = j(this);
 	return B(
 		r,
+		"classList",
+		t,
 		e,
 		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
 	), t;
@@ -232,27 +234,28 @@ function bt(t, e, r, n) {
 function gt(t, e) {
 	if (!(e in t)) return !1;
 	let r = ot(t, e);
-	return !A(r.set);
+	return !S(r.set);
 }
 function ot(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
 	let r = Object.getOwnPropertyDescriptor(t, e);
 	return r || ot(t, e);
 }
-function B(t, e, r) {
+function B(t, e, r, n, o) {
-	if (!(typeof e != "object" || e === null))
+	let c = String;
-		return Object.entries(e).forEach(function([o, c]) {
+	if (!(typeof n != "object" || n === null))
-			o && (c = t.processReactiveAttribute(e, o, c, r), r(o, c));
+		return Object.entries(n).forEach(function([i, p]) {
+			i && (i = new c(i), i.target = e, p = t.processReactiveAttribute(r, i, p, o), o(i, p));
 		});
 }
 function vt(t, e, r, n) {
-	return t[(A(n) ? "remove" : "set") + e](r, n);
+	return t[(S(n) ? "remove" : "set") + e](r, n);
 }
 function mt(t, e, r, n, o = null) {
-	return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n);
+	return t[(S(n) ? "remove" : "set") + e + "NS"](o, r, n);
 }
 function et(t, e, r) {
-	if (Reflect.set(t, e, r), !!A(r))
+	if (Reflect.set(t, e, r), !!S(r))
 		return Reflect.deleteProperty(t, e);
 }
 
@@ -264,93 +267,93 @@ var C = d.M ? Et() : new Proxy({}, {
 	}
 });
 function Et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) {
+	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(f) {
-		for (let f of s)
+		for (let a of f)
-			if (f.type === "childList") {
+			if (a.type === "childList") {
-				if (l(f.addedNodes, !0)) {
+				if (h(a.addedNodes, !0)) {
-					i();
+					s();
 					continue;
 				}
-				E(f.removedNodes, !0) && i();
+				E(a.removedNodes, !0) && s();
 			}
-	}, n = new d.M(r(a));
+	}, n = new d.M(r(i));
 	return {
-		observe(i) {
+		observe(s) {
-			let s = new d.M(r(() => {
+			let f = new d.M(r(() => {
 			}));
-			return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
+			return f.observe(s, { childList: !0, subtree: !0 }), () => f.disconnect();
 		},
-		onConnected(i, s) {
+		onConnected(s, f) {
 			u();
-			let f = c(i);
+			let a = c(s);
-			f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
+			a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
 		},
-		offConnected(i, s) {
+		offConnected(s, f) {
-			if (!t.has(i)) return;
+			if (!t.has(s)) return;
-			let f = t.get(i);
+			let a = t.get(s);
-			f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f));
+			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(s, a));
 		},
-		onDisconnected(i, s) {
+		onDisconnected(s, f) {
 			u();
-			let f = c(i);
+			let a = c(s);
-			f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
+			a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
 		},
-		offDisconnected(i, s) {
+		offDisconnected(s, f) {
-			if (!t.has(i)) return;
+			if (!t.has(s)) return;
-			let f = t.get(i);
+			let a = t.get(s);
-			f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f));
+			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(s, a));
 		}
 	};
-	function o(i, s) {
+	function o(s, f) {
-		s.length_c || s.length_d || (t.delete(i), a());
+		f.length_c || f.length_d || (t.delete(s), i());
 	}
-	function c(i) {
+	function c(s) {
-		if (t.has(i)) return t.get(i);
+		if (t.has(s)) return t.get(s);
-		let s = {
+		let f = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(i, s), s;
+		return t.set(s, f), f;
 	}
 	function u() {
 		e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
 	}
-	function a() {
+	function i() {
 		!e || t.size || (e = !1, n.disconnect());
 	}
-	function h() {
+	function p() {
-		return new Promise(function(i) {
+		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(i);
+			(requestIdleCallback || requestAnimationFrame)(s);
 		});
 	}
-	async function v(i) {
+	async function v(s) {
-		t.size > 30 && await h();
+		t.size > 30 && await p();
-		let s = [];
+		let f = [];
-		if (!(i instanceof Node)) return s;
+		if (!(s instanceof Node)) return f;
-		for (let f of t.keys())
+		for (let a of t.keys())
-			f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
+			a === s || !(a instanceof Node) || s.contains(a) && f.push(a);
-		return s;
+		return f;
 	}
-	function l(i, s) {
+	function h(s, f) {
-		let f = !1;
+		let a = !1;
-		for (let b of i) {
+		for (let b of s) {
-			if (s && v(b).then(l), !t.has(b)) continue;
+			if (f && v(b).then(h), !t.has(b)) continue;
-			let L = t.get(b);
+			let N = t.get(b);
-			L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
+			N.length_c && (b.dispatchEvent(new Event(w)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), a = !0);
 		}
-		return f;
+		return a;
 	}
-	function E(i, s) {
+	function E(s, f) {
-		let f = !1;
+		let a = !1;
-		for (let b of i)
+		for (let b of s)
-			s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
+			f && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(L(b)), a = !0);
-		return f;
+		return a;
 	}
-	function k(i) {
+	function L(s) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
+			s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s));
 		};
 	}
 }
@@ -360,23 +363,23 @@ function It(t, e, r = _t) {
 	let n = t.host || t;
 	x.push({
 		scope: n,
-		host: (...u) => u.length ? u.forEach((a) => a(n)) : n
+		host: (...u) => u.length ? u.forEach((i) => i(n)) : n
 	}), typeof r == "function" && (r = r.call(n, n));
 	let o = n[O];
 	o || xt(n);
 	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c);
+	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(y, C.observe(t), { once: !0 }), x.pop(), t.append(c);
 }
 function xt(t) {
 	return J(t.prototype, "connectedCallback", function(e, r, n) {
 		e.apply(r, n), r.dispatchEvent(new Event(w));
 	}), J(t.prototype, "disconnectedCallback", function(e, r, n) {
 		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(S))
+			() => !r.isConnected && r.dispatchEvent(new Event(y))
 		);
 	}), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
 		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(T, {
+		r.dispatchEvent(new CustomEvent(k, {
 			detail: [o, c]
 		})), e.apply(r, n);
 	}), t.prototype[O] = !0, t;
@@ -410,7 +413,7 @@ _.connected = function(t, e) {
 };
 _.disconnected = function(t, e) {
 	return e = ct(e), function(n) {
-		return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
+		return n.addEventListener(y, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
 	};
 };
 var Z = /* @__PURE__ */ new WeakMap();
@@ -422,11 +425,11 @@ _.disconnectedAsAbort = function(t) {
 var wt = /* @__PURE__ */ new WeakSet();
 _.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n;
+		if (n.addEventListener(k, t, e), n[O] || wt.has(n) || !d.M) return n;
 		let o = new d.M(function(u) {
-			for (let { attributeName: a, target: h } of u)
+			for (let { attributeName: i, target: p } of u)
-				h.dispatchEvent(
+				p.dispatchEvent(
-					new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
+					new CustomEvent(k, { detail: [i, p.getAttribute(i)] })
 				);
 		});
 		return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
@@ -434,10 +437,10 @@ _.attributeChanged = function(t, e) {
 };
 
 // src/signals-lib.js
-var p = "__dde_signal";
+var l = "__dde_signal";
 function U(t) {
 	try {
-		return I(t, p);
+		return I(t, l);
 	} catch {
 		return !1;
 	}
@@ -451,13 +454,13 @@ function m(t, e) {
 		let [o, ...c] = g.get(n);
 		if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
 		let u = g.get(n);
-		for (let a of c)
+		for (let i of c)
-			u.has(a) || R(a, n);
+			u.has(i) || R(i, n);
 	};
-	return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
+	return g.set(r[l], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
 }
 m.action = function(t, e, ...r) {
-	let n = t[p], { actions: o } = n;
+	let n = t[l], { actions: o } = n;
 	if (!o || !(e in o))
 		throw new Error(`'${t}' has no action with name '${e}'!`);
 	if (o[e].apply(n, r), n.skip) return delete n.skip;
@@ -476,8 +479,8 @@ m.symbols = {
 };
 m.clear = function(...t) {
 	for (let r of t) {
-		let n = r[p];
+		let n = r[l];
-		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]);
+		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[l]);
 	}
 	function e(r, n) {
 		n.listeners.forEach((o) => {
@@ -491,38 +494,38 @@ var D = "__dde_reactive";
 m.el = function(t, e) {
 	let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
 	o.append(r, n);
-	let { current: c } = x, u = {}, a = (h) => {
+	let { current: c } = x, u = {}, i = (p) => {
 		if (!r.parentNode || !n.parentNode)
-			return R(t, a);
+			return R(t, i);
 		let v = u;
 		u = {}, x.push(c);
-		let l = e(h, function(s, f) {
+		let h = e(p, function(f, a) {
 			let b;
-			return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
+			return I(v, f) ? (b = v[f], delete v[f]) : b = a(), u[f] = b, b;
 		});
-		x.pop(), Array.isArray(l) || (l = [l]);
+		x.pop(), Array.isArray(h) || (h = [h]);
 		let E = document.createComment("");
-		l.push(E), r.after(...l);
+		h.push(E), r.after(...h);
-		let k;
+		let L;
-		for (; (k = E.nextSibling) && k !== n; )
+		for (; (L = E.nextSibling) && L !== n; )
-			k.remove();
+			L.remove();
-		E.remove(), r.isConnected && yt(c.host());
+		E.remove(), r.isConnected && At(c.host());
 	};
-	return Q(t, a), ut(t, a, r, e), a(t()), o;
+	return Q(t, i), ut(t, i, r, e), i(t()), o;
 };
-function yt(t) {
+function At(t) {
 	!t || !t[D] || (requestIdleCallback || setTimeout)(function() {
 		t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
 	});
 }
-var At = {
+var St = {
 	_set(t) {
 		this.value = t;
 	}
 };
 function Ot(t) {
 	return function(e, r) {
-		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At);
+		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), St);
 		return t[r] = o, o;
 	};
 }
@@ -532,8 +535,8 @@ m.observedAttributes = function(t) {
 	return _.attributeChanged(function({ detail: o }) {
 		/*! This maps attributes to signals (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
-		let [c, u] = o, a = this[G][c];
+		let [c, u] = o, i = this[G][c];
-		if (a) return m.action(a, "_set", u);
+		if (i) return m.action(i, "_set", u);
 	})(t), _.disconnected(function() {
 		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
@@ -561,7 +564,7 @@ function ut(t, e, ...r) {
 				* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
 				* You can investigate the `__dde_reactive` key of the element.
 				* */
-				o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
+				o[D].forEach(([[c, u]]) => R(c, u, c[l] && c[l].host && c[l].host() === o))
 			)
 		)(o)), o[D].push([[t, e], ...r]);
 	});
@@ -570,7 +573,7 @@ function it(t, e, r) {
 	let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
 	return ft(n, e, r, t);
 }
-var St = Object.assign(/* @__PURE__ */ Object.create(null), {
+var yt = Object.assign(/* @__PURE__ */ Object.create(null), {
 	stopPropagation() {
 		this.skip = !0;
 	}
@@ -588,7 +591,7 @@ function ft(t, e, r, n = !1) {
 	let { onclear: c } = m.symbols;
 	r[c] && (o.push(r[c]), delete r[c]);
 	let { host: u } = x;
-	return Reflect.defineProperty(t, p, {
+	return Reflect.defineProperty(t, l, {
 		value: {
 			value: e,
 			actions: r,
@@ -601,28 +604,28 @@ function ft(t, e, r, n = !1) {
 		enumerable: !1,
 		writable: !1,
 		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t;
+	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], yt), t;
 }
 function Ct() {
 	return z[z.length - 1];
 }
 function K(t) {
-	if (!t[p]) return;
+	if (!t[l]) return;
-	let { value: e, listeners: r } = t[p], n = Ct();
+	let { value: e, listeners: r } = t[l], n = Ct();
 	return n && r.add(n), g.has(n) && g.get(n).add(t), e;
 }
 function at(t, e, r) {
-	if (!t[p]) return;
+	if (!t[l]) return;
-	let n = t[p];
+	let n = t[l];
 	if (!(!r && n.value === e))
 		return n.value = e, n.listeners.forEach((o) => o(e)), e;
 }
 function Q(t, e) {
-	if (t[p])
+	if (t[l])
-		return t[p].listeners.add(e);
+		return t[l].listeners.add(e);
 }
 function R(t, e, r) {
-	let n = t[p];
+	let n = t[l];
 	if (!n) return;
 	let o = n.listeners.delete(e);
 	if (r && !n.listeners.size) {

dist/dde.js

@@ -1,19 +1,19 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 // src/signals-common.js
-var A = {
+var C = {
 	isSignal(t) {
 		return !1;
 	},
-	processReactiveAttribute(t, e, n, r) {
+	processReactiveAttribute(t, e, r, n) {
-		return n;
+		return r;
 	}
 };
 function Z(t, e = !0) {
-	return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t);
+	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
 }
 function S(t) {
-	return A.isPrototypeOf(t) && t !== A ? t : A;
+	return C.isPrototypeOf(t) && t !== C ? t : C;
 }
 
 // src/helpers.js
@@ -28,10 +28,10 @@ function L(t, e) {
 			t.removeEventListener("abort", e);
 		};
 }
-function W(t, e) {
+function q(t, e) {
-	let { observedAttributes: n = [] } = t.constructor;
+	let { observedAttributes: r = [] } = t.constructor;
-	return n.reduce(function(r, o) {
+	return r.reduce(function(n, o) {
-		return r[G(o)] = e(t, o), r;
+		return n[G(o)] = e(t, o), n;
 	}, {});
 }
 function G(t) {
@@ -39,7 +39,7 @@ function G(t) {
 }
 
 // src/dom-common.js
-var f = {
+var a = {
 	setDeleteAttr: V,
 	ssr: "",
 	D: globalThis.document,
@@ -49,25 +49,25 @@ var f = {
 	M: globalThis.MutationObserver,
 	q: (t) => t || Promise.resolve()
 };
-function V(t, e, n) {
+function V(t, e, r) {
-	if (Reflect.set(t, e, n), !!m(n)) {
+	if (Reflect.set(t, e, r), !!m(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined")
+		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged";
+var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", y = "dde:attributeChanged";
 
 // src/dom.js
 function dt(t) {
-	return f.q(t);
+	return a.q(t);
 }
 var g = [{
 	get scope() {
-		return f.D.body;
+		return a.D.body;
 	},
-	host: (t) => t ? t(f.D.body) : f.D.body,
+	host: (t) => t ? t(a.D.body) : a.D.body,
 	prevent: !0
 }], O = {
 	get current() {
@@ -94,73 +94,73 @@ var g = [{
 			return g.pop();
 	}
 };
-function q(...t) {
+function k(...t) {
 	return this.appendOriginal(...t), this;
 }
 function J(t) {
-	return t.append === q || (t.appendOriginal = t.append, t.append = q), t;
+	return t.append === k || (t.appendOriginal = t.append, t.append = k), t;
 }
 var T;
-function P(t, e, ...n) {
+function P(t, e, ...r) {
-	let r = S(this), o = 0, c, a;
+	let n = S(this), o = 0, c, d;
-	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
+	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
 			o = 1;
-			let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a;
+			let f = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(d)), void 0) : d;
-			O.push({ scope: t, host: d }), c = t(e || void 0);
+			O.push({ scope: t, host: f }), c = t(e || void 0);
-			let p = c instanceof f.F;
+			let p = c instanceof a.F;
 			if (c.nodeName === "#comment") break;
 			let b = P.mark({
 				type: "component",
 				name: t.name,
 				host: p ? "this" : "parentElement"
 			});
-			c.prepend(b), p && (a = b);
+			c.prepend(b), p && (d = b);
 			break;
 		}
 		case t === "#text":
-			c = R.call(this, f.D.createTextNode(""), e);
+			c = R.call(this, a.D.createTextNode(""), e);
 			break;
 		case (t === "<>" || !t):
-			c = R.call(this, f.D.createDocumentFragment(), e);
+			c = R.call(this, a.D.createDocumentFragment(), e);
 			break;
 		case !!T:
-			c = R.call(this, f.D.createElementNS(T, t), e);
+			c = R.call(this, a.D.createElementNS(T, t), e);
 			break;
 		case !c:
-			c = R.call(this, f.D.createElement(t), e);
+			c = R.call(this, a.D.createElement(t), e);
 	}
-	return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c;
+	return J(c), d || (d = c), r.forEach((f) => f(d)), o && O.pop(), o = 2, c;
 }
 P.mark = function(t, e = !1) {
 	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = f.D.createComment(`<dde:mark ${t}${f.ssr}${n}>`);
+	let r = e ? "" : "/", n = a.D.createComment(`<dde:mark ${t}${a.ssr}${r}>`);
-	return e && (r.end = f.D.createComment("</dde:mark>")), r;
+	return e && (n.end = a.D.createComment("</dde:mark>")), n;
 };
 function pt(t) {
 	let e = this;
-	return function(...r) {
+	return function(...n) {
 		T = t;
-		let o = P.call(e, ...r);
+		let o = P.call(e, ...n);
 		return T = void 0, o;
 	};
 }
 function lt(t, e = t) {
-	let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries(
+	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
+		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
 	);
 	if (t.append = new Proxy(t.append, {
-		apply(c, a, d) {
+		apply(c, d, f) {
-			if (d[0] === e) return c.apply(t, d);
+			if (f[0] === e) return c.apply(t, f);
-			for (let p of d) {
+			for (let p of f) {
-				let b = (p.slot || "") + n;
+				let b = (p.slot || "") + r;
 				try {
 					Q(p, "remove", "slot");
 				} catch {
 				}
 				let l = o[b];
 				if (!l) return;
-				l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p);
+				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + b), l.append(p);
 			}
 			return t.append = c, t;
 		}
@@ -170,96 +170,99 @@ function lt(t, e = t) {
 	}
 	return e;
 }
-var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f;
+var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = a;
 function R(t, ...e) {
 	if (!e.length) return t;
 	N.set(t, H(t, this));
-	for (let [n, r] of Object.entries(Object.assign({}, ...e)))
+	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		U.call(this, t, n, r);
+		U.call(this, t, r, n);
 	return N.delete(t), t;
 }
-function U(t, e, n) {
+function U(t, e, r) {
-	let { setRemoveAttr: r, s: o } = H(t, this), c = this;
+	let { setRemoveAttr: n, s: o } = H(t, this), c = this;
-	n = o.processReactiveAttribute(
+	r = o.processReactiveAttribute(
 		t,
 		e,
-		n,
+		r,
-		(d, p) => U.call(c, t, d, p)
+		(f, p) => U.call(c, t, f, p)
 	);
-	let [a] = e;
+	let [d] = e;
-	if (a === "=") return r(e.slice(1), n);
+	if (d === "=") return n(e.slice(1), r);
-	if (a === ".") return F(t, e.slice(1), n);
+	if (d === ".") return F(t, e.slice(1), r);
 	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
+		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
 	switch (e === "className" && (e = "class"), e) {
 		case "xlink:href":
-			return r(e, n, "http://www.w3.org/1999/xlink");
+			return n(e, r, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return $(t, e, n);
+			return $(t, e, r);
 		case "style":
-			if (typeof n != "object") break;
+			if (typeof r != "object") break;
 		/* falls through */
 		case "dataset":
-			return M(o, n, F.bind(null, t[e]));
+			return M(o, e, t, r, F.bind(null, t[e]));
 		case "ariaset":
-			return M(o, n, (d, p) => r("aria-" + d, p));
+			return M(o, e, t, r, (f, p) => n("aria-" + f, p));
 		case "classList":
-			return K.call(c, t, n);
+			return K.call(c, t, r);
 	}
-	return X(t, e) ? $(t, e, n) : r(e, n);
+	return X(t, e) ? $(t, e, r) : n(e, r);
 }
 function H(t, e) {
 	if (N.has(t)) return N.get(t);
-	let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
+	let n = (t instanceof a.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
-	return { setRemoveAttr: r, s: o };
+	return { setRemoveAttr: n, s: o };
 }
 function K(t, e) {
-	let n = S(this);
+	let r = S(this);
 	return M(
-		n,
+		r,
+		"classList",
+		t,
 		e,
-		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
+		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
 	), t;
 }
-function Q(t, e, n, r) {
+function Q(t, e, r, n) {
-	return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
+	return t instanceof a.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
 }
 function X(t, e) {
 	if (!(e in t)) return !1;
-	let n = z(t, e);
+	let r = z(t, e);
-	return !m(n.set);
+	return !m(r.set);
 }
 function z(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
-	let n = Object.getOwnPropertyDescriptor(t, e);
+	let r = Object.getOwnPropertyDescriptor(t, e);
-	return n || z(t, e);
+	return r || z(t, e);
 }
-function M(t, e, n) {
+function M(t, e, r, n, o) {
-	if (!(typeof e != "object" || e === null))
+	let c = String;
-		return Object.entries(e).forEach(function([o, c]) {
+	if (!(typeof n != "object" || n === null))
-			o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
+		return Object.entries(n).forEach(function([f, p]) {
+			f && (f = new c(f), f.target = e, p = t.processReactiveAttribute(r, f, p, o), o(f, p));
 		});
 }
-function Y(t, e, n, r) {
+function Y(t, e, r, n) {
-	return t[(m(r) ? "remove" : "set") + e](n, r);
+	return t[(m(n) ? "remove" : "set") + e](r, n);
 }
-function tt(t, e, n, r, o = null) {
+function tt(t, e, r, n, o = null) {
-	return t[(m(r) ? "remove" : "set") + e + "NS"](o, n, r);
+	return t[(m(n) ? "remove" : "set") + e + "NS"](o, r, n);
 }
-function F(t, e, n) {
+function F(t, e, r) {
-	if (Reflect.set(t, e, n), !!m(n))
+	if (Reflect.set(t, e, r), !!m(r))
 		return Reflect.deleteProperty(t, e);
 }
 
 // src/events-observer.js
-var y = f.M ? et() : new Proxy({}, {
+var _ = a.M ? et() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
 function et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
+	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(u) {
 		for (let i of u)
 			if (i.type === "childList") {
 				if (l(i.addedNodes, !0)) {
@@ -268,15 +271,15 @@ function et() {
 				}
 				E(i.removedNodes, !0) && s();
 			}
-	}, r = new f.M(n(d));
+	}, n = new a.M(r(f));
 	return {
 		observe(s) {
-			let u = new f.M(n(() => {
+			let u = new a.M(r(() => {
 			}));
 			return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
 		},
 		onConnected(s, u) {
-			a();
+			d();
 			let i = c(s);
 			i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
 		},
@@ -286,7 +289,7 @@ function et() {
 			i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
 		},
 		onDisconnected(s, u) {
-			a();
+			d();
 			let i = c(s);
 			i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
 		},
@@ -297,7 +300,7 @@ function et() {
 		}
 	};
 	function o(s, u) {
-		u.length_c || u.length_d || (t.delete(s), d());
+		u.length_c || u.length_d || (t.delete(s), f());
 	}
 	function c(s) {
 		if (t.has(s)) return t.get(s);
@@ -309,11 +312,11 @@ function et() {
 		};
 		return t.set(s, u), u;
 	}
-	function a() {
-		e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 }));
-	}
 	function d() {
-		!e || t.size || (e = !1, r.disconnect());
+		e || (e = !0, n.observe(a.D.body, { childList: !0, subtree: !0 }));
+	}
+	function f() {
+		!e || t.size || (e = !1, n.disconnect());
 	}
 	function p() {
 		return new Promise(function(s) {
@@ -332,8 +335,8 @@ function et() {
 		let i = !1;
 		for (let h of s) {
 			if (u && b(h).then(l), !t.has(h)) continue;
-			let _ = t.get(h);
+			let A = t.get(h);
-			_.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0);
+			A.length_c && (h.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(h), i = !0);
 		}
 		return i;
 	}
@@ -351,80 +354,80 @@ function et() {
 }
 
 // src/customElement.js
-function wt(t, e, n = rt) {
+function wt(t, e, r = rt) {
-	let r = t.host || t;
+	let n = t.host || t;
 	O.push({
-		scope: r,
+		scope: n,
-		host: (...a) => a.length ? a.forEach((d) => d(r)) : r
+		host: (...d) => d.length ? d.forEach((f) => f(n)) : n
-	}), typeof n == "function" && (n = n.call(r, r));
+	}), typeof r == "function" && (r = r.call(n, n));
-	let o = r[x];
+	let o = n[x];
-	o || nt(r);
+	o || nt(n);
-	let c = e.call(r, n);
+	let c = e.call(n, r);
-	return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c);
+	return o || n.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(w, _.observe(t), { once: !0 }), O.pop(), t.append(c);
 }
 function nt(t) {
-	return k(t.prototype, "connectedCallback", function(e, n, r) {
+	return j(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(n, r), n.dispatchEvent(new Event(v));
+		e.apply(r, n), r.dispatchEvent(new Event(v));
-	}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
+	}), j(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
+		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !n.isConnected && n.dispatchEvent(new Event(w))
+			() => !r.isConnected && r.dispatchEvent(new Event(w))
 		);
-	}), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
+	}), j(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = r;
+		let [o, , c] = n;
-		n.dispatchEvent(new CustomEvent(C, {
+		r.dispatchEvent(new CustomEvent(y, {
 			detail: [o, c]
-		})), e.apply(n, r);
+		})), e.apply(r, n);
 	}), t.prototype[x] = !0, t;
 }
-function k(t, e, n) {
+function j(t, e, r) {
 	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: n });
+	}), { apply: r });
 }
 function rt(t) {
-	return W(t, (e, n) => e.getAttribute(n));
+	return q(t, (e, r) => e.getAttribute(r));
 }
 
 // src/events.js
-function Ct(t, e, n) {
+function yt(t, e, r) {
 	return e || (e = {}), function(o, ...c) {
-		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
+		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
+		let d = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(a);
+		return o.dispatchEvent(d);
 	};
 }
-function D(t, e, n) {
+function D(t, e, r) {
 	return function(o) {
-		return o.addEventListener(t, e, n), o;
+		return o.addEventListener(t, e, r), o;
 	};
 }
 var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
 D.connected = function(t, e) {
-	return e = B(e), function(r) {
+	return e = B(e), function(n) {
-		return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r);
+		return n.addEventListener(v, t, e), n[x] ? n : n.isConnected ? (n.dispatchEvent(new Event(v)), n) : (L(e.signal, () => _.offConnected(n, t)) && _.onConnected(n, t), n);
 	};
 };
 D.disconnected = function(t, e) {
-	return e = B(e), function(r) {
+	return e = B(e), function(n) {
-		return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r;
+		return n.addEventListener(w, t, e), n[x] || L(e.signal, () => _.offDisconnected(n, t)) && _.onDisconnected(n, t), n;
 	};
 };
-var j = /* @__PURE__ */ new WeakMap();
+var W = /* @__PURE__ */ new WeakMap();
 D.disconnectedAsAbort = function(t) {
-	if (j.has(t)) return j.get(t);
+	if (W.has(t)) return W.get(t);
 	let e = new AbortController();
-	return j.set(t, e), t(D.disconnected(() => e.abort())), e;
+	return W.set(t, e), t(D.disconnected(() => e.abort())), e;
 };
 var ot = /* @__PURE__ */ new WeakSet();
 D.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(r) {
+	return typeof e != "object" && (e = {}), function(n) {
-		if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r;
+		if (n.addEventListener(y, t, e), n[x] || ot.has(n) || !a.M) return n;
-		let o = new f.M(function(a) {
+		let o = new a.M(function(d) {
-			for (let { attributeName: d, target: p } of a)
+			for (let { attributeName: f, target: p } of d)
 				p.dispatchEvent(
-					new CustomEvent(C, { detail: [d, p.getAttribute(d)] })
+					new CustomEvent(y, { detail: [f, p.getAttribute(f)] })
 				);
 		});
-		return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
+		return L(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
 	};
 };
 
@@ -437,7 +440,7 @@ globalThis.dde= {
 	createElementNS: pt,
 	customElementRender: wt,
 	customElementWithDDE: nt,
-	dispatchEvent: Ct,
+	dispatchEvent: yt,
 	el: P,
 	elNS: pt,
 	elementAttribute: Q,

dist/esm-with-signals.js

@@ -1,5 +1,5 @@
 // src/signals-common.js
-var N = {
+var T = {
 	isSignal(t) {
 		return !1;
 	},
@@ -8,15 +8,15 @@ var N = {
 	}
 };
 function H(t, e = !0) {
-	return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t);
+	return e ? Object.assign(T, t) : (Object.setPrototypeOf(t, T), t);
 }
 function j(t) {
-	return N.isPrototypeOf(t) && t !== N ? t : N;
+	return T.isPrototypeOf(t) && t !== T ? t : T;
 }
 
 // src/helpers.js
 var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function A(t) {
+function S(t) {
 	return typeof t > "u";
 }
 function X(t) {
@@ -53,20 +53,20 @@ var d = {
 	q: (t) => t || Promise.resolve()
 };
 function pt(t, e, r) {
-	if (Reflect.set(t, e, r), !!A(r)) {
+	if (Reflect.set(t, e, r), !!S(r)) {
 		if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
+var O = "__dde_lifecyclesToEvents", w = "dde:connected", y = "dde:disconnected", k = "dde:attributeChanged";
 
 // src/dom.js
 function Mt(t) {
 	return d.q(t);
 }
-var y = [{
+var A = [{
 	get scope() {
 		return d.D.body;
 	},
@@ -74,7 +74,7 @@ var y = [{
 	prevent: !0
 }], x = {
 	get current() {
-		return y[y.length - 1];
+		return A[A.length - 1];
 	},
 	get host() {
 		return this.current.host;
@@ -84,17 +84,17 @@ var y = [{
 		return t.prevent = !0, t;
 	},
 	get state() {
-		return [...y];
+		return [...A];
 	},
 	push(t = {}) {
-		return y.push(Object.assign({}, this.current, { prevent: !1 }, t));
+		return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
 	},
 	pushRoot() {
-		return y.push(y[0]);
+		return A.push(A[0]);
 	},
 	pop() {
-		if (y.length !== 1)
+		if (A.length !== 1)
-			return y.pop();
+			return A.pop();
 	}
 };
 function Y(...t) {
@@ -109,16 +109,16 @@ function M(t, e, ...r) {
 	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
 			o = 1;
-			let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(u)), void 0) : u;
+			let i = (...h) => h.length ? (o === 1 ? r.unshift(...h) : h.forEach((E) => E(u)), void 0) : u;
-			x.push({ scope: t, host: a }), c = t(e || void 0);
+			x.push({ scope: t, host: i }), c = t(e || void 0);
-			let h = c instanceof d.F;
+			let p = c instanceof d.F;
 			if (c.nodeName === "#comment") break;
 			let v = M.mark({
 				type: "component",
 				name: t.name,
-				host: h ? "this" : "parentElement"
+				host: p ? "this" : "parentElement"
 			});
-			c.prepend(v), h && (u = v);
+			c.prepend(v), p && (u = v);
 			break;
 		}
 		case t === "#text":
@@ -133,7 +133,7 @@ function M(t, e, ...r) {
 		case !c:
 			c = q.call(this, d.D.createElement(t), e);
 	}
-	return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c;
+	return lt(c), u || (u = c), r.forEach((i) => i(u)), o && x.pop(), o = 2, c;
 }
 M.mark = function(t, e = !1) {
 	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@@ -153,17 +153,17 @@ function Pt(t, e = t) {
 		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
 	);
 	if (t.append = new Proxy(t.append, {
-		apply(c, u, a) {
+		apply(c, u, i) {
-			if (a[0] === e) return c.apply(t, a);
+			if (i[0] === e) return c.apply(t, i);
-			for (let h of a) {
+			for (let p of i) {
-				let v = (h.slot || "") + r;
+				let v = (p.slot || "") + r;
 				try {
-					bt(h, "remove", "slot");
+					bt(p, "remove", "slot");
 				} catch {
 				}
-				let l = o[v];
+				let h = o[v];
-				if (!l) return;
+				if (!h) return;
-				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h);
+				h.name.startsWith(n) || (h.childNodes.forEach((E) => E.remove()), h.name = n + v), h.append(p);
 			}
 			return t.append = c, t;
 		}
@@ -187,7 +187,7 @@ function nt(t, e, r) {
 		t,
 		e,
 		r,
-		(a, h) => nt.call(c, t, a, h)
+		(i, p) => nt.call(c, t, i, p)
 	);
 	let [u] = e;
 	if (u === "=") return n(e.slice(1), r);
@@ -203,9 +203,9 @@ function nt(t, e, r) {
 			if (typeof r != "object") break;
 		/* falls through */
 		case "dataset":
-			return B(o, r, et.bind(null, t[e]));
+			return B(o, e, t, r, et.bind(null, t[e]));
 		case "ariaset":
-			return B(o, r, (a, h) => n("aria-" + a, h));
+			return B(o, e, t, r, (i, p) => n("aria-" + i, p));
 		case "classList":
 			return ht.call(c, t, r);
 	}
@@ -220,6 +220,8 @@ function ht(t, e) {
 	let r = j(this);
 	return B(
 		r,
+		"classList",
+		t,
 		e,
 		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
 	), t;
@@ -230,27 +232,28 @@ function bt(t, e, r, n) {
 function gt(t, e) {
 	if (!(e in t)) return !1;
 	let r = ot(t, e);
-	return !A(r.set);
+	return !S(r.set);
 }
 function ot(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
 	let r = Object.getOwnPropertyDescriptor(t, e);
 	return r || ot(t, e);
 }
-function B(t, e, r) {
+function B(t, e, r, n, o) {
-	if (!(typeof e != "object" || e === null))
+	let c = String;
-		return Object.entries(e).forEach(function([o, c]) {
+	if (!(typeof n != "object" || n === null))
-			o && (c = t.processReactiveAttribute(e, o, c, r), r(o, c));
+		return Object.entries(n).forEach(function([i, p]) {
+			i && (i = new c(i), i.target = e, p = t.processReactiveAttribute(r, i, p, o), o(i, p));
 		});
 }
 function vt(t, e, r, n) {
-	return t[(A(n) ? "remove" : "set") + e](r, n);
+	return t[(S(n) ? "remove" : "set") + e](r, n);
 }
 function mt(t, e, r, n, o = null) {
-	return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n);
+	return t[(S(n) ? "remove" : "set") + e + "NS"](o, r, n);
 }
 function et(t, e, r) {
-	if (Reflect.set(t, e, r), !!A(r))
+	if (Reflect.set(t, e, r), !!S(r))
 		return Reflect.deleteProperty(t, e);
 }
 
@@ -262,93 +265,93 @@ var C = d.M ? Et() : new Proxy({}, {
 	}
 });
 function Et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) {
+	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(f) {
-		for (let f of s)
+		for (let a of f)
-			if (f.type === "childList") {
+			if (a.type === "childList") {
-				if (l(f.addedNodes, !0)) {
+				if (h(a.addedNodes, !0)) {
-					i();
+					s();
 					continue;
 				}
-				E(f.removedNodes, !0) && i();
+				E(a.removedNodes, !0) && s();
 			}
-	}, n = new d.M(r(a));
+	}, n = new d.M(r(i));
 	return {
-		observe(i) {
+		observe(s) {
-			let s = new d.M(r(() => {
+			let f = new d.M(r(() => {
 			}));
-			return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
+			return f.observe(s, { childList: !0, subtree: !0 }), () => f.disconnect();
 		},
-		onConnected(i, s) {
+		onConnected(s, f) {
 			u();
-			let f = c(i);
+			let a = c(s);
-			f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
+			a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
 		},
-		offConnected(i, s) {
+		offConnected(s, f) {
-			if (!t.has(i)) return;
+			if (!t.has(s)) return;
-			let f = t.get(i);
+			let a = t.get(s);
-			f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f));
+			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(s, a));
 		},
-		onDisconnected(i, s) {
+		onDisconnected(s, f) {
 			u();
-			let f = c(i);
+			let a = c(s);
-			f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
+			a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
 		},
-		offDisconnected(i, s) {
+		offDisconnected(s, f) {
-			if (!t.has(i)) return;
+			if (!t.has(s)) return;
-			let f = t.get(i);
+			let a = t.get(s);
-			f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f));
+			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(s, a));
 		}
 	};
-	function o(i, s) {
+	function o(s, f) {
-		s.length_c || s.length_d || (t.delete(i), a());
+		f.length_c || f.length_d || (t.delete(s), i());
 	}
-	function c(i) {
+	function c(s) {
-		if (t.has(i)) return t.get(i);
+		if (t.has(s)) return t.get(s);
-		let s = {
+		let f = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(i, s), s;
+		return t.set(s, f), f;
 	}
 	function u() {
 		e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
 	}
-	function a() {
+	function i() {
 		!e || t.size || (e = !1, n.disconnect());
 	}
-	function h() {
+	function p() {
-		return new Promise(function(i) {
+		return new Promise(function(s) {
-			(requestIdleCallback || requestAnimationFrame)(i);
+			(requestIdleCallback || requestAnimationFrame)(s);
 		});
 	}
-	async function v(i) {
+	async function v(s) {
-		t.size > 30 && await h();
+		t.size > 30 && await p();
-		let s = [];
+		let f = [];
-		if (!(i instanceof Node)) return s;
+		if (!(s instanceof Node)) return f;
-		for (let f of t.keys())
+		for (let a of t.keys())
-			f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
+			a === s || !(a instanceof Node) || s.contains(a) && f.push(a);
-		return s;
+		return f;
 	}
-	function l(i, s) {
+	function h(s, f) {
-		let f = !1;
+		let a = !1;
-		for (let b of i) {
+		for (let b of s) {
-			if (s && v(b).then(l), !t.has(b)) continue;
+			if (f && v(b).then(h), !t.has(b)) continue;
-			let L = t.get(b);
+			let N = t.get(b);
-			L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
+			N.length_c && (b.dispatchEvent(new Event(w)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), a = !0);
 		}
-		return f;
+		return a;
 	}
-	function E(i, s) {
+	function E(s, f) {
-		let f = !1;
+		let a = !1;
-		for (let b of i)
+		for (let b of s)
-			s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
+			f && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(L(b)), a = !0);
-		return f;
+		return a;
 	}
-	function k(i) {
+	function L(s) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
+			s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s));
 		};
 	}
 }
@@ -358,23 +361,23 @@ function It(t, e, r = _t) {
 	let n = t.host || t;
 	x.push({
 		scope: n,
-		host: (...u) => u.length ? u.forEach((a) => a(n)) : n
+		host: (...u) => u.length ? u.forEach((i) => i(n)) : n
 	}), typeof r == "function" && (r = r.call(n, n));
 	let o = n[O];
 	o || xt(n);
 	let c = e.call(n, r);
-	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c);
+	return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(y, C.observe(t), { once: !0 }), x.pop(), t.append(c);
 }
 function xt(t) {
 	return J(t.prototype, "connectedCallback", function(e, r, n) {
 		e.apply(r, n), r.dispatchEvent(new Event(w));
 	}), J(t.prototype, "disconnectedCallback", function(e, r, n) {
 		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !r.isConnected && r.dispatchEvent(new Event(S))
+			() => !r.isConnected && r.dispatchEvent(new Event(y))
 		);
 	}), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
 		let [o, , c] = n;
-		r.dispatchEvent(new CustomEvent(T, {
+		r.dispatchEvent(new CustomEvent(k, {
 			detail: [o, c]
 		})), e.apply(r, n);
 	}), t.prototype[O] = !0, t;
@@ -408,7 +411,7 @@ _.connected = function(t, e) {
 };
 _.disconnected = function(t, e) {
 	return e = ct(e), function(n) {
-		return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
+		return n.addEventListener(y, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
 	};
 };
 var Z = /* @__PURE__ */ new WeakMap();
@@ -420,11 +423,11 @@ _.disconnectedAsAbort = function(t) {
 var wt = /* @__PURE__ */ new WeakSet();
 _.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(n) {
-		if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n;
+		if (n.addEventListener(k, t, e), n[O] || wt.has(n) || !d.M) return n;
 		let o = new d.M(function(u) {
-			for (let { attributeName: a, target: h } of u)
+			for (let { attributeName: i, target: p } of u)
-				h.dispatchEvent(
+				p.dispatchEvent(
-					new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
+					new CustomEvent(k, { detail: [i, p.getAttribute(i)] })
 				);
 		});
 		return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
@@ -432,10 +435,10 @@ _.attributeChanged = function(t, e) {
 };
 
 // src/signals-lib.js
-var p = "__dde_signal";
+var l = "__dde_signal";
 function U(t) {
 	try {
-		return I(t, p);
+		return I(t, l);
 	} catch {
 		return !1;
 	}
@@ -449,13 +452,13 @@ function m(t, e) {
 		let [o, ...c] = g.get(n);
 		if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
 		let u = g.get(n);
-		for (let a of c)
+		for (let i of c)
-			u.has(a) || R(a, n);
+			u.has(i) || R(i, n);
 	};
-	return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
+	return g.set(r[l], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
 }
 m.action = function(t, e, ...r) {
-	let n = t[p], { actions: o } = n;
+	let n = t[l], { actions: o } = n;
 	if (!o || !(e in o))
 		throw new Error(`'${t}' has no action with name '${e}'!`);
 	if (o[e].apply(n, r), n.skip) return delete n.skip;
@@ -474,8 +477,8 @@ m.symbols = {
 };
 m.clear = function(...t) {
 	for (let r of t) {
-		let n = r[p];
+		let n = r[l];
-		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]);
+		n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[l]);
 	}
 	function e(r, n) {
 		n.listeners.forEach((o) => {
@@ -489,38 +492,38 @@ var D = "__dde_reactive";
 m.el = function(t, e) {
 	let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
 	o.append(r, n);
-	let { current: c } = x, u = {}, a = (h) => {
+	let { current: c } = x, u = {}, i = (p) => {
 		if (!r.parentNode || !n.parentNode)
-			return R(t, a);
+			return R(t, i);
 		let v = u;
 		u = {}, x.push(c);
-		let l = e(h, function(s, f) {
+		let h = e(p, function(f, a) {
 			let b;
-			return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
+			return I(v, f) ? (b = v[f], delete v[f]) : b = a(), u[f] = b, b;
 		});
-		x.pop(), Array.isArray(l) || (l = [l]);
+		x.pop(), Array.isArray(h) || (h = [h]);
 		let E = document.createComment("");
-		l.push(E), r.after(...l);
+		h.push(E), r.after(...h);
-		let k;
+		let L;
-		for (; (k = E.nextSibling) && k !== n; )
+		for (; (L = E.nextSibling) && L !== n; )
-			k.remove();
+			L.remove();
-		E.remove(), r.isConnected && yt(c.host());
+		E.remove(), r.isConnected && At(c.host());
 	};
-	return Q(t, a), ut(t, a, r, e), a(t()), o;
+	return Q(t, i), ut(t, i, r, e), i(t()), o;
 };
-function yt(t) {
+function At(t) {
 	!t || !t[D] || (requestIdleCallback || setTimeout)(function() {
 		t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
 	});
 }
-var At = {
+var St = {
 	_set(t) {
 		this.value = t;
 	}
 };
 function Ot(t) {
 	return function(e, r) {
-		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At);
+		let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), St);
 		return t[r] = o, o;
 	};
 }
@@ -530,8 +533,8 @@ m.observedAttributes = function(t) {
 	return _.attributeChanged(function({ detail: o }) {
 		/*! This maps attributes to signals (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
-		let [c, u] = o, a = this[G][c];
+		let [c, u] = o, i = this[G][c];
-		if (a) return m.action(a, "_set", u);
+		if (i) return m.action(i, "_set", u);
 	})(t), _.disconnected(function() {
 		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
@@ -559,7 +562,7 @@ function ut(t, e, ...r) {
 				* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
 				* You can investigate the `__dde_reactive` key of the element.
 				* */
-				o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
+				o[D].forEach(([[c, u]]) => R(c, u, c[l] && c[l].host && c[l].host() === o))
 			)
 		)(o)), o[D].push([[t, e], ...r]);
 	});
@@ -568,7 +571,7 @@ function it(t, e, r) {
 	let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
 	return ft(n, e, r, t);
 }
-var St = Object.assign(/* @__PURE__ */ Object.create(null), {
+var yt = Object.assign(/* @__PURE__ */ Object.create(null), {
 	stopPropagation() {
 		this.skip = !0;
 	}
@@ -586,7 +589,7 @@ function ft(t, e, r, n = !1) {
 	let { onclear: c } = m.symbols;
 	r[c] && (o.push(r[c]), delete r[c]);
 	let { host: u } = x;
-	return Reflect.defineProperty(t, p, {
+	return Reflect.defineProperty(t, l, {
 		value: {
 			value: e,
 			actions: r,
@@ -599,28 +602,28 @@ function ft(t, e, r, n = !1) {
 		enumerable: !1,
 		writable: !1,
 		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t;
+	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], yt), t;
 }
 function Ct() {
 	return z[z.length - 1];
 }
 function K(t) {
-	if (!t[p]) return;
+	if (!t[l]) return;
-	let { value: e, listeners: r } = t[p], n = Ct();
+	let { value: e, listeners: r } = t[l], n = Ct();
 	return n && r.add(n), g.has(n) && g.get(n).add(t), e;
 }
 function at(t, e, r) {
-	if (!t[p]) return;
+	if (!t[l]) return;
-	let n = t[p];
+	let n = t[l];
 	if (!(!r && n.value === e))
 		return n.value = e, n.listeners.forEach((o) => o(e)), e;
 }
 function Q(t, e) {
-	if (t[p])
+	if (t[l])
-		return t[p].listeners.add(e);
+		return t[l].listeners.add(e);
 }
 function R(t, e, r) {
-	let n = t[p];
+	let n = t[l];
 	if (!n) return;
 	let o = n.listeners.delete(e);
 	if (r && !n.listeners.size) {

dist/esm.js

@@ -1,17 +1,17 @@
 // src/signals-common.js
-var A = {
+var C = {
 	isSignal(t) {
 		return !1;
 	},
-	processReactiveAttribute(t, e, n, r) {
+	processReactiveAttribute(t, e, r, n) {
-		return n;
+		return r;
 	}
 };
 function Z(t, e = !0) {
-	return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t);
+	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
 }
 function S(t) {
-	return A.isPrototypeOf(t) && t !== A ? t : A;
+	return C.isPrototypeOf(t) && t !== C ? t : C;
 }
 
 // src/helpers.js
@@ -26,10 +26,10 @@ function L(t, e) {
 			t.removeEventListener("abort", e);
 		};
 }
-function W(t, e) {
+function q(t, e) {
-	let { observedAttributes: n = [] } = t.constructor;
+	let { observedAttributes: r = [] } = t.constructor;
-	return n.reduce(function(r, o) {
+	return r.reduce(function(n, o) {
-		return r[G(o)] = e(t, o), r;
+		return n[G(o)] = e(t, o), n;
 	}, {});
 }
 function G(t) {
@@ -37,7 +37,7 @@ function G(t) {
 }
 
 // src/dom-common.js
-var f = {
+var a = {
 	setDeleteAttr: V,
 	ssr: "",
 	D: globalThis.document,
@@ -47,25 +47,25 @@ var f = {
 	M: globalThis.MutationObserver,
 	q: (t) => t || Promise.resolve()
 };
-function V(t, e, n) {
+function V(t, e, r) {
-	if (Reflect.set(t, e, n), !!m(n)) {
+	if (Reflect.set(t, e, r), !!m(r)) {
-		if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined")
+		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged";
+var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", y = "dde:attributeChanged";
 
 // src/dom.js
 function dt(t) {
-	return f.q(t);
+	return a.q(t);
 }
 var g = [{
 	get scope() {
-		return f.D.body;
+		return a.D.body;
 	},
-	host: (t) => t ? t(f.D.body) : f.D.body,
+	host: (t) => t ? t(a.D.body) : a.D.body,
 	prevent: !0
 }], O = {
 	get current() {
@@ -92,73 +92,73 @@ var g = [{
 			return g.pop();
 	}
 };
-function q(...t) {
+function k(...t) {
 	return this.appendOriginal(...t), this;
 }
 function J(t) {
-	return t.append === q || (t.appendOriginal = t.append, t.append = q), t;
+	return t.append === k || (t.appendOriginal = t.append, t.append = k), t;
 }
 var T;
-function P(t, e, ...n) {
+function P(t, e, ...r) {
-	let r = S(this), o = 0, c, a;
+	let n = S(this), o = 0, c, d;
-	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
+	switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
 			o = 1;
-			let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a;
+			let f = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(d)), void 0) : d;
-			O.push({ scope: t, host: d }), c = t(e || void 0);
+			O.push({ scope: t, host: f }), c = t(e || void 0);
-			let p = c instanceof f.F;
+			let p = c instanceof a.F;
 			if (c.nodeName === "#comment") break;
 			let b = P.mark({
 				type: "component",
 				name: t.name,
 				host: p ? "this" : "parentElement"
 			});
-			c.prepend(b), p && (a = b);
+			c.prepend(b), p && (d = b);
 			break;
 		}
 		case t === "#text":
-			c = R.call(this, f.D.createTextNode(""), e);
+			c = R.call(this, a.D.createTextNode(""), e);
 			break;
 		case (t === "<>" || !t):
-			c = R.call(this, f.D.createDocumentFragment(), e);
+			c = R.call(this, a.D.createDocumentFragment(), e);
 			break;
 		case !!T:
-			c = R.call(this, f.D.createElementNS(T, t), e);
+			c = R.call(this, a.D.createElementNS(T, t), e);
 			break;
 		case !c:
-			c = R.call(this, f.D.createElement(t), e);
+			c = R.call(this, a.D.createElement(t), e);
 	}
-	return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c;
+	return J(c), d || (d = c), r.forEach((f) => f(d)), o && O.pop(), o = 2, c;
 }
 P.mark = function(t, e = !1) {
 	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = f.D.createComment(`<dde:mark ${t}${f.ssr}${n}>`);
+	let r = e ? "" : "/", n = a.D.createComment(`<dde:mark ${t}${a.ssr}${r}>`);
-	return e && (r.end = f.D.createComment("</dde:mark>")), r;
+	return e && (n.end = a.D.createComment("</dde:mark>")), n;
 };
 function pt(t) {
 	let e = this;
-	return function(...r) {
+	return function(...n) {
 		T = t;
-		let o = P.call(e, ...r);
+		let o = P.call(e, ...n);
 		return T = void 0, o;
 	};
 }
 function lt(t, e = t) {
-	let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries(
+	let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
-		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
+		Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
 	);
 	if (t.append = new Proxy(t.append, {
-		apply(c, a, d) {
+		apply(c, d, f) {
-			if (d[0] === e) return c.apply(t, d);
+			if (f[0] === e) return c.apply(t, f);
-			for (let p of d) {
+			for (let p of f) {
-				let b = (p.slot || "") + n;
+				let b = (p.slot || "") + r;
 				try {
 					Q(p, "remove", "slot");
 				} catch {
 				}
 				let l = o[b];
 				if (!l) return;
-				l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p);
+				l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + b), l.append(p);
 			}
 			return t.append = c, t;
 		}
@@ -168,96 +168,99 @@ function lt(t, e = t) {
 	}
 	return e;
 }
-var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f;
+var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = a;
 function R(t, ...e) {
 	if (!e.length) return t;
 	N.set(t, H(t, this));
-	for (let [n, r] of Object.entries(Object.assign({}, ...e)))
+	for (let [r, n] of Object.entries(Object.assign({}, ...e)))
-		U.call(this, t, n, r);
+		U.call(this, t, r, n);
 	return N.delete(t), t;
 }
-function U(t, e, n) {
+function U(t, e, r) {
-	let { setRemoveAttr: r, s: o } = H(t, this), c = this;
+	let { setRemoveAttr: n, s: o } = H(t, this), c = this;
-	n = o.processReactiveAttribute(
+	r = o.processReactiveAttribute(
 		t,
 		e,
-		n,
+		r,
-		(d, p) => U.call(c, t, d, p)
+		(f, p) => U.call(c, t, f, p)
 	);
-	let [a] = e;
+	let [d] = e;
-	if (a === "=") return r(e.slice(1), n);
+	if (d === "=") return n(e.slice(1), r);
-	if (a === ".") return F(t, e.slice(1), n);
+	if (d === ".") return F(t, e.slice(1), r);
 	if (/(aria|data)([A-Z])/.test(e))
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
+		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r);
 	switch (e === "className" && (e = "class"), e) {
 		case "xlink:href":
-			return r(e, n, "http://www.w3.org/1999/xlink");
+			return n(e, r, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return $(t, e, n);
+			return $(t, e, r);
 		case "style":
-			if (typeof n != "object") break;
+			if (typeof r != "object") break;
 		/* falls through */
 		case "dataset":
-			return M(o, n, F.bind(null, t[e]));
+			return M(o, e, t, r, F.bind(null, t[e]));
 		case "ariaset":
-			return M(o, n, (d, p) => r("aria-" + d, p));
+			return M(o, e, t, r, (f, p) => n("aria-" + f, p));
 		case "classList":
-			return K.call(c, t, n);
+			return K.call(c, t, r);
 	}
-	return X(t, e) ? $(t, e, n) : r(e, n);
+	return X(t, e) ? $(t, e, r) : n(e, r);
 }
 function H(t, e) {
 	if (N.has(t)) return N.get(t);
-	let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
+	let n = (t instanceof a.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
-	return { setRemoveAttr: r, s: o };
+	return { setRemoveAttr: n, s: o };
 }
 function K(t, e) {
-	let n = S(this);
+	let r = S(this);
 	return M(
-		n,
+		r,
+		"classList",
+		t,
 		e,
-		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
+		(n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
 	), t;
 }
-function Q(t, e, n, r) {
+function Q(t, e, r, n) {
-	return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
+	return t instanceof a.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
 }
 function X(t, e) {
 	if (!(e in t)) return !1;
-	let n = z(t, e);
+	let r = z(t, e);
-	return !m(n.set);
+	return !m(r.set);
 }
 function z(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
-	let n = Object.getOwnPropertyDescriptor(t, e);
+	let r = Object.getOwnPropertyDescriptor(t, e);
-	return n || z(t, e);
+	return r || z(t, e);
 }
-function M(t, e, n) {
+function M(t, e, r, n, o) {
-	if (!(typeof e != "object" || e === null))
+	let c = String;
-		return Object.entries(e).forEach(function([o, c]) {
+	if (!(typeof n != "object" || n === null))
-			o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
+		return Object.entries(n).forEach(function([f, p]) {
+			f && (f = new c(f), f.target = e, p = t.processReactiveAttribute(r, f, p, o), o(f, p));
 		});
 }
-function Y(t, e, n, r) {
+function Y(t, e, r, n) {
-	return t[(m(r) ? "remove" : "set") + e](n, r);
+	return t[(m(n) ? "remove" : "set") + e](r, n);
 }
-function tt(t, e, n, r, o = null) {
+function tt(t, e, r, n, o = null) {
-	return t[(m(r) ? "remove" : "set") + e + "NS"](o, n, r);
+	return t[(m(n) ? "remove" : "set") + e + "NS"](o, r, n);
 }
-function F(t, e, n) {
+function F(t, e, r) {
-	if (Reflect.set(t, e, n), !!m(n))
+	if (Reflect.set(t, e, r), !!m(r))
 		return Reflect.deleteProperty(t, e);
 }
 
 // src/events-observer.js
-var y = f.M ? et() : new Proxy({}, {
+var _ = a.M ? et() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
 function et() {
-	let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
+	let t = /* @__PURE__ */ new Map(), e = !1, r = (s) => function(u) {
 		for (let i of u)
 			if (i.type === "childList") {
 				if (l(i.addedNodes, !0)) {
@@ -266,15 +269,15 @@ function et() {
 				}
 				E(i.removedNodes, !0) && s();
 			}
-	}, r = new f.M(n(d));
+	}, n = new a.M(r(f));
 	return {
 		observe(s) {
-			let u = new f.M(n(() => {
+			let u = new a.M(r(() => {
 			}));
 			return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
 		},
 		onConnected(s, u) {
-			a();
+			d();
 			let i = c(s);
 			i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
 		},
@@ -284,7 +287,7 @@ function et() {
 			i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
 		},
 		onDisconnected(s, u) {
-			a();
+			d();
 			let i = c(s);
 			i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
 		},
@@ -295,7 +298,7 @@ function et() {
 		}
 	};
 	function o(s, u) {
-		u.length_c || u.length_d || (t.delete(s), d());
+		u.length_c || u.length_d || (t.delete(s), f());
 	}
 	function c(s) {
 		if (t.has(s)) return t.get(s);
@@ -307,11 +310,11 @@ function et() {
 		};
 		return t.set(s, u), u;
 	}
-	function a() {
-		e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 }));
-	}
 	function d() {
-		!e || t.size || (e = !1, r.disconnect());
+		e || (e = !0, n.observe(a.D.body, { childList: !0, subtree: !0 }));
+	}
+	function f() {
+		!e || t.size || (e = !1, n.disconnect());
 	}
 	function p() {
 		return new Promise(function(s) {
@@ -330,8 +333,8 @@ function et() {
 		let i = !1;
 		for (let h of s) {
 			if (u && b(h).then(l), !t.has(h)) continue;
-			let _ = t.get(h);
+			let A = t.get(h);
-			_.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0);
+			A.length_c && (h.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(h), i = !0);
 		}
 		return i;
 	}
@@ -349,80 +352,80 @@ function et() {
 }
 
 // src/customElement.js
-function wt(t, e, n = rt) {
+function wt(t, e, r = rt) {
-	let r = t.host || t;
+	let n = t.host || t;
 	O.push({
-		scope: r,
+		scope: n,
-		host: (...a) => a.length ? a.forEach((d) => d(r)) : r
+		host: (...d) => d.length ? d.forEach((f) => f(n)) : n
-	}), typeof n == "function" && (n = n.call(r, r));
+	}), typeof r == "function" && (r = r.call(n, n));
-	let o = r[x];
+	let o = n[x];
-	o || nt(r);
+	o || nt(n);
-	let c = e.call(r, n);
+	let c = e.call(n, r);
-	return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c);
+	return o || n.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(w, _.observe(t), { once: !0 }), O.pop(), t.append(c);
 }
 function nt(t) {
-	return k(t.prototype, "connectedCallback", function(e, n, r) {
+	return j(t.prototype, "connectedCallback", function(e, r, n) {
-		e.apply(n, r), n.dispatchEvent(new Event(v));
+		e.apply(r, n), r.dispatchEvent(new Event(v));
-	}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
+	}), j(t.prototype, "disconnectedCallback", function(e, r, n) {
-		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
+		e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
-			() => !n.isConnected && n.dispatchEvent(new Event(w))
+			() => !r.isConnected && r.dispatchEvent(new Event(w))
 		);
-	}), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
+	}), j(t.prototype, "attributeChangedCallback", function(e, r, n) {
-		let [o, , c] = r;
+		let [o, , c] = n;
-		n.dispatchEvent(new CustomEvent(C, {
+		r.dispatchEvent(new CustomEvent(y, {
 			detail: [o, c]
-		})), e.apply(n, r);
+		})), e.apply(r, n);
 	}), t.prototype[x] = !0, t;
 }
-function k(t, e, n) {
+function j(t, e, r) {
 	t[e] = new Proxy(t[e] || (() => {
-	}), { apply: n });
+	}), { apply: r });
 }
 function rt(t) {
-	return W(t, (e, n) => e.getAttribute(n));
+	return q(t, (e, r) => e.getAttribute(r));
 }
 
 // src/events.js
-function Ct(t, e, n) {
+function yt(t, e, r) {
 	return e || (e = {}), function(o, ...c) {
-		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
+		r && (c.unshift(o), o = typeof r == "function" ? r() : r);
-		let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
+		let d = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
-		return o.dispatchEvent(a);
+		return o.dispatchEvent(d);
 	};
 }
-function D(t, e, n) {
+function D(t, e, r) {
 	return function(o) {
-		return o.addEventListener(t, e, n), o;
+		return o.addEventListener(t, e, r), o;
 	};
 }
 var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
 D.connected = function(t, e) {
-	return e = B(e), function(r) {
+	return e = B(e), function(n) {
-		return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r);
+		return n.addEventListener(v, t, e), n[x] ? n : n.isConnected ? (n.dispatchEvent(new Event(v)), n) : (L(e.signal, () => _.offConnected(n, t)) && _.onConnected(n, t), n);
 	};
 };
 D.disconnected = function(t, e) {
-	return e = B(e), function(r) {
+	return e = B(e), function(n) {
-		return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r;
+		return n.addEventListener(w, t, e), n[x] || L(e.signal, () => _.offDisconnected(n, t)) && _.onDisconnected(n, t), n;
 	};
 };
-var j = /* @__PURE__ */ new WeakMap();
+var W = /* @__PURE__ */ new WeakMap();
 D.disconnectedAsAbort = function(t) {
-	if (j.has(t)) return j.get(t);
+	if (W.has(t)) return W.get(t);
 	let e = new AbortController();
-	return j.set(t, e), t(D.disconnected(() => e.abort())), e;
+	return W.set(t, e), t(D.disconnected(() => e.abort())), e;
 };
 var ot = /* @__PURE__ */ new WeakSet();
 D.attributeChanged = function(t, e) {
-	return typeof e != "object" && (e = {}), function(r) {
+	return typeof e != "object" && (e = {}), function(n) {
-		if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r;
+		if (n.addEventListener(y, t, e), n[x] || ot.has(n) || !a.M) return n;
-		let o = new f.M(function(a) {
+		let o = new a.M(function(d) {
-			for (let { attributeName: d, target: p } of a)
+			for (let { attributeName: f, target: p } of d)
 				p.dispatchEvent(
-					new CustomEvent(C, { detail: [d, p.getAttribute(d)] })
+					new CustomEvent(y, { detail: [f, p.getAttribute(f)] })
 				);
 		});
-		return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
+		return L(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
 	};
 };
 export {
@@ -434,7 +437,7 @@ export {
 	pt as createElementNS,
 	wt as customElementRender,
 	nt as customElementWithDDE,
-	Ct as dispatchEvent,
+	yt as dispatchEvent,
 	P as el,
 	pt as elNS,
 	Q as elementAttribute,

examples/components/fullNameComponent.js

@@ -15,10 +15,14 @@ export function fullNameComponent(){
 		on.disconnected(()=> console.log(fullNameComponent))
 	);
 
+	const count= S(0);
+	setInterval(()=> count(count()+1), 5000);
 	const style= { height: "80px", display: "block", fill: "currentColor" };
 	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
+		el("p", { textContent: S(()=> "Count: "+count()),
+			dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
 		el("form", { onsubmit: ev=> ev.preventDefault() }).append(
 			...name.map((v, i)=>
 				el("label", labels[i]).append(

src/dom.js

@@ -162,9 +162,9 @@ export function assignAttribute(element, key, value){
 			if(typeof value!=="object") break;
 			/* falls through */
 		case "dataset":
-			return forEachEntries(s, value, setDelete.bind(null, element[key]));
+			return forEachEntries(s, key, element, value, setDelete.bind(null, element[key]));
 		case "ariaset":
-			return forEachEntries(s, value, (key, val)=> setRemoveAttr("aria-"+key, val));
+			return forEachEntries(s, key, element, value, (key, val)=> setRemoveAttr("aria-"+key, val));
 		case "classList":
 			return classListDeclarative.call(_this, element, value);
 	}
@@ -179,9 +179,9 @@ function assignContext(element, _this){
 }
 export function classListDeclarative(element, toggle){
 	const s= signals(this);
-	forEachEntries(s, toggle,
+	forEachEntries(s, "classList", element, toggle,
 		(class_name, val)=>
-			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));
+			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)) );
 	return element;
 }
 export function elementAttribute(element, op, key, value){
@@ -205,13 +205,21 @@ function getPropDescriptor(p, key){
 }
 
 /**
- * @template {Record<any, any>} T @param {object} s @param {T} obj @param {(param: [ keyof T, T[keyof T] ])=> void} cb
+ * @template {Record<any, any>} T
+ * @param {object} s
+ * @param {string} target
+ * @param {Element} element
+ * @param {T} obj
+ * @param {(param: [ keyof T, T[keyof T] ])=> void} cb
  * */
-function forEachEntries(s, obj, cb){
+function forEachEntries(s, target, element, obj, cb){
+	const S = String;
 	if(typeof obj !== "object" || obj===null) return;
 	return Object.entries(obj).forEach(function process([ key, val ]){
 		if(!key) return;
-		val= s.processReactiveAttribute(obj, key, val, cb);
+		key = new S(key);
+		key.target = target;
+		val= s.processReactiveAttribute(element, key, val, cb);
 		cb(key, val);
 	});
 }