elements-kit 0.3.1 → 0.3.3

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/{test.BmQO5GaM-C8YqghE0.mjs → test.BmQO5GaM-ZC2MPXQb.mjs}

@@ -1,4 +1,4 @@
-import { A as plugins, C as getCallLastIndex, D as ordinal, E as noop, O as stringify, S as createSimpleStackTrace, T as isObject, _ as getSafeTimers, a as waitForImportsToResolve, b as printDiffOrStringify, d as getNames, g as delay, h as parseSingleStack, i as resetModules, j as y, k as format, m as parseErrorStacktrace, n as getWorkerState, r as isChildProcess, u as getCurrentTest, v as processError, w as getType, x as assertTypes, y as diff } from "./benchmark.CX_oY03V-COK1VBpH.mjs";
+import { A as plugins, C as getCallLastIndex, D as ordinal, E as noop, O as stringify, S as createSimpleStackTrace, T as isObject, _ as getSafeTimers, a as waitForImportsToResolve, b as printDiffOrStringify, d as getNames, g as delay, h as parseSingleStack, i as resetModules, j as y, k as format, m as parseErrorStacktrace, n as getWorkerState, r as isChildProcess, u as getCurrentTest, v as processError, w as getType, x as assertTypes, y as diff } from "./benchmark.CX_oY03V-CsUg-gW0.mjs";
 //#region node_modules/.pnpm/@vitest+spy@4.1.3/node_modules/@vitest/spy/dist/index.js
 function isMockFunction(fn) {
 	return typeof fn === "function" && "_isMockFunction" in fn && fn._isMockFunction === true;
@@ -4735,10 +4735,10 @@ function offsetToLineNumber(source, offset) {
 	return line + 1;
 }
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@29.1.0_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/_commonjsHelpers.D26ty3Ew.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/_commonjsHelpers.D26ty3Ew.js
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@29.1.0_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/rpc.MzXet3jl.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/rpc.MzXet3jl.js
 const RealDate = Date;
 let now = null;
 var MockDate = class MockDate extends RealDate {
@@ -5506,7 +5506,7 @@ var SnapshotClient = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@29.1.0_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/test.BmQO5GaM.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/test.BmQO5GaM.js
 var fakeTimersSrc = {};
 var global$1;
 var hasRequiredGlobal;

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

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-BUUWMoG9.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/active-element.test.mjs

@@ -1,5 +1,5 @@
-import { f as it, l as describe } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { activeElement } from "./active-element.mjs";
 //#region src/utilities/active-element.test.ts
 describe("activeElement (singleton)", () => {

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { b as MaybeReactive } from "../infer-BUUWMoG9.mjs";
+import { b as MaybeReactive } from "../infer-K2Te9gn1.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts
@@ -9,6 +9,12 @@ type Fn<TInput, TOutput> = (input: TInput) => Promise<TOutput>;
  * reactive signals (`state`, `value`, `reason`, `result`, `pending`) and
  * lets you `run`/`start`/`stop` the underlying task imperatively.
  *
+ * Trigger choice: `start()` tracks the body and re-runs when its parameter
+ * signals change — right for "fetch X whenever `id` changes". `run()` is
+ * one-shot and untracked — right for externally-driven loads (intersection,
+ * click, form submit), especially when the body writes to the same signals
+ * it reads (`start()` would cascade).
+ *
  * Prefer the {@link async} factory — it returns an `Async` that is also
  * callable as a signal (`op()` === `op.result`), which is what most call
  * sites want. Use this class directly only when you need the object form.

package/dist/utilities/async.mjs

@@ -7,6 +7,12 @@ import { promise } from "./promise.mjs";
 * reactive signals (`state`, `value`, `reason`, `result`, `pending`) and
 * lets you `run`/`start`/`stop` the underlying task imperatively.
 *
+* Trigger choice: `start()` tracks the body and re-runs when its parameter
+* signals change — right for "fetch X whenever `id` changes". `run()` is
+* one-shot and untracked — right for externally-driven loads (intersection,
+* click, form submit), especially when the body writes to the same signals
+* it reads (`start()` would cascade).
+*
 * Prefer the {@link async} factory — it returns an `Async` that is also
 * callable as a signal (`op()` === `op.result`), which is what most call
 * sites want. Use this class directly only when you need the object form.

package/dist/utilities/async.test.mjs

@@ -1,7 +1,7 @@
 import { m as signal, p as onCleanup, s as effect } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { Async, async } from "./async.mjs";
 import { createInterval } from "./interval.mjs";
 //#region src/utilities/async.test.ts

package/dist/utilities/context.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope, m as signal, s as effect } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { getContext, setContext } from "./context.mjs";
 //#region src/utilities/context.test.ts
 afterEach(() => {

package/dist/utilities/debounced.d.mts

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

package/dist/utilities/debounced.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope, m as signal } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { c as beforeEach, f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { c as beforeEach, f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createDebounced } from "./debounced.mjs";
 //#region src/utilities/debounced.test.ts
 beforeEach(() => {

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

@@ -1,4 +1,4 @@
-import { l as describe, t as bench } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
+import { l as describe, t as bench } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
 //#region src/utilities/dom-lifecycle.bench.ts
 describe("dom-lifecycle — registration cost", () => {
 	bench("register 100 entries on already-connected elements", () => {

package/dist/utilities/dom-lifecycle.d.mts

@@ -34,19 +34,9 @@ type AdoptedCallback = (oldDocument: Document, newDocument: Document) => void;
  * place the lifecycle element where those selectors don't reach if needed.)
  *
  * @example
- * ```tsx
- * <div>
- *   <dom-lifecycle
- *     onConnect={(el) => el.parentElement?.classList.add("ready")}
- *     onDisconnect={(el) => {
- *       // el.parentElement is null here per spec — stash from onConnect if needed
- *     }}
- *   />
- * </div>
- * ```
- *
- * @example
- * Wrap children — read the wrapped subtree via `firstElementChild`:
+ * Canonical form — wrap the subtree the lifecycle owns. `onConnect` runs
+ * inside an `effectScope` tied to the wrapped subtree, so observers, context
+ * lookups, and `onCleanup` registrations clean up on disconnect.
  * ```tsx
  * <section>
  *   <dom-lifecycle onConnect={(el) => measure(el.firstElementChild)}>
@@ -55,6 +45,19 @@ type AdoptedCallback = (oldDocument: Document, newDocument: Document) => void;
  *   </dom-lifecycle>
  * </section>
  * ```
+ *
+ * @example
+ * Sibling form — fallback for cases where the host element is already
+ * present for layout reasons and you only need lifecycle on the surrounding
+ * element. Read `self.parentElement` for the host; capture it in `onConnect`
+ * if you need it on disconnect (the spec nulls it before `onDisconnect`).
+ * ```tsx
+ * <div>
+ *   <dom-lifecycle
+ *     onConnect={(el) => el.parentElement?.classList.add("ready")}
+ *   />
+ * </div>
+ * ```
  */
 declare class DomLifecycleElement extends HTMLElement {
   #private;
@@ -72,14 +75,9 @@ declare class DomLifecycleElement extends HTMLElement {
   adoptedCallback(oldDocument: Document, newDocument: Document): void;
 }
 declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "dom-lifecycle": {
-        onConnect?: LifecycleCallback;
-        onDisconnect?: LifecycleCallback;
-        onMove?: LifecycleCallback;
-        onAdopted?: AdoptedCallback;
-      };
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "dom-lifecycle": typeof DomLifecycleElement;
     }
   }
 }

package/dist/utilities/dom-lifecycle.mjs

@@ -35,19 +35,9 @@ import { isBrowser } from "./environment.mjs";
 * place the lifecycle element where those selectors don't reach if needed.)
 *
 * @example
-* ```tsx
-* <div>
-*   <dom-lifecycle
-*     onConnect={(el) => el.parentElement?.classList.add("ready")}
-*     onDisconnect={(el) => {
-*       // el.parentElement is null here per spec — stash from onConnect if needed
-*     }}
-*   />
-* </div>
-* ```
-*
-* @example
-* Wrap children — read the wrapped subtree via `firstElementChild`:
+* Canonical form — wrap the subtree the lifecycle owns. `onConnect` runs
+* inside an `effectScope` tied to the wrapped subtree, so observers, context
+* lookups, and `onCleanup` registrations clean up on disconnect.
 * ```tsx
 * <section>
 *   <dom-lifecycle onConnect={(el) => measure(el.firstElementChild)}>
@@ -56,6 +46,19 @@ import { isBrowser } from "./environment.mjs";
 *   </dom-lifecycle>
 * </section>
 * ```
+*
+* @example
+* Sibling form — fallback for cases where the host element is already
+* present for layout reasons and you only need lifecycle on the surrounding
+* element. Read `self.parentElement` for the host; capture it in `onConnect`
+* if you need it on disconnect (the spec nulls it before `onDisconnect`).
+* ```tsx
+* <div>
+*   <dom-lifecycle
+*     onConnect={(el) => el.parentElement?.classList.add("ready")}
+*   />
+* </div>
+* ```
 */
 var DomLifecycleElement = class extends HTMLElement {
 	#onConnect = null;

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

@@ -1,5 +1,5 @@
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { DomLifecycleElement } from "./dom-lifecycle.mjs";
 //#region src/utilities/dom-lifecycle.test.ts
 afterEach(() => {
@@ -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-BUUWMoG9.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

package/dist/utilities/element-rect.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createElementRect } from "./element-rect.mjs";
 //#region src/utilities/element-rect.test.ts
 afterEach(() => {

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

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

package/dist/utilities/element-scroll.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createElementScroll } from "./element-scroll.mjs";
 //#region src/utilities/element-scroll.test.ts
 describe("createElementScroll", () => {

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

@@ -1,4 +1,4 @@
-import { x as Signal, y as Computed } from "../infer-BUUWMoG9.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-BUUWMoG9.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

package/dist/utilities/event-listener.test.mjs

@@ -1,8 +1,8 @@
 import { c as effectScope, m as signal, s as effect } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
 import { on } from "./event-listener.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 //#region src/utilities/event-listener.test.ts
 afterEach(() => {
 	document.body.innerHTML = "";

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

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

package/dist/utilities/focus-within.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createFocusWithin } from "./focus-within.mjs";
 //#region src/utilities/focus-within.test.ts
 afterEach(() => {

package/dist/utilities/hover.d.mts

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

package/dist/utilities/hover.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createHover } from "./hover.mjs";
 //#region src/utilities/hover.test.ts
 afterEach(() => {

package/dist/utilities/intersection-observer.d.mts

@@ -2,6 +2,23 @@
 /**
  * Raw `IntersectionObserver` wrapper with automatic cleanup.
  * Use `createIsInViewport` for the common boolean case.
+ *
+ * The platform default is `root: null`, which observes intersections with
+ * the **viewport** — not with `target`'s nearest scrollable ancestor. For a
+ * sentinel inside an in-page scroll container, pass `root: containerEl`
+ * explicitly; otherwise the sentinel reads as "intersecting" the viewport
+ * and fires immediately and repeatedly.
+ *
+ * @example
+ * ```ts
+ * // In-page scroll container — pass `root` so intersection is computed
+ * // against the container's scrollport, not the viewport.
+ * createIntersectionObserver(
+ *   sentinelEl,
+ *   ([entry]) => { if (entry.isIntersecting) loadMore.run(); },
+ *   { root: containerEl, rootMargin: "100px" },
+ * );
+ * ```
  */
 declare function createIntersectionObserver(target: Element, callback: IntersectionObserverCallback, options?: IntersectionObserverInit): Disposable;
 //#endregion

package/dist/utilities/intersection-observer.mjs

@@ -3,6 +3,23 @@ import { observe } from "./_observe.mjs";
 /**
 * Raw `IntersectionObserver` wrapper with automatic cleanup.
 * Use `createIsInViewport` for the common boolean case.
+*
+* The platform default is `root: null`, which observes intersections with
+* the **viewport** — not with `target`'s nearest scrollable ancestor. For a
+* sentinel inside an in-page scroll container, pass `root: containerEl`
+* explicitly; otherwise the sentinel reads as "intersecting" the viewport
+* and fires immediately and repeatedly.
+*
+* @example
+* ```ts
+* // In-page scroll container — pass `root` so intersection is computed
+* // against the container's scrollport, not the viewport.
+* createIntersectionObserver(
+*   sentinelEl,
+*   ([entry]) => { if (entry.isIntersecting) loadMore.run(); },
+*   { root: containerEl, rootMargin: "100px" },
+* );
+* ```
 */
 function createIntersectionObserver(target, callback, options) {
 	return observe(new IntersectionObserver(callback, options), (o) => {

package/dist/utilities/intersection-observer.test.mjs

@@ -1,7 +1,7 @@
 import { c as effectScope } from "../lib-CVfOddra.mjs";
 import "../signals/index.mjs";
-import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-COK1VBpH.mjs";
-import { n as vi, t as globalExpect } from "../test.BmQO5GaM-C8YqghE0.mjs";
+import { f as it, l as describe, o as afterEach } from "../benchmark.CX_oY03V-CsUg-gW0.mjs";
+import { n as vi, t as globalExpect } from "../test.BmQO5GaM-ZC2MPXQb.mjs";
 import { createIntersectionObserver } from "./intersection-observer.mjs";
 //#region src/utilities/intersection-observer.test.ts
 afterEach(() => {

package/dist/utilities/interval.d.mts

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