@theh0n/ui 1.1.3 → 1.1.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, ref as O, computed as y, openBlock as a, createElementBlock as r, normalizeClass as w, Fragment as Z, renderList as ae, createElementVNode as m, renderSlot as k, toDisplayString as $, createCommentVNode as g, createVNode as z, Transition as D, withCtx as T, withDirectives as fe, vShow as he, watch as H, shallowRef as ie, createBlock as R, Teleport as J, unref as _, normalizeStyle as S, resolveDynamicComponent as K, normalizeProps as ve, mergeProps as X, createTextVNode as U, onMounted as G, onUnmounted as me, withModifiers as F, onBeforeUnmount as ye, nextTick as pe } from "vue";
+import { defineComponent as I, ref as O, computed as y, openBlock as l, createElementBlock as u, normalizeClass as k, Fragment as Z, renderList as ae, createElementVNode as m, renderSlot as C, toDisplayString as x, createCommentVNode as b, createVNode as A, Transition as q, withCtx as H, withDirectives as he, vShow as ve, watch as E, shallowRef as ie, createBlock as V, Teleport as J, unref as _, normalizeStyle as R, resolveDynamicComponent as K, normalizeProps as me, mergeProps as X, createTextVNode as j, onMounted as G, onUnmounted as ye, withModifiers as F, onBeforeUnmount as pe, nextTick as ge } from "vue";
 import './index.css';const te = {
   colors: {
     primary: "#171f2a",
@@ -24,15 +24,15 @@ function _e(e) {
   const n = ne(te);
   return le(n, e);
 }
-function ge(e) {
+function be(e) {
   if (typeof window > "u" || typeof document > "u")
     return;
-  const n = document.documentElement, t = be(e);
-  Object.entries(t).forEach(([i, o]) => {
-    n.style.setProperty(i, o);
+  const n = document.documentElement, t = ke(e);
+  Object.entries(t).forEach(([r, o]) => {
+    n.style.setProperty(r, o);
   });
 }
-function be(e) {
+function ke(e) {
   return {
     "--h0n-primary": e.colors.primary,
     "--h0n-secondary": e.colors.secondary,
@@ -51,14 +51,14 @@ function be(e) {
 }
 function le(e, n) {
   const t = Array.isArray(e) ? [...e] : { ...e };
-  return n && Object.entries(n).forEach(([i, o]) => {
+  return n && Object.entries(n).forEach(([r, o]) => {
     if (o === void 0)
       return;
-    const v = e[i];
-    oe(v) && oe(o) ? t[i] = le(
+    const v = e[r];
+    oe(v) && oe(o) ? t[r] = le(
       v,
       o
-    ) : t[i] = o;
+    ) : t[r] = o;
   }), t;
 }
 function ne(e) {
@@ -67,10 +67,10 @@ function ne(e) {
 function oe(e) {
   return Object.prototype.toString.call(e) === "[object Object]";
 }
-const ke = ["disabled", "aria-expanded", "aria-controls", "onClick"], $e = { class: "h0n-ui-accordion__title" }, we = { class: "h0n-ui-accordion__title-text" }, Ce = {
+const $e = ["disabled", "aria-expanded", "aria-controls", "onClick"], we = { class: "h0n-ui-accordion__title" }, Ce = { class: "h0n-ui-accordion__title-text" }, xe = {
   key: 0,
   class: "h0n-ui-accordion__badge"
-}, xe = ["id", "aria-label"], Oe = { class: "h0n-ui-accordion__body-inner" }, Ie = { key: 0 }, Se = /* @__PURE__ */ C({
+}, Oe = ["id", "aria-label"], Ie = { class: "h0n-ui-accordion__body-inner" }, Se = { key: 0 }, Be = /* @__PURE__ */ I({
   __name: "Accordion",
   props: {
     items: { default: () => [] },
@@ -81,85 +81,85 @@ const ke = ["disabled", "aria-expanded", "aria-controls", "onClick"], $e = { cla
   },
   emits: ["update:modelValue", "toggle"],
   setup(e, { emit: n }) {
-    const t = e, i = n;
-    function o(s) {
-      return s == null ? [] : Array.isArray(s) ? t.multiple ? s : s.slice(0, 1) : [s];
+    const t = e, r = n;
+    function o(a) {
+      return a == null ? [] : Array.isArray(a) ? t.multiple ? a : a.slice(0, 1) : [a];
     }
-    const v = O(o(t.defaultOpen)), d = y(
+    const v = O(o(t.defaultOpen)), f = y(
       () => t.modelValue !== void 0 ? o(t.modelValue) : v.value
-    ), f = y(() => new Set(d.value));
-    function u(s) {
-      return f.value.has(s);
+    ), h = y(() => new Set(f.value));
+    function d(a) {
+      return h.value.has(a);
     }
-    function l(s) {
-      t.modelValue === void 0 && (v.value = s), i("update:modelValue", t.multiple ? s : s[0] ?? null);
+    function c(a) {
+      t.modelValue === void 0 && (v.value = a), r("update:modelValue", t.multiple ? a : a[0] ?? null);
     }
-    function p(s) {
-      const h = [...d.value];
+    function p(a) {
+      const i = [...f.value];
       if (t.multiple) {
-        const b = new Set(h);
-        b.has(s) ? b.delete(s) : b.add(s);
-        const j = Array.from(b);
-        l(j), i("toggle", { id: s, open: b.has(s) });
+        const w = new Set(i);
+        w.has(a) ? w.delete(a) : w.add(a);
+        const B = Array.from(w);
+        c(B), r("toggle", { id: a, open: w.has(a) });
         return;
       }
-      const c = h[0] === s;
-      l(c ? [] : [s]), i("toggle", { id: s, open: !c });
+      const s = i[0] === a;
+      c(s ? [] : [a]), r("toggle", { id: a, open: !s });
     }
-    function x(s) {
-      return `h0n-ui-accordion-body-${String(s)}`;
+    function S(a) {
+      return `h0n-ui-accordion-body-${String(a)}`;
     }
-    function L(s) {
-      return s.querySelector(".h0n-ui-accordion__body-inner");
+    function T(a) {
+      return a.querySelector(".h0n-ui-accordion__body-inner");
     }
-    function V(s) {
-      const h = s, c = L(h);
-      c && (h.style.height = "0px", h.style.opacity = "0", requestAnimationFrame(() => {
-        h.style.height = `${c.scrollHeight}px`, h.style.opacity = "1";
+    function L(a) {
+      const i = a, s = T(i);
+      s && (i.style.height = "0px", i.style.opacity = "0", requestAnimationFrame(() => {
+        i.style.height = `${s.scrollHeight}px`, i.style.opacity = "1";
       }));
     }
-    function P(s) {
-      const h = s;
-      h.style.height = "auto", h.style.opacity = "";
+    function P(a) {
+      const i = a;
+      i.style.height = "auto", i.style.opacity = "";
     }
-    function q(s) {
-      const h = s, c = L(h);
-      c && (h.style.height = `${c.scrollHeight}px`, h.style.opacity = "1", h.offsetHeight, requestAnimationFrame(() => {
-        h.style.height = "0px", h.style.opacity = "0";
+    function D(a) {
+      const i = a, s = T(i);
+      s && (i.style.height = `${s.scrollHeight}px`, i.style.opacity = "1", i.offsetHeight, requestAnimationFrame(() => {
+        i.style.height = "0px", i.style.opacity = "0";
       }));
     }
-    function N(s) {
-      const h = s;
-      h.style.height = "", h.style.opacity = "";
+    function g(a) {
+      const i = a;
+      i.style.height = "", i.style.opacity = "";
     }
-    return (s, h) => (a(), r("div", {
-      class: w(["h0n-ui-accordion", { "is-compact": e.compact }])
+    return (a, i) => (l(), u("div", {
+      class: k(["h0n-ui-accordion", { "is-compact": e.compact }])
     }, [
-      (a(!0), r(Z, null, ae(e.items, (c) => (a(), r("div", {
-        key: c.id,
-        class: w(["h0n-ui-accordion__item", {
-          "is-open": u(c.id),
-          "is-disabled": !!c.disabled
+      (l(!0), u(Z, null, ae(e.items, (s) => (l(), u("div", {
+        key: s.id,
+        class: k(["h0n-ui-accordion__item", {
+          "is-open": d(s.id),
+          "is-disabled": !!s.disabled
         }])
       }, [
         m("button", {
           class: "h0n-ui-accordion__header",
           type: "button",
-          disabled: c.disabled,
-          "aria-expanded": u(c.id) ? "true" : "false",
-          "aria-controls": x(c.id),
-          onClick: (I) => p(c.id)
+          disabled: s.disabled,
+          "aria-expanded": d(s.id) ? "true" : "false",
+          "aria-controls": S(s.id),
+          onClick: ($) => p(s.id)
         }, [
-          m("span", $e, [
-            k(s.$slots, "header", {
-              item: c,
-              open: u(c.id)
+          m("span", we, [
+            C(a.$slots, "header", {
+              item: s,
+              open: d(s.id)
             }, () => [
-              m("span", we, $(c.title), 1),
-              c.badge ? (a(), r("span", Ce, $(c.badge), 1)) : g("", !0)
+              m("span", Ce, x(s.title), 1),
+              s.badge ? (l(), u("span", xe, x(s.badge), 1)) : b("", !0)
             ])
           ]),
-          h[0] || (h[0] = m("svg", {
+          i[0] || (i[0] = m("svg", {
             class: "h0n-ui-accordion__chevron",
             viewBox: "0 0 20 20",
             "aria-hidden": "true"
@@ -173,31 +173,31 @@ const ke = ["disabled", "aria-expanded", "aria-controls", "onClick"], $e = { cla
               "stroke-linejoin": "round"
             })
           ], -1))
-        ], 8, ke),
-        z(D, {
+        ], 8, $e),
+        A(q, {
           name: "h0n-ui-accordion",
-          onEnter: V,
+          onEnter: L,
           onAfterEnter: P,
-          onLeave: q,
-          onAfterLeave: N
+          onLeave: D,
+          onAfterLeave: g
         }, {
-          default: T(() => [
-            fe(m("div", {
+          default: H(() => [
+            he(m("div", {
               class: "h0n-ui-accordion__body",
-              id: x(c.id),
+              id: S(s.id),
               role: "region",
-              "aria-label": c.title
+              "aria-label": s.title
             }, [
-              m("div", Oe, [
-                k(s.$slots, "body", {
-                  item: c,
-                  open: u(c.id)
+              m("div", Ie, [
+                C(a.$slots, "body", {
+                  item: s,
+                  open: d(s.id)
                 }, () => [
-                  c.body ? (a(), r("p", Ie, $(c.body), 1)) : g("", !0)
+                  s.body ? (l(), u("p", Se, x(s.body), 1)) : b("", !0)
                 ])
               ])
-            ], 8, xe), [
-              [he, u(c.id)]
+            ], 8, Oe), [
+              [ve, d(s.id)]
             ])
           ]),
           _: 2
@@ -209,60 +209,60 @@ const ke = ["disabled", "aria-expanded", "aria-controls", "onClick"], $e = { cla
 function Q() {
   return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
 }
-const se = 1e4, B = O([]);
-function M() {
-  const e = y(() => B.value.at(-1) ?? null);
-  function n(f) {
-    return B.value.findIndex((u) => u.id === f);
+const se = 1e4, z = O([]);
+function N() {
+  const e = y(() => z.value.at(-1) ?? null);
+  function n(h) {
+    return z.value.findIndex((d) => d.id === h);
   }
-  function t(f) {
-    const u = n(f);
-    return u === -1 ? se : se + u * 2;
+  function t(h) {
+    const d = n(h);
+    return d === -1 ? se : se + d * 2;
   }
-  function i(f) {
-    return t(f) + 1;
+  function r(h) {
+    return t(h) + 1;
   }
-  function o(f) {
-    const u = f.id ?? Q();
-    return v(u), B.value.push({
+  function o(h) {
+    const d = h.id ?? Q();
+    return v(d), z.value.push({
       showOverlay: !0,
       closeOnOverlay: !0,
       closeOnEsc: !0,
-      ...f,
-      id: u
-    }), u;
+      ...h,
+      id: d
+    }), d;
   }
-  function v(f) {
-    const u = n(f);
-    u !== -1 && B.value.splice(u, 1);
+  function v(h) {
+    const d = n(h);
+    d !== -1 && z.value.splice(d, 1);
   }
-  function d() {
+  function f() {
     e.value?.onRequestClose?.();
   }
-  return H(
-    () => B.value.length,
-    (f) => {
-      document.documentElement.classList.toggle("no-scroll", f > 0);
+  return E(
+    () => z.value.length,
+    (h) => {
+      document.documentElement.classList.toggle("no-scroll", h > 0);
     },
     { immediate: !0 }
   ), {
-    stack: B,
+    stack: z,
     top: e,
     push: o,
     remove: v,
-    requestCloseTop: d,
+    requestCloseTop: f,
     getBackdropZIndex: t,
-    getContentZIndex: i
+    getContentZIndex: r
   };
 }
-const A = ie(null);
+const M = ie(null);
 let W = null;
-function Be() {
-  const e = M();
-  function n(i) {
+function Re() {
+  const e = N();
+  function n(r) {
     return new Promise((o) => {
       const v = Q();
-      W = o, A.value = { ...i, id: v }, e.push({
+      W = o, M.value = { ...r, id: v }, e.push({
         id: v,
         showOverlay: !0,
         closeOnOverlay: !0,
@@ -271,66 +271,66 @@ function Be() {
       });
     });
   }
-  function t(i) {
-    if (!A.value) return;
-    const o = A.value.id;
-    A.value = null, e.remove(o), W?.(i), W = null;
+  function t(r) {
+    if (!M.value) return;
+    const o = M.value.id;
+    M.value = null, e.remove(o), W?.(r), W = null;
   }
   return {
-    active: A,
+    active: M,
     open: n,
     close: t
   };
 }
-const Re = {
+const Te = {
   class: "h0n-alert",
   role: "dialog",
   "aria-modal": "true"
-}, ze = {
+}, Le = {
   key: 0,
   class: "h0n-alert__header"
-}, Te = { class: "h0n-alert__title" }, Le = { class: "h0n-alert__body" }, Ve = { key: 1 }, Ae = /* @__PURE__ */ C({
+}, ze = { class: "h0n-alert__title" }, Ee = { class: "h0n-alert__body" }, Ve = { key: 1 }, Ae = /* @__PURE__ */ I({
   __name: "Alert",
   setup(e) {
-    const { active: n, close: t } = Be(), { getContentZIndex: i } = M(), o = () => t(!0), v = () => t(!1), d = () => t(!0), f = y(() => n.value?.type === "info"), u = y(
-      () => n.value ? i(n.value.id) : void 0
+    const { active: n, close: t } = Re(), { getContentZIndex: r } = N(), o = () => t(!0), v = () => t(!1), f = () => t(!0), h = y(() => n.value?.type === "info"), d = y(
+      () => n.value ? r(n.value.id) : void 0
     );
-    return (l, p) => (a(), R(J, { to: "body" }, [
-      z(D, {
+    return (c, p) => (l(), V(J, { to: "body" }, [
+      A(q, {
         name: "h0n-alert-scale",
         appear: ""
       }, {
-        default: T(() => [
-          _(n) ? (a(), r("div", {
+        default: H(() => [
+          _(n) ? (l(), u("div", {
             key: 0,
             class: "h0n-alert-layer",
-            style: S({ zIndex: u.value })
+            style: R({ zIndex: d.value })
           }, [
-            m("section", Re, [
-              _(n).title || l.$slots.header ? (a(), r("header", ze, [
-                k(l.$slots, "header", {}, () => [
-                  m("h4", Te, $(_(n).title), 1)
+            m("section", Te, [
+              _(n).title || c.$slots.header ? (l(), u("header", Le, [
+                C(c.$slots, "header", {}, () => [
+                  m("h4", ze, x(_(n).title), 1)
                 ], !0)
-              ])) : g("", !0),
-              m("div", Le, [
-                _(n).component ? (a(), R(K(_(n).component), ve(X({ key: 0 }, _(n).props)), null, 16)) : _(n).message ? (a(), r("p", Ve, $(_(n).message), 1)) : g("", !0)
+              ])) : b("", !0),
+              m("div", Ee, [
+                _(n).component ? (l(), V(K(_(n).component), me(X({ key: 0 }, _(n).props)), null, 16)) : _(n).message ? (l(), u("p", Ve, x(_(n).message), 1)) : b("", !0)
               ]),
               m("footer", {
-                class: w(["h0n-alert__actions", { "is-single": f.value }])
+                class: k(["h0n-alert__actions", { "is-single": h.value }])
               }, [
-                f.value ? (a(), r("button", {
+                h.value ? (l(), u("button", {
                   key: 0,
                   class: "h0n-alert__btn h0n-alert__btn--primary",
                   type: "button",
-                  onClick: d
-                }, " Ok ")) : (a(), r(Z, { key: 1 }, [
+                  onClick: f
+                }, " Ok ")) : (l(), u(Z, { key: 1 }, [
                   m("button", {
                     class: "h0n-alert__btn is-danger",
                     type: "button",
                     onClick: v
                   }, " Cancel "),
                   m("button", {
-                    class: w(["h0n-alert__btn h0n-alert__btn--primary", {
+                    class: k(["h0n-alert__btn h0n-alert__btn--primary", {
                       "is-danger": _(n).type === "danger"
                     }]),
                     type: "button",
@@ -339,18 +339,18 @@ const Re = {
                 ], 64))
               ], 2)
             ])
-          ], 4)) : g("", !0)
+          ], 4)) : b("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}), Ee = (e, n) => {
+}), He = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [i, o] of n)
-    t[i] = o;
+  for (const [r, o] of n)
+    t[r] = o;
   return t;
-}, He = /* @__PURE__ */ Ee(Ae, [["__scopeId", "data-v-290cad87"]]), re = /* @__PURE__ */ C({
+}, Pe = /* @__PURE__ */ He(Ae, [["__scopeId", "data-v-290cad87"]]), re = /* @__PURE__ */ I({
   __name: "Spinner",
   props: {
     size: {},
@@ -358,8 +358,8 @@ const Re = {
   },
   setup(e) {
     const t = e.size ?? "md";
-    return (i, o) => (a(), r("div", {
-      class: w(["h0n-ui-spinner", [`h0n-ui-spinner--${_(t)}`, e.color]]),
+    return (r, o) => (l(), u("div", {
+      class: k(["h0n-ui-spinner", [`h0n-ui-spinner--${_(t)}`, e.color]]),
       role: "status",
       "aria-label": "Loading"
     }, null, 2));
@@ -370,14 +370,14 @@ const Re = {
 }, Ue = {
   key: 1,
   class: "h0n-ui-btn__label"
-}, Pe = {
+}, qe = {
   key: 2,
   class: "h0n-ui-btn__spinner",
   "aria-hidden": "true"
-}, qe = {
+}, Ne = {
   key: 3,
   class: "h0n-ui-btn__icon h0n-ui-btn__icon--right"
-}, Ne = /* @__PURE__ */ C({
+}, je = /* @__PURE__ */ I({
   __name: "Button",
   props: {
     text: {},
@@ -394,74 +394,74 @@ const Re = {
   },
   emits: ["click", "done", "error"],
   setup(e, { emit: n }) {
-    const t = e, i = n, o = O(!1), v = y(() => t.loading !== void 0), d = y(
+    const t = e, r = n, o = O(!1), v = y(() => t.loading !== void 0), f = y(
       () => v.value ? !!t.loading : o.value
     );
-    function f(l) {
-      v.value || (o.value = l);
+    function h(c) {
+      v.value || (o.value = c);
     }
-    async function u(l) {
-      if (!(t.disabled || d.value) && (i("click", l), !!t.action))
+    async function d(c) {
+      if (!(t.disabled || f.value) && (r("click", c), !!t.action))
         try {
-          f(!0), await t.action(), i("done");
+          h(!0), await t.action(), r("done");
         } catch (p) {
-          i("error", p);
+          r("error", p);
         } finally {
-          f(!1);
+          h(!1);
         }
     }
-    return (l, p) => (a(), r("button", {
-      class: w(["h0n-ui-btn", [
+    return (c, p) => (l(), u("button", {
+      class: k(["h0n-ui-btn", [
         `h0n-ui-btn--${e.variant}`,
         `h0n-ui-btn--${e.size}`,
         `h0n-ui-btn--text-${e.position}`,
         {
-          "h0n-ui-btn--loading": d.value,
+          "h0n-ui-btn--loading": f.value,
           "h0n-ui-btn--pill": e.pill,
           "h0n-ui-btn--radius": e.border,
           "h0n-ui-btn--block": e.block
         }
       ]]),
       type: e.type,
-      disabled: e.disabled || d.value,
-      "aria-busy": d.value ? "true" : void 0,
-      onClick: u
+      disabled: e.disabled || f.value,
+      "aria-busy": f.value ? "true" : void 0,
+      onClick: d
     }, [
-      l.$slots.left && !d.value ? (a(), r("span", Me, [
-        k(l.$slots, "left")
-      ])) : g("", !0),
-      d.value ? (a(), r("span", Pe, [
-        z(re, { size: "sm" })
-      ])) : (a(), r("span", Ue, [
-        k(l.$slots, "default", {}, () => [
-          U($(e.text), 1)
+      c.$slots.left && !f.value ? (l(), u("span", Me, [
+        C(c.$slots, "left")
+      ])) : b("", !0),
+      f.value ? (l(), u("span", qe, [
+        A(re, { size: "sm" })
+      ])) : (l(), u("span", Ue, [
+        C(c.$slots, "default", {}, () => [
+          j(x(e.text), 1)
         ])
       ])),
-      l.$slots.right && !d.value ? (a(), r("span", qe, [
-        k(l.$slots, "right")
-      ])) : g("", !0)
+      c.$slots.right && !f.value ? (l(), u("span", Ne, [
+        C(c.$slots, "right")
+      ])) : b("", !0)
     ], 10, De));
   }
-}), je = { class: "h0n-ui-card" }, Fe = {
+}), Fe = { class: "h0n-ui-card" }, We = {
   key: 0,
   class: "h0n-ui-card--title"
-}, We = /* @__PURE__ */ C({
+}, Ze = /* @__PURE__ */ I({
   __name: "Card",
   props: {
     title: {}
   },
   setup(e) {
-    return (n, t) => (a(), r("section", je, [
-      e.title ? (a(), r("p", Fe, $(e.title), 1)) : g("", !0),
-      k(n.$slots, "default")
+    return (n, t) => (l(), u("section", Fe, [
+      e.title ? (l(), u("p", We, x(e.title), 1)) : b("", !0),
+      C(n.$slots, "default")
     ]));
   }
-}), E = ie(null);
-function Ze() {
-  const e = M();
-  function n(i) {
+}), U = ie(null);
+function Je() {
+  const e = N();
+  function n(r) {
     const o = Q();
-    E.value = { ...i, id: o }, e.push({
+    U.value = { ...r, id: o }, e.push({
       id: o,
       showOverlay: !0,
       closeOnOverlay: !0,
@@ -470,98 +470,140 @@ function Ze() {
     });
   }
   function t() {
-    E.value && (e.remove(E.value.id), E.value = null);
+    U.value && (e.remove(U.value.id), U.value = null);
   }
   return {
-    active: E,
+    active: U,
     open: n,
     close: t
   };
 }
-const Je = { class: "content-title-dialog" }, Ke = {
+const Ke = { class: "content-title-dialog" }, Xe = {
   key: 0,
   class: "title-dialog"
-}, Xe = {
+}, Ge = {
   key: 0,
   class: "h0n-dialog-bg-hero"
-}, Ge = { class: "h0n-dialog-content" }, Qe = /* @__PURE__ */ C({
+}, Qe = { class: "h0n-dialog-content" }, Ye = /* @__PURE__ */ I({
   __name: "Dialog",
   setup(e) {
-    const { active: n, close: t } = Ze(), { getContentZIndex: i } = M(), o = O("bottom");
-    H(
+    const { active: n, close: t } = Je(), { getContentZIndex: r } = N(), o = O("bottom");
+    E(
       () => n.value?.side,
-      (p) => {
-        p && (o.value = p);
+      (g) => {
+        g && (o.value = g);
       },
       { immediate: !0 }
     );
-    const v = y(() => `h0n-slide-${o.value}`), d = y(
-      () => n.value ? i(n.value.id) : void 0
-    ), f = y(() => n.value?.backgroundUrl?.trim() ?? ""), u = y(() => f.value.length > 0), l = y(() => u.value ? {
-      "--h0n-dialog-bg-image": `url("${f.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`
+    const v = y(() => `h0n-slide-${o.value}`), f = y(
+      () => n.value ? r(n.value.id) : void 0
+    ), h = y(() => n.value?.backgroundUrl?.trim() ?? ""), d = O(""), c = /* @__PURE__ */ new Set();
+    let p = 0;
+    const S = y(() => h.value.length > 0), T = y(
+      () => d.value.length > 0
+    ), L = (g) => new Promise((a) => {
+      setTimeout(a, g);
+    }), P = (g) => new Promise((a, i) => {
+      const s = new Image();
+      s.decoding = "async", s.fetchPriority = "low", s.onload = async () => {
+        try {
+          typeof s.decode == "function" && await s.decode();
+        } catch {
+        }
+        a();
+      }, s.onerror = () => {
+        i(new Error("Failed to load dialog background image"));
+      }, s.src = g;
+    }), D = y(() => T.value ? {
+      "--h0n-dialog-bg-image": `url("${d.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`
     } : void 0);
-    return (p, x) => (a(), R(J, { to: "body" }, [
-      z(D, {
+    return E(
+      h,
+      async (g, a, i) => {
+        const s = ++p;
+        let $ = !1;
+        if (i(() => {
+          $ = !0;
+        }), d.value = "", !!g) {
+          if (c.has(g)) {
+            d.value = g;
+            return;
+          }
+          if (await L(140), !($ || s !== p))
+            try {
+              if (await P(g), $ || s !== p) return;
+              c.add(g), d.value = g;
+            } catch {
+              if ($ || s !== p) return;
+              d.value = "";
+            }
+        }
+      },
+      { immediate: !0 }
+    ), (g, a) => (l(), V(J, { to: "body" }, [
+      A(q, {
         name: v.value,
         appear: ""
       }, {
-        default: T(() => [
-          _(n) ? (a(), r("div", {
+        default: H(() => [
+          _(n) ? (l(), u("div", {
             key: 0,
-            class: w(["h0n-dialog-layer", `is-${o.value}`]),
-            style: S({ zIndex: d.value })
+            class: k(["h0n-dialog-layer", `is-${o.value}`]),
+            style: R({ zIndex: f.value })
           }, [
             m("section", {
-              class: w(["h0n-dialog-panel", [
+              class: k(["h0n-dialog-panel", [
                 `is-${_(n).side}`,
-                { "has-background-image": u.value }
+                { "has-background-image": S.value }
               ]]),
-              style: S(l.value)
+              style: R(D.value)
             }, [
               m("header", {
-                class: w(["h0n-dialog-header", [
+                class: k(["h0n-dialog-header", [
                   `is-${_(n).side}`,
-                  { "has-background-image": u.value }
+                  { "has-background-image": S.value }
                 ]])
               }, [
-                m("div", Je, [
-                  _(n).title ? (a(), r("p", Ke, $(_(n).title), 1)) : g("", !0),
-                  k(p.$slots, "dialogHeader")
+                m("div", Ke, [
+                  _(n).title ? (l(), u("p", Xe, x(_(n).title), 1)) : b("", !0),
+                  C(g.$slots, "dialogHeader")
                 ]),
                 m("button", {
                   class: "h0n-dialog-close",
-                  onClick: x[0] || (x[0] = (L) => _(t)())
+                  onClick: a[0] || (a[0] = (i) => _(t)())
                 }, " x ")
               ], 2),
-              u.value ? (a(), r("div", Xe, [...x[1] || (x[1] = [
-                m("div", { class: "h0n-dialog-bg-image" }, null, -1)
-              ])])) : g("", !0),
-              m("div", Ge, [
-                (a(), R(K(_(n).component), X(_(n).props, { onClose: _(t) }), null, 16, ["onClose"]))
+              S.value ? (l(), u("div", Ge, [
+                m("div", {
+                  class: k(["h0n-dialog-bg-image", { "is-loaded": T.value }])
+                }, null, 2)
+              ])) : b("", !0),
+              m("div", Qe, [
+                (l(), V(K(_(n).component), X(_(n).props, { onClose: _(t) }), null, 16, ["onClose"]))
               ])
             ], 6)
-          ], 6)) : g("", !0)
+          ], 6)) : b("", !0)
         ]),
         _: 3
       }, 8, ["name"])
     ]));
   }
-}), Ye = { class: "h0n-ui-menu-item__left" }, et = {
+}), et = { class: "h0n-ui-menu-item__left" }, tt = {
   key: 0,
   class: "h0n-ui-menu-item__icon"
-}, tt = { class: "h0n-ui-menu-item__text" }, nt = {
+}, nt = { class: "h0n-ui-menu-item__text" }, ot = {
   key: 0,
   class: "h0n-ui-menu-item__desc"
-}, ot = {
+}, st = {
   key: 0,
   class: "h0n-ui-menu-item__right"
-}, st = {
+}, at = {
   key: 0,
   class: "h0n-ui-menu-item__right-text"
-}, at = {
+}, it = {
   key: 0,
   class: "h0n-ui-menu-item__chevron"
-}, it = /* @__PURE__ */ C({
+}, lt = /* @__PURE__ */ I({
   __name: "Menu",
   props: {
     title: {},
@@ -576,60 +618,60 @@ const Je = { class: "content-title-dialog" }, Ke = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const t = e, i = n, o = y(() => !!t.to), v = y(() => t.as ?? (o.value ? "a" : "div")), d = y(() => t.chevron !== void 0 ? t.chevron : o.value), f = y(() => t.disabled ? {
+    const t = e, r = n, o = y(() => !!t.to), v = y(() => t.as ?? (o.value ? "a" : "div")), f = y(() => t.chevron !== void 0 ? t.chevron : o.value), h = y(() => t.disabled ? {
       role: "button",
       tabindex: -1
     } : t.as ? t.to ? { to: t.to } : {} : o.value ? { href: "#" } : { role: "button", tabindex: 0 });
-    function u(l) {
+    function d(c) {
       if (t.disabled) {
-        l.preventDefault(), l.stopPropagation();
+        c.preventDefault(), c.stopPropagation();
         return;
       }
-      !t.as && o.value && l.preventDefault(), i("click", l);
+      !t.as && o.value && c.preventDefault(), r("click", c);
     }
-    return (l, p) => (a(), R(K(v.value), X({ class: "h0n-ui-menu-item" }, f.value, {
+    return (c, p) => (l(), V(K(v.value), X({ class: "h0n-ui-menu-item" }, h.value, {
       "aria-disabled": e.disabled || void 0,
-      onClick: u
+      onClick: d
     }), {
-      default: T(() => [
-        m("div", Ye, [
-          l.$slots.icon || e.icon ? (a(), r("div", et, [
-            k(l.$slots, "icon", {}, () => [
-              U($(e.icon), 1)
+      default: H(() => [
+        m("div", et, [
+          c.$slots.icon || e.icon ? (l(), u("div", tt, [
+            C(c.$slots, "icon", {}, () => [
+              j(x(e.icon), 1)
             ])
-          ])) : g("", !0),
-          m("div", tt, [
+          ])) : b("", !0),
+          m("div", nt, [
             m("p", {
-              class: w(["h0n-ui-menu-item__title", { "is-danger": e.danger }])
+              class: k(["h0n-ui-menu-item__title", { "is-danger": e.danger }])
             }, [
-              k(l.$slots, "title", {}, () => [
-                U($(e.title), 1)
+              C(c.$slots, "title", {}, () => [
+                j(x(e.title), 1)
               ])
             ], 2),
-            e.description || l.$slots.description ? (a(), r("p", nt, [
-              k(l.$slots, "description", {}, () => [
-                U($(e.description), 1)
+            e.description || c.$slots.description ? (l(), u("p", ot, [
+              C(c.$slots, "description", {}, () => [
+                j(x(e.description), 1)
               ])
-            ])) : g("", !0)
+            ])) : b("", !0)
           ])
         ]),
-        e.right || l.$slots.right || d.value ? (a(), r("div", ot, [
-          k(l.$slots, "right", {}, () => [
-            e.right ? (a(), r("p", st, $(e.right), 1)) : g("", !0)
+        e.right || c.$slots.right || f.value ? (l(), u("div", st, [
+          C(c.$slots, "right", {}, () => [
+            e.right ? (l(), u("p", at, x(e.right), 1)) : b("", !0)
           ]),
-          d.value ? (a(), r("span", at, "›")) : g("", !0)
-        ])) : g("", !0)
+          f.value ? (l(), u("span", it, "›")) : b("", !0)
+        ])) : b("", !0)
       ]),
       _: 3
     }, 16, ["aria-disabled"]));
   }
-}), lt = {
+}), rt = {
   key: 0,
   class: "h0n-ui-image__loader"
-}, rt = {
+}, ct = {
   key: 1,
   class: "h0n-ui-image__error"
-}, ct = ["src"], ut = ["src", "alt"], dt = /* @__PURE__ */ C({
+}, ut = ["src"], dt = ["src", "alt"], ft = /* @__PURE__ */ I({
   __name: "Image",
   props: {
     src: {},
@@ -641,81 +683,81 @@ const Je = { class: "content-title-dialog" }, Ke = {
   },
   setup(e) {
     const n = e, t = O("loading");
-    function i() {
+    function r() {
       t.value = "loading";
-      const d = new Image();
-      d.src = n.src, d.onload = () => {
+      const f = new Image();
+      f.src = n.src, f.onload = () => {
         t.value = "loaded";
-      }, d.onerror = () => {
+      }, f.onerror = () => {
         t.value = "error";
       };
     }
     G(() => {
       if (n.lazy && "IntersectionObserver" in window) {
-        const d = new IntersectionObserver(([f]) => {
-          f.isIntersecting && (i(), d.disconnect());
+        const f = new IntersectionObserver(([h]) => {
+          h.isIntersecting && (r(), f.disconnect());
         });
-        d.observe(document.body);
+        f.observe(document.body);
       } else
-        i();
-    }), H(() => n.src, i);
+        r();
+    }), E(() => n.src, r);
     const o = y(() => ({
       borderRadius: typeof n.radius == "number" ? `${n.radius}px` : n.radius
     })), v = y(() => ({
       objectFit: n.fit
     }));
-    return (d, f) => (a(), r("div", {
-      class: w(["h0n-ui-image", t.value]),
-      style: S(o.value)
+    return (f, h) => (l(), u("div", {
+      class: k(["h0n-ui-image", t.value]),
+      style: R(o.value)
     }, [
-      t.value === "loading" ? (a(), r("div", lt)) : t.value === "error" ? (a(), r("div", rt, [
-        e.fallback ? (a(), r("img", {
+      t.value === "loading" ? (l(), u("div", rt)) : t.value === "error" ? (l(), u("div", ct, [
+        e.fallback ? (l(), u("img", {
           key: 0,
           src: e.fallback
-        }, null, 8, ct)) : g("", !0)
-      ])) : (a(), r("img", {
+        }, null, 8, ut)) : b("", !0)
+      ])) : (l(), u("img", {
         key: 2,
         src: e.src,
         alt: e.alt,
-        style: S(v.value),
+        style: R(v.value),
         draggable: "false"
-      }, null, 12, ut))
+      }, null, 12, dt))
     ], 6));
   }
-}), ft = /* @__PURE__ */ C({
+}), ht = /* @__PURE__ */ I({
   __name: "Overlay",
   setup(e) {
-    const { top: n, getBackdropZIndex: t, requestCloseTop: i } = M(), o = y(() => !!n.value && n.value.showOverlay !== !1), v = y(() => {
+    const { top: n, getBackdropZIndex: t, requestCloseTop: r } = N(), o = y(() => !!n.value && n.value.showOverlay !== !1), v = y(() => {
       if (n.value?.id)
         return t(n.value.id);
     });
-    function d() {
+    function f() {
     }
-    function f(l) {
+    function h(c) {
       const p = n.value;
-      !p || p.closeOnOverlay === !1 || i();
+      !p || p.closeOnOverlay === !1 || r();
     }
-    function u(l) {
+    function d(c) {
       const p = n.value;
-      !p || p.closeOnEsc === !1 || l.key === "Escape" && i();
+      !p || p.closeOnEsc === !1 || c.key === "Escape" && r();
     }
-    return G(() => window.addEventListener("keydown", u)), me(() => window.removeEventListener("keydown", u)), (l, p) => (a(), R(J, { to: "body" }, [
-      z(D, { name: "h0n-ui-fade" }, {
-        default: T(() => [
-          o.value ? (a(), r("div", {
+    return G(() => window.addEventListener("keydown", d)), ye(() => window.removeEventListener("keydown", d)), (c, p) => (l(), V(J, { to: "body" }, [
+      A(q, { name: "h0n-ui-fade" }, {
+        default: H(() => [
+          o.value ? (l(), u("div", {
             key: 0,
             class: "h0n-ui-overlay",
-            style: S({ zIndex: v.value }),
-            onPointerdown: F(d, ["self", "prevent", "stop"]),
-            onPointerup: F(d, ["self", "prevent", "stop"]),
-            onClick: F(f, ["self", "prevent", "stop"])
-          }, null, 36)) : g("", !0)
+            style: R({ zIndex: v.value }),
+            onPointerdown: F(f, ["self", "prevent", "stop"]),
+            onPointerup: F(f, ["self", "prevent", "stop"]),
+            onClick: F(h, ["self", "prevent", "stop"])
+          }, null, 36)) : b("", !0)
         ]),
         _: 1
       })
     ]));
   }
-}), ht = /* @__PURE__ */ C({
+}), vt = /* @__PURE__ */ I({
   __name: "Skeleton",
   props: {
     width: { default: "100%" },
@@ -725,7 +767,7 @@ const Je = { class: "content-title-dialog" }, Ke = {
     animated: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const n = e, t = (o) => typeof o == "number" ? `${o}px` : o, i = y(() => {
+    const n = e, t = (o) => typeof o == "number" ? `${o}px` : o, r = y(() => {
       const o = {
         width: t(n.width),
         height: t(n.height),
@@ -733,15 +775,15 @@ const Je = { class: "content-title-dialog" }, Ke = {
       };
       return n.variant === "circle" ? { ...o, borderRadius: "999px" } : n.variant === "round" ? { ...o, borderRadius: "14px" } : o;
     });
-    return (o, v) => (a(), r("div", {
-      class: w(["h0n-skeleton", { "is-animated": e.animated }]),
-      style: S(i.value)
+    return (o, v) => (l(), u("div", {
+      class: k(["h0n-skeleton", { "is-animated": e.animated }]),
+      style: R(r.value)
     }, null, 6));
   }
-}), vt = { class: "h0n-tabs" }, mt = ["onClick"], yt = { class: "h0n-tabs__label" }, pt = {
+}), mt = { class: "h0n-tabs" }, yt = ["onClick"], pt = { class: "h0n-tabs__label" }, gt = {
   key: 0,
   class: "h0n-tabs__content"
-}, _t = /* @__PURE__ */ C({
+}, _t = /* @__PURE__ */ I({
   __name: "Tabs",
   props: {
     modelValue: {},
@@ -749,60 +791,62 @@ const Je = { class: "content-title-dialog" }, Ke = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: n }) {
-    const t = e, i = n, o = y(
-      () => t.tabs.findIndex((s) => s.value === t.modelValue)
-    ), v = O(null), d = O(null), f = O(0), u = O(0), l = O("forward");
+    const t = e, r = n, o = y(
+      () => t.tabs.findIndex((i) => i.value === t.modelValue)
+    ), v = O(null), f = O(null), h = O(0), d = O(0), c = O("forward");
     let p = 0;
-    const x = () => {
-      V("auto");
-    }, L = () => {
-      const s = d.value;
-      return s ? s.querySelector(".h0n-tabs__tab.is-active") : null;
-    }, V = async (s = "smooth") => {
-      const h = ++p;
-      if (await pe(), h !== p) return;
-      const c = d.value, I = L(), b = v.value;
-      if (!I || !c) {
-        f.value = 0, u.value = 0;
+    const S = () => {
+      L("auto");
+    }, T = () => {
+      const i = f.value;
+      return i ? i.querySelector(".h0n-tabs__tab.is-active") : null;
+    }, L = async (i = "smooth") => {
+      const s = ++p;
+      if (await ge(), s !== p) return;
+      const $ = f.value, w = T(), B = v.value;
+      if (!w || !$) {
+        h.value = 0, d.value = 0;
         return;
       }
-      const j = I.querySelector(".h0n-tabs__label") ?? I, ce = c.getBoundingClientRect(), Y = j.getBoundingClientRect();
-      if (f.value = Y.left - ce.left, u.value = Y.width, !b) return;
-      const ue = I.offsetLeft + I.offsetWidth / 2 - b.clientWidth / 2, de = Math.max(b.scrollWidth - b.clientWidth, 0), ee = Math.min(Math.max(ue, 0), de);
-      Math.abs(b.scrollLeft - ee) < 1 || b.scrollTo({
+      const ce = w.querySelector(".h0n-tabs__label") ?? w, ue = $.getBoundingClientRect(), Y = ce.getBoundingClientRect();
+      if (h.value = Y.left - ue.left, d.value = Y.width, !B) return;
+      const de = w.offsetLeft + w.offsetWidth / 2 - B.clientWidth / 2, fe = Math.max(B.scrollWidth - B.clientWidth, 0), ee = Math.min(Math.max(de, 0), fe);
+      Math.abs(B.scrollLeft - ee) < 1 || B.scrollTo({
         left: ee,
-        behavior: s
+        behavior: i
       });
     }, P = y(() => ({
       left: "0px",
-      width: `${u.value}px`,
-      transform: `translateX(${f.value}px)`
+      width: `${d.value}px`,
+      transform: `translateX(${h.value}px)`
     }));
-    H(
+    E(
       () => o.value,
-      (s, h) => {
-        if (h === void 0 || h === -1 || s === -1) {
-          l.value = "forward";
+      (i, s) => {
+        if (s === void 0 || s === -1 || i === -1) {
+          c.value = "forward";
           return;
         }
-        l.value = s >= h ? "forward" : "backward";
+        c.value = i >= s ? "forward" : "backward";
       }
     );
-    const q = y(
-      () => l.value === "forward" ? "h0n-tabs-slide-left" : "h0n-tabs-slide-right"
-    ), N = (s) => {
-      i("update:modelValue", s);
+    const D = y(
+      () => c.value === "forward" ? "h0n-tabs-slide-left" : "h0n-tabs-slide-right"
+    ), g = y(
+      () => t.tabs.length > 0 && t.tabs.length <= 3
+    ), a = (i) => {
+      r("update:modelValue", i);
     };
     return G(() => {
-      V("auto"), window.addEventListener("resize", x);
-    }), ye(() => {
-      p++, window.removeEventListener("resize", x);
-    }), H(
+      L("auto"), window.addEventListener("resize", S);
+    }), pe(() => {
+      p++, window.removeEventListener("resize", S);
+    }), E(
       () => [t.modelValue, t.tabs.length],
       () => {
-        V();
+        L();
       }
-    ), (s, h) => (a(), r("div", vt, [
+    ), (i, s) => (l(), u("div", mt, [
       m("div", {
         ref_key: "scrollerRef",
         ref: v,
@@ -810,72 +854,72 @@ const Je = { class: "content-title-dialog" }, Ke = {
       }, [
         m("div", {
           ref_key: "listRef",
-          ref: d,
-          class: "h0n-tabs__list"
+          ref: f,
+          class: k(["h0n-tabs__list", { "is-even": g.value }])
         }, [
-          (a(!0), r(Z, null, ae(e.tabs, (c, I) => (a(), r("button", {
-            key: `${String(c.value)}-${I}`,
-            class: w(["h0n-tabs__tab", { "is-active": c.value === e.modelValue }]),
+          (l(!0), u(Z, null, ae(e.tabs, ($, w) => (l(), u("button", {
+            key: `${String($.value)}-${w}`,
+            class: k(["h0n-tabs__tab", { "is-active": $.value === e.modelValue }]),
             type: "button",
-            onClick: (b) => N(c.value)
+            onClick: (B) => a($.value)
           }, [
-            m("span", yt, $(c.label), 1)
-          ], 10, mt))), 128)),
+            m("span", pt, x($.label), 1)
+          ], 10, yt))), 128)),
           m("span", {
             class: "h0n-tabs__indicator",
-            style: S(P.value)
+            style: R(P.value)
           }, null, 4)
-        ], 512)
+        ], 2)
       ], 512),
-      s.$slots.default ? (a(), r("div", pt, [
-        z(D, {
-          name: q.value,
+      i.$slots.default ? (l(), u("div", gt, [
+        A(q, {
+          name: D.value,
           mode: "out-in"
         }, {
-          default: T(() => [
-            (a(), r("div", {
+          default: H(() => [
+            (l(), u("div", {
               key: e.modelValue,
               class: "h0n-tabs__panel"
             }, [
-              k(s.$slots, "default", { activeTab: e.modelValue })
+              C(i.$slots, "default", { activeTab: e.modelValue })
             ]))
           ]),
           _: 3
         }, 8, ["name"])
-      ])) : g("", !0)
+      ])) : b("", !0)
     ]));
   }
 });
-function gt(e) {
-  const n = bt(e);
+function bt(e) {
+  const n = kt(e);
   return {
     install(t) {
-      t.component("H0Accordion", Se), t.component("H0Alert", He), t.component("H0Button", Ne), t.component("H0Card", We), t.component("H0Dialog", Qe), t.component("H0Spinner", re), t.component("H0Menu", it), t.component("H0Image", dt), t.component("H0Overlay", ft), t.component("H0Skeleton", ht), t.component("H0Tabs", _t), ge(n.theme);
+      t.component("H0Accordion", Be), t.component("H0Alert", Pe), t.component("H0Button", je), t.component("H0Card", Ze), t.component("H0Dialog", Ye), t.component("H0Spinner", re), t.component("H0Menu", lt), t.component("H0Image", ft), t.component("H0Overlay", ht), t.component("H0Skeleton", vt), t.component("H0Tabs", _t), be(n.theme);
     }
   };
 }
-const wt = gt();
-function bt(e) {
+const Ct = bt();
+function kt(e) {
   return {
     autoRegisterComponents: e?.autoRegisterComponents ?? !0,
     theme: _e(e?.theme)
   };
 }
 export {
-  Se as Accordion,
-  He as Alert,
-  Ne as Button,
-  We as Card,
-  Qe as Dialog,
-  dt as Image,
-  it as Menu,
-  ft as Overlay,
-  ht as Skeleton,
+  Be as Accordion,
+  Pe as Alert,
+  je as Button,
+  Ze as Card,
+  Ye as Dialog,
+  ft as Image,
+  lt as Menu,
+  ht as Overlay,
+  vt as Skeleton,
   re as Spinner,
   _t as Tabs,
-  gt as createH0NPlugin,
-  wt as h0nUi,
-  M as useOverlayStack,
-  Be as useWebAlert,
-  Ze as useWebDialog
+  bt as createH0NPlugin,
+  Ct as h0nUi,
+  N as useOverlayStack,
+  Re as useWebAlert,
+  Je as useWebDialog
 };