elements-kit 0.3.2 → 0.3.4

package/dist/element-Cbzkm_B5.mjs

@@ -0,0 +1,425 @@
+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 { n as Slot, r as resolveNode$1, t as SLOTS } from "./slot-Cne__au7.mjs";
+//#region src/jsx-runtime/constants.ts
+/**
+* IDL properties that take precedence over the default `setAttribute` path.
+*
+* 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 = 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"
+]);
+/**
+* Returns the XML namespace URI for an SVG-namespaced attribute prefix
+* (`xlink:href`, `xml:lang`). Inlined as a function to avoid a 2-entry object
+* allocation and the property lookup on every attribute write.
+*/
+function svgNamespace(ns) {
+	if (ns === "xlink") return "http://www.w3.org/1999/xlink";
+	if (ns === "xml") return "http://www.w3.org/XML/1998/namespace";
+}
+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)) {
+		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 (slotName in node[SLOTS]) {
+			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) {
+	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();
+	});
+}
+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) {
+	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;
+		onCleanup(() => ds.forEach((d) => d()));
+	}
+}
+/**
+* Mounts a single child into `el`. Reactive functions become live slots; other
+* values append as-is.
+*
+* Relies on the caller's effectScope (every JSX render sits inside one). The
+* signals lib supports multiple onCleanup per scope, so siblings coexist.
+*
+* 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 = new Slot();
+		el.appendChild(slot.render());
+		effect(() => slot.set(resolveChild(child())));
+		onCleanup(() => slot.clear());
+		return;
+	}
+	const node = resolveChild(child);
+	const dispose = node[Symbol.dispose];
+	el.appendChild(node);
+	if (dispose) onCleanup(dispose);
+}
+function resolveChild(value) {
+	if (value instanceof Node) return value;
+	if (typeof value === "string" || typeof value === "number") return document.createTextNode(String(value));
+	if (value == null || typeof value === "boolean") return document.createComment("");
+	if (typeof value === "function") return resolveChild(value());
+	if (Array.isArray(value)) {
+		const fragment = document.createDocumentFragment();
+		for (const item of value) fragment.appendChild(resolveChild(item));
+		return fragment;
+	}
+	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) {
+	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;
+		}
+		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 (isReactive(value)) {
+			effect(() => setProp(node, 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.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) {
+		if (el.hasAttribute(key)) el.removeAttribute(key);
+		return;
+	}
+	const next = value === true ? "" : String(value);
+	if (el.getAttribute(key) === next) return;
+	el.setAttribute(key, next);
+}
+//#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
+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());
+}
+//#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-Cbzkm_B5.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-Cbzkm_B5.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 };