elements-kit 0.3.2 → 0.3.3

package/dist/{element-BjpyY6qv.mjs → element-DvqBlRly.mjs}

@@ -2,19 +2,96 @@ import { c as effectScope, g as untracked, p as onCleanup, s as effect } from ".
 import "./polyfill-CdZVCxdo.mjs";
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";
-import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-BnzxFBfO.mjs";
-import { ChildProperties, Properties, SVGNamespace } from "dom-expressions/src/constants.js";
+import { n as Slot, r as resolveNode$1, t as SLOTS } from "./slot-DLjSL6t1.mjs";
 //#region src/jsx-runtime/constants.ts
 /**
 * IDL properties that take precedence over the default `setAttribute` path.
 *
-* Extends dom-expressions' base set with `defaultValue` — without it, JSX
-* `<input defaultValue="x" />` falls through to `setAttribute("defaultValue",
-* "x")` and creates a useless `defaultvalue` HTML attribute (native
-* `HTMLInputElement` has no such content attribute; its `defaultValue` IDL
-* property reflects the `value` content attribute instead).
+* Includes camelCase boolean aliases (`readOnly`, `noValidate`, …) plus
+* lowercase boolean attributes that should be set as properties for correct
+* reflection. `defaultValue` is added on top — without it, `<input
+* defaultValue="x" />` falls through to `setAttribute("defaultValue", "x")`
+* which creates a useless `defaultvalue` content attribute (native
+* `HTMLInputElement` has no such attribute; the IDL property reflects `value`).
 */
-const Properties$1 = new Set([...Properties, "defaultValue"]);
+const Properties = new Set([
+	"className",
+	"value",
+	"readOnly",
+	"noValidate",
+	"formNoValidate",
+	"isMap",
+	"noModule",
+	"playsInline",
+	"adAuctionHeaders",
+	"allowFullscreen",
+	"browsingTopics",
+	"defaultChecked",
+	"defaultMuted",
+	"defaultSelected",
+	"disablePictureInPicture",
+	"disableRemotePlayback",
+	"preservesPitch",
+	"shadowRootClonable",
+	"shadowRootCustomElementRegistry",
+	"shadowRootDelegatesFocus",
+	"shadowRootSerializable",
+	"sharedStorageWritable",
+	"allowfullscreen",
+	"async",
+	"alpha",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"indeterminate",
+	"inert",
+	"ismap",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"seamless",
+	"selected",
+	"adauctionheaders",
+	"browsingtopics",
+	"credentialless",
+	"defaultchecked",
+	"defaultmuted",
+	"defaultselected",
+	"defer",
+	"disablepictureinpicture",
+	"disableremoteplayback",
+	"preservespitch",
+	"shadowrootclonable",
+	"shadowrootcustomelementregistry",
+	"shadowrootdelegatesfocus",
+	"shadowrootserializable",
+	"sharedstoragewritable",
+	"defaultValue"
+]);
+/** Properties whose assignment replaces the element's children. */
+const ChildProperties = new Set([
+	"innerHTML",
+	"textContent",
+	"innerText",
+	"children"
+]);
+/** XML namespaces for SVG-namespaced attributes (`xlink:href`, `xml:lang`). */
+const SVGNamespace = {
+	xlink: "http://www.w3.org/1999/xlink",
+	xml: "http://www.w3.org/XML/1998/namespace"
+};
 const ReservedNameSpaces = new Set([
 	"class",
 	"on",
@@ -29,15 +106,14 @@ function hasSlots(node) {
 function isChildrenProperty(node, key) {
 	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return true;
 	if (hasSlots(node)) {
-		const slotName = key.replace(/^slot:/, "");
-		if (Slots.has(node[SLOTS], slotName)) return true;
+		if (key.replace(/^slot:/, "") in node[SLOTS]) return true;
 	}
 	return key in node && node[key] instanceof Slot;
 }
 function applyChildren(node, key, value) {
 	if (hasSlots(node)) {
 		const slotName = key.replace(/^slot:/, "");
-		if (Slots.has(node[SLOTS], slotName)) {
+		if (slotName in node[SLOTS]) {
 			applySlot(node[SLOTS][slotName], value);
 			return;
 		}
@@ -67,8 +143,72 @@ function applySlot(slot, value) {
 		});
 	});
 }
+const FRAGMENT_POOL_MAX = 4;
+const fragmentPool = [];
+function acquireFragment() {
+	return fragmentPool.pop() ?? document.createDocumentFragment();
+}
+function releaseFragment(frag) {
+	if (fragmentPool.length < FRAGMENT_POOL_MAX) fragmentPool.push(frag);
+}
 function mountChildren(el, value) {
-	for (const child of ensureFlatArray(value)) mountChild(el, child);
+	const list = ensureFlatArray(value);
+	if (list.length === 0) return;
+	if (list.length === 1) {
+		mountChild(el, list[0]);
+		return;
+	}
+	const kind = classifyStatic(list);
+	if (kind !== 0) {
+		mountStatic(el, list, kind);
+		return;
+	}
+	const buffer = acquireFragment();
+	for (const child of list) mountChild(buffer, child);
+	el.appendChild(buffer);
+	releaseFragment(buffer);
+}
+function classifyStatic(list) {
+	let kind = 3;
+	for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		if (typeof c === "function") return 0;
+		if (c instanceof Node) kind &= 1;
+		else if (typeof c === "string" || typeof c === "number") kind &= 2;
+		else return 0;
+		if (kind === 0) return 3;
+	}
+	return kind === 3 ? 2 : kind;
+}
+function mountStatic(el, list, kind) {
+	const buffer = acquireFragment();
+	let disposers = null;
+	if (kind === 1) for (const c of list) {
+		const node = c;
+		const dispose = node[Symbol.dispose];
+		if (dispose) (disposers ??= []).push(dispose);
+		buffer.appendChild(node);
+	}
+	else if (kind === 2) for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		buffer.appendChild(document.createTextNode(String(c)));
+	}
+	else for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		if (c instanceof Node) {
+			const dispose = c[Symbol.dispose];
+			if (dispose) (disposers ??= []).push(dispose);
+			buffer.appendChild(c);
+		} else buffer.appendChild(document.createTextNode(String(c)));
+	}
+	el.appendChild(buffer);
+	releaseFragment(buffer);
+	if (disposers && disposers.length > 0) {
+		const ds = disposers;
+		effectScope(() => {
+			onCleanup(() => ds.forEach((d) => d()));
+		});
+	}
 }
 /**
 * Mounts a single child into `el`. Reactive functions become live slots; other
@@ -82,8 +222,8 @@ function mountChildren(el, value) {
 */
 function mountChild(el, child) {
 	if (typeof child === "function") {
-		const slot = Slot.new();
-		el.appendChild(slot());
+		const slot = new Slot();
+		el.appendChild(slot.render());
 		effectScope(() => {
 			effect(() => slot.set(resolveChild(child())));
 			onCleanup(() => slot.clear());
@@ -113,23 +253,24 @@ function ensureFlatArray(raw) {
 //#endregion
 //#region src/jsx-runtime/properties.ts
 function applyProps(node, props) {
-	for (const [key, value] of Object.entries(props)) {
+	const entries = Object.entries(props);
+	if (entries.length === 0) return;
+	for (const [key, value] of entries) {
 		if (isChildrenProperty(node, key)) {
 			applyChildren(node, key, value);
 			continue;
 		}
-		if (isReactive(value)) {
-			if (isEventKey(key)) {
-				effect(() => {
-					on(node, eventName(key), value());
-				});
-				continue;
-			}
-			effect(() => setProp(node, key, value()));
+		const colonIdx = key.indexOf(":");
+		if ((colonIdx > 0 ? key.slice(0, colonIdx) : "") === "on") {
+			const evName = key.slice(colonIdx + 1);
+			if (isReactive(value)) effect(() => {
+				on(node, evName, value());
+			});
+			else on(node, evName, value);
 			continue;
 		}
-		if (isEventKey(key)) {
-			on(node, eventName(key), value);
+		if (isReactive(value)) {
+			effect(() => setProp(node, key, value()));
 			continue;
 		}
 		setProp(node, key, value);
@@ -174,7 +315,7 @@ function setProp(node, key, value) {
 		node[key] = value ?? "";
 		return;
 	}
-	if (!(node instanceof SVGElement) && Properties$1.has(key)) {
+	if (!(node instanceof SVGElement) && Properties.has(key)) {
 		node[key] = value;
 		return;
 	}
@@ -199,14 +340,35 @@ function applyStyle(el, value) {
 	else if (value && typeof value === "object") Object.assign(s, value);
 }
 function setAttribute(el, key, value) {
-	if (value == null || value === false) el.removeAttribute(key);
-	else el.setAttribute(key, value === true ? "" : String(value));
-}
-function isEventKey(key) {
-	return key.startsWith("on:");
+	if (value == null || value === false) {
+		if (el.hasAttribute(key)) el.removeAttribute(key);
+		return;
+	}
+	const next = value === true ? "" : String(value);
+	if (el.getAttribute(key) === next) return;
+	el.setAttribute(key, next);
 }
-function eventName(key) {
-	return key.slice(3);
+//#endregion
+//#region src/jsx-runtime/dispose.ts
+const DISPOSABLES = /* @__PURE__ */ new WeakMap();
+const sharedDispose = function() {
+	const set = DISPOSABLES.get(this);
+	if (!set) return;
+	DISPOSABLES.delete(this);
+	set.forEach((fn) => fn());
+	set.clear();
+};
+function attachDisposables(target, disposers) {
+	const existing = DISPOSABLES.get(target);
+	if (existing) {
+		disposers.forEach((d) => existing.add(d));
+		return;
+	}
+	DISPOSABLES.set(target, disposers);
+	Object.defineProperty(target, Symbol.dispose, {
+		value: sharedDispose.bind(target),
+		configurable: true
+	});
 }
 //#endregion
 //#region src/jsx-runtime/element.ts
@@ -259,19 +421,5 @@ function renderNode(node) {
 	if (!node || typeof node.render !== "function") return null;
 	return renderNode(node.render());
 }
-function hasOwnDisposable(el) {
-	return Object.hasOwn(el, Symbol.dispose);
-}
-function attachDisposables(el, disposables) {
-	const existingDispose = hasOwnDisposable(el) ? el[Symbol.dispose].bind(el) : null;
-	Object.defineProperty(el, Symbol.dispose, {
-		value() {
-			existingDispose?.();
-			disposables.forEach((fn) => fn());
-			disposables.clear();
-		},
-		configurable: true
-	});
-}
 //#endregion
 export { disposeElement as n, mountChild as r, createElement as t };

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { i as Props, s as Require } from "./infer-LDn1TquI.mjs";
+import { i as Props, s as Require } from "./infer-K2Te9gn1.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/for.mjs

@@ -1,6 +1,6 @@
 import { c as effectScope, g as untracked, h as trigger, m as signal, p as onCleanup, s as effect } from "./lib-CVfOddra.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-BjpyY6qv.mjs";
+import { n as disposeElement } from "./element-DvqBlRly.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/{infer-LDn1TquI.d.mts → infer-K2Te9gn1.d.mts}

@@ -1,6 +1,6 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
 import { t as CustomElementRegistry } from "./custom-elements-D5CgfNKc.mjs";
-import { a as PrimitiveNodeType, i as Slots, n as Slot, t as SLOTS } from "./slot-CfafCBOW.mjs";
+import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-B8y0aEoz.mjs";
 import { JSX } from "dom-expressions/src/jsx-h";
 
 //#region src/jsx-runtime/element.d.ts
@@ -553,8 +553,8 @@ type EventMapOf<C> = C extends {
 type Capitalize1<S extends string> = S extends `${infer H}${infer R}` ? `${Uppercase<H>}${R}` : S;
 type EventsOf<C> = EventMapOf<C> extends infer E ? E extends Record<string, Event> ? { [K in keyof E & string as `on:${K}`]?: (ev: E[K]) => void } & { [K in keyof E & string as `on${Capitalize1<K>}`]?: (ev: E[K]) => void } : {} : {};
 type SlotKeys<I> = I extends {
-  [SLOTS]: Slots<infer K>;
-} ? K : never;
+  [SLOTS]: infer S;
+} ? Extract<keyof S, string> : never;
 type InstanceOf<C> = C extends (abstract new (...args: any[]) => infer I) ? I : C;
 type SlotsOf<C> = SlotKeys<InstanceOf<C>> extends infer K ? [K] extends [string] ? { [P in K as `slot:${P}`]?: Child } : {} : {};
 type ChildrenOf<C> = C extends {
@@ -573,7 +573,7 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  * - **`prop:*`** — explicit property assignment for every field.
  * - **Events** — keys from `declare static events: { ... }` produce both
  *   `on:${K}` and `on${Capitalize<K>}` typed handlers.
- * - **Slots** — keys from `[SLOTS] = Slots.new([...] as const)` produce `slot:${K}`.
+ * - **Slots** — keys from `[SLOTS] = { ... } as const` produce `slot:${K}`.
  * - **Children** — `children?: Child` unless `static children: never`.
  * - **DOM attrs** — the standard dom-expressions surface (`class`, `style`, `ref`, …).
  *
@@ -585,7 +585,7 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  * class XRange extends HTMLElement {
  *   static [ATTRIBUTES]: Attributes<XRange> = { min(v) { this.min = +v! } };
  *   declare static events: { commit: CustomEvent<number> };
- *   [SLOTS] = Slots.new(["label"] as const);
+ *   [SLOTS] = { label: new Slot() } as const;
  *   \@reactive() min = 0;
  * }
  *

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/integrations/react.d.ts
 /**

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

@@ -1,2 +1,2 @@
-import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-LDn1TquI.mjs";
+import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-K2Te9gn1.mjs";
 export { Attrs, Child, Component, ComponentClass, ComponentFn, ComponentInstance, ComponentProps, ElementProps, Fragment, JSX, MaybeReactive, MaybeReactiveProps, Props, PropsTarget, RawProps, ReactiveProps, Require, ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,4 +1,4 @@
-import { r as mountChild, t as createElement } from "../element-BjpyY6qv.mjs";
+import { r as mountChild, t as createElement } from "../element-DvqBlRly.mjs";
 //#region src/jsx-runtime/fragment.ts
 /**
 * Used by the JSX transform for `<>...</>` fragments.

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-LDn1TquI.mjs";
+import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-K2Te9gn1.mjs";
 export { COMPUTED, Computed, EFFECT, EFFECT_SCOPE, MaybeReactive, SIGNAL, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -109,6 +109,8 @@ function resolve(value) {
 * ```
 */
 function resolveProps(raw) {
+	const ownKeys = Reflect.ownKeys(raw);
+	const ownKeySet = new Set(ownKeys);
 	const cache = /* @__PURE__ */ new Map();
 	const get = (key) => {
 		let getter = cache.get(key);
@@ -121,9 +123,9 @@ function resolveProps(raw) {
 	};
 	return new Proxy(raw, {
 		get: (_target, key) => get(key),
-		has: (_target, key) => key in raw,
-		ownKeys: (_target) => Reflect.ownKeys(raw),
-		getOwnPropertyDescriptor: (_target, key) => key in raw ? {
+		has: (_target, key) => ownKeySet.has(key),
+		ownKeys: () => ownKeys,
+		getOwnPropertyDescriptor: (_target, key) => ownKeySet.has(key) ? {
 			enumerable: true,
 			configurable: true,
 			writable: false,

package/dist/slot-B8y0aEoz.d.mts

@@ -0,0 +1,71 @@
+//#region src/lib.d.ts
+type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
+//#endregion
+//#region src/polyfill.d.ts
+declare global {
+  interface SymbolConstructor {
+    readonly dispose: symbol;
+  }
+  interface Disposable {
+    [Symbol.dispose](): void;
+  }
+}
+//#endregion
+//#region src/slot.d.ts
+/**
+ * A lightweight slot that reserves a region in the DOM using comment markers.
+ * Content between the markers can be replaced dynamically without wrapper elements.
+ */
+declare class Slot {
+  #private;
+  /**
+   * 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.
+   */
+  render(defaultContent?: PrimitiveNodeType): 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;
+  /** Whether the slot's comment markers are attached to the DOM. */
+  isMounted(): boolean;
+}
+/**
+ * Symbol key for attaching a slot collection to a custom element instance.
+ * Prevents collisions with public Element properties and signals to the JSX
+ * runtime that this property holds slot wiring (not regular children).
+ *
+ * The value at `[SLOTS]` is a plain object whose keys are slot names and whose
+ * values are {@link Slot} instances. Declare with `as const` so TypeScript
+ * preserves the literal key union — this is what `ElementProps<typeof Cls>`
+ * uses to synthesize `slot:${K}` entries.
+ *
+ * @example
+ * ```ts
+ * class Card extends HTMLElement {
+ *   // ✅ literal keys flow through — "header" | "footer"
+ *   [SLOTS] = { header: new Slot(), footer: new Slot() } as const;
+ * }
+ *
+ * // ❌ widens — no typed slot:* props
+ * // [SLOTS] = { header: new Slot(), footer: new Slot() };
+ * ```
+ */
+declare const SLOTS: unique symbol;
+//#endregion
+export { Slot as n, PrimitiveNodeType as r, SLOTS as t };

package/dist/slot-DLjSL6t1.mjs

@@ -0,0 +1,124 @@
+import "./polyfill-CdZVCxdo.mjs";
+//#region src/lib.ts
+var UnsupportedChildError = class extends Error {
+	constructor(value) {
+		super(`Unsupported child type: ${typeof value}`);
+		this.name = "UnsupportedChildError";
+	}
+};
+function resolveNode(c) {
+	if (c instanceof Node) return c;
+	if (c === null || c === void 0 || typeof c === "boolean") return document.createComment("");
+	if (typeof c === "string" || typeof c === "number" || typeof c === "bigint" || typeof c === "symbol" || c instanceof Date || c instanceof RegExp) return document.createTextNode(String(c));
+	throw new UnsupportedChildError(c);
+}
+//#endregion
+//#region src/slot.ts
+/**
+* A lightweight slot that reserves a region in the DOM using comment markers.
+* Content between the markers can be replaced dynamically without wrapper elements.
+*/
+var Slot = class {
+	#start = document.createComment("{");
+	#end = document.createComment("}");
+	#pending;
+	/**
+	* 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.
+	*/
+	render(defaultContent) {
+		const fragment = document.createDocumentFragment();
+		if (this.isMounted()) {
+			const range = document.createRange();
+			range.setStartAfter(this.#start);
+			range.setEndBefore(this.#end);
+			fragment.appendChild(range.extractContents());
+			return fragment;
+		}
+		fragment.appendChild(this.#start);
+		fragment.appendChild(this.#end);
+		const initialContent = this.#pending ?? resolveNode(defaultContent);
+		if (initialContent) fragment.insertBefore(initialContent, this.#end);
+		this.#pending = void 0;
+		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.
+	*/
+	set(element) {
+		const parent = this.parent();
+		if (!parent) {
+			this.#pending = element;
+			return;
+		}
+		if (this.#isSame(element)) return;
+		this.clear();
+		parent.insertBefore(element, this.#end);
+		this.#pending = void 0;
+	}
+	/**
+	* 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();
+		range.setStartAfter(this.#start);
+		range.setEndBefore(this.#end);
+		return range.extractContents();
+	}
+	/** Returns the parent node if the slot is mounted, otherwise `null`. */
+	parent() {
+		return this.isMounted() ? this.#start.parentNode : null;
+	}
+	/** Whether the slot's comment markers are attached to the DOM. */
+	isMounted() {
+		return this.#start.parentNode === this.#end.parentNode && !!this.#start.parentNode;
+	}
+	#isSame(element) {
+		return this.#start.nextSibling === element && this.#end === element.nextSibling;
+	}
+};
+/**
+* Symbol key for attaching a slot collection to a custom element instance.
+* Prevents collisions with public Element properties and signals to the JSX
+* runtime that this property holds slot wiring (not regular children).
+*
+* The value at `[SLOTS]` is a plain object whose keys are slot names and whose
+* values are {@link Slot} instances. Declare with `as const` so TypeScript
+* preserves the literal key union — this is what `ElementProps<typeof Cls>`
+* uses to synthesize `slot:${K}` entries.
+*
+* @example
+* ```ts
+* class Card extends HTMLElement {
+*   // ✅ literal keys flow through — "header" | "footer"
+*   [SLOTS] = { header: new Slot(), footer: new Slot() } as const;
+* }
+*
+* // ❌ widens — no typed slot:* props
+* // [SLOTS] = { header: new Slot(), footer: new Slot() };
+* ```
+*/
+const SLOTS = Symbol("slots");
+//#endregion
+export { Slot as n, resolveNode as r, SLOTS as t };

package/dist/slot.d.mts

@@ -1,2 +1,2 @@
-import { i as Slots, n as Slot, r as SlotInstance, t as SLOTS } from "./slot-CfafCBOW.mjs";
-export { SLOTS, Slot, SlotInstance, Slots };
+import { n as Slot, t as SLOTS } from "./slot-B8y0aEoz.mjs";
+export { SLOTS, Slot };

package/dist/slot.mjs

@@ -1,2 +1,2 @@
-import { n as Slot, r as Slots, t as SLOTS } from "./slot-BnzxFBfO.mjs";
-export { SLOTS, Slot, Slots };
+import { n as Slot, t as SLOTS } from "./slot-DLjSL6t1.mjs";
+export { SLOTS, Slot };

package/dist/utilities/active-element.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/active-element.d.ts
 declare const activeElement: Computed<Element | null>;

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { b as MaybeReactive } from "../infer-LDn1TquI.mjs";
+import { b as MaybeReactive } from "../infer-K2Te9gn1.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

package/dist/utilities/dom-lifecycle.test.mjs

@@ -193,6 +193,7 @@ describe("dom-lifecycle", () => {
 	});
 	it("applies render-inert defaults: display:contents and role='none'", () => {
 		const probe = makeProbe();
+		document.body.appendChild(probe);
 		globalExpect(probe.style.display).toBe("contents");
 		globalExpect(probe.getAttribute("role")).toBe("none");
 	});

package/dist/utilities/element-rect.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

package/dist/utilities/element-scroll.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal } from "../infer-LDn1TquI.mjs";
+import { x as Signal } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal, y as Computed } from "../infer-LDn1TquI.mjs";
+import { x as Signal, y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

package/dist/utilities/event-listener.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

package/dist/utilities/focus-within.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/focus-within.d.ts
 /**

package/dist/utilities/hover.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/hover.d.ts
 /**

package/dist/utilities/interval.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/interval.d.ts
 type IntervalResult = {

package/dist/utilities/location.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/location.d.ts
 type LocationResult = {

package/dist/utilities/media-devices.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/media-devices.d.ts
 /**

package/dist/utilities/media-player.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal, y as Computed } from "../infer-LDn1TquI.mjs";
+import { x as Signal, y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/media-player.d.ts
 type MediaPlayerResult<T extends HTMLMediaElement> = {

package/dist/utilities/media-query.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/media-query.d.ts
 /**

package/dist/utilities/network.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/network.d.ts
 /**

package/dist/utilities/orientation.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/orientation.d.ts
 type OrientationResult = {

package/dist/utilities/previous.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/previous.d.ts
 /**

package/dist/utilities/promise.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/promise.d.ts
 /**

package/dist/utilities/routing.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/routing.d.ts
 /**

package/dist/utilities/search-params.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/search-params.d.ts
 /**

package/dist/utilities/storage.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal } from "../infer-LDn1TquI.mjs";
+import { x as Signal } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/storage.d.ts
 type StorageOptions<T> = {

package/dist/utilities/throttled.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/throttled.d.ts
 /**

package/dist/utilities/timeout.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/timeout.d.ts
 type TimeoutResult = {

package/dist/utilities/window-focus.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/window-focus.d.ts
 /**

package/dist/utilities/window-size.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-LDn1TquI.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/window-size.d.ts
 type WindowSizeResult = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "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",

package/dist/slot-BnzxFBfO.mjs

@@ -1,198 +0,0 @@
-import "./polyfill-CdZVCxdo.mjs";
-//#region src/lib.ts
-var UnsupportedChildError = class extends Error {
-	constructor(value) {
-		super(`Unsupported child type: ${typeof value}`);
-		this.name = "UnsupportedChildError";
-	}
-};
-function resolveNode(c) {
-	if (c instanceof Node) return c;
-	if (c === null || c === void 0 || typeof c === "boolean") return document.createComment("");
-	if (typeof c === "string" || typeof c === "number" || typeof c === "bigint" || typeof c === "symbol" || c instanceof Date || c instanceof RegExp) return document.createTextNode(String(c));
-	throw new UnsupportedChildError(c);
-}
-//#endregion
-//#region src/slot.ts
-/**
-* A lightweight slot that reserves a region in the DOM using comment markers.
-* Content between the markers can be replaced dynamically without wrapper elements.
-*/
-var Slot = class Slot {
-	start = document.createComment("{");
-	end = document.createComment("}");
-	#pending;
-	/**
-	* 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()) {
-			const range = document.createRange();
-			range.setStartAfter(this.start);
-			range.setEndBefore(this.end);
-			fragment.appendChild(range.extractContents());
-			return fragment;
-		}
-		fragment.appendChild(this.start);
-		fragment.appendChild(this.end);
-		const initialContent = this.#pending ?? resolveNode(defaultContent);
-		if (initialContent) fragment.insertBefore(initialContent, this.end);
-		this.#pending = void 0;
-		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.
-	*/
-	set(element) {
-		const parent = this.parent();
-		if (!parent) {
-			this.#pending = element;
-			return;
-		}
-		if (this.isSame(element)) return;
-		this.clear();
-		parent.insertBefore(element, this.end);
-		this.#pending = void 0;
-	}
-	/**
-	* 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();
-		range.setStartAfter(this.start);
-		range.setEndBefore(this.end);
-		return range.extractContents();
-	}
-	/** Returns the parent node if the slot is mounted, otherwise `null`. */
-	parent() {
-		return this.isMounted() ? this.start.parentNode : null;
-	}
-	/** Whether the slot's comment markers are attached to the DOM. */
-	isMounted() {
-		return this.start.parentNode === this.end.parentNode && !!this.start.parentNode;
-	}
-	isSame(element) {
-		return this.start.nextSibling === element && this.end === element.nextSibling;
-	}
-	/**
-	* Create a callable slot instance.
-	*
-	* The returned value is both a function and an object:
-	* - Call it to render the slot with optional default content.
-	* - Access `.set()`, `.parent()`, `.isMounted()` for slot management.
-	*
-	* @example
-	* ```ts
-	* const slot = createSlot();
-	* el.append(slot("default text"));  // mount with default
-	* slot.set(newElement);              // replace content
-	* ```
-	*/
-	static new() {
-		const instance = new Slot();
-		return new Proxy(instance.slot.bind(instance), {
-			apply(target, _thisArg, argArray) {
-				return target(...argArray);
-			},
-			get(_target, prop) {
-				const value = instance[prop];
-				return typeof value === "function" ? value.bind(instance) : value;
-			},
-			getPrototypeOf() {
-				return Slot.prototype;
-			}
-		});
-	}
-};
-/**
-* Symbol key for attaching a `Slots` instance to a custom element instance.
-* This prevent collisions with Element properties and are not meant to be treated as JSX children.
-*/
-const SLOTS = Symbol("slots");
-const $map = Symbol("map");
-const $keys = Symbol("keys");
-const $has = Symbol("has");
-/**
-* A keyed collection of slot instances.
-* Slots are pre-created from the provided keys and lazily created on first access for unknown keys.
-*/
-var Slots = class Slots {
-	[$map] = /* @__PURE__ */ new Map();
-	constructor(keys = []) {
-		for (const key of keys) this[$map].set(key, Slot.new());
-	}
-	[Symbol.iterator]() {
-		return this[$map][Symbol.iterator]();
-	}
-	[Symbol.toStringTag]() {
-		return "Slots";
-	}
-	[Symbol.hasInstance](instance) {
-		return instance instanceof Slots;
-	}
-	[$has](key) {
-		return this[$map].has(key);
-	}
-	/** Check whether a slot with the given key exists. */
-	static has(slots, key) {
-		return slots[$has](key);
-	}
-	[$keys]() {
-		return this[$map].keys();
-	}
-	/** Iterate over all registered slot keys. */
-	static keys(slots) {
-		return slots[$keys]();
-	}
-	/**
-	* Create a typed `Slots` collection from a list of key names.
-	*
-	* Pass the keys with `as const` so TS narrows them to a literal union —
-	* this is what lets `ElementProps<typeof Cls>` synthesize `slot:${K}`
-	* entries. Without `as const`, the array type widens to `string[]` and
-	* the slot keys are lost.
-	*
-	* @example
-	* ```ts
-	* class Card extends HTMLElement {
-	*   // ✅ literal keys flow through — "header" | "footer"
-	*   [SLOTS] = Slots.new(["header", "footer"] as const);
-	* }
-	*
-	* // ❌ widens to string; no typed slot:* props
-	* // [SLOTS] = Slots.new(["header", "footer"]);
-	* ```
-	*/
-	static new(keys) {
-		const instance = new Slots(keys);
-		return new Proxy(instance, { get(target, prop, receiver) {
-			if (typeof prop === "string" && target[$map].has(prop)) return target[$map].get(prop);
-			return Reflect.get(target, prop, receiver);
-		} });
-	}
-};
-//#endregion
-export { resolveNode as i, Slot as n, Slots as r, SLOTS as t };

package/dist/slot-CfafCBOW.d.mts

@@ -1,121 +0,0 @@
-//#region src/lib.d.ts
-type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
-//#endregion
-//#region src/polyfill.d.ts
-declare global {
-  interface SymbolConstructor {
-    readonly dispose: symbol;
-  }
-  interface Disposable {
-    [Symbol.dispose](): void;
-  }
-}
-//#endregion
-//#region src/slot.d.ts
-/**
- * A lightweight slot that reserves a region in the DOM using comment markers.
- * Content between the markers can be replaced dynamically without wrapper elements.
- */
-declare class Slot {
-  #private;
-  private readonly start;
-  private readonly end;
-  /**
-   * 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?: PrimitiveNodeType): 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;
-  /** Whether the slot's comment markers are attached to the DOM. */
-  isMounted(): boolean;
-  private isSame;
-  /**
-   * Create a callable slot instance.
-   *
-   * The returned value is both a function and an object:
-   * - Call it to render the slot with optional default content.
-   * - Access `.set()`, `.parent()`, `.isMounted()` for slot management.
-   *
-   * @example
-   * ```ts
-   * const slot = createSlot();
-   * el.append(slot("default text"));  // mount with default
-   * slot.set(newElement);              // replace content
-   * ```
-   */
-  static new(): Slot & ((defaultContent?: PrimitiveNodeType) => DocumentFragment);
-}
-/**
- * A callable slot returned by {@link Slot.new}.
- *
- * - Invoke it (`slot()`) to render the slot region as a `DocumentFragment`,
- *   optionally with default content on first mount.
- * - Call `.set()` to replace current content, `.clear()` to empty it, and
- *   `.isMounted()` / `.parent()` to inspect mount state.
- */
-type SlotInstance = ReturnType<typeof Slot.new>;
-/**
- * Symbol key for attaching a `Slots` instance to a custom element instance.
- * This prevent collisions with Element properties and are not meant to be treated as JSX children.
- */
-declare const SLOTS: unique symbol;
-declare const $map: unique symbol;
-declare const $keys: unique symbol;
-declare const $has: unique symbol;
-/**
- * A keyed collection of slot instances.
- * Slots are pre-created from the provided keys and lazily created on first access for unknown keys.
- */
-declare class Slots<K extends string> implements Iterable<[K, SlotInstance]> {
-  readonly [$map]: Map<K, Slot & ((defaultContent?: PrimitiveNodeType) => DocumentFragment)>;
-  private constructor();
-  [Symbol.iterator](): MapIterator<[K, Slot & ((defaultContent?: PrimitiveNodeType) => DocumentFragment)]>;
-  [Symbol.toStringTag](): string;
-  [Symbol.hasInstance](instance: unknown): instance is Slots<any>;
-  [$has](key: K): boolean;
-  /** Check whether a slot with the given key exists. */
-  static has<K extends string>(slots: Slots<K>, key: K): boolean;
-  [$keys](): MapIterator<K>;
-  /** Iterate over all registered slot keys. */
-  static keys<K extends string>(slots: Slots<K>): MapIterator<K>;
-  /**
-   * Create a typed `Slots` collection from a list of key names.
-   *
-   * Pass the keys with `as const` so TS narrows them to a literal union —
-   * this is what lets `ElementProps<typeof Cls>` synthesize `slot:${K}`
-   * entries. Without `as const`, the array type widens to `string[]` and
-   * the slot keys are lost.
-   *
-   * @example
-   * ```ts
-   * class Card extends HTMLElement {
-   *   // ✅ literal keys flow through — "header" | "footer"
-   *   [SLOTS] = Slots.new(["header", "footer"] as const);
-   * }
-   *
-   * // ❌ widens to string; no typed slot:* props
-   * // [SLOTS] = Slots.new(["header", "footer"]);
-   * ```
-   */
-  static new<K extends string>(keys: K[]): Slots<K> & { readonly [P in K]: SlotInstance };
-}
-//#endregion
-export { PrimitiveNodeType as a, Slots as i, Slot as n, SlotInstance as r, SLOTS as t };