elements-kit 0.27.9 → 0.27.10

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

@@ -2,19 +2,14 @@ import { r as MaybeReactive, t as Computed } from "../index-BSAqa0-0.mjs";
 
 //#region src/utilities/element-rect.d.ts
 /**
- * Observes the full bounding rect of `target` and returns it as ONE reactive
- * `DOMRect`, so every field a reader sees was measured at the same instant.
- * Change sources: a `ResizeObserver` for size, plus capture-phase `scroll` and
- * window `resize` for position — a `ResizeObserver` stays silent when an
- * element merely moves.
+ * `target`'s bounding rect as one reactive `DOMRect`, every field from the
+ * same instant. Refreshed by a `ResizeObserver` (size) and capture-phase
+ * `scroll` / window `resize` (position), never on read. Size is the observer's
+ * border box, not the rect's: a transform scales the rect and never fires the
+ * observer.
  *
- * `target` may be a getter, in which case the observer follows it: the previous
- * element is unobserved before the new one is observed. The returned computed
- * keeps its identity across a swap, so consumers never rebind.
- *
- * The value is CACHED, not measured per read: it refreshes when one of the
- * sources above fires, not at the moment you read it. Dispose explicitly, or
- * let the enclosing scope do it.
+ * A reactive `target` is followed, keeping the computed's identity. Dispose
+ * explicitly, or let the enclosing scope do it.
  */
 declare function createElementRect(target: MaybeReactive<Element>): Computed<DOMRect> & Disposable;
 //#endregion

package/dist/utilities/element-rect.mjs

@@ -3,30 +3,38 @@ import { resolve } from "../signals/index.mjs";
 import { createResizeObserver } from "./resize-observer.mjs";
 //#region src/utilities/element-rect.ts
 /**
-* Observes the full bounding rect of `target` and returns it as ONE reactive
-* `DOMRect`, so every field a reader sees was measured at the same instant.
-* Change sources: a `ResizeObserver` for size, plus capture-phase `scroll` and
-* window `resize` for position — a `ResizeObserver` stays silent when an
-* element merely moves.
+* `target`'s bounding rect as one reactive `DOMRect`, every field from the
+* same instant. Refreshed by a `ResizeObserver` (size) and capture-phase
+* `scroll` / window `resize` (position), never on read. Size is the observer's
+* border box, not the rect's: a transform scales the rect and never fires the
+* observer.
 *
-* `target` may be a getter, in which case the observer follows it: the previous
-* element is unobserved before the new one is observed. The returned computed
-* keeps its identity across a swap, so consumers never rebind.
-*
-* The value is CACHED, not measured per read: it refreshes when one of the
-* sources above fires, not at the moment you read it. Dispose explicitly, or
-* let the enclosing scope do it.
+* A reactive `target` is followed, keeping the computed's identity. Dispose
+* explicitly, or let the enclosing scope do it.
 */
 function createElementRect(target) {
-	const cache = signal(resolve(target).getBoundingClientRect());
+	let size;
+	const read = (el) => {
+		const r = el.getBoundingClientRect();
+		return size ? new DOMRect(r.x, r.y, size.width, size.height) : r;
+	};
+	const cache = signal(read(resolve(target)));
 	const updateRect = (el) => {
-		cache(el.getBoundingClientRect());
+		cache(read(el));
 	};
 	const stop = effectScope(() => {
 		effect(() => {
 			const el = resolve(target);
+			size = void 0;
 			createResizeObserver(el, (entries) => {
-				for (const entry of entries) updateRect(entry.target);
+				for (const entry of entries) {
+					const box = entry.borderBoxSize?.[0];
+					if (box) size = {
+						width: box.inlineSize,
+						height: box.blockSize
+					};
+					updateRect(entry.target);
+				}
 			});
 			const remeasure = () => updateRect(el);
 			window.addEventListener("scroll", remeasure, {

package/package.json

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