@marianmeres/stuic 3.150.0 → 3.152.0

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -24,7 +24,10 @@
 </script>
 
 <script lang="ts">
-	import { innerHeight, innerWidth } from "svelte/reactivity/window";
+	import {
+		fixedContainingBlockAncestor,
+		fixedContainingBlockRect,
+	} from "../../utils/containing-block.js";
 	import { DevicePointer } from "../../utils/device-pointer.svelte.js";
 	import { waitForNextRepaint, waitForTransitionEnd } from "../../utils/paint.js";
 	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
@@ -82,12 +85,34 @@
 		isExpanded = true;
 		isExpanding = true;
 
+		// Pin the element in place: the inset values below resolve against the
+		// containing block once `position: fixed` is applied — the viewport,
+		// unless an ancestor (`transform`, `contain: layout|paint`, …)
+		// establishes one. Insets are LAYOUT px in the CB's content space, while
+		// rects are visual: divide out the accumulated ancestor scale, add the
+		// CB's scroll offsets (a fixed element whose CB is a scroll container
+		// behaves like an absolute one — it scrolls with the content), and
+		// derive bottom/right from the CB size so the top+height+bottom
+		// constraint stays exact. With no CB ancestor this reduces to the plain
+		// viewport-edge distances.
 		box = el.getBoundingClientRect();
+		const cbEl = fixedContainingBlockAncestor(el);
+		const cb = fixedContainingBlockRect(el);
+		const sx =
+			el.offsetWidth && Math.abs(box.width - el.offsetWidth) > 1
+				? box.width / el.offsetWidth
+				: 1;
+		const sy =
+			el.offsetHeight && Math.abs(box.height - el.offsetHeight) > 1
+				? box.height / el.offsetHeight
+				: 1;
+		const top = (box.top - cb.top) / sy + (cbEl?.scrollTop ?? 0);
+		const left = (box.left - cb.left) / sx + (cbEl?.scrollLeft ?? 0);
 		const pos = {
-			top: box.top,
-			bottom: (innerHeight.current ?? 0) - box.bottom,
-			left: box.left,
-			right: (innerWidth.current ?? 0) - box.right,
+			top,
+			left,
+			bottom: cb.height / sy - top - box.height / sy,
+			right: cb.width / sx - left - box.width / sx,
 		};
 
 		// <offset-x>, <offset-y>, <blur-radius>, <spread-radius>

package/dist/utils/anchor-position.d.ts

@@ -19,7 +19,11 @@
  */
 export declare function buildPositionTryFallbacks(position: string): string;
 /**
- * Pull an element fully into the viewport with a corrective `transform`.
+ * Pull an element fully into its containing block with a corrective
+ * `transform`. For a fixed element that is the viewport — unless an ancestor
+ * (`transform`, `contain: layout|paint`, …) establishes a containing block, in
+ * which case the element is clamped into that ancestor's box instead (see
+ * {@link fixedContainingBlockRect}).
  *
  * This is the backstop for CSS Anchor Positioning: `position-try` can only swap
  * between discrete declared positions and cannot slide a centered annotation
@@ -36,6 +40,11 @@ export declare function buildPositionTryFallbacks(position: string): string;
  * correction applies instantly. The caller owns the element's `transform`.
  *
  * @param el - The (anchored, position:fixed) element to clamp
- * @param margin - Minimum gap from each viewport edge, in px (default 8)
+ * @param margin - Minimum gap from each containing-block edge, in px (default 8)
+ * @param cb - Optional explicit containing-block rect (viewport/visual
+ *   coordinates). Callers that can measure the CB empirically (e.g. spotlight,
+ *   via its own `inset: 0` backdrop) pass it to stay self-consistent even
+ *   where the heuristic walker and the engine disagree (WebKit filter cases);
+ *   defaults to {@link fixedContainingBlockRect}.
  */
-export declare function clampIntoViewport(el: HTMLElement, margin?: number): void;
+export declare function clampIntoViewport(el: HTMLElement, margin?: number, cb?: DOMRectReadOnly): void;

package/dist/utils/anchor-position.js

@@ -2,6 +2,7 @@
  * Shared helpers for CSS Anchor Positioning based actions (spotlight, popover,
  * tooltip).
  */
+import { fixedContainingBlockRect } from "./containing-block.js";
 /**
  * Builds the `position-try-fallbacks` value for an anchored element at a given
  * position.
@@ -28,7 +29,11 @@ export function buildPositionTryFallbacks(position) {
     return flips;
 }
 /**
- * Pull an element fully into the viewport with a corrective `transform`.
+ * Pull an element fully into its containing block with a corrective
+ * `transform`. For a fixed element that is the viewport — unless an ancestor
+ * (`transform`, `contain: layout|paint`, …) establishes a containing block, in
+ * which case the element is clamped into that ancestor's box instead (see
+ * {@link fixedContainingBlockRect}).
  *
  * This is the backstop for CSS Anchor Positioning: `position-try` can only swap
  * between discrete declared positions and cannot slide a centered annotation
@@ -45,25 +50,40 @@ export function buildPositionTryFallbacks(position) {
  * correction applies instantly. The caller owns the element's `transform`.
  *
  * @param el - The (anchored, position:fixed) element to clamp
- * @param margin - Minimum gap from each viewport edge, in px (default 8)
+ * @param margin - Minimum gap from each containing-block edge, in px (default 8)
+ * @param cb - Optional explicit containing-block rect (viewport/visual
+ *   coordinates). Callers that can measure the CB empirically (e.g. spotlight,
+ *   via its own `inset: 0` backdrop) pass it to stay self-consistent even
+ *   where the heuristic walker and the engine disagree (WebKit filter cases);
+ *   defaults to {@link fixedContainingBlockRect}.
  */
-export function clampIntoViewport(el, margin = 8) {
+export function clampIntoViewport(el, margin = 8, cb = fixedContainingBlockRect(el)) {
     // Remove any prior correction so we measure the natural (anchored or
     // left/top) position, then recompute from scratch.
     el.style.transform = "";
     const a = el.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
     let dx = 0;
     let dy = 0;
-    if (a.left < margin)
-        dx = margin - a.left;
-    else if (a.right > vw - margin)
-        dx = vw - margin - a.right;
-    if (a.top < margin)
-        dy = margin - a.top;
-    else if (a.bottom > vh - margin)
-        dy = vh - margin - a.bottom;
-    if (dx || dy)
-        el.style.transform = `translate(${dx}px, ${dy}px)`;
+    if (a.left < cb.left + margin)
+        dx = cb.left + margin - a.left;
+    else if (a.right > cb.right - margin)
+        dx = cb.right - margin - a.right;
+    if (a.top < cb.top + margin)
+        dy = cb.top + margin - a.top;
+    else if (a.bottom > cb.bottom - margin)
+        dy = cb.bottom - margin - a.bottom;
+    if (dx || dy) {
+        // The deltas above are visual (rect) px, but the translate applies in the
+        // element's local space — inside a scaled ancestor (`transform: scale()`
+        // zoom/preview wrapper) they differ by the accumulated scale factor.
+        // offsetWidth is integer-rounded, so treat sub-pixel differences as
+        // "unscaled" (a ratio threshold would misfire on small elements).
+        const sx = el.offsetWidth && Math.abs(a.width - el.offsetWidth) > 1
+            ? a.width / el.offsetWidth
+            : 1;
+        const sy = el.offsetHeight && Math.abs(a.height - el.offsetHeight) > 1
+            ? a.height / el.offsetHeight
+            : 1;
+        el.style.transform = `translate(${dx / sx}px, ${dy / sy}px)`;
+    }
 }

package/dist/utils/containing-block.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Helpers for working with the containing block (CB) of `position: fixed`
+ * elements.
+ *
+ * A fixed-positioned element resolves against the viewport UNLESS an ancestor
+ * establishes a fixed containing block — via `transform`/`translate`/`rotate`/
+ * `scale`/`perspective`/`filter`/`backdrop-filter`, a `will-change` naming any
+ * of those, or layout/paint containment (`contain: layout|paint|strict|content`,
+ * which `content-visibility: auto` also applies). Overlay code that measures
+ * "does this fixed element fit" must therefore compare against the CB rect,
+ * not `window.innerWidth/innerHeight` — the two only coincide in the (common)
+ * no-such-ancestor case.
+ */
+/**
+ * Does this element establish a containing block for `position: fixed`
+ * descendants?
+ *
+ * Mirrors floating-ui's battle-tested `isContainingBlock`, with the same two
+ * deliberate omissions relative to a naive reading of MDN:
+ *
+ * - `filter`/`backdrop-filter` are ignored on WebKit: Safari historically does
+ *   NOT form a fixed CB from them (plain `filter` was only fixed in Safari 26).
+ *   Misdetecting a CB the browser doesn't honor would break correct layouts;
+ *   missing one merely preserves the pre-CB-aware behavior.
+ * - `container-type` is NOT checked: the CSSWG removed layout containment from
+ *   it (2024, csswg-drafts#10544) and Chrome 129+/Firefox/Safari all shipped
+ *   the change, so container queries no longer re-parent fixed descendants.
+ */
+export declare function isFixedContainingBlock(el: Element): boolean;
+/**
+ * The nearest ancestor of `el` that establishes a containing block for
+ * `position: fixed` descendants, or `null` when fixed descendants resolve
+ * against the viewport. The walk stops (returning `null`) at top-layer
+ * elements — a modal `<dialog>`, an open `[popover]`, a fullscreen element —
+ * since the top layer escapes every ancestor containing block by design
+ * (unless such an element is itself CB-forming, e.g. a transformed dialog).
+ */
+export declare function fixedContainingBlockAncestor(el: HTMLElement): HTMLElement | null;
+/**
+ * The rect that `position: fixed` descendants of `el` actually resolve
+ * against, in viewport (visual) coordinates.
+ *
+ * Walks up from `el`'s parent looking for the nearest containing-block-forming
+ * ancestor (see {@link fixedContainingBlockAncestor}) and returns its padding
+ * box — per CSS, the CB is the padding box, not the border box. When no such
+ * ancestor exists (the overwhelmingly common case) it returns the viewport
+ * rect based on `window.innerWidth/innerHeight`, byte-identical to what the
+ * pre-CB-aware code measured.
+ *
+ * Known limitation: for a ROTATED CB ancestor the returned rect is the
+ * axis-aligned bounding box of the rotated element — consumers comparing
+ * rects (overflow checks, clamps) get an approximation there. Scaled
+ * ancestors are handled (border widths are converted to visual px).
+ */
+export declare function fixedContainingBlockRect(el: HTMLElement): DOMRectReadOnly;

package/dist/utils/containing-block.js

@@ -0,0 +1,131 @@
+/**
+ * Helpers for working with the containing block (CB) of `position: fixed`
+ * elements.
+ *
+ * A fixed-positioned element resolves against the viewport UNLESS an ancestor
+ * establishes a fixed containing block — via `transform`/`translate`/`rotate`/
+ * `scale`/`perspective`/`filter`/`backdrop-filter`, a `will-change` naming any
+ * of those, or layout/paint containment (`contain: layout|paint|strict|content`,
+ * which `content-visibility: auto` also applies). Overlay code that measures
+ * "does this fixed element fit" must therefore compare against the CB rect,
+ * not `window.innerWidth/innerHeight` — the two only coincide in the (common)
+ * no-such-ancestor case.
+ */
+/**
+ * `will-change` values that force a fixed containing block: any property whose
+ * non-initial value would form one. (Same set floating-ui checks.)
+ */
+const WILL_CHANGE_RE = /transform|translate|scale|rotate|perspective|filter/;
+/** `contain` values that apply layout and/or paint containment. */
+const CONTAIN_RE = /paint|layout|strict|content/;
+let _isWebKit;
+/**
+ * WebKit (Safari) detection — the same probe floating-ui uses. Only Safari
+ * supports the `-webkit-` prefixed backdrop-filter.
+ */
+function isWebKit() {
+    if (_isWebKit === undefined) {
+        _isWebKit =
+            typeof CSS !== "undefined" &&
+                typeof CSS.supports === "function" &&
+                CSS.supports("-webkit-backdrop-filter", "none");
+    }
+    return _isWebKit;
+}
+function notNone(value) {
+    return !!value && value !== "none";
+}
+// Elements promoted to the TOP LAYER (modal dialogs via `showModal()`, open
+// `[popover]`s, fullscreen elements) escape every ancestor containing block by
+// design — their fixed descendants resolve against the viewport again. Each
+// selector is probed separately: an engine that doesn't know one would
+// otherwise reject the whole list.
+const TOP_LAYER_SELECTORS = [":modal", ":popover-open", ":fullscreen"];
+function isTopLayer(el) {
+    return TOP_LAYER_SELECTORS.some((s) => {
+        try {
+            return el.matches(s);
+        }
+        catch {
+            return false;
+        }
+    });
+}
+/**
+ * Does this element establish a containing block for `position: fixed`
+ * descendants?
+ *
+ * Mirrors floating-ui's battle-tested `isContainingBlock`, with the same two
+ * deliberate omissions relative to a naive reading of MDN:
+ *
+ * - `filter`/`backdrop-filter` are ignored on WebKit: Safari historically does
+ *   NOT form a fixed CB from them (plain `filter` was only fixed in Safari 26).
+ *   Misdetecting a CB the browser doesn't honor would break correct layouts;
+ *   missing one merely preserves the pre-CB-aware behavior.
+ * - `container-type` is NOT checked: the CSSWG removed layout containment from
+ *   it (2024, csswg-drafts#10544) and Chrome 129+/Firefox/Safari all shipped
+ *   the change, so container queries no longer re-parent fixed descendants.
+ */
+export function isFixedContainingBlock(el) {
+    const s = getComputedStyle(el);
+    return (notNone(s.transform) ||
+        notNone(s.translate) ||
+        notNone(s.rotate) ||
+        notNone(s.scale) ||
+        notNone(s.perspective) ||
+        (!isWebKit() && (notNone(s.filter) || notNone(s.backdropFilter))) ||
+        s.contentVisibility === "auto" ||
+        WILL_CHANGE_RE.test(s.willChange) ||
+        CONTAIN_RE.test(s.contain));
+}
+/**
+ * The nearest ancestor of `el` that establishes a containing block for
+ * `position: fixed` descendants, or `null` when fixed descendants resolve
+ * against the viewport. The walk stops (returning `null`) at top-layer
+ * elements — a modal `<dialog>`, an open `[popover]`, a fullscreen element —
+ * since the top layer escapes every ancestor containing block by design
+ * (unless such an element is itself CB-forming, e.g. a transformed dialog).
+ */
+export function fixedContainingBlockAncestor(el) {
+    for (let n = el.parentElement; n; n = n.parentElement) {
+        if (isFixedContainingBlock(n))
+            return n;
+        if (isTopLayer(n))
+            return null;
+    }
+    return null;
+}
+/**
+ * The rect that `position: fixed` descendants of `el` actually resolve
+ * against, in viewport (visual) coordinates.
+ *
+ * Walks up from `el`'s parent looking for the nearest containing-block-forming
+ * ancestor (see {@link fixedContainingBlockAncestor}) and returns its padding
+ * box — per CSS, the CB is the padding box, not the border box. When no such
+ * ancestor exists (the overwhelmingly common case) it returns the viewport
+ * rect based on `window.innerWidth/innerHeight`, byte-identical to what the
+ * pre-CB-aware code measured.
+ *
+ * Known limitation: for a ROTATED CB ancestor the returned rect is the
+ * axis-aligned bounding box of the rotated element — consumers comparing
+ * rects (overflow checks, clamps) get an approximation there. Scaled
+ * ancestors are handled (border widths are converted to visual px).
+ */
+export function fixedContainingBlockRect(el) {
+    const n = fixedContainingBlockAncestor(el);
+    if (n) {
+        const s = getComputedStyle(n);
+        const r = n.getBoundingClientRect();
+        // computed border widths are layout px; the rect is visual (post-
+        // transform) px — convert via the ancestor's accumulated scale so the
+        // inset is correct inside scaled wrappers too
+        const sx = n.offsetWidth ? r.width / n.offsetWidth : 1;
+        const sy = n.offsetHeight ? r.height / n.offsetHeight : 1;
+        const bl = (parseFloat(s.borderLeftWidth) || 0) * sx;
+        const bt = (parseFloat(s.borderTopWidth) || 0) * sy;
+        const br = (parseFloat(s.borderRightWidth) || 0) * sx;
+        const bb = (parseFloat(s.borderBottomWidth) || 0) * sy;
+        return new DOMRectReadOnly(r.left + bl, r.top + bt, r.width - bl - br, r.height - bt - bb);
+    }
+    return new DOMRectReadOnly(0, 0, window.innerWidth, window.innerHeight);
+}

package/dist/utils/overlay-container.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared bits for overlay actions (`popover`, `spotlight`, `dimBehind`) that
+ * can portal their DOM into a consumer-provided container instead of
+ * `document.body`.
+ */
+/**
+ * The `container` option shape: a concrete element, or a lazy factory (useful
+ * when the element does not exist yet at action-setup time). A factory
+ * returning `null` means "use the default".
+ */
+export type OverlayContainerOption = HTMLElement | (() => HTMLElement | null);
+/**
+ * Resolve a `container` option to an element, or `null` when unset (callers
+ * then fall back to their default — typically `document.body`).
+ */
+export declare function resolveContainerOption(option: OverlayContainerOption | undefined | null): HTMLElement | null;

package/dist/utils/overlay-container.js

@@ -0,0 +1,12 @@
+/**
+ * Shared bits for overlay actions (`popover`, `spotlight`, `dimBehind`) that
+ * can portal their DOM into a consumer-provided container instead of
+ * `document.body`.
+ */
+/**
+ * Resolve a `container` option to an element, or `null` when unset (callers
+ * then fall back to their default — typically `document.body`).
+ */
+export function resolveContainerOption(option) {
+    return (typeof option === "function" ? option() : option) ?? null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.150.0",
+	"version": "3.152.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -136,15 +136,15 @@
 		"@codemirror/view": "^6.43.8",
 		"@eslint/js": "^9.39.5",
 		"@marianmeres/random-human-readable": "^1.10.2",
-		"@milkdown/core": "^7.22.0",
-		"@milkdown/ctx": "^7.22.0",
-		"@milkdown/plugin-history": "^7.22.0",
-		"@milkdown/plugin-listener": "^7.22.0",
-		"@milkdown/preset-commonmark": "^7.22.0",
-		"@milkdown/preset-gfm": "^7.22.0",
-		"@milkdown/prose": "^7.22.0",
-		"@milkdown/transformer": "^7.22.0",
-		"@milkdown/utils": "^7.22.0",
+		"@milkdown/core": "^7.22.1",
+		"@milkdown/ctx": "^7.22.1",
+		"@milkdown/plugin-history": "^7.22.1",
+		"@milkdown/plugin-listener": "^7.22.1",
+		"@milkdown/preset-commonmark": "^7.22.1",
+		"@milkdown/preset-gfm": "^7.22.1",
+		"@milkdown/prose": "^7.22.1",
+		"@milkdown/transformer": "^7.22.1",
+		"@milkdown/utils": "^7.22.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.70.2",
 		"@sveltejs/package": "^2.5.8",
@@ -162,8 +162,8 @@
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.23",
-		"svelte": "^5.56.8",
-		"svelte-check": "^4.7.5",
+		"svelte": "^5.56.9",
+		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"tsx": "^4.23.12",
 		"typescript": "^5.9.3",