@t007/dialog 0.0.1

package/dist/index.global.js

@@ -0,0 +1,212 @@
+"use strict";
+(() => {
+  // ../utils/dist/index.js
+  function isSameURL(src1, src2) {
+    if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
+    try {
+      const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
+      return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+    } catch {
+      return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+    }
+  }
+  function createEl(tag, props = {}, dataset = {}, styles = {}) {
+    return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
+  }
+  function assignEl(el, props = {}, dataset = {}, styles = {}) {
+    if (!el) return;
+    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+  }
+  function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+    w.t007 ??= {}, w.t007._resourceCache ??= {};
+    if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
+    const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+    if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
+    w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+      (function tryLoad(remaining, el) {
+        const onerror = () => {
+          el?.remove?.();
+          if (remaining > 1) {
+            setTimeout(tryLoad, 1e3, remaining - 1);
+            console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+          } else {
+            delete w.t007._resourceCache[src];
+            reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+          }
+        };
+        const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
+        if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+        else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+        else reject(new Error(`Unsupported resource type: ${type}`));
+      })(attempts);
+    });
+    return w.t007._resourceCache[src];
+  }
+  function onAllMethods(owner, callback) {
+    let proto = owner;
+    while (proto && proto !== Object.prototype) {
+      for (const method of Object.getOwnPropertyNames(proto)) {
+        if (method === "constructor") continue;
+        if ("function" !== typeof Object.getOwnPropertyDescriptor(proto, method)?.value) continue;
+        callback(method, owner);
+      }
+      proto = Object.getPrototypeOf(proto);
+    }
+  }
+  function bindAllMethods(owner) {
+    onAllMethods(owner, (method, owner2) => {
+      owner2[method] = owner2[method].bind(owner2);
+    });
+  }
+  var _SCROLLERS = /* @__PURE__ */ new WeakMap();
+  var _SCROLLER_R_OBSERVER = typeof window !== "undefined" ? new ResizeObserver((entries) => entries.forEach(({ target }) => _SCROLLERS.get(target)?.update())) : null;
+  var _SCROLLER_M_OBSERVER = typeof window !== "undefined" ? new MutationObserver((entries) => {
+    const els = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      let node = entry.target instanceof Element ? entry.target : null;
+      while (node && !_SCROLLERS.has(node)) node = node.parentElement;
+      if (node) els.add(node);
+    }
+    for (const el of els) _SCROLLERS.get(el)?.update();
+  }) : null;
+
+  // src/index.js
+  var T007_Dialog = class {
+    dialog;
+    confirmBtn;
+    cancelBtn;
+    constructor(resolve) {
+      bindAllMethods(this);
+      this.resolve = resolve;
+      document.body.append(
+        this.dialog = createEl("dialog", {
+          className: "t007-dialog",
+          closedBy: "any"
+        })
+      );
+      this.dialog.addEventListener("cancel", this.cancel);
+    }
+    show() {
+      this.dialog.showModal();
+      this.confirmBtn.focus();
+    }
+    remove() {
+      this.dialog.close();
+      this.dialog.remove();
+    }
+    confirm() {
+      this.remove();
+      this.resolve(true);
+    }
+    cancel() {
+      this.remove();
+      this.resolve(false);
+    }
+  };
+  var T007_Alert_Dialog = class extends T007_Dialog {
+    constructor({ message, resolve, options }) {
+      super(resolve);
+      this.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>
+      </div>
+    `;
+      this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
+      this.confirmBtn.addEventListener("click", this.confirm);
+      this.show();
+    }
+  };
+  var T007_Confirm_Dialog = class extends T007_Dialog {
+    constructor({ question, resolve, options }) {
+      super(resolve);
+      this.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>
+      </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.show();
+    }
+  };
+  var T007_Prompt_Dialog = class extends T007_Dialog {
+    constructor({ question, defaultValue, resolve, options }) {
+      super(resolve);
+      this.render(question, defaultValue, options);
+    }
+    async render(question, defaultValue, options = {}) {
+      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>
+        </div>
+      </form>
+    `;
+      (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.FM?.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.show();
+    }
+    show() {
+      this.dialog.showModal();
+      this.form.elements[0]?.focus();
+      this.form.elements[0]?.select?.();
+    }
+    confirm() {
+      this.remove();
+      this.resolve(this.form.elements[0]?.value);
+    }
+    cancel() {
+      this.remove();
+      this.resolve(null);
+    }
+  };
+  function alert(message, options) {
+    return new Promise((resolve) => new T007_Alert_Dialog({ message, resolve, options }));
+  }
+  function confirm(question, options) {
+    return new Promise((resolve) => new T007_Confirm_Dialog({ question, resolve, options }));
+  }
+  function prompt(question, defaultValue, options) {
+    return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
+  }
+  if (typeof window !== "undefined") {
+    window.t007 ??= {};
+    window.T007_DIALOG_CSS_SRC ??= `https://unpkg.com/@t007/dialog@latest/style.css`;
+    window.T007_INPUT_JS_SRC ??= `https://unpkg.com/@t007/input@latest`;
+    t007.alert = alert;
+    t007.confirm = confirm;
+    t007.prompt = prompt;
+    loadResource(T007_DIALOG_CSS_SRC), loadResource(window.T007_INPUT_JS_SRC, "script");
+    window.Alert ??= t007.alert;
+    window.Confirm ??= t007.confirm;
+    window.Prompt ??= t007.prompt;
+    console.log("%cT007 Dialogs attached to window!", "color: darkturquoise");
+  }
+})();

package/dist/index.js

@@ -0,0 +1,143 @@
+// src/index.js
+import { bindAllMethods, createEl, loadResource } from "@t007/utils";
+var T007_Dialog = class {
+  dialog;
+  confirmBtn;
+  cancelBtn;
+  constructor(resolve) {
+    bindAllMethods(this);
+    this.resolve = resolve;
+    document.body.append(
+      this.dialog = createEl("dialog", {
+        className: "t007-dialog",
+        closedBy: "any"
+      })
+    );
+    this.dialog.addEventListener("cancel", this.cancel);
+  }
+  show() {
+    this.dialog.showModal();
+    this.confirmBtn.focus();
+  }
+  remove() {
+    this.dialog.close();
+    this.dialog.remove();
+  }
+  confirm() {
+    this.remove();
+    this.resolve(true);
+  }
+  cancel() {
+    this.remove();
+    this.resolve(false);
+  }
+};
+var T007_Alert_Dialog = class extends T007_Dialog {
+  constructor({ message, resolve, options }) {
+    super(resolve);
+    this.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>
+      </div>
+    `;
+    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
+    this.confirmBtn.addEventListener("click", this.confirm);
+    this.show();
+  }
+};
+var T007_Confirm_Dialog = class extends T007_Dialog {
+  constructor({ question, resolve, options }) {
+    super(resolve);
+    this.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>
+      </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.show();
+  }
+};
+var T007_Prompt_Dialog = class extends T007_Dialog {
+  constructor({ question, defaultValue, resolve, options }) {
+    super(resolve);
+    this.render(question, defaultValue, options);
+  }
+  async render(question, defaultValue, options = {}) {
+    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>
+        </div>
+      </form>
+    `;
+    (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.FM?.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.show();
+  }
+  show() {
+    this.dialog.showModal();
+    this.form.elements[0]?.focus();
+    this.form.elements[0]?.select?.();
+  }
+  confirm() {
+    this.remove();
+    this.resolve(this.form.elements[0]?.value);
+  }
+  cancel() {
+    this.remove();
+    this.resolve(null);
+  }
+};
+function alert(message, options) {
+  return new Promise((resolve) => new T007_Alert_Dialog({ message, resolve, options }));
+}
+function confirm(question, options) {
+  return new Promise((resolve) => new T007_Confirm_Dialog({ question, resolve, options }));
+}
+function prompt(question, defaultValue, options) {
+  return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
+}
+if (typeof window !== "undefined") {
+  window.t007 ??= {};
+  window.T007_DIALOG_CSS_SRC ??= `https://unpkg.com/@t007/dialog@latest/style.css`;
+  window.T007_INPUT_JS_SRC ??= `https://unpkg.com/@t007/input@latest`;
+  t007.alert = alert;
+  t007.confirm = confirm;
+  t007.prompt = prompt;
+  loadResource(T007_DIALOG_CSS_SRC), loadResource(window.T007_INPUT_JS_SRC, "script");
+  window.Alert ??= t007.alert;
+  window.Confirm ??= t007.confirm;
+  window.Prompt ??= t007.prompt;
+  console.log("%cT007 Dialogs attached to window!", "color: darkturquoise");
+}
+export {
+  alert,
+  confirm,
+  prompt
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@t007/dialog",
+  "version": "0.0.1",
+  "description": "A lightweight, pure JS dialog system.",
+  "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tobi007-del/t007-tools.git",
+    "directory": "packages/dialog"
+  },
+  "homepage": "https://github.com/tobi007-del/t007-tools/tree/main/packages/dialog#readme",
+  "bugs": {
+    "url": "https://github.com/tobi007-del/t007-tools/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "browser": "./dist/index.global.js",
+  "unpkg": "./dist/index.global.js",
+  "types": "./src/ts/types/index.d.ts",
+  "style": "./src/css/index.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/ts/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.global.js"
+    },
+    "./style.css": "./src/css/index.css"
+  },
+  "scripts": {
+    "build": "tsup src/index.js --format esm,iife --clean"
+  },
+  "files": [
+    "dist",
+    "./src/ts/types/index.d.ts",
+    "./src/css/index.css"
+  ],
+"keywords": [
+    "t007",
+    "dialog",
+    "modal",
+    "popup",
+    "alert",
+    "confirm",
+    "prompt",
+    "ui",
+    "vanilla-js",
+    "accessible"
+  ],
+  "dependencies": {
+    "@t007/utils": "*"
+  }
+}

package/src/css/index.css

@@ -0,0 +1,251 @@
+:where(:root) {
+  --t007-dialog-font-family: inherit;
+  --t007-dialog-unit: 1rem;
+  --t007-dialog-background: rgb(20, 20, 20);
+  --t007-dialog-gap: 0.8rem;
+  --t007-dialog-width: 26.5rem;
+  --t007-dialog-height: fit-content;
+  --t007-dialog-max-width: 90%;
+  --t007-dialog-max-height: 30rem;
+  --t007-dialog-max-content-height: 12rem;
+  --t007-dialog-padding: 1rem;
+  --t007-dialog-content-padding-block: 1.5rem;
+  --t007-dialog-border-radius: 1rem;
+  --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-message-color: whitesmoke;
+  --t007-dialog-message-font-size: 0.9rem;
+  --t007-dialog-button-font-size: 0.8rem;
+  --t007-dialog-button-text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  --t007-dialog-button-min-width: 4.7rem;
+  --t007-dialog-button-width: unset;
+  --t007-dialog-button-max-width: unset;
+  --t007-dialog-button-min-height: 2.3rem;
+  --t007-dialog-button-height: unset;
+  --t007-dialog-button-max-height: unset;
+  --t007-dialog-button-padding-inline: 1rem;
+  --t007-dialog-button-padding-block: 0.5rem;
+  --t007-dialog-button-border-radius: 1.25rem;
+  --t007-dialog-button-gap: 0.65rem;
+  --t007-button-outline-width: 0.15rem;
+  --t007-button-outline-style: solid;
+  /* animation styles */
+  --t007-dialog-start-duration: 150ms;
+  --t007-dialog-start-transform: translateY(-100%);
+  --t007-dialog-start-opacity: 0;
+}
+
+:where(:root, .t007-dialog) {
+  --t007-confirm-button-color: grey;
+  --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-cancel-button-outline-color: var(--t007-cancel-button-color);
+}
+
+:where(.t007-dialog) .t007-input-field {
+  --t007-input-color: var(--t007-dialog-message-color);
+}
+
+.t007-dialog,
+.t007-dialog *,
+.t007-dialog *::after,
+.t007-dialog *::before {
+  box-sizing: border-box;
+  font-family: var(--t007-dialog-font-family);
+  -webkit-tap-highlight-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+.t007-dialog *:disabled {
+  filter: grayscale(100%);
+  cursor: not-allowed;
+}
+
+.t007-dialog *:focus {
+  outline-style: dashed;
+  outline-offset: 0.1rem;
+  outline-width: 0;
+}
+
+.t007-dialog *:focus-visible {
+  outline-width: 0.15rem;
+  transition: none !important;
+}
+
+.t007-dialog :where(button) {
+  background: none;
+  border: none;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 200ms ease;
+}
+
+:where(button):hover {
+  cursor: pointer;
+  filter: brightness(1.15);
+}
+
+:is(html, body):has(.t007-dialog[open]) {
+  overflow: hidden;
+}
+body:has(.t007-dialog[open]) {
+  overflow-y: visible; /* incase anyone has sticky content */
+}
+
+.t007-dialog,
+.t007-dialog::backdrop {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: none;
+  transition-property: display, transform, opacity, backdrop-filter;
+  transition-duration: var(--t007-dialog-start-duration);
+  transition-behavior: allow-discrete;
+}
+
+.t007-dialog {
+  padding: 0;
+  margin: auto;
+  background: var(--t007-dialog-background);
+  width: var(--t007-dialog-width);
+  height: var(--t007-dialog-height);
+  max-width: var(--t007-dialog-max-width);
+  max-height: var(--t007-dialog-max-height);
+  border: var(--t007-dialog-border);
+  border-radius: var(--t007-dialog-border-radius);
+  box-shadow: var(--t007-dialog-box-shadow);
+  opacity: var(--t007-dialog-start-opacity);
+  transform: var(--t007-dialog-start-transform);
+}
+
+.t007-dialog[open] {
+  opacity: 1;
+  transform: none;
+}
+@starting-style {
+  .t007-dialog[open] {
+    opacity: var(--t007-dialog-start-opacity);
+    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 {
+  background-color: transparent;
+}
+
+.t007-dialog[open]::backdrop {
+  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 {
+    background-color: transparent;
+  }
+}
+
+.t007-dialog > * {
+  padding-inline: var(--t007-dialog-padding);
+}
+
+.t007-dialog-top-section {
+  margin-top: var(--t007-dialog-padding);
+}
+
+.t007-dialog-bottom-section {
+  margin-bottom: var(--t007-dialog-padding);
+}
+
+.t007-dialog-top-section {
+  padding-block: var(--t007-dialog-content-padding-block);
+  max-height: var(--t007-dialog-max-content-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.t007-dialog:has(.field) .t007-dialog-top-section {
+  padding-block-end: 0;
+}
+
+.t007-dialog-question {
+  color: var(--t007-dialog-message-color);
+  font-size: var(--t007-dialog-message-font-size);
+}
+
+.t007-dialog-bottom-section {
+  align-self: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--t007-dialog-button-gap);
+}
+
+.t007-dialog button {
+  font-size: var(--t007-dialog-button-font-size);
+  min-width: var(--t007-dialog-button-min-width);
+  width: var(--t007-dialog-button-width);
+  max-width: var(--t007-dialog-button-max-width);
+  min-height: var(--t007-dialog-button-min-height);
+  height: var(--t007-dialog-button-height);
+  max-height: var(--t007-dialog-button-max-height);
+  padding-inline: var(--t007-dialog-button-padding-inline);
+  padding-block: var(--t007-dialog-button-padding-block);
+  border-radius: var(--t007-dialog-button-border-radius);
+  text-shadow: var(--t007-dialog-button-text-shadow);
+  transition: 100ms ease;
+}
+
+.t007-dialog-confirm-button {
+  color: var(--t007-confirm-button-color);
+  background: var(--t007-confirm-button-background);
+  opacity: 1;
+}
+
+.t007-dialog-cancel-button {
+  color: var(--t007-cancel-button-color);
+  background: var(--t007-cancel-button-background);
+  opacity: 0.9;
+}
+
+.t007-dialog button:hover {
+  cursor: pointer;
+}
+
+.t007-dialog-confirm-button:hover {
+  opacity: 0.9;
+}
+
+.t007-dialog-cancel-button:hover {
+  opacity: 1;
+}
+
+.t007-dialog button:focus {
+  outline-style: var(--t007-button-outline-style);
+  outline-width: var(--t007-button-outline-width);
+}
+
+.t007-dialog-confirm-button:focus {
+  outline-color: var(--t007-confirm-button-outline-color);
+}
+
+.t007-dialog-cancel-button:focus {
+  outline-color: var(--t007-cancel-button-outline-color);
+}

package/src/ts/types/index.d.ts

@@ -0,0 +1,36 @@
+import "@t007/utils";
+import type { FieldOptions } from "@t007/input";
+
+export interface DialogOptions extends FieldOptions {
+  confirmText?: string;
+  cancelText?: string;
+  value?: string;
+}
+
+// BUNDLE EXPORTS & GLOBAL DECLARATIONS
+export function Alert(message: string, options?: DialogOptions): Promise<boolean>;
+export function Confirm(question: string, options?: DialogOptions): Promise<boolean>;
+export function Prompt(
+  question: string,
+  defaultValue?: string,
+  options?: DialogOptions,
+): Promise<string | null>;
+
+declare global {
+  interface T007Namespace {
+    alert: typeof Alert;
+    confirm: typeof Confirm;
+    prompt: typeof Prompt;
+  }
+
+  interface Window {
+    t007: T007Namespace;
+
+    T007_DIALOG_CSS_SRC?: string;
+    T007_INPUT_JS_SRC?: string;
+
+    Alert?: T007Namespace["alert"];
+    Confirm?: T007Namespace["confirm"];
+    Prompt?: T007Namespace["prompt"];
+  }
+}