elements-kit 0.0.4 → 0.0.7

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-fdz3qoMP.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-BO1ay29p.mjs → element-Ddri9UFx.mjs}

@@ -1,6 +1,7 @@
-import { a as effect, d as onCleanup, m as untracked, o as effectScope, t as isReactive } from "./signals-fdz3qoMP.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$1 } 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;
@@ -69,21 +70,37 @@ function applyChildren(node, key, value) {
 	}
 }
 function applySlot(slot, value) {
-	if (typeof value === "function") {
-		effect(() => slot.set(resolveChild(value())));
-		return;
-	}
-	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) {
 	for (const child of ensureFlatArray(value)) {
 		if (typeof child === "function") {
 			const slot = Slot.new();
 			el.appendChild(slot());
-			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);
+		});
 	}
 }
 function resolveChild(value) {
@@ -235,8 +252,8 @@ function createNodeElement(type, props, ref) {
 	let dispose;
 	untracked(() => {
 		dispose = effectScope(() => {
-			applyProps(node, props);
 			el = renderNode(node);
+			applyProps(node, props);
 			if (typeof ref === "function" && el instanceof Element) ref(el);
 		});
 	});

package/dist/{index-CYOjSQUS.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
 /**

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-BO1ay29p.mjs";
-import { a as effect, f as signal, m as untracked, p as trigger } from "./signals-fdz3qoMP.mjs";
+import { n as disposeElement } from "./element-Ddri9UFx.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
@@ -48,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() {
@@ -109,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
@@ -20,6 +20,18 @@ declare function createElement(type: string | Element | DocumentFragment | Compo
 //#region src/jsx-runtime/ref.d.ts
 declare const $ref: unique symbol;
 //#endregion
+//#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. */
 type FunctionMaybe<T> = JSX$1.FunctionMaybe<T>;
@@ -65,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-BO1ay29p.mjs";
-export { createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
+import { t as createElement } from "../element-Ddri9UFx.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-CYOjSQUS.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-fdz3qoMP.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-CYOjSQUS.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-fdz3qoMP.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-CYOjSQUS.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-fdz3qoMP.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-fdz3qoMP.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}.
@@ -872,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.4",
+  "version": "0.0.7",
   "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",