@helixui/library 3.4.1 → 3.6.0

package/dist/shared/{toast-factory-CL2BzdSB.js → toast-factory-Dht3pVsw.js}

@@ -1,9 +1,9 @@
-import { css as w, html as i, nothing as m } from "lit";
-import { property as u, query as S, state as I, customElement as y } from "lit/decorators.js";
-import { classMap as C } from "lit/directives/class-map.js";
-import { d as E } from "./dev-warn-YlwPHjtX.js";
-import { H as A } from "./helix-element-BNEYeiys.js";
-const L = w`
+import { css as V, html as f, nothing as E } from "lit";
+import { property as T, query as U, state as Z, customElement as G } from "lit/decorators.js";
+import { classMap as X } from "lit/directives/class-map.js";
+import { d as ee } from "./dev-warn-YlwPHjtX.js";
+import { H as J } from "./helix-element-BNEYeiys.js";
+const te = V`
   /* ─── hx-toast host ─── */
 
   :host {
@@ -196,7 +196,7 @@ const L = w`
       border: 1px solid ButtonText;
     }
   }
-`, M = w`
+`, se = V`
   :host {
     display: block;
     position: fixed;
@@ -270,19 +270,19 @@ const L = w`
     --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);
   }
 `;
-var $ = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (t, s, r, o) => {
-  for (var e = o > 1 ? void 0 : o ? H(s, r) : s, l = t.length - 1, n; l >= 0; l--)
-    (n = t[l]) && (e = (o ? n(s, r, e) : n(e)) || e);
-  return o && e && $(s, r, e), e;
+var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, _ = (e, t, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? oe(t, n) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (o = (s ? h(t, n, o) : h(o)) || o);
+  return s && o && ne(t, n, o), o;
 };
-const z = {
+const re = {
   default: 3e3,
   info: 3e3,
   success: 3e3,
   warning: 4e3,
   danger: 6e3
 };
-let a = class extends A {
+let d = class extends J {
   constructor() {
     super(...arguments), this.variant = "default", this.duration = 5e3, this.closable = !1, this.open = !1, this.labelClose = "Dismiss notification", this._hasActionContent = !1, this._timer = null, this._timerStartedAt = null, this._timerRemaining = null;
   }
@@ -295,8 +295,8 @@ let a = class extends A {
   connectedCallback() {
     super.connectedCallback(), this._internals.role = this._role, this._internals.ariaAtomic = "true", this.setAttribute("role", this._role);
   }
-  updated(t) {
-    super.updated(t), t.has("variant") && (this._internals.role = this._role, this.setAttribute("role", this._role)), (t.has("open") || t.has("duration")) && this._auditWcag223(), t.has("open") && (this.open ? (this.removeAttribute("aria-hidden"), this._emitShow(), this.duration > 0 && !this._reducedMotion && !this._hasActionContent && this._startTimer()) : (this.setAttribute("aria-hidden", "true"), this._clearTimer(), this._emitHide()));
+  updated(e) {
+    super.updated(e), e.has("variant") && (this._internals.role = this._role, this.setAttribute("role", this._role)), (e.has("open") || e.has("duration")) && this._auditWcag223(), e.has("open") && (this.open ? (this.removeAttribute("aria-hidden"), this._emitShow(), this.duration > 0 && !this._reducedMotion && !this._hasActionContent && this._startTimer()) : (this.setAttribute("aria-hidden", "true"), this._clearTimer(), this._emitHide()));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._clearTimer();
@@ -315,10 +315,10 @@ let a = class extends A {
    */
   _auditWcag223() {
     if (this.duration <= 0) return;
-    const t = z[this.variant] ?? 0;
-    this.duration < t && E(
+    const e = re[this.variant] ?? 0;
+    this.duration < e && ee(
       "hx-toast",
-      `duration=${this.duration}ms is shorter than the WCAG 2.2.3 minimum (${t}ms) for variant="${this.variant}". Increase duration or set duration=0 for persistent toasts (recommended for variant="danger").`
+      `duration=${this.duration}ms is shorter than the WCAG 2.2.3 minimum (${e}ms) for variant="${this.variant}". Increase duration or set duration=0 for persistent toasts (recommended for variant="danger").`
     );
   }
   // ─── Public API ───
@@ -332,19 +332,19 @@ let a = class extends A {
   }
   // ─── Private Helpers ───
   /** @internal */
-  _startTimer(t) {
+  _startTimer(e) {
     this._clearTimerHandle();
-    const s = t ?? this.duration;
-    this._timerStartedAt = Date.now(), this._timerRemaining = s, this._timer = setTimeout(() => {
+    const t = e ?? this.duration;
+    this._timerStartedAt = Date.now(), this._timerRemaining = t, this._timer = setTimeout(() => {
       this.open = !1;
-    }, s);
+    }, t);
   }
   /** @internal */
   _pauseTimer() {
     if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null)
       return;
-    const t = Date.now() - this._timerStartedAt;
-    this._timerRemaining = Math.max(0, this._timerRemaining - t), this._clearTimerHandle();
+    const e = Date.now() - this._timerStartedAt;
+    this._timerRemaining = Math.max(0, this._timerRemaining - e), this._clearTimerHandle();
   }
   /** @internal */
   _clearTimerHandle() {
@@ -361,11 +361,11 @@ let a = class extends A {
   /** @internal */
   _emitHide() {
     this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 }));
-    let t = !1;
-    const s = () => {
-      t || (t = !0, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
-    }, r = this._toastEl;
-    r && r.addEventListener("transitionend", s, { once: !0 }), setTimeout(s, 300);
+    let e = !1;
+    const t = () => {
+      e || (e = !0, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
+    }, n = this._toastEl;
+    n && n.addEventListener("transitionend", t, { once: !0 }), setTimeout(t, 300);
   }
   // ─── Event Handlers ───
   /** @internal */
@@ -389,9 +389,9 @@ let a = class extends A {
     this.hide();
   }
   /** @internal */
-  _handleActionSlotChange(t) {
-    const s = t.target;
-    this._hasActionContent = s.assignedNodes({ flatten: !0 }).length > 0, this._hasActionContent && this.open && this._pauseTimer();
+  _handleActionSlotChange(e) {
+    const t = e.target;
+    this._hasActionContent = t.assignedNodes({ flatten: !0 }).length > 0, this._hasActionContent && this.open && this._pauseTimer();
   }
   // ─── ARIA Helpers ───
   /**
@@ -410,7 +410,7 @@ let a = class extends A {
   // ensuring the severity is not conveyed by color alone.
   /** @internal */
   _renderSuccessIcon() {
-    return i`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
+    return f`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
       <path
         fill="currentColor"
         d="M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z"
@@ -419,7 +419,7 @@ let a = class extends A {
   }
   /** @internal */
   _renderWarningIcon() {
-    return i`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
+    return f`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
       <path
         fill="currentColor"
         d="M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z"
@@ -428,7 +428,7 @@ let a = class extends A {
   }
   /** @internal */
   _renderDangerIcon() {
-    return i`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
+    return f`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
       <path
         fill="currentColor"
         d="M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z"
@@ -437,7 +437,7 @@ let a = class extends A {
   }
   /** @internal */
   _renderInfoIcon() {
-    return i`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
+    return f`<svg viewBox="0 0 20 20" aria-hidden="true" width="16" height="16">
       <path
         fill="currentColor"
         d="M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z"
@@ -456,12 +456,12 @@ let a = class extends A {
       case "info":
         return this._renderInfoIcon();
       default:
-        return m;
+        return E;
     }
   }
   /** @internal */
   get _severityLabel() {
-    return a._SEVERITY_LABELS[this.variant] ?? "";
+    return d._SEVERITY_LABELS[this.variant] ?? "";
   }
   // ─── Render ───
   //
@@ -473,11 +473,11 @@ let a = class extends A {
   // older NVDA/JAWS that read both role and aria-live as separate live
   // regions).
   render() {
-    const t = this._severityLabel;
-    return i`
+    const e = this._severityLabel;
+    return f`
       <div
         part="base"
-        class=${C({
+        class=${X({
       toast: !0,
       [`toast--${this.variant}`]: !0
     })}
@@ -486,8 +486,8 @@ let a = class extends A {
         @focusin=${this._handleFocusIn}
         @focusout=${this._handleFocusOut}
       >
-        ${this.open ? i`
-              ${t ? i`<span class="toast__severity-label">${t}: </span>` : m}
+        ${this.open ? f`
+              ${e ? f`<span class="toast__severity-label">${e}: </span>` : E}
               <span part="icon" class="toast__icon">
                 <slot name="icon">${this._defaultIcon}</slot>
               </span>
@@ -497,7 +497,7 @@ let a = class extends A {
               <span part="action" class="toast__action">
                 <slot name="action" @slotchange=${this._handleActionSlotChange}></slot>
               </span>
-              ${this.closable ? i`
+              ${this.closable ? f`
                     <button
                       part="close-button"
                       class="toast__close"
@@ -518,57 +518,57 @@ let a = class extends A {
                         <path d="M18 6L6 18M6 6l12 12" />
                       </svg>
                     </button>
-                  ` : m}
-            ` : m}
+                  ` : E}
+            ` : E}
       </div>
     `;
   }
 };
-a.styles = [L];
-a._SEVERITY_LABELS = {
+d.styles = [te];
+d._SEVERITY_LABELS = {
   success: "Success",
   warning: "Warning",
   danger: "Error",
   info: "Info"
 };
-c([
-  u({ type: String, reflect: !0 })
-], a.prototype, "variant", 2);
-c([
-  u({ type: Number })
-], a.prototype, "duration", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], a.prototype, "closable", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], a.prototype, "open", 2);
-c([
-  u({ attribute: "label-close" })
-], a.prototype, "labelClose", 2);
-c([
-  S(".toast")
-], a.prototype, "_toastEl", 2);
-c([
-  I()
-], a.prototype, "_hasActionContent", 2);
-a = c([
-  y("hx-toast")
-], a);
-var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, g = (t, s, r, o) => {
-  for (var e = o > 1 ? void 0 : o ? B(s, r) : s, l = t.length - 1, n; l >= 0; l--)
-    (n = t[l]) && (e = (o ? n(s, r, e) : n(e)) || e);
-  return o && e && D(s, r, e), e;
+_([
+  T({ type: String, reflect: !0 })
+], d.prototype, "variant", 2);
+_([
+  T({ type: Number })
+], d.prototype, "duration", 2);
+_([
+  T({ type: Boolean, reflect: !0 })
+], d.prototype, "closable", 2);
+_([
+  T({ type: Boolean, reflect: !0 })
+], d.prototype, "open", 2);
+_([
+  T({ attribute: "label-close" })
+], d.prototype, "labelClose", 2);
+_([
+  U(".toast")
+], d.prototype, "_toastEl", 2);
+_([
+  Z()
+], d.prototype, "_hasActionContent", 2);
+d = _([
+  G("hx-toast")
+], d);
+var ae = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, B = (e, t, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? ie(t, n) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (o = (s ? h(t, n, o) : h(o)) || o);
+  return s && o && ae(t, n, o), o;
 };
-let p = class extends A {
+let L = class extends J {
   constructor() {
     super(...arguments), this.placement = "bottom-end", this.stackLimit = 3;
   }
   render() {
-    return i`
+    return f`
       <div
         part="base"
-        class=${C({
+        class=${X({
       "toast-stack": !0,
       [`toast-stack--${this.placement}`]: !0
     })}
@@ -578,45 +578,168 @@ let p = class extends A {
     `;
   }
 };
-p.styles = [M];
-g([
-  u({ type: String, reflect: !0 })
-], p.prototype, "placement", 2);
-g([
-  u({ type: Number, attribute: "stack-limit" })
-], p.prototype, "stackLimit", 2);
-p = g([
-  y("hx-toast-stack")
-], p);
-const b = 1500, v = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakSet();
-function Y(t) {
+L.styles = [se];
+B([
+  T({ type: String, reflect: !0 })
+], L.prototype, "placement", 2);
+B([
+  T({ type: Number, attribute: "stack-limit" })
+], L.prototype, "stackLimit", 2);
+L = B([
+  G("hx-toast-stack")
+], L);
+const W = 1500, A = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap();
+function z(e, t, n) {
+  const s = e.get(t);
+  s ? (s.push(n), s.sort((o, l) => o - l)) : e.set(t, [n]);
+}
+function D(e, t, n) {
+  const s = e.get(t);
+  if (!s) return;
+  const o = s.indexOf(n);
+  o >= 0 && s.splice(o, 1), s.length === 0 && e.delete(t);
+}
+function K(e) {
+  const t = (S.get(e) ?? 1) - 1;
+  t > 0 ? S.set(e, t) : S.delete(e);
+}
+function P(e) {
+  const t = A.get(e);
+  if (!(!t || t.status !== "queued")) {
+    if (t.status = "cancelled", t.removalObserver !== null && (t.removalObserver.disconnect(), t.removalObserver = null), t.timerId !== null && (clearTimeout(t.timerId), t.timerId = null), K(t.stack), D(H, t.stack, t.fireAt), t.displacement) {
+      const { target: n, fireAt: s, timerId: o } = t.displacement;
+      clearTimeout(o), I.delete(n), D(y, t.stack, s);
+    }
+    for (const n of t.synthDisplacements)
+      clearTimeout(n.timerId), D(y, t.stack, n.fireAt);
+    t.synthDisplacements = [], e.style.removeProperty("display"), e.remove(), A.delete(e);
+  }
+}
+function le(e, t) {
+  const n = A.get(e);
+  !n || n.status !== "queued" || (n.status = "showing", n.timerId = null, n.removalObserver !== null && (n.removalObserver.disconnect(), n.removalObserver = null), K(n.stack), D(H, n.stack, n.fireAt), e.style.removeProperty("display"), t(), e.show(), $.set(e, Date.now()), A.delete(e));
+}
+function me(e) {
   if (typeof document > "u") throw new Error("toast() requires a browser environment");
-  const s = t.placement ?? "bottom-end", r = `hx-toast-stack[placement="${s}"]`;
-  let o = document.querySelector(r);
-  if (o || (o = document.createElement("hx-toast-stack"), o.placement = s, document.body.appendChild(o)), o.stackLimit > 0) {
-    const n = [...o.querySelectorAll("hx-toast")].filter((h) => h.open).filter((h) => !f.has(h)), T = n.length + 1 - o.stackLimit;
-    for (let h = 0; h < T; h++) {
-      const d = n[h];
-      if (!d) break;
-      const _ = v.get(d), x = _ === void 0 ? Number.POSITIVE_INFINITY : Date.now() - _;
-      if (x >= b)
-        d.hide();
-      else {
-        const k = b - x;
-        f.add(d), setTimeout(() => {
-          f.delete(d), d.open && d.hide();
-        }, k);
+  const t = e.placement ?? "bottom-end", n = `hx-toast-stack[placement="${t}"]`;
+  let s = document.querySelector(n);
+  s || (s = document.createElement("hx-toast-stack"), s.placement = t, document.body.appendChild(s));
+  let o = 0;
+  const l = [], h = [];
+  if (s.stackLimit > 0) {
+    const x = [...s.querySelectorAll("hx-toast")].filter((c) => c.open).filter((c) => !I.has(c)), b = S.get(s) ?? 0, m = x.length + b + 1 - s.stackLimit, w = [];
+    for (let c = 0; c < m; c++) {
+      const u = x[c];
+      if (u) {
+        const i = $.get(u), a = i === void 0 ? Number.POSITIVE_INFINITY : Date.now() - i;
+        if (a >= W) {
+          u.hide();
+          continue;
+        }
+        const C = W - a, v = Date.now() + C;
+        I.add(u), z(y, s, v);
+        const R = s, g = setTimeout(() => {
+          I.delete(u), D(y, R, v), u.open && u.hide();
+        }, C);
+        w.push(v), l.push({ target: u, fireAt: v, timerId: g }), C > o && (o = C);
+        continue;
+      }
+      const O = y.get(s) ?? [], N = H.get(s) ?? [], k = [...O].sort((i, a) => i - a), Q = [...N].sort((i, a) => i - a);
+      for (const i of Q)
+        for (let a = 0; a < k.length; a++)
+          if (k[a] <= i) {
+            k.splice(a, 1);
+            break;
+          }
+      for (const i of w) {
+        const a = k.indexOf(i);
+        a >= 0 && k.splice(a, 1);
+      }
+      let M = k[0];
+      if (M === void 0) {
+        const i = [];
+        for (const g of O) i.push(g);
+        for (const g of N) i.push(g);
+        for (const g of w) i.push(g);
+        if (i.length === 0)
+          break;
+        M = Math.max(...i) + W;
+        const a = M, C = a - Date.now(), v = s;
+        z(y, v, a);
+        const R = setTimeout(() => {
+          D(y, v, a);
+          const Y = [...v.querySelectorAll("hx-toast")].filter(
+            (j) => j.open && !I.has(j)
+          )[0];
+          Y && Y.hide();
+        }, C);
+        h.push({ fireAt: a, timerId: R });
       }
+      w.push(M);
+      const F = M - Date.now();
+      F > o && (o = Math.max(0, F));
     }
   }
-  const e = document.createElement("hx-toast");
-  return e.variant = t.variant ?? "default", e.duration = t.duration ?? 3e3, e.closable = !0, e.textContent = t.message, e.addEventListener("hx-after-hide", () => {
-    v.delete(e), f.delete(e), e.remove();
-  }), o.appendChild(e), e.show(), v.set(e, Date.now()), e;
+  const r = document.createElement("hx-toast");
+  r.variant = e.variant ?? "default", r.duration = e.duration ?? 3e3, r.closable = !0, r.textContent = e.message;
+  const q = () => {
+    r.addEventListener("hx-after-hide", () => {
+      $.delete(r), I.delete(r), r.remove();
+    });
+  };
+  if (o > 0) {
+    const p = (b) => {
+      b.stopImmediatePropagation(), b.stopPropagation();
+    };
+    r.addEventListener("hx-hide", p, { once: !0 }), r.addEventListener("hx-after-hide", p, { once: !0 }), r.style.display = "none";
+    const x = r.hide.bind(r);
+    r.hide = function() {
+      const m = A.get(r);
+      if ((m == null ? void 0 : m.status) === "queued") {
+        P(r);
+        return;
+      }
+      x();
+    };
+  }
+  if (s.appendChild(r), o > 0) {
+    const p = s, x = Date.now() + o;
+    S.set(p, (S.get(p) ?? 0) + 1), z(H, p, x);
+    const b = l.length > 0 ? l[0] : null, m = {
+      status: "queued",
+      stack: p,
+      fireAt: x,
+      timerId: null,
+      displacement: b,
+      synthDisplacements: [...h],
+      removalObserver: null
+    };
+    A.set(r, m);
+    const w = new MutationObserver((c) => {
+      for (const u of c)
+        for (const O of u.removedNodes)
+          if (O === r) {
+            P(r);
+            return;
+          }
+    });
+    w.observe(p, { childList: !0 }), m.removalObserver = w, m.timerId = setTimeout(() => {
+      const c = A.get(r);
+      if (!(!c || c.status === "cancelled")) {
+        if (!r.isConnected) {
+          P(r);
+          return;
+        }
+        le(r, q);
+      }
+    }, o);
+  } else
+    q(), r.show(), $.set(r, Date.now());
+  return r;
 }
 export {
-  a as H,
-  p as a,
-  Y as t
+  d as H,
+  L as a,
+  me as t
 };
-//# sourceMappingURL=toast-factory-CL2BzdSB.js.map
+//# sourceMappingURL=toast-factory-Dht3pVsw.js.map