elements-kit 0.27.8 → 0.27.10

package/dist/ui/overlay/index.d.mts

@@ -144,6 +144,23 @@ type Inset = PhysicalInset | "inset-block-start" | "inset-block-end" | "inset-in
  * box's reactive geometry, so calling it inside an `effect` tracks the anchor.
  */
 declare function anchor_length(box: Box & Partial<IDirection>, inset: Inset, side: BlockSide | InlineSide | number): number;
+/** Keywords naming the block axis. */
+type BlockKeyword = "top" | "bottom" | "span-top" | "span-bottom" | "block-start" | "block-end" | "span-block-start" | "span-block-end" | "y-start" | "y-end" | "span-y-start" | "span-y-end";
+/** Keywords naming the inline axis. */
+type InlineKeyword = "left" | "right" | "span-left" | "span-right" | "inline-start" | "inline-end" | "span-inline-start" | "span-inline-end" | "x-start" | "x-end" | "span-x-start" | "span-x-end";
+/** Keywords naming no axis — each takes whichever one is still free. */
+type AmbiguousKeyword = "center" | "span-all" | "start" | "end" | "span-start" | "span-end" | "self-start" | "self-end" | "span-self-start" | "span-self-end";
+type AreaKeyword = BlockKeyword | InlineKeyword | AmbiguousKeyword;
+/** Two keywords, in either order — `position-area` is unordered. */
+type Unordered<A extends string, B extends string> = `${A} ${B}` | `${B} ${A}`;
+/**
+ * A valid `position-area` value: one keyword, or two naming different axes.
+ * Two of the same explicit axis (`top bottom`, `left right`) is not a value —
+ * {@link resolveArea} resolves anything invalid to the `block-end` fallback,
+ * so catching it here is the difference between a compile error and a menu
+ * that quietly opens on the wrong side.
+ */
+type PositionAreaValue = AreaKeyword | Unordered<BlockKeyword, InlineKeyword> | Unordered<BlockKeyword, AmbiguousKeyword> | Unordered<InlineKeyword, AmbiguousKeyword> | `${AmbiguousKeyword} ${AmbiguousKeyword}`;
 /**
  * The reactive `position-area` property: the region of the viewport an
  * overlay anchored to `anchor` may occupy, with the region's default
@@ -167,7 +184,7 @@ declare function anchor_length(box: Box & Partial<IDirection>, inset: Inset, sid
 declare class PositionArea implements Region, ReadonlyBox {
   #private;
   readonly anchor: ReadonlyBox;
-  constructor(anchor: ReadonlyBox, area: string);
+  constructor(anchor: ReadonlyBox, area: PositionAreaValue);
   get x(): number;
   get y(): number;
   get w(): number;
@@ -266,4 +283,4 @@ declare class Motion implements IMotion {
   abort(initial?: number): void;
 }
 //#endregion
-export { type Align, type Axis, type BlockSide, type Boundary, ElementBox, gestures_d_exports as Gestures, type IDirection, type IMotion, type InlineSide, type Inset, Motion, MutableRegion, OverlayBox, type PhysicalInset, type Pin, type Placement, PositionArea, type ReadonlyBox, type Region, WINDOW_BOX, WindowBox, anchor_length };
+export { type Align, type Axis, type BlockSide, type Boundary, ElementBox, gestures_d_exports as Gestures, type IDirection, type IMotion, type InlineSide, type Inset, Motion, MutableRegion, OverlayBox, type PhysicalInset, type Pin, type Placement, PositionArea, type PositionAreaValue, type ReadonlyBox, type Region, WINDOW_BOX, WindowBox, anchor_length };

package/dist/ui/overlay/index.mjs

@@ -181,7 +181,8 @@ const A = (region, self = false) => ({
 	physical: false,
 	self
 });
-/** The full `position-area` keyword grammar → axis + physical region. */
+/** The full `position-area` keyword grammar → axis + physical region. The
+* key type forces this table and {@link PositionAreaValue} to stay in step. */
 const KEYWORDS = {
 	top: B("start", true),
 	bottom: B("end", true),

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.8",
+  "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",