elements-kit 0.22.0 → 0.22.1

package/README.md

@@ -52,7 +52,7 @@ ElementsKit is a library of reactive primitives, not a framework. Each piece is
 
 - **Designed for the AI age.** Code is cheap; maintenance still isn't. Primitives compose into higher-level blocks. Swap one block at a time instead of maintaining long lines of code.
 
-- **Bundler-friendly.** Every primitive is its own subpath — `elements-kit/signals`, `elements-kit/utilities/*`, `elements-kit/integrations/*`. Import only what you need.
+- **Bundler-friendly.** Every primitive is its own subpath — `elements-kit/signals`, `elements-kit/utilities/*`, `elements-kit/ui/*`, `elements-kit/integrations/*`. Import only what you need.
 
 ## Packages
 
@@ -73,6 +73,7 @@ Every feature is a separate subpath export — import only what you use.
 | `elements-kit/integrations/react` | `useSignal`, `useScope` React bridge hooks |
 | `elements-kit/integrations/astro` | `elementsKit()` Astro integration — elements-kit components as server-rendered, hydrated islands *(experimental)* |
 | `elements-kit/utilities/*` | Reactive browser-API utilities — see [src/utilities/README.md](src/utilities/README.md) |
+| `elements-kit/ui/*` | Accessible UI component styles (CSS) + an optional base theme (`elements-kit/ui/styles.css`); plus the `otp-input` custom element and `overlay` positioning/interaction behaviors. Catalog in [src/ui/README.md](src/ui/README.md) |
 
 ## Signals
 
@@ -340,7 +341,7 @@ 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`).
+Reactive state getters: `.state` (`"idle" | "pending" | "fulfilled" | "rejected"` — `idle` before the first run, so `.pending` is `false` until you trigger one), `.value`, `.reason`, `.result`, `.pending`, `.raw` (the underlying `ComputedPromise`).
 
 One-shot mutation (no tracking):
 

package/dist/await.mjs

@@ -22,7 +22,7 @@ function Await(props) {
 	if (awaitables.length === 0) return children;
 	if (effectsInert()) return promise(Promise.all(awaitables).then(() => () => children));
 	const fallback = props.fallback;
-	const pending = () => awaitables.some((a) => a.state === "pending");
+	const pending = () => awaitables.some((a) => a.state !== "fulfilled" && a.state !== "rejected");
 	const region = () => pending() ? read(fallback) : children;
 	region[ASYNC_REGION] = {
 		ids: 1 + fromChildren.length,

package/dist/environment-CTAGxqz_.d.mts

@@ -0,0 +1,19 @@
+//#region src/utilities/environment.d.ts
+/** `true` when running in a browser (both `window` and `document` exist). */
+declare const isBrowser: boolean;
+/**
+ * `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.
+ */
+declare const HTMLElementBase: typeof HTMLElement;
+/** A shared `Disposable` whose `Symbol.dispose` is a no-op — useful as a safe default. */
+declare const noopDisposable: Disposable;
+//#endregion
+export { isBrowser as n, noopDisposable as r, HTMLElementBase as t };

package/dist/hydrate/index.mjs

@@ -1,2 +1,2 @@
-import { t as hydrate } from "../hydrate-CHomBRY9.mjs";
+import { t as hydrate } from "../hydrate-DvWdnV-e.mjs";
 export { hydrate };

package/dist/{hydrate-CHomBRY9.mjs → hydrate-DvWdnV-e.mjs}

@@ -158,7 +158,7 @@ function claimAsync(cur, p, om) {
 	}
 	const slot = claimSlot(cur, om);
 	effect(() => {
-		if (p.state === "pending") return;
+		if (p.state !== "fulfilled" && p.state !== "rejected") return;
 		slot.set(resolveChild(p.result));
 	});
 	onCleanup(() => slot.clear());

package/dist/integrations/astro-client.mjs

@@ -1,6 +1,6 @@
 import { t as createElement } from "../element-Di0PYFX1.mjs";
 import { render } from "../render.mjs";
-import { t as hydrate } from "../hydrate-CHomBRY9.mjs";
+import { t as hydrate } from "../hydrate-DvWdnV-e.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
 //#region src/integrations/astro-client.ts
 /**

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-CTAGxqz_.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/async.d.mts

@@ -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/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-CTAGxqz_.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",