elements-kit 0.0.3 → 0.0.6

package/dist/attributes.d.mts

@@ -58,7 +58,11 @@ type Attributes<T> = Record<string, AttrChangeHandler<T>>;
  * @param cls The custom element class constructor
  * @returns Array of unique attribute names to observe
  */
-declare function observedAttributes(cls: any): string[];
+declare function observedAttributes(cls: {
+  [ATTRIBUTES]?: Record<string, unknown>;
+  observedAttributes?: string[];
+  prototype: unknown;
+}): string[];
 /**
  * A class decorator that automatically wires up `observedAttributes` and `attributeChangedCallback`
  * from a static `[ATTRIBUTES]` map.

package/dist/builder/dom.d.mts

@@ -1,4 +1,4 @@
-import { c as ReactiveElementOf } from "../index-DJejH8Ff.mjs";
+import { c as ReactiveElementOf } from "../index-Ukqj0EcT.mjs";
 
 //#region src/builder/dom.d.ts
 interface Lifecycle {

package/dist/builder/index.d.mts

@@ -1,2 +1,2 @@
-import { a as EFFECT, c as ReactiveElementOf, d as builder, f as toNode, i as DISPOSE, l as VALUE, n as Chain, o as ElementBuilder, r as DISPOSABLES, s as ReactiveElement, t as Builder, u as ValueOrReactive } from "../index-DJejH8Ff.mjs";
+import { a as EFFECT, c as ReactiveElementOf, d as builder, f as toNode, i as DISPOSE, l as VALUE, n as Chain, o as ElementBuilder, r as DISPOSABLES, s as ReactiveElement, t as Builder, u as ValueOrReactive } from "../index-Ukqj0EcT.mjs";
 export { Builder, Chain, DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, ReactiveElement, ReactiveElementOf, VALUE, ValueOrReactive, builder, toNode };

package/dist/builder/index.mjs

@@ -1,6 +1,7 @@
-import { a as effect, t as isReactive } from "../signals-Cr7xgAJH.mjs";
+import { a as effect, t as isReactive } from "../signals-CLAPw8kk.mjs";
+import "../polyfill-B1lNNcum.mjs";
 import { Slot } from "../slot.mjs";
-import { t as resolveNode } from "../lib-B2drrxlV.mjs";
+import { t as resolveNode } from "../lib-DNd01_aS.mjs";
 //#region src/builder/index.ts
 const DISPOSABLES = Symbol("disposables");
 const DISPOSE = Symbol.dispose;
@@ -76,13 +77,14 @@ var ChainContext = class {
 		this.key = key;
 	}
 	setter(value) {
+		const chain = this.chain;
 		if (isReactive(value)) {
 			this.builder[DISPOSABLES].add(effect(() => {
-				this.chain[this.key] = value();
+				chain[this.key] = value();
 			}));
 			return this.builder;
 		}
-		this.chain[this.key] = value;
+		chain[this.key] = value;
 		return this.builder;
 	}
 };
@@ -91,7 +93,7 @@ function setterOrValue(builder, chainParent, key) {
 	const context = new ChainContext(builder, chainParent, key);
 	return new Proxy(context.setter.bind(context), {
 		apply(target, _thisArg, argArray) {
-			return target.apply(builder, argArray);
+			return target(argArray[0]);
 		},
 		get(_, subkey) {
 			if (isObject(chain)) return setterOrValue(builder, chain, subkey);

package/dist/{element-CCHXkEsj.mjs → element-01J9cXGm.mjs}

@@ -1,6 +1,7 @@
-import { a as effect, t as isReactive } from "./signals-Cr7xgAJH.mjs";
+import { a as effect, d as onCleanup, m as untracked, o as effectScope, t as isReactive } from "./signals-CLAPw8kk.mjs";
+import "./polyfill-B1lNNcum.mjs";
 import { $slots, Slot, Slots } from "./slot.mjs";
-import { t as resolveNode } from "./lib-B2drrxlV.mjs";
+import { t as resolveNode$1 } from "./lib-DNd01_aS.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -53,35 +54,54 @@ function isChildrenProperty(node, key) {
 function applyChildren(node, key, value) {
 	if (hasSlots(node)) {
 		const slotName = key.replace(/^slot:/, "");
-		if (Slots.has(node[$slots], slotName)) return applySlot(node[$slots][slotName], value);
+		if (Slots.has(node[$slots], slotName)) {
+			applySlot(node[$slots][slotName], value);
+			return;
+		}
+	}
+	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) {
+		mountChildren(node, value);
+		return;
 	}
-	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return mountChildren(node, value);
 	if (key in node) {
 		const slot = node[key];
 		if (!(slot instanceof Slot)) return;
-		return applySlot(slot, value);
+		applySlot(slot, value);
 	}
 }
-/**
-* Sets a Slot's content from a Child value.
-*/
 function applySlot(slot, value) {
-	if (typeof value === "function") return effect(() => slot.set(resolveChild(value())));
-	slot.set(resolveChild(value));
+	effectScope(() => {
+		let dispose;
+		if (typeof value === "function") effect(() => slot.set(resolveChild(value())));
+		else {
+			const node = resolveChild(value);
+			dispose = node[Symbol.dispose];
+			slot.set(node);
+		}
+		onCleanup(() => {
+			dispose?.();
+			slot.clear();
+		});
+	});
 }
 function mountChildren(el, value) {
-	const children = ensureFlatArray(value);
-	const disposers = [];
-	for (const child of children) {
+	for (const child of ensureFlatArray(value)) {
 		if (typeof child === "function") {
 			const slot = Slot.new();
 			el.appendChild(slot());
-			disposers.push(effect(() => slot.set(resolveChild(child()))));
+			effectScope(() => {
+				effect(() => slot.set(resolveChild(child())));
+				onCleanup(() => slot.clear());
+			});
 			continue;
 		}
-		el.appendChild(resolveChild(child));
+		const node = resolveChild(child);
+		const dispose = node[Symbol.dispose];
+		el.appendChild(node);
+		if (dispose) effectScope(() => {
+			onCleanup(dispose);
+		});
 	}
-	return disposers.length > 0 ? () => disposers.forEach((d) => d()) : void 0;
 }
 function resolveChild(value) {
 	if (Array.isArray(value)) {
@@ -90,7 +110,7 @@ function resolveChild(value) {
 		return fragment;
 	}
 	if (typeof value === "function") return resolveChild(value());
-	return resolveNode(value);
+	return resolveNode$1(value);
 }
 /** Normalises the children prop into a flat array. */
 function ensureFlatArray(raw) {
@@ -99,36 +119,27 @@ function ensureFlatArray(raw) {
 //#endregion
 //#region src/jsx-runtime/properties.ts
 function applyProps(node, props) {
-	const disposables = /* @__PURE__ */ new Set();
 	for (const [key, value] of Object.entries(props)) {
 		if (isChildrenProperty(node, key)) {
-			const disposable = applyChildren(node, key, value);
-			if (disposable) disposables.add(disposable);
+			applyChildren(node, key, value);
 			continue;
 		}
 		if (isReactive(value)) {
 			if (isEventKey(key)) {
-				let cleanup;
-				const dispose = effect(() => {
-					if (cleanup) cleanup();
-					cleanup = setEvent(node, key, value());
-				});
-				disposables.add(() => {
-					dispose();
-					if (cleanup) cleanup();
+				effect(() => {
+					onCleanup(setEvent(node, key, value()));
 				});
 				continue;
 			}
-			disposables.add(effect(() => setProp(node, key, value())));
+			effect(() => setProp(node, key, value()));
 			continue;
 		}
 		if (isEventKey(key)) {
-			disposables.add(setEvent(node, key, value));
+			onCleanup(setEvent(node, key, value));
 			continue;
 		}
 		setProp(node, key, value);
 	}
-	return disposables;
 }
 function setProp(node, key, value) {
 	const colonIdx = key.indexOf(":");
@@ -210,36 +221,57 @@ function setEvent(el, key, handler) {
 const $ref = Symbol("ref");
 //#endregion
 //#region src/jsx-runtime/element.ts
-function createElement(type, { [$ref]: ref, ...props } = {}) {
-	if (typeof type === "function" && !type.prototype?.render) {
-		const el = type(props);
-		if (typeof ref === "function" && el instanceof Element) ref(el);
-		return el;
-	}
-	const node = resolveElement(type);
-	if (!node) return null;
-	const disposables = applyProps(node, props);
-	if (disposables.size > 0) attachDisposables(node, disposables);
-	const el = _render(node);
-	if (typeof ref === "function" && el instanceof Element) ref(el);
-	return el;
+function createElement(type, rawProps = {}) {
+	const ref = rawProps[$ref];
+	const props = Object.fromEntries(Object.entries(rawProps));
+	if (typeof type === "function" && !type.prototype?.render) return createFunctionElement(type, props, ref);
+	return createNodeElement(type, props, ref);
 }
-function _render(node) {
-	if (node instanceof Element || node instanceof DocumentFragment) return node;
-	if (!node || typeof node.render !== "function") return null;
-	return _render(node.render());
+/** Runs all cleanup functions registered by JSX props/effects on `el`. */
+function disposeElement(el) {
+	el[Symbol.dispose]?.();
+}
+function createFunctionElement(type, props, ref) {
+	let el;
+	let dispose;
+	untracked(() => {
+		dispose = effectScope(() => {
+			el = type(props);
+			if (typeof ref === "function" && el instanceof Element) ref(el);
+		});
+	});
+	const result = el;
+	if (result instanceof Element || result instanceof DocumentFragment) attachDisposables(result, new Set([dispose]));
+	else dispose();
+	return result;
+}
+function createNodeElement(type, props, ref) {
+	const node = resolveNode(type);
+	if (!node) return null;
+	let el;
+	let dispose;
+	untracked(() => {
+		dispose = effectScope(() => {
+			applyProps(node, props);
+			el = renderNode(node);
+			if (typeof ref === "function" && el instanceof Element) ref(el);
+		});
+	});
+	const result = el;
+	if (result instanceof Element || result instanceof DocumentFragment) attachDisposables(result, new Set([dispose]));
+	else dispose();
+	return result;
 }
-/**
-* Resolves the `type` argument of createElement into a concrete DOM node:
-*   - string          → document.createElement(type)
-*   - Element         → the element itself  (apply props to an existing node)
-*   - class component → new type()
-*/
-function resolveElement(type) {
+function resolveNode(type) {
 	if (typeof type === "string") return document.createElement(type);
 	if (type instanceof Element || type instanceof DocumentFragment) return type;
 	return new type();
 }
+function renderNode(node) {
+	if (node instanceof Element || node instanceof DocumentFragment) return node;
+	if (!node || typeof node.render !== "function") return null;
+	return renderNode(node.render());
+}
 function hasOwnDisposable(el) {
 	return Object.hasOwn(el, Symbol.dispose);
 }
@@ -254,9 +286,5 @@ function attachDisposables(el, disposables) {
 		configurable: true
 	});
 }
-/** Runs all cleanup functions registered by JSX props/effects on `el`. */
-function disposeElement(el) {
-	el[Symbol.dispose]?.();
-}
 //#endregion
 export { disposeElement as n, createElement as t };

package/dist/{index-C6xwOPCO.d.mts → index-BGKVkZ6y.d.mts}

@@ -1,4 +1,4 @@
-import { u as ValueOrReactive } from "./index-DJejH8Ff.mjs";
+import { u as ValueOrReactive } from "./index-Ukqj0EcT.mjs";
 
 //#region src/signals/lib.d.ts
 /**
@@ -42,14 +42,8 @@ declare function isEffectScope(fn: () => void): boolean;
  * count();        // → 1
  * ```
  */
-declare function signal<T>(): {
-  (): T | undefined;
-  (value: T | undefined): void;
-};
-declare function signal<T>(initialValue: T): {
-  (): T;
-  (value: T): void;
-};
+declare function signal<T>(): Updater<T> & Computed<T>;
+declare function signal<T>(initialValue: T): Updater<T> & Computed<T>;
 /**
  * Creates a lazily-evaluated computed value.
  *
@@ -201,11 +195,11 @@ declare function batch(fn: () => void): void;
  * const logCount = effect(() => {
  *   console.log('triggered by a:', a());
  *   // read b without subscribing – effect won't re-run when b changes
- *   console.log('current b:', untracked(() => b()));
+ *   console.log('current b:', untracked(b));
  * });
  * ```
  */
-declare function untracked<T>(fn: () => T): T;
+declare function untracked<T>(fn: Computed<T>): T;
 /**
  * Manually triggers all subscribers of every signal read inside `fn`.
  *
@@ -220,10 +214,10 @@ declare function untracked<T>(fn: () => T): T;
  *
  * // Mutate in place (referential equality won't detect the change):
  * items().push(4);
- * trigger(() => items()); // manually notify subscribers
+ * trigger(items); // manually notify subscribers
  * ```
  */
-declare function trigger(fn: () => void): void;
+declare function trigger<T = void>(fn: Computed<T>): void;
 //#endregion
 //#region src/signals/index.d.ts
 declare function isReactive<T>(value: ValueOrReactive<T>): value is () => T;

package/dist/{index-DJejH8Ff.d.mts → index-Ukqj0EcT.d.mts}

@@ -1,4 +1,4 @@
-import { t as PrimitiveNodeType } from "./polyfill-BEL-HWkO.mjs";
+import { t as PrimitiveNodeType } from "./polyfill-BW_B2r6i.mjs";
 
 //#region src/builder/index.d.ts
 declare const DISPOSABLES: unique symbol;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { n as disposeElement } from "./element-CCHXkEsj.mjs";
-import { a as effect, f as signal, m as untracked } from "./signals-Cr7xgAJH.mjs";
+import { n as disposeElement } from "./element-01J9cXGm.mjs";
+import { a as effect, d as onCleanup, f as signal, m as untracked, p as trigger } from "./signals-CLAPw8kk.mjs";
 //#region src/components/for.ts
 /**
 * Keyed list renderer. Reconciles a reactive array into the DOM using a key
@@ -30,6 +30,10 @@ var For = class {
 		return this.#each();
 	}
 	set each(v) {
+		if (v === untracked(this.#each)) {
+			trigger(this.#each);
+			return;
+		}
 		this.#each(v);
 	}
 	by = (_, i) => i;
@@ -44,6 +48,11 @@ var For = class {
 		fragment.appendChild(this.#start);
 		fragment.appendChild(this.#end);
 		effect(() => this.#reconcile());
+		onCleanup(() => {
+			for (const entry of this.#cache.values()) cleanEntry(entry);
+			this.#cache.clear();
+			this.#order = [];
+		});
 		return fragment;
 	}
 	#reconcile() {
@@ -105,6 +114,14 @@ function insertEntry(parent, entry, before, rendered) {
 	if (rendered) parent.insertBefore(rendered, before);
 	parent.insertBefore(entry.end, before);
 }
+function cleanEntry(entry) {
+	let node = entry.start.nextSibling;
+	while (node && node !== entry.end) {
+		const next = node.nextSibling;
+		if (node instanceof Element) disposeElement(node);
+		node = next;
+	}
+}
 function removeEntry(entry) {
 	let node = entry.start.nextSibling;
 	while (node && node !== entry.end) {

package/dist/jsx-runtime/index.d.mts

@@ -1,4 +1,4 @@
-import { t as PrimitiveNodeType } from "../polyfill-BEL-HWkO.mjs";
+import { t as PrimitiveNodeType } from "../polyfill-BW_B2r6i.mjs";
 import { JSX as JSX$1 } from "dom-expressions/src/jsx-h";
 
 //#region src/jsx-runtime/types.d.ts
@@ -8,19 +8,29 @@ interface ComponentInstance {
 }
 /** A class whose constructor returns a ComponentInstance. */
 type ComponentClass = new (...args: any[]) => ComponentInstance;
+type ComponentFn = (props: Record<string | symbol, unknown>) => null | Element | DocumentFragment;
 /** Anything that can appear as a JSX child. */
 type Child = PrimitiveNodeType | AnyFn | Child[];
 /** A function that renders props into an element or fragment. */
 type AnyFn = (...args: any[]) => any;
 //#endregion
+//#region src/jsx-runtime/element.d.ts
+declare function createElement(type: string | Element | DocumentFragment | ComponentClass | ComponentFn, rawProps?: Record<string | symbol, unknown>): Element | DocumentFragment | null;
+//#endregion
 //#region src/jsx-runtime/ref.d.ts
 declare const $ref: unique symbol;
 //#endregion
-//#region src/jsx-runtime/element.d.ts
-declare function createElement(type: string | Element | DocumentFragment | ComponentClass | ((props: Record<string | symbol, unknown>) => null | Element | DocumentFragment), {
-  [$ref]: ref,
-  ...props
-}?: Record<string | symbol, unknown>): Element | DocumentFragment | null;
+//#region src/components/fragment.d.ts
+/**
+ * Used by the JSX transform for `<>...</>` fragments.
+ *
+ * createElement wraps this in effectScope + attachDisposables, so children's
+ * Symbol.dispose functions are collected via onCleanup and fired when the
+ * fragment's own dispose is called.
+ */
+declare function Fragment(props: {
+  children?: unknown;
+}): DocumentFragment;
 //#endregion
 //#region src/jsx-runtime/index.d.ts
 /** A value or a reactive zero-argument getter. */
@@ -67,4 +77,4 @@ declare namespace JSX {
   };
 }
 //#endregion
-export { Attrs, FunctionMaybe, JSX, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
+export { Attrs, Fragment, FunctionMaybe, JSX, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,2 +1,27 @@
-import { t as createElement } from "../element-CCHXkEsj.mjs";
-export { createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
+import { t as createElement } from "../element-01J9cXGm.mjs";
+import { d as onCleanup } from "../signals-CLAPw8kk.mjs";
+//#region src/components/fragment.ts
+/**
+* Used by the JSX transform for `<>...</>` fragments.
+*
+* createElement wraps this in effectScope + attachDisposables, so children's
+* Symbol.dispose functions are collected via onCleanup and fired when the
+* fragment's own dispose is called.
+*/
+function Fragment(props) {
+	const fragment = document.createDocumentFragment();
+	const raw = props.children;
+	if (raw == null) return fragment;
+	const nodes = Array.isArray(raw) ? raw.flat(Infinity) : [raw];
+	const disposes = [];
+	for (const child of nodes) {
+		if (!(child instanceof Node)) continue;
+		const dispose = child[Symbol.dispose];
+		if (dispose) disposes.push(dispose);
+		fragment.appendChild(child);
+	}
+	if (disposes.length) onCleanup(() => disposes.forEach((fn) => fn()));
+	return fragment;
+}
+//#endregion
+export { Fragment, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/polyfill-B1lNNcum.mjs

@@ -0,0 +1,4 @@
+//#region src/polyfill.ts
+if (!Symbol.dispose) Object.defineProperty(Symbol, "dispose", { value: Symbol("dispose") });
+//#endregion
+export {};

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { _ as untracked, a as reactive, c as effect, d as isEffect, f as isEffectScope, g as trigger, h as signal, i as isReactive, l as effectScope, m as onCleanup, n as Signal, o as batch, p as isSignal, r as Updater, s as computed, t as Computed, u as isComputed } from "../index-C6xwOPCO.mjs";
+import { _ as untracked, a as reactive, c as effect, d as isEffect, f as isEffectScope, g as trigger, h as signal, i as isReactive, l as effectScope, m as onCleanup, n as Signal, o as batch, p as isSignal, r as Updater, s as computed, t as Computed, u as isComputed } from "../index-BGKVkZ6y.mjs";
 export { Computed, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -1,2 +1,2 @@
-import { a as effect, c as isEffect, d as onCleanup, f as signal, i as computed, l as isEffectScope, m as untracked, n as reactive, o as effectScope, p as trigger, r as batch, s as isComputed, t as isReactive, u as isSignal } from "../signals-Cr7xgAJH.mjs";
+import { a as effect, c as isEffect, d as onCleanup, f as signal, i as computed, l as isEffectScope, m as untracked, n as reactive, o as effectScope, p as trigger, r as batch, s as isComputed, t as isReactive, u as isSignal } from "../signals-CLAPw8kk.mjs";
 export { batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };

package/dist/signals/lib/media.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../../index-C6xwOPCO.mjs";
+import { t as Computed } from "../../index-BGKVkZ6y.mjs";
 
 //#region src/signals/lib/media.d.ts
 declare const isBrowser: boolean;

package/dist/signals/lib/media.mjs

@@ -1,4 +1,4 @@
-import { d as onCleanup, f as signal } from "../../signals-Cr7xgAJH.mjs";
+import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
 //#region src/signals/lib/media.ts
 const isBrowser = typeof window !== "undefined";
 /**

package/dist/signals/lib/react.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../../index-C6xwOPCO.mjs";
+import { t as Computed } from "../../index-BGKVkZ6y.mjs";
 
 //#region src/signals/lib/react.d.ts
 /**

package/dist/signals/lib/react.mjs

@@ -1,4 +1,4 @@
-import { a as effect, f as signal, o as effectScope } from "../../signals-Cr7xgAJH.mjs";
+import { a as effect, f as signal, o as effectScope } from "../../signals-CLAPw8kk.mjs";
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 //#region src/signals/lib/react.ts
 /**

package/dist/{signals-Cr7xgAJH.mjs → signals-CLAPw8kk.mjs}

@@ -1,3 +1,4 @@
+import "./polyfill-B1lNNcum.mjs";
 //#region src/signals/system.ts
 /**
 * Bitmask flags that encode the current state of a {@link ReactiveNode}.
@@ -275,40 +276,6 @@ function createReactiveSystem({ update, notify, unwatched }) {
 }
 //#endregion
 //#region src/signals/lib.ts
-/**
-* @module signals
-*
-* High-level reactive primitives built on top of the low-level graph engine in
-* `./system`.
-*
-* The API surface intentionally mirrors alien-signals but extends it with
-* first-class **cleanup support** via {@link onCleanup}.
-*
-* ### Primitives
-* | Export | Role |
-* |--------|------|
-* | {@link signal}      | Mutable reactive value. |
-* | {@link computed}    | Derived, lazily-evaluated value. |
-* | {@link effect}      | Side-effect that re-runs when its deps change. |
-* | {@link effectScope} | Ownership scope that groups and disposes nested effects together. |
-* | {@link onCleanup}   | Register a teardown callback inside the currently running effect. |
-* | {@link batch}       | Defer flush until all synchronous mutations are done. |
-* | {@link untracked}   | Read signals without creating dependency links. |
-* | {@link trigger}     | Manually re-trigger subscribers of signals read inside `fn`. |
-*
-* ### Cleanup model
-* `onCleanup(fn)` registers a callback that fires:
-* 1. **Before each re-run** – so resources set up in the previous run are torn
-*    down before the effect body executes again.
-* 2. **On disposal** – whether the effect is stopped explicitly (calling the
-*    handle returned by `effect()`) or implicitly (an owning `effectScope` is
-*    disposed, cascading through all nested effects).
-*
-* Because `onCleanup` reads `activeSub` (the same module-level variable that
-* signals use for dependency tracking), it works correctly when called from
-* deeply nested helper functions during effect execution – no prop-drilling
-* required.
-*/
 /** Monotonically increasing counter; incremented on each tracking run to stamp links. */
 let cycle = 0;
 /** Depth counter for nested `batch` calls; flush is deferred while > 0. */
@@ -634,7 +601,7 @@ function batch(fn) {
 * const logCount = effect(() => {
 *   console.log('triggered by a:', a());
 *   // read b without subscribing – effect won't re-run when b changes
-*   console.log('current b:', untracked(() => b()));
+*   console.log('current b:', untracked(b));
 * });
 * ```
 */
@@ -660,33 +627,35 @@ function untracked(fn) {
 *
 * // Mutate in place (referential equality won't detect the change):
 * items().push(4);
-* trigger(() => items()); // manually notify subscribers
+* trigger(items); // manually notify subscribers
 * ```
 */
 function trigger(fn) {
-	const sub = {
-		deps: void 0,
-		depsTail: void 0,
-		flags: ReactiveFlags.Watching
-	};
-	const prevSub = setActiveSub(sub);
-	try {
-		fn();
-	} finally {
-		activeSub = prevSub;
-		let link = sub.deps;
-		while (link !== void 0) {
-			const dep = link.dep;
-			link = unlink(link, sub);
-			const subs = dep.subs;
-			if (subs !== void 0) {
-				sub.flags = ReactiveFlags.None;
-				propagate(subs);
-				shallowPropagate(subs);
+	return untracked(() => {
+		const sub = {
+			deps: void 0,
+			depsTail: void 0,
+			flags: ReactiveFlags.Watching
+		};
+		const prevSub = setActiveSub(sub);
+		try {
+			fn();
+		} finally {
+			activeSub = prevSub;
+			let link = sub.deps;
+			while (link !== void 0) {
+				const dep = link.dep;
+				link = unlink(link, sub);
+				const subs = dep.subs;
+				if (subs !== void 0) {
+					sub.flags = ReactiveFlags.None;
+					propagate(subs);
+					shallowPropagate(subs);
+				}
 			}
+			if (!batchDepth) flush();
 		}
-		if (!batchDepth) flush();
-	}
+	});
 }
 /**
 * Recomputes a computed node and returns whether its value changed.
@@ -904,9 +873,6 @@ function purgeDeps(sub) {
 	while (dep !== void 0) dep = unlink(dep, sub);
 }
 //#endregion
-//#region src/polyfill.ts
-if (!Symbol.dispose) Object.defineProperty(Symbol, "dispose", { value: Symbol("dispose") });
-//#endregion
 //#region src/signals/index.ts
 function isReactive(value) {
 	return isSignal(value) || isComputed(value);

package/dist/slot.d.mts

@@ -1,4 +1,4 @@
-import { o as ElementBuilder } from "./index-DJejH8Ff.mjs";
+import { o as ElementBuilder } from "./index-Ukqj0EcT.mjs";
 
 //#region src/slot.d.ts
 /**
@@ -13,12 +13,27 @@ declare class Slot {
    * If not yet mounted, inserts the comment markers and optional default content.
    * If already mounted, extracts and returns the current content.
    */
+  /**
+   * Render the slot as a DocumentFragment.
+   * If not yet mounted, inserts the comment markers and optional default content.
+   * If already mounted, extracts and returns the current content WITHOUT disposing
+   * it — the caller takes ownership of the returned nodes and is responsible for
+   * their disposal.
+   */
   slot(defaultContent?: string | Node | ElementBuilder): DocumentFragment;
+  /** Dispose reactive children and remove all content between the markers. */
+  clear(): void;
   /**
    * Replace the slot's content with the given element.
    * No-op if the slot is not mounted or the content is identical.
    */
   set(element: Node): void;
+  /**
+   * Extract and return the current slot content as a DocumentFragment.
+   * Returns `null` if the slot is not mounted.
+   * Content is NOT disposed — the caller takes ownership and is responsible
+   * for disposal.
+   */
   get(): DocumentFragment | null;
   /** Returns the parent node if the slot is mounted, otherwise `null`. */
   parent(): ParentNode | null;

package/dist/slot.mjs

@@ -1,3 +1,4 @@
+import "./polyfill-B1lNNcum.mjs";
 //#region src/slot.ts
 /**
 * A lightweight slot that reserves a region in the DOM using comment markers.
@@ -11,6 +12,13 @@ var Slot = class Slot {
 	* If not yet mounted, inserts the comment markers and optional default content.
 	* If already mounted, extracts and returns the current content.
 	*/
+	/**
+	* Render the slot as a DocumentFragment.
+	* If not yet mounted, inserts the comment markers and optional default content.
+	* If already mounted, extracts and returns the current content WITHOUT disposing
+	* it — the caller takes ownership of the returned nodes and is responsible for
+	* their disposal.
+	*/
 	slot(defaultContent) {
 		const fragment = document.createDocumentFragment();
 		if (this.isMounted()) {
@@ -28,6 +36,19 @@ var Slot = class Slot {
 		}
 		return fragment;
 	}
+	/** Dispose reactive children and remove all content between the markers. */
+	clear() {
+		let node = this.start.nextSibling;
+		while (node && node !== this.end) {
+			const next = node.nextSibling;
+			if (node instanceof Element) node[Symbol.dispose]?.();
+			node = next;
+		}
+		const range = document.createRange();
+		range.setStartAfter(this.start);
+		range.setEndBefore(this.end);
+		range.deleteContents();
+	}
 	/**
 	* Replace the slot's content with the given element.
 	* No-op if the slot is not mounted or the content is identical.
@@ -36,12 +57,15 @@ var Slot = class Slot {
 		const parent = this.parent();
 		if (!parent) return;
 		if (this.isSame(element)) return;
-		const range = document.createRange();
-		range.setStartAfter(this.start);
-		range.setEndBefore(this.end);
-		range.deleteContents();
+		this.clear();
 		parent.insertBefore(element, this.end);
 	}
+	/**
+	* Extract and return the current slot content as a DocumentFragment.
+	* Returns `null` if the slot is not mounted.
+	* Content is NOT disposed — the caller takes ownership and is responsible
+	* for disposal.
+	*/
 	get() {
 		if (!this.isMounted()) return null;
 		const range = document.createRange();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",