elements-kit 0.3.2 → 0.3.4

package/dist/slot-Cne__au7.mjs

@@ -0,0 +1,127 @@
+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;
+	#end;
+	#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;
+		}
+		const start = this.#start ??= document.createComment("{");
+		const end = this.#end ??= document.createComment("}");
+		fragment.appendChild(start);
+		fragment.appendChild(end);
+		const initialContent = this.#pending ?? resolveNode(defaultContent);
+		if (initialContent) fragment.insertBefore(initialContent, end);
+		this.#pending = void 0;
+		return fragment;
+	}
+	/** Dispose reactive children and remove all content between the markers. */
+	clear() {
+		if (!this.#start || !this.#end) return;
+		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 && this.#start.parentNode !== null && this.#start.parentNode === this.#end.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-Cne__au7.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.4",
   "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/element-BjpyY6qv.mjs

@@ -1,277 +0,0 @@
-import { c as effectScope, g as untracked, p as onCleanup, s as effect } from "./lib-CVfOddra.mjs";
-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";
-//#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).
-*/
-const Properties$1 = new Set([...Properties, "defaultValue"]);
-const ReservedNameSpaces = new Set([
-	"class",
-	"on",
-	"style",
-	"prop"
-]);
-//#endregion
-//#region src/jsx-runtime/children.ts
-function hasSlots(node) {
-	return SLOTS in 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;
-	}
-	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)) {
-			applySlot(node[SLOTS][slotName], value);
-			return;
-		}
-	}
-	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) {
-		mountChildren(node, value);
-		return;
-	}
-	if (key in node) {
-		const slot = node[key];
-		if (!(slot instanceof Slot)) return;
-		applySlot(slot, value);
-	}
-}
-function applySlot(slot, 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)) mountChild(el, child);
-}
-/**
-* Mounts a single child into `el`. Reactive functions become live slots; other
-* values append as-is. Each child owns its own `effectScope` so sibling
-* `onCleanup` registrations don't overwrite each other (the signals lib
-* supports only one onCleanup per subscriber).
-*
-* Also used by `createFunctionElement` when a component returns a reactive
-* getter or primitive — keeps the component's `effectScope` alive for the
-* lifetime of the fragment it mounts into.
-*/
-function mountChild(el, child) {
-	if (typeof child === "function") {
-		const slot = Slot.new();
-		el.appendChild(slot());
-		effectScope(() => {
-			effect(() => slot.set(resolveChild(child())));
-			onCleanup(() => slot.clear());
-		});
-		return;
-	}
-	const node = resolveChild(child);
-	const dispose = node[Symbol.dispose];
-	el.appendChild(node);
-	if (dispose) effectScope(() => {
-		onCleanup(dispose);
-	});
-}
-function resolveChild(value) {
-	if (Array.isArray(value)) {
-		const fragment = document.createDocumentFragment();
-		for (const item of value) fragment.appendChild(resolveChild(item));
-		return fragment;
-	}
-	if (typeof value === "function") return resolveChild(value());
-	return resolveNode$1(value);
-}
-/** Normalises the children prop into a flat array. */
-function ensureFlatArray(raw) {
-	return (Array.isArray(raw) ? raw : [raw]).flat(Infinity);
-}
-//#endregion
-//#region src/jsx-runtime/properties.ts
-function applyProps(node, props) {
-	for (const [key, value] of Object.entries(props)) {
-		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()));
-			continue;
-		}
-		if (isEventKey(key)) {
-			on(node, eventName(key), value);
-			continue;
-		}
-		setProp(node, key, value);
-	}
-}
-function setProp(node, key, value) {
-	const colonIdx = key.indexOf(":");
-	if (colonIdx > -1) {
-		const ns = key.slice(0, colonIdx);
-		const name = key.slice(colonIdx + 1);
-		if (ReservedNameSpaces.has(ns)) {
-			if (ns === "prop") {
-				node[name] = value;
-				return;
-			}
-			if (ns === "class") {
-				node.classList.toggle(name, Boolean(value));
-				return;
-			}
-			if (ns === "style") {
-				if (value == null || value === false) node.style.removeProperty(name);
-				else node.style.setProperty(name, String(value));
-				return;
-			}
-			return;
-		}
-		const svgNs = SVGNamespace[ns];
-		if (svgNs) {
-			node.setAttributeNS(svgNs, key, String(value ?? ""));
-			return;
-		}
-	}
-	if (key === "class") {
-		node.className = String(value ?? "");
-		return;
-	}
-	if (key === "style") {
-		applyStyle(node, value);
-		return;
-	}
-	if (ChildProperties.has(key)) {
-		node[key] = value ?? "";
-		return;
-	}
-	if (!(node instanceof SVGElement) && Properties$1.has(key)) {
-		node[key] = value;
-		return;
-	}
-	if (node instanceof Element && node.nodeName.includes("-") && key in node) {
-		try {
-			node[key] = value;
-		} catch {
-			setAttribute(node, key, value);
-		}
-		return;
-	}
-	if (!(node instanceof Element)) {
-		node[key] = value;
-		return;
-	}
-	setAttribute(node, key, value);
-}
-function applyStyle(el, value) {
-	const s = el.style;
-	if (!s) return;
-	if (typeof value === "string") s.cssText = 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:");
-}
-function eventName(key) {
-	return key.slice(3);
-}
-//#endregion
-//#region src/jsx-runtime/element.ts
-function createElement(type, { ref, ...props } = {}) {
-	if (typeof type === "function" && !type.prototype?.render) return createFunctionElement(type, props, ref);
-	return createNodeElement(type, props, ref);
-}
-/** 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(resolveProps(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;
-}
-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);
-}
-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 };