elements-kit 0.21.0 → 0.22.1

package/dist/utilities/previous.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/previous.d.ts
 /**

package/dist/utilities/promise.d.mts

@@ -1,4 +1,4 @@
-import { D as CLAIM, j as SEED, y as Computed } from "../types-CUvFIgPa.mjs";
+import { b as CLAIM, f as Computed, w as SEED } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/promise.d.ts
 /**

package/dist/utilities/routing.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/routing.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/search-params.d.ts
 /**

package/dist/utilities/storage.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal } from "../types-CUvFIgPa.mjs";
+import { m as Signal } from "../children-s3nFjpLA.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 "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/throttled.d.ts
 /**

package/dist/utilities/timeout.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.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 "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/window-focus.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/window-size.d.ts
 type WindowSizeResult = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "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",
@@ -131,6 +131,7 @@
     "@tsdown/css": "^0.22.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.28.1",
     "happy-dom": "^20.8.9",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
@@ -140,6 +141,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
+    "csstype": "^3.2.3",
     "dom-expressions": "^0.40.6"
   },
   "peerDependencies": {

package/dist/custom-elements-BGcU6ldL.d.mts

@@ -1,57 +0,0 @@
-//#region src/custom-elements.d.ts
-/**
- * Registry of custom-element tags to their constructors.
- * Users augment this interface to add typed JSX support for their elements.
- *
- * The interface lives in the global `ElementsKit` namespace so augmentations
- * propagate cleanly through type-bundle chunk splits — augmenting a module
- * subpath would not always merge with internal references inside the JSX
- * namespace's `IntrinsicElements`.
- *
- * @example
- * ```ts
- * declare global {
- *   namespace ElementsKit {
- *     interface CustomElementRegistry {
- *       "x-range": typeof XRange;
- *     }
- *   }
- * }
- * ```
- */
-type RegisteredElementInstances = { [K in keyof ElementsKit.CustomElementRegistry]: ElementsKit.CustomElementRegistry[K] extends (abstract new (...args: any[]) => infer I) ? I : never };
-declare global {
-  namespace ElementsKit {
-    interface CustomElementRegistry {}
-  }
-  interface HTMLElementTagNameMap extends RegisteredElementInstances {}
-}
-type CustomElementRegistry = ElementsKit.CustomElementRegistry;
-type AnyCtor = CustomElementConstructor;
-/**
- * Register a custom element with the browser and return its class.
- * Pair with an augmentation of `ElementsKit.CustomElementRegistry` to get typed JSX.
- *
- * @example
- * ```tsx
- * import { defineElement } from "elements-kit/custom-elements";
- *
- * class XCounter extends HTMLElement {}
- *
- * defineElement("x-counter", XCounter);
- *
- * declare global {
- *   namespace ElementsKit {
- *     interface CustomElementRegistry {
- *       "x-counter": typeof XCounter;
- *     }
- *   }
- * }
- *
- * // JSX now gets typed props + typed ref
- * // <x-counter />
- * ```
- */
-declare function defineElement<Tag extends `${string}-${string}`, C extends AnyCtor>(tag: Tag, cls: C, options?: ElementDefinitionOptions): C;
-//#endregion
-export { defineElement as n, CustomElementRegistry as t };

package/dist/slot-BFWXeFRl.d.mts

@@ -1,77 +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;
-  /**
-   * Bind a slot to an existing marker pair (server-rendered comments) instead
-   * of creating new ones. Used by the hydrate claim pass: content between the
-   * markers is adopted as the slot's current content.
-   */
-  static claim(start: Comment, end: Comment): Slot;
-  /**
-   * 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-Dvf30O0B.mjs

@@ -1,138 +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;
-	#end;
-	#pending;
-	/**
-	* Bind a slot to an existing marker pair (server-rendered comments) instead
-	* of creating new ones. Used by the hydrate claim pass: content between the
-	* markers is adopted as the slot's current content.
-	*/
-	static claim(start, end) {
-		const slot = new Slot();
-		slot.#start = start;
-		slot.#end = end;
-		return slot;
-	}
-	/**
-	* 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 };