elements-kit 0.21.0 → 0.22.1

package/dist/ui/styles/unset.css

@@ -1,211 +1,213 @@
-.unset:where(body, blockquote, dl, dd, figure, p) {
-  margin: 0;
-}
-
-.unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
-  font: unset;
-}
-
-.unset:where(h1, h2, h3, h4, h5, h6) {
-  font: unset;
-  margin: 0;
-}
-
-.unset:where(a) {
-  all: unset;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
-  all: unset;
-  text-indent: initial;
-  -webkit-tap-highlight-color: transparent;
-  font-style: normal;
-  font-weight: normal;
-  display: inline-block;
-}
-
-.unset:where(label) {
-  -webkit-tap-highlight-color: transparent;
-}
-
-.unset:where(dialog, [popover]) {
-  box-sizing: border-box;
-  background: none;
-  border: 0;
-  outline: none;
-  max-width: none;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  inset: auto;
-  overflow: visible;
-}
-
-.unset:where(select) {
-  text-align: start;
-  font-style: normal;
-  font-weight: normal;
-}
-
-.unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
-  all: unset;
-  text-align: start;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  text-indent: initial;
-  -webkit-tap-highlight-color: transparent;
-  cursor: text;
-  white-space: pre-wrap;
-  font-style: normal;
-  font-weight: normal;
-  display: block;
-}
-
-.unset:where(:focus) {
-  outline: none;
-}
-
-.unset::placeholder {
-  color: unset;
-  opacity: unset;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.unset:where(table) {
-  all: unset;
-  text-indent: initial;
-  display: table;
-}
-
-.unset:where(caption) {
-  text-align: inherit;
-}
-
-.unset:where(td) {
-  padding: 0;
-}
-
-.unset:where(th) {
-  font-weight: unset;
-  text-align: inherit;
-  padding: 0;
-}
-
-.unset:where(abbr, acronym) {
-  text-decoration: none;
-}
-
-.unset:where(canvas, object, picture, summary) {
-  display: block;
-}
-
-.unset:where(del, s) {
-  -webkit-text-decoration: unset;
-  text-decoration: unset;
-}
-
-.unset:where(fieldset, hr) {
-  all: unset;
-  display: block;
-}
-
-.unset:where(legend) {
-  cursor: default;
-  border: none;
-  padding: 0;
-}
-
-.unset:where(li) {
-  text-align: unset;
-  display: block;
-}
-
-.unset:where(ol, ul) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.unset:where(iframe) {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  border: none;
-  width: stretch;
-  display: block;
-}
-
-.unset:where(ins, u) {
-  text-decoration: none;
-}
-
-.unset:where(img) {
-  max-width: 100%;
-  display: block;
-}
-
-.unset:where(svg) {
-  flex-shrink: 0;
-  max-width: 100%;
-  display: block;
-}
-
-.unset:where(mark) {
-  all: unset;
-}
-
-.unset:where(pre) {
-  font: unset;
-  margin: unset;
-}
-
-.unset:where(q):before, .unset:where(q):after {
-  content: "";
-}
-
-.unset:where(sub, sup) {
-  font: unset;
-  vertical-align: unset;
-}
-
-.unset:where(details) ::marker {
-  content: none;
-}
-
-.unset:where(summary)::marker {
-  content: none;
-}
-
-.unset:where(video) {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: block;
-}
-
-.unset:where(:any-link) {
-  cursor: var(--cursor-link);
-}
-
-.unset:where(button) {
-  cursor: var(--cursor-button);
-}
-
-.unset:where(:disabled, [data-disabled]) {
-  cursor: var(--cursor-disabled);
-}
-
-.unset:where(input[type="checkbox"]) {
-  cursor: var(--cursor-checkbox);
-}
-
-.unset:where(input[type="radio"]) {
-  cursor: var(--cursor-radio);
-}
-
-.unset, .unset:before, .unset:after {
-  box-sizing: border-box;
+@layer unset {
+  .unset:where(body, blockquote, dl, dd, figure, p) {
+    margin: 0;
+  }
+
+  .unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
+    font: unset;
+  }
+
+  .unset:where(h1, h2, h3, h4, h5, h6) {
+    font: unset;
+    margin: 0;
+  }
+
+  .unset:where(a) {
+    all: unset;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
+    all: unset;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    font-style: normal;
+    font-weight: normal;
+    display: inline-block;
+  }
+
+  .unset:where(label) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .unset:where(dialog, [popover]) {
+    box-sizing: border-box;
+    background: none;
+    border: 0;
+    outline: none;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    inset: auto;
+    overflow: visible;
+  }
+
+  .unset:where(select) {
+    text-align: start;
+    font-style: normal;
+    font-weight: normal;
+  }
+
+  .unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
+    all: unset;
+    text-align: start;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    cursor: text;
+    white-space: pre-wrap;
+    font-style: normal;
+    font-weight: normal;
+    display: block;
+  }
+
+  .unset:where(:focus) {
+    outline: none;
+  }
+
+  .unset::placeholder {
+    color: unset;
+    opacity: unset;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .unset:where(table) {
+    all: unset;
+    text-indent: initial;
+    display: table;
+  }
+
+  .unset:where(caption) {
+    text-align: inherit;
+  }
+
+  .unset:where(td) {
+    padding: 0;
+  }
+
+  .unset:where(th) {
+    font-weight: unset;
+    text-align: inherit;
+    padding: 0;
+  }
+
+  .unset:where(abbr, acronym) {
+    text-decoration: none;
+  }
+
+  .unset:where(canvas, object, picture, summary) {
+    display: block;
+  }
+
+  .unset:where(del, s) {
+    -webkit-text-decoration: unset;
+    text-decoration: unset;
+  }
+
+  .unset:where(fieldset, hr) {
+    all: unset;
+    display: block;
+  }
+
+  .unset:where(legend) {
+    cursor: default;
+    border: none;
+    padding: 0;
+  }
+
+  .unset:where(li) {
+    text-align: unset;
+    display: block;
+  }
+
+  .unset:where(ol, ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .unset:where(iframe) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    border: none;
+    width: stretch;
+    display: block;
+  }
+
+  .unset:where(ins, u) {
+    text-decoration: none;
+  }
+
+  .unset:where(img) {
+    max-width: 100%;
+    display: block;
+  }
+
+  .unset:where(svg) {
+    flex-shrink: 0;
+    max-width: 100%;
+    display: block;
+  }
+
+  .unset:where(mark) {
+    all: unset;
+  }
+
+  .unset:where(pre) {
+    font: unset;
+    margin: unset;
+  }
+
+  .unset:where(q):before, .unset:where(q):after {
+    content: "";
+  }
+
+  .unset:where(sub, sup) {
+    font: unset;
+    vertical-align: unset;
+  }
+
+  .unset:where(details) ::marker {
+    content: none;
+  }
+
+  .unset:where(summary)::marker {
+    content: none;
+  }
+
+  .unset:where(video) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    display: block;
+  }
+
+  .unset:where(:any-link) {
+    cursor: var(--cursor-link);
+  }
+
+  .unset:where(button) {
+    cursor: var(--cursor-button);
+  }
+
+  .unset:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+  }
+
+  .unset:where(input[type="checkbox"]) {
+    cursor: var(--cursor-checkbox);
+  }
+
+  .unset:where(input[type="radio"]) {
+    cursor: var(--cursor-radio);
+  }
+
+  .unset, .unset:before, .unset:after {
+    box-sizing: border-box;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.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 { D as CLAIM, b as MaybeReactive, j as SEED } from "../types-CUvFIgPa.mjs";
+import { b as CLAIM, p as MaybeReactive, w as SEED } from "../children-s3nFjpLA.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 { y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

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

@@ -3218,7 +3218,7 @@ function manageArtifactAttachment(attachment) {
 	if (attachment.body != null) attachment.bodyEncoding ??= "base64";
 }
 //#endregion
-//#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_yaml@2.9.0_/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.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.28.1_yaml@2.9.0_/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.js
 const NAME_WORKER_STATE = "__vitest_worker__";
 function getWorkerState() {
 	const workerState = globalThis[NAME_WORKER_STATE];
@@ -3226,7 +3226,7 @@ function getWorkerState() {
 	return workerState;
 }
 //#endregion
-//#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_yaml@2.9.0_/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.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.28.1_yaml@2.9.0_/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.js
 const benchFns = /* @__PURE__ */ new WeakMap();
 const benchOptsMap = /* @__PURE__ */ new WeakMap();
 const bench = createBenchmark(function(name, fn = noop, options = {}) {

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

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

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

@@ -1,4 +1,4 @@
-import { x as Signal } from "../types-CUvFIgPa.mjs";
+import { m as Signal } from "../children-s3nFjpLA.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-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/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal, y as Computed } from "../types-CUvFIgPa.mjs";
+import { f as Computed, m as Signal } from "../children-s3nFjpLA.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

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

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

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

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

package/dist/utilities/hover.d.mts

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

package/dist/utilities/interval.d.mts

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

package/dist/utilities/location.d.mts

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

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

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

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

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

package/dist/utilities/network.d.mts

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

package/dist/utilities/orientation.d.mts

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