elements-kit 0.22.0 → 0.23.0

package/dist/signals/index.mjs

@@ -75,42 +75,48 @@ function reactive(source) {
 	};
 }
 /**
-* Resolve a {@link MaybeReactive} to its current value. Calls the getter
-* when reactive; returns the value as-is when static.
+* Resolve a {@link MaybeReactive} to its current value. Calls the getter when
+* reactive (a `signal` or `computed`); returns the value as-is otherwise — an
+* unbranded function is a value, not a source, so a callback survives intact.
+*
+* This is how a function component reads a prop it declared `MaybeReactive`:
+* the runtime hands props over exactly as the caller wrote them, so the value
+* may be either form. Reading inside an effect or a JSX getter subscribes.
 *
 * @example
 * ```ts
-* resolve(5);              // 5
-* resolve(() => count());  // current count value
+* resolve(5);            // 5
+* resolve(count);        // current count value — signal
+* resolve(props.label);  // current value, whichever form the caller passed
+* resolve(() => 5);      // the function itself — unbranded, so not a source
 * ```
 */
 function resolve(value) {
 	return isReactive(value) ? value() : value;
 }
+const COMPUTED_PROPS = Symbol.for("elements-kit.computed-props");
 /**
-* Turn a reactive-props object into a bag of per-key getters. Callers may
-* pass values or reactive sources (`signal`, `computed`); reading
-* `props.name()` inside an effect or JSX getter subscribes to whatever
-* drives it. Static values become stable thunks, signals and computed pass
-* through unchanged — so identity is preserved (`props.name === props.name`).
+* Turn props into a bag of per-key getters, so a body reads one shape no matter
+* which form the caller passed. Opt-in: the JSX runtime hands function
+* components their props untouched.
+*
+* Every key is callable, including one the caller omitted. A getter is always
+* truthy, so defaults go on the call: `props.excited() ?? "…"`. Read a bag by
+* calling the key — {@link resolve} is for raw props.
 *
-* The JSX runtime auto-applies this to function-component props — call
-* directly only for non-JSX call sites or nested prop bags.
+* Function props are the limit: a prop taking arguments is rejected, and a
+* zero-arg one types as its return value. Read those off the raw props.
 *
 * @example
 * ```ts
-* import { resolveProps } from "elements-kit/signals";
-* import { signal } from "elements-kit/signals";
-*
 * const count = signal(0);
-* const props = resolveProps({ count, label: "n" });
+* const props = computedProps({ count, label: "n" });
 * props.count();   // 0 — subscribes to count
 * props.label();   // "n"
 * ```
 */
-const RESOLVED_PROPS = Symbol.for("elements-kit.resolved-props");
-function resolveProps(raw) {
-	if (raw[RESOLVED_PROPS]) return raw;
+function computedProps(raw) {
+	if (raw[COMPUTED_PROPS]) return raw;
 	const ownKeys = Reflect.ownKeys(raw);
 	const ownKeySet = new Set(ownKeys);
 	const cache = /* @__PURE__ */ new Map();
@@ -124,7 +130,11 @@ function resolveProps(raw) {
 		return getter;
 	};
 	return new Proxy(raw, {
-		get: (_target, key) => key === RESOLVED_PROPS ? true : get(key),
+		get: (target, key, receiver) => {
+			if (key === COMPUTED_PROPS) return true;
+			if (!ownKeySet.has(key) && (typeof key === "symbol" || key in target || key === "toJSON")) return Reflect.get(target, key, receiver);
+			return get(key);
+		},
 		has: (_target, key) => ownKeySet.has(key),
 		ownKeys: () => ownKeys,
 		getOwnPropertyDescriptor: (_target, key) => ownKeySet.has(key) ? {
@@ -136,4 +146,4 @@ function resolveProps(raw) {
 	});
 }
 //#endregion
-export { CLAIM, COMPUTED, EFFECT, EFFECT_SCOPE, SEED, SIGNAL, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };
+export { CLAIM, COMPUTED, EFFECT, EFFECT_SCOPE, SEED, SIGNAL, batch, computed, computedProps, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/ui/otp-input/index.d.mts

@@ -1,4 +1,5 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-DILeh3-s.mjs";
+import { t as HTMLElementBase } from "../../environment-Fg46vL6e.mjs";
 
 //#region src/ui/otp-input/otp-input.d.ts
 /**
@@ -30,7 +31,7 @@ import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-DILeh3
  * </x-otp-input>
  * ```
  */
-declare class XOtpInput extends HTMLElement {
+declare class XOtpInput extends HTMLElementBase {
   #private;
   static formAssociated: boolean;
   static [ATTRIBUTES]: {
@@ -82,7 +83,7 @@ declare global {
  * `<x-otp-input>` paints its character and active / caret / disabled state by
  * index; all styling lives in the companion CSS.
  */
-declare class XOtpSlot extends HTMLElement {
+declare class XOtpSlot extends HTMLElementBase {
   static [ATTRIBUTES]: {
     index: AttrChangeHandler<XOtpSlot>;
   };
@@ -102,7 +103,7 @@ declare global {
  * `<x-otp-slot>`s into one attached group. All layout lives in CSS; this only
  * applies a `group` role so the visual grouping is exposed to assistive tech.
  */
-declare class XOtpGroup extends HTMLElement {
+declare class XOtpGroup extends HTMLElementBase {
   connectedCallback(): void;
 }
 declare global {
@@ -118,7 +119,7 @@ declare global {
  * `<x-otp-separator>` — decorative divider authored between OTP groups (e.g. a
  * dash between a 3-3 split). Purely visual: `aria-hidden`, glyph drawn in CSS.
  */
-declare class XOtpSeparator extends HTMLElement {
+declare class XOtpSeparator extends HTMLElementBase {
   connectedCallback(): void;
 }
 declare global {

package/dist/ui/otp-input/index.mjs

@@ -3,7 +3,7 @@ import { l as computed, u as effect, x as signal } from "../../lib-DYypKhxk.mjs"
 import "../../signals/index.mjs";
 import { on } from "../../utilities/event-listener.mjs";
 import { render } from "../../render.mjs";
-import { isBrowser } from "../../utilities/environment.mjs";
+import { HTMLElementBase, isBrowser } from "../../utilities/environment.mjs";
 //#region src/ui/otp-input/otp-input.shadow.css?inline
 var otp_input_shadow_default = ".x-otp-input__field {\n  color: #0000;\n  caret-color: #0000;\n  width: 100%;\n  height: 100%;\n  font: inherit;\n  letter-spacing: inherit;\n  pointer-events: auto;\n  background: none;\n  border: 0;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.x-otp-input__field::selection {\n  color: #0000;\n  background-color: #0000;\n}\n";
 //#endregion
@@ -43,7 +43,7 @@ SHADOW_SHEET?.replaceSync(otp_input_shadow_default);
 * </x-otp-input>
 * ```
 */
-var XOtpInput = class XOtpInput extends HTMLElement {
+var XOtpInput = class XOtpInput extends HTMLElementBase {
 	static formAssociated = true;
 	static [ATTRIBUTES] = {
 		value(value) {
@@ -293,7 +293,7 @@ if (isBrowser && !customElements.get("x-otp-input")) customElements.define("x-ot
 * `<x-otp-input>` paints its character and active / caret / disabled state by
 * index; all styling lives in the companion CSS.
 */
-var XOtpSlot = class extends HTMLElement {
+var XOtpSlot = class extends HTMLElementBase {
 	connectedCallback() {
 		this.setAttribute("aria-hidden", "true");
 	}
@@ -306,7 +306,7 @@ if (isBrowser && !customElements.get("x-otp-slot")) customElements.define("x-otp
 * `<x-otp-slot>`s into one attached group. All layout lives in CSS; this only
 * applies a `group` role so the visual grouping is exposed to assistive tech.
 */
-var XOtpGroup = class extends HTMLElement {
+var XOtpGroup = class extends HTMLElementBase {
 	connectedCallback() {
 		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
 	}
@@ -318,7 +318,7 @@ if (isBrowser && !customElements.get("x-otp-group")) customElements.define("x-ot
 * `<x-otp-separator>` — decorative divider authored between OTP groups (e.g. a
 * dash between a 3-3 split). Purely visual: `aria-hidden`, glyph drawn in CSS.
 */
-var XOtpSeparator = class extends HTMLElement {
+var XOtpSeparator = class extends HTMLElementBase {
 	connectedCallback() {
 		this.setAttribute("aria-hidden", "true");
 	}

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

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.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 CLAIM, p as MaybeReactive, w as SEED } from "../children-s3nFjpLA.mjs";
+import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-BR8XVkck.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts
@@ -38,7 +38,7 @@ declare class Async<TInput = undefined, TOutput = unknown> {
   set fn(fn: MaybeReactive<Fn<TInput, TOutput>>);
   get raw(): ComputedPromise<TOutput | undefined>;
   get pending(): boolean;
-  get state(): "pending" | "fulfilled" | "rejected";
+  get state(): "idle" | "pending" | "fulfilled" | "rejected";
   get value(): TOutput | undefined;
   get reason(): unknown;
   get result(): unknown;

package/dist/utilities/async.mjs

@@ -9,6 +9,7 @@ function flushDeferredAsyncRuns() {
 	deferredRuns.clear();
 	for (const run of runs) run();
 }
+const IDLE = promise(() => {});
 /**
 * Reactive wrapper around an async function. Exposes the current run as
 * reactive signals (`state`, `value`, `reason`, `result`, `pending`) and
@@ -44,15 +45,16 @@ var Async = class {
 	set fn(fn) {
 		this.#fn(resolve(fn));
 	}
-	#current = signal(promise(() => {}));
+	#current = signal(IDLE);
 	get raw() {
 		return this.#current();
 	}
 	get pending() {
-		return this.raw.state === "pending";
+		return this.state === "pending";
 	}
 	get state() {
-		return this.raw.state;
+		const current = this.#current();
+		return current === IDLE ? "idle" : current.state;
 	}
 	get value() {
 		return this.raw.value;
@@ -77,7 +79,12 @@ var Async = class {
 	* `ReactivePromise`. See `ReactivePromise[SEED]`.
 	*/
 	[SEED](value) {
-		const seed = this.raw[SEED];
+		let current = this.#current();
+		if (current === IDLE) {
+			current = promise(() => {});
+			this.#current(current);
+		}
+		const seed = current[SEED];
 		seed?.(value);
 	}
 	/**
@@ -89,7 +96,8 @@ var Async = class {
 		const pendingRun = deferredRuns.get(this);
 		deferredRuns.delete(this);
 		if (record) {
-			if (untracked(() => this.state) === "pending") this[SEED](record.value);
+			const state = untracked(() => this.state);
+			if (state !== "fulfilled" && state !== "rejected") this[SEED](record.value);
 			return;
 		}
 		pendingRun?.();

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

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

@@ -1,4 +1,4 @@
-import { m as Signal } from "../children-s3nFjpLA.mjs";
+import { i as Signal } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/environment.d.mts

@@ -1,7 +1,2 @@
-//#region src/utilities/environment.d.ts
-/** `true` when running in a browser (both `window` and `document` exist). */
-declare const isBrowser: boolean;
-/** A shared `Disposable` whose `Symbol.dispose` is a no-op — useful as a safe default. */
-declare const noopDisposable: Disposable;
-//#endregion
-export { isBrowser, noopDisposable };
+import { n as isBrowser, r as noopDisposable, t as HTMLElementBase } from "../environment-Fg46vL6e.mjs";
+export { HTMLElementBase, isBrowser, noopDisposable };

package/dist/utilities/environment.mjs

@@ -1,7 +1,19 @@
 //#region src/utilities/environment.ts
 /** `true` when running in a browser (both `window` and `document` exist). */
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+/**
+* `HTMLElement` in the browser; an empty stand-in on the server.
+*
+* A custom-element class evaluates its `extends` clause at module load, but
+* `HTMLElement` is undefined in Node — so importing an element module during
+* SSR (e.g. an Astro `client:load` island) throws `HTMLElement is not defined`
+* before any `isBrowser` guard can run. Elements are never *constructed* on the
+* server (the streaming renderer emits plain tags), so a stub base is enough to
+* let the class definition load; the guarded `customElements.define` still only
+* registers in a real browser.
+*/
+const HTMLElementBase = isBrowser ? HTMLElement : class {};
 /** A shared `Disposable` whose `Symbol.dispose` is a no-op — useful as a safe default. */
 const noopDisposable = { [Symbol.dispose]() {} };
 //#endregion
-export { isBrowser, noopDisposable };
+export { HTMLElementBase, isBrowser, noopDisposable };

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

@@ -1,4 +1,4 @@
-import { f as Computed, m as Signal } from "../children-s3nFjpLA.mjs";
+import { i as Signal, t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/focus-within.d.ts
 /**

package/dist/utilities/hover.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/hover.d.ts
 /**

package/dist/utilities/interval.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/interval.d.ts
 type IntervalResult = {

package/dist/utilities/location.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/location.d.ts
 type LocationResult = {

package/dist/utilities/media-devices.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/media-devices.d.ts
 /**

package/dist/utilities/media-player.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed, m as Signal } from "../children-s3nFjpLA.mjs";
+import { i as Signal, t as Computed } from "../index-BR8XVkck.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 { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/media-query.d.ts
 /**

package/dist/utilities/network.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/network.d.ts
 /**

package/dist/utilities/orientation.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/orientation.d.ts
 type OrientationResult = {

package/dist/utilities/previous.d.mts

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

package/dist/utilities/promise.d.mts

@@ -1,4 +1,4 @@
-import { b as CLAIM, f as Computed, w as SEED } from "../children-s3nFjpLA.mjs";
+import { m as SEED, t as Computed, u as CLAIM } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/promise.d.ts
 /**

package/dist/utilities/routing.d.mts

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

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

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

package/dist/utilities/storage.d.mts

@@ -1,4 +1,4 @@
-import { m as Signal } from "../children-s3nFjpLA.mjs";
+import { i as Signal } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/storage.d.ts
 type StorageOptions<T> = {

package/dist/utilities/throttled.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/throttled.d.ts
 /**

package/dist/utilities/timeout.d.mts

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/timeout.d.ts
 type TimeoutResult = {

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

@@ -1,4 +1,4 @@
-import { f as Computed } from "../children-s3nFjpLA.mjs";
+import { t as Computed } from "../index-BR8XVkck.mjs";
 
 //#region src/utilities/window-focus.d.ts
 /**

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "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",