@helixui/library 3.7.0 → 3.8.0-next.145

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

@@ -1,9 +1,9 @@
-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 { css as z, nothing as E, html as C } from "lit";
+import { property as A, 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`
+const te = z`
   /* ─── hx-toast host ─── */
 
   :host {
@@ -117,6 +117,12 @@ const te = V`
     display: none;
   }
 
+  /* Match the previous inline 16x16 SVG sizing for both the variant icon and
+     the close-button glyph migrated to hx-icon (library="helix"). */
+  .toast__glyph {
+    --hx-icon-size: 16px;
+  }
+
   /* ─── Message ─── */
 
   .toast__message {
@@ -196,7 +202,7 @@ const te = V`
       border: 1px solid ButtonText;
     }
   }
-`, se = V`
+`, se = z`
   :host {
     display: block;
     position: fixed;
@@ -270,7 +276,7 @@ const te = V`
     --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);
   }
 `;
-var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, _ = (e, t, n, s) => {
+var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, g = (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;
@@ -408,56 +414,31 @@ let d = class extends J {
   // ─── WCAG 1.4.1: Default Icons ───
   // Each semantic variant renders a default icon when no icon is slotted,
   // ensuring the severity is not conveyed by color alone.
-  /** @internal */
-  _renderSuccessIcon() {
-    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"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderWarningIcon() {
-    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"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderDangerIcon() {
-    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"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderInfoIcon() {
-    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"
-      />
-    </svg>`;
-  }
   /** @internal Returns the default icon for the current variant, or nothing for 'default'. */
   get _defaultIcon() {
+    let e;
     switch (this.variant) {
       case "success":
-        return this._renderSuccessIcon();
+        e = "success";
+        break;
       case "warning":
-        return this._renderWarningIcon();
+        e = "warning";
+        break;
       case "danger":
-        return this._renderDangerIcon();
+        e = "error";
+        break;
       case "info":
-        return this._renderInfoIcon();
+        e = "info";
+        break;
       default:
-        return E;
+        e = null;
     }
+    return e ? C`<hx-icon
+      class="toast__glyph"
+      library="helix"
+      name=${e}
+      aria-hidden="true"
+    ></hx-icon>` : E;
   }
   /** @internal */
   get _severityLabel() {
@@ -474,7 +455,7 @@ let d = class extends J {
   // regions).
   render() {
     const e = this._severityLabel;
-    return f`
+    return C`
       <div
         part="base"
         class=${X({
@@ -486,8 +467,8 @@ let d = class extends J {
         @focusin=${this._handleFocusIn}
         @focusout=${this._handleFocusOut}
       >
-        ${this.open ? f`
-              ${e ? f`<span class="toast__severity-label">${e}: </span>` : E}
+        ${this.open ? C`
+              ${e ? C`<span class="toast__severity-label">${e}: </span>` : E}
               <span part="icon" class="toast__icon">
                 <slot name="icon">${this._defaultIcon}</slot>
               </span>
@@ -497,26 +478,19 @@ let d = class extends J {
               <span part="action" class="toast__action">
                 <slot name="action" @slotchange=${this._handleActionSlotChange}></slot>
               </span>
-              ${this.closable ? f`
+              ${this.closable ? C`
                     <button
                       part="close-button"
                       class="toast__close"
                       aria-label=${this.labelClose}
                       @click=${this._handleClose}
                     >
-                      <svg
+                      <hx-icon
+                        class="toast__glyph"
+                        library="helix"
+                        name="close"
                         aria-hidden="true"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <path d="M18 6L6 18M6 6l12 12" />
-                      </svg>
+                      ></hx-icon>
                     </button>
                   ` : E}
             ` : E}
@@ -531,41 +505,41 @@ d._SEVERITY_LABELS = {
   danger: "Error",
   info: "Info"
 };
-_([
-  T({ type: String, reflect: !0 })
+g([
+  A({ type: String, reflect: !0 })
 ], d.prototype, "variant", 2);
-_([
-  T({ type: Number })
+g([
+  A({ type: Number })
 ], d.prototype, "duration", 2);
-_([
-  T({ type: Boolean, reflect: !0 })
+g([
+  A({ type: Boolean, reflect: !0 })
 ], d.prototype, "closable", 2);
-_([
-  T({ type: Boolean, reflect: !0 })
+g([
+  A({ type: Boolean, reflect: !0 })
 ], d.prototype, "open", 2);
-_([
-  T({ attribute: "label-close" })
+g([
+  A({ attribute: "label-close" })
 ], d.prototype, "labelClose", 2);
-_([
+g([
   U(".toast")
 ], d.prototype, "_toastEl", 2);
-_([
+g([
   Z()
 ], d.prototype, "_hasActionContent", 2);
-d = _([
+d = g([
   G("hx-toast")
 ], d);
-var ae = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, B = (e, t, n, s) => {
+var ae = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, N = (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 L = class extends J {
+let M = class extends J {
   constructor() {
     super(...arguments), this.placement = "bottom-end", this.stackLimit = 3;
   }
   render() {
-    return f`
+    return C`
       <div
         part="base"
         class=${X({
@@ -578,46 +552,46 @@ let L = class extends J {
     `;
   }
 };
-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([
+M.styles = [se];
+N([
+  A({ type: String, reflect: !0 })
+], M.prototype, "placement", 2);
+N([
+  A({ type: Number, attribute: "stack-limit" })
+], M.prototype, "stackLimit", 2);
+M = N([
   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) {
+], M);
+const P = 1500, w = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakSet(), D = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap();
+function W(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) {
+function I(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);
+  const t = (D.get(e) ?? 1) - 1;
+  t > 0 ? D.set(e, t) : D.delete(e);
 }
-function P(e) {
-  const t = A.get(e);
+function q(e) {
+  const t = w.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) {
+    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), I(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);
+      clearTimeout(o), S.delete(n), I(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);
+      clearTimeout(n.timerId), I(y, t.stack, n.fireAt);
+    t.synthDisplacements = [], e.style.removeProperty("display"), e.remove(), w.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));
+  const n = w.get(e);
+  !n || n.status !== "queued" || (n.status = "showing", n.timerId = null, n.removalObserver !== null && (n.removalObserver.disconnect(), n.removalObserver = null), K(n.stack), I(H, n.stack, n.fireAt), e.style.removeProperty("display"), t(), e.show(), L.set(e, Date.now()), w.delete(e));
 }
 function me(e) {
   if (typeof document > "u") throw new Error("toast() requires a browser environment");
@@ -627,76 +601,76 @@ function me(e) {
   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 = [];
+    const x = [...s.querySelectorAll("hx-toast")].filter((c) => c.open).filter((c) => !S.has(c)), _ = D.get(s) ?? 0, m = x.length + _ + 1 - s.stackLimit, b = [];
     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) {
+        const i = L.get(u), a = i === void 0 ? Number.POSITIVE_INFINITY : Date.now() - i;
+        if (a >= P) {
           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);
+        const k = P - a, f = Date.now() + k;
+        S.add(u), W(y, s, f);
+        const R = s, v = setTimeout(() => {
+          S.delete(u), I(y, R, f), u.open && u.hide();
+        }, k);
+        b.push(f), l.push({ target: u, fireAt: f, timerId: v }), k > o && (o = k);
         continue;
       }
-      const O = y.get(s) ?? [], N = H.get(s) ?? [], k = [...O].sort((i, a) => i - a), Q = [...N].sort((i, a) => i - a);
+      const $ = y.get(s) ?? [], B = H.get(s) ?? [], T = [...$].sort((i, a) => i - a), Q = [...B].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);
+        for (let a = 0; a < T.length; a++)
+          if (T[a] <= i) {
+            T.splice(a, 1);
             break;
           }
-      for (const i of w) {
-        const a = k.indexOf(i);
-        a >= 0 && k.splice(a, 1);
+      for (const i of b) {
+        const a = T.indexOf(i);
+        a >= 0 && T.splice(a, 1);
       }
-      let M = k[0];
-      if (M === void 0) {
+      let O = T[0];
+      if (O === 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);
+        for (const v of $) i.push(v);
+        for (const v of B) i.push(v);
+        for (const v of b) i.push(v);
         if (i.length === 0)
           break;
-        M = Math.max(...i) + W;
-        const a = M, C = a - Date.now(), v = s;
-        z(y, v, a);
+        O = Math.max(...i) + P;
+        const a = O, k = a - Date.now(), f = s;
+        W(y, f, a);
         const R = setTimeout(() => {
-          D(y, v, a);
-          const Y = [...v.querySelectorAll("hx-toast")].filter(
-            (j) => j.open && !I.has(j)
+          I(y, f, a);
+          const V = [...f.querySelectorAll("hx-toast")].filter(
+            (j) => j.open && !S.has(j)
           )[0];
-          Y && Y.hide();
-        }, C);
+          V && V.hide();
+        }, k);
         h.push({ fireAt: a, timerId: R });
       }
-      w.push(M);
-      const F = M - Date.now();
-      F > o && (o = Math.max(0, F));
+      b.push(O);
+      const Y = O - Date.now();
+      Y > o && (o = Math.max(0, Y));
     }
   }
   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 = () => {
+  const F = () => {
     r.addEventListener("hx-after-hide", () => {
-      $.delete(r), I.delete(r), r.remove();
+      L.delete(r), S.delete(r), r.remove();
     });
   };
   if (o > 0) {
-    const p = (b) => {
-      b.stopImmediatePropagation(), b.stopPropagation();
+    const p = (_) => {
+      _.stopImmediatePropagation(), _.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);
+      const m = w.get(r);
       if ((m == null ? void 0 : m.status) === "queued") {
-        P(r);
+        q(r);
         return;
       }
       x();
@@ -704,42 +678,42 @@ function me(e) {
   }
   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 = {
+    D.set(p, (D.get(p) ?? 0) + 1), W(H, p, x);
+    const _ = l.length > 0 ? l[0] : null, m = {
       status: "queued",
       stack: p,
       fireAt: x,
       timerId: null,
-      displacement: b,
+      displacement: _,
       synthDisplacements: [...h],
       removalObserver: null
     };
-    A.set(r, m);
-    const w = new MutationObserver((c) => {
+    w.set(r, m);
+    const b = new MutationObserver((c) => {
       for (const u of c)
-        for (const O of u.removedNodes)
-          if (O === r) {
-            P(r);
+        for (const $ of u.removedNodes)
+          if ($ === r) {
+            q(r);
             return;
           }
     });
-    w.observe(p, { childList: !0 }), m.removalObserver = w, m.timerId = setTimeout(() => {
-      const c = A.get(r);
+    b.observe(p, { childList: !0 }), m.removalObserver = b, m.timerId = setTimeout(() => {
+      const c = w.get(r);
       if (!(!c || c.status === "cancelled")) {
         if (!r.isConnected) {
-          P(r);
+          q(r);
           return;
         }
-        le(r, q);
+        le(r, F);
       }
     }, o);
   } else
-    q(), r.show(), $.set(r, Date.now());
+    F(), r.show(), L.set(r, Date.now());
   return r;
 }
 export {
   d as H,
-  L as a,
+  M as a,
   me as t
 };
-//# sourceMappingURL=toast-factory-Dht3pVsw.js.map
+//# sourceMappingURL=toast-factory-DgnbFxVs.js.map