elements-kit 0.0.15 → 0.0.16

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="docs/public/og.svg" alt="ElementsKit" width="600" />
+</p>
+
 # ElementsKit
 
 **Universal reactive primitives for the web.** Signals, JSX, and custom elements that work anywhere — standalone, inside React, Vue, or any framework, or as the foundation of your own component model.
@@ -33,6 +37,33 @@ customElements.define("x-counter", CounterElement);
 
 ---
 
+## Packages
+
+Every feature is a separate subpath export — import only what you use.
+
+| Entry | Purpose |
+|-------|---------|
+| `elements-kit` | `For` and core re-exports |
+| `elements-kit/signals` | `signal`, `computed`, `effect`, `effectScope`, `batch`, `untracked`, `trigger`, `onCleanup`, `@reactive` |
+| `elements-kit/attributes` | `@attributes` decorator + `ATTRIBUTES` symbol for custom elements |
+| `elements-kit/slot` | `Slot` class — comment-marker DOM regions |
+| `elements-kit/jsx-runtime` | JSX factory (configure via `jsxImportSource`) |
+| `elements-kit/integrations/react` | `useSignal`, `useScope` React bridge hooks |
+| `elements-kit/utilities/*` | Reactive browser-API utilities — see [src/utilities/README.md](src/utilities/README.md) |
+
+## Repository
+
+- [src/](src/) — library source ([signals](src/signals/), [jsx-runtime](src/jsx-runtime/), [utilities](src/utilities/), [integrations](src/integrations/))
+- [docs/](docs/) — Astro + Starlight documentation site
+- [example/](example/) — Vite sandbox
+- [ARCHITECTURE.md](ARCHITECTURE.md) — how the library works (reactive model, JSX, custom elements, cleanup)
+- [CONTRIBUTING.md](CONTRIBUTING.md) — quick start, quality bars, versioning, PR checklist
+- [DOCS.md](DOCS.md) — doc-authoring rules
+- [AGENTS.md](AGENTS.md) — agent navigation map
+- [src/utilities/README.md](src/utilities/README.md) — utilities catalog and dependency graph
+
+---
+
 ## Why ElementsKit
 
 Modern UI frameworks solve reactivity and rendering together — you adopt the whole system or none of it. ElementsKit separates the two:
@@ -43,6 +74,16 @@ Modern UI frameworks solve reactivity and rendering together — you adopt the w
 
 Use one piece, or all three. Integrate with React for complex UIs. Build web components that work anywhere HTML does.
 
+### Primitives first, composable abstractions
+
+Small primitives, one job each, typed interfaces at every boundary. Abstraction is assembled, not inherited — compose upward from `signal` → `sync(fromEvent(...), ...)` → `<For>` and stop at the level your feature needs. Designed for AI agents as much as for humans: each step is verifiable on its own, and there's no framework-specific mental model to learn before writing the first line.
+
+- **No prop matrices.** No single-system components with forty flags where legal combinations aren't obvious until you read the source.
+- **No hidden coupling.** Blocks meet at their types; invariants don't leak across layers.
+- **Close to the platform.** `promise` wraps a native `Promise`. JSX compiles to `document.createElement`. Custom elements are `HTMLElement` subclasses. You already know the underlying shape.
+- **Minimal surface.** `async` has no cache, no query client, no query/mutation split. If you need those, compose them on top — don't inherit them by default.
+- **Swap, don't rewrite.** Replace one block (`throttled` → `debounced`) without touching the ones around it.
+
 ---
 
 ## Installation
@@ -247,53 +288,120 @@ The same `cart` store drives custom elements, React trees, and plain scripts —
 
 ## Utilities
 
-Pre-built signal factories for common browser APIs:
+Pre-built reactive wrappers around common browser APIs. Each utility lives at its own subpath (`elements-kit/utilities/<name>`) and ships as its own entry — you pay only for what you import. Full catalog in [src/utilities/README.md](src/utilities/README.md).
+
+`createMediaQuery` wraps `window.matchMedia` into a reactive signal — reads inside effects or computeds re-run automatically when the media query result changes.
+
+```tsx
+import { effect } from "elements-kit/signals";
+import { createMediaQuery } from "elements-kit/utilities/media-query";
+
+const isDark = createMediaQuery("(prefers-color-scheme: dark)");
+const isMobile = createMediaQuery("(max-width: 640px)");
+
+effect(() => document.documentElement.classList.toggle("dark", isDark()));
+```
+
+Singletons like `online`, `windowFocused`, `activeElement`, and `currentLocation` are pre-instantiated — import and read them directly inside any reactive context.
+
+```ts
+import { effect } from "elements-kit/signals";
+import { online } from "elements-kit/utilities/network";
+import { windowFocused } from "elements-kit/utilities/window-focus";
+
+effect(() => console.log("online:", online(), "focused:", windowFocused()));
+```
+
+---
+
+## Async & Promise
+
+Two primitives convert imperative async work into reactive state: `promise` (minimal, any `Promise` → reactive state) and `async` (full controller with start/stop/run and optional reactive input).
+
+### `promise`
+
+Wraps an async function (or raw `Promise`) into a `ComputedPromise<T>` — awaitable **and** callable as a reactive value. Exposes `.state`, `.value`, `.reason`, `.result` as reactive reads.
+
+```ts
+import { promise } from "elements-kit/utilities/promise";
+import { effect } from "elements-kit/signals";
+
+const user = promise(() => fetch("/api/user").then((r) => r.json()));
+
+effect(() => {
+  if (user.state === "pending")   console.log("loading…");
+  if (user.state === "fulfilled") console.log("user:", user.value);
+  if (user.state === "rejected")  console.log("error:", user.reason);
+});
+
+await user; // awaitable
+```
+
+`ReactivePromise` is the underlying class — use it when you want the reactive state getters without the `Computed` callable interface.
+
+### `async`
+
+A controller around `promise`. The async function may be a plain function or a `MaybeReactive<Fn>` (so the body itself can re-read signals and rerun on change).
+
+```ts
+import { async } from "elements-kit/utilities/async";
+
+const op = async(() => fetch("/api/items").then((r) => r.json()));
+
+op.start();   // run with reactive tracking — reruns when tracked signals change
+await op;     // awaitable (delegates to .then/.catch/.finally via .raw)
+op.stop();    // halt reruns + fire registered cleanup
+```
+
+Reactive state getters: `.state`, `.value`, `.reason`, `.result`, `.pending`, `.raw` (the underlying `ComputedPromise`).
+
+One-shot mutation (no tracking):
+
+```ts
+const del = async((id: number) =>
+  fetch(`/api/items/${id}`, { method: "DELETE" }).then((r) => r.json()),
+);
+
+await del.run(42);
+```
+
+`Async` implements `Symbol.dispose`, so `using` auto-stops on scope exit:
+
+```ts
+{
+  using poll = async(() => fetch("/api/poll").then((r) => r.json())).start();
+  await poll;
+} // poll.stop() here
+```
+
+### Composing with retry, online, storage
+
+`async`'s reactive body composes with other utilities. Below: fetch a todo by `id()`, retry on failure with exponential backoff, pause while offline (returning the stale cached value), and refetch when the tab regains focus.
 
 ```ts
 import { signal, effect, untracked, onCleanup } from "elements-kit/signals";
-import { createMediaQuery } from "elements-kit/utilities/media-query";
 import { async } from "elements-kit/utilities/async";
 import { retry } from "elements-kit/utilities/retry";
 import { online } from "elements-kit/utilities/network";
 import { windowFocused } from "elements-kit/utilities/window-focus";
-import { storage } from "elements-kit/utilities/storage";
+import { createLocalStorage } from "elements-kit/utilities/storage";
 
 const id = signal(1);
-const cache = storage("todos"); // persists across reloads, used as initial value
+const cache = createLocalStorage<unknown>("todo-cache", null);
 
-// Query — retries on failure, refetches when back online or tab regains focus
 const fetchTodo = async(() => {
-  if (!online()) return untracked(cache); // pause while offline, return stale value
-  windowFocused();                        // refetch on tab focus
+  if (!online()) return untracked(cache);   // pause while offline
+  windowFocused();                          // refetch on tab focus
   return retry(() => {
     const controller = new AbortController();
-    onCleanup(() => controller.abort());  // abort before each retry
+    onCleanup(() => controller.abort());    // abort before each retry
     return fetch(`/api/todos/${id()}`, { signal: controller.signal })
       .then((r) => r.json())
-      .then(cache);                       // update cache on success
-  }, 3, (n) => n * 500)();               // 0 ms, 500 ms, 1000 ms backoff
+      .then((value) => (cache(value), value));
+  }, 3, (n) => n * 500)();                  // 0 ms, 500 ms, 1000 ms backoff
 }).start();
 
 effect(() => console.log(fetchTodo.state, fetchTodo.value));
-
-// Mutation — run once, no reactive tracking
-const deleteTodo = async((todoId: number) =>
-  fetch(`/api/todos/${todoId}`, { method: "DELETE" }).then((r) => r.json()),
-);
-
-const result = await deleteTodo.run(42);
-```
-
-`createMediaQuery` wraps `window.matchMedia` into a reactive signal — reads inside effects or computeds re-run automatically when the media query result changes.
-
-```tsx
-import { effect } from "elements-kit/signals";
-import { createMediaQuery } from "elements-kit/utilities/media-query";
-
-const isDark = createMediaQuery("(prefers-color-scheme: dark)");
-const isMobile = createMediaQuery("(max-width: 640px)");
-
-effect(() => document.documentElement.classList.toggle("dark", isDark()));
 ```
 
 ---
@@ -303,7 +411,7 @@ effect(() => document.documentElement.classList.toggle("dark", isDark()));
 Reconciles a reactive array into the DOM. Each item renders once per key — no full re-renders on reorder, add, or remove.
 
 ```tsx
-import { For } from "elements-kit";
+import { For } from "elements-kit/for";
 
 <ul>
   <For each={todos} by={(todo) => todo.id}>
@@ -362,7 +470,6 @@ class MyElement extends HTMLElement {
 ## Roadmap
 
 - [ ] Context — share state across a subtree without prop drilling
-- [ ] Async signal — `signal.from(promise)`, `signal.from(observable)`
 - [ ] UI library — pre-built reactive components built on ElementsKit primitives
 - [ ] More framework integrations (Vue, Solid, Angular, …)
 - [ ] Tutorial — building a full app from scratch

package/dist/attributes-Dtn68R1u.d.mts

@@ -0,0 +1,94 @@
+//#region src/attributes.d.ts
+interface AttrChangeHandler<T> {
+  (this: T, value: string | null, oldValue?: string | null): void;
+}
+declare const ATTRIBUTES: unique symbol;
+/**
+ * Dispatches an attribute change to the matching handler in the static `attributes` map,
+ * walking the prototype chain for inherited handlers.
+ * @example
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES]: Attributes<MyElement> = {
+ *     count(value) {
+ *       this.#count = Number(value);
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(MyElement);
+ *
+ *   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+ *     dispatchAttrChange.call(this, name, oldValue, newValue);
+ *   }
+ * }
+ * ```
+ */
+declare function dispatchAttrChange<T extends {
+  constructor: {
+    [ATTRIBUTES]: Record<string, AttrChangeHandler<T>>;
+  };
+}>(this: T, name: string, oldValue: string | null, newValue: string | null): void;
+type Attributes<T> = Record<string, AttrChangeHandler<T>>;
+/**
+ * Returns a deduplicated array of all observed attribute names for a custom element class and its ancestors.
+ *
+ * Call after defining static `[ATTRIBUTES]`, and assign to static `observedAttributes`.
+ *
+ * Example:
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES]: Attributes<MyElement> = {
+ *     count(value) {
+ *       this.#count = Number(value);
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(MyElement);
+ * }
+ *
+ * class ChildElement extends MyElement {
+ *   static [ATTRIBUTES]: Attributes<ChildElement> = {
+ *     bar(value) {
+ *       // ...
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(ChildElement);
+ * }
+ * // ChildElement.observedAttributes will include both 'count' and 'bar', deduplicated.
+ * ```
+ *
+ * @param cls The custom element class constructor
+ * @returns Array of unique attribute names to observe
+ */
+declare function observedAttributes(cls: {
+  [ATTRIBUTES]?: Record<string, unknown>;
+  observedAttributes?: string[];
+  prototype: unknown;
+}): string[];
+/**
+ * A class decorator that automatically wires up `observedAttributes` and `attributeChangedCallback`
+ * from a static `[ATTRIBUTES]` map.
+ *
+ * The `this` type inside attribute handlers is automatically inferred from the decorated class.
+ *
+ * @example
+ * ```ts
+ * @attributes
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES] = {
+ *     count(this: MyElement, value: string | null) {
+ *       this.count = Number(value);
+ *     },
+ *   };
+ * }
+ * ```
+ */
+type AttributeTarget<T extends abstract new (...args: any[]) => HTMLElement> = T & {
+  [ATTRIBUTES]: Record<string, AttrChangeHandler<InstanceType<T>>>;
+};
+type AttributeDecorated<T extends abstract new (...args: any[]) => HTMLElement> = T & (new (...args: any[]) => InstanceType<T> & {
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}) & {
+  observedAttributes: string[];
+};
+declare function attributes<T extends abstract new (...args: any[]) => HTMLElement>(target: AttributeTarget<T>, context: ClassDecoratorContext<T>): AttributeDecorated<T>;
+//#endregion
+export { Attributes as a, observedAttributes as c, AttributeTarget as i, AttrChangeHandler as n, attributes as o, AttributeDecorated as r, dispatchAttrChange as s, ATTRIBUTES as t };

package/dist/attributes.d.mts

@@ -1,94 +1,2 @@
-//#region src/attributes.d.ts
-interface AttrChangeHandler<T> {
-  (this: T, value: string | null, oldValue?: string | null): void;
-}
-declare const ATTRIBUTES: unique symbol;
-/**
- * Dispatches an attribute change to the matching handler in the static `attributes` map,
- * walking the prototype chain for inherited handlers.
- * @example
- * ```ts
- * class MyElement extends HTMLElement {
- *   static [ATTRIBUTES]: Attributes<MyElement> = {
- *     count(value) {
- *       this.#count = Number(value);
- *     },
- *   };
- *   static observedAttributes: string[] = observedAttributes(MyElement);
- *
- *   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
- *     dispatchAttrChange.call(this, name, oldValue, newValue);
- *   }
- * }
- * ```
- */
-declare function dispatchAttrChange<T extends {
-  constructor: {
-    [ATTRIBUTES]: Record<string, AttrChangeHandler<T>>;
-  };
-}>(this: T, name: string, oldValue: string | null, newValue: string | null): void;
-type Attributes<T> = Record<string, AttrChangeHandler<T>>;
-/**
- * Returns a deduplicated array of all observed attribute names for a custom element class and its ancestors.
- *
- * Call after defining static `[ATTRIBUTES]`, and assign to static `observedAttributes`.
- *
- * Example:
- * ```ts
- * class MyElement extends HTMLElement {
- *   static [ATTRIBUTES]: Attributes<MyElement> = {
- *     count(value) {
- *       this.#count = Number(value);
- *     },
- *   };
- *   static observedAttributes: string[] = observedAttributes(MyElement);
- * }
- *
- * class ChildElement extends MyElement {
- *   static [ATTRIBUTES]: Attributes<ChildElement> = {
- *     bar(value) {
- *       // ...
- *     },
- *   };
- *   static observedAttributes: string[] = observedAttributes(ChildElement);
- * }
- * // ChildElement.observedAttributes will include both 'count' and 'bar', deduplicated.
- * ```
- *
- * @param cls The custom element class constructor
- * @returns Array of unique attribute names to observe
- */
-declare function observedAttributes(cls: {
-  [ATTRIBUTES]?: Record<string, unknown>;
-  observedAttributes?: string[];
-  prototype: unknown;
-}): string[];
-/**
- * A class decorator that automatically wires up `observedAttributes` and `attributeChangedCallback`
- * from a static `[ATTRIBUTES]` map.
- *
- * The `this` type inside attribute handlers is automatically inferred from the decorated class.
- *
- * @example
- * ```ts
- * @attributes
- * class MyElement extends HTMLElement {
- *   static [ATTRIBUTES] = {
- *     count(this: MyElement, value: string | null) {
- *       this.count = Number(value);
- *     },
- *   };
- * }
- * ```
- */
-type AttributeTarget<T extends abstract new (...args: any[]) => HTMLElement> = T & {
-  [ATTRIBUTES]: Record<string, AttrChangeHandler<InstanceType<T>>>;
-};
-type AttributeDecorated<T extends abstract new (...args: any[]) => HTMLElement> = T & (new (...args: any[]) => InstanceType<T> & {
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-}) & {
-  observedAttributes: string[];
-};
-declare function attributes<T extends abstract new (...args: any[]) => HTMLElement>(target: AttributeTarget<T>, context: ClassDecoratorContext<T>): AttributeDecorated<T>;
-//#endregion
+import { a as Attributes, c as observedAttributes, i as AttributeTarget, n as AttrChangeHandler, o as attributes, r as AttributeDecorated, s as dispatchAttrChange, t as ATTRIBUTES } from "./attributes-Dtn68R1u.mjs";
 export { ATTRIBUTES, AttrChangeHandler, AttributeDecorated, AttributeTarget, Attributes, attributes, dispatchAttrChange, observedAttributes };

package/dist/custom-elements.d.mts

@@ -0,0 +1,74 @@
+import { n as defineElement, t as CustomElementRegistry } from "./define-CjbTZ3VG.mjs";
+
+//#region src/custom-elements.d.ts
+/**
+ * Runs `setup` inside a fresh `effectScope` and returns both its result and
+ * the scope's dispose handle.
+ *
+ * Use this wherever you need to run reactive code with an explicit lifetime
+ * outside the JSX element flow — most commonly inside a custom element's
+ * `connectedCallback`. `onCleanup`, nested `effect`s and any other
+ * scope-bound registrations made in `setup` are owned by the returned
+ * `dispose`.
+ *
+ * `untracked` detaches the new scope from any enclosing effect so it isn't
+ * torn down when that effect re-runs — its lifetime is solely the caller's
+ * responsibility.
+ *
+ * @example
+ * ```ts
+ * class Clock extends HTMLElement {
+ *   #dispose?: () => void;
+ *
+ *   connectedCallback() {
+ *     const { dispose } = renderScope(() => {
+ *       const id = setInterval(() => (this.textContent = String(Date.now())), 1000);
+ *       onCleanup(() => clearInterval(id));
+ *     });
+ *     this.#dispose = dispose;
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.#dispose?.();
+ *     this.#dispose = undefined;
+ *   }
+ * }
+ * ```
+ */
+declare function renderScope<T>(setup: () => T): {
+  result: T;
+  dispose: () => void;
+};
+/**
+ * Runs `setup` inside an `effectScope` tied to `el`'s connected lifetime.
+ *
+ * Call from `connectedCallback`. Effects, `onCleanup` registrations, and
+ * reactive reads inside `setup` belong to this scope. Pair with
+ * {@link disconnectedScope} from `disconnectedCallback` to dispose.
+ *
+ * Safe to call more than once (e.g. if the element is reconnected after
+ * disconnection): the previous scope is disposed first.
+ *
+ * @example
+ * ```ts
+ * class Clock extends HTMLElement {
+ *   connectedCallback() {
+ *     connectedScope(this, () => {
+ *       const id = setInterval(() => this.textContent = String(Date.now()), 1000);
+ *       onCleanup(() => clearInterval(id));
+ *     });
+ *   }
+ *   disconnectedCallback() {
+ *     disconnectedScope(this);
+ *   }
+ * }
+ * ```
+ */
+declare function connectedScope(el: HTMLElement, setup: () => void): void;
+/**
+ * Disposes the scope previously created by {@link connectedScope} for `el`.
+ * No-op if there is no active scope.
+ */
+declare function disconnectedScope(el: HTMLElement): void;
+//#endregion
+export { type CustomElementRegistry, connectedScope, defineElement, disconnectedScope, renderScope };

package/dist/custom-elements.mjs

@@ -0,0 +1,100 @@
+import { b as untracked, f as effectScope } from "./signals-J8dK_rA4.mjs";
+//#region src/define.ts
+/**
+* Register a custom element with the browser and return its class.
+* Pair with a module augmentation of `CustomElementRegistry` to get typed JSX.
+*/
+function defineElement(tag, cls, options) {
+	customElements.define(tag, cls, options);
+	return cls;
+}
+//#endregion
+//#region src/custom-elements.ts
+/**
+* Runs `setup` inside a fresh `effectScope` and returns both its result and
+* the scope's dispose handle.
+*
+* Use this wherever you need to run reactive code with an explicit lifetime
+* outside the JSX element flow — most commonly inside a custom element's
+* `connectedCallback`. `onCleanup`, nested `effect`s and any other
+* scope-bound registrations made in `setup` are owned by the returned
+* `dispose`.
+*
+* `untracked` detaches the new scope from any enclosing effect so it isn't
+* torn down when that effect re-runs — its lifetime is solely the caller's
+* responsibility.
+*
+* @example
+* ```ts
+* class Clock extends HTMLElement {
+*   #dispose?: () => void;
+*
+*   connectedCallback() {
+*     const { dispose } = renderScope(() => {
+*       const id = setInterval(() => (this.textContent = String(Date.now())), 1000);
+*       onCleanup(() => clearInterval(id));
+*     });
+*     this.#dispose = dispose;
+*   }
+*
+*   disconnectedCallback() {
+*     this.#dispose?.();
+*     this.#dispose = undefined;
+*   }
+* }
+* ```
+*/
+function renderScope(setup) {
+	let result;
+	let dispose;
+	untracked(() => {
+		dispose = effectScope(() => {
+			result = setup();
+		});
+	});
+	return {
+		result,
+		dispose
+	};
+}
+const scopes = /* @__PURE__ */ new WeakMap();
+/**
+* Runs `setup` inside an `effectScope` tied to `el`'s connected lifetime.
+*
+* Call from `connectedCallback`. Effects, `onCleanup` registrations, and
+* reactive reads inside `setup` belong to this scope. Pair with
+* {@link disconnectedScope} from `disconnectedCallback` to dispose.
+*
+* Safe to call more than once (e.g. if the element is reconnected after
+* disconnection): the previous scope is disposed first.
+*
+* @example
+* ```ts
+* class Clock extends HTMLElement {
+*   connectedCallback() {
+*     connectedScope(this, () => {
+*       const id = setInterval(() => this.textContent = String(Date.now()), 1000);
+*       onCleanup(() => clearInterval(id));
+*     });
+*   }
+*   disconnectedCallback() {
+*     disconnectedScope(this);
+*   }
+* }
+* ```
+*/
+function connectedScope(el, setup) {
+	scopes.get(el)?.();
+	const { dispose } = renderScope(setup);
+	scopes.set(el, dispose);
+}
+/**
+* Disposes the scope previously created by {@link connectedScope} for `el`.
+* No-op if there is no active scope.
+*/
+function disconnectedScope(el) {
+	scopes.get(el)?.();
+	scopes.delete(el);
+}
+//#endregion
+export { connectedScope, defineElement, disconnectedScope, renderScope };

package/dist/define-CjbTZ3VG.d.mts

@@ -0,0 +1,23 @@
+//#region src/define.d.ts
+/**
+ * Registry of custom-element tags to their constructors.
+ * Users augment this interface to add typed JSX support for their elements:
+ *
+ * @example
+ * ```ts
+ * declare module "elements-kit" {
+ *   interface CustomElementRegistry {
+ *     "x-range": typeof XRange;
+ *   }
+ * }
+ * ```
+ */
+interface CustomElementRegistry {}
+type AnyCtor = CustomElementConstructor;
+/**
+ * Register a custom element with the browser and return its class.
+ * Pair with a module augmentation of `CustomElementRegistry` to get typed JSX.
+ */
+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/{element-ChF24-2z.mjs → element-CGVy_8TW.mjs}

@@ -1,6 +1,7 @@
-import { d as effectScope, g as onCleanup, t as isReactive, u as effect, y as untracked } from "./signals-BHmWX6ox.mjs";
+import { _ as onCleanup, b as untracked, d as effect, f as effectScope, t as isReactive } from "./signals-J8dK_rA4.mjs";
 import "./polyfill-B1lNNcum.mjs";
-import { i as resolveNode$1, n as Slot, r as Slots, t as $slots } from "./slot-Cydy7-0L.mjs";
+import { on } from "./utilities/event-listener.mjs";
+import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-Kb61AcgW.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -40,21 +41,21 @@ const ReservedNameSpaces = new Set([
 //#endregion
 //#region src/jsx-runtime/children.ts
 function hasSlots(node) {
-	return $slots in 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;
+		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);
+		if (Slots.has(node[SLOTS], slotName)) {
+			applySlot(node[SLOTS][slotName], value);
 			return;
 		}
 	}
@@ -126,7 +127,7 @@ function applyProps(node, props) {
 		if (isReactive(value)) {
 			if (isEventKey(key)) {
 				effect(() => {
-					onCleanup(setEvent(node, key, value()));
+					on(node, eventName(key), value());
 				});
 				continue;
 			}
@@ -134,7 +135,7 @@ function applyProps(node, props) {
 			continue;
 		}
 		if (isEventKey(key)) {
-			onCleanup(setEvent(node, key, value));
+			on(node, eventName(key), value);
 			continue;
 		}
 		setProp(node, key, value);
@@ -210,10 +211,8 @@ function setAttribute(el, key, value) {
 function isEventKey(key) {
 	return key.startsWith("on:") || key.length > 2 && key.startsWith("on") && key[2] >= "A" && key[2] <= "Z";
 }
-function setEvent(el, key, handler) {
-	const event = key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
-	el.addEventListener(event, handler);
-	return () => el.removeEventListener(event, handler);
+function eventName(key) {
+	return key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
 }
 //#endregion
 //#region src/jsx-runtime/element.ts