justalerts 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 Daniel Navarro Machín (DNMjustMe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# justAlerts
+
+Lightweight, accessible, dependency-free alerts and toast notifications for the browser.
+By **Daniel Navarro Machín (DNMjustMe)** · [Live demo and playground](http://dnmjustme.x10.mx/justAlerts/)
+
+*Español más abajo.*
+
+- No jQuery or framework: plain JavaScript, about 5 KB gzipped (JS + CSS).
+- Accessible: screen readers announce alerts and they can be closed with the keyboard.
+- Six positions, titles, progress bar, pause on hover, light/dark theme, Spanish and English.
+- Isolated styles (`ja-` prefix): it never touches your page's classes.
+- TypeScript types included.
+
+---
+
+## English
+
+### Install
+
+```bash
+npm install justalerts
+```
+
+```js
+import justAlerts from "justalerts";
+import "justalerts/css"; // or "justalerts/min.css"
+```
+
+Or straight from a CDN:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justalerts@2/dist/justalerts.min.css">
+<script src="https://cdn.jsdelivr.net/npm/justalerts@2/dist/justalerts.min.js"></script>
+<!-- exposes window.justAlerts -->
+```
+
+### Usage
+
+```js
+justAlerts.success("Saved!");
+justAlerts.danger("Something went wrong", { title: "Error" });
+justAlerts.show({ type: "info", message: "Hello", position: "bottom-right", duration: 5000 });
+justAlerts.closeAll();
+justAlerts.config({ position: "bottom-center", theme: "dark", lang: "en" }); // default options
+```
+
+`show()` and the shortcuts return `{ id, element, close() }`.
+
+### Options
+
+| Option | Default | Description |
+|---|---|---|
+| `type` | `"info"` | `success`, `danger`, `warning` or `info` |
+| `message` | `""` | Alert text (escaped) |
+| `title` | `""` | Optional bold title |
+| `position` | `"top-right"` | `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` |
+| `duration` | `5000` | Visible milliseconds; `0` = never auto-closes |
+| `offset` | `0` | Extra pixels from the edge |
+| `html` | `false` | Treats the message as HTML (trusted content only) |
+| `pauseOnHover` | `true` | Pauses the timer on hover or focus |
+| `progress` | `true` | Time-left bar |
+| `theme` | `"light"` | `light`, `dark` or `auto` |
+| `lang` | `"auto"` | Language of "Close all": `es`, `en` or `auto` |
+
+### v1 compatibility
+
+With the `<script>` tag, `alerta(tipo, mensaje, x, y, tiempo, distancia)` and `close_all()` keep working as in v1. When imported as a module they are available as `justAlerts.legacy()` and `justAlerts.closeAll()`.
+
+---
+
+## Español
+
+### Instalación
+
+```bash
+npm install justalerts
+```
+
+```js
+import justAlerts from "justalerts";
+import "justalerts/css"; // o "justalerts/min.css"
+```
+
+O directamente desde un CDN:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justalerts@2/dist/justalerts.min.css">
+<script src="https://cdn.jsdelivr.net/npm/justalerts@2/dist/justalerts.min.js"></script>
+<!-- crea window.justAlerts -->
+```
+
+### Uso
+
+```js
+justAlerts.success("¡Guardado!");
+justAlerts.danger("Algo salió mal", { title: "Error" });
+justAlerts.show({ type: "info", message: "Hola", position: "bottom-right", duration: 5000 });
+justAlerts.closeAll();
+justAlerts.config({ position: "bottom-center", theme: "dark", lang: "es" }); // opciones por defecto
+```
+
+`show()` y los atajos devuelven `{ id, element, close() }`.
+
+### Opciones
+
+| Opción | Por defecto | Descripción |
+|---|---|---|
+| `type` | `"info"` | `success`, `danger`, `warning` o `info` |
+| `message` | `""` | Texto de la alerta (se escapa) |
+| `title` | `""` | Título opcional en negrita |
+| `position` | `"top-right"` | `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` |
+| `duration` | `5000` | Milisegundos visibles; `0` = no se cierra sola |
+| `offset` | `0` | Píxeles extra desde el borde |
+| `html` | `false` | Interpreta el mensaje como HTML (solo contenido de confianza) |
+| `pauseOnHover` | `true` | Pausa el tiempo al pasar el ratón o enfocar |
+| `progress` | `true` | Barra de tiempo restante |
+| `theme` | `"light"` | `light`, `dark` o `auto` |
+| `lang` | `"auto"` | Idioma de "Cerrar todas": `es`, `en` o `auto` |
+
+### Compatibilidad con la v1
+
+Con la etiqueta `<script>`, `alerta(tipo, mensaje, x, y, tiempo, distancia)` y `close_all()` siguen funcionando como en la v1. Al importarla como módulo están disponibles como `justAlerts.legacy()` y `justAlerts.closeAll()`.
+
+---
+
+MIT © Daniel Navarro Machín (DNMjustMe)

package/dist/justalerts.css

@@ -0,0 +1,138 @@
+/*!
+ * justAlerts v2.0.0 · estilos
+ * Todas las clases llevan el prefijo "ja-": no afecta al resto de la página.
+ */
+.ja-stack {
+  --ja-offset: 16px;
+  position: fixed;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(380px, calc(100vw - 24px));
+  pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+.ja-stack.ja-bottom { flex-direction: column-reverse; }
+.ja-top { top: var(--ja-offset); }
+.ja-bottom { bottom: var(--ja-offset); }
+.ja-top-left, .ja-bottom-left { left: 12px; }
+.ja-top-right, .ja-bottom-right { right: 12px; }
+.ja-top-center, .ja-bottom-center { left: 50%; transform: translateX(-50%); }
+
+.ja-list { display: flex; flex-direction: column; gap: 10px; }
+.ja-bottom .ja-list { flex-direction: column-reverse; }
+
+.ja-alert {
+  --ja-c: #0d6efd;
+  --ja-bg-icon: rgba(13, 110, 253, .12);
+  pointer-events: auto;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px;
+  align-items: start;
+  padding: 14px 12px 16px 14px;
+  border-radius: 12px;
+  border-left: 5px solid var(--ja-c);
+  background: #fff;
+  color: #1f2937;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
+  overflow: hidden;
+  font-size: 15px;
+  line-height: 1.45;
+  text-align: left;
+  animation: ja-in-right .35s cubic-bezier(.2, .8, .2, 1);
+}
+.ja-success { --ja-c: #198754; --ja-bg-icon: rgba(25, 135, 84, .13); }
+.ja-danger  { --ja-c: #dc3545; --ja-bg-icon: rgba(220, 53, 69, .12); }
+.ja-warning { --ja-c: #e8a100; --ja-bg-icon: rgba(232, 161, 0, .15); }
+.ja-info    { --ja-c: #0d6efd; --ja-bg-icon: rgba(13, 110, 253, .12); }
+
+.ja-alert.ja-dark {
+  background: #1f1f1f;
+  color: #ececec;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
+}
+
+.ja-icon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--ja-bg-icon);
+  color: var(--ja-c);
+}
+.ja-icon svg { width: 17px; height: 17px; display: block; }
+
+.ja-body { min-width: 0; padding-top: 4px; }
+.ja-title { display: block; font-weight: 700; margin-bottom: 2px; }
+.ja-message { overflow-wrap: anywhere; }
+
+.ja-close {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  padding: 6px;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  opacity: .55;
+  cursor: pointer;
+  line-height: 0;
+  transition: opacity .2s, background-color .2s;
+}
+.ja-close:hover, .ja-close:focus-visible { opacity: 1; background: rgba(127, 127, 127, .15); outline: none; }
+.ja-close:focus-visible { box-shadow: 0 0 0 2px var(--ja-c); }
+.ja-close svg { width: 14px; height: 14px; display: block; }
+
+.ja-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(127, 127, 127, .15); }
+.ja-progress span {
+  display: block;
+  height: 100%;
+  background: var(--ja-c);
+  transform-origin: left center;
+  animation-name: ja-progress;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.ja-paused .ja-progress span { animation-play-state: paused; }
+
+.ja-close-all {
+  pointer-events: auto;
+  align-self: center;
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  padding: 8px 18px;
+  background: rgba(20, 20, 20, .85);
+  color: #fff;
+  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
+  transition: background-color .2s;
+}
+.ja-close-all:hover, .ja-close-all:focus-visible { background: rgba(20, 20, 20, 1); outline: none; }
+.ja-close-all[hidden] { display: none; }
+
+.ja-top-left .ja-alert, .ja-bottom-left .ja-alert { animation-name: ja-in-left; }
+.ja-top-center .ja-alert { animation-name: ja-in-down; }
+.ja-bottom-center .ja-alert { animation-name: ja-in-up; }
+.ja-alert.ja-leaving { animation: ja-out .26s ease forwards; pointer-events: none; }
+
+@keyframes ja-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
+@keyframes ja-in-left  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
+@keyframes ja-in-down  { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
+@keyframes ja-in-up    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
+@keyframes ja-out      { to { opacity: 0; transform: scale(.94); } }
+@keyframes ja-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+
+@media (max-width: 480px) {
+  .ja-stack { width: auto; left: 8px; right: 8px; transform: none; }
+  .ja-alert { font-size: 14px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ja-alert, .ja-alert.ja-leaving { animation: none; }
+}

package/dist/justalerts.js

@@ -0,0 +1,293 @@
+/*!
+ * justAlerts v2.0.0
+ * Alertas y notificaciones ligeras, accesibles y sin dependencias.
+ * Daniel Navarro Machín (DNMjustMe) · http://dnmjustme.x10.mx/justAlerts/
+ */
+(function (root, factory) {
+  "use strict";
+  var api = factory(root);
+  if (typeof module === "object" && module.exports) {
+    module.exports = api;
+  } else {
+    root.justAlerts = api;
+    // Compatibilidad con la v1: alerta(tipo, mensaje, x, y, tiempo, distancia) y close_all()
+    root.alerta = api.legacy;
+    root.close_all = api.closeAll;
+  }
+})(typeof window !== "undefined" ? window : this, function (root) {
+  "use strict";
+
+  var VERSION = "2.0.0";
+  var TYPES = ["success", "danger", "warning", "info"];
+  var POSITIONS = ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+
+  var TEXTS = {
+    es: { closeAll: "Cerrar todas", close: "Cerrar notificación" },
+    en: { closeAll: "Close all", close: "Close notification" }
+  };
+
+  var svg = function (viewBox, d) {
+    return '<svg aria-hidden="true" focusable="false" viewBox="' + viewBox + '"><path fill="currentColor" d="' + d + '"/></svg>';
+  };
+  var ICONS = {
+    success: svg("0 0 512 512", "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"),
+    danger: svg("0 0 512 512", "M506.3 417 293 53c-16.3-28-57.5-28-74 0L5.7 417c-16.3 27.9 4.1 63 37 63h426.6c32.8 0 53.3-35 37-63zM232 168c0-13.3 10.7-24 24-24s24 10.7 24 24v128c0 13.3-10.7 24-24 24s-24-10.7-24-24V168zm24 248a31.4 31.4 0 1 1 0-62.9 31.4 31.4 0 1 1 0 62.9z"),
+    warning: svg("0 0 512 512", "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"),
+    info: svg("0 0 512 512", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM216 336h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"),
+    close: svg("0 0 384 512", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z")
+  };
+
+  var DEFAULTS = {
+    type: "info",          // success | danger | warning | info
+    title: "",             // título opcional (texto)
+    message: "",
+    position: "top-right", // top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
+    duration: 5000,        // ms; 0 = no se cierra sola
+    offset: 0,             // px extra desde el borde de la pantalla
+    html: false,           // true: el mensaje se interpreta como HTML (solo con contenido de confianza)
+    pauseOnHover: true,    // pausa el tiempo al pasar el ratón o al enfocar la alerta
+    progress: true,        // barra con el tiempo restante
+    theme: "light",        // light | dark | auto
+    lang: "auto"           // es | en | auto (usa <html lang> o el idioma del navegador)
+  };
+
+  var settings = assign({}, DEFAULTS);
+  var counter = 0;
+  var stacks = {};          // posición -> { el, list, closeAll }
+  var pending = [];         // alertas pedidas antes de que exista <body>
+
+  function assign(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var src = arguments[i];
+      if (!src) continue;
+      for (var k in src) {
+        if (Object.prototype.hasOwnProperty.call(src, k) && src[k] !== undefined) target[k] = src[k];
+      }
+    }
+    return target;
+  }
+
+  function texts(opts) {
+    var l = opts.lang === "auto"
+      ? (document.documentElement.lang || navigator.language || "en")
+      : String(opts.lang);
+    l = l.slice(0, 2).toLowerCase();
+    return TEXTS[l] || TEXTS.en;
+  }
+
+  function reducedMotion() {
+    return !!(root.matchMedia && root.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  }
+
+  function isDark(theme) {
+    if (theme === "dark") return true;
+    if (theme === "auto") return !!(root.matchMedia && root.matchMedia("(prefers-color-scheme: dark)").matches);
+    return false;
+  }
+
+  function getStack(position) {
+    if (stacks[position]) return stacks[position];
+    var el = document.createElement("div");
+    var vertical = position.split("-")[0];
+    el.className = "ja-stack ja-" + position + " ja-" + vertical;
+
+    var closeAll = document.createElement("button");
+    closeAll.type = "button";
+    closeAll.className = "ja-close-all";
+    closeAll.hidden = true;
+    closeAll.addEventListener("click", function () { api.closeAll(position); });
+
+    var list = document.createElement("div");
+    list.className = "ja-list";
+
+    el.appendChild(closeAll);
+    el.appendChild(list);
+    document.body.appendChild(el);
+    stacks[position] = { el: el, list: list, closeAll: closeAll };
+    return stacks[position];
+  }
+
+  function refreshStack(position) {
+    var stack = stacks[position];
+    if (!stack) return;
+    var alive = stack.list.querySelectorAll(".ja-alert:not(.ja-leaving)");
+    if (!alive.length && !stack.list.children.length) {
+      if (stack.el.parentNode) stack.el.parentNode.removeChild(stack.el);
+      delete stacks[position];
+      return;
+    }
+    if (alive.length > 1) {
+      var t = texts(settings);
+      stack.closeAll.textContent = t.closeAll + " (" + alive.length + ")";
+      stack.closeAll.hidden = false;
+    } else {
+      stack.closeAll.hidden = true;
+    }
+  }
+
+  function normalize(options) {
+    var o = assign({}, settings, typeof options === "string" ? { message: options } : options);
+    if (TYPES.indexOf(o.type) === -1) o.type = "info";
+    if (POSITIONS.indexOf(o.position) === -1) o.position = DEFAULTS.position;
+    o.duration = Math.max(0, parseInt(o.duration, 10) || 0);
+    o.offset = Math.max(0, parseInt(o.offset, 10) || 0);
+    return o;
+  }
+
+  function create(o) {
+    var t = texts(o);
+    var id = "ja-" + Date.now().toString(36) + "-" + (++counter);
+    var stack = getStack(o.position);
+    if (o.offset) stack.el.style.setProperty("--ja-offset", (16 + o.offset) + "px");
+
+    var el = document.createElement("div");
+    el.id = id;
+    el.className = "ja-alert ja-" + o.type + (isDark(o.theme) ? " ja-dark" : "");
+    var urgent = o.type === "danger" || o.type === "warning";
+    el.setAttribute("role", urgent ? "alert" : "status");
+    el.setAttribute("aria-live", urgent ? "assertive" : "polite");
+    el.setAttribute("aria-atomic", "true");
+
+    var icon = document.createElement("span");
+    icon.className = "ja-icon";
+    icon.innerHTML = ICONS[o.type];
+
+    var body = document.createElement("div");
+    body.className = "ja-body";
+    if (o.title) {
+      var title = document.createElement("strong");
+      title.className = "ja-title";
+      title.textContent = o.title;
+      body.appendChild(title);
+    }
+    var msg = document.createElement("div");
+    msg.className = "ja-message";
+    if (o.html) msg.innerHTML = o.message; else msg.textContent = o.message;
+    body.appendChild(msg);
+
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ja-close";
+    btn.setAttribute("aria-label", t.close);
+    btn.innerHTML = ICONS.close;
+
+    el.appendChild(icon);
+    el.appendChild(body);
+    el.appendChild(btn);
+
+    var bar = null;
+    if (o.duration && o.progress) {
+      var progress = document.createElement("div");
+      progress.className = "ja-progress";
+      bar = document.createElement("span");
+      bar.style.animationDuration = o.duration + "ms";
+      progress.appendChild(bar);
+      el.appendChild(progress);
+    }
+
+    // Lo más nuevo junto al borde de la pantalla
+    stack.list.insertBefore(el, stack.list.firstChild);
+
+    var closed = false;
+    var timer = null;
+    var remaining = o.duration;
+    var startedAt = 0;
+
+    function start() {
+      if (!remaining || closed) return;
+      startedAt = Date.now();
+      timer = setTimeout(close, remaining);
+      el.classList.remove("ja-paused");
+    }
+    function pause() {
+      if (!timer) return;
+      clearTimeout(timer);
+      timer = null;
+      remaining = Math.max(0, remaining - (Date.now() - startedAt));
+      el.classList.add("ja-paused");
+    }
+    function close() {
+      if (closed) return;
+      closed = true;
+      clearTimeout(timer);
+      el.classList.add("ja-leaving");
+      refreshStack(o.position);
+      var done = function () {
+        if (el.parentNode) el.parentNode.removeChild(el);
+        refreshStack(o.position);
+      };
+      if (reducedMotion()) done(); else setTimeout(done, 260);
+    }
+
+    btn.addEventListener("click", close);
+    if (o.pauseOnHover) {
+      el.addEventListener("mouseenter", pause);
+      el.addEventListener("mouseleave", start);
+      el.addEventListener("focusin", pause);
+      el.addEventListener("focusout", function (e) { if (!el.contains(e.relatedTarget)) start(); });
+    }
+
+    refreshStack(o.position);
+    start();
+    return { id: id, element: el, close: close };
+  }
+
+  function flush() {
+    var queue = pending;
+    pending = [];
+    queue.forEach(function (item) { item.handle._resolve(create(item.options)); });
+  }
+
+  var api = {
+    version: VERSION,
+
+    /** Muestra una alerta. Acepta un objeto de opciones o un texto. Devuelve { id, element, close() }. */
+    show: function (options) {
+      var o = normalize(options || {});
+      if (document.body) return create(o);
+      // Antes de que cargue la página: se muestra en cuanto exista <body>
+      var handle = { id: null, element: null, close: function () { handle._closed = true; } };
+      handle._resolve = function (real) {
+        handle.id = real.id; handle.element = real.element; handle.close = real.close;
+        if (handle._closed) real.close();
+      };
+      if (!pending.length) document.addEventListener("DOMContentLoaded", flush);
+      pending.push({ options: o, handle: handle });
+      return handle;
+    },
+
+    success: function (message, options) { return api.show(assign({}, options, { type: "success", message: message })); },
+    danger: function (message, options) { return api.show(assign({}, options, { type: "danger", message: message })); },
+    warning: function (message, options) { return api.show(assign({}, options, { type: "warning", message: message })); },
+    info: function (message, options) { return api.show(assign({}, options, { type: "info", message: message })); },
+
+    /** Cierra todas las alertas, o solo las de una posición. */
+    closeAll: function (position) {
+      Object.keys(stacks).forEach(function (pos) {
+        if (position && typeof position === "string" && pos !== position) return;
+        var list = stacks[pos].list.querySelectorAll(".ja-alert:not(.ja-leaving) .ja-close");
+        Array.prototype.forEach.call(list, function (b) { b.click(); });
+      });
+    },
+
+    /** Cambia las opciones por defecto (p. ej. { position: "bottom-right", theme: "dark", lang: "en" }). */
+    config: function (options) {
+      assign(settings, options);
+      return assign({}, settings);
+    },
+
+    /** API de la v1: alerta(tipo, mensaje, x, y, tiempo, distancia). El mensaje admite HTML, como antes. */
+    legacy: function (tipo, mensaje, x, y, tiempo, distancia) {
+      return api.show({
+        type: tipo,
+        message: mensaje,
+        position: (y === "bottom" ? "bottom" : "top") + "-" + (x === "left" ? "left" : "right"),
+        duration: tiempo,
+        offset: distancia,
+        html: true
+      });
+    }
+  };
+
+  return api;
+});

package/dist/justalerts.min.css

@@ -0,0 +1,4 @@
+/*!
+ * justAlerts v2.0.0 · estilos
+ * Todas las clases llevan el prefijo "ja-": no afecta al resto de la página.
+ */.ja-stack{--ja-offset:16px;position:fixed;z-index:2147483000;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 24px));pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.ja-stack.ja-bottom{flex-direction:column-reverse}.ja-top{top:var(--ja-offset)}.ja-bottom{bottom:var(--ja-offset)}.ja-bottom-left,.ja-top-left{left:12px}.ja-bottom-right,.ja-top-right{right:12px}.ja-bottom-center,.ja-top-center{left:50%;transform:translateX(-50%)}.ja-list{display:flex;flex-direction:column;gap:10px}.ja-bottom .ja-list{flex-direction:column-reverse}.ja-alert{--ja-c:#0d6efd;--ja-bg-icon:rgba(13, 110, 253, .12);pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 12px 16px 14px;border-radius:12px;border-left:5px solid var(--ja-c);background:#fff;color:#1f2937;box-shadow:0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);overflow:hidden;font-size:15px;line-height:1.45;text-align:left;animation:.35s cubic-bezier(.2,.8,.2,1) ja-in-right}.ja-success{--ja-c:#198754;--ja-bg-icon:rgba(25, 135, 84, .13)}.ja-danger{--ja-c:#dc3545;--ja-bg-icon:rgba(220, 53, 69, .12)}.ja-warning{--ja-c:#e8a100;--ja-bg-icon:rgba(232, 161, 0, .15)}.ja-info{--ja-c:#0d6efd;--ja-bg-icon:rgba(13, 110, 253, .12)}.ja-alert.ja-dark{background:#1f1f1f;color:#ececec;box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}.ja-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ja-bg-icon);color:var(--ja-c)}.ja-icon svg{width:17px;height:17px;display:block}.ja-body{min-width:0;padding-top:4px}.ja-title{display:block;font-weight:700;margin-bottom:2px}.ja-message{overflow-wrap:anywhere}.ja-close{appearance:none;border:0;margin:0;padding:6px;border-radius:8px;background:0 0;color:inherit;opacity:.55;cursor:pointer;line-height:0;transition:opacity .2s,background-color .2s}.ja-close:focus-visible,.ja-close:hover{opacity:1;background:rgba(127,127,127,.15);outline:0}.ja-close:focus-visible{box-shadow:0 0 0 2px var(--ja-c)}.ja-close svg{width:14px;height:14px;display:block}.ja-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(127,127,127,.15)}.ja-progress span{display:block;height:100%;background:var(--ja-c);transform-origin:left center;animation-name:ja-progress;animation-timing-function:linear;animation-fill-mode:forwards}.ja-paused .ja-progress span{animation-play-state:paused}.ja-close-all{pointer-events:auto;align-self:center;appearance:none;border:0;border-radius:999px;padding:8px 18px;background:rgba(20,20,20,.85);color:#fff;font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2);transition:background-color .2s}.ja-close-all:focus-visible,.ja-close-all:hover{background:#141414;outline:0}.ja-close-all[hidden]{display:none}.ja-bottom-left .ja-alert,.ja-top-left .ja-alert{animation-name:ja-in-left}.ja-top-center .ja-alert{animation-name:ja-in-down}.ja-bottom-center .ja-alert{animation-name:ja-in-up}.ja-alert.ja-leaving{animation:.26s forwards ja-out;pointer-events:none}@keyframes ja-in-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}@keyframes ja-in-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}@keyframes ja-in-down{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}@keyframes ja-in-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes ja-out{to{opacity:0;transform:scale(.94)}}@keyframes ja-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media (max-width:480px){.ja-stack{width:auto;left:8px;right:8px;transform:none}.ja-alert{font-size:14px}}@media (prefers-reduced-motion:reduce){.ja-alert,.ja-alert.ja-leaving{animation:none}}

package/dist/justalerts.min.js

@@ -0,0 +1,30 @@
+/*!
+ * justAlerts v2.0.0
+ * Alertas y notificaciones ligeras, accesibles y sin dependencias.
+ * Daniel Navarro Machín (DNMjustMe) · http://dnmjustme.x10.mx/justAlerts/
+ */
+!function(e){"use strict";var t=function(e){var t="2.0.0",n=["success","danger","warning","info"],a=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],o={es:{closeAll:"Cerrar todas",close:"Cerrar notificación"},en:{closeAll:"Close all",close:"Close notification"}},s=function(e,t){return'<svg aria-hidden="true" focusable="false" viewBox="'+e+'"><path fill="currentColor" d="'+t+'"/></svg>'},r={success:s("0 0 512 512","M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"),danger:s("0 0 512 512","M506.3 417 293 53c-16.3-28-57.5-28-74 0L5.7 417c-16.3 27.9 4.1 63 37 63h426.6c32.8 0 53.3-35 37-63zM232 168c0-13.3 10.7-24 24-24s24 10.7 24 24v128c0 13.3-10.7 24-24 24s-24-10.7-24-24V168zm24 248a31.4 31.4 0 1 1 0-62.9 31.4 31.4 0 1 1 0 62.9z"),warning:s("0 0 512 512","M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"),info:s("0 0 512 512","M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM216 336h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"),close:s("0 0 384 512","M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z")},l={type:"info",// success | danger | warning | info
+title:"",// título opcional (texto)
+message:"",position:"top-right",// top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
+duration:5e3,// ms; 0 = no se cierra sola
+offset:0,// px extra desde el borde de la pantalla
+html:!1,// true: el mensaje se interpreta como HTML (solo con contenido de confianza)
+pauseOnHover:!0,// pausa el tiempo al pasar el ratón o al enfocar la alerta
+progress:!0,// barra con el tiempo restante
+theme:"light",// light | dark | auto
+lang:"auto"},i=m({},l),c=0,d={},u=[];// alertas pedidas antes de que exista <body>
+function m(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];if(n)for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&void 0!==n[a]&&(e[a]=n[a])}return e}function f(e){var t="auto"===e.lang?document.documentElement.lang||navigator.language||"en":String(e.lang);return t=t.slice(0,2).toLowerCase(),o[t]||o.en}function p(){return!(!e.matchMedia||!e.matchMedia("(prefers-reduced-motion: reduce)").matches)}function v(t){return"dark"===t||"auto"===t&&!(!e.matchMedia||!e.matchMedia("(prefers-color-scheme: dark)").matches)}function h(e){if(d[e])return d[e];var t=document.createElement("div"),n=e.split("-")[0];t.className="ja-stack ja-"+e+" ja-"+n;var a=document.createElement("button");a.type="button",a.className="ja-close-all",a.hidden=!0,a.addEventListener("click",function(){E.closeAll(e)});var o=document.createElement("div");return o.className="ja-list",t.appendChild(a),t.appendChild(o),document.body.appendChild(t),d[e]={el:t,list:o,closeAll:a},d[e]}function g(e){var t=d[e];if(t){var n=t.list.querySelectorAll(".ja-alert:not(.ja-leaving)");if(!n.length&&!t.list.children.length)return t.el.parentNode&&t.el.parentNode.removeChild(t.el),void delete d[e];if(n.length>1){var a=f(i);t.closeAll.textContent=a.closeAll+" ("+n.length+")",t.closeAll.hidden=!1}else t.closeAll.hidden=!0}}function y(e){var t=m({},i,"string"==typeof e?{message:e}:e);return-1===n.indexOf(t.type)&&(t.type="info"),-1===a.indexOf(t.position)&&(t.position=l.position),t.duration=Math.max(0,parseInt(t.duration,10)||0),t.offset=Math.max(0,parseInt(t.offset,10)||0),t}function j(e){var t=f(e),n="ja-"+Date.now().toString(36)+"-"+ ++c,a=h(e.position);e.offset&&a.el.style.setProperty("--ja-offset",16+e.offset+"px");var o=document.createElement("div");o.id=n,o.className="ja-alert ja-"+e.type+(v(e.theme)?" ja-dark":"");var s="danger"===e.type||"warning"===e.type;o.setAttribute("role",s?"alert":"status"),o.setAttribute("aria-live",s?"assertive":"polite"),o.setAttribute("aria-atomic","true");var l=document.createElement("span");l.className="ja-icon",l.innerHTML=r[e.type];var i=document.createElement("div");if(i.className="ja-body",e.title){var d=document.createElement("strong");d.className="ja-title",d.textContent=e.title,i.appendChild(d)}var u=document.createElement("div");u.className="ja-message",e.html?u.innerHTML=e.message:u.textContent=e.message,i.appendChild(u);var m=document.createElement("button");m.type="button",m.className="ja-close",m.setAttribute("aria-label",t.close),m.innerHTML=r.close,o.appendChild(l),o.appendChild(i),o.appendChild(m);var y=null;if(e.duration&&e.progress){var j=document.createElement("div");j.className="ja-progress",(y=document.createElement("span")).style.animationDuration=e.duration+"ms",j.appendChild(y),o.appendChild(j)}
+// Lo más nuevo junto al borde de la pantalla
+a.list.insertBefore(o,a.list.firstChild);var C=!1,E=null,b=e.duration,w=0;function L(){b&&!C&&(w=Date.now(),E=setTimeout(M,b),o.classList.remove("ja-paused"))}function A(){E&&(clearTimeout(E),E=null,b=Math.max(0,b-(Date.now()-w)),o.classList.add("ja-paused"))}function M(){if(!C){C=!0,clearTimeout(E),o.classList.add("ja-leaving"),g(e.position);var t=function(){o.parentNode&&o.parentNode.removeChild(o),g(e.position)};p()?t():setTimeout(t,260)}}return m.addEventListener("click",M),e.pauseOnHover&&(o.addEventListener("mouseenter",A),o.addEventListener("mouseleave",L),o.addEventListener("focusin",A),o.addEventListener("focusout",function(e){o.contains(e.relatedTarget)||L()})),g(e.position),L(),{id:n,element:o,close:M}}function C(){var e=u;u=[],e.forEach(function(e){e.handle._resolve(j(e.options))})}var E={version:t,
+/** Muestra una alerta. Acepta un objeto de opciones o un texto. Devuelve { id, element, close() }. */
+show:function(e){var t=y(e||{});if(document.body)return j(t);
+// Antes de que cargue la página: se muestra en cuanto exista <body>
+var n={id:null,element:null,close:function(){n._closed=!0},_resolve:function(e){n.id=e.id,n.element=e.element,n.close=e.close,n._closed&&e.close()}};return u.length||document.addEventListener("DOMContentLoaded",C),u.push({options:t,handle:n}),n},success:function(e,t){return E.show(m({},t,{type:"success",message:e}))},danger:function(e,t){return E.show(m({},t,{type:"danger",message:e}))},warning:function(e,t){return E.show(m({},t,{type:"warning",message:e}))},info:function(e,t){return E.show(m({},t,{type:"info",message:e}))},
+/** Cierra todas las alertas, o solo las de una posición. */
+closeAll:function(e){Object.keys(d).forEach(function(t){if(!e||"string"!=typeof e||t===e){var n=d[t].list.querySelectorAll(".ja-alert:not(.ja-leaving) .ja-close");Array.prototype.forEach.call(n,function(e){e.click()})}})},
+/** Cambia las opciones por defecto (p. ej. { position: "bottom-right", theme: "dark", lang: "en" }). */
+config:function(e){return m(i,e),m({},i)},
+/** API de la v1: alerta(tipo, mensaje, x, y, tiempo, distancia). El mensaje admite HTML, como antes. */
+legacy:function(e,t,n,a,o,s){return E.show({type:e,message:t,position:("bottom"===a?"bottom":"top")+"-"+("left"===n?"left":"right"),duration:o,offset:s,html:!0})}};return E}(e);"object"==typeof module&&module.exports?module.exports=t:(e.justAlerts=t,
+// Compatibilidad con la v1: alerta(tipo, mensaje, x, y, tiempo, distancia) y close_all()
+e.alerta=t.legacy,e.close_all=t.closeAll)}("undefined"!=typeof window?window:this);

package/index.d.ts

@@ -0,0 +1,67 @@
+// Tipos de justAlerts 2.0 · http://dnmjustme.x10.mx/justAlerts/
+// La librería se exporta con module.exports, por eso se declara con `export =`
+// (con esModuleInterop también funciona `import justAlerts from "justalerts"`).
+
+declare namespace justAlerts {
+  type AlertType = "success" | "danger" | "warning" | "info";
+  type Position =
+    | "top-left" | "top-center" | "top-right"
+    | "bottom-left" | "bottom-center" | "bottom-right";
+
+  interface Options {
+    /** Alert style. Default: "info". */
+    type?: AlertType;
+    /** Optional bold title (plain text). */
+    title?: string;
+    /** Alert text. Escaped unless `html` is true. */
+    message?: string;
+    /** Default: "top-right". */
+    position?: Position;
+    /** Visible milliseconds; 0 = never closes on its own. Default: 5000. */
+    duration?: number;
+    /** Extra pixels from the screen edge. Default: 0. */
+    offset?: number;
+    /** Treat `message` as HTML (trusted content only). Default: false. */
+    html?: boolean;
+    /** Pause the timer on hover or focus. Default: true. */
+    pauseOnHover?: boolean;
+    /** Show the time-left bar. Default: true. */
+    progress?: boolean;
+    /** Default: "light". */
+    theme?: "light" | "dark" | "auto";
+    /** Language of the built-in texts ("Close all"). Default: "auto". */
+    lang?: "es" | "en" | "auto";
+  }
+
+  interface Handle {
+    /** Id of the alert element (null until the page has a <body>). */
+    id: string | null;
+    element: HTMLElement | null;
+    close(): void;
+  }
+
+  interface JustAlerts {
+    readonly version: string;
+    show(options: Options | string): Handle;
+    success(message: string, options?: Options): Handle;
+    danger(message: string, options?: Options): Handle;
+    warning(message: string, options?: Options): Handle;
+    info(message: string, options?: Options): Handle;
+    /** Close every alert, or only the ones at one position. */
+    closeAll(position?: Position): void;
+    /** Change the default options; returns the resulting defaults. */
+    config(options: Options): Required<Options>;
+    /** v1 API: alerta(tipo, mensaje, x, y, tiempo, distancia). The message accepts HTML. */
+    legacy(
+      tipo: AlertType,
+      mensaje: string,
+      x?: "left" | "right",
+      y?: "top" | "bottom",
+      tiempo?: number,
+      distancia?: number
+    ): Handle;
+  }
+}
+
+declare const justAlerts: justAlerts.JustAlerts;
+export = justAlerts;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "justalerts",
+  "version": "2.0.0",
+  "description": "Lightweight, accessible, dependency-free alerts and toast notifications for the browser.",
+  "keywords": [
+    "alerts",
+    "notifications",
+    "toast",
+    "snackbar",
+    "accessible",
+    "vanilla-js",
+    "no-dependencies"
+  ],
+  "homepage": "http://dnmjustme.x10.mx/justAlerts/",
+  "bugs": {
+    "email": "dan.nm9906@gmail.com"
+  },
+  "license": "MIT",
+  "author": "Daniel Navarro Machín (DNMjustMe) <dan.nm9906@gmail.com> (http://dnmjustme.x10.mx/)",
+  "main": "dist/justalerts.js",
+  "types": "index.d.ts",
+  "style": "dist/justalerts.css",
+  "unpkg": "dist/justalerts.min.js",
+  "jsdelivr": "dist/justalerts.min.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./dist/justalerts.js"
+    },
+    "./css": "./dist/justalerts.css",
+    "./min.css": "./dist/justalerts.min.css",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "sync": "node scripts/sync.js",
+    "prepack": "node scripts/sync.js",
+    "test": "node scripts/sync.js && node scripts/test.js"
+  }
+}