elements-kit 0.18.2 → 0.20.0

package/dist/ui/overlay/overlay.css

@@ -0,0 +1,332 @@
+.x-overlay {
+  color: var(--neutral-12);
+}
+
+.x-overlay:where([open])::backdrop {
+  background: var(--overlay-backdrop, var(--color-overlay));
+}
+
+.x-overlay > .x-card {
+  contain: none;
+  touch-action: pan-y;
+  position: static;
+  overflow-y: auto;
+}
+
+:where(.x-overlay:not([data-material-background], [data-material-background] .x-overlay)) {
+  --color-material: var(--color-material-solid);
+  --backdrop-filter-material: none;
+}
+
+.x-overlay:where([data-resize], [data-draggable]):before, .x-overlay:where([data-resize], [data-draggable]):after {
+  content: "";
+  z-index: 1;
+  pointer-events: none;
+  position: absolute;
+}
+
+.x-overlay:where([data-draggable]:not([data-resize^="end-"])):after {
+  width: var(--space-3);
+  height: var(--space-3);
+  border-radius: var(--overlay-grip-radius, var(--radius-5));
+  background-color: var(--neutral-a8);
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+}
+
+.x-overlay:where([data-draggable][data-resize="start-start"]):after {
+  inset-inline-start: auto;
+  inset-inline-end: var(--space-2);
+}
+
+.x-overlay:where([data-draggable][data-resize^="end-"]):after {
+  top: var(--space-2);
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-overlay:where([data-resize^="block-"]):before {
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-overlay:where([data-resize="block-start"]):before {
+  top: var(--space-2);
+}
+
+.x-overlay:where([data-resize="block-end"]):before {
+  bottom: var(--space-2);
+}
+
+.x-overlay:where([data-resize^="inline-"]):before {
+  width: var(--space-1);
+  height: var(--space-8);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-block: auto;
+  inset-block: 0;
+}
+
+.x-overlay:where([data-resize="inline-start"]):before {
+  inset-inline-start: var(--space-2);
+}
+
+.x-overlay:where([data-resize="inline-end"]):before {
+  inset-inline-end: var(--space-2);
+}
+
+.x-overlay:where([data-resize^="start-"], [data-resize^="end-"]):before {
+  --_grip-r: max(calc(var(--overlay-grip-radius, var(--radius-5)) - var(--space-1)),
+    0px);
+  --_cap: min(var(--space-1), calc(var(--_grip-r) * 9999));
+  --_gx: 1;
+  --_gy: 1;
+  content: "";
+  z-index: 1;
+  pointer-events: none;
+  width: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  height: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  border: var(--space-1) solid var(--neutral-a8);
+  border-bottom-right-radius: var(--_grip-r);
+  transform: scale(var(--_gx), var(--_gy));
+  -webkit-mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side,
+        #000 calc(100% - .5px),
+        transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  position: absolute;
+}
+
+.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):before {
+  inset-inline-end: var(--space-1);
+}
+
+.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):before {
+  --_gx: -1;
+  inset-inline-start: var(--space-1);
+}
+
+.x-overlay:where([data-resize^="end-"]):before {
+  bottom: var(--space-1);
+}
+
+.x-overlay:where([data-resize^="start-"]):before {
+  top: var(--space-1);
+  --_gy: -1;
+}
+
+.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  --_gx: -1;
+}
+
+.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  --_gx: 1;
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .x-overlay {
+    transition-property: top, left, translate, width, height, opacity, scale, display;
+    transition-duration: var(--overlay-duration);
+    transition-timing-function: var(--overlay-easing);
+    transition-behavior: allow-discrete;
+  }
+
+  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]) {
+    opacity: 0;
+    scale: .97;
+  }
+
+  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @starting-style {
+    .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
+      opacity: 0;
+      scale: .97;
+    }
+  }
+
+  .x-overlay:where([data-resize="block-start"]) {
+    --_ey: 100%;
+  }
+
+  .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+    --_ey: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+      --_ey: 100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="block-end"]) {
+    --_ey: -100%;
+  }
+
+  .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+    --_ey: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+      --_ey: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-start"]) {
+    --_ex: 100%;
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+      --_ex: 100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+    --_ex: -100%;
+  }
+
+  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+      --_ex: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-end"]) {
+    --_ex: -100%;
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+      --_ex: -100%;
+    }
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+    --_ex: 100%;
+  }
+
+  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+    --_ex: 0%;
+  }
+
+  @starting-style {
+    .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
+      --_ex: 100%;
+    }
+  }
+
+  .x-overlay::backdrop {
+    opacity: 0;
+    transition-property: opacity, display;
+    transition-duration: var(--overlay-duration);
+    transition-timing-function: var(--overlay-easing);
+    transition-behavior: allow-discrete;
+  }
+
+  .x-overlay:where([open])::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    .x-overlay:where([open])::backdrop {
+      opacity: 0;
+    }
+  }
+
+  @supports (overlay: auto) {
+    .x-overlay {
+      transition-property: top, left, translate, width, height, opacity, scale, display, overlay;
+    }
+
+    .x-overlay::backdrop {
+      transition-property: opacity, display, overlay;
+    }
+  }
+}
+
+@supports selector(:has(*)) {
+  [data-overlay-deck] {
+    transform-origin: 50% 0;
+    transition-property: scale, translate, border-radius;
+    transition-duration: var(--overlay-duration, .3s);
+    transition-timing-function: var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
+  }
+
+  :root:has(.x-overlay[data-resize="block-start"][open]) [data-overlay-deck] {
+    scale: .96;
+    translate: 0 var(--space-2);
+    border-radius: var(--radius-4);
+    overflow: clip;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .x-overlay, .x-overlay::backdrop, [data-overlay-deck] {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .x-overlay:where([data-resize]):before {
+    background-color: buttontext;
+    border-color: buttontext;
+  }
+
+  .x-overlay:where([data-draggable]):after {
+    background-color: buttontext;
+  }
+}

package/dist/utilities/_observe.mjs

@@ -1,4 +1,4 @@
-import { p as onCleanup } from "../lib-Dkc7cV5F.mjs";
+import { _ as onCleanup } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/_observe.ts
 /**

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

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-B7T5hi_D.mjs";
+import { y as Computed } from "../types-ncUK9rki.mjs";
 
 //#region src/utilities/active-element.d.ts
 declare const activeElement: Computed<Element | null>;

package/dist/utilities/active-element.mjs

@@ -1,4 +1,4 @@
-import { o as computed } from "../lib-Dkc7cV5F.mjs";
+import { l as computed } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
 import { fromEvent, sync } from "./event-driven.mjs";
 import { isBrowser } from "./environment.mjs";

package/dist/utilities/async.d.mts

@@ -1,7 +1,9 @@
-import { b as MaybeReactive } from "../infer-B7T5hi_D.mjs";
+import { D as CLAIM, b as MaybeReactive, j as SEED } from "../types-ncUK9rki.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts
+/** @internal Hydrate cleanup: execute deferred runs no claim resolved. */
+declare function flushDeferredAsyncRuns(): void;
 /** Shape of the async function driven by {@link Async} / {@link async}. */
 type Fn<TInput, TOutput> = (input: TInput) => Promise<TOutput>;
 /**
@@ -43,6 +45,19 @@ declare class Async<TInput = undefined, TOutput = unknown> {
   then<TResult1 = TOutput, TResult2 = never>(onfulfilled?: ((value: TOutput | undefined) => TResult1 | PromiseLike<TResult1>) | null, onrejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null): Promise<TResult1 | TResult2>;
   catch<TResult = never>(onrejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null): Promise<TOutput | undefined | TResult>;
   finally(onfinally?: (() => void) | null): Promise<TOutput | undefined>;
+  /**
+   * @internal Hydration seeding — delegates to the current operation's
+   * `ReactivePromise`. See `ReactivePromise[SEED]`.
+   */
+  [SEED](value: unknown): void;
+  /**
+   * @internal Hydrate claim protocol. A server record seeds the state and
+   * discards any deferred run — the fetcher never executes. No record means
+   * the deferred run executes now.
+   */
+  [CLAIM](record: {
+    value: unknown;
+  } | undefined): void;
   constructor(fn: MaybeReactive<Fn<TInput, TOutput>>);
   /**
    * Runs the async function once with the given input, stopping any currently active
@@ -59,6 +74,8 @@ declare class Async<TInput = undefined, TOutput = unknown> {
    */
   start(...args: TInput extends undefined ? [] : [input: TInput]): this;
 }
+/** @internal Cross-instance-safe `Async` detection. */
+declare function isAsyncLike(value: unknown): value is Async<never, unknown>;
 /**
  * Create an {@link Async} that is also callable as a signal: invoking it
  * (with no args) reads the current `result`, so it drops into any reactive
@@ -78,4 +95,4 @@ declare class Async<TInput = undefined, TOutput = unknown> {
  */
 declare function async<TInput = any, TOutput = undefined>(fn: MaybeReactive<(input: TInput) => Promise<TOutput>>): Async<TInput, TOutput> & ((...args: any[]) => TOutput | undefined);
 //#endregion
-export { Async, Fn, async };
+export { Async, Fn, async, flushDeferredAsyncRuns, isAsyncLike };

package/dist/utilities/async.mjs

@@ -1,7 +1,14 @@
-import { g as untracked, m as signal, s as effect } from "../lib-Dkc7cV5F.mjs";
+import { C as untracked, b as shouldDeferAsyncRuns, f as effectsInert, n as CLAIM, o as SEED, u as effect, x as signal } from "../lib-DYypKhxk.mjs";
 import { resolve } from "../signals/index.mjs";
 import { promise } from "./promise.mjs";
 //#region src/utilities/async.ts
+const deferredRuns = /* @__PURE__ */ new Map();
+/** @internal Hydrate cleanup: execute deferred runs no claim resolved. */
+function flushDeferredAsyncRuns() {
+	const runs = [...deferredRuns.values()];
+	deferredRuns.clear();
+	for (const run of runs) run();
+}
 /**
 * Reactive wrapper around an async function. Exposes the current run as
 * reactive signals (`state`, `value`, `reason`, `result`, `pending`) and
@@ -65,6 +72,28 @@ var Async = class {
 	finally(onfinally) {
 		return this.raw.finally(onfinally);
 	}
+	/**
+	* @internal Hydration seeding — delegates to the current operation's
+	* `ReactivePromise`. See `ReactivePromise[SEED]`.
+	*/
+	[SEED](value) {
+		const seed = this.raw[SEED];
+		seed?.(value);
+	}
+	/**
+	* @internal Hydrate claim protocol. A server record seeds the state and
+	* discards any deferred run — the fetcher never executes. No record means
+	* the deferred run executes now.
+	*/
+	[CLAIM](record) {
+		const pendingRun = deferredRuns.get(this);
+		deferredRuns.delete(this);
+		if (record) {
+			if (untracked(() => this.state) === "pending") this[SEED](record.value);
+			return;
+		}
+		pendingRun?.();
+	}
 	constructor(fn) {
 		this.#fn(resolve(fn));
 	}
@@ -79,6 +108,14 @@ var Async = class {
 	* and register cleanup effects.
 	*/
 	run(...args) {
+		if (shouldDeferAsyncRuns()) {
+			deferredRuns.set(this, () => this.run(...args));
+			return this;
+		}
+		if (effectsInert()) {
+			untracked(() => this.#execute(...args));
+			return this;
+		}
 		this.stop();
 		this.#cleanup = effect(() => {
 			untracked(() => this.#execute(...args));
@@ -107,6 +144,13 @@ var Async = class {
 		return this;
 	}
 };
+const ASYNC_BRAND = Symbol.for("elements-kit.async");
+Object.defineProperty(Async.prototype, ASYNC_BRAND, { value: true });
+/** @internal Cross-instance-safe `Async` detection. */
+function isAsyncLike(value) {
+	if (value instanceof Async) return true;
+	return value != null && (typeof value === "object" || typeof value === "function") && value[ASYNC_BRAND] === true;
+}
 const ASYNC_KEYS = new Set([
 	"then",
 	"catch",
@@ -121,6 +165,9 @@ const ASYNC_KEYS = new Set([
 	"run",
 	"fn",
 	"raw",
+	SEED,
+	CLAIM,
+	ASYNC_BRAND,
 	Symbol.dispose
 ]);
 /**
@@ -160,4 +207,4 @@ function async(fn) {
 	});
 }
 //#endregion
-export { Async, async };
+export { Async, async, flushDeferredAsyncRuns, isAsyncLike };

package/dist/utilities/context.mjs

@@ -1,4 +1,4 @@
-import { m as signal, p as onCleanup } from "../lib-Dkc7cV5F.mjs";
+import { _ as onCleanup, x as signal } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/context.ts
 const registry = /* @__PURE__ */ new WeakMap();

package/dist/utilities/debounced.d.mts

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

package/dist/utilities/debounced.mjs

@@ -1,4 +1,4 @@
-import { m as signal, s as effect } from "../lib-Dkc7cV5F.mjs";
+import { u as effect, x as signal } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
 import { createTimeout } from "./timeout.mjs";
 //#region src/utilities/debounced.ts