@marianmeres/stuic 3.150.0 → 3.152.0

package/dist/actions/spotlight/spotlight.svelte.js

@@ -3,6 +3,7 @@ import { twMerge } from "../../utils/tw-merge.js";
 import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
 import { buildPositionTryFallbacks, clampIntoViewport, } from "../../utils/anchor-position.js";
 import { BodyScroll } from "../../utils/body-scroll-locker.js";
+import { resolveContainerOption } from "../../utils/overlay-container.js";
 import SpotlightContent from "./SpotlightContent.svelte";
 //
 const TRANSITION = 200;
@@ -85,23 +86,35 @@ const _classAnnotation = `
 	border border-(--stuic-spotlight-annotation-border)
 	z-50
 `;
+const VIEWPORT_ORIGIN = () => ({
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scaleX: 1,
+    scaleY: 1,
+});
 /**
- * Builds the clip-path value for the backdrop overlay with a rounded-rectangle hole.
+ * Builds the clip-path value for the backdrop overlay with a rounded-rectangle
+ * hole. `rect` is the target's viewport rect; `o` is the backdrop's own
+ * coordinate space (see {@link OverlayOrigin}) — clip-path coordinates are
+ * local to the backdrop element, so the hole is translated by the origin and
+ * the outer box is the backdrop's layout size.
  */
-function buildClipPath(rect, padding, borderRadius) {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const x = rect.left - padding;
-    const y = rect.top - padding;
-    const w = rect.width + padding * 2;
-    const h = rect.height + padding * 2;
+function buildClipPath(rect, padding, borderRadius, o) {
+    const ow = o.width;
+    const oh = o.height;
+    const x = (rect.left - o.left) / o.scaleX - padding;
+    const y = (rect.top - o.top) / o.scaleY - padding;
+    const w = rect.width / o.scaleX + padding * 2;
+    const h = rect.height / o.scaleY + padding * 2;
     const r = Math.min(borderRadius, w / 2, h / 2);
     if (r <= 0) {
         // Simple rectangular hole (no rounding)
-        return `polygon(evenodd, 0 0, ${vw}px 0, ${vw}px ${vh}px, 0 ${vh}px, 0 0, ${x}px ${y}px, ${x}px ${y + h}px, ${x + w}px ${y + h}px, ${x + w}px ${y}px, ${x}px ${y}px)`;
+        return `polygon(evenodd, 0 0, ${ow}px 0, ${ow}px ${oh}px, 0 ${oh}px, 0 0, ${x}px ${y}px, ${x}px ${y + h}px, ${x + w}px ${y + h}px, ${x + w}px ${y}px, ${x}px ${y}px)`;
     }
     // Rounded rectangular hole using SVG path syntax
-    return `path(evenodd, "M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z M ${x + r} ${y} L ${x + w - r} ${y} A ${r} ${r} 0 0 1 ${x + w} ${y + r} L ${x + w} ${y + h - r} A ${r} ${r} 0 0 1 ${x + w - r} ${y + h} L ${x + r} ${y + h} A ${r} ${r} 0 0 1 ${x} ${y + h - r} L ${x} ${y + r} A ${r} ${r} 0 0 1 ${x + r} ${y} Z")`;
+    return `path(evenodd, "M 0 0 L ${ow} 0 L ${ow} ${oh} L 0 ${oh} Z M ${x + r} ${y} L ${x + w - r} ${y} A ${r} ${r} 0 0 1 ${x + w} ${y + r} L ${x + w} ${y + h - r} A ${r} ${r} 0 0 1 ${x + w - r} ${y + h} L ${x + r} ${y + h} A ${r} ${r} 0 0 1 ${x} ${y + h - r} L ${x} ${y + r} A ${r} ${r} 0 0 1 ${x + r} ${y} Z")`;
 }
 /**
  * Checks if content is simple (string/html) vs complex (component/snippet).
@@ -216,6 +229,35 @@ export function spotlight(targetEl, fn) {
             hide();
         }
     }
+    /**
+     * The coordinate space the overlay's fixed elements resolve against. The
+     * backdrop is `position: fixed; inset: 0`, so its own box IS that space —
+     * the containing block's padding box when a CB-forming ancestor exists
+     * (overlay portalled into a contained/transformed shell via `container`),
+     * the viewport otherwise. Measuring it handles both with no special-casing.
+     */
+    function overlayOrigin() {
+        if (!backdropEl)
+            return VIEWPORT_ORIGIN();
+        const r = backdropEl.getBoundingClientRect();
+        // offsetWidth/Height are layout-space; the rect is visual — the ratio is
+        // the accumulated ancestor scale. offset* are integer-rounded, so treat
+        // sub-pixel differences as "unscaled" to avoid noise on the default path.
+        const w = backdropEl.offsetWidth || r.width;
+        const h = backdropEl.offsetHeight || r.height;
+        const sx = w && Math.abs(r.width - w) > 1 ? r.width / w : 1;
+        const sy = h && Math.abs(r.height - h) > 1 ? r.height / h : 1;
+        return { left: r.left, top: r.top, width: w, height: h, scaleX: sx, scaleY: sy };
+    }
+    /** Place the invisible anchor element over the (padded) hole. */
+    function positionAnchor(rect, padding, o) {
+        if (!anchorEl)
+            return;
+        anchorEl.style.left = `${(rect.left - o.left) / o.scaleX - padding}px`;
+        anchorEl.style.top = `${(rect.top - o.top) / o.scaleY - padding}px`;
+        anchorEl.style.width = `${rect.width / o.scaleX + padding * 2}px`;
+        anchorEl.style.height = `${rect.height / o.scaleY + padding * 2}px`;
+    }
     /**
      * Update the clip-path hole position to match the current target rect.
      */
@@ -225,15 +267,11 @@ export function spotlight(targetEl, fn) {
         const rect = targetEl.getBoundingClientRect();
         const padding = currentOptions.padding ?? 8;
         const borderRadius = currentOptions.borderRadius ?? 8;
+        const o = overlayOrigin();
         debug("updateHolePosition()", rect);
-        backdropEl.style.clipPath = buildClipPath(rect, padding, borderRadius);
+        backdropEl.style.clipPath = buildClipPath(rect, padding, borderRadius, o);
         // Update the invisible anchor element position
-        if (anchorEl) {
-            anchorEl.style.left = `${rect.left - padding}px`;
-            anchorEl.style.top = `${rect.top - padding}px`;
-            anchorEl.style.width = `${rect.width + padding * 2}px`;
-            anchorEl.style.height = `${rect.height + padding * 2}px`;
-        }
+        positionAnchor(rect, padding, o);
         // Reposition / re-clamp the annotation. The fallback path recomputes its
         // base left/top here; the anchor path is re-placed by the browser. Either
         // way we re-clamp so an edge-anchored annotation stays on-screen as the
@@ -281,17 +319,21 @@ export function spotlight(targetEl, fn) {
         lastRect = null;
     }
     /**
-     * Position annotation without CSS Anchor Positioning (fallback).
+     * Position annotation without CSS Anchor Positioning (fallback). All values
+     * are expressed in the overlay's coordinate space (see {@link overlayOrigin})
+     * — for a fixed element, `left/top/right/bottom` resolve against the
+     * containing block, which is the viewport only in the un-portalled default.
      */
     function positionAnnotationFallback(rect, padding) {
         if (!annotationEl)
             return;
         const pos = currentOptions.position || "bottom";
         const offset = 8; // px fallback offset
-        const x = rect.left - padding;
-        const y = rect.top - padding;
-        const w = rect.width + padding * 2;
-        const h = rect.height + padding * 2;
+        const o = overlayOrigin();
+        const x = (rect.left - o.left) / o.scaleX - padding;
+        const y = (rect.top - o.top) / o.scaleY - padding;
+        const w = rect.width / o.scaleX + padding * 2;
+        const h = rect.height / o.scaleY + padding * 2;
         // Reset position
         annotationEl.style.left = "";
         annotationEl.style.top = "";
@@ -300,14 +342,14 @@ export function spotlight(targetEl, fn) {
         annotationEl.style.transform = "";
         if (pos.startsWith("top")) {
             annotationEl.style.left = `${x}px`;
-            annotationEl.style.bottom = `${window.innerHeight - y + offset}px`;
+            annotationEl.style.bottom = `${o.height - y + offset}px`;
         }
         else if (pos.startsWith("bottom")) {
             annotationEl.style.left = `${x}px`;
             annotationEl.style.top = `${y + h + offset}px`;
         }
         else if (pos === "left") {
-            annotationEl.style.right = `${window.innerWidth - x + offset}px`;
+            annotationEl.style.right = `${o.width - x + offset}px`;
             annotationEl.style.top = `${y}px`;
         }
         else if (pos === "right") {
@@ -328,7 +370,11 @@ export function spotlight(targetEl, fn) {
     function clampAnnotationIntoViewport() {
         if (!annotationEl || !annotationShown)
             return;
-        clampIntoViewport(annotationEl);
+        // Pass the empirically measured CB rect (the inset-0 backdrop's box) so
+        // the clamp uses the SAME coordinate space as the hole/anchor math even
+        // where the heuristic ancestor walk and the engine disagree (WebKit
+        // filter shells).
+        clampIntoViewport(annotationEl, undefined, backdropEl ? backdropEl.getBoundingClientRect() : undefined);
     }
     function renderContent() {
         if (!annotationEl || !currentOptions.content)
@@ -374,8 +420,12 @@ export function spotlight(targetEl, fn) {
         requestAnimationFrame(() => {
             if (!isVisible)
                 return; // may have been hidden in the meantime
+            const container = resolveContainerOption(currentOptions.container) ?? document.body;
             const rect = targetEl.getBoundingClientRect();
-            // 1. Create backdrop overlay
+            // 1. Create backdrop overlay. Append BEFORE building the clip-path:
+            // the hole coordinates are relative to the backdrop's own box, which
+            // is only measurable once it is in the DOM (same JS turn — nothing
+            // paints unclipped).
             backdropEl = document.createElement("div");
             backdropEl.style.cssText = `
 				position: fixed;
@@ -385,26 +435,29 @@ export function spotlight(targetEl, fn) {
 				transition-duration: ${TRANSITION}ms;
 			`;
             backdropEl.classList.add(...twMerge("stuic-spotlight-backdrop", currentOptions.classBackdrop).split(/\s/));
-            backdropEl.style.clipPath = buildClipPath(rect, padding, borderRadius);
-            document.body.appendChild(backdropEl);
+            container.appendChild(backdropEl);
+            const o = overlayOrigin();
+            backdropEl.style.clipPath = buildClipPath(rect, padding, borderRadius, o);
             // 2. Create invisible anchor element for CSS Anchor Positioning
             anchorEl = document.createElement("div");
             anchorEl.style.cssText = `
 				position: fixed;
-				left: ${rect.left - padding}px;
-				top: ${rect.top - padding}px;
-				width: ${rect.width + padding * 2}px;
-				height: ${rect.height + padding * 2}px;
 				pointer-events: none;
 				z-index: -1;
 			`;
+            positionAnchor(rect, padding, o);
             addAnchorName(anchorEl, anchorName);
-            document.body.appendChild(anchorEl);
+            container.appendChild(anchorEl);
             // 3. Create annotation element (if content provided)
             if (currentOptions.content) {
                 annotationEl = document.createElement("div");
                 annotationEl.setAttribute("role", "dialog");
                 if (isSupported) {
+                    // NOTE: keep `vw`/`vh` here — this is the ANCHORED branch, where
+                    // the element's containing block is the `position-area` region (a
+                    // slice of the CB, often much smaller), so `%` would shrink the
+                    // annotation. Overflow is handled by position-try + the CB-aware
+                    // clamp.
                     annotationEl.style.cssText = `
 						position: fixed;
 						position-anchor: ${anchorName};
@@ -420,17 +473,18 @@ export function spotlight(targetEl, fn) {
                     annotationEl.classList.add(...twMerge("stuic-spotlight-annotation", _classAnnotation, currentOptions.class).split(/\s/));
                 }
                 else {
-                    // Fallback positioning
+                    // Fallback positioning. `90%` (not `90vw`): the left/top values
+                    // are containing-block-relative, so the size must be too.
                     annotationEl.style.cssText = `
 						position: fixed;
 						transition-duration: ${TRANSITION}ms;
 						z-index: 50;
-						max-width: 90vw;
+						max-width: 90%;
 					`;
                     annotationEl.classList.add(...twMerge("stuic-spotlight-annotation-fallback", _classAnnotation, currentOptions.class).split(/\s/));
                     positionAnnotationFallback(rect, padding);
                 }
-                document.body.appendChild(annotationEl);
+                container.appendChild(annotationEl);
                 renderContent();
             }
             // 4. Lock body scroll
@@ -457,9 +511,12 @@ export function spotlight(targetEl, fn) {
             if (currentOptions.closeOnBackdropClick !== false) {
                 backdropEl.addEventListener("click", onBackdropClick);
             }
-            // 7. Watch for target position changes
+            // 7. Watch for target position changes — and for the overlay's own
+            // coordinate space changing size (the backdrop tracks its container,
+            // which resize/scroll listeners and target-rect comparison won't see)
             resizeObserver = new ResizeObserver(updateHolePosition);
             resizeObserver.observe(targetEl);
+            resizeObserver.observe(backdropEl);
             window.addEventListener("resize", updateHolePosition);
             window.addEventListener("scroll", updateHolePosition, true);
             // 8. Per-frame compare-loop to catch layout shifts (sibling collapses,
@@ -527,6 +584,7 @@ export function spotlight(targetEl, fn) {
             onHide: opts.onHide,
             debug: opts.debug,
             id: opts.id,
+            container: opts.container,
         };
         do_debug = !!opts.debug;
         // Register in global registry if id provided

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -24,8 +24,9 @@
 		classButtonPrimary?: string;
 		intentButtonCancel?: IntentColorKey;
 		intentButtonCustom?: IntentColorKey;
-		/** Intent of the primary (OK) button. Defaults to `"primary"`, except for the
-		 * `"warn"` variant, which defaults to `"destructive"`. */
+		/** Intent of the primary (OK) button. Defaults to `"primary"`, except for
+		 * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
+		 * option of the same name wins over this. */
 		intentButtonPrimary?: IntentColorKey;
 		classSpinnerBox?: string;
 		defaultIcons?: Partial<

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts

@@ -22,8 +22,9 @@ export interface Props {
     classButtonPrimary?: string;
     intentButtonCancel?: IntentColorKey;
     intentButtonCustom?: IntentColorKey;
-    /** Intent of the primary (OK) button. Defaults to `"primary"`, except for the
-     * `"warn"` variant, which defaults to `"destructive"`. */
+    /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
+     * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
+     * option of the same name wins over this. */
     intentButtonPrimary?: IntentColorKey;
     classSpinnerBox?: string;
     defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -39,8 +39,9 @@
 		classButtonPrimary?: string;
 		intentButtonCancel?: IntentColorKey;
 		intentButtonCustom?: IntentColorKey;
-		/** Intent of the primary (OK) button. Defaults to `"primary"`, except for the
-		 * `"warn"` variant, which defaults to `"destructive"`. */
+		/** Intent of the primary (OK) button. Defaults to `"primary"`, except for
+		 * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
+		 * option of the same name wins over this. */
 		intentButtonPrimary?: IntentColorKey;
 		classSpinnerBox?: string;
 		defaultIcons?: Partial<
@@ -77,12 +78,24 @@
 
 	let current = $derived(acp?.current!);
 
-	// the "warn" variant hints a destructive action, so unless explicitly configured
-	// otherwise, render the primary button accordingly
+	// Button config is layered: the dialog object's own value (most specific) wins over
+	// the component level prop - same as CmpButtonOk/Cancel/Custom below.
+
+	// The "warn" variant hints a destructive action, so unless explicitly configured
+	// otherwise, render the primary button accordingly. Not for ALERT though: its ok
+	// button only dismisses the dialog (onOk defaults to `shift`), so there is no
+	// destructive action to signal - a warning-severity *message* is not the same
+	// thing as a destructive *action*.
 	let _intentButtonPrimary = $derived(
-		intentButtonPrimary ?? (current?.variant === "warn" ? "destructive" : "primary")
+		current?.intentButtonPrimary ??
+			intentButtonPrimary ??
+			(current?.variant === "warn" && current?.type !== ALERT ? "destructive" : "primary")
 	);
 
+	let _intentButtonCancel = $derived(current?.intentButtonCancel ?? intentButtonCancel);
+
+	let _intentButtonCustom = $derived(current?.intentButtonCustom ?? intentButtonCustom);
+
 	let iconHtml = $derived.by(() => {
 		let fn = current.iconFn as any;
 		if (current.iconFn === true) {
@@ -219,8 +232,15 @@
 		{#if current.type !== ALERT}
 			<li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
 				<CmpButtonCancel
-					class={twMerge("cancel", _classButton, classButton, classButtonCancel)}
-					intent={intentButtonCancel}
+					class={twMerge(
+						"cancel",
+						_classButton,
+						classButton,
+						classButtonCancel,
+						current.classButton,
+						current.classButtonCancel
+					)}
+					intent={_intentButtonCancel}
 					disabled={isPending}
 					onclick={createOnClick("cancel", current.onCancel)}
 				>
@@ -231,8 +251,15 @@
 		{#if hasCustom}
 			<li class={twMerge(_classMenuLi, classMenuLi, classMenuLiCustom)}>
 				<CmpButtonCustom
-					class={twMerge("custom", _classButton, classButton, classButtonCustom)}
-					intent={intentButtonCustom}
+					class={twMerge(
+						"custom",
+						_classButton,
+						classButton,
+						classButtonCustom,
+						current.classButton,
+						current.classButtonCustom
+					)}
+					intent={_intentButtonCustom}
 					disabled={isPending}
 					onclick={createOnClick("custom", current.onCustom!)}
 				>
@@ -242,7 +269,14 @@
 		{/if}
 		<li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
 			<CmpButtonOk
-				class={twMerge("ok", _classButton, classButton, classButtonPrimary)}
+				class={twMerge(
+					"ok",
+					_classButton,
+					classButton,
+					classButtonPrimary,
+					current.classButton,
+					current.classButtonPrimary
+				)}
 				intent={_intentButtonPrimary}
 				disabled={isPending}
 				onclick={createOnClick("ok", current.onOk)}

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -22,8 +22,9 @@ interface Props {
     classButtonPrimary?: string;
     intentButtonCancel?: IntentColorKey;
     intentButtonCustom?: IntentColorKey;
-    /** Intent of the primary (OK) button. Defaults to `"primary"`, except for the
-     * `"warn"` variant, which defaults to `"destructive"`. */
+    /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
+     * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
+     * option of the same name wins over this. */
     intentButtonPrimary?: IntentColorKey;
     classSpinnerBox?: string;
     defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;

package/dist/components/AlertConfirmPrompt/README.md

@@ -4,23 +4,23 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ## Props
 
-| Prop                  | Type                            | Default | Description                                                                                   |
-| --------------------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
-| `acp`                 | `AlertConfirmPromptStack`       | -       | Stack instance managing the dialog queue                                                      |
-| `forceAsHtml`         | `boolean`                       | `false` | Render all content as HTML                                                                    |
-| `class`               | `string`                        | -       | CSS classes for the modal dialog                                                              |
-| `classWrap`           | `string`                        | -       | CSS for outer wrapper                                                                         |
-| `classIconBox`        | `string`                        | -       | CSS for icon container                                                                        |
-| `classTitle`          | `string`                        | -       | CSS for title text                                                                            |
-| `classContent`        | `string`                        | -       | CSS for content area                                                                          |
-| `classInput`          | `string`                        | -       | CSS for prompt input field                                                                    |
-| `classButton`         | `string`                        | -       | CSS for all buttons                                                                           |
-| `classButtonPrimary`  | `string`                        | -       | CSS for OK button                                                                             |
-| `classButtonCancel`   | `string`                        | -       | CSS for Cancel button                                                                         |
-| `intentButtonPrimary` | `IntentColorKey`                | -       | Intent of the OK button; defaults to `"primary"`, or `"destructive"` for the `"warn"` variant |
-| `intentButtonCancel`  | `IntentColorKey`                | -       | Intent of the Cancel button                                                                   |
-| `intentButtonCustom`  | `IntentColorKey`                | -       | Intent of the custom button                                                                   |
-| `defaultIcons`        | `Record<variant, () => string>` | -       | Custom icon functions per variant                                                             |
+| Prop                  | Type                            | Default | Description                                                                                                                                      |
+| --------------------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `acp`                 | `AlertConfirmPromptStack`       | -       | Stack instance managing the dialog queue                                                                                                         |
+| `forceAsHtml`         | `boolean`                       | `false` | Render all content as HTML                                                                                                                       |
+| `class`               | `string`                        | -       | CSS classes for the modal dialog                                                                                                                 |
+| `classWrap`           | `string`                        | -       | CSS for outer wrapper                                                                                                                            |
+| `classIconBox`        | `string`                        | -       | CSS for icon container                                                                                                                           |
+| `classTitle`          | `string`                        | -       | CSS for title text                                                                                                                               |
+| `classContent`        | `string`                        | -       | CSS for content area                                                                                                                             |
+| `classInput`          | `string`                        | -       | CSS for prompt input field                                                                                                                       |
+| `classButton`         | `string`                        | -       | CSS for all buttons                                                                                                                              |
+| `classButtonPrimary`  | `string`                        | -       | CSS for OK button                                                                                                                                |
+| `classButtonCancel`   | `string`                        | -       | CSS for Cancel button                                                                                                                            |
+| `intentButtonPrimary` | `IntentColorKey`                | -       | Intent of the OK button; defaults to `"primary"`, or `"destructive"` for `"warn"` confirm/prompt dialogs (a dialog option of the same name wins) |
+| `intentButtonCancel`  | `IntentColorKey`                | -       | Intent of the Cancel button                                                                                                                      |
+| `intentButtonCustom`  | `IntentColorKey`                | -       | Intent of the custom button                                                                                                                      |
+| `defaultIcons`        | `Record<variant, () => string>` | -       | Custom icon functions per variant                                                                                                                |
 
 ## AlertConfirmPromptStack API
 
@@ -42,16 +42,18 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ### Dialog Options
 
-| Option        | Type                                       | Description                                                         |
-| ------------- | ------------------------------------------ | ------------------------------------------------------------------- |
-| `title`       | `THC`                                      | Dialog title                                                        |
-| `content`     | `THC`                                      | Dialog message/content                                              |
-| `variant`     | `"info" \| "success" \| "warn" \| "error"` | Visual style (`"warn"` also renders the OK button as `destructive`) |
-| `value`       | `any`                                      | Initial value for prompt                                            |
-| `labelOk`     | `THC`                                      | Custom OK button label                                              |
-| `labelCancel` | `THC`                                      | Custom Cancel button label                                          |
-| `labelCustom` | `THC`                                      | Optional third button label                                         |
-| `onCustom`    | `(value) => void`                          | Custom button callback                                              |
+| Option                                                                        | Type                                       | Description                                                                                     |
+| ----------------------------------------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------- |
+| `title`                                                                       | `THC`                                      | Dialog title                                                                                    |
+| `content`                                                                     | `THC`                                      | Dialog message/content                                                                          |
+| `variant`                                                                     | `"info" \| "success" \| "warn" \| "error"` | Visual style (for confirm/prompt, `"warn"` also renders the OK button as `destructive`)         |
+| `value`                                                                       | `any`                                      | Initial value for prompt                                                                        |
+| `labelOk`                                                                     | `THC`                                      | Custom OK button label                                                                          |
+| `labelCancel`                                                                 | `THC`                                      | Custom Cancel button label                                                                      |
+| `labelCustom`                                                                 | `THC`                                      | Optional third button label                                                                     |
+| `onCustom`                                                                    | `(value) => void`                          | Custom button callback                                                                          |
+| `classButton`, `classButtonPrimary`, `classButtonCancel`, `classButtonCustom` | `string`                                   | Per dialog button classes, merged on top of the same named component props                      |
+| `intentButtonPrimary`, `intentButtonCancel`, `intentButtonCustom`             | `IntentColorKey`                           | Per dialog button intents, overriding the same named component props (and the `"warn"` default) |
 
 ## Usage
 

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from "svelte";
 import type { THC } from "../Thc/Thc.svelte";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
 /**
  * Types of alert/confirm/prompt dialogs.
  */
@@ -42,6 +43,13 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
     CmpButtonOk?: Component;
     CmpButtonCancel?: Component;
     CmpButtonCustom?: Component;
+    classButton?: string;
+    classButtonPrimary?: string;
+    classButtonCancel?: string;
+    classButtonCustom?: string;
+    intentButtonPrimary?: IntentColorKey;
+    intentButtonCancel?: IntentColorKey;
+    intentButtonCustom?: IntentColorKey;
 }
 /**
  * A reactive stack manager for alert, confirm, and prompt dialogs.

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -266,6 +266,7 @@
 	import Thc from "../Thc/Thc.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
+	import { fixedContainingBlockRect } from "../../utils/containing-block.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
 	import {
 		extractSearchableItems,
@@ -542,15 +543,17 @@
 			await waitForTwoRepaints();
 			if (!dropdownEl || !isOpen) return;
 
+			// Measure against the dropdown's containing block, not the viewport —
+			// an ancestor with e.g. `transform` or `contain: layout|paint` is what
+			// the fixed dropdown actually resolves (and gets clipped) against.
 			const rect = dropdownEl.getBoundingClientRect();
-			const viewportWidth = window.innerWidth;
-			const viewportHeight = window.innerHeight;
+			const cb = fixedContainingBlockRect(dropdownEl);
 
 			if (
-				rect.left < 0 ||
-				rect.right > viewportWidth ||
-				rect.top < 0 ||
-				rect.bottom > viewportHeight
+				rect.left < cb.left ||
+				rect.right > cb.right ||
+				rect.top < cb.top ||
+				rect.bottom > cb.bottom
 			) {
 				switchingToFallback = true;
 				runtimeFallback = true;
@@ -707,12 +710,16 @@
 			const heightStyle = searchConfig
 				? `height: ${maxHeight};`
 				: `max-height: ${maxHeight};`;
+			// `90%` (not `90vw`): the top/left/transform centering is relative to
+			// the containing block, so the size must be too — `%` resolves against
+			// the CB (identical to `vw` when the CB is the viewport, correct when
+			// an ancestor with `transform`/`contain` establishes one).
 			return `
 				position: fixed;
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
-				max-width: 90vw;
+				max-width: 90%;
 				${heightStyle}
 				${gutterStyle}
 				z-index: 50;

package/dist/components/DropdownMenu/README.md

@@ -361,6 +361,7 @@ Use `contentBefore` for leading content (icons) and `contentAfter` for trailing
 ## Features
 
 - **CSS Anchor Positioning**: Uses modern CSS anchor positioning with automatic fallback for unsupported browsers
+- **Containing-block aware**: Overflow detection and the fallback modal measure against the dropdown's actual containing block — inside a `transform`ed or `contain: layout|paint` shell they use the shell's box, not the viewport
 - **Full Keyboard Navigation**: Complete arrow key navigation with Home/End support
 - **Expandable Sections**: Collapsible groups with independent toggle state
 - **ARIA Compliant**: Proper menu roles and keyboard interaction

package/dist/components/Float/Float.svelte

@@ -67,6 +67,7 @@
 <script lang="ts">
 	import { untrack } from "svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import { fixedContainingBlockRect } from "../../utils/containing-block.js";
 	import { localStorageState } from "../../utils/persistent-state.svelte.js";
 	import { draggable as draggableAction } from "../../actions/draggable.svelte.js";
 	import { iconChevronDown, iconX } from "../../icons/index.js";
@@ -130,6 +131,26 @@
 
 	function viewport(): FloatSize {
 		if (typeof window === "undefined") return { width: 0, height: 0 };
+		// The panel is `position: fixed`, so its `left`/`top` (and therefore all
+		// placement/clamping math) resolve against its containing block — the
+		// viewport, unless an ancestor (`transform`, `contain: layout|paint`, …)
+		// establishes one. `x`/`y` are written as `left`/`top`, i.e. LAYOUT px,
+		// while the CB rect is visual — divide out the accumulated ancestor
+		// scale (measured on the panel itself; sub-pixel offset* rounding is
+		// treated as unscaled).
+		if (el) {
+			const cb = fixedContainingBlockRect(el);
+			const r = el.getBoundingClientRect();
+			const sx =
+				el.offsetWidth && Math.abs(r.width - el.offsetWidth) > 1
+					? r.width / el.offsetWidth
+					: 1;
+			const sy =
+				el.offsetHeight && Math.abs(r.height - el.offsetHeight) > 1
+					? r.height / el.offsetHeight
+					: 1;
+			return { width: cb.width / sx, height: cb.height / sy };
+		}
 		return { width: window.innerWidth, height: window.innerHeight };
 	}
 

package/dist/components/Float/README.md

@@ -5,7 +5,7 @@ dev/inspector tweak panel (dat.GUI / Tweakpane style). It has a header (optional
 icon, a `THC` title, an actions slot, and minimize/close buttons) and an arbitrary body.
 
 - **Positioned by params**: numeric `x`/`y` **or** a named `placement` preset (corners / edges / center).
-- **`position: fixed`** relative to the viewport, with drag **clamped** so it never leaves the screen.
+- **`position: fixed`** relative to the viewport — or to the nearest containing-block ancestor (`transform`, `contain: layout|paint`, …) when one exists — with drag **clamped** so it never leaves that box.
 - **Draggable** by the whole header (buttons excepted).
 - **Minimizable** to just the title bar (header button, double-click header, or methods).
 - **Imperative control** via a `bind:this` ref (mirrors `Modal`/`ModalDialog`).