wj-elements 0.0.4 → 0.0.6

package/dist/wj-popup.js

@@ -1,7 +1,7 @@
 var Ot = Object.defineProperty;
 var Lt = (t, e, n) => e in t ? Ot(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
 var ut = (t, e, n) => (Lt(t, typeof e != "symbol" ? e + "" : e, n), n);
-import Tt, { event as G } from "./wj-element.js";
+import Tt, { event as U } from "./wj-element.js";
 import "./wj-store.js";
 const N = Math.min, R = Math.max, Z = Math.round, Q = Math.floor, B = (t) => ({
   x: t,
@@ -18,10 +18,10 @@ const N = Math.min, R = Math.max, Z = Math.round, Q = Math.floor, B = (t) => ({
 function Dt(t, e, n) {
   return R(t, N(e, n));
 }
-function U(t, e) {
+function K(t, e) {
   return typeof t == "function" ? t(e) : t;
 }
-function j(t) {
+function V(t) {
   return t.split("-")[0];
 }
 function _(t) {
@@ -34,7 +34,7 @@ function rt(t) {
   return t === "y" ? "height" : "width";
 }
 function nt(t) {
-  return ["top", "bottom"].includes(j(t)) ? "y" : "x";
+  return ["top", "bottom"].includes(V(t)) ? "y" : "x";
 }
 function ct(t) {
   return kt(nt(t));
@@ -45,14 +45,14 @@ function Wt(t, e, n) {
   let r = i === "x" ? o === (n ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top";
   return e.reference[s] > e.floating[s] && (r = tt(r)), [r, tt(r)];
 }
-function Mt(t) {
+function Ht(t) {
   const e = tt(t);
   return [st(t), e, st(e)];
 }
 function st(t) {
   return t.replace(/start|end/g, (e) => St[e]);
 }
-function Ft(t, e, n) {
+function Mt(t, e, n) {
   const o = ["left", "right"], i = ["right", "left"], s = ["top", "bottom"], r = ["bottom", "top"];
   switch (t) {
     case "top":
@@ -65,9 +65,9 @@ function Ft(t, e, n) {
       return [];
   }
 }
-function Ht(t, e, n, o) {
+function Ft(t, e, n, o) {
   const i = _(t);
-  let s = Ft(j(t), n === "start", o);
+  let s = Mt(V(t), n === "start", o);
   return i && (s = s.map((r) => r + "-" + i), e && (s = s.concat(s.map(st)))), s;
 }
 function tt(t) {
@@ -104,7 +104,7 @@ function ht(t, e, n) {
     reference: o,
     floating: i
   } = t;
-  const s = nt(e), r = ct(e), l = rt(r), c = j(e), a = s === "y", d = o.x + o.width / 2 - i.width / 2, u = o.y + o.height / 2 - i.height / 2, p = o[l] / 2 - i[l] / 2;
+  const s = nt(e), r = ct(e), l = rt(r), c = V(e), a = s === "y", d = o.x + o.width / 2 - i.width / 2, u = o.y + o.height / 2 - i.height / 2, p = o[l] / 2 - i[l] / 2;
   let f;
   switch (c) {
     case "top":
@@ -227,7 +227,7 @@ async function wt(t, e) {
     elementContext: u = "floating",
     altBoundary: p = !1,
     padding: f = 0
-  } = U(e, t), h = gt(f), w = l[p ? u === "floating" ? "reference" : "floating" : u], g = et(await s.getClippingRect({
+  } = K(e, t), h = gt(f), w = l[p ? u === "floating" ? "reference" : "floating" : u], g = et(await s.getClippingRect({
     element: (n = await (s.isElement == null ? void 0 : s.isElement(w))) == null || n ? w : w.contextElement || await (s.getDocumentElement == null ? void 0 : s.getDocumentElement(l.floating)),
     boundary: a,
     rootBoundary: d,
@@ -254,7 +254,7 @@ async function wt(t, e) {
     right: (x.right - g.right + h.right) / A.x
   };
 }
-const Vt = (t) => ({
+const jt = (t) => ({
   name: "arrow",
   options: t,
   async fn(e) {
@@ -269,7 +269,7 @@ const Vt = (t) => ({
     } = e, {
       element: a,
       padding: d = 0
-    } = U(t, e) || {};
+    } = K(t, e) || {};
     if (a == null)
       return {};
     const u = gt(d), p = {
@@ -278,7 +278,7 @@ const Vt = (t) => ({
     }, f = ct(i), h = rt(f), m = await r.getDimensions(a), w = f === "y", g = w ? "top" : "left", v = w ? "bottom" : "right", y = w ? "clientHeight" : "clientWidth", A = s.reference[h] + s.reference[f] - p[f] - s.floating[h], x = p[f] - s.reference[f], b = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(a));
     let E = b ? b[y] : 0;
     (!E || !await (r.isElement == null ? void 0 : r.isElement(b))) && (E = l.floating[y] || s.floating[h]);
-    const P = A / 2 - x / 2, H = E / 2 - m[h] / 2 - 1, Y = N(u[g], H), X = N(u[v], H), L = Y, q = E - m[h] - X, C = E / 2 - m[h] / 2 + P, S = Dt(L, C, q), D = !c.arrow && _(i) != null && C != S && s.reference[h] / 2 - (C < L ? Y : X) - m[h] / 2 < 0, W = D ? C < L ? C - L : C - q : 0;
+    const P = A / 2 - x / 2, F = E / 2 - m[h] / 2 - 1, Y = N(u[g], F), X = N(u[v], F), L = Y, q = E - m[h] - X, C = E / 2 - m[h] / 2 + P, S = Dt(L, C, q), D = !c.arrow && _(i) != null && C != S && s.reference[h] / 2 - (C < L ? Y : X) - m[h] / 2 < 0, W = D ? C < L ? C - L : C - q : 0;
     return {
       [f]: p[f] + W,
       data: {
@@ -291,7 +291,7 @@ const Vt = (t) => ({
       reset: D
     };
   }
-}), jt = function(t) {
+}), Vt = function(t) {
   return t === void 0 && (t = {}), {
     name: "flip",
     options: t,
@@ -312,11 +312,11 @@ const Vt = (t) => ({
         fallbackAxisSideDirection: h = "none",
         flipAlignment: m = !0,
         ...w
-      } = U(t, e);
+      } = K(t, e);
       if ((n = s.arrow) != null && n.alignmentOffset)
         return {};
-      const g = j(i), v = j(l) === l, y = await (c.isRTL == null ? void 0 : c.isRTL(a.floating)), A = p || (v || !m ? [tt(l)] : Mt(l));
-      !p && h !== "none" && A.push(...Ht(l, m, h, y));
+      const g = V(i), v = V(l) === l, y = await (c.isRTL == null ? void 0 : c.isRTL(a.floating)), A = p || (v || !m ? [tt(l)] : Ht(l));
+      !p && h !== "none" && A.push(...Ft(l, m, h, y));
       const x = [l, ...A], b = await wt(e, w), E = [];
       let P = ((o = s.flip) == null ? void 0 : o.overflows) || [];
       if (d && E.push(b[g]), u) {
@@ -327,8 +327,8 @@ const Vt = (t) => ({
         placement: i,
         overflows: E
       }], !E.every((L) => L <= 0)) {
-        var H, Y;
-        const L = (((H = s.flip) == null ? void 0 : H.index) || 0) + 1, q = x[L];
+        var F, Y;
+        const L = (((F = s.flip) == null ? void 0 : F.index) || 0) + 1, q = x[L];
         if (q)
           return {
             data: {
@@ -368,7 +368,7 @@ async function zt(t, e) {
     placement: n,
     platform: o,
     elements: i
-  } = t, s = await (o.isRTL == null ? void 0 : o.isRTL(i.floating)), r = j(n), l = _(n), c = nt(n) === "y", a = ["left", "top"].includes(r) ? -1 : 1, d = s && c ? -1 : 1, u = U(e, t);
+  } = t, s = await (o.isRTL == null ? void 0 : o.isRTL(i.floating)), r = V(n), l = _(n), c = nt(n) === "y", a = ["left", "top"].includes(r) ? -1 : 1, d = s && c ? -1 : 1, u = K(e, t);
   let {
     mainAxis: p,
     crossAxis: f,
@@ -391,7 +391,7 @@ async function zt(t, e) {
     y: f * d
   };
 }
-const It = function(t) {
+const $t = function(t) {
   return t === void 0 && (t = 0), {
     name: "offset",
     options: t,
@@ -407,7 +407,7 @@ const It = function(t) {
       };
     }
   };
-}, $t = function(t) {
+}, It = function(t) {
   return t === void 0 && (t = {}), {
     name: "size",
     options: t,
@@ -421,7 +421,7 @@ const It = function(t) {
         apply: r = () => {
         },
         ...l
-      } = U(t, e), c = await wt(e, l), a = j(n), d = _(n), u = nt(n) === "y", {
+      } = K(t, e), c = await wt(e, l), a = V(n), d = _(n), u = nt(n) === "y", {
         width: p,
         height: f
       } = o.floating;
@@ -437,8 +437,8 @@ const It = function(t) {
         y = d || v ? N(w, b) : b;
       }
       if (v && !d) {
-        const b = R(c.left, 0), E = R(c.right, 0), P = R(c.top, 0), H = R(c.bottom, 0);
-        u ? A = p - 2 * (b !== 0 || E !== 0 ? b + E : R(c.left, c.right)) : y = f - 2 * (P !== 0 || H !== 0 ? P + H : R(c.top, c.bottom));
+        const b = R(c.left, 0), E = R(c.right, 0), P = R(c.top, 0), F = R(c.bottom, 0);
+        u ? A = p - 2 * (b !== 0 || E !== 0 ? b + E : R(c.left, c.right)) : y = f - 2 * (P !== 0 || F !== 0 ? P + F : R(c.top, c.bottom));
       }
       await r({
         ...e,
@@ -454,21 +454,21 @@ const It = function(t) {
     }
   };
 };
-function V(t) {
+function j(t) {
   return xt(t) ? (t.nodeName || "").toLowerCase() : "#document";
 }
 function O(t) {
   var e;
   return (t == null || (e = t.ownerDocument) == null ? void 0 : e.defaultView) || window;
 }
-function F(t) {
+function M(t) {
   var e;
   return (e = (xt(t) ? t.ownerDocument : t.document) || window.document) == null ? void 0 : e.documentElement;
 }
 function xt(t) {
   return t instanceof Node || t instanceof O(t).Node;
 }
-function M(t) {
+function H(t) {
   return t instanceof Element || t instanceof O(t).Element;
 }
 function k(t) {
@@ -477,7 +477,7 @@ function k(t) {
 function dt(t) {
   return typeof ShadowRoot > "u" ? !1 : t instanceof ShadowRoot || t instanceof O(t).ShadowRoot;
 }
-function J(t) {
+function G(t) {
   const {
     overflow: e,
     overflowX: n,
@@ -487,18 +487,18 @@ function J(t) {
   return /auto|scroll|overlay|hidden|clip/.test(e + o + n) && !["inline", "contents"].includes(i);
 }
 function _t(t) {
-  return ["table", "td", "th"].includes(V(t));
+  return ["table", "td", "th"].includes(j(t));
 }
 function lt(t) {
   const e = at(), n = T(t);
   return n.transform !== "none" || n.perspective !== "none" || (n.containerType ? n.containerType !== "normal" : !1) || !e && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !e && (n.filter ? n.filter !== "none" : !1) || ["transform", "perspective", "filter"].some((o) => (n.willChange || "").includes(o)) || ["paint", "layout", "strict", "content"].some((o) => (n.contain || "").includes(o));
 }
 function Yt(t) {
-  let e = $(t);
+  let e = I(t);
   for (; k(e) && !ot(e); ) {
     if (lt(e))
       return e;
-    e = $(e);
+    e = I(e);
   }
   return null;
 }
@@ -506,13 +506,13 @@ function at() {
   return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
 }
 function ot(t) {
-  return ["html", "body", "#document"].includes(V(t));
+  return ["html", "body", "#document"].includes(j(t));
 }
 function T(t) {
   return O(t).getComputedStyle(t);
 }
 function it(t) {
-  return M(t) ? {
+  return H(t) ? {
     scrollLeft: t.scrollLeft,
     scrollTop: t.scrollTop
   } : {
@@ -520,27 +520,27 @@ function it(t) {
     scrollTop: t.pageYOffset
   };
 }
-function $(t) {
-  if (V(t) === "html")
+function I(t) {
+  if (j(t) === "html")
     return t;
   const e = (
     // Step into the shadow DOM of the parent of a slotted node.
     t.assignedSlot || // DOM Element detected.
     t.parentNode || // ShadowRoot detected.
     dt(t) && t.host || // Fallback.
-    F(t)
+    M(t)
   );
   return dt(e) ? e.host : e;
 }
 function vt(t) {
-  const e = $(t);
-  return ot(e) ? t.ownerDocument ? t.ownerDocument.body : t.body : k(e) && J(e) ? e : vt(e);
+  const e = I(t);
+  return ot(e) ? t.ownerDocument ? t.ownerDocument.body : t.body : k(e) && G(e) ? e : vt(e);
 }
-function K(t, e, n) {
+function J(t, e, n) {
   var o;
   e === void 0 && (e = []), n === void 0 && (n = !0);
   const i = vt(t), s = i === ((o = t.ownerDocument) == null ? void 0 : o.body), r = O(i);
-  return s ? e.concat(r, r.visualViewport || [], J(i) ? i : [], r.frameElement && n ? K(r.frameElement) : []) : e.concat(i, K(i, [], n));
+  return s ? e.concat(r, r.visualViewport || [], G(i) ? i : [], r.frameElement && n ? J(r.frameElement) : []) : e.concat(i, J(i, [], n));
 }
 function yt(t) {
   const e = T(t);
@@ -553,9 +553,9 @@ function yt(t) {
   };
 }
 function ft(t) {
-  return M(t) ? t : t.contextElement;
+  return H(t) ? t : t.contextElement;
 }
-function I(t) {
+function $(t) {
   const e = ft(t);
   if (!k(e))
     return B(1);
@@ -585,14 +585,14 @@ function z(t, e, n, o) {
   e === void 0 && (e = !1), n === void 0 && (n = !1);
   const i = t.getBoundingClientRect(), s = ft(t);
   let r = B(1);
-  e && (o ? M(o) && (r = I(o)) : r = I(t));
+  e && (o ? H(o) && (r = $(o)) : r = $(t));
   const l = qt(s, n, o) ? bt(s) : B(0);
   let c = (i.left + l.x) / r.x, a = (i.top + l.y) / r.y, d = i.width / r.x, u = i.height / r.y;
   if (s) {
-    const p = O(s), f = o && M(o) ? O(o) : o;
+    const p = O(s), f = o && H(o) ? O(o) : o;
     let h = p.frameElement;
     for (; h && o && f !== p; ) {
-      const m = I(h), w = h.getBoundingClientRect(), g = T(h), v = w.left + (h.clientLeft + parseFloat(g.paddingLeft)) * m.x, y = w.top + (h.clientTop + parseFloat(g.paddingTop)) * m.y;
+      const m = $(h), w = h.getBoundingClientRect(), g = T(h), v = w.left + (h.clientLeft + parseFloat(g.paddingLeft)) * m.x, y = w.top + (h.clientTop + parseFloat(g.paddingTop)) * m.y;
       c *= m.x, a *= m.y, d *= m.x, u *= m.y, c += v, a += y, h = O(h).frameElement;
     }
   }
@@ -603,13 +603,13 @@ function z(t, e, n, o) {
     y: a
   });
 }
-function Kt(t) {
+function Ut(t) {
   let {
     rect: e,
     offsetParent: n,
     strategy: o
   } = t;
-  const i = k(n), s = F(n);
+  const i = k(n), s = M(n);
   if (n === s)
     return e;
   let r = {
@@ -617,9 +617,9 @@ function Kt(t) {
     scrollTop: 0
   }, l = B(1);
   const c = B(0);
-  if ((i || !i && o !== "fixed") && ((V(n) !== "body" || J(s)) && (r = it(n)), k(n))) {
+  if ((i || !i && o !== "fixed") && ((j(n) !== "body" || G(s)) && (r = it(n)), k(n))) {
     const a = z(n);
-    l = I(n), c.x = a.x + n.clientLeft, c.y = a.y + n.clientTop;
+    l = $(n), c.x = a.x + n.clientLeft, c.y = a.y + n.clientTop;
   }
   return {
     width: e.width * l.x,
@@ -628,14 +628,14 @@ function Kt(t) {
     y: e.y * l.y - r.scrollTop * l.y + c.y
   };
 }
-function Ut(t) {
+function Jt(t) {
   return Array.from(t.getClientRects());
 }
 function At(t) {
-  return z(F(t)).left + it(t).scrollLeft;
+  return z(M(t)).left + it(t).scrollLeft;
 }
-function Jt(t) {
-  const e = F(t), n = it(t), o = t.ownerDocument.body, i = R(e.scrollWidth, e.clientWidth, o.scrollWidth, o.clientWidth), s = R(e.scrollHeight, e.clientHeight, o.scrollHeight, o.clientHeight);
+function Kt(t) {
+  const e = M(t), n = it(t), o = t.ownerDocument.body, i = R(e.scrollWidth, e.clientWidth, o.scrollWidth, o.clientWidth), s = R(e.scrollHeight, e.clientHeight, o.scrollHeight, o.clientHeight);
   let r = -n.scrollLeft + At(t);
   const l = -n.scrollTop;
   return T(o).direction === "rtl" && (r += R(e.clientWidth, o.clientWidth) - i), {
@@ -646,7 +646,7 @@ function Jt(t) {
   };
 }
 function Gt(t, e) {
-  const n = O(t), o = F(t), i = n.visualViewport;
+  const n = O(t), o = M(t), i = n.visualViewport;
   let s = o.clientWidth, r = o.clientHeight, l = 0, c = 0;
   if (i) {
     s = i.width, r = i.height;
@@ -661,7 +661,7 @@ function Gt(t, e) {
   };
 }
 function Qt(t, e) {
-  const n = z(t, !0, e === "fixed"), o = n.top + t.clientTop, i = n.left + t.clientLeft, s = k(t) ? I(t) : B(1), r = t.clientWidth * s.x, l = t.clientHeight * s.y, c = i * s.x, a = o * s.y;
+  const n = z(t, !0, e === "fixed"), o = n.top + t.clientTop, i = n.left + t.clientLeft, s = k(t) ? $(t) : B(1), r = t.clientWidth * s.x, l = t.clientHeight * s.y, c = i * s.x, a = o * s.y;
   return {
     width: r,
     height: l,
@@ -674,8 +674,8 @@ function pt(t, e, n) {
   if (e === "viewport")
     o = Gt(t, n);
   else if (e === "document")
-    o = Jt(F(t));
-  else if (M(e))
+    o = Kt(M(t));
+  else if (H(e))
     o = Qt(e, n);
   else {
     const i = bt(t);
@@ -688,19 +688,19 @@ function pt(t, e, n) {
   return et(o);
 }
 function Et(t, e) {
-  const n = $(t);
-  return n === e || !M(n) || ot(n) ? !1 : T(n).position === "fixed" || Et(n, e);
+  const n = I(t);
+  return n === e || !H(n) || ot(n) ? !1 : T(n).position === "fixed" || Et(n, e);
 }
 function Zt(t, e) {
   const n = e.get(t);
   if (n)
     return n;
-  let o = K(t, [], !1).filter((l) => M(l) && V(l) !== "body"), i = null;
+  let o = J(t, [], !1).filter((l) => H(l) && j(l) !== "body"), i = null;
   const s = T(t).position === "fixed";
-  let r = s ? $(t) : t;
-  for (; M(r) && !ot(r); ) {
+  let r = s ? I(t) : t;
+  for (; H(r) && !ot(r); ) {
     const l = T(r), c = lt(r);
-    !c && l.position === "fixed" && (i = null), (s ? !c && !i : !c && l.position === "static" && !!i && ["absolute", "fixed"].includes(i.position) || J(r) && !c && Et(t, r)) ? o = o.filter((d) => d !== r) : i = l, r = $(r);
+    !c && l.position === "fixed" && (i = null), (s ? !c && !i : !c && l.position === "static" && !!i && ["absolute", "fixed"].includes(i.position) || G(r) && !c && Et(t, r)) ? o = o.filter((d) => d !== r) : i = l, r = I(r);
   }
   return e.set(t, o), o;
 }
@@ -726,14 +726,14 @@ function ee(t) {
   return yt(t);
 }
 function ne(t, e, n) {
-  const o = k(e), i = F(e), s = n === "fixed", r = z(t, !0, s, e);
+  const o = k(e), i = M(e), s = n === "fixed", r = z(t, !0, s, e);
   let l = {
     scrollLeft: 0,
     scrollTop: 0
   };
   const c = B(0);
   if (o || !o && !s)
-    if ((V(e) !== "body" || J(i)) && (l = it(e)), o) {
+    if ((j(e) !== "body" || G(i)) && (l = it(e)), o) {
       const a = z(e, !0, s, e);
       c.x = a.x + e.clientLeft, c.y = a.y + e.clientTop;
     } else
@@ -755,7 +755,7 @@ function Ct(t, e) {
   let o = mt(t, e);
   for (; o && _t(o) && T(o).position === "static"; )
     o = mt(o, e);
-  return o && (V(o) === "html" || V(o) === "body" && T(o).position === "static" && !lt(o)) ? n : o || Yt(t) || n;
+  return o && (j(o) === "html" || j(o) === "body" && T(o).position === "static" && !lt(o)) ? n : o || Yt(t) || n;
 }
 const oe = async function(t) {
   let {
@@ -777,20 +777,20 @@ function ie(t) {
   return T(t).direction === "rtl";
 }
 const se = {
-  convertOffsetParentRelativeRectToViewportRelativeRect: Kt,
-  getDocumentElement: F,
+  convertOffsetParentRelativeRectToViewportRelativeRect: Ut,
+  getDocumentElement: M,
   getClippingRect: te,
   getOffsetParent: Ct,
   getElementRects: oe,
-  getClientRects: Ut,
+  getClientRects: Jt,
   getDimensions: ee,
-  getScale: I,
-  isElement: M,
+  getScale: $,
+  isElement: H,
   isRTL: ie
 };
 function re(t, e) {
   let n = null, o;
-  const i = F(t);
+  const i = M(t);
   function s() {
     clearTimeout(o), n && n.disconnect(), n = null;
   }
@@ -841,7 +841,7 @@ function ce(t, e, n, o) {
     elementResize: r = typeof ResizeObserver == "function",
     layoutShift: l = typeof IntersectionObserver == "function",
     animationFrame: c = !1
-  } = o, a = ft(t), d = i || s ? [...a ? K(a) : [], ...K(e)] : [];
+  } = o, a = ft(t), d = i || s ? [...a ? J(a) : [], ...J(e)] : [];
   d.forEach((g) => {
     i && g.addEventListener("scroll", n, {
       passive: !0
@@ -879,9 +879,7 @@ const le = (t, e, n) => {
     ...i,
     platform: s
   });
-}, ae = `/*!
-* direction.scss
-*/:host{--wj-popup-top: auto;--wj-popup-left: auto;display:flex}.native-popup{position:absolute;isolation:isolate;z-index:999;left:var(--wj-popup-left);top:var(--wj-popup-top)}.native-popup:not(.popup-active){display:none}
+}, ae = `:host{--wj-popup-top: auto;--wj-popup-left: auto;display:flex}.native-popup{position:absolute;isolation:isolate;z-index:999;left:var(--wj-popup-left);top:var(--wj-popup-top)}.native-popup:not(.popup-active){display:none}
 `;
 class fe extends Tt {
   constructor() {
@@ -926,27 +924,27 @@ class fe extends Tt {
       this.anchorEl = n.getElementById(this.anchor);
     } else
       this.slotAnchor instanceof HTMLSlotElement && (this.anchorEl = this.slotAnchor.assignedElements({ flatten: !0 })[0]);
-    G.addListener(this.anchorEl, "click", null, (n) => {
-      console.log("som CLICK"), !this.hasAttribute("disabled") && this.showHide();
+    U.addListener(this.anchorEl, "click", null, (n) => {
+      this.hasAttribute("disabled") || this.showHide();
     }, { stopPropagation: !0 }), document.addEventListener("click", (n) => {
       n.composedPath().some((i) => i === this) || this.hasAttribute("active") && this.removeAttribute("active");
     });
   }
   showHide() {
-    this.hasAttribute("active") ? this.removeAttribute("active") : (this.setAttribute("active", ""), G.addListener(this, "click", "wj:popup-show"));
+    this.hasAttribute("active") ? this.removeAttribute("active") : this.setAttribute("active", "");
   }
   reposition() {
     const n = [];
     this.offsetCalc = +this.offset || 0, this.slotArrow instanceof HTMLSlotElement && (this.arrow = this.slotArrow.assignedElements({ flatten: !0 })[0], this.arrow && (n.push(
-      Vt({
+      jt({
         element: this.arrow
       })
     ), this.offsetCalc = Math.sqrt(2 * this.arrow.offsetWidth ** 2) / 2 + +this.offset)), n.push(
-      It(this.offsetCalc)
+      $t(this.offsetCalc)
     ), n.push(
-      jt()
+      Vt()
     ), this.hasAttribute("size") && n.push(
-      $t({
+      It({
         apply({ availableWidth: o, availableHeight: i, elements: s }) {
           Object.assign(s.floating.style, {
             width: `${s.reference.offsetWidth}px`
@@ -974,22 +972,25 @@ class fe extends Tt {
           });
         }
       }
-    }), G.dispatchCustomEvent(this, "wj-popup:reposition", {
+    }), U.dispatchCustomEvent(this, "wj-popup:reposition", {
       data: { top: "bottom", right: "left", bottom: "top", left: "right" },
       context: this,
       event: this
     });
   }
   show() {
-    this.native.classList.add("popup-active"), this.cleanup = ce(this.anchorEl, this.native, () => {
+    U.dispatchCustomEvent(this, "wj-popup:show"), this.native.classList.add("popup-active"), this.cleanup = ce(this.anchorEl, this.native, () => {
       this.reposition();
     });
   }
   hide() {
-    this.native.classList.remove("popup-active"), this.cleanup(), this.cleanup = void 0;
+    U.dispatchCustomEvent(this, "wj-popup:hide"), this.native.classList.remove("popup-active"), this.cleanup(), this.cleanup = void 0;
+  }
+  onHide() {
+    this.removeAttribute("active");
   }
   disconnectedCallback() {
-    G.removeElement(this.anchorEl);
+    U.removeElement(this.anchorEl);
   }
 }
 customElements.get("wj-popup") || window.customElements.define("wj-popup", fe);

package/dist/wj-progress-bar.js

@@ -1,13 +1,11 @@
 var m = Object.defineProperty;
-var A = (o, i, e) => i in o ? m(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
-var g = (o, i, e) => (A(o, typeof i != "symbol" ? i + "" : i, e), e);
-import f from "./wj-element.js";
+var A = (i, o, e) => o in i ? m(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
+var g = (i, o, e) => (A(i, typeof o != "symbol" ? o + "" : o, e), e);
+import j from "./wj-element.js";
 import "./wj-store.js";
-const k = `/*!
-* direction.scss
-*/:host(.wj-color-primary) #bar{--wj-progress-bar-color: #7252D3}:host(.wj-color-complete) #bar{--wj-progress-bar-color: #0072EC}:host(.wj-color-success) #bar{--wj-progress-bar-color: #19AD79}:host(.wj-color-warning) #bar{--wj-progress-bar-color: #FFd945}:host(.wj-color-danger) #bar{--wj-progress-bar-color: #D83C31}:host(.wj-color-dark) #bar{--wj-progress-bar-color: #212121}:host(.wj-color-light) #bar{--wj-progress-bar-color: #fff}:host{--wj-progress-bar-color: #212121;--wj-progress-bar-text-size: 1rem}:host .progress{position:relative;display:flex;align-items:center}:host .slot-wrapper{display:flex;position:absolute;top:0;align-items:center;width:100%;height:100%;justify-content:center}:host #bar{stroke:var(--wj-progress-bar-color, red)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wj-progress-bar-text-size)}:host(.wj-color) #bar{stroke:var(--wj-progress-bar-color)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}
+const k = `:host(.wj-color-primary) #bar{--wj-progress-bar-color: var(--wj-color-primary)}:host(.wj-color-complete) #bar{--wj-progress-bar-color: var(--wj-color-complete)}:host(.wj-color-success) #bar{--wj-progress-bar-color: var(--wj-color-success)}:host(.wj-color-warning) #bar{--wj-progress-bar-color: var(--wj-color-warning)}:host(.wj-color-danger) #bar{--wj-progress-bar-color: var(--wj-color-danger)}:host(.wj-color-dark) #bar{--wj-progress-bar-color: var(--wj-color-contrast-0)}:host(.wj-color-light) #bar{--wj-progress-bar-color: var(--wj-color-contrast-11)}:host{--wj-progress-bar-color: var(--wj-color-contrast-6);--wj-progress-bar-text-size: .75rem;--wj-progress-bar-text-color: var(--wj-color)}:host .progress{position:relative;display:flex;align-items:center}:host .slot-wrapper{display:flex;position:absolute;top:0;align-items:center;width:100%;height:100%;justify-content:center}:host #bar{stroke:var(--wj-progress-bar-color)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wj-progress-bar-text-size);fill:var(--wj-progress-bar-text-color)}:host(.wj-color) #bar{stroke:var(--wj-progress-bar-color)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}
 `;
-class x extends f {
+class f extends j {
   constructor() {
     super();
     g(this, "className", "ProgressBar");
@@ -41,16 +39,16 @@ class x extends f {
     this.isShadowRoot = "open";
   }
   draw(e, h, l) {
-    let n = this.radius + this.stroke / 2, u = document.createDocumentFragment();
+    let n = this.radius + this.stroke / 2, d = document.createDocumentFragment();
     l.color && this.classList.add("wj-color-" + l.color, "wj-color");
     let a = document.createElement("div");
     a.classList.add("progress");
-    let w = document.createElement("slot"), d = document.createElement("div");
-    d.classList.add("slot-wrapper");
-    let b = document.createElement("slot");
-    b.setAttribute("name", "start");
+    let w = document.createElement("slot"), u = document.createElement("div");
+    u.classList.add("slot-wrapper");
     let p = document.createElement("slot");
-    p.setAttribute("name", "end");
+    p.setAttribute("name", "start");
+    let b = document.createElement("slot");
+    b.setAttribute("name", "end");
     let s = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r, t;
     if ((this == null ? void 0 : this.type) === "circle") {
       s.setAttribute("width", this.diameter), s.setAttribute("height", this.diameter), s.setAttribute("viewBox", `0 0 ${this.diameter} ${this.diameter}`), s.setAttribute("style", "transform: rotate(-90deg)"), r = document.createElementNS("http://www.w3.org/2000/svg", "circle"), r.setAttribute("r", this.radius), r.setAttribute("cx", n), r.setAttribute("cy", n), r.setAttribute("fill", "transparent"), t = document.createElementNS("http://www.w3.org/2000/svg", "circle"), t.setAttribute("r", this.radius), t.setAttribute("cx", n), t.setAttribute("cy", n), t.setAttribute("fill", "transparent"), t.setAttribute("stroke-dasharray", "0"), t.setAttribute("stroke-dashoffset", "0");
@@ -58,7 +56,7 @@ class x extends f {
       c.setAttribute("x", "50%"), c.setAttribute("y", "50%"), c.innerHTML = this.progress + "%", s.appendChild(c);
     } else
       s.setAttribute("width", "100%"), s.setAttribute("height", this.stroke), s.setAttribute("preserveAspectRatio", "none"), r = document.createElementNS("http://www.w3.org/2000/svg", "line"), r.setAttribute("x1", 0), r.setAttribute("y1", this.stroke / 2), r.setAttribute("x2", "100%"), r.setAttribute("y2", this.stroke / 2), t = document.createElementNS("http://www.w3.org/2000/svg", "line"), t.setAttribute("x1", 0), t.setAttribute("y1", this.stroke / 2), t.setAttribute("x2", this.progress + "%"), t.setAttribute("y2", this.stroke / 2);
-    return r.setAttribute("stroke", "#e0e0e0"), r.setAttribute("stroke-linecap", this.linecap), r.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("stroke-linecap", this.linecap), t.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("id", "bar"), s.appendChild(r), s.appendChild(t), d.appendChild(w), a.appendChild(b), a.appendChild(d), a.appendChild(s), a.appendChild(p), u.appendChild(a), this.background = r, this.bar = t, u;
+    return r.setAttribute("stroke", "#e0e0e0"), r.setAttribute("stroke-linecap", this.linecap), r.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("stroke-linecap", this.linecap), t.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("id", "bar"), s.appendChild(r), s.appendChild(t), u.appendChild(w), a.appendChild(p), a.appendChild(u), a.appendChild(s), a.appendChild(b), d.appendChild(a), this.background = r, this.bar = t, d;
   }
   afterDraw(e, h, l) {
     this.type === "circle" && (this.background.setAttribute("stroke-dasharray", this.getCircleDashoffset(100) + "px"), this.background.setAttribute("stroke-dashoffset", "0px"), this.bar.setAttribute("stroke-dasharray", this.getCircleDasharray(this.radius) + "px"), this.bar.setAttribute("stroke-dashoffset", this.getCircleDashoffset(l.progress, this.radius) + "px"));
@@ -70,7 +68,7 @@ class x extends f {
     return this.getCircleDasharray(h) * ((100 - e) / 100);
   }
 }
-customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", x);
+customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", f);
 export {
-  x as ProgressBar
+  f as ProgressBar
 };

package/dist/wj-radio-group.js

@@ -1,12 +1,10 @@
-var l = Object.defineProperty;
-var c = (i, t, e) => t in i ? l(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var d = Object.defineProperty;
+var c = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var n = (i, t, e) => (c(i, typeof t != "symbol" ? t + "" : t, e), e);
 import u from "./wj-element.js";
 import { Radio as o } from "./wj-radio.js";
 import "./wj-store.js";
-const h = `/*!
-* direction.scss
-*/.wj-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}
+const h = `.wj-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}
 `;
 class m extends u {
   constructor() {
@@ -25,8 +23,8 @@ class m extends u {
   draw(e, s, p) {
     let a = document.createDocumentFragment(), r = document.createElement("div");
     r.classList.add("native-radio-group", this.hasAttribute("inline") ? "wj-inline" : "ddd");
-    let d = document.createElement("slot");
-    return r.appendChild(d), a.appendChild(r), a;
+    let l = document.createElement("slot");
+    return r.appendChild(l), a.appendChild(r), a;
   }
   afterDraw() {
     this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wj:radio:input", (e) => {