kerfjs 4.3.0-beta.1 → 4.4.0-beta.1

package/dist/overlay.js

@@ -37,228 +37,7 @@ function autoReposition(el, anchor, options = {}) {
   };
 }
 
-// src/overlay-toast.ts
-var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
-function toastRegion(container) {
-  if (container !== void 0) return container;
-  const existing = document.querySelector(".kerf-toasts");
-  if (existing !== null) return existing;
-  const region = document.createElement("div");
-  region.className = "kerf-toasts";
-  region.setAttribute("aria-live", "polite");
-  document.body.appendChild(region);
-  return region;
-}
-function toast(content, options = {}) {
-  const {
-    container,
-    className = "kerf-toast",
-    duration = 4e3,
-    role = "status",
-    mode = "stack",
-    collapse = "fade",
-    variant,
-    enterClass,
-    exitClass,
-    exitDuration = 0
-  } = options;
-  const region = toastRegion(container);
-  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
-  if (mode === "replace") {
-    for (const d of [...active]) {
-      if (collapse === "instant") d.removeNow();
-      else d();
-    }
-  }
-  const el = document.createElement("div");
-  el.className = className;
-  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 };
-  if (enterClass !== void 0) {
-    globalThis.requestAnimationFrame(() => {
-      if (!state.dismissed) el.classList.add(enterClass);
-    });
-  }
-  const remove = () => {
-    if (state.removed) return;
-    state.removed = true;
-    state.dismissed = true;
-    if (state.exitTimer !== void 0) clearTimeout(state.exitTimer);
-    disposeMount();
-    el.remove();
-    active.delete(dismiss);
-  };
-  const removeNow = () => {
-    if (state.timer !== void 0) clearTimeout(state.timer);
-    remove();
-  };
-  const fadeOut = () => {
-    if (state.dismissed) return;
-    state.dismissed = true;
-    if (state.timer !== void 0) clearTimeout(state.timer);
-    if (enterClass !== void 0) el.classList.remove(enterClass);
-    if (exitClass !== void 0) el.classList.add(exitClass);
-    if (exitClass !== void 0 || exitDuration > 0) {
-      state.exitTimer = setTimeout(remove, exitDuration);
-    } else {
-      remove();
-    }
-  };
-  function dismiss(options2) {
-    if (options2?.instant === true) removeNow();
-    else fadeOut();
-  }
-  dismiss.removeNow = removeNow;
-  active.add(dismiss);
-  if (duration > 0) state.timer = setTimeout(fadeOut, duration);
-  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 };
-}
+// src/overlay-dialogs.ts
 function confirm(message, options = {}) {
   const {
     container,
@@ -546,6 +325,229 @@ function choice(message, actions, options = {}) {
   void handle.result.then(() => resolveChoice(null));
   return result;
 }
+
+// src/overlay-toast.ts
+var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
+function toastRegion(container) {
+  if (container !== void 0) return container;
+  const existing = document.querySelector(".kerf-toasts");
+  if (existing !== null) return existing;
+  const region = document.createElement("div");
+  region.className = "kerf-toasts";
+  region.setAttribute("aria-live", "polite");
+  document.body.appendChild(region);
+  return region;
+}
+function toast(content, options = {}) {
+  const {
+    container,
+    className = "kerf-toast",
+    duration = 4e3,
+    role = "status",
+    mode = "stack",
+    collapse = "fade",
+    variant,
+    enterClass,
+    exitClass,
+    exitDuration = 0
+  } = options;
+  const region = toastRegion(container);
+  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
+  if (mode === "replace") {
+    for (const d of [...active]) {
+      if (collapse === "instant") d.removeNow();
+      else d();
+    }
+  }
+  const el = document.createElement("div");
+  el.className = className;
+  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 };
+  if (enterClass !== void 0) {
+    globalThis.requestAnimationFrame(() => {
+      if (!state.dismissed) el.classList.add(enterClass);
+    });
+  }
+  const remove = () => {
+    if (state.removed) return;
+    state.removed = true;
+    state.dismissed = true;
+    if (state.exitTimer !== void 0) clearTimeout(state.exitTimer);
+    disposeMount();
+    el.remove();
+    active.delete(dismiss);
+  };
+  const removeNow = () => {
+    if (state.timer !== void 0) clearTimeout(state.timer);
+    remove();
+  };
+  const fadeOut = () => {
+    if (state.dismissed) return;
+    state.dismissed = true;
+    if (state.timer !== void 0) clearTimeout(state.timer);
+    if (enterClass !== void 0) el.classList.remove(enterClass);
+    if (exitClass !== void 0) el.classList.add(exitClass);
+    if (exitClass !== void 0 || exitDuration > 0) {
+      state.exitTimer = setTimeout(remove, exitDuration);
+    } else {
+      remove();
+    }
+  };
+  function dismiss(options2) {
+    if (options2?.instant === true) removeNow();
+    else fadeOut();
+  }
+  dismiss.removeNow = removeNow;
+  active.add(dismiss);
+  if (duration > 0) state.timer = setTimeout(fadeOut, duration);
+  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,