kerfjs 5.0.0-beta.53 → 5.0.0-beta.55

package/dist/overlay.d.ts

@@ -26,7 +26,11 @@ interface AnchorPositionOptions {
  * One-shot: position `el` relative to `anchor` — below by default, flipping above
  * if it would overflow the viewport, aligned to a horizontal edge and clamped into
  * view. Sets `el.style` `position: fixed`, `margin: 0`, `left`, and `top` (fixed so
- * `left`/`top` are viewport coordinates, matching `getBoundingClientRect`). This is
+ * `left`/`top` are viewport coordinates, matching `getBoundingClientRect`). When an
+ * ancestor makes itself the containing block for fixed descendants (a
+ * `transform`, `filter`, `perspective`, or `contain` on a wrapping `<dialog>`),
+ * `left`/`top` are translated (and unscaled) into that box's coordinates so `el`
+ * still lands next to the anchor. This is
  * `popover()`'s placement core, usable on any element (an inline hint, a tooltip) —
  * no overlay lifecycle. Pair with {@link autoReposition} to keep it glued while open.
  */
@@ -116,7 +120,12 @@ interface OverlayHandle {
 declare function overlay(content: OverlayContent, options?: OverlayOptions): OverlayHandle;
 /** Options for {@link popover}. */
 interface PopoverOptions {
-    /** Where to append the popover wrapper. Default `document.body`. */
+    /**
+     * Where to append the popover wrapper. Default: when `anchor` sits inside an
+     * open modal `<dialog>`, that dialog's `[data-kerf-overlay-host]` element (a
+     * dialog kerf opened gets one automatically), so the popover is part of the
+     * modal subtree and stays interactive; otherwise `document.body`.
+     */
     container?: Element;
     /** Class on the wrapper. Default `'kerf-popover'`. */
     className?: string;
@@ -160,7 +169,7 @@ declare function popover(anchor: Element, content: OverlayContent, options?: Pop
 type TooltipContent = string | SafeHtml | (() => MountResult);
 /** Options for {@link tooltip}. */
 interface TooltipOptions extends AnchorPositionOptions {
-    /** Where to append the tooltip wrapper. Default `document.body`. */
+    /** Where to append the tooltip wrapper. Default: the anchor's modal-dialog host slot (see {@link PopoverOptions.container}), else `document.body`. */
     container?: Element;
     /** Class on the wrapper. Default `'kerf-tooltip'`. */
     className?: string;

package/dist/overlay.js

@@ -1,11 +1,11 @@
 import { attach } from './chunk-FM6N2B4N.js';
-import { mount } from './chunk-HTXQR2KL.js';
+import { mount } from './chunk-WMRFXSLG.js';
 import { delegate } from './chunk-X6OQ2HTR.js';
 
 
-import { jsx, escapeHtml } from './chunk-DU35YGKW.js';
-
+import { jsx, escapeHtml } from './chunk-UGNPDLNI.js';
 
+import { OVERLAY_HOST_SELECTOR } from './chunk-4TX6YJDM.js';
 import { devHooks } from './chunk-3C6F6NM4.js';
 
 // src/overlay-position.ts
@@ -26,8 +26,19 @@ function positionAnchored(el, anchor, options = {}) {
     below = true;
   let left = align === "end" ? anchorRect.right - elementRect.width : anchorRect.left;
   left = Math.max(0, Math.min(left, viewportWidth - elementRect.width));
-  el.style.left = `${left}px`;
-  el.style.top = `${below ? belowTop : aboveTop}px`;
+  const [originX, originY, scaleX, scaleY] = fixedOrigin(el);
+  el.style.left = `${(left - originX) / scaleX}px`;
+  el.style.top = `${((below ? belowTop : aboveTop) - originY) / scaleY}px`;
+}
+function fixedOrigin(el) {
+  const parent = el.parentNode;
+  if (!parent) return [0, 0, 1, 1];
+  const probe = el.ownerDocument.createElement("div");
+  probe.style.cssText = "position:fixed;left:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0";
+  parent.insertBefore(probe, el);
+  const rect = probe.getBoundingClientRect();
+  probe.remove();
+  return [rect.left, rect.top, rect.width || 1, rect.height || 1];
 }
 function autoReposition(el, anchor, options = {}) {
   const reposition = () => positionAnchored(el, anchor, options);
@@ -57,22 +68,58 @@ function supportsPopover() {
 }
 var OVERLAY_ARBITRATION = /* @__PURE__ */ Symbol("kerf.overlayArbitration");
 function overlayArbitration(doc) {
-  return doc[OVERLAY_ARBITRATION] ??= {
+  const arbitrated = doc;
+  return arbitrated[OVERLAY_ARBITRATION] ??= {
     stack: [],
-    handled: /* @__PURE__ */ new WeakSet()
+    handled: /* @__PURE__ */ new WeakSet(),
+    // KF-AHY6H4: an app-owned modal `<dialog>` opened outside kerf would leave
+    // the kerf surfaces already showing inert beneath it. A dialog fires
+    // `toggle` after it opens (it does not bubble, so listen in the capture
+    // phase); re-host above it exactly as kerf does for its own dialogs, which
+    // are skipped here because `overlay()` already re-hosted synchronously.
+    onToggle: (event) => {
+      const dialog = event.target;
+      const arbitration = arbitrated[OVERLAY_ARBITRATION];
+      if (dialog.tagName === "DIALOG" && !arbitration.stack.some(({ el }) => el === dialog) && isOpenModal(dialog, arbitration))
+        rehostAbove(arbitration, dialog);
+    }
   };
 }
-function modalDialogOpen(doc, arbitration) {
-  if (arbitration.stack.some(
-    ({ el, modal }) => modal && el.isConnected && el.open === true
-  ))
+function rehostAbove(arbitration, dialog) {
+  for (const { el, liftAbove } of arbitration.stack)
+    if (el !== dialog && el.isConnected && !dialog.contains(el)) liftAbove?.();
+}
+function isOpenModal(dialog, arbitration) {
+  if (!dialog.isConnected || dialog.open !== true)
+    return false;
+  if (arbitration.stack.some(({ el, modal }) => modal && el === dialog))
     return true;
   try {
-    for (const dialog of doc.querySelectorAll("dialog[open]"))
-      if (dialog.matches(":modal")) return true;
+    return dialog.matches(":modal");
   } catch {
+    return false;
+  }
+}
+function modalDialogOpen(doc, arbitration) {
+  return arbitration.stack.some(({ el }) => isOpenModal(el, arbitration)) || Array.from(doc.querySelectorAll("dialog[open]")).some(
+    (dialog) => isOpenModal(dialog, arbitration)
+  );
+}
+function overlayHost(anchor) {
+  const arbitration = overlayArbitration(document);
+  const dialog = anchor.closest("dialog");
+  if (dialog === null || !isOpenModal(dialog, arbitration)) return void 0;
+  let host = Array.from(dialog.querySelectorAll(OVERLAY_HOST_SELECTOR)).find(
+    (el) => el.closest("dialog") === dialog
+  );
+  if (host === void 0 && arbitration.stack.some(({ el }) => el === dialog)) {
+    dialog.insertAdjacentHTML(
+      "beforeend",
+      '<div data-kerf-overlay-host data-morph-skip data-morph-preserve style="display:contents"></div>'
+    );
+    host = dialog.lastElementChild;
   }
-  return false;
+  return host;
 }
 function ownsInput(stack, self, kind) {
   for (let i = stack.indexOf(self) + 1; i < stack.length; i++) {
@@ -108,7 +155,8 @@ function overlay(content, options = {}) {
     assertInitialFocusSelector(initialFocus);
   const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
   const arbitration = overlayArbitration(document);
-  const liftOverModal = !native && modalDialogOpen(document, arbitration);
+  const containerDialog = container.closest("dialog");
+  const liftOverModal = !native && !(containerDialog !== null && isOpenModal(containerDialog, arbitration)) && modalDialogOpen(document, arbitration);
   const topLayer = native || liftOverModal;
   const useDialog = topLayer && trap && supportsDialog();
   const usePopover = topLayer && !trap && supportsPopover();
@@ -157,6 +205,8 @@ function overlay(content, options = {}) {
     const { stack } = arbitration;
     const stackIndex = stack.indexOf(surface);
     if (stackIndex !== -1) stack.splice(stackIndex, 1);
+    if (stack.length === 0)
+      document.removeEventListener("toggle", arbitration.onToggle, true);
     for (const other of stack)
       if (other.restoreTo !== null && wrapper.contains(other.restoreTo))
         other.restoreTo = surface.restoreTo;
@@ -191,18 +241,22 @@ function overlay(content, options = {}) {
       wrapper,
       typeof content === "function" ? content : () => content
     );
-    arbitration.stack.push(surface);
+    if (arbitration.stack.push(surface) === 1)
+      document.addEventListener("toggle", arbitration.onToggle, true);
     if (useDialog) {
       wrapper.showModal();
       nativeOpened = true;
-      for (const other of arbitration.stack)
-        if (other !== surface && other.el.isConnected) other.liftAbove?.();
+      rehostAbove(arbitration, wrapper);
     } else if (usePopover) {
       wrapper.showPopover();
       nativeOpened = true;
       wrapper.style.inset = "auto";
     }
     installDismissal();
+    if (container.closest(OVERLAY_HOST_SELECTOR) !== null) {
+      makeTabReachable();
+      removers.push(attach(wrapper, () => close));
+    }
     applyInitialFocus();
   } catch (error) {
     close();
@@ -283,6 +337,14 @@ function overlay(content, options = {}) {
       );
     }
   }
+  function makeTabReachable() {
+    focusable(wrapper);
+    const onTab = (event) => {
+      if (event.key === "Tab") focusable(wrapper);
+    };
+    document.addEventListener("keydown", onTab, true);
+    removers.push(() => document.removeEventListener("keydown", onTab, true));
+  }
   function applyInitialFocus() {
     if (initialFocus !== false) {
       if (typeof initialFocus === "string") {
@@ -339,7 +401,7 @@ function popover(anchor, content, options = {}) {
   } = options;
   const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
   const handle = overlay(content, {
-    container,
+    container: container ?? overlayHost(anchor),
     className,
     dismiss,
     trap: false,
@@ -382,7 +444,7 @@ function tooltip(anchor, content, options = {}) {
   function show() {
     if (!anchor.isConnected) return;
     const handle = overlay(body, {
-      container,
+      container: container ?? overlayHost(anchor),
       className,
       dismiss: false,
       trap: false,
@@ -403,6 +465,9 @@ function tooltip(anchor, content, options = {}) {
       hide();
     });
     current = { handle, stop, unwatch };
+    void handle.result.then(() => {
+      if (current?.handle === handle) hide();
+    });
   }
   function hide() {
     const shown = current;