kerfjs 4.4.0 → 4.5.0-beta.1

package/dist/overlay.js

@@ -1,28 +1,30 @@
-import { mount } from './chunk-SRWQKB33.js';
-import { delegate } from './chunk-KEZTD6H4.js';
-import './chunk-QIP723L4.js';
-import './chunk-YHH7OUFA.js';
-import { jsx } from './chunk-SUPUPSBE.js';
-import './chunk-3APBEVHF.js';
-import './chunk-GY4XV2UV.js';
-import './chunk-VVDJLWMP.js';
+import { mount } from './chunk-V757BT6U.js';
+import { delegate } from './chunk-E5R5GNKE.js';
+
+
+import { jsx, escapeHtml } from './chunk-QFUNWHKH.js';
+
+
+
 
 // src/overlay-position.ts
 function positionAnchored(el, anchor, options = {}) {
   const { placement = "bottom", align = "start", gap = 4 } = options;
   el.style.position = "fixed";
   el.style.margin = "0";
-  const a = anchor.getBoundingClientRect();
-  const p = el.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const belowTop = a.bottom + gap;
-  const aboveTop = a.top - gap - p.height;
+  const anchorRect = anchor.getBoundingClientRect();
+  const elementRect = el.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const belowTop = anchorRect.bottom + gap;
+  const aboveTop = anchorRect.top - gap - elementRect.height;
   let below = placement !== "top";
-  if (below && belowTop + p.height > vh && aboveTop >= 0) below = false;
-  else if (!below && aboveTop < 0 && belowTop + p.height <= vh) below = true;
-  let left = align === "end" ? a.right - p.width : a.left;
-  left = Math.max(0, Math.min(left, vw - p.width));
+  if (below && belowTop + elementRect.height > viewportHeight && aboveTop >= 0)
+    below = false;
+  else if (!below && aboveTop < 0 && belowTop + elementRect.height <= viewportHeight)
+    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`;
 }
@@ -37,91 +39,362 @@ function autoReposition(el, anchor, options = {}) {
   };
 }
 
-// src/overlay-dialogs.ts
-function confirm(message, options = {}) {
+// src/overlay-core.ts
+var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+function focusable(root) {
+  const items = Array.from(
+    root.querySelectorAll(FOCUSABLE)
+  ).filter((el) => !el.hasAttribute("hidden") && el.tabIndex >= 0);
+  for (const el of items) if (!el.hasAttribute("tabindex")) el.tabIndex = 0;
+  return items;
+}
+function supportsDialog() {
+  return typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+}
+function supportsPopover() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
+}
+var FALLBACK_OVERLAY_STACK = /* @__PURE__ */ Symbol("kerf.fallbackOverlayStack");
+function fallbackOverlayStack(wrapper) {
+  const document2 = wrapper.ownerDocument;
+  return document2[FALLBACK_OVERLAY_STACK] ??= [];
+}
+function overlay(content, options = {}) {
+  const {
+    container = document.body,
+    className = "kerf-overlay",
+    dismiss = ["escape", "backdrop"],
+    initialFocus = true,
+    trap = true,
+    role = "dialog",
+    onDismiss,
+    outsideIgnore,
+    native = false
+  } = options;
+  const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
+  const restoreTo = document.activeElement;
+  const useDialog = native && trap && supportsDialog();
+  const usePopover = native && !trap && supportsPopover();
+  const wrapper = useDialog ? document.createElement("dialog") : document.createElement("div");
+  wrapper.className = className;
+  if (usePopover) wrapper.setAttribute("popover", "manual");
+  if (trap && !useDialog) {
+    wrapper.setAttribute("role", role);
+    wrapper.setAttribute("aria-modal", "true");
+  }
+  container.appendChild(wrapper);
+  const fallback = !useDialog && !usePopover;
+  const fallbackStack = fallback ? fallbackOverlayStack(wrapper) : void 0;
+  const isTopmostFallback = () => fallbackStack === void 0 || fallbackStack[fallbackStack.length - 1] === wrapper;
+  const disposeMount = mount(
+    wrapper,
+    typeof content === "function" ? content : () => content
+  );
+  fallbackStack?.push(wrapper);
+  let nativeOpened = false;
+  if (useDialog) {
+    wrapper.showModal();
+    nativeOpened = true;
+  } else if (usePopover) {
+    wrapper.showPopover();
+    wrapper.style.inset = "auto";
+    nativeOpened = true;
+  }
+  const removers = [];
+  const resultBox = {};
+  const result = new Promise((resolve) => {
+    resultBox.resolve = resolve;
+  });
+  const state = { closed: false };
+  function close(value) {
+    if (state.closed) return;
+    state.closed = true;
+    if (fallbackStack !== void 0) {
+      const stackIndex = fallbackStack.indexOf(wrapper);
+      if (stackIndex !== -1) fallbackStack.splice(stackIndex, 1);
+    }
+    for (const remove of removers) remove();
+    disposeMount();
+    if (nativeOpened) {
+      nativeOpened = false;
+      if (useDialog) wrapper.close();
+      else wrapper.hidePopover();
+    }
+    wrapper.remove();
+    if (restoreTo instanceof HTMLElement && restoreTo.isConnected)
+      restoreTo.focus();
+    resultBox.resolve?.(value);
+  }
+  function userDismiss() {
+    onDismiss?.();
+    close();
+  }
+  const wantEscape = triggers.includes("escape");
+  if (useDialog) {
+    const onCancel = (event) => {
+      event.preventDefault();
+      if (wantEscape) userDismiss();
+    };
+    wrapper.addEventListener("cancel", onCancel);
+    removers.push(() => wrapper.removeEventListener("cancel", onCancel));
+  } else if (wantEscape || trap) {
+    const onKeydown = (event) => {
+      if (!isTopmostFallback()) return;
+      if (wantEscape && event.key === "Escape") {
+        event.stopPropagation();
+        userDismiss();
+        return;
+      }
+      if (trap && event.key === "Tab") {
+        const items = focusable(wrapper);
+        if (items.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        const outside = !wrapper.contains(active);
+        if (event.shiftKey && (active === first || outside)) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && (active === last || outside)) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeydown, true);
+    removers.push(
+      () => document.removeEventListener("keydown", onKeydown, true)
+    );
+  }
+  if (triggers.includes("backdrop")) {
+    const onClick = (event) => {
+      if (!isTopmostFallback()) return;
+      if (event.target === wrapper) userDismiss();
+    };
+    wrapper.addEventListener("click", onClick);
+    removers.push(() => wrapper.removeEventListener("click", onClick));
+  }
+  if (triggers.includes("outside")) {
+    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
+    const onDocClick = (event) => {
+      if (!isTopmostFallback()) return;
+      const target = event.target;
+      if (target === null) return;
+      if (wrapper.contains(target)) return;
+      if (ignore.some((el) => el === target || el.contains(target))) return;
+      userDismiss();
+    };
+    document.addEventListener("click", onDocClick, true);
+    removers.push(
+      () => document.removeEventListener("click", onDocClick, true)
+    );
+  }
+  if (initialFocus !== false) {
+    if (typeof initialFocus === "string") {
+      wrapper.querySelector(initialFocus)?.focus();
+    } else {
+      const first = focusable(wrapper)[0];
+      if (first !== void 0) {
+        first.focus();
+      } else {
+        wrapper.tabIndex = -1;
+        wrapper.focus();
+      }
+    }
+  }
+  return { el: wrapper, close, result };
+}
+function popover(anchor, content, options = {}) {
+  const {
+    container,
+    className = "kerf-popover",
+    placement = "bottom",
+    align = "start",
+    gap = 4,
+    dismiss = ["outside"],
+    initialFocus = false,
+    outsideIgnore,
+    onDismiss,
+    native = false
+  } = options;
+  const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
+  const handle = overlay(content, {
+    container,
+    className,
+    dismiss,
+    trap: false,
+    initialFocus,
+    onDismiss,
+    outsideIgnore: [anchor, ...extraIgnore],
+    native
+  });
+  const stopReposition = autoReposition(handle.el, anchor, {
+    placement,
+    align,
+    gap
+  });
+  void handle.result.then(stopReposition);
+  return handle;
+}
+function tooltip(anchor, content, options = {}) {
+  const {
+    container,
+    className = "kerf-tooltip",
+    delay = 400,
+    hideDelay = 100,
+    role = "tooltip",
+    placement = "top",
+    align = "start",
+    gap = 4,
+    native = false
+  } = options;
+  const body = typeof content === "function" ? content : typeof content === "string" ? jsx("span", { class: `${className}__text`, children: content }) : content;
+  const timers = {};
+  let current;
+  let presence = 0;
+  function show() {
+    const handle = overlay(body, {
+      container,
+      className,
+      dismiss: false,
+      trap: false,
+      initialFocus: false,
+      native
+    });
+    handle.el.setAttribute("role", role);
+    const stop = autoReposition(handle.el, anchor, { placement, align, gap });
+    current = { handle, stop };
+  }
+  function hide() {
+    if (current === void 0) return;
+    current.stop();
+    current.handle.close();
+    current = void 0;
+  }
+  const onEnter = (event) => {
+    presence |= event.type === "focus" ? 2 : 1;
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    if (current !== void 0) return;
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    timers.show = setTimeout(show, delay);
+  };
+  const onLeave = (event) => {
+    presence &= event.type === "blur" ? -3 : -2;
+    if (presence) return;
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (current === void 0) return;
+    timers.hide = setTimeout(hide, hideDelay);
+  };
+  anchor.addEventListener("pointerenter", onEnter);
+  anchor.addEventListener("pointerleave", onLeave);
+  anchor.addEventListener("focus", onEnter);
+  anchor.addEventListener("blur", onLeave);
+  return () => {
+    anchor.removeEventListener("pointerenter", onEnter);
+    anchor.removeEventListener("pointerleave", onLeave);
+    anchor.removeEventListener("focus", onEnter);
+    anchor.removeEventListener("blur", onLeave);
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    hide();
+  };
+}
+
+// src/overlay-choice.ts
+function choice(message, actions, options = {}) {
   const {
     container,
     className = "kerf-overlay",
     title,
-    okText = "OK",
-    cancelText = "Cancel",
-    danger = false,
+    defaultValue,
     native = false,
     render
   } = options;
-  const body = render !== void 0 ? render({ message, ok: { "data-confirm": "ok" }, cancel: { "data-confirm": "cancel" } }) : jsx("div", {
-    class: "kerf-confirm",
+  const hasDefault = "defaultValue" in options;
+  const actionAttrs = actions.map((_, i) => ({ "data-choice": String(i) }));
+  const body = render !== void 0 ? render({ message, actions: actionAttrs }) : jsx("div", {
+    class: "kerf-choice",
     children: [
-      title !== void 0 ? jsx("h2", { class: "kerf-confirm__title", children: title }) : "",
-      jsx("p", { class: "kerf-confirm__message", children: message }),
+      title !== void 0 ? jsx("h2", { class: "kerf-choice__title", children: title }) : "",
+      jsx("p", { class: "kerf-choice__message", children: message }),
       jsx("div", {
-        class: "kerf-confirm__actions",
-        children: [
-          jsx("button", { type: "button", "data-confirm": "cancel", children: cancelText }),
-          jsx("button", {
+        class: "kerf-choice__actions",
+        children: actions.map(
+          (action, i) => jsx("button", {
             type: "button",
-            "data-confirm": "ok",
-            class: "kerf-confirm__ok",
-            children: okText
+            class: action.className !== void 0 ? `kerf-choice__action ${action.className}` : "kerf-choice__action",
+            ...actionAttrs[i],
+            children: action.label
           })
-        ]
+        )
       })
     ]
   });
+  let resolveChoice;
+  const result = new Promise((resolve) => {
+    resolveChoice = resolve;
+  });
   const handle = overlay(body, {
     container,
-    className: danger ? `${className} kerf-confirm--danger` : className,
+    className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: '[data-confirm="ok"]',
+    initialFocus: "[data-choice]",
     trap: true,
     native
   });
-  delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
-    handle.close(el.getAttribute("data-confirm") === "ok");
+  delegate(handle.el, "click", "[data-choice]", (_event, el) => {
+    resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
+    handle.close();
   });
-  return handle.result.then((value) => value === true);
+  if (hasDefault) {
+    handle.el.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        resolveChoice(defaultValue);
+        handle.close();
+      }
+    });
+  }
+  void handle.result.then(() => resolveChoice(null));
+  return result;
 }
-function prompt(message, options = {}) {
+
+// src/overlay-confirm.ts
+function confirm(message, options = {}) {
   const {
     container,
     className = "kerf-overlay",
     title,
-    defaultValue = "",
-    placeholder,
-    inputType = "text",
     okText = "OK",
     cancelText = "Cancel",
-    validate,
+    danger = false,
     native = false,
     render
   } = options;
-  const inputAttrs = {
-    "data-prompt-input": "",
-    type: inputType,
-    value: defaultValue,
-    ...placeholder !== void 0 ? { placeholder } : {}
-  };
   const body = render !== void 0 ? render({
     message,
-    input: inputAttrs,
-    error: { "data-prompt-error": "" },
-    ok: { "data-prompt": "ok" },
-    cancel: { "data-prompt": "cancel" }
+    ok: { "data-confirm": "ok" },
+    cancel: { "data-confirm": "cancel" }
   }) : jsx("div", {
-    class: "kerf-prompt",
+    class: "kerf-confirm",
     children: [
-      title !== void 0 ? jsx("h2", { class: "kerf-prompt__title", children: title }) : "",
-      jsx("label", { class: "kerf-prompt__message", children: message }),
-      jsx("input", { class: "kerf-prompt__input", ...inputAttrs }),
-      jsx("p", { class: "kerf-prompt__error", "data-prompt-error": "", children: "" }),
+      title !== void 0 ? jsx("h2", { class: "kerf-confirm__title", children: title }) : "",
+      jsx("p", { class: "kerf-confirm__message", children: message }),
       jsx("div", {
-        class: "kerf-prompt__actions",
+        class: "kerf-confirm__actions",
         children: [
-          jsx("button", { type: "button", "data-prompt": "cancel", children: cancelText }),
           jsx("button", {
             type: "button",
-            "data-prompt": "ok",
-            class: "kerf-prompt__ok",
+            "data-confirm": "cancel",
+            children: cancelText
+          }),
+          jsx("button", {
+            type: "button",
+            "data-confirm": "ok",
+            class: "kerf-confirm__ok",
             children: okText
           })
         ]
@@ -130,40 +403,19 @@ function prompt(message, options = {}) {
   });
   const handle = overlay(body, {
     container,
-    className,
+    className: danger ? `${className} kerf-confirm--danger` : className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: "[data-prompt-input]",
+    initialFocus: '[data-confirm="ok"]',
     trap: true,
     native
   });
-  const input = handle.el.querySelector("[data-prompt-input]");
-  const errorEl = handle.el.querySelector("[data-prompt-error]");
-  if (errorEl !== null) errorEl.hidden = true;
-  function attemptOk() {
-    const value = input.value;
-    const error = validate?.(value);
-    if (typeof error === "string" && error.length > 0) {
-      if (errorEl !== null) {
-        errorEl.textContent = error;
-        errorEl.hidden = false;
-      }
-      input.focus();
-      return;
-    }
-    handle.close(value);
-  }
-  delegate(handle.el, "click", "[data-prompt]", (_event, el) => {
-    if (el.getAttribute("data-prompt") === "ok") attemptOk();
-    else handle.close(null);
-  });
-  handle.el.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" && event.target === input) {
-      event.preventDefault();
-      attemptOk();
-    }
+  delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
+    handle.close(el.getAttribute("data-confirm") === "ok");
   });
-  return handle.result.then((value) => typeof value === "string" ? value : null);
+  return handle.result.then((value) => value === true);
 }
+
+// src/overlay-form.ts
 function form(fields, options = {}) {
   const {
     container,
@@ -198,16 +450,30 @@ function form(fields, options = {}) {
         (field) => jsx("div", {
           class: "kerf-form__field",
           children: [
-            jsx("label", { class: "kerf-form__label", children: field.label ?? field.name }),
-            jsx("input", { class: "kerf-form__input", ...fieldAttrs(field) }),
-            jsx("p", { class: "kerf-form__error", "data-field-error": field.name, children: "" })
+            jsx("label", {
+              class: "kerf-form__label",
+              children: field.label ?? field.name
+            }),
+            jsx("input", {
+              class: "kerf-form__input",
+              ...fieldAttrs(field)
+            }),
+            jsx("p", {
+              class: "kerf-form__error",
+              "data-field-error": field.name,
+              children: ""
+            })
           ]
         })
       ),
       jsx("div", {
         class: "kerf-form__actions",
         children: [
-          jsx("button", { type: "button", "data-form": "cancel", children: cancelText }),
+          jsx("button", {
+            type: "button",
+            "data-form": "cancel",
+            children: cancelText
+          }),
           jsx("button", {
             type: "button",
             "data-form": "ok",
@@ -226,13 +492,19 @@ function form(fields, options = {}) {
     trap: true,
     native
   });
-  const byAttr = (attr, name) => Array.from(handle.el.querySelectorAll(`[${attr}]`)).find(
-    (el) => el.getAttribute(attr) === name
-  );
-  const errorFor = (name) => Array.from(handle.el.querySelectorAll("[data-field-error]")).find(
-    (el) => el.getAttribute("data-field-error") === name
-  ) ?? null;
+  const errorFor = (name) => Array.from(
+    handle.el.querySelectorAll("[data-field-error]")
+  ).find((el) => el.getAttribute("data-field-error") === name) ?? null;
+  const inputFor = (name) => {
+    const input = Array.from(
+      handle.el.querySelectorAll("input[data-field]")
+    ).find((el) => el.getAttribute("data-field") === name);
+    if (input !== void 0) return input;
+    handle.close(null);
+    throw new Error(`form(): render missing <input data-field="${name}">.`);
+  };
   for (const field of fields) {
+    inputFor(field.name);
     const errorEl = errorFor(field.name);
     if (errorEl !== null) errorEl.hidden = true;
   }
@@ -240,7 +512,7 @@ function form(fields, options = {}) {
     const record = {};
     let firstInvalid = null;
     for (const field of fields) {
-      const el = byAttr("data-field", field.name);
+      const el = inputFor(field.name);
       const value = el.value;
       record[field.name] = value;
       const error = field.validate?.(value);
@@ -275,55 +547,107 @@ function form(fields, options = {}) {
     (value) => value !== null && typeof value === "object" ? value : null
   );
 }
-function choice(message, actions, options = {}) {
-  const { container, className = "kerf-overlay", title, defaultValue, native = false, render } = options;
-  const hasDefault = "defaultValue" in options;
-  const actionAttrs = actions.map((_, i) => ({ "data-choice": String(i) }));
-  const body = render !== void 0 ? render({ message, actions: actionAttrs }) : jsx("div", {
-    class: "kerf-choice",
+
+// src/overlay-prompt.ts
+function prompt(message, options = {}) {
+  const {
+    container,
+    className = "kerf-overlay",
+    title,
+    defaultValue = "",
+    placeholder,
+    inputType = "text",
+    okText = "OK",
+    cancelText = "Cancel",
+    validate,
+    native = false,
+    render
+  } = options;
+  const inputAttrs = {
+    "data-prompt-input": "",
+    type: inputType,
+    value: defaultValue,
+    ...placeholder !== void 0 ? { placeholder } : {}
+  };
+  const body = render !== void 0 ? render({
+    message,
+    input: inputAttrs,
+    error: { "data-prompt-error": "" },
+    ok: { "data-prompt": "ok" },
+    cancel: { "data-prompt": "cancel" }
+  }) : jsx("div", {
+    class: "kerf-prompt",
     children: [
-      title !== void 0 ? jsx("h2", { class: "kerf-choice__title", children: title }) : "",
-      jsx("p", { class: "kerf-choice__message", children: message }),
+      title !== void 0 ? jsx("h2", { class: "kerf-prompt__title", children: title }) : "",
+      jsx("label", { class: "kerf-prompt__message", children: message }),
+      jsx("input", { class: "kerf-prompt__input", ...inputAttrs }),
+      jsx("p", {
+        class: "kerf-prompt__error",
+        "data-prompt-error": "",
+        children: ""
+      }),
       jsx("div", {
-        class: "kerf-choice__actions",
-        children: actions.map(
-          (action, i) => jsx("button", {
+        class: "kerf-prompt__actions",
+        children: [
+          jsx("button", {
             type: "button",
-            class: action.className !== void 0 ? `kerf-choice__action ${action.className}` : "kerf-choice__action",
-            ...actionAttrs[i],
-            children: action.label
+            "data-prompt": "cancel",
+            children: cancelText
+          }),
+          jsx("button", {
+            type: "button",
+            "data-prompt": "ok",
+            class: "kerf-prompt__ok",
+            children: okText
           })
-        )
-      })
-    ]
-  });
-  let resolveChoice;
-  const result = new Promise((resolve) => {
-    resolveChoice = resolve;
+        ]
+      })
+    ]
   });
   const handle = overlay(body, {
     container,
     className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: "[data-choice]",
+    initialFocus: "[data-prompt-input]",
     trap: true,
     native
   });
-  delegate(handle.el, "click", "[data-choice]", (_event, el) => {
-    resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
-    handle.close();
-  });
-  if (hasDefault) {
-    handle.el.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        resolveChoice(defaultValue);
-        handle.close();
+  const input = handle.el.querySelector(
+    "input[data-prompt-input]"
+  );
+  if (input === null) {
+    handle.close(null);
+    throw new Error("prompt(): render missing <input data-prompt-input>.");
+  }
+  const promptInput = input;
+  const errorEl = handle.el.querySelector("[data-prompt-error]");
+  if (errorEl !== null) errorEl.hidden = true;
+  function attemptOk() {
+    const value = promptInput.value;
+    const error = validate?.(value);
+    if (typeof error === "string" && error.length > 0) {
+      if (errorEl !== null) {
+        errorEl.textContent = error;
+        errorEl.hidden = false;
       }
-    });
+      promptInput.focus();
+      return;
+    }
+    handle.close(value);
   }
-  void handle.result.then(() => resolveChoice(null));
-  return result;
+  delegate(handle.el, "click", "[data-prompt]", (_event, el) => {
+    if (el.getAttribute("data-prompt") === "ok") attemptOk();
+    else handle.close(null);
+  });
+  handle.el.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && event.target === promptInput) {
+      event.preventDefault();
+      attemptOk();
+    }
+  });
+  return handle.result.then(
+    (value) => typeof value === "string" ? value : null
+  );
 }
 
 // src/overlay-toast.ts
@@ -364,8 +688,14 @@ function toast(content, options = {}) {
   if (variant !== void 0) el.classList.add(`${className}--${variant}`);
   el.setAttribute("role", role);
   region.appendChild(el);
-  const disposeMount = mount(el, typeof content === "function" ? content : () => content);
-  const state = { dismissed: false, removed: false, timer: void 0, exitTimer: void 0 };
+  const render = typeof content === "function" ? content : () => typeof content === "string" ? escapeHtml(content) : content;
+  const disposeMount = mount(el, render);
+  const state = {
+    dismissed: false,
+    removed: false,
+    timer: void 0,
+    exitTimer: void 0
+  };
   if (enterClass !== void 0) {
     globalThis.requestAnimationFrame(() => {
       if (!state.dismissed) el.classList.add(enterClass);
@@ -406,229 +736,6 @@ function toast(content, options = {}) {
   return { el, dismiss };
 }
 
-// src/overlay.ts
-var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
-function focusable(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
-    (el) => !el.hasAttribute("hidden")
-  );
-}
-function supportsDialog() {
-  return typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
-}
-function supportsPopover() {
-  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
-}
-function overlay(content, options = {}) {
-  const {
-    container = document.body,
-    className = "kerf-overlay",
-    dismiss = ["escape", "backdrop"],
-    initialFocus = true,
-    trap = true,
-    role = "dialog",
-    onDismiss,
-    outsideIgnore,
-    native = false
-  } = options;
-  const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
-  const restoreTo = document.activeElement;
-  const useDialog = native && trap && supportsDialog();
-  const usePopover = native && !trap && supportsPopover();
-  const wrapper = useDialog ? document.createElement("dialog") : document.createElement("div");
-  wrapper.className = className;
-  if (usePopover) wrapper.setAttribute("popover", "manual");
-  if (trap && !useDialog) {
-    wrapper.setAttribute("role", role);
-    wrapper.setAttribute("aria-modal", "true");
-  }
-  container.appendChild(wrapper);
-  const disposeMount = mount(wrapper, typeof content === "function" ? content : () => content);
-  let nativeOpened = false;
-  if (useDialog) {
-    wrapper.showModal();
-    nativeOpened = true;
-  } else if (usePopover) {
-    wrapper.showPopover();
-    wrapper.style.inset = "auto";
-    nativeOpened = true;
-  }
-  const removers = [];
-  const resultBox = {};
-  const result = new Promise((resolve) => {
-    resultBox.resolve = resolve;
-  });
-  const state = { closed: false };
-  function close(value) {
-    if (state.closed) return;
-    state.closed = true;
-    for (const remove of removers) remove();
-    disposeMount();
-    if (nativeOpened) {
-      nativeOpened = false;
-      if (useDialog) wrapper.close();
-      else wrapper.hidePopover();
-    }
-    wrapper.remove();
-    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();
-    resultBox.resolve?.(value);
-  }
-  function userDismiss() {
-    onDismiss?.();
-    close();
-  }
-  const wantEscape = triggers.includes("escape");
-  if (useDialog) {
-    const onCancel = (event) => {
-      event.preventDefault();
-      if (wantEscape) userDismiss();
-    };
-    wrapper.addEventListener("cancel", onCancel);
-    removers.push(() => wrapper.removeEventListener("cancel", onCancel));
-  } else if (wantEscape || trap) {
-    const onKeydown = (event) => {
-      if (wantEscape && event.key === "Escape") {
-        event.stopPropagation();
-        userDismiss();
-        return;
-      }
-      if (trap && event.key === "Tab") {
-        const items = focusable(wrapper);
-        if (items.length === 0) {
-          event.preventDefault();
-          return;
-        }
-        const first = items[0];
-        const last = items[items.length - 1];
-        const active = document.activeElement;
-        const outside = !wrapper.contains(active);
-        if (event.shiftKey && (active === first || outside)) {
-          event.preventDefault();
-          last.focus();
-        } else if (!event.shiftKey && (active === last || outside)) {
-          event.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", onKeydown, true);
-    removers.push(() => document.removeEventListener("keydown", onKeydown, true));
-  }
-  if (triggers.includes("backdrop")) {
-    const onClick = (event) => {
-      if (event.target === wrapper) userDismiss();
-    };
-    wrapper.addEventListener("click", onClick);
-    removers.push(() => wrapper.removeEventListener("click", onClick));
-  }
-  if (triggers.includes("outside")) {
-    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
-    const onDocClick = (event) => {
-      const target = event.target;
-      if (target === null) return;
-      if (wrapper.contains(target)) return;
-      if (ignore.some((el) => el === target || el.contains(target))) return;
-      userDismiss();
-    };
-    document.addEventListener("click", onDocClick, true);
-    removers.push(() => document.removeEventListener("click", onDocClick, true));
-  }
-  if (initialFocus !== false) {
-    if (typeof initialFocus === "string") {
-      wrapper.querySelector(initialFocus)?.focus();
-    } else {
-      const first = focusable(wrapper)[0];
-      if (first !== void 0) {
-        first.focus();
-      } else {
-        wrapper.tabIndex = -1;
-        wrapper.focus();
-      }
-    }
-  }
-  return { el: wrapper, close, result };
-}
-function popover(anchor, content, options = {}) {
-  const {
-    container,
-    className = "kerf-popover",
-    placement = "bottom",
-    align = "start",
-    gap = 4,
-    dismiss = ["outside"],
-    initialFocus = false,
-    outsideIgnore,
-    onDismiss,
-    native = false
-  } = options;
-  const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
-  const handle = overlay(content, {
-    container,
-    className,
-    dismiss,
-    trap: false,
-    initialFocus,
-    onDismiss,
-    outsideIgnore: [anchor, ...extraIgnore],
-    native
-  });
-  const stopReposition = autoReposition(handle.el, anchor, { placement, align, gap });
-  void handle.result.then(stopReposition);
-  return handle;
-}
-function tooltip(anchor, content, options = {}) {
-  const {
-    container,
-    className = "kerf-tooltip",
-    delay = 400,
-    hideDelay = 100,
-    role = "tooltip",
-    placement = "top",
-    align = "start",
-    gap = 4,
-    native = false
-  } = options;
-  const body = typeof content === "function" ? content : typeof content === "string" ? jsx("span", { class: `${className}__text`, children: content }) : content;
-  const timers = {};
-  let current;
-  function show() {
-    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false, native });
-    handle.el.setAttribute("role", role);
-    const stop = autoReposition(handle.el, anchor, { placement, align, gap });
-    current = { handle, stop };
-  }
-  function hide() {
-    if (current === void 0) return;
-    current.stop();
-    current.handle.close();
-    current = void 0;
-  }
-  const onEnter = () => {
-    if (timers.hide !== void 0) clearTimeout(timers.hide);
-    if (current !== void 0) return;
-    if (timers.show !== void 0) clearTimeout(timers.show);
-    timers.show = setTimeout(show, delay);
-  };
-  const onLeave = () => {
-    if (timers.show !== void 0) clearTimeout(timers.show);
-    if (current === void 0) return;
-    timers.hide = setTimeout(hide, hideDelay);
-  };
-  anchor.addEventListener("pointerenter", onEnter);
-  anchor.addEventListener("pointerleave", onLeave);
-  anchor.addEventListener("focus", onEnter);
-  anchor.addEventListener("blur", onLeave);
-  return () => {
-    anchor.removeEventListener("pointerenter", onEnter);
-    anchor.removeEventListener("pointerleave", onLeave);
-    anchor.removeEventListener("focus", onEnter);
-    anchor.removeEventListener("blur", onLeave);
-    if (timers.show !== void 0) clearTimeout(timers.show);
-    if (timers.hide !== void 0) clearTimeout(timers.hide);
-    hide();
-  };
-}
-
 export { autoReposition, choice, confirm, form, overlay, popover, positionAnchored, prompt, toast, tooltip };
-//# sourceMappingURL=overlay.js.map
+
 //# sourceMappingURL=overlay.js.map