@t007/dialog 0.0.22 → 0.0.23

package/README.md

@@ -29,7 +29,7 @@
 
 ## Overview
 
-**@t007/dialog** is a sophisticated UI library that completely overrides the ugly, thread-blocking native browser dialogs with beautiful, non-blocking, Promise-based alternatives.
+**@t007/dialog** is a lightweight UI library that completely overrides the "ugly", thread-blocking native browser dialogs with beautiful, non-blocking, Promise-based alternatives.
 
 ### Why @t007/dialog?
 
@@ -62,7 +62,6 @@ Integrates with the `t007.FM` (Form Manager) to capture, validate, and return us
 - **Promise-Based API**: Use `async/await` for incredibly clean control flow.
 - **Form Validation**: Native form validation built directly into the prompt modal.
 - **Keyboard Navigation**: Native `Esc` key cancellation and auto-focusing capabilities.
-- **Tree-Shakeable**: Import only the specific dialogs you need.
 - **Highly Customizable**: Clean DOM structure with distinct CSS classes for easy overriding.
 
 ---
@@ -163,7 +162,11 @@ Displays a simple message and a confirmation button.
 
   - **`message`** *(String)*: The text to display.
   - **`options`** *(Object)*: Optional configuration.
+      - `options.id` *(String)*: Unique identifier for the dialog for programmatic dismissal.
       - `options.confirmText` *(String)*: Custom text for the button (Default: `"OK"`).
+      - `options.closedBy` *(String)*: Browser behavior for handling dialog closure.
+      - `options.rootElement` *(HTMLElement)*: Render dialog inside this element.
+      - `options.scoped` *(Boolean)*: Whether to restrict interactions to `rootElement` if provided. Defaults to `true`.
   - **Returns**: `Promise<true>`
 
 ### `confirm(question, options)`
@@ -172,8 +175,12 @@ Displays a question with confirm and cancel buttons.
 
   - **`question`** *(String)*: The question to ask the user.
   - **`options`** *(Object)*: Optional configuration.
+      - `options.id` *(String)*: Unique identifier for the dialog for programmatic dismissal.
       - `options.confirmText` *(String)*: Custom text for the confirm button (Default: `"OK"`).
       - `options.cancelText` *(String)*: Custom text for the cancel button (Default: `"Cancel"`).
+      - `options.closedBy` *(String)*: Browser behavior for handling dialog closure.
+      - `options.rootElement` *(HTMLElement)*: Render dialog inside this element.
+      - `options.scoped` *(Boolean)*: Whether to restrict interactions to `rootElement` if provided. Defaults to `true`.
   - **Returns**: `Promise<boolean>` (`true` if confirmed, `false` if cancelled).
 
 ### `prompt(question, defaultValue, options)`
@@ -182,19 +189,34 @@ Displays an input field to collect data from the user. Note: This automatically
 
   - **`question`** *(String)*: The prompt instructions.
   - **`defaultValue`** *(String)*: The initial value placed inside the input.
-  - **`options`** *(Object)*: Optional configuration passed directly to the input field generation.
+  - **`options`** *(Object)*: Optional @t007/input configuration passed directly to the input field generation.
+      - `options.id` *(String)*: Unique identifier for the dialog for programmatic dismissal, also used as the input's ID.
       - `options.confirmText` *(String)*: Custom text for the submit button.
       - `options.cancelText` *(String)*: Custom text for the cancel button.
+      - `options.closedBy` *(String)*: Browser behavior for handling dialog closure.
+      - `options.rootElement` *(HTMLElement)*: Render dialog inside this element.
       - *Accepts standard HTML input attributes (type, required, placeholder, etc.)*
+      - `options.scoped` *(Boolean)*: Whether to restrict interactions to `rootElement` if provided. Defaults to `true`.
   - **Returns**: `Promise<String | null>` (Returns the string value, or `null` if cancelled).
 
+### `dismiss(id, response)`
+Programatically dismiss a dialog by id or all dialogs when no id is provided.
+
+  - **`id`** *(String)*: Optional unique identifier of the dialog to dismiss. If not provided, all dialogs will be dismissed.
+  - **`response`** *(Any)*: Optional value to resolve the dialog's promise with. If not provided, defaults to `true` for confirm and alert dialogs, and `null` for prompt dialogs.
+
+#### Backdrop behavior
+
+- Default mode uses native `<dialog>.showModal()` and native `::backdrop`.
+- Scoped mode (`rootElement`) uses `<dialog>.show()` with a pseudo backdrop.
+
 -----
 
 ## Customization
 
 The dialogs are built with semantic, easily targetable CSS classes. You can easily override these in your own stylesheet to match your application's theme.
 
-### CSS Selectors
+### CSS Selectors & Variables
 
   - `.t007-dialog`: The main `<dialog>` container.
   - `.t007-dialog-top-section`: The wrapper for the text content.
@@ -204,17 +226,28 @@ The dialogs are built with semantic, easily targetable CSS classes. You can easi
   - `.t007-dialog-cancel-button`: The secondary/cancel button.
   - `.t007-input-form`: The form wrapper used exclusively in the `prompt` dialog.
 
-Example override:
+#### Override Starter (Chrome like)
 
 ```css
-/* Change the confirm button to a red destructive button */
-.t007-dialog-confirm-button {
-  background-color: #dc3545;
-  color: white;
-  border-radius: 8px;
+:root {
+  --t007-dialog-backdrop-background: rgba(0, 0, 0, 0.6);
+  --t007-dialog-backdrop-filter: none;
+  --t007-cancel-button-color: dodgerblue;
+  /* ...check source code for all variables... */
+}
+.t007-dialog {
+  margin-top: 0;
 }
 ```
 
+#### Specificity Note
+
+- Start with `:root` for shared dialog tokens.
+- If a token does not apply, override directly on `.t007-dialog`.
+- For targeted styling, use child selectors like `.t007-dialog-question`, `.t007-dialog-confirm-button`, and `.t007-dialog-cancel-button`.
+- For strong app themes (e.g. `html[data-theme="dark"]`), use equal/stronger selectors like `html[data-theme="dark"] .t007-dialog`.
+- Check source code for more details.
+
 -----
 
 ## Author

package/dist/index.css

@@ -15,12 +15,12 @@
   --t007-dialog-border: 0.05rem solid rgba(255, 255, 255, 0.25);
   --t007-dialog-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(0, 0, 0, 0.5);
   --t007-dialog-backdrop-background: rgba(0, 0, 0, 0.2);
-  --t007-dialog-backdrop-blur: blur(6px);
+  --t007-dialog-backdrop-filter: blur(6px);
   --t007-dialog-message-color: whitesmoke;
   --t007-dialog-message-font-size: 0.9rem;
-  --t007-dialog-button-font-size: 0.8rem;
+  --t007-dialog-button-font-size: 0.85rem;
   --t007-dialog-button-text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-  --t007-dialog-button-min-width: 4.7rem;
+  --t007-dialog-button-min-width: 4.5rem;
   --t007-dialog-button-width: unset;
   --t007-dialog-button-max-width: unset;
   --t007-dialog-button-min-height: 2.3rem;
@@ -41,7 +41,7 @@
   --t007-confirm-button-background: var(--t007-cancel-button-color);
   --t007-cancel-button-color: greenyellow;
   --t007-cancel-button-background: var(--t007-confirm-button-color);
-  --t007-confirm-button-outline-color: var(--t007-confirm-button-color);
+  --t007-confirm-button-outline-color: var(--t007-cancel-button-color);
   --t007-cancel-button-outline-color: var(--t007-cancel-button-color);
 }
 :where(.t007-dialog) .t007-input-field {
@@ -62,11 +62,11 @@
   cursor: not-allowed;
 }
 .t007-dialog *:focus {
-  outline-style: dashed;
-  outline-offset: 0.1rem;
+  outline-style: solid;
+  outline-offset: 2px;
   outline-width: 0;
 }
-.t007-dialog *:focus-visible {
+.t007-dialog *:is(:focus-visible, :where(.focus-outline:focus)) {
   outline-width: 0.15rem;
   transition: none !important;
 }
@@ -89,8 +89,13 @@
 body:has(.t007-dialog[open]) {
   overflow-y: visible;
 }
+*:where(:has(> .t007-dialog.t007-dialog-scoped[open])) {
+  position: relative;
+  overflow: hidden !important;
+}
 .t007-dialog,
-.t007-dialog::backdrop {
+.t007-dialog::backdrop,
+.t007-dialog.t007-dialog-scoped::before {
   position: fixed;
   inset: 0;
   margin: auto;
@@ -103,6 +108,15 @@ body:has(.t007-dialog[open]) {
   transition-duration: var(--t007-dialog-start-duration);
   transition-behavior: allow-discrete;
 }
+.t007-dialog.t007-dialog-scoped,
+.t007-dialog.t007-dialog-scoped::before {
+  position: absolute;
+}
+.t007-dialog,
+.t007-dialog form {
+  flex-direction: column;
+  gap: var(--t007-dialog-gap);
+}
 .t007-dialog {
   padding: 0;
   margin: auto;
@@ -116,8 +130,14 @@ body:has(.t007-dialog[open]) {
   box-shadow: var(--t007-dialog-box-shadow);
   opacity: var(--t007-dialog-start-opacity);
   transform: var(--t007-dialog-start-transform);
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+.t007-dialog.t007-dialog-scoped {
+  z-index: 2147483647;
 }
 .t007-dialog[open] {
+  display: flex;
   opacity: 1;
   transform: none;
 }
@@ -127,26 +147,28 @@ body:has(.t007-dialog[open]) {
     transform: var(--t007-dialog-start-transform);
   }
 }
-.t007-dialog,
-.t007-dialog form {
-  flex-direction: column;
-  gap: var(--t007-dialog-gap);
-}
-.t007-dialog[open],
-.t007-dialog form {
-  display: flex;
-}
-.t007-dialog::backdrop {
+.t007-dialog::backdrop,
+.t007-dialog.t007-dialog-scoped::before {
   background-color: transparent;
 }
-.t007-dialog[open]::backdrop {
+.t007-dialog.t007-dialog-scoped::before {
+  content: "";
+  top: -100lvh;
+  left: -100lvw;
+  width: 200lvw;
+  height: 200lvh;
+  transform: translateZ(-1px);
+}
+.t007-dialog[open]::backdrop,
+.t007-dialog.t007-dialog-scoped[open]::before {
   display: block;
   background-color: var(--t007-dialog-backdrop-background);
   -webkit-backdrop-filter: var(--t007-dialog-backdrop-blur);
   backdrop-filter: var(--t007-dialog-backdrop-blur);
 }
 @starting-style {
-  .t007-dialog[open]::backdrop {
+  .t007-dialog[open]::backdrop,
+  .t007-dialog.t007-dialog-scoped[open]::before {
     background-color: transparent;
   }
 }
@@ -168,6 +190,9 @@ body:has(.t007-dialog[open]) {
 .t007-dialog:has(.field) .t007-dialog-top-section {
   padding-block-end: 0;
 }
+.t007-dialog form {
+  display: flex;
+}
 .t007-dialog-question {
   color: var(--t007-dialog-message-color);
   font-size: var(--t007-dialog-message-font-size);

package/dist/index.d.ts

@@ -2,13 +2,19 @@ import "@t007/utils";
 import type { FieldOptions } from "@t007/input";
 
 /** Shared options for alert, confirm, and prompt dialogs. */
-export interface DialogOptions extends FieldOptions {
-  /** Text for the confirmation button. */
+export interface DialogOptions {
+  /** Unique identifier for the dialog for programmatic dismissal. Auto-generated by default. */
+  id?: string;
+  /** Text for the confirmation button. Defaults to "OK". */
   confirmText?: string;
-  /** Text for the cancel button. */
+  /** Text for the cancel button where applicable. Defaults to "Cancel". */
   cancelText?: string;
-  /** Default value used by prompt dialogs. */
-  value?: string;
+  /** Browser behavior for handling dialog closure. Defaults to "any". */
+  closedBy?: HTMLDialogElement["closedBy"];
+  /** Render dialog inside a specific root element instead of document body. */
+  rootElement?: HTMLElement;
+  /** Whether to restrict interactions to `rootElement` if provided. Defaults to `true`. */
+  scoped?: boolean;
 }
 
 // BUNDLE EXPORTS & GLOBAL DECLARATIONS
@@ -18,24 +24,25 @@ export interface DialogOptions extends FieldOptions {
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the user choice.
  */
-export function Alert(message: string, options?: DialogOptions): Promise<boolean>;
+export function alert(message: string, options?: DialogOptions): Promise<boolean>;
 /** Show a confirm dialog and resolve with the user choice.
  * @param question Question shown in the dialog body.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to true when confirmed.
  */
-export function Confirm(question: string, options?: DialogOptions): Promise<boolean>;
+export function confirm(question: string, options?: DialogOptions): Promise<boolean>;
 /** Show a prompt dialog and resolve with the entered value.
  * @param question Question shown in the dialog body.
  * @param defaultValue Initial value for the prompt input.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the entered string or null.
  */
-export function Prompt(
-  question: string,
-  defaultValue?: string,
-  options?: DialogOptions,
-): Promise<string | null>;
+export function prompt(question: string, defaultValue?: string, options?: DialogOptions & FieldOptions): Promise<string | null>;
+/** Dismiss a dialog by id or all dialogs when no id is provided.
+ * @param id Optional unique identifier of the dialog to dismiss. If not provided, all dialogs will be dismissed.
+ * @param response Optional value to resolve the dialog's promise with. If not provided, defaults to `true` for confirm and alert dialogs, and `null` for prompt dialogs.
+ */
+export function dismiss(id?: string, response?: any): void;
 
 declare global {
   interface T007Namespace {
@@ -45,10 +52,13 @@ declare global {
     confirm: typeof Confirm;
     /** Browser prompt helper. */
     prompt: typeof Prompt;
+    /** Dismisses a dialog by id or all dialogs when no id is provided. */
+    dismiss: (id?: string, res?: any) => void;
   }
   interface Window {
     Alert?: T007Namespace["alert"];
     Confirm?: T007Namespace["confirm"];
     Prompt?: T007Namespace["prompt"];
+    Dismiss?: T007Namespace["dismiss"];
   }
 }

package/dist/index.global.js

@@ -1,6 +1,11 @@
 "use strict";
 (() => {
-  // ../../node_modules/sia-reactor/dist/chunk-RVYL3OLW.js
+  // ../../../sia-reactor/dist/chunk-IBAPWB27.js
+  function clamp(min = 0, val, max = Infinity) {
+    return Math.min(Math.max(val, min), max);
+  }
+
+  // ../../../sia-reactor/dist/chunk-RVYL3OLW.js
   function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
     return assignEl(el, props, dataset, styles), el;
   }
@@ -17,7 +22,7 @@
     }
   }
 
-  // ../../node_modules/sia-reactor/dist/chunk-3OT72G7R.js
+  // ../../../sia-reactor/dist/chunk-3OT72G7R.js
   function onAllMethods(owner, callback, skipOwn = true, nested = false) {
     let proto = owner;
     while (proto && proto !== Object.prototype) {
@@ -35,7 +40,24 @@
     });
   }
 
-  // ../utils/dist/index.js
+  // ../../../sia-reactor/dist/chunk-EZ4VRGYI.js
+  var CTX = {
+    /** Flag indicating whether the application is running in development mode. */
+    isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
+    /** Flag indicating whether a cascade is currently ongoing so reactors can allow all writes. */
+    isCascading: false,
+    /** Active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
+    autotracker: null
+  };
+  var RTR_BATCH = "undefined" !== typeof window ? ("undefined" !== typeof queueMicrotask ? queueMicrotask : setTimeout).bind(window) : "undefined" !== typeof process && process.nextTick ? process.nextTick : setTimeout;
+  var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
+  var NIL = Object.freeze({});
+  var NOOP = () => {
+  };
+
+  // ../utils/dist/chunk-XVFFZZJA.js
+  var INTERACTIVE_SELECTOR = 'button,[href],input,label,select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]:not([tabindex="-1"])';
+  var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
   var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
   function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
     w.t007 ??= {}, w.t007._resourceCache ??= {};
@@ -64,12 +86,22 @@
     });
     return w.t007._resourceCache[src];
   }
+  function getActiveElement(root = document) {
+    const activeEl = root.activeElement;
+    return !activeEl ? null : activeEl.shadowRoot ? getActiveElement(activeEl.shadowRoot) : activeEl;
+  }
+  function isDef(val) {
+    return "undefined" !== typeof val;
+  }
   function isSym(val) {
     return "symbol" === typeof val;
   }
   function isStr(val) {
     return "string" === typeof val;
   }
+  function uid(prefix = "") {
+    return prefix + Date.now().toString(36) + "_" + performance.now().toString(36).replace(".", "") + "_" + Math.random().toString(36).slice(2);
+  }
   function isSameURL(src1, src2) {
     if (!isStr(src1) || !isStr(src2) || !src1 || !src2) return false;
     try {
@@ -80,8 +112,7 @@
     }
   }
   if ("undefined" !== typeof window) {
-    window.t007 ??= {};
-    t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
+    (window.t007 ??= {}).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
     window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
     window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
@@ -90,138 +121,355 @@
     window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
   }
 
-  // src/index.js
+  // ../utils/dist/chunk-AI5O3OGE.js
+  var stacks = /* @__PURE__ */ new WeakMap();
+  function initOutsideClick(el, { enabled = false, onOutsideClick = NOOP, clickOnClick = true, clickOnEscape = true, clickOnFocusOut = false, allowInputs = true, root = window, scoped = true, capture = true } = NIL) {
+    const existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+    if (!enabled || existing) return existing ? existing : void 0;
+    scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+    const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = el.getBoundingClientRect()) => {
+      if (stack.at(-1) !== el || p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom) return false;
+      return (!scoped ? true : root.contains(t)) && onOutsideClick(e);
+    }, handleClick = ((e) => clickOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => clickOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutsideClick(e)), handleFocusOut = (e) => clickOnFocusOut && onScopedOut(e, e.relatedTarget);
+    root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
+    root.addEventListener("keydown", handleEscape, capture), el.addEventListener("focusout", handleFocusOut, capture);
+    if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
+    const destroy = () => {
+      root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
+      root.removeEventListener("keydown", handleEscape, capture);
+      el.removeEventListener("focusout", handleFocusOut, capture);
+      t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
+    };
+    return t007._outsiders.set(el, destroy), destroy;
+  }
+  var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
+  var stacks2 = /* @__PURE__ */ new WeakMap();
+  function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = NIL) {
+    const existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+    if (!enabled || existing) return existing ? existing : void 0;
+    scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+    const stack = stacks2.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => Array.prototype.filter.call(c.querySelectorAll(INTERACTIVE_SELECTOR), (el2) => !el2.hasAttribute("disabled") && !el2.hasAttribute("aria-hidden") && !el2.hasAttribute("data-focus-guard")), resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false) => {
+      if (!scoped) return resetFocus(pre ? -1 : 0);
+      else if (root.hasAttribute("tabindex")) return root.focus();
+      const items = getFocusable();
+      if (!items.length) return resetFocus(0, null);
+      const all = getFocusable(root.parentElement?.closest(`:has(${INTERACTIVE_SELECTOR})`) || document.body);
+      for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!root.contains(target = all[i])) return target.focus();
+      (pre ? first : last).blur();
+    }, handleFocusIn = () => stack.at(-1) === el && getActiveElement() !== root && !el.contains(getActiveElement()) && setTimeout(resetFocus, 0, 0), handleInitialBlur = () => initial.classList.remove(ringClassName);
+    first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
+    last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
+    root.addEventListener("focusin", handleFocusIn, capture);
+    if (!el.querySelector(":focus")) !initial ? resetFocus() : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
+    if (!stack.includes(el)) stack.push(el), stacks2.set(root, stack);
+    const destroy = () => {
+      focused?.isConnected && focused.focus(), first.remove(), last.remove();
+      root.removeEventListener("focusin", handleFocusIn, capture);
+      initial?.removeEventListener("blur", handleInitialBlur, capture);
+      t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
+    };
+    return t007._ftrappers.set(el, destroy), destroy;
+  }
+  var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+  var getTargetIndex = ({ key, currIndex, length, gridX, gridY, vGridY, loop, ctrlKey = false, rtl }) => {
+    const rowStart = currIndex - currIndex % gridX, rowEnd = Math.min(rowStart + gridX - 1, length - 1), colStart = currIndex % gridX, colEnd = Math.min(colStart + gridX * (gridY - 1), length - 1), canX = gridX > 1, canY = gridY > 1, horizontalMove = rtl ? { ArrowRight: canX ? -1 : 0, ArrowLeft: canX ? 1 : 0 } : { ArrowRight: canX ? 1 : 0, ArrowLeft: canX ? -1 : 0 }, move = { ...horizontalMove, ArrowDown: canY ? gridX : 0, ArrowUp: canY ? -gridX : 0, Home: ctrlKey ? 0 : rowStart, End: ctrlKey ? length - 1 : rowEnd, PageDown: (vGridY - 1) * gridX, PageUp: -(vGridY - 1) * gridX }[key] ?? 0;
+    let targetIndex = key === "Home" || key === "End" ? move : currIndex + move;
+    if (key === "ArrowDown") {
+      if (!loop && targetIndex >= length) targetIndex -= move;
+    } else if (key === "ArrowUp") {
+      if (!loop && targetIndex < 0) targetIndex += Math.abs(move);
+    } else if (key === "PageDown") {
+      if (!loop && targetIndex >= length) targetIndex = colEnd;
+    } else if (key === "PageUp") {
+      if (!loop && targetIndex < 0) targetIndex = colStart;
+    }
+    return loop ? (targetIndex + length) % length : clamp(0, targetIndex, length - 1);
+  };
+  var getCommonAncestor = (first, second) => {
+    if (!first) return null;
+    if (!second) return first.parentElement;
+    const ancestors = /* @__PURE__ */ new Set();
+    let current = first;
+    while (current) ancestors.add(current), current = current.parentElement;
+    current = second;
+    while (current) {
+      if (ancestors.has(current)) return current;
+      current = current.parentElement;
+    }
+    return null;
+  };
+  var getGrid = (all, x = true, y = true, vY = true) => {
+    const len = all.length, grid = {};
+    if (!len) return grid;
+    let cols = all.findIndex((el) => el.offsetTop !== all[0].offsetTop);
+    cols = cols > 0 ? cols : len;
+    if (x) grid.x = cols;
+    let rows = Math.ceil(len / cols);
+    if (y) grid.y = rows;
+    if (vY) {
+      const itemHeight = all[0].offsetHeight ?? 0, containerHeight = getCommonAncestor(all[0], all[1])?.clientHeight ?? 0;
+      rows = clamp(1, Math.floor(containerHeight / itemHeight), rows) || rows;
+      grid.vY = rows;
+    }
+    return grid;
+  };
+  var H_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
+  var V_NAV_KEYS = ["ArrowUp", "ArrowDown", "PageDown", "PageUp"];
+  var NAV_KEYS = [...H_NAV_KEYS, ...V_NAV_KEYS];
+  var DEFAULT_CONFIG = {
+    enabled: null,
+    selector: "[data-arrow-item]",
+    focusOnHover: true,
+    loop: true,
+    virtual: false,
+    typeahead: false,
+    rovingTab: null,
+    defaultTabbableIndex: null,
+    baseTabIndex: "0",
+    resetMs: 500,
+    rtl: null,
+    grid: {},
+    activeClass: "focus-outlined",
+    inputSelector: "input,textarea,[contenteditable='true']",
+    focusOptions: { preventScroll: false },
+    scrollIntoView: { block: "nearest", inline: "nearest" },
+    onSelect: NOOP,
+    onFocusOut: NOOP
+  };
+
+  // ../utils/dist/hooks/vanilla.js
+  function initArrowNavigation(container, config = {}) {
+    const existing = (t007._ashooters ??= /* @__PURE__ */ new WeakMap()).get(container);
+    if (!config.enabled || existing) return existing ? existing : void 0;
+    const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
+    let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
+    const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? getComputedStyle(container).direction === "rtl", shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+    const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
+      if (shouldSnub() || !items.length) return null;
+      let index = targetIndex;
+      let attempts = 0;
+      while (attempts < items.length) {
+        if (!isItemDisabled(items[index])) return index;
+        index = getTargetIndex({ key: e.key, currIndex: index, gridX, gridY, vGridY, length: items.length, loop, ctrlKey: e.ctrlKey, rtl });
+        attempts++;
+      }
+      return null;
+    };
+    const goToIndex = (targetIndex, e = { key: "ArrowRight" }) => {
+      if (shouldSnub()) return;
+      const idx = getAbleIndex(targetIndex, e);
+      if (idx === null) return;
+      resetActiveIndex(idx);
+      onSelect?.(items[idx], e), updateDOM();
+      if (virtual) {
+        items[idx]?.scrollIntoView(scrollIntoView);
+        container.setAttribute("aria-activedescendant", items[idx].id || "");
+      } else items[idx]?.focus(focusOptions);
+    };
+    const updateDOM = () => {
+      if (shouldSnub() || !virtual && !roving || !items.length) return;
+      const hasDefaultTabbable = defaultTabbableIndex !== null && defaultTabbableIndex !== void 0, tabbableIndex = hasDefaultTabbable && !isItemDisabled(items[defaultTabbableIndex]) ? defaultTabbableIndex : getAbleIndex(0);
+      for (let i = 0, len = items.length; i < len; i++) {
+        const el = items[i], isActive = i === activeIndex;
+        if (roving) el.setAttribute("tabindex", i === activeIndex || activeIndex === -1 && i === tabbableIndex ? baseTabIndex : "-1");
+        else if (virtual && activeIndex > 0) el.setAttribute("tabindex", i > activeIndex ? baseTabIndex : "-1");
+        else el.setAttribute("tabindex", baseTabIndex);
+        if (virtual) el.setAttribute("aria-selected", String(isActive)), el.classList.toggle(activeClass, isActive);
+      }
+    };
+    const resetActiveIndex = (index = -1) => (activeIndex = index, updateDOM());
+    const typeAhead = (key) => {
+      if (shouldSnub() || !typeahead) return;
+      buffer += key.toLowerCase();
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => buffer = "", resetMs);
+      const start = activeIndex >= 0 ? activeIndex + 1 : 0;
+      for (let i = 0; i < items.length; i++) {
+        const idx = (start + i) % items.length, label = (items[idx].getAttribute("data-label") || items[idx].innerText || "").trim().toLowerCase();
+        if (label.startsWith(buffer)) return goToIndex(idx);
+      }
+    };
+    const simulateKey = (e) => {
+      if (shouldSnub() || getActiveElement()?.matches("option")) return;
+      const { key } = e;
+      if (!items.length) return;
+      if (virtual && (key === " " || key === "Enter")) return items[activeIndex]?.click();
+      if (e.target?.matches(DEFAULT_CONFIG.inputSelector) && !virtual) return;
+      if (typeahead && key.length === 1 && /^[a-z0-9]$/i.test(key)) return typeAhead(key);
+      if (!NAV_KEYS.includes(key)) return;
+      if (!(e.currentTarget?.matches(DEFAULT_CONFIG.inputSelector) && gridX <= 1 && H_NAV_KEYS.includes(key))) e.preventDefault?.(), e.stopPropagation?.();
+      const currIndex = virtual ? activeIndex : items.indexOf(getActiveElement()), targetIndex = getTargetIndex({ currIndex, gridX, gridY, vGridY, length: items.length, loop, rtl, key, ctrlKey: e.ctrlKey });
+      goToIndex(targetIndex, e);
+    };
+    getItems(), updateDOM();
+    const interactiveEls = !virtual ? [container] : [container.querySelector(inputSelector)];
+    for (const el of interactiveEls) el?.addEventListener("keydown", simulateKey);
+    const handleFocusOut = (e) => {
+      if (!container.contains(e.relatedTarget)) return resetActiveIndex(), updateDOM(), onFocusOut?.(e);
+      const among = items.includes(e.relatedTarget);
+      if (!among && (defaultTabbableIndex ?? -1) >= 0) return resetActiveIndex(), updateDOM();
+      if (virtual) resetActiveIndex(), updateDOM();
+    };
+    container.addEventListener("focusout", handleFocusOut);
+    const handleHover = (e) => {
+      if (!enabled || !focusOnHover) return;
+      const el = e.currentTarget, idx = items.indexOf(el);
+      if (idx !== -1) goToIndex(idx);
+    };
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    const mutationObserver = new MutationObserver(() => {
+      const oldEl = items[activeIndex];
+      getItems();
+      const newEl = items[activeIndex];
+      updateDOM();
+      if (oldEl && newEl && oldEl === newEl) return;
+      resetActiveIndex();
+      updateDOM();
+    });
+    mutationObserver.observe(container, { childList: true, subtree: true });
+    const setGrid = (g) => {
+      if (g.x !== void 0) gridX = g.x;
+      if (g.y !== void 0) gridY = g.y;
+      if (g.vY !== void 0) vGridY = g.vY;
+    };
+    const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    setGrid(grid), calcGrid();
+    const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    const resizeObserver = new ResizeObserver(calcGrid);
+    if (ancestor) resizeObserver.observe(ancestor);
+    const destroy = () => {
+      for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
+      container.removeEventListener("focusout", handleFocusOut);
+      for (const el of items) el.removeEventListener("mouseenter", handleHover);
+      mutationObserver.disconnect(), resizeObserver.disconnect();
+      if (timeout) clearTimeout(timeout);
+    };
+    const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+    return t007._ashooters.set(container, handle), handle;
+  }
+  var removeArrowNavigation = (container) => t007._ashooters?.get(container)?.destroy();
+
+  // src/js/index.js
   var T007_Dialog = class {
-    dialog;
-    confirmBtn;
-    cancelBtn;
-    constructor(resolve) {
+    constructor(resolve, { id, closedBy: by, rootElement: root = document.body, scoped = true }) {
       bindAllMethods(this);
       this.resolve = resolve;
-      document.body.append(
-        this.dialog = createEl("dialog", {
-          className: "t007-dialog",
-          closedBy: "any"
-        })
-      );
+      t007.dialogs.set(this.id = id ?? uid("t007_dialog_"), this);
+      this.rootElement = root?.isConnected ? root : document.body, this.rootScoped = this.rootElement !== document.body, this.scoped = this.rootScoped && scoped;
+      this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }));
       this.dialog.addEventListener("cancel", this.cancel);
+      initArrowNavigation(this.dialog, { enabled: true, rovingTab: false });
+      this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutsideClick: this.cancel, root: this.rootElement, scoped: this.scoped });
     }
     show() {
-      this.dialog.showModal();
-      this.confirmBtn.focus();
+      this.dialog[this.rootScoped ? "show" : "showModal"]();
+      initFocusTrap(this.dialog, { enabled: true, root: this.rootElement, scoped: this.scoped });
     }
     remove() {
-      this.dialog.close();
-      this.dialog.remove();
+      removeArrowNavigation(this.dialog), removeFocusTrap(this.dialog), removeOutsideClick(this.dialog);
+      this.dialog.open && this.dialog.close(), this.dialog.remove(), t007.dialogs.delete(this.id);
     }
-    confirm() {
-      this.remove();
-      this.resolve(true);
+    confirm(res = true) {
+      this.remove(), this.resolve(res instanceof Event ? true : res);
     }
-    cancel() {
-      this.remove();
-      this.resolve(false);
+    cancel(res = false) {
+      this.remove(), this.resolve(res instanceof Event ? false : res);
     }
   };
   var T007_Alert_Dialog = class extends T007_Dialog {
-    constructor({ message, resolve, options }) {
-      super(resolve);
-      this.render(message, options);
+    constructor({ message, resolve, options = {} }) {
+      super(resolve, options), this.render(message, options);
     }
-    render(message, options = {}) {
+    render(message, options) {
       this.dialog.innerHTML = `
       <div class="t007-dialog-top-section">
         <p class="t007-dialog-question">${message}</p>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
+        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
       </div>
     `;
-      this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-      this.confirmBtn.addEventListener("click", this.confirm);
+      this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
       this.show();
     }
   };
   var T007_Confirm_Dialog = class extends T007_Dialog {
-    constructor({ question, resolve, options }) {
-      super(resolve);
-      this.render(question, options);
+    constructor({ question, resolve, options = {} }) {
+      super(resolve, options), this.render(question, options);
     }
-    render(question, options = {}) {
+    render(question, options) {
       this.dialog.innerHTML = `
       <div class="t007-dialog-top-section">
         <p class="t007-dialog-question">${question}</p>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
-        <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
       </div>
     `;
-      this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-      this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
-      this.confirmBtn.addEventListener("click", this.confirm);
-      this.cancelBtn.addEventListener("click", this.cancel);
+      this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
+      this.dialog.querySelector(".t007-dialog-cancel-button").addEventListener("click", this.cancel);
       this.show();
     }
   };
   var T007_Prompt_Dialog = class extends T007_Dialog {
-    constructor({ question, defaultValue, resolve, options }) {
-      super(resolve);
-      this.render(question, defaultValue, options);
+    constructor({ question, defaultValue, resolve, options = {} }) {
+      super(resolve, options), this.render(question, defaultValue, options);
     }
-    async render(question, defaultValue, options = {}) {
+    async render(question, defaultValue, options) {
+      options = { ...options, value: defaultValue };
       await loadResource(window.T007_INPUT_JS_SRC, "script");
-      options.value = defaultValue;
       this.dialog.innerHTML = `
       <form class="t007-input-form" novalidate>
         <div class="t007-dialog-top-section">
           <p class="t007-dialog-question">${question}</p>
         </div>
         <div class="t007-dialog-bottom-section">
-          <button class="t007-dialog-confirm-button" type="submit">${options.confirmText || "OK"}</button>
-          <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+          <button type="submit" data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+          <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
         </div>
       </form>
     `;
-      (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.FM?.field(options) || createEl("input", options));
+      (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.field?.(options) || createEl("input", options));
       this.form.onSubmit = this.confirm;
-      this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-      this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
-      this.cancelBtn.addEventListener("click", this.cancel);
-      t007.FM?.handleFormValidation?.(this.form);
+      this.dialog.querySelector(".t007-dialog-cancel-button").addEventListener("click", this.cancel);
+      t007.handleFormValidation?.(this.form);
       this.show();
     }
     show() {
-      this.dialog.showModal();
-      this.form.elements[0]?.focus();
-      this.form.elements[0]?.select?.();
+      super.show(), this.form?.elements?.[0]?.select?.();
     }
     confirm() {
-      this.remove();
-      this.resolve(this.form.elements[0]?.value);
+      super.confirm(this.form.elements[0]?.value);
     }
     cancel() {
-      this.remove();
-      this.resolve(null);
+      super.cancel(null);
     }
   };
   function alert(message, options) {
-    return new Promise((resolve) => new T007_Alert_Dialog({ message, resolve, options }));
+    return new Promise((resolve) => new T007_Alert_Dialog({ resolve, message, options }));
   }
   function confirm(question, options) {
-    return new Promise((resolve) => new T007_Confirm_Dialog({ question, resolve, options }));
+    return new Promise((resolve) => new T007_Confirm_Dialog({ resolve, question, options }));
   }
   function prompt(question, defaultValue, options) {
-    return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
+    return new Promise((resolve) => new T007_Prompt_Dialog({ resolve, question, defaultValue, options }));
+  }
+  function dismiss(id, response) {
+    if (isDef(id)) return t007.dialogs.get(id)?.cancel(response);
+    for (const dialog of t007.dialogs.values()) dialog.cancel(response);
   }
   if ("undefined" !== typeof window) {
     t007.alert = alert;
     t007.confirm = confirm;
     t007.prompt = prompt;
+    t007.dismiss = dismiss;
+    t007.dialogs = /* @__PURE__ */ new Map();
     loadResource(T007_DIALOG_CSS_SRC), loadResource(window.T007_INPUT_JS_SRC, "script");
     window.Alert ??= t007.alert;
     window.Confirm ??= t007.confirm;
     window.Prompt ??= t007.prompt;
+    window.Dismiss ??= t007.dismiss;
     console.log("%cT007 Dialogs attached to window!", "color: darkturquoise");
   }
 })();

package/dist/index.js

@@ -1,140 +1,131 @@
-// src/index.js
-import { bindAllMethods, createEl, loadResource } from "@t007/utils";
+// src/js/index.js
+import { initArrowNavigation, initFocusTrap, initOutsideClick, removeArrowNavigation, removeFocusTrap, removeOutsideClick } from "@t007/utils/hooks/vanilla";
+import { bindAllMethods, createEl, isDef, loadResource, uid } from "@t007/utils";
 var T007_Dialog = class {
-  dialog;
-  confirmBtn;
-  cancelBtn;
-  constructor(resolve) {
+  constructor(resolve, { id, closedBy: by, rootElement: root = document.body, scoped = true }) {
     bindAllMethods(this);
     this.resolve = resolve;
-    document.body.append(
-      this.dialog = createEl("dialog", {
-        className: "t007-dialog",
-        closedBy: "any"
-      })
-    );
+    t007.dialogs.set(this.id = id ?? uid("t007_dialog_"), this);
+    this.rootElement = root?.isConnected ? root : document.body, this.rootScoped = this.rootElement !== document.body, this.scoped = this.rootScoped && scoped;
+    this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }));
     this.dialog.addEventListener("cancel", this.cancel);
+    initArrowNavigation(this.dialog, { enabled: true, rovingTab: false });
+    this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutsideClick: this.cancel, root: this.rootElement, scoped: this.scoped });
   }
   show() {
-    this.dialog.showModal();
-    this.confirmBtn.focus();
+    this.dialog[this.rootScoped ? "show" : "showModal"]();
+    initFocusTrap(this.dialog, { enabled: true, root: this.rootElement, scoped: this.scoped });
   }
   remove() {
-    this.dialog.close();
-    this.dialog.remove();
+    removeArrowNavigation(this.dialog), removeFocusTrap(this.dialog), removeOutsideClick(this.dialog);
+    this.dialog.open && this.dialog.close(), this.dialog.remove(), t007.dialogs.delete(this.id);
   }
-  confirm() {
-    this.remove();
-    this.resolve(true);
+  confirm(res = true) {
+    this.remove(), this.resolve(res instanceof Event ? true : res);
   }
-  cancel() {
-    this.remove();
-    this.resolve(false);
+  cancel(res = false) {
+    this.remove(), this.resolve(res instanceof Event ? false : res);
   }
 };
 var T007_Alert_Dialog = class extends T007_Dialog {
-  constructor({ message, resolve, options }) {
-    super(resolve);
-    this.render(message, options);
+  constructor({ message, resolve, options = {} }) {
+    super(resolve, options), this.render(message, options);
   }
-  render(message, options = {}) {
+  render(message, options) {
     this.dialog.innerHTML = `
       <div class="t007-dialog-top-section">
         <p class="t007-dialog-question">${message}</p>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
+        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
       </div>
     `;
-    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-    this.confirmBtn.addEventListener("click", this.confirm);
+    this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
     this.show();
   }
 };
 var T007_Confirm_Dialog = class extends T007_Dialog {
-  constructor({ question, resolve, options }) {
-    super(resolve);
-    this.render(question, options);
+  constructor({ question, resolve, options = {} }) {
+    super(resolve, options), this.render(question, options);
   }
-  render(question, options = {}) {
+  render(question, options) {
     this.dialog.innerHTML = `
       <div class="t007-dialog-top-section">
         <p class="t007-dialog-question">${question}</p>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
-        <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
       </div>
     `;
-    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-    this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
-    this.confirmBtn.addEventListener("click", this.confirm);
-    this.cancelBtn.addEventListener("click", this.cancel);
+    this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
+    this.dialog.querySelector(".t007-dialog-cancel-button").addEventListener("click", this.cancel);
     this.show();
   }
 };
 var T007_Prompt_Dialog = class extends T007_Dialog {
-  constructor({ question, defaultValue, resolve, options }) {
-    super(resolve);
-    this.render(question, defaultValue, options);
+  constructor({ question, defaultValue, resolve, options = {} }) {
+    super(resolve, options), this.render(question, defaultValue, options);
   }
-  async render(question, defaultValue, options = {}) {
+  async render(question, defaultValue, options) {
+    options = { ...options, value: defaultValue };
     await loadResource(window.T007_INPUT_JS_SRC, "script");
-    options.value = defaultValue;
     this.dialog.innerHTML = `
       <form class="t007-input-form" novalidate>
         <div class="t007-dialog-top-section">
           <p class="t007-dialog-question">${question}</p>
         </div>
         <div class="t007-dialog-bottom-section">
-          <button class="t007-dialog-confirm-button" type="submit">${options.confirmText || "OK"}</button>
-          <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+          <button type="submit" data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+          <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
         </div>
       </form>
     `;
-    (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.FM?.field(options) || createEl("input", options));
+    (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.field?.(options) || createEl("input", options));
     this.form.onSubmit = this.confirm;
-    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
-    this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
-    this.cancelBtn.addEventListener("click", this.cancel);
-    t007.FM?.handleFormValidation?.(this.form);
+    this.dialog.querySelector(".t007-dialog-cancel-button").addEventListener("click", this.cancel);
+    t007.handleFormValidation?.(this.form);
     this.show();
   }
   show() {
-    this.dialog.showModal();
-    this.form.elements[0]?.focus();
-    this.form.elements[0]?.select?.();
+    super.show(), this.form?.elements?.[0]?.select?.();
   }
   confirm() {
-    this.remove();
-    this.resolve(this.form.elements[0]?.value);
+    super.confirm(this.form.elements[0]?.value);
   }
   cancel() {
-    this.remove();
-    this.resolve(null);
+    super.cancel(null);
   }
 };
 function alert(message, options) {
-  return new Promise((resolve) => new T007_Alert_Dialog({ message, resolve, options }));
+  return new Promise((resolve) => new T007_Alert_Dialog({ resolve, message, options }));
 }
 function confirm(question, options) {
-  return new Promise((resolve) => new T007_Confirm_Dialog({ question, resolve, options }));
+  return new Promise((resolve) => new T007_Confirm_Dialog({ resolve, question, options }));
 }
 function prompt(question, defaultValue, options) {
-  return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
+  return new Promise((resolve) => new T007_Prompt_Dialog({ resolve, question, defaultValue, options }));
+}
+function dismiss(id, response) {
+  if (isDef(id)) return t007.dialogs.get(id)?.cancel(response);
+  for (const dialog of t007.dialogs.values()) dialog.cancel(response);
 }
 if ("undefined" !== typeof window) {
   t007.alert = alert;
   t007.confirm = confirm;
   t007.prompt = prompt;
+  t007.dismiss = dismiss;
+  t007.dialogs = /* @__PURE__ */ new Map();
   loadResource(T007_DIALOG_CSS_SRC), loadResource(window.T007_INPUT_JS_SRC, "script");
   window.Alert ??= t007.alert;
   window.Confirm ??= t007.confirm;
   window.Prompt ??= t007.prompt;
+  window.Dismiss ??= t007.dismiss;
   console.log("%cT007 Dialogs attached to window!", "color: darkturquoise");
 }
 export {
   alert,
   confirm,
+  dismiss,
   prompt
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/dialog",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "A lightweight, pure JS dialog system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "ecosystem",
     "ui",
     "vanilla-js",
+    "react",
     "dialog",
     "modal",
     "popup",
@@ -55,6 +56,6 @@
     "accessible"
   ],
   "dependencies": {
-    "@t007/utils": "^0.0.25"
+    "@t007/utils": "^0.0.26"
   }
 }