@everchron/ec-shards 8.11.1 → 8.11.3

package/dist/ec-shards.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as ee, watch as le, openBlock as o, createBlock as y, resolveDynamicComponent as Te, unref as ie, normalizeClass as v, createElementBlock as l, normalizeStyle as B, resolveComponent as p, createVNode as b, createCommentVNode as u, createElementVNode as f, createTextVNode as D, toDisplayString as x, renderSlot as m, Transition as xe, withCtx as w, computed as be, reactive as Qs, nextTick as ei, onBeforeUnmount as Pt, toRefs as ys, isRef as ti, onMounted as bs, useSlots as si, ref as Ke, watchEffect as bt, withKeys as U, Teleport as ii, withDirectives as Ge, vShow as ft, mergeProps as De, normalizeProps as ni, guardReactiveProps as ai, withModifiers as G, pushScopeId as ve, popScopeId as _e, Fragment as Z, renderList as ge, resolveDirective as oi, vModelText as ri, h as li, TransitionGroup as ci } from "vue";
+import { defineAsyncComponent as ee, watch as le, openBlock as o, createBlock as y, resolveDynamicComponent as Te, unref as ie, normalizeClass as v, createElementBlock as l, normalizeStyle as B, resolveComponent as p, createVNode as b, createCommentVNode as u, createElementVNode as f, createTextVNode as D, toDisplayString as x, renderSlot as m, Transition as xe, withCtx as w, computed as be, reactive as Qs, nextTick as ei, onBeforeUnmount as Pt, toRefs as ys, isRef as ti, onMounted as bs, useSlots as si, ref as Ke, watchEffect as kt, withKeys as G, Teleport as ii, withDirectives as Ue, vShow as pt, mergeProps as De, normalizeProps as ni, guardReactiveProps as ai, withModifiers as U, pushScopeId as ve, popScopeId as _e, Fragment as Z, renderList as ge, resolveDirective as oi, vModelText as ri, h as li, TransitionGroup as ci } from "vue";
 const te = (e, s) => {
   const t = e[s];
   return t ? typeof t == "function" ? t() : Promise.resolve(t) : new Promise((a, n) => {
@@ -762,7 +762,7 @@ function zt(e, s, t) {
   }, g;
 }
 zt.debounce = zt;
-var kt = zt;
+var xt = zt;
 function oe(e) {
   if (e == null)
     return window;
@@ -786,7 +786,7 @@ function Tt(e) {
   var s = oe(e).ShadowRoot;
   return e instanceof s || e instanceof ShadowRoot;
 }
-var Ne = Math.max, dt = Math.min, He = Math.round;
+var Ne = Math.max, ut = Math.min, He = Math.round;
 function It() {
   var e = navigator.userAgentData;
   return e != null && e.brands && Array.isArray(e.brands) ? e.brands.map(function(s) {
@@ -819,14 +819,14 @@ function Mt(e) {
     scrollTop: a
   };
 }
-function Gi(e) {
+function Ui(e) {
   return {
     scrollLeft: e.scrollLeft,
     scrollTop: e.scrollTop
   };
 }
-function Ui(e) {
-  return e === oe(e) || !ce(e) ? Mt(e) : Gi(e);
+function Gi(e) {
+  return e === oe(e) || !ce(e) ? Mt(e) : Ui(e);
 }
 function we(e) {
   return e ? (e.nodeName || "").toLowerCase() : null;
@@ -861,7 +861,7 @@ function Yi(e, s, t) {
     y: 0
   };
   return (a || !a && !t) && ((we(s) !== "body" || // https://github.com/popperjs/popper-core/issues/1078
-  Ot(i)) && (c = Ui(s)), ce(s) ? (d = qe(s, !0), d.x += s.clientLeft, d.y += s.clientTop) : i && (d.x = Lt(i))), {
+  Ot(i)) && (c = Gi(s)), ce(s) ? (d = qe(s, !0), d.x += s.clientLeft, d.y += s.clientTop) : i && (d.x = Lt(i))), {
     x: r.left + c.scrollLeft - d.x,
     y: r.top + c.scrollTop - d.y,
     width: r.width,
@@ -877,7 +877,7 @@ function At(e) {
     height: a
   };
 }
-function pt(e) {
+function gt(e) {
   return we(e) === "html" ? e : (
     // this is a quicker (but less type safe) way to save quite some bytes from the bundle
     // $FlowFixMe[incompatible-return]
@@ -890,7 +890,7 @@ function pt(e) {
   );
 }
 function Ss(e) {
-  return ["html", "body", "#document"].indexOf(we(e)) >= 0 ? e.ownerDocument.body : ce(e) && Ot(e) ? e : Ss(pt(e));
+  return ["html", "body", "#document"].indexOf(we(e)) >= 0 ? e.ownerDocument.body : ce(e) && Ot(e) ? e : Ss(gt(e));
 }
 function Je(e, s) {
   var t;
@@ -898,7 +898,7 @@ function Je(e, s) {
   var a = Ss(e), n = a === ((t = e.ownerDocument) == null ? void 0 : t.body), i = oe(a), r = n ? [i].concat(i.visualViewport || [], Ot(a) ? a : []) : a, c = s.concat(r);
   return n ? c : (
     // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
-    c.concat(Je(pt(r)))
+    c.concat(Je(gt(r)))
   );
 }
 function Xi(e) {
@@ -915,7 +915,7 @@ function Zi(e) {
     if (a.position === "fixed")
       return null;
   }
-  var n = pt(e);
+  var n = gt(e);
   for (Tt(n) && (n = n.host); ce(n) && ["html", "body"].indexOf(we(n)) < 0; ) {
     var i = Ee(n);
     if (i.transform !== "none" || i.perspective !== "none" || i.contain === "paint" || ["transform", "perspective"].indexOf(i.willChange) !== -1 || s && i.willChange === "filter" || s && i.filter && i.filter !== "none")
@@ -1036,7 +1036,7 @@ function ss(e, s, t) {
   return s === Cs ? Et(mn(e, t)) : Fe(s) ? vn(s, t) : Et(hn(Le(e)));
 }
 function _n(e) {
-  var s = Je(pt(e)), t = ["absolute", "fixed"].indexOf(Ee(e).position) >= 0, a = t && ce(e) ? tt(e) : e;
+  var s = Je(gt(e)), t = ["absolute", "fixed"].indexOf(Ee(e).position) >= 0, a = t && ce(e) ? tt(e) : e;
   return Fe(a) ? s.filter(function(n) {
     return Fe(n) && zs(n, a) && we(n) !== "body";
   }) : [];
@@ -1044,7 +1044,7 @@ function _n(e) {
 function yn(e, s, t, a) {
   var n = s === "clippingParents" ? _n(e) : [].concat(s), i = [].concat(n, [t]), r = i[0], c = i.reduce(function(d, g) {
     var h = ss(e, g, a);
-    return d.top = Ne(h.top, d.top), d.right = dt(h.right, d.right), d.bottom = dt(h.bottom, d.bottom), d.left = Ne(h.left, d.left), d;
+    return d.top = Ne(h.top, d.top), d.right = ut(h.right, d.right), d.bottom = ut(h.bottom, d.bottom), d.left = Ne(h.left, d.left), d;
   }, ss(e, r, a));
   return c.width = c.right - c.left, c.height = c.bottom - c.top, c.x = c.left, c.y = c.top, c;
 }
@@ -1427,7 +1427,7 @@ function Ln(e) {
   return e === "x" ? "y" : "x";
 }
 function Qe(e, s, t) {
-  return Ne(e, dt(s, t));
+  return Ne(e, ut(s, t));
 }
 function On(e, s, t) {
   var a = Qe(e, s, t);
@@ -1456,11 +1456,11 @@ function An(e) {
       var K, Be = T === "y" ? ne : ae, ue = T === "y" ? me : he, Y = T === "y" ? "height" : "width", J = E[T], ye = J + P[Be], ze = J - P[ue], X = I ? -F[Y] / 2 : 0, re = V === We ? N[Y] : F[Y], $e = V === We ? -F[Y] : -N[Y], nt = s.elements.arrow, Ve = I && nt ? At(nt) : {
         width: 0,
         height: 0
-      }, Pe = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : Es(), Ue = Pe[Be], at = Pe[ue], Oe = Qe(0, N[Y], Ve[Y]), vt = R ? N[Y] / 2 - X - Oe - Ue - W.mainAxis : re - Oe - Ue - W.mainAxis, Us = R ? -N[Y] / 2 + X + Oe + at + W.mainAxis : $e + Oe + at + W.mainAxis, _t = s.elements.arrow && tt(s.elements.arrow), Ks = _t ? T === "y" ? _t.clientTop || 0 : _t.clientLeft || 0 : 0, jt = (K = j == null ? void 0 : j[T]) != null ? K : 0, Ys = J + vt - jt - Ks, Xs = J + Us - jt, Gt = Qe(I ? dt(ye, Ys) : ye, J, I ? Ne(ze, Xs) : ze);
-      E[T] = Gt, Q[T] = Gt - J;
+      }, Pe = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : Es(), Ge = Pe[Be], at = Pe[ue], Oe = Qe(0, N[Y], Ve[Y]), _t = R ? N[Y] / 2 - X - Oe - Ge - W.mainAxis : re - Oe - Ge - W.mainAxis, Gs = R ? -N[Y] / 2 + X + Oe + at + W.mainAxis : $e + Oe + at + W.mainAxis, yt = s.elements.arrow && tt(s.elements.arrow), Ks = yt ? T === "y" ? yt.clientTop || 0 : yt.clientLeft || 0 : 0, jt = (K = j == null ? void 0 : j[T]) != null ? K : 0, Ys = J + _t - jt - Ks, Xs = J + Gs - jt, Ut = Qe(I ? ut(ye, Ys) : ye, J, I ? Ne(ze, Xs) : ze);
+      E[T] = Ut, Q[T] = Ut - J;
     }
     if (c) {
-      var Ut, Zs = T === "x" ? ne : ae, Js = T === "x" ? me : he, Ae = E[A], ot = A === "y" ? "height" : "width", Kt = Ae + P[Zs], Yt = Ae - P[Js], yt = [ne, ae].indexOf(O) !== -1, Xt = (Ut = j == null ? void 0 : j[A]) != null ? Ut : 0, Zt = yt ? Kt : Ae - N[ot] - F[ot] - Xt + W.altAxis, Jt = yt ? Ae + N[ot] + F[ot] - Xt - W.altAxis : Yt, Qt = I && yt ? On(Zt, Ae, Jt) : Qe(I ? Zt : Kt, Ae, I ? Jt : Yt);
+      var Gt, Zs = T === "x" ? ne : ae, Js = T === "x" ? me : he, Ae = E[A], ot = A === "y" ? "height" : "width", Kt = Ae + P[Zs], Yt = Ae - P[Js], bt = [ne, ae].indexOf(O) !== -1, Xt = (Gt = j == null ? void 0 : j[A]) != null ? Gt : 0, Zt = bt ? Kt : Ae - N[ot] - F[ot] - Xt + W.altAxis, Jt = bt ? Ae + N[ot] + F[ot] - Xt - W.altAxis : Yt, Qt = I && bt ? On(Zt, Ae, Jt) : Qe(I ? Zt : Kt, Ae, I ? Jt : Yt);
       E[A] = Qt, Q[A] = Qt - Ae;
     }
     s.modifiersData[a] = Q;
@@ -1479,7 +1479,7 @@ var Dn = {
   bottom: "top",
   top: "bottom"
 };
-function ct(e) {
+function dt(e) {
   return e.replace(/left|right|bottom|top/g, function(s) {
     return Dn[s];
   });
@@ -1516,13 +1516,13 @@ function Rn(e, s) {
 function Vn(e) {
   if (ke(e) === Nt)
     return [];
-  var s = ct(e);
+  var s = dt(e);
   return [os(e), s, os(s)];
 }
 function Hn(e) {
   var s = e.state, t = e.options, a = e.name;
   if (!s.modifiersData[a]._skip) {
-    for (var n = t.mainAxis, i = n === void 0 ? !0 : n, r = t.altAxis, c = r === void 0 ? !0 : r, d = t.fallbackPlacements, g = t.padding, h = t.boundary, k = t.rootBoundary, z = t.altBoundary, I = t.flipVariations, C = I === void 0 ? !0 : I, $ = t.allowedAutoPlacements, P = s.options.placement, O = ke(P), V = O === P, R = d || (V || !C ? [ct(P)] : Vn(P)), T = [P].concat(R).reduce(function(Ve, Pe) {
+    for (var n = t.mainAxis, i = n === void 0 ? !0 : n, r = t.altAxis, c = r === void 0 ? !0 : r, d = t.fallbackPlacements, g = t.padding, h = t.boundary, k = t.rootBoundary, z = t.altBoundary, I = t.flipVariations, C = I === void 0 ? !0 : I, $ = t.allowedAutoPlacements, P = s.options.placement, O = ke(P), V = O === P, R = d || (V || !C ? [dt(P)] : Vn(P)), T = [P].concat(R).reduce(function(Ve, Pe) {
       return Ve.concat(ke(Pe) === Nt ? Rn(s, {
         placement: Pe,
         boundary: h,
@@ -1539,8 +1539,8 @@ function Hn(e) {
         altBoundary: z,
         padding: g
       }), J = Be ? K ? he : ae : K ? me : ne;
-      A[ue] > E[ue] && (J = ct(J));
-      var ye = ct(J), ze = [];
+      A[ue] > E[ue] && (J = dt(J));
+      var ye = dt(J), ze = [];
       if (i && ze.push(Y[Q] <= 0), c && ze.push(Y[J] <= 0, Y[ye] <= 0), ze.every(function(Ve) {
         return Ve;
       })) {
@@ -1551,15 +1551,15 @@ function Hn(e) {
     }
     if (F)
       for (var X = C ? 3 : 1, re = function(Pe) {
-        var Ue = T.find(function(at) {
+        var Ge = T.find(function(at) {
           var Oe = N.get(at);
           if (Oe)
-            return Oe.slice(0, Pe).every(function(vt) {
-              return vt;
+            return Oe.slice(0, Pe).every(function(_t) {
+              return _t;
             });
         });
-        if (Ue)
-          return q = Ue, "break";
+        if (Ge)
+          return q = Ge, "break";
       }, $e = X; $e > 0; $e--) {
         var nt = re($e);
         if (nt === "break")
@@ -1596,14 +1596,14 @@ function jn(e) {
   }, {}), c = r[s.placement], d = c.x, g = c.y;
   s.modifiersData.popperOffsets != null && (s.modifiersData.popperOffsets.x += d, s.modifiersData.popperOffsets.y += g), s.modifiersData[a] = r;
 }
-const Gn = {
+const Un = {
   name: "offset",
   enabled: !0,
   phase: "main",
   requires: ["popperOffsets"],
   fn: jn
 };
-var Un = function(s, t) {
+var Gn = function(s, t) {
   return s = typeof s == "function" ? s(Object.assign({}, t.rects, {
     placement: t.placement
   })) : s, $s(typeof s != "number" ? s : Ps(s, st));
@@ -1611,7 +1611,7 @@ var Un = function(s, t) {
 function Kn(e) {
   var s, t = e.state, a = e.name, n = e.options, i = t.elements.arrow, r = t.modifiersData.popperOffsets, c = ke(t.placement), d = Dt(c), g = [ae, he].indexOf(c) >= 0, h = g ? "height" : "width";
   if (!(!i || !r)) {
-    var k = Un(n.padding, t), z = At(i), I = d === "y" ? ne : ae, C = d === "y" ? me : he, $ = t.rects.reference[h] + t.rects.reference[d] - r[d] - t.rects.popper[h], P = r[d] - t.rects.reference[d], O = tt(i), V = O ? d === "y" ? O.clientHeight || 0 : O.clientWidth || 0 : 0, R = $ / 2 - P / 2, T = k[I], A = V - z[h] - k[C], E = V / 2 - z[h] / 2 + R, N = Qe(T, E, A), F = d;
+    var k = Gn(n.padding, t), z = At(i), I = d === "y" ? ne : ae, C = d === "y" ? me : he, $ = t.rects.reference[h] + t.rects.reference[d] - r[d] - t.rects.popper[h], P = r[d] - t.rects.reference[d], O = tt(i), V = O ? d === "y" ? O.clientHeight || 0 : O.clientWidth || 0 : 0, R = $ / 2 - P / 2, T = k[I], A = V - z[h] - k[C], E = V / 2 - z[h] / 2 + R, N = Qe(T, E, A), F = d;
     t.modifiersData[a] = (s = {}, s[F] = N, s.centerOffset = N - E, s);
   }
 }
@@ -1627,7 +1627,7 @@ const Xn = {
   effect: Yn,
   requires: ["popperOffsets"],
   requiresIfExists: ["preventOverflow"]
-}, xt = (e) => parseInt(e, 10);
+}, wt = (e) => parseInt(e, 10);
 function Zn({
   arrowPadding: e,
   emit: s,
@@ -1669,14 +1669,14 @@ function Zn({
         {
           name: "arrow",
           options: {
-            padding: xt(e.value)
+            padding: wt(e.value)
           }
         },
-        Gn,
+        Un,
         {
           name: "offset",
           options: {
-            offset: [xt(n.value), xt(a.value)]
+            offset: [wt(n.value), wt(a.value)]
           }
         }
       ]
@@ -1894,7 +1894,7 @@ const na = ["onKeyup", "aria-open"], aa = {
     be(
       () => O.value ? `border: ${R.value}px solid transparent; margin: -${R.value}px;` : null
     );
-    const ue = kt.debounce(q, A.value), Y = kt.debounce(W, I.value), J = async () => {
+    const ue = xt.debounce(q, A.value), Y = xt.debounce(W, I.value), J = async () => {
       Q.value || j.value || (Y.clear(), r.value = !0, ue());
     }, ye = async () => {
       j.value || (ue.clear(), r.value = !1, Y());
@@ -1904,16 +1904,16 @@ const na = ["onKeyup", "aria-open"], aa = {
     return le([h, P], ([X, re]) => {
       F.value && (!X || re) && W();
     }), le(F, (X) => {
-      X ? g.value = !0 : kt.debounce(() => {
+      X ? g.value = !0 : xt.debounce(() => {
         g.value = !1;
       }, 200);
-    }), bt(() => {
+    }), kt(() => {
       j.value && (N.value ? ue() : Y());
-    }), bt(() => {
+    }), kt(() => {
       Be.value && Qn(c, ye);
     }), le(C, (X) => {
       X ? h.value = !0 : h.value = !1;
-    }), bt(() => {
+    }), kt(() => {
       c.value && n.observe(c.value, {
         childList: !0,
         subtree: !0
@@ -1928,7 +1928,7 @@ const na = ["onKeyup", "aria-open"], aa = {
         onMouseover: re[0] || (re[0] = ($e) => e.hover && J()),
         onClick: ze,
         onFocus: J,
-        onKeyup: U(ye, ["esc"]),
+        onKeyup: G(ye, ["esc"]),
         "aria-describedby": i,
         "aria-open": r.value || null,
         class: "ecs-popover-trigger"
@@ -1938,7 +1938,7 @@ const na = ["onKeyup", "aria-open"], aa = {
       (o(), y(ii, { to: "body" }, [
         b(xe, { name: "fade" }, {
           default: w(() => [
-            e.persistent || r.value ? Ge((o(), l("div", {
+            e.persistent || r.value ? Ue((o(), l("div", {
               key: 0,
               onClick: re[1] || (re[1] = ($e) => !ie(O) && ye()),
               class: "ecs-popover popper",
@@ -1954,7 +1954,7 @@ const na = ["onKeyup", "aria-open"], aa = {
               ], !0),
               e.arrow ? (o(), y(ia, { key: 0 })) : u("", !0)
             ], 512)), [
-              [ft, K.value]
+              [pt, K.value]
             ]) : u("", !0)
           ]),
           _: 3
@@ -2284,7 +2284,7 @@ function ya(e, s, t, a, n, i) {
         required: t.required || null,
         disabled: t.disabled || null,
         checked: n.checked || null,
-        onClick: s[0] || (s[0] = G((d) => e.$emit("shiftClick", d), ["shift"])),
+        onClick: s[0] || (s[0] = U((d) => e.$emit("shiftClick", d), ["shift"])),
         onChange: s[1] || (s[1] = (...d) => i.handleClick && i.handleClick(...d))
       }, null, 42, va),
       f("label", {
@@ -2959,12 +2959,12 @@ const ja = {
       this.$emit("secondaryClick");
     }
   }
-}, Ga = {
+}, Ua = {
   key: 0,
   class: "ecs-popover-list-item control no-hover",
   role: "menuitem",
   tabindex: "-1"
-}, Ua = {
+}, Ga = {
   key: 0,
   class: "after"
 }, Ka = {
@@ -3005,7 +3005,7 @@ const ja = {
 function co(e, s, t, a, n, i) {
   const r = p("ecs-checkbox"), c = p("ecs-radiobutton"), d = p("ecs-switch"), g = p("ecs-sortbutton"), h = p("ecs-focus-ring"), k = p("ecs-icon"), z = p("ecs-file-icon"), I = p("ecs-button");
   return o(), l("li", null, [
-    t.type === "checkbox" ? (o(), l("div", Ga, [
+    t.type === "checkbox" ? (o(), l("div", Ua, [
       b(r, {
         onInput: s[0] || (s[0] = (C) => e.$emit("input", C)),
         disabled: t.disabled || null,
@@ -3019,7 +3019,7 @@ function co(e, s, t, a, n, i) {
         ]),
         _: 3
       }, 8, ["disabled", "value", "value-false", "value-true", "indeterminate"]),
-      t.suffix ? (o(), l("span", Ua, x(t.suffix), 1)) : u("", !0)
+      t.suffix ? (o(), l("span", Ga, x(t.suffix), 1)) : u("", !0)
     ])) : t.type === "radiobutton" ? (o(), l("div", Ka, [
       b(c, {
         onChange: s[1] || (s[1] = (C) => e.$emit("change", C)),
@@ -3097,7 +3097,7 @@ function co(e, s, t, a, n, i) {
         ]),
         i.secondaryActionOptions.show ? (o(), y(I, {
           key: 0,
-          onClick: G(i.handleSecondaryClick, ["stop"]),
+          onClick: U(i.handleSecondaryClick, ["stop"]),
           onMouseover: s[4] || (s[4] = (C) => n.preventHover = !n.preventHover),
           onMouseleave: s[5] || (s[5] = (C) => n.preventHover = !n.preventHover),
           size: "sml",
@@ -3149,7 +3149,7 @@ function co(e, s, t, a, n, i) {
         ]),
         i.secondaryActionOptions.show ? (o(), y(I, {
           key: 0,
-          onClick: G(i.handleSecondaryClick, ["stop"]),
+          onClick: U(i.handleSecondaryClick, ["stop"]),
           onMouseover: s[7] || (s[7] = (C) => n.preventHover = !n.preventHover),
           onMouseleave: s[8] || (s[8] = (C) => n.preventHover = !n.preventHover),
           size: "sml",
@@ -3348,7 +3348,7 @@ function mo(e, s, t, a, n, i) {
     b(c)
   ], 10, go));
 }
-const gt = /* @__PURE__ */ _(fo, [["render", mo], ["__scopeId", "data-v-72592c75"]]);
+const mt = /* @__PURE__ */ _(fo, [["render", mo], ["__scopeId", "data-v-72592c75"]]);
 const ho = {
   name: "ecs-separator",
   props: {
@@ -3406,7 +3406,7 @@ const _o = /* @__PURE__ */ _(ho, [["render", vo], ["__scopeId", "data-v-6c95c339
 const yo = {
   name: "ecs-bulk-selector",
   emits: ["select", "families", "checked", "popover-shown", "popover-hidden"],
-  components: { EcsFlexRow: Me, EcsPopover: Ts, EcsPopoverList: ua, EcsPopoverListItem: uo, EcsButtonToolbar: gt, EcsCheckbox: Vt, EcsSeparator: _o },
+  components: { EcsFlexRow: Me, EcsPopover: Ts, EcsPopoverList: ua, EcsPopoverListItem: uo, EcsButtonToolbar: mt, EcsCheckbox: Vt, EcsSeparator: _o },
   props: {
     /** Array of available select options that should show up in the dropdown. Needs to contain objects for each popover-list-item, */
     options: {
@@ -3618,1599 +3618,348 @@ function zo(e, s, t, a, n, i) {
   ], 10, Bo);
 }
 const Os = /* @__PURE__ */ _(Co, [["render", zo], ["__scopeId", "data-v-3fdbdfeb"]]);
-const Io = {
-  name: "ecs-button-context",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
-  },
-  props: {
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String,
-      default: null
-    },
-    /** Turns the button into a loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Context buttons can be used to set a specific text or annotation color on the selection. Pass any color value (HEX, RGBA). */
-    selectedColor: {
-      type: String,
-      default: null
-    },
-    /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
-    ariaLabel: {
-      type: String
-    }
-  },
-  computed: {
-    iconType() {
-      return this.loading ? "loading" : (this.icon && this.icon, this.icon);
-    },
-    iconOnly() {
-      return this.icon && !this.$slots.default;
-    },
-    selectedColorBackground() {
-      if (this.selectedColor)
-        return `background-color:${this.selectedColor};`;
-    },
-    selectedColorText() {
-      if (this.selectedColor)
-        return `color:${this.selectedColor};`;
-    }
-  },
-  mounted() {
-    this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim());
-  }
-}, Eo = ["aria-label", "aria-busy"];
-function $o(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    class: v(["ecs-context-button", [t.loading ? "loading" : "", i.iconOnly ? "ecs-context-button-icon-only" : ""]]),
-    "aria-label": t.ariaLabel,
-    "aria-busy": t.loading || null,
-    style: B(i.selectedColorText),
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d))
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType,
-      size: "20"
-    }, null, 8, ["type"])) : u("", !0),
-    t.selectedColor ? (o(), l("div", {
-      key: 1,
-      class: "ecs-context-button-color",
-      style: B(i.selectedColorBackground)
-    }, null, 4)) : u("", !0),
-    m(e.$slots, "default", {}, void 0, !0),
-    b(c)
-  ], 14, Eo);
+function ft(e) {
+  "@babel/helpers - typeof";
+  return ft = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(s) {
+    return typeof s;
+  } : function(s) {
+    return s && typeof Symbol == "function" && s.constructor === Symbol && s !== Symbol.prototype ? "symbol" : typeof s;
+  }, ft(e);
 }
-const yy = /* @__PURE__ */ _(Io, [["render", $o], ["__scopeId", "data-v-bbc83578"]]);
-const Po = {
-  name: "ecs-context-button-group"
-}, To = { class: "ecs-context-button-group" };
-function Mo(e, s, t, a, n, i) {
-  return o(), l("div", To, [
-    m(e.$slots, "default", {}, void 0, !0)
-  ]);
+var Io = /^\s+/, Eo = /\s+$/;
+function S(e, s) {
+  if (e = e || "", s = s || {}, e instanceof S)
+    return e;
+  if (!(this instanceof S))
+    return new S(e, s);
+  var t = $o(e);
+  this._originalInput = e, this._r = t.r, this._g = t.g, this._b = t.b, this._a = t.a, this._roundA = Math.round(100 * this._a) / 100, this._format = s.format || t.format, this._gradientType = s.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = t.ok;
 }
-const by = /* @__PURE__ */ _(Po, [["render", Mo], ["__scopeId", "data-v-94a53b69"]]);
-const Lo = {
-  name: "ecs-button-dialog",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+S.prototype = {
+  isDark: function() {
+    return this.getBrightness() < 128;
   },
-  props: {
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String,
-      default: null
-    },
-    /** Defines the type and function of the button. If not set, the button will be neutral (used for Cancel actions). */
-    type: {
-      type: String,
-      validator: (e) => ["danger", "confirm", "cancel"].includes(e),
-      default: "cancel"
-    },
-    /** Turns the button into a loading state. */
-    loading: Boolean
+  isLight: function() {
+    return !this.isDark();
   },
-  computed: {
-    typeClass() {
-      return this.type && this.type !== "" ? `ecs-dialog-footer-button-${this.type}` : this.type;
-    },
-    iconType() {
-      return this.loading ? "loading" : this.icon;
-    }
-  }
-}, Oo = ["aria-busy"];
-function Ao(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    class: v([[i.typeClass, t.loading ? "loading" : ""], "ecs-dialog-footer-button"]),
-    "aria-busy": t.loading || null
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType
-    }, null, 8, ["type"])) : u("", !0),
-    m(e.$slots, "default", {}, void 0, !0),
-    b(c, {
-      radius: 12,
-      danger: t.type == "danger"
-    }, null, 8, ["danger"])
-  ], 10, Oo);
-}
-const ky = /* @__PURE__ */ _(Lo, [["render", Ao], ["__scopeId", "data-v-fe031b71"]]);
-const No = {
-  name: "ecs-button-more",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+  isValid: function() {
+    return this._ok;
   },
-  props: {
-    /** Displays the button slightly highlighted. Should be used when the state the button triggers is currently visible. */
-    active: Boolean,
-    /** Defines the type of the button: `dropdown` shows a simple dropdown button, `ellipsis` shows a tiny (...) button, and `expand` is supposed to be used at the end of expandable lists and tables. */
-    type: {
-      type: String,
-      validator: (e) => ["dropdown", "dropdown-round", "ellipsis", "expand"].includes(e),
-      default: "dropdown"
-    },
-    /** Provide a meaningful label for the button to improve accessibility for screenreaders. */
-    ariaLabel: {
-      type: String
-    },
-    /** Disables the button and prevent pointer events. */
-    disabled: {
-      type: Boolean
-    }
+  getOriginalInput: function() {
+    return this._originalInput;
   },
-  computed: {
-    typeClass() {
-      return this.type && this.type !== "" ? `ecs-button-more-${this.type}` : this.type;
-    }
+  getFormat: function() {
+    return this._format;
   },
-  mounted() {
-    this.$slots.default === void 0 && (!this.ariaLabel || this.ariaLabel.trim());
-  }
-}, Do = ["aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "disabled"];
-function Fo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    "aria-label": t.ariaLabel,
-    "aria-disabled": t.disabled || null,
-    "aria-expanded": t.active || null,
-    "aria-haspopup": t.type == "dropdown" || null,
-    disabled: t.disabled || null,
-    class: v([
-      t.active ? "active" : "",
-      i.typeClass
-    ])
-  }, [
-    t.type == "ellipsis" ? (o(), y(r, {
-      key: 0,
-      type: "more",
-      size: "20",
-      color: "#FFF"
-    })) : u("", !0),
-    t.type == "dropdown" || t.type == "dropdown-round" ? (o(), y(r, {
-      key: 1,
-      type: "chevron-down",
-      size: "12",
-      color: "var(--color-gray-9)"
-    })) : u("", !0),
-    t.type === "expand" ? m(e.$slots, "default", { key: 2 }, void 0, !0) : u("", !0),
-    b(c)
-  ], 10, Do);
-}
-const As = /* @__PURE__ */ _(No, [["render", Fo], ["__scopeId", "data-v-faa154dd"]]);
-const Ro = {
-  name: "ecs-button-table",
-  emits: ["click", "mouseover", "mouseleave"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+  getAlpha: function() {
+    return this._a;
   },
-  props: {
-    /** Displays the button in an active state. */
-    active: Boolean,
-    /** Show the button without a background color. */
-    subtle: {
-      type: Boolean,
-      default: !1
-    },
-    /** Button is visually toned down (text and icon are more gray than black). */
-    pale: {
-      type: Boolean,
-      default: !1
-    },
-    /** Sets the size of the button. */
-    size: {
-      type: String,
-      validator: (e) => ["md", "sml", null].includes(e),
-      default: "md"
-    },
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    },
-    /** Text text inside the button. */
-    label: {
-      type: [String, Number]
-    },
-    /** Turns the button into disabled state, which disables all interactions and hover effects. */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /** If set, a small arrow will show up on the right side of the button, to indicate an collapse/expand state. The direction of the button is determined by the `active` prop. */
-    chevron: {
-      type: Boolean,
-      default: !1
-    },
-    /** If set, the button will not show any effects that would indicate that you could interact with the button. This is usefull when the button is only used to show a specific count/label instead of triggering any actions. */
-    unreactive: {
-      type: Boolean,
-      default: !1
-    },
-    /** Turns the button into a loading state, which makes it appear disabled and replaces the default icon (if set) with a spinner. */
-    loading: {
-      type: Boolean,
-      default: !1
-    }
+  getBrightness: function() {
+    var s = this.toRgb();
+    return (s.r * 299 + s.g * 587 + s.b * 114) / 1e3;
   },
-  computed: {
-    hasLabel() {
-      return this.label && this.label !== "" || this.label != null ? "has-label" : this.label;
-    },
-    sizeClass() {
-      return this.size && this.size !== "" ? `ecs-button-table-${this.size}` : this.size;
-    },
-    iconSize() {
-      return this.size == "sml" ? "16" : "20";
-    },
-    iconType() {
-      return this.loading ? "loading" : this.icon;
-    },
-    ariaDisabled() {
-      return this.disabled || this.unreactive ? !0 : null;
-    }
-  }
-}, Vo = ["disabled", "aria-disabled", "aria-expanded", "aria-busy"], Ho = {
-  key: 1,
-  class: "button-label"
-};
-function qo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    class: v(["ecs-button-table", [
-      t.active ? "active" : "",
-      i.hasLabel,
-      t.subtle ? "subtle" : "",
-      t.pale ? "pale" : "",
-      t.unreactive ? "unreactive" : "",
-      t.loading ? "loading" : "",
-      i.sizeClass
-    ]]),
-    disabled: t.disabled || null,
-    "aria-disabled": i.ariaDisabled,
-    "aria-expanded": t.active || null,
-    "aria-busy": t.loading || null,
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    onMouseover: s[1] || (s[1] = (d) => e.$emit("mouseover", d)),
-    onMouseleave: s[2] || (s[2] = (d) => e.$emit("mouseleave", d))
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType,
-      size: i.iconSize
-    }, null, 8, ["type", "size"])) : u("", !0),
-    t.label != null ? (o(), l("div", Ho, x(t.label), 1)) : u("", !0),
-    t.chevron ? (o(), l("div", {
-      key: 2,
-      class: v(["chevron", t.active ? "expand" : ""])
-    }, null, 2)) : u("", !0),
-    b(c)
-  ], 42, Vo);
-}
-const Ns = /* @__PURE__ */ _(Ro, [["render", qo], ["__scopeId", "data-v-f5a891fe"]]);
-const Wo = {
-  name: "ecs-toolbar-button-group"
-}, jo = { class: "ecs-toolbar-button-group" };
-function Go(e, s, t, a, n, i) {
-  return o(), l("div", jo, [
-    m(e.$slots, "default", {}, void 0, !0)
-  ]);
-}
-const Ht = /* @__PURE__ */ _(Wo, [["render", Go], ["__scopeId", "data-v-743ca90b"]]);
-const Uo = {
-  name: "ecs-toolbar-icon-button",
-  emits: ["click"],
-  components: { EcsIcon: M, EcsFocusRing: L },
-  props: {
-    /** The icon type of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note that only icons prefixed with `toolbar-` should be used here. */
-    icon: {
-      type: String,
-      required: !0
-    },
-    /** Renders a small secondary icon in the bottom left of the button. Should only used under special conditions, eg. to reflect a specifc state that can not be handled by the `active` prop. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    subIcon: {
-      type: String
-    },
-    /** When set, the icon is spinning. Should really only be used when the `icon` is set to `toolbar-refresh`. */
-    refresh: {
-      type: Boolean,
-      default: !1
-    },
-    /** Indicates that the button is activated. */
-    active: {
-      type: Boolean,
-      default: !1
-    },
-    /** Show the button in loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Adds a small blue badge to the upper right of the button. */
-    hasBadge: {
-      type: Boolean,
-      default: !1
-    },
-    /** Sets the aria-label attribute to improve accessibility. */
-    ariaLabel: {
-      type: String
-      //required: true
-    }
+  getLuminance: function() {
+    var s = this.toRgb(), t, a, n, i, r, c;
+    return t = s.r / 255, a = s.g / 255, n = s.b / 255, t <= 0.03928 ? i = t / 12.92 : i = Math.pow((t + 0.055) / 1.055, 2.4), a <= 0.03928 ? r = a / 12.92 : r = Math.pow((a + 0.055) / 1.055, 2.4), n <= 0.03928 ? c = n / 12.92 : c = Math.pow((n + 0.055) / 1.055, 2.4), 0.2126 * i + 0.7152 * r + 0.0722 * c;
   },
-  computed: {
-    ariaBusy() {
-      return this.refresh || this.loading ? !0 : null;
-    }
-  }
-}, Ko = ["aria-busy", "aria-label"], Yo = {
-  key: 0,
-  class: "badge"
-}, Xo = { class: "sub-icon" };
-function Zo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    "aria-busy": i.ariaBusy,
-    "aria-label": t.ariaLabel,
-    class: v(["ecs-toolbar-icon-button", [
-      t.refresh ? "refreshing" : "",
-      t.active ? "active" : "",
-      t.loading ? "loading" : ""
-    ]])
-  }, [
-    b(r, { type: t.icon }, null, 8, ["type"]),
-    t.hasBadge ? (o(), l("span", Yo)) : u("", !0),
-    f("div", Xo, [
-      t.subIcon ? (o(), y(r, {
-        key: 0,
-        type: t.subIcon,
-        size: "14"
-      }, null, 8, ["type"])) : u("", !0)
-    ]),
-    b(c)
-  ], 10, Ko);
-}
-const xy = /* @__PURE__ */ _(Uo, [["render", Zo], ["__scopeId", "data-v-098e1030"]]);
-const Jo = {
-  name: "ecs-card",
-  emits: ["click"],
-  props: {
-    /** Unique ID */
-    id: {
-      type: [String, Number],
-      default: null
-    },
-    /** Indicates that this card is currently selected (most likely via a checkbox that is contained in the card). */
-    selected: {
-      type: Boolean,
-      default: !1
-    },
-    /** Indicates that this card is currently expanded. Adds a bit of spacing and a stronger shadow. */
-    expanded: {
-      type: Boolean,
-      default: !1
-    },
-    /** Determines if the card should have a :hover state. This usually applies when the card is clickable, or expandable. */
-    hover: {
-      type: Boolean,
-      default: !1
-    },
-    /** Shows a full-height progress bar in the background of the card. Should only be used for single row cards. Pass the current percentage value as `Number`. */
-    progress: {
-      type: Number,
-      default: null
-    },
-    /** Turns the whole card into a disabled state. This also blocks all interactions on card content. */
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
+  setAlpha: function(s) {
+    return this._a = As(s), this._roundA = Math.round(100 * this._a) / 100, this;
   },
-  computed: {
-    itemId() {
-      return `item-${this.id}`;
-    }
-  }
-}, Qo = ["id"], er = { class: "ecs-card-inner" }, tr = { class: "ecs-card-background" };
-function sr(e, s, t, a, n, i) {
-  return o(), l("div", {
-    onClick: s[0] || (s[0] = (r) => e.$emit("click", r)),
-    class: v(["ecs-card", [
-      t.selected ? "ecs-card-selected" : "",
-      t.expanded ? "ecs-card-expanded" : "",
-      t.hover ? "ecs-card-hover" : "",
-      t.disabled ? "ecs-card-disabled" : ""
-    ]]),
-    id: i.itemId
-  }, [
-    f("div", er, [
-      m(e.$slots, "default", {}, void 0, !0)
-    ]),
-    f("div", tr, [
-      t.progress ? (o(), l("div", {
-        key: 0,
-        class: "progress",
-        style: B({ width: t.progress + "%" })
-      }, null, 4)) : u("", !0)
-    ])
-  ], 10, Qo);
-}
-const wy = /* @__PURE__ */ _(Jo, [["render", sr], ["__scopeId", "data-v-8d449816"]]);
-const ir = {
-  name: "ecs-citation-line",
-  emits: ["change", "blur", "focus"],
-  components: { EcsFlexRow: Me },
-  props: {
-    /** The citation range text. */
-    cite: {
-      type: String,
-      required: !0
-    },
-    /** Unique citation ID */
-    id: {
-      type: [String, Number],
-      required: !0
-    },
-    /** Determines the visual state of the citation line. */
-    state: {
-      type: String,
-      validator: (e) => ["default", "error", "warning", "edited", "skipped"].includes(e),
-      default: "default"
-    },
-    /** Makes the content of the citation line editable. */
-    editable: {
-      type: Boolean,
-      default: !0
-    }
+  toHsv: function() {
+    var s = ls(this._r, this._g, this._b);
+    return {
+      h: s.h * 360,
+      s: s.s,
+      v: s.v,
+      a: this._a
+    };
   },
-  data() {
+  toHsvString: function() {
+    var s = ls(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.v * 100);
+    return this._a == 1 ? "hsv(" + t + ", " + a + "%, " + n + "%)" : "hsva(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
+  },
+  toHsl: function() {
+    var s = rs(this._r, this._g, this._b);
     return {
-      citeValue: this.cite
+      h: s.h * 360,
+      s: s.s,
+      l: s.l,
+      a: this._a
     };
   },
-  mounted() {
-    this.$refs.editable.innerText = this.citeValue;
+  toHslString: function() {
+    var s = rs(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.l * 100);
+    return this._a == 1 ? "hsl(" + t + ", " + a + "%, " + n + "%)" : "hsla(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
   },
-  methods: {
-    onInput(e) {
-      this.citeValue = e.target.innerText, this.$emit("change", this.citeValue, this.id);
-    }
-  }
-}, nr = ["contenteditable"];
-function ar(e, s, t, a, n, i) {
-  const r = p("ecs-flex-row");
-  return o(), y(r, { class: "ecs-citation-line" }, {
-    default: w(() => [
-      f("div", {
-        class: v(["ecs-citation-line-cite", [t.state, t.editable ? "editable" : ""]]),
-        ref: "editable",
-        onKeyup: s[0] || (s[0] = (...c) => i.onInput && i.onInput(...c)),
-        onBlur: s[1] || (s[1] = (c) => e.$emit("blur", c)),
-        onFocus: s[2] || (s[2] = (c) => e.$emit("focus", c)),
-        onKeydown: s[3] || (s[3] = U(G(() => {
-        }, ["prevent"]), ["enter"])),
-        contenteditable: t.editable
-      }, null, 42, nr),
-      e.$slots.actions ? (o(), y(r, {
-        key: 0,
-        justify: "end",
-        class: "ecs-citation-line-actions"
-      }, {
-        default: w(() => [
-          m(e.$slots, "actions", {}, void 0, !0)
-        ]),
-        _: 3
-      })) : u("", !0)
-    ]),
-    _: 3
-  });
-}
-const Sy = /* @__PURE__ */ _(ir, [["render", ar], ["__scopeId", "data-v-cfd8e718"]]);
-var qt = {};
-Object.defineProperty(qt, "__esModule", {
-  value: !0
-});
-var or = qt.clickOutSide = {
-  mounted: function(s, t, a) {
-    s.clickOutsideEvent = function(n) {
-      s == n.target || s.contains(n.target) || t.value(n, s);
-    }, document.addEventListener("click", s.clickOutsideEvent);
+  toHex: function(s) {
+    return cs(this._r, this._g, this._b, s);
   },
-  unmounted: function(s) {
-    document.removeEventListener("click", s.clickOutsideEvent);
-  }
-}, rr = qt.default = or;
-const lr = {
-  name: "ecs-context-menu",
-  emits: ["option-clicked", "menu-closed"],
-  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: Se },
-  directives: {
-    clickOutSide: rr
+  toHexString: function(s) {
+    return "#" + this.toHex(s);
   },
-  props: {
-    /** Unique String that acts as the id for the menu. */
-    elementId: {
-      type: String,
-      required: !0
-    },
-    /** Array of menu options to show. Component will use the `name` parameter as the label. Array needs to contain objects with the following structure:
-    ```{
-      name: 'Duplicate',
-      slug: 'duplicate',
-      icon: 'evidence',
-      disabled: false,
-      type: '',
-      nested: { ... }
-    }``` */
-    options: {
-      type: Array,
-      required: !0
-    },
-    /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    }
+  toHex8: function(s) {
+    return Lo(this._r, this._g, this._b, this._a, s);
   },
-  data() {
+  toHex8String: function(s) {
+    return "#" + this.toHex8(s);
+  },
+  toRgb: function() {
     return {
-      item: null,
-      menuWidth: null,
-      menuHeight: null,
-      opened: !1,
-      left: 0,
-      top: 0
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
     };
   },
-  computed: {
-    postionStyles() {
-      return { left: this.left + "px", top: this.top + "px" };
-    }
+  toRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
   },
-  methods: {
-    showMenu(e, s) {
-      this.item = s;
-      let t = document.getElementById(this.elementId);
-      t && ((!this.menuWidth || !this.menuHeight) && (t.style.visibility = "hidden", t.style.display = "block", this.menuWidth = t.offsetWidth, this.menuHeight = t.offsetHeight, t.removeAttribute("style")), this.menuWidth + e.pageX >= window.innerWidth ? this.left = e.pageX - this.menuWidth + 2 : this.left = e.pageX - 2, this.menuHeight + e.pageY >= window.innerHeight ? this.top = e.pageY - this.menuHeight + 2 : this.top = e.pageY - 2, this.opened = !0, this.$emit("menu-opened", this.item), this.$nextTick(() => {
-        this.$refs.menu.focus();
-      }));
-    },
-    hideContextMenu() {
-      document.getElementById(this.elementId) && (this.opened = !1, this.$emit("menu-closed"));
-    },
-    onClickOutside() {
-      this.hideContextMenu();
-    },
-    optionClicked(e) {
-      this.hideContextMenu(), this.$emit("option-clicked", {
-        item: this.item,
-        option: e
-      });
-    },
-    onEscKeyRelease(e) {
-      e.keyCode === 27 && this.hideContextMenu();
-    },
-    // Focus the first menu item when the context menu opens
-    focusFirst() {
-      this.$refs.menu.children[0].focus();
-    },
-    // Focus the last menu item when the user presses the up arrow key on the first menu item
-    focusLast() {
-      const e = this.$refs.menu.children;
-      e[e.length - 1].focus();
-    },
-    // Focus the previous menu item when the user presses the up arrow key
-    focusPrevious(e) {
-      const s = this.$refs.menu.children, t = Array.prototype.indexOf.call(s, e.target);
-      if (t > 0) {
-        let a = t - 1;
-        for (; a >= 0 && s[a].getAttribute("tabindex") === "-1"; )
-          a--;
-        a >= 0 ? s[a].focus() : this.focusLast();
-      } else
-        this.focusLast();
-    },
-    focusNext(e) {
-      const s = this.$refs.menu.children;
-      let t = Array.prototype.indexOf.call(s, e.target);
-      for (; t < s.length - 1; )
-        if (t++, s[t].getAttribute("tabindex") !== "-1") {
-          s[t].focus();
-          return;
-        }
-      this.focusFirst();
+  toPercentageRgb: function() {
+    return {
+      r: Math.round(H(this._r, 255) * 100) + "%",
+      g: Math.round(H(this._g, 255) * 100) + "%",
+      b: Math.round(H(this._b, 255) * 100) + "%",
+      a: this._a
+    };
+  },
+  toPercentageRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%, " + this._roundA + ")";
+  },
+  toName: function() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : Uo[cs(this._r, this._g, this._b, !0)] || !1;
+  },
+  toFilter: function(s) {
+    var t = "#" + ds(this._r, this._g, this._b, this._a), a = t, n = this._gradientType ? "GradientType = 1, " : "";
+    if (s) {
+      var i = S(s);
+      a = "#" + ds(i._r, i._g, i._b, i._a);
     }
+    return "progid:DXImageTransform.Microsoft.gradient(" + n + "startColorstr=" + t + ",endColorstr=" + a + ")";
   },
-  mounted() {
-    document.body.addEventListener("keyup", this.onEscKeyRelease), this.$refs.menu.addEventListener("keydown", (e) => {
-      e.keyCode === 9 && (e.preventDefault(), this.focusFirst());
-    });
+  toString: function(s) {
+    var t = !!s;
+    s = s || this._format;
+    var a = !1, n = this._a < 1 && this._a >= 0, i = !t && n && (s === "hex" || s === "hex6" || s === "hex3" || s === "hex4" || s === "hex8" || s === "name");
+    return i ? s === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (s === "rgb" && (a = this.toRgbString()), s === "prgb" && (a = this.toPercentageRgbString()), (s === "hex" || s === "hex6") && (a = this.toHexString()), s === "hex3" && (a = this.toHexString(!0)), s === "hex4" && (a = this.toHex8String(!0)), s === "hex8" && (a = this.toHex8String()), s === "name" && (a = this.toName()), s === "hsl" && (a = this.toHslString()), s === "hsv" && (a = this.toHsvString()), a || this.toHexString());
   },
-  beforeUnmount() {
-    document.removeEventListener("keyup", this.onEscKeyRelease);
+  clone: function() {
+    return S(this.toString());
+  },
+  _applyModification: function(s, t) {
+    var a = s.apply(null, [this].concat([].slice.call(t)));
+    return this._r = a._r, this._g = a._g, this._b = a._b, this.setAlpha(a._a), this;
+  },
+  lighten: function() {
+    return this._applyModification(Do, arguments);
+  },
+  brighten: function() {
+    return this._applyModification(Fo, arguments);
+  },
+  darken: function() {
+    return this._applyModification(Ro, arguments);
+  },
+  desaturate: function() {
+    return this._applyModification(Oo, arguments);
+  },
+  saturate: function() {
+    return this._applyModification(Ao, arguments);
+  },
+  greyscale: function() {
+    return this._applyModification(No, arguments);
+  },
+  spin: function() {
+    return this._applyModification(Vo, arguments);
+  },
+  _applyCombination: function(s, t) {
+    return s.apply(null, [this].concat([].slice.call(t)));
+  },
+  analogous: function() {
+    return this._applyCombination(Wo, arguments);
+  },
+  complement: function() {
+    return this._applyCombination(Ho, arguments);
+  },
+  monochromatic: function() {
+    return this._applyCombination(jo, arguments);
+  },
+  splitcomplement: function() {
+    return this._applyCombination(qo, arguments);
+  },
+  // Disabled until https://github.com/bgrins/TinyColor/issues/254
+  // polyad: function (number) {
+  //   return this._applyCombination(polyad, [number]);
+  // },
+  triad: function() {
+    return this._applyCombination(us, [3]);
+  },
+  tetrad: function() {
+    return this._applyCombination(us, [4]);
   }
-}, cr = ["id"], dr = ["onClick", "role", "tabindex", "aria-disabled"], ur = { key: 1 };
-function fr(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-button"), d = p("ecs-focus-ring"), g = oi("click-out-side");
-  return Ge((o(), l("div", {
-    class: v(["ecs-context-menu", n.opened ? " opened" : ""]),
-    id: t.elementId,
-    style: B([i.postionStyles])
-  }, [
-    f("ul", {
-      role: "menu",
-      "aria-orientation": "vertical",
-      tabindex: "0",
-      onKeydown: [
-        s[0] || (s[0] = U(G((...h) => i.focusPrevious && i.focusPrevious(...h), ["prevent"]), ["up"])),
-        s[1] || (s[1] = U(G((...h) => i.focusNext && i.focusNext(...h), ["prevent"]), ["down"]))
-      ],
-      ref: "menu",
-      id: "my-menu"
-    }, [
-      (o(!0), l(Z, null, ge(t.options, (h, k) => (o(), l("li", {
-        key: k,
-        onClick: G((z) => i.optionClicked(h), ["stop"]),
-        role: h.type === "divider" ? "separator" : "menuitem",
-        tabindex: h.type === "divider" || h.disabled ? "-1" : "0",
-        "aria-disabled": h.disabled || null,
-        class: v([
-          h.type === "divider" ? "ecs-context-menu-divider" : "ecs-context-menu-item",
-          h.type === "danger" ? "danger" : "",
-          h.disabled ? "disabled" : ""
-        ])
-      }, [
-        h.icon ? (o(), y(r, {
-          key: 0,
-          type: h.icon,
-          size: "20"
-        }, null, 8, ["type"])) : u("", !0),
-        h.type != "divider" ? (o(), l("span", ur, x(h.name), 1)) : u("", !0),
-        h.nested ? (o(), y(c, {
-          key: 2,
-          onClick: G((z) => i.optionClicked(h.nested), ["stop"]),
-          icon: h.nested.icon,
-          title: h.nested.name,
-          "aria-label": h.nested.name,
-          disabled: h.nested.disabled || null,
-          type: "secondary",
-          "icon-only": "",
-          size: "sml"
-        }, null, 8, ["onClick", "icon", "title", "aria-label", "disabled"])) : u("", !0),
-        b(d, {
-          danger: h.type == "danger"
-        }, null, 8, ["danger"])
-      ], 10, dr))), 128))
-    ], 544)
-  ], 14, cr)), [
-    [g, i.onClickOutside]
-  ]);
+};
+S.fromRatio = function(e, s) {
+  if (ft(e) == "object") {
+    var t = {};
+    for (var a in e)
+      e.hasOwnProperty(a) && (a === "a" ? t[a] = e[a] : t[a] = Ze(e[a]));
+    e = t;
+  }
+  return S(e, s);
+};
+function $o(e) {
+  var s = {
+    r: 0,
+    g: 0,
+    b: 0
+  }, t = 1, a = null, n = null, i = null, r = !1, c = !1;
+  return typeof e == "string" && (e = Xo(e)), ft(e) == "object" && (Ie(e.r) && Ie(e.g) && Ie(e.b) ? (s = Po(e.r, e.g, e.b), r = !0, c = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : Ie(e.h) && Ie(e.s) && Ie(e.v) ? (a = Ze(e.s), n = Ze(e.v), s = Mo(e.h, a, n), r = !0, c = "hsv") : Ie(e.h) && Ie(e.s) && Ie(e.l) && (a = Ze(e.s), i = Ze(e.l), s = To(e.h, a, i), r = !0, c = "hsl"), e.hasOwnProperty("a") && (t = e.a)), t = As(t), {
+    ok: r,
+    format: e.format || c,
+    r: Math.min(255, Math.max(s.r, 0)),
+    g: Math.min(255, Math.max(s.g, 0)),
+    b: Math.min(255, Math.max(s.b, 0)),
+    a: t
+  };
 }
-const Cy = /* @__PURE__ */ _(lr, [["render", fr], ["__scopeId", "data-v-7a99d0e5"]]);
-const pr = {
-  name: "ecs-collapse",
-  emits: ["toggled", "remove"],
-  components: { EcsButton: Se, EcsFocusRing: L, EcsFlexRow: Me },
-  props: {
-    /** Unique ID, is required to handle persist states. */
-    id: {
-      type: String,
-      required: !0
-    },
-    /** The headline of the collapse control. */
-    title: {
-      type: String,
-      required: !0
-    },
-    /** Determines the padding of the headline and content sections. */
-    indent: {
-      type: String,
-      validator: (e) => ["sml", "md", null].includes(e),
-      default: null
-    },
-    /** Determines the padding of the headline section alone. */
-    headlineIndent: {
-      type: String,
-      validator: (e) => ["sml", "md", null].includes(e),
-      default: null
-    },
-    /** Displays a border above the headline section. */
-    borderTop: {
-      type: Boolean
-    },
-    /** Displays a border below the content section. */
-    borderBottom: {
-      type: Boolean
-    },
-    /** Makes the headline to render in font-weight bold. */
-    headlineBold: {
-      type: Boolean
-    },
-    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
-    visible: {
-      type: Boolean
-    },
-    /** If set, a small (-) remove button is rendered in the headline section. */
-    removable: {
-      type: Boolean
-    },
-    /** Sets the tooltip title of the remove button. */
-    removableTooltip: {
-      type: String
-    },
-    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
-    persist: {
-      type: Boolean,
-      default: !0
-    },
-    /** Sets the top and bottom padding of the content section. */
-    contentPadding: {
-      type: String,
-      validator: (e) => ["none", "sml", "md"].includes(e),
-      default: "md"
-    },
-    /** Sets the count of the collapse control in parenthese next to the headline. */
-    count: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      isVisible: this.visible
-    };
-  },
-  computed: {
-    indentation() {
-      return this.indent && this.indent !== "" ? `ecs-collapsable-indent-${this.indent}` : this.indent;
-    },
-    headlineIndentation() {
-      return this.headlineIndent && this.headlineIndent !== "" ? `ecs-collapsable-headline-indent-${this.headlineIndent}` : this.headlineIndent;
-    },
-    removeButtonIndentation() {
-      return this.headlineIndent && this.headlineIndent !== "" ? `remove-button-indent-${this.headlineIndent}` : this.indent && this.indent !== "" ? `remove-button-indent-${this.indent}` : this.headlineIndent;
-    },
-    contentPaddingClass() {
-      return `ecs-collapsable-content-padding-${this.contentPadding}`;
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.persist && (localStorage.getItem(`collapse-${this.id}`) === null ? (this.isVisible = this.visible, localStorage.setItem(`collapse-${this.id}`, this.isVisible)) : this.isVisible = localStorage.getItem(`collapse-${this.id}`) == "true");
-    });
-  },
-  methods: {
-    toggleCollapse() {
-      this.isVisible = !this.isVisible, this.persist && localStorage.setItem(`collapse-${this.id}`, this.isVisible), this.$emit("toggled", this.id, this.isVisible);
+function Po(e, s, t) {
+  return {
+    r: H(e, 255) * 255,
+    g: H(s, 255) * 255,
+    b: H(t, 255) * 255
+  };
+}
+function rs(e, s, t) {
+  e = H(e, 255), s = H(s, 255), t = H(t, 255);
+  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = (a + n) / 2;
+  if (a == n)
+    i = r = 0;
+  else {
+    var d = a - n;
+    switch (r = c > 0.5 ? d / (2 - a - n) : d / (a + n), a) {
+      case e:
+        i = (s - t) / d + (s < t ? 6 : 0);
+        break;
+      case s:
+        i = (t - e) / d + 2;
+        break;
+      case t:
+        i = (e - s) / d + 4;
+        break;
     }
-  },
-  watch: {
-    visible() {
-      this.isVisible = this.visible;
+    i /= 6;
+  }
+  return {
+    h: i,
+    s: r,
+    l: c
+  };
+}
+function To(e, s, t) {
+  var a, n, i;
+  e = H(e, 360), s = H(s, 100), t = H(t, 100);
+  function r(g, h, k) {
+    return k < 0 && (k += 1), k > 1 && (k -= 1), k < 1 / 6 ? g + (h - g) * 6 * k : k < 1 / 2 ? h : k < 2 / 3 ? g + (h - g) * (2 / 3 - k) * 6 : g;
+  }
+  if (s === 0)
+    a = n = i = t;
+  else {
+    var c = t < 0.5 ? t * (1 + s) : t + s - t * s, d = 2 * t - c;
+    a = r(d, c, e + 1 / 3), n = r(d, c, e), i = r(d, c, e - 1 / 3);
+  }
+  return {
+    r: a * 255,
+    g: n * 255,
+    b: i * 255
+  };
+}
+function ls(e, s, t) {
+  e = H(e, 255), s = H(s, 255), t = H(t, 255);
+  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = a, d = a - n;
+  if (r = a === 0 ? 0 : d / a, a == n)
+    i = 0;
+  else {
+    switch (a) {
+      case e:
+        i = (s - t) / d + (s < t ? 6 : 0);
+        break;
+      case s:
+        i = (t - e) / d + 2;
+        break;
+      case t:
+        i = (e - s) / d + 4;
+        break;
     }
+    i /= 6;
   }
-}, gr = { class: "wrap" }, mr = ["aria-expanded", "aria-controls"], hr = {
-  key: 0,
-  class: "ecs-collapsable-headline-count"
-}, vr = {
-  key: 0,
-  class: "ecs-collapsable-headline-controls"
-}, _r = ["id", "aria-hidden"];
-function yr(e, s, t, a, n, i) {
-  const r = p("ecs-button"), c = p("ecs-flex-row"), d = p("ecs-focus-ring");
-  return o(), l("div", {
-    class: v(["ecs-collapsable", [
-      t.borderTop ? "ecs-collapsable-border-top" : "",
-      t.borderBottom ? "ecs-collapsable-border-bottom" : "",
-      i.indentation,
-      i.headlineIndentation
-    ]])
-  }, [
-    f("div", gr, [
-      t.removable ? (o(), y(r, {
-        key: 0,
-        onClick: s[0] || (s[0] = (g) => e.$emit("remove", t.id)),
-        type: "secondary",
-        "icon-only": "",
-        icon: "minus",
-        size: "sml",
-        class: v(["remove-button", i.removeButtonIndentation]),
-        title: t.removableTooltip,
-        "aria-label": t.removableTooltip
-      }, null, 8, ["class", "title", "aria-label"])) : u("", !0),
-      f("h3", {
-        onClick: s[1] || (s[1] = (...g) => i.toggleCollapse && i.toggleCollapse(...g)),
-        onKeydown: s[2] || (s[2] = U(G((...g) => i.toggleCollapse && i.toggleCollapse(...g), ["prevent"]), ["space"])),
-        role: "button",
-        class: v(["ecs-collapsable-headline", [t.headlineBold ? "ecs-headline-section-bold" : "ecs-headline-section", n.isVisible ? "" : "collapsed"]]),
-        tabindex: "0",
-        "aria-expanded": n.isVisible ? "true" : "false",
-        "aria-controls": `collapse-${this.id}`
-      }, [
-        b(c, { gap: 4 }, {
-          default: w(() => [
-            D(x(t.title) + " ", 1),
-            t.count ? (o(), l("span", hr, "(" + x(t.count) + ")", 1)) : u("", !0)
-          ]),
-          _: 1
-        }),
-        b(d, {
-          inset: 0,
-          radius: 0
-        }),
-        e.$slots.controls ? (o(), l("div", vr, [
-          m(e.$slots, "controls", {}, void 0, !0)
-        ])) : u("", !0)
-      ], 42, mr)
-    ]),
-    f("div", {
-      class: v([n.isVisible ? "collapse-show" : "collapse-hide", "collapse"]),
-      id: `collapse-${this.id}`,
-      "aria-hidden": n.isVisible ? "false" : "true"
-    }, [
-      f("div", {
-        class: v(["ecs-collapsable-content", i.contentPaddingClass])
-      }, [
-        m(e.$slots, "default", {}, void 0, !0)
-      ], 2)
-    ], 10, _r)
-  ], 2);
+  return {
+    h: i,
+    s: r,
+    v: c
+  };
 }
-const By = /* @__PURE__ */ _(pr, [["render", yr], ["__scopeId", "data-v-4bf981c8"]]);
-const br = {
-  name: "ecs-collection-control",
-  emits: ["toggled", "collectionTooltip"],
-  components: { EcsIcon: M, EcsFocusRing: L },
-  mixins: [de],
-  props: {
-    /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    },
-    /** The size of the collection control. */
-    size: {
-      type: String,
-      validator: (e) => ["md", "lg"].includes(e),
-      default: "lg"
-    },
-    /** If set to true, the control will appear expanded by default. */
-    visible: {
-      type: Boolean,
-      default: !1
-    },
-    /** The label that describes the type of selected objects. E.g. "Users: " */
-    label: {
-      type: String
-    },
-    /** Option to disable the outer borders of the control. */
-    noBorder: {
-      type: Boolean,
-      default: !1
-    },
-    /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
-    collection: {
-      type: Array,
-      required: !0
-    },
-    /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
-    maxHeight: {
-      type: Number,
-      default: null
-    },
-    /** Makes the control non-interactive and removes all checkboxes from the list items. */
-    nonInteractive: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  data() {
-    return {
-      isVisible: this.visible,
-      expandId: ""
-    };
-  },
-  computed: {
-    iconSize() {
-      return this.size === "md" ? "24px" : "30px";
-    },
-    fullTooltip() {
-      return this.collection.filter((s) => s.value).map((s) => s.name).join(", ");
-    },
-    listMaxHeight() {
-      return this.maxHeight ? `max-height: ${this.maxHeight}px` : null;
-    }
-  },
-  methods: {
-    toggleCollapse() {
-      this.nonInteractive || (this.isVisible = !this.isVisible), this.$emit("toggled", this.id, this.isVisible);
-    },
-    toggleTooltip() {
-      this.$emit("collectionTooltip", this.fullTooltip);
-    }
-  },
-  watch: {
-    visible() {
-      this.isVisible = this.visible;
-    }
-  },
-  created() {
-    this.expandId = this.generateUniqueId();
-  }
-}, kr = ["tabindex", "role", "aria-expanded", "aria-controls"], xr = {
-  key: 1,
-  class: "description"
-}, wr = ["title"], Sr = { key: 0 }, Cr = ["id", "aria-hidden"];
-function Br(e, s, t, a, n, i) {
-  const r = p("ecs-focus-ring"), c = p("ecs-icon");
-  return o(), l("div", {
-    class: v(["ecs-collection-control", [
-      t.noBorder ? "" : "bordered",
-      n.isVisible || t.nonInteractive ? "" : "collapsed",
-      t.size
-    ]])
-  }, [
-    f("div", {
-      onClick: s[2] || (s[2] = (...d) => i.toggleCollapse && i.toggleCollapse(...d)),
-      onKeydown: [
-        s[3] || (s[3] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["enter"])),
-        s[4] || (s[4] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["space"]))
-      ],
-      class: v(["ecs-collection-control-header", [
-        n.isVisible || t.nonInteractive ? "" : "collapsed",
-        t.nonInteractive ? "" : "interactive"
-      ]]),
-      tabindex: t.nonInteractive ? "-1" : "0",
-      role: t.nonInteractive ? !1 : "button",
-      "aria-expanded": t.nonInteractive ? "false" : n.isVisible ? "true" : "false",
-      "aria-controls": t.nonInteractive ? !1 : n.expandId
-    }, [
-      b(r),
-      t.icon ? (o(), y(c, {
-        key: 0,
-        type: t.icon,
-        color: "#858E9E",
-        size: i.iconSize
-      }, null, 8, ["type", "size"])) : u("", !0),
-      t.label ? (o(), l("div", xr, x(t.label), 1)) : u("", !0),
-      f("div", {
-        class: "collection",
-        onMouseover: s[0] || (s[0] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
-        onMouseleave: s[1] || (s[1] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
-        title: i.fullTooltip
-      }, [
-        (o(!0), l(Z, null, ge(t.collection, (d) => (o(), l("span", {
-          key: d.name
-        }, [
-          d.value ? (o(), l("span", Sr, x(d.name), 1)) : u("", !0)
-        ]))), 128))
-      ], 40, wr)
-    ], 42, kr),
-    f("div", {
-      class: v([n.isVisible || t.nonInteractive ? "collapse-show" : "collapse-hide", "collapse"]),
-      id: t.nonInteractive ? !1 : n.expandId,
-      "aria-hidden": n.isVisible ? "false" : "true"
-    }, [
-      f("div", {
-        class: "ecs-collection-control-list scrollbar scrollbar-sml",
-        style: B(i.listMaxHeight)
-      }, [
-        m(e.$slots, "default")
-      ], 4)
-    ], 10, Cr)
-  ], 2);
+function Mo(e, s, t) {
+  e = H(e, 360) * 6, s = H(s, 100), t = H(t, 100);
+  var a = Math.floor(e), n = e - a, i = t * (1 - s), r = t * (1 - n * s), c = t * (1 - (1 - n) * s), d = a % 6, g = [t, r, i, i, c, t][d], h = [c, t, t, r, i, i][d], k = [i, i, c, t, t, r][d];
+  return {
+    r: g * 255,
+    g: h * 255,
+    b: k * 255
+  };
 }
-const zy = /* @__PURE__ */ _(br, [["render", Br], ["__scopeId", "data-v-5e5716bc"]]);
-const zr = {
-  name: "ecs-skeleton-loader",
-  props: {
-    /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
-    type: {
-      type: String,
-      validator: (e) => ["single", "multi", "rect", "circle"].includes(e),
-      default: "single"
-    },
-    /** Only used together with the `multi` type. Determines the amount of text lines. */
-    count: {
-      type: Number,
-      default: 3
-    },
-    /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
-    width: {
-      type: Number,
-      default: 20
-    },
-    /** Sets the height of the `rect` and `circle` type in pixels. */
-    height: {
-      type: Number,
-      default: 20
-    },
-    /** Aligns the height and size of the single & multi types with our common line-height type scales. */
-    lineHeight: {
-      type: Number,
-      validator: (e) => [1, 2, 3, 4, 5, 6].includes(e),
-      default: 2
-    }
-  },
-  computed: {
-    rectClass() {
-      return this.type && this.type !== "" ? `skeleton-${this.type}` : this.type;
-    }
-  }
-}, Ir = (e) => (ve("data-v-75354c78"), e = e(), _e(), e), Er = {
-  key: 1,
-  class: "ecs-skeleton skeletons"
-}, $r = /* @__PURE__ */ Ir(() => /* @__PURE__ */ f("div", { class: "skeleton skeleton-single" }, null, -1)), Pr = [
-  $r
-];
-function Tr(e, s, t, a, n, i) {
-  return t.type === "rect" || t.type === "circle" ? (o(), l("div", {
-    key: 0,
-    class: v(["ecs-skeleton skeleton", i.rectClass]),
-    style: B({ width: t.width + "px", height: t.height + "px" })
-  }, null, 6)) : t.type === "multi" ? (o(), l("div", Er, [
-    (o(!0), l(Z, null, ge(parseInt(t.count), (r) => (o(), l("div", {
-      key: r,
-      class: v(["skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
-    }, Pr, 2))), 128))
-  ])) : (o(), l("div", {
-    key: 2,
-    class: v(["ecs-skeleton skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
-  }, [
-    f("div", {
-      class: "skeleton skeleton-single",
-      style: B({ width: t.width + "%" })
-    }, null, 4)
-  ], 2));
+function cs(e, s, t, a) {
+  var n = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
+  return a && n[0].charAt(0) == n[0].charAt(1) && n[1].charAt(0) == n[1].charAt(1) && n[2].charAt(0) == n[2].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) : n.join("");
 }
-const Ce = /* @__PURE__ */ _(zr, [["render", Tr], ["__scopeId", "data-v-75354c78"]]);
-const Mr = {
-  name: "ecs-formatted",
-  components: { EcsSkeletonLoader: Ce },
-  mixins: [de],
-  props: {
-    /** Sets the general font size of the formatted text component to small. */
-    small: {
-      type: Boolean,
-      default: !1
-    },
-    /** Turns the formatted text component into a skeleton loader. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Used to customize the line count of the skeleton loader. */
-    skeletonCount: {
-      type: Number,
-      default: 4
-    }
-  },
-  created() {
-    this.formattedId = this.generateUniqueId();
-  },
-  mounted() {
-    this.$el.querySelectorAll(`#${this.formattedId} a`).forEach((s) => {
-      const t = s.getAttribute("href");
-      s.setAttribute("title", `Open ${t}`);
-    });
-  }
-}, Lr = ["id"];
-function Or(e, s, t, a, n, i) {
-  const r = p("ecs-skeleton-loader");
-  return o(), l("div", {
-    class: v(["ecs-formatted", [t.small ? "ecs-formatted-sml" : ""]]),
-    id: e.formattedId
-  }, [
-    t.loading ? (o(), y(r, {
-      key: 1,
-      type: "multi",
-      "line-height": t.small ? 1 : 2,
-      count: t.skeletonCount
-    }, null, 8, ["line-height", "count"])) : m(e.$slots, "default", {
-      key: 0,
-      ref: "slot"
-    })
-  ], 10, Lr);
+function Lo(e, s, t, a, n) {
+  var i = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16)), pe(Ns(a))];
+  return n && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) && i[3].charAt(0) == i[3].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
 }
-const Ds = /* @__PURE__ */ _(Mr, [["render", Or]]);
-const Ar = {
-  name: "ecs-comment",
-  emits: ["edit", "delete"],
-  components: { EcsAvatar: Mi, EcsButton: Se, EcsFormatted: Ds, EcsSkeletonLoader: Ce },
-  props: {
-    /** Name of the user that is the comment author. */
-    userName: {
-      type: String,
-      required: !0
-    },
-    /** Avatar image of the user that is the comment author. */
-    userImage: {
-      type: String,
-      default: null
-    },
-    /** Determines if controls to edit or delete the comment should be available. */
-    canEdit: {
-      type: Boolean,
-      default: !1
-    },
-    /** Shows the whole comment in skeleton loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
-    }
-  }
-}, Nr = ["aria-busy"], Dr = { class: "ecs-comment-header" }, Fr = { class: "ecs-comment-autor" }, Rr = {
-  key: 2,
-  class: "ecs-comment-meta"
-}, Vr = { class: "ecs-comment-meta-name" }, Hr = { class: "ecs-comment-meta-time" }, qr = {
-  key: 3,
-  class: "ecs-comment-meta loading"
-}, Wr = {
-  key: 0,
-  class: "ecs-comment-actions"
-}, jr = {
-  key: 2,
-  class: "ecs-comment-edit"
+function ds(e, s, t, a) {
+  var n = [pe(Ns(a)), pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
+  return n.join("");
+}
+S.equals = function(e, s) {
+  return !e || !s ? !1 : S(e).toRgbString() == S(s).toRgbString();
 };
-function Gr(e, s, t, a, n, i) {
-  const r = p("ecs-skeleton-loader"), c = p("ecs-avatar"), d = p("ecs-button"), g = p("ecs-formatted");
-  return o(), l("div", {
-    class: "ecs-comment",
-    role: "comment",
-    "aria-busy": t.loading || null
-  }, [
-    f("div", Dr, [
-      f("div", Fr, [
-        t.loading ? (o(), y(r, {
-          key: 0,
-          type: "circle",
-          width: 32,
-          height: 32
-        })) : (o(), y(c, {
-          key: 1,
-          name: t.userName,
-          image: t.userImage,
-          size: 32,
-          rounded: ""
-        }, null, 8, ["name", "image"])),
-        t.loading ? (o(), l("div", qr, [
-          b(r, {
-            type: "single",
-            "line-height": 3,
-            width: 50
-          }),
-          b(r, {
-            type: "single",
-            "line-height": 2,
-            width: 60
-          })
-        ])) : (o(), l("div", Rr, [
-          f("span", Vr, x(t.userName), 1),
-          f("span", Hr, [
-            m(e.$slots, "commentdate", {}, void 0, !0)
-          ])
-        ]))
-      ]),
-      t.canEdit ? (o(), l("div", Wr, [
-        b(d, {
-          onClick: s[0] || (s[0] = (h) => e.$emit("edit", h)),
-          type: "secondary",
-          size: "sml",
-          icon: "edit",
-          "icon-only": "",
-          title: "Edit Comment"
-        }),
-        b(d, {
-          onClick: s[1] || (s[1] = (h) => e.$emit("delete", h)),
-          type: "danger",
-          size: "sml",
-          icon: "delete",
-          "icon-only": "",
-          title: "Delete Comment"
-        })
-      ])) : u("", !0)
-    ]),
-    !e.$slots.editform && !t.loading ? (o(), y(g, {
-      key: 0,
-      class: "ecs-comment-body"
-    }, {
-      default: w(() => [
-        m(e.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    })) : t.loading ? (o(), y(r, {
-      key: 1,
-      type: "multi",
-      count: 2,
-      class: "ecs-comment-body"
-    })) : (o(), l("div", jr, [
-      m(e.$slots, "editform", {}, void 0, !0)
-    ]))
-  ], 8, Nr);
+S.random = function() {
+  return S.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+function Oo(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.s -= s / 100, t.s = ht(t.s), S(t);
 }
-const Iy = /* @__PURE__ */ _(Ar, [["render", Gr], ["__scopeId", "data-v-cf696f66"]]);
-const Ur = {}, Kr = { class: "ecs-comment-list" };
-function Yr(e, s) {
-  return o(), l("div", Kr, [
-    m(e.$slots, "default")
-  ]);
+function Ao(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.s += s / 100, t.s = ht(t.s), S(t);
 }
-const Ey = /* @__PURE__ */ _(Ur, [["render", Yr]]);
-function ut(e) {
-  "@babel/helpers - typeof";
-  return ut = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(s) {
-    return typeof s;
-  } : function(s) {
-    return s && typeof Symbol == "function" && s.constructor === Symbol && s !== Symbol.prototype ? "symbol" : typeof s;
-  }, ut(e);
+function No(e) {
+  return S(e).desaturate(100);
 }
-var Xr = /^\s+/, Zr = /\s+$/;
-function S(e, s) {
-  if (e = e || "", s = s || {}, e instanceof S)
-    return e;
-  if (!(this instanceof S))
-    return new S(e, s);
-  var t = Jr(e);
-  this._originalInput = e, this._r = t.r, this._g = t.g, this._b = t.b, this._a = t.a, this._roundA = Math.round(100 * this._a) / 100, this._format = s.format || t.format, this._gradientType = s.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = t.ok;
+function Do(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.l += s / 100, t.l = ht(t.l), S(t);
 }
-S.prototype = {
-  isDark: function() {
-    return this.getBrightness() < 128;
-  },
-  isLight: function() {
-    return !this.isDark();
-  },
-  isValid: function() {
-    return this._ok;
-  },
-  getOriginalInput: function() {
-    return this._originalInput;
-  },
-  getFormat: function() {
-    return this._format;
-  },
-  getAlpha: function() {
-    return this._a;
-  },
-  getBrightness: function() {
-    var s = this.toRgb();
-    return (s.r * 299 + s.g * 587 + s.b * 114) / 1e3;
-  },
-  getLuminance: function() {
-    var s = this.toRgb(), t, a, n, i, r, c;
-    return t = s.r / 255, a = s.g / 255, n = s.b / 255, t <= 0.03928 ? i = t / 12.92 : i = Math.pow((t + 0.055) / 1.055, 2.4), a <= 0.03928 ? r = a / 12.92 : r = Math.pow((a + 0.055) / 1.055, 2.4), n <= 0.03928 ? c = n / 12.92 : c = Math.pow((n + 0.055) / 1.055, 2.4), 0.2126 * i + 0.7152 * r + 0.0722 * c;
-  },
-  setAlpha: function(s) {
-    return this._a = Fs(s), this._roundA = Math.round(100 * this._a) / 100, this;
-  },
-  toHsv: function() {
-    var s = ls(this._r, this._g, this._b);
-    return {
-      h: s.h * 360,
-      s: s.s,
-      v: s.v,
-      a: this._a
-    };
-  },
-  toHsvString: function() {
-    var s = ls(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.v * 100);
-    return this._a == 1 ? "hsv(" + t + ", " + a + "%, " + n + "%)" : "hsva(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
-  },
-  toHsl: function() {
-    var s = rs(this._r, this._g, this._b);
-    return {
-      h: s.h * 360,
-      s: s.s,
-      l: s.l,
-      a: this._a
-    };
-  },
-  toHslString: function() {
-    var s = rs(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.l * 100);
-    return this._a == 1 ? "hsl(" + t + ", " + a + "%, " + n + "%)" : "hsla(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
-  },
-  toHex: function(s) {
-    return cs(this._r, this._g, this._b, s);
-  },
-  toHexString: function(s) {
-    return "#" + this.toHex(s);
-  },
-  toHex8: function(s) {
-    return sl(this._r, this._g, this._b, this._a, s);
-  },
-  toHex8String: function(s) {
-    return "#" + this.toHex8(s);
-  },
-  toRgb: function() {
-    return {
-      r: Math.round(this._r),
-      g: Math.round(this._g),
-      b: Math.round(this._b),
-      a: this._a
-    };
-  },
-  toRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
-  },
-  toPercentageRgb: function() {
-    return {
-      r: Math.round(H(this._r, 255) * 100) + "%",
-      g: Math.round(H(this._g, 255) * 100) + "%",
-      b: Math.round(H(this._b, 255) * 100) + "%",
-      a: this._a
-    };
-  },
-  toPercentageRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%, " + this._roundA + ")";
-  },
-  toName: function() {
-    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : gl[cs(this._r, this._g, this._b, !0)] || !1;
-  },
-  toFilter: function(s) {
-    var t = "#" + ds(this._r, this._g, this._b, this._a), a = t, n = this._gradientType ? "GradientType = 1, " : "";
-    if (s) {
-      var i = S(s);
-      a = "#" + ds(i._r, i._g, i._b, i._a);
-    }
-    return "progid:DXImageTransform.Microsoft.gradient(" + n + "startColorstr=" + t + ",endColorstr=" + a + ")";
-  },
-  toString: function(s) {
-    var t = !!s;
-    s = s || this._format;
-    var a = !1, n = this._a < 1 && this._a >= 0, i = !t && n && (s === "hex" || s === "hex6" || s === "hex3" || s === "hex4" || s === "hex8" || s === "name");
-    return i ? s === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (s === "rgb" && (a = this.toRgbString()), s === "prgb" && (a = this.toPercentageRgbString()), (s === "hex" || s === "hex6") && (a = this.toHexString()), s === "hex3" && (a = this.toHexString(!0)), s === "hex4" && (a = this.toHex8String(!0)), s === "hex8" && (a = this.toHex8String()), s === "name" && (a = this.toName()), s === "hsl" && (a = this.toHslString()), s === "hsv" && (a = this.toHsvString()), a || this.toHexString());
-  },
-  clone: function() {
-    return S(this.toString());
-  },
-  _applyModification: function(s, t) {
-    var a = s.apply(null, [this].concat([].slice.call(t)));
-    return this._r = a._r, this._g = a._g, this._b = a._b, this.setAlpha(a._a), this;
-  },
-  lighten: function() {
-    return this._applyModification(ol, arguments);
-  },
-  brighten: function() {
-    return this._applyModification(rl, arguments);
-  },
-  darken: function() {
-    return this._applyModification(ll, arguments);
-  },
-  desaturate: function() {
-    return this._applyModification(il, arguments);
-  },
-  saturate: function() {
-    return this._applyModification(nl, arguments);
-  },
-  greyscale: function() {
-    return this._applyModification(al, arguments);
-  },
-  spin: function() {
-    return this._applyModification(cl, arguments);
-  },
-  _applyCombination: function(s, t) {
-    return s.apply(null, [this].concat([].slice.call(t)));
-  },
-  analogous: function() {
-    return this._applyCombination(fl, arguments);
-  },
-  complement: function() {
-    return this._applyCombination(dl, arguments);
-  },
-  monochromatic: function() {
-    return this._applyCombination(pl, arguments);
-  },
-  splitcomplement: function() {
-    return this._applyCombination(ul, arguments);
-  },
-  // Disabled until https://github.com/bgrins/TinyColor/issues/254
-  // polyad: function (number) {
-  //   return this._applyCombination(polyad, [number]);
-  // },
-  triad: function() {
-    return this._applyCombination(us, [3]);
-  },
-  tetrad: function() {
-    return this._applyCombination(us, [4]);
-  }
-};
-S.fromRatio = function(e, s) {
-  if (ut(e) == "object") {
-    var t = {};
-    for (var a in e)
-      e.hasOwnProperty(a) && (a === "a" ? t[a] = e[a] : t[a] = Ze(e[a]));
-    e = t;
-  }
-  return S(e, s);
-};
-function Jr(e) {
-  var s = {
-    r: 0,
-    g: 0,
-    b: 0
-  }, t = 1, a = null, n = null, i = null, r = !1, c = !1;
-  return typeof e == "string" && (e = _l(e)), ut(e) == "object" && (Ie(e.r) && Ie(e.g) && Ie(e.b) ? (s = Qr(e.r, e.g, e.b), r = !0, c = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : Ie(e.h) && Ie(e.s) && Ie(e.v) ? (a = Ze(e.s), n = Ze(e.v), s = tl(e.h, a, n), r = !0, c = "hsv") : Ie(e.h) && Ie(e.s) && Ie(e.l) && (a = Ze(e.s), i = Ze(e.l), s = el(e.h, a, i), r = !0, c = "hsl"), e.hasOwnProperty("a") && (t = e.a)), t = Fs(t), {
-    ok: r,
-    format: e.format || c,
-    r: Math.min(255, Math.max(s.r, 0)),
-    g: Math.min(255, Math.max(s.g, 0)),
-    b: Math.min(255, Math.max(s.b, 0)),
-    a: t
-  };
+function Fo(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toRgb();
+  return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(s / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(s / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(s / 100)))), S(t);
 }
-function Qr(e, s, t) {
-  return {
-    r: H(e, 255) * 255,
-    g: H(s, 255) * 255,
-    b: H(t, 255) * 255
-  };
+function Ro(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.l -= s / 100, t.l = ht(t.l), S(t);
 }
-function rs(e, s, t) {
-  e = H(e, 255), s = H(s, 255), t = H(t, 255);
-  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = (a + n) / 2;
-  if (a == n)
-    i = r = 0;
-  else {
-    var d = a - n;
-    switch (r = c > 0.5 ? d / (2 - a - n) : d / (a + n), a) {
-      case e:
-        i = (s - t) / d + (s < t ? 6 : 0);
-        break;
-      case s:
-        i = (t - e) / d + 2;
-        break;
-      case t:
-        i = (e - s) / d + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return {
-    h: i,
-    s: r,
-    l: c
-  };
-}
-function el(e, s, t) {
-  var a, n, i;
-  e = H(e, 360), s = H(s, 100), t = H(t, 100);
-  function r(g, h, k) {
-    return k < 0 && (k += 1), k > 1 && (k -= 1), k < 1 / 6 ? g + (h - g) * 6 * k : k < 1 / 2 ? h : k < 2 / 3 ? g + (h - g) * (2 / 3 - k) * 6 : g;
-  }
-  if (s === 0)
-    a = n = i = t;
-  else {
-    var c = t < 0.5 ? t * (1 + s) : t + s - t * s, d = 2 * t - c;
-    a = r(d, c, e + 1 / 3), n = r(d, c, e), i = r(d, c, e - 1 / 3);
-  }
-  return {
-    r: a * 255,
-    g: n * 255,
-    b: i * 255
-  };
-}
-function ls(e, s, t) {
-  e = H(e, 255), s = H(s, 255), t = H(t, 255);
-  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = a, d = a - n;
-  if (r = a === 0 ? 0 : d / a, a == n)
-    i = 0;
-  else {
-    switch (a) {
-      case e:
-        i = (s - t) / d + (s < t ? 6 : 0);
-        break;
-      case s:
-        i = (t - e) / d + 2;
-        break;
-      case t:
-        i = (e - s) / d + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return {
-    h: i,
-    s: r,
-    v: c
-  };
-}
-function tl(e, s, t) {
-  e = H(e, 360) * 6, s = H(s, 100), t = H(t, 100);
-  var a = Math.floor(e), n = e - a, i = t * (1 - s), r = t * (1 - n * s), c = t * (1 - (1 - n) * s), d = a % 6, g = [t, r, i, i, c, t][d], h = [c, t, t, r, i, i][d], k = [i, i, c, t, t, r][d];
-  return {
-    r: g * 255,
-    g: h * 255,
-    b: k * 255
-  };
-}
-function cs(e, s, t, a) {
-  var n = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
-  return a && n[0].charAt(0) == n[0].charAt(1) && n[1].charAt(0) == n[1].charAt(1) && n[2].charAt(0) == n[2].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) : n.join("");
-}
-function sl(e, s, t, a, n) {
-  var i = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16)), pe(Rs(a))];
-  return n && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) && i[3].charAt(0) == i[3].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
-}
-function ds(e, s, t, a) {
-  var n = [pe(Rs(a)), pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
-  return n.join("");
-}
-S.equals = function(e, s) {
-  return !e || !s ? !1 : S(e).toRgbString() == S(s).toRgbString();
-};
-S.random = function() {
-  return S.fromRatio({
-    r: Math.random(),
-    g: Math.random(),
-    b: Math.random()
-  });
-};
-function il(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.s -= s / 100, t.s = mt(t.s), S(t);
-}
-function nl(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.s += s / 100, t.s = mt(t.s), S(t);
-}
-function al(e) {
-  return S(e).desaturate(100);
-}
-function ol(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.l += s / 100, t.l = mt(t.l), S(t);
-}
-function rl(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toRgb();
-  return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(s / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(s / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(s / 100)))), S(t);
-}
-function ll(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.l -= s / 100, t.l = mt(t.l), S(t);
-}
-function cl(e, s) {
+function Vo(e, s) {
   var t = S(e).toHsl(), a = (t.h + s) % 360;
   return t.h = a < 0 ? 360 + a : a, S(t);
 }
-function dl(e) {
+function Ho(e) {
   var s = S(e).toHsl();
   return s.h = (s.h + 180) % 360, S(s);
 }
@@ -5225,7 +3974,7 @@ function us(e, s) {
     }));
   return a;
 }
-function ul(e) {
+function qo(e) {
   var s = S(e).toHsl(), t = s.h;
   return [S(e), S({
     h: (t + 72) % 360,
@@ -5237,14 +3986,14 @@ function ul(e) {
     l: s.l
   })];
 }
-function fl(e, s, t) {
+function Wo(e, s, t) {
   s = s || 6, t = t || 30;
   var a = S(e).toHsl(), n = 360 / t, i = [S(e)];
   for (a.h = (a.h - (n * s >> 1) + 720) % 360; --s; )
     a.h = (a.h + n) % 360, i.push(S(a));
   return i;
 }
-function pl(e, s) {
+function jo(e, s) {
   s = s || 6;
   for (var t = S(e).toHsv(), a = t.h, n = t.s, i = t.v, r = [], c = 1 / s; s--; )
     r.push(S({
@@ -5270,7 +4019,7 @@ S.readability = function(e, s) {
 };
 S.isReadable = function(e, s, t) {
   var a = S.readability(e, s), n, i;
-  switch (i = !1, n = yl(t), n.level + n.size) {
+  switch (i = !1, n = Zo(t), n.level + n.size) {
     case "AAsmall":
     case "AAAlarge":
       i = a >= 4.5;
@@ -5444,31 +4193,31 @@ var $t = S.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-}, gl = S.hexNames = ml($t);
-function ml(e) {
+}, Uo = S.hexNames = Go($t);
+function Go(e) {
   var s = {};
   for (var t in e)
     e.hasOwnProperty(t) && (s[e[t]] = t);
   return s;
 }
-function Fs(e) {
+function As(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
 function H(e, s) {
-  hl(e) && (e = "100%");
-  var t = vl(e);
+  Ko(e) && (e = "100%");
+  var t = Yo(e);
   return e = Math.min(s, Math.max(0, parseFloat(e))), t && (e = parseInt(e * s, 10) / 100), Math.abs(e - s) < 1e-6 ? 1 : e % s / parseFloat(s);
 }
-function mt(e) {
+function ht(e) {
   return Math.min(1, Math.max(0, e));
 }
 function se(e) {
   return parseInt(e, 16);
 }
-function hl(e) {
+function Ko(e) {
   return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
 }
-function vl(e) {
+function Yo(e) {
   return typeof e == "string" && e.indexOf("%") != -1;
 }
 function pe(e) {
@@ -5477,107 +4226,1365 @@ function pe(e) {
 function Ze(e) {
   return e <= 1 && (e = e * 100 + "%"), e;
 }
-function Rs(e) {
+function Ns(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
 function fs(e) {
   return se(e) / 255;
 }
-var fe = function() {
-  var e = "[-\\+]?\\d+%?", s = "[-\\+]?\\d*\\.\\d+%?", t = "(?:" + s + ")|(?:" + e + ")", a = "[\\s|\\(]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")\\s*\\)?", n = "[\\s|\\(]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")\\s*\\)?";
-  return {
-    CSS_UNIT: new RegExp(t),
-    rgb: new RegExp("rgb" + a),
-    rgba: new RegExp("rgba" + n),
-    hsl: new RegExp("hsl" + a),
-    hsla: new RegExp("hsla" + n),
-    hsv: new RegExp("hsv" + a),
-    hsva: new RegExp("hsva" + n),
-    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
-  };
-}();
-function Ie(e) {
-  return !!fe.CSS_UNIT.exec(e);
+var fe = function() {
+  var e = "[-\\+]?\\d+%?", s = "[-\\+]?\\d*\\.\\d+%?", t = "(?:" + s + ")|(?:" + e + ")", a = "[\\s|\\(]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")\\s*\\)?", n = "[\\s|\\(]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")[,|\\s]+(" + t + ")\\s*\\)?";
+  return {
+    CSS_UNIT: new RegExp(t),
+    rgb: new RegExp("rgb" + a),
+    rgba: new RegExp("rgba" + n),
+    hsl: new RegExp("hsl" + a),
+    hsla: new RegExp("hsla" + n),
+    hsv: new RegExp("hsv" + a),
+    hsva: new RegExp("hsva" + n),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+  };
+}();
+function Ie(e) {
+  return !!fe.CSS_UNIT.exec(e);
+}
+function Xo(e) {
+  e = e.replace(Io, "").replace(Eo, "").toLowerCase();
+  var s = !1;
+  if ($t[e])
+    e = $t[e], s = !0;
+  else if (e == "transparent")
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  var t;
+  return (t = fe.rgb.exec(e)) ? {
+    r: t[1],
+    g: t[2],
+    b: t[3]
+  } : (t = fe.rgba.exec(e)) ? {
+    r: t[1],
+    g: t[2],
+    b: t[3],
+    a: t[4]
+  } : (t = fe.hsl.exec(e)) ? {
+    h: t[1],
+    s: t[2],
+    l: t[3]
+  } : (t = fe.hsla.exec(e)) ? {
+    h: t[1],
+    s: t[2],
+    l: t[3],
+    a: t[4]
+  } : (t = fe.hsv.exec(e)) ? {
+    h: t[1],
+    s: t[2],
+    v: t[3]
+  } : (t = fe.hsva.exec(e)) ? {
+    h: t[1],
+    s: t[2],
+    v: t[3],
+    a: t[4]
+  } : (t = fe.hex8.exec(e)) ? {
+    r: se(t[1]),
+    g: se(t[2]),
+    b: se(t[3]),
+    a: fs(t[4]),
+    format: s ? "name" : "hex8"
+  } : (t = fe.hex6.exec(e)) ? {
+    r: se(t[1]),
+    g: se(t[2]),
+    b: se(t[3]),
+    format: s ? "name" : "hex"
+  } : (t = fe.hex4.exec(e)) ? {
+    r: se(t[1] + "" + t[1]),
+    g: se(t[2] + "" + t[2]),
+    b: se(t[3] + "" + t[3]),
+    a: fs(t[4] + "" + t[4]),
+    format: s ? "name" : "hex8"
+  } : (t = fe.hex3.exec(e)) ? {
+    r: se(t[1] + "" + t[1]),
+    g: se(t[2] + "" + t[2]),
+    b: se(t[3] + "" + t[3]),
+    format: s ? "name" : "hex"
+  } : !1;
+}
+function Zo(e) {
+  var s, t;
+  return e = e || {
+    level: "AA",
+    size: "small"
+  }, s = (e.level || "AA").toUpperCase(), t = (e.size || "small").toLowerCase(), s !== "AA" && s !== "AAA" && (s = "AA"), t !== "small" && t !== "large" && (t = "small"), {
+    level: s,
+    size: t
+  };
+}
+const Jo = {
+  name: "ecs-button-context",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String,
+      default: null
+    },
+    /** Turns the button into a loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Context buttons can be used to set a specific text or annotation color on the selection. Pass any color value (HEX, RGBA). */
+    selectedColor: {
+      type: String,
+      default: null
+    },
+    /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
+    ariaLabel: {
+      type: String
+    }
+  },
+  computed: {
+    iconType() {
+      return this.loading ? "loading" : (this.icon && this.icon, this.icon);
+    },
+    iconOnly() {
+      return this.icon && !this.$slots.default;
+    },
+    colorIsDark() {
+      return this.selectedColor && this.selectedColor !== "" ? S(this.selectedColor).isDark() : null;
+    },
+    selectedColorBackground() {
+      if (this.selectedColor && this.selectedColor !== "")
+        return `background-color:${this.selectedColor};`;
+    },
+    selectedColorText() {
+      if (this.selectedColor && this.selectedColor !== "")
+        return this.colorIsDark ? {
+          color: S(this.selectedColor).lighten(65).toRgbString()
+        } : {
+          color: S(this.selectedColor).lighten(10).toRgbString()
+        };
+    }
+  },
+  mounted() {
+    this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim());
+  }
+}, Qo = ["aria-label", "aria-busy"];
+function er(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    class: v(["ecs-context-button", [t.loading ? "loading" : "", i.iconOnly ? "ecs-context-button-icon-only" : ""]]),
+    "aria-label": t.ariaLabel,
+    "aria-busy": t.loading || null,
+    style: B(i.selectedColorText),
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d))
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType,
+      size: "20"
+    }, null, 8, ["type"])) : u("", !0),
+    t.selectedColor ? (o(), l("div", {
+      key: 1,
+      class: "ecs-context-button-color",
+      style: B(i.selectedColorBackground)
+    }, null, 4)) : u("", !0),
+    m(e.$slots, "default", {}, void 0, !0),
+    b(c)
+  ], 14, Qo);
+}
+const yy = /* @__PURE__ */ _(Jo, [["render", er], ["__scopeId", "data-v-3a382207"]]);
+const tr = {
+  name: "ecs-context-button-group"
+}, sr = { class: "ecs-context-button-group" };
+function ir(e, s, t, a, n, i) {
+  return o(), l("div", sr, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const by = /* @__PURE__ */ _(tr, [["render", ir], ["__scopeId", "data-v-94a53b69"]]);
+const nr = {
+  name: "ecs-button-dialog",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String,
+      default: null
+    },
+    /** Defines the type and function of the button. If not set, the button will be neutral (used for Cancel actions). */
+    type: {
+      type: String,
+      validator: (e) => ["danger", "confirm", "cancel"].includes(e),
+      default: "cancel"
+    },
+    /** Turns the button into a loading state. */
+    loading: Boolean
+  },
+  computed: {
+    typeClass() {
+      return this.type && this.type !== "" ? `ecs-dialog-footer-button-${this.type}` : this.type;
+    },
+    iconType() {
+      return this.loading ? "loading" : this.icon;
+    }
+  }
+}, ar = ["aria-busy"];
+function or(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    class: v([[i.typeClass, t.loading ? "loading" : ""], "ecs-dialog-footer-button"]),
+    "aria-busy": t.loading || null
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType
+    }, null, 8, ["type"])) : u("", !0),
+    m(e.$slots, "default", {}, void 0, !0),
+    b(c, {
+      radius: 12,
+      danger: t.type == "danger"
+    }, null, 8, ["danger"])
+  ], 10, ar);
+}
+const ky = /* @__PURE__ */ _(nr, [["render", or], ["__scopeId", "data-v-fe031b71"]]);
+const rr = {
+  name: "ecs-button-more",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** Displays the button slightly highlighted. Should be used when the state the button triggers is currently visible. */
+    active: Boolean,
+    /** Defines the type of the button: `dropdown` shows a simple dropdown button, `ellipsis` shows a tiny (...) button, and `expand` is supposed to be used at the end of expandable lists and tables. */
+    type: {
+      type: String,
+      validator: (e) => ["dropdown", "dropdown-round", "ellipsis", "expand"].includes(e),
+      default: "dropdown"
+    },
+    /** Provide a meaningful label for the button to improve accessibility for screenreaders. */
+    ariaLabel: {
+      type: String
+    },
+    /** Disables the button and prevent pointer events. */
+    disabled: {
+      type: Boolean
+    }
+  },
+  computed: {
+    typeClass() {
+      return this.type && this.type !== "" ? `ecs-button-more-${this.type}` : this.type;
+    }
+  },
+  mounted() {
+    this.$slots.default === void 0 && (!this.ariaLabel || this.ariaLabel.trim());
+  }
+}, lr = ["aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "disabled"];
+function cr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    "aria-label": t.ariaLabel,
+    "aria-disabled": t.disabled || null,
+    "aria-expanded": t.active || null,
+    "aria-haspopup": t.type == "dropdown" || null,
+    disabled: t.disabled || null,
+    class: v([
+      t.active ? "active" : "",
+      i.typeClass
+    ])
+  }, [
+    t.type == "ellipsis" ? (o(), y(r, {
+      key: 0,
+      type: "more",
+      size: "20",
+      color: "#FFF"
+    })) : u("", !0),
+    t.type == "dropdown" || t.type == "dropdown-round" ? (o(), y(r, {
+      key: 1,
+      type: "chevron-down",
+      size: "12",
+      color: "var(--color-gray-9)"
+    })) : u("", !0),
+    t.type === "expand" ? m(e.$slots, "default", { key: 2 }, void 0, !0) : u("", !0),
+    b(c)
+  ], 10, lr);
+}
+const Ds = /* @__PURE__ */ _(rr, [["render", cr], ["__scopeId", "data-v-faa154dd"]]);
+const dr = {
+  name: "ecs-button-table",
+  emits: ["click", "mouseover", "mouseleave"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** Displays the button in an active state. */
+    active: Boolean,
+    /** Show the button without a background color. */
+    subtle: {
+      type: Boolean,
+      default: !1
+    },
+    /** Button is visually toned down (text and icon are more gray than black). */
+    pale: {
+      type: Boolean,
+      default: !1
+    },
+    /** Sets the size of the button. */
+    size: {
+      type: String,
+      validator: (e) => ["md", "sml", null].includes(e),
+      default: "md"
+    },
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    },
+    /** Text text inside the button. */
+    label: {
+      type: [String, Number]
+    },
+    /** Turns the button into disabled state, which disables all interactions and hover effects. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** If set, a small arrow will show up on the right side of the button, to indicate an collapse/expand state. The direction of the button is determined by the `active` prop. */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /** If set, the button will not show any effects that would indicate that you could interact with the button. This is usefull when the button is only used to show a specific count/label instead of triggering any actions. */
+    unreactive: {
+      type: Boolean,
+      default: !1
+    },
+    /** Turns the button into a loading state, which makes it appear disabled and replaces the default icon (if set) with a spinner. */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    hasLabel() {
+      return this.label && this.label !== "" || this.label != null ? "has-label" : this.label;
+    },
+    sizeClass() {
+      return this.size && this.size !== "" ? `ecs-button-table-${this.size}` : this.size;
+    },
+    iconSize() {
+      return this.size == "sml" ? "16" : "20";
+    },
+    iconType() {
+      return this.loading ? "loading" : this.icon;
+    },
+    ariaDisabled() {
+      return this.disabled || this.unreactive ? !0 : null;
+    }
+  }
+}, ur = ["disabled", "aria-disabled", "aria-expanded", "aria-busy"], fr = {
+  key: 1,
+  class: "button-label"
+};
+function pr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    class: v(["ecs-button-table", [
+      t.active ? "active" : "",
+      i.hasLabel,
+      t.subtle ? "subtle" : "",
+      t.pale ? "pale" : "",
+      t.unreactive ? "unreactive" : "",
+      t.loading ? "loading" : "",
+      i.sizeClass
+    ]]),
+    disabled: t.disabled || null,
+    "aria-disabled": i.ariaDisabled,
+    "aria-expanded": t.active || null,
+    "aria-busy": t.loading || null,
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    onMouseover: s[1] || (s[1] = (d) => e.$emit("mouseover", d)),
+    onMouseleave: s[2] || (s[2] = (d) => e.$emit("mouseleave", d))
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType,
+      size: i.iconSize
+    }, null, 8, ["type", "size"])) : u("", !0),
+    t.label != null ? (o(), l("div", fr, x(t.label), 1)) : u("", !0),
+    t.chevron ? (o(), l("div", {
+      key: 2,
+      class: v(["chevron", t.active ? "expand" : ""])
+    }, null, 2)) : u("", !0),
+    b(c)
+  ], 42, ur);
+}
+const Fs = /* @__PURE__ */ _(dr, [["render", pr], ["__scopeId", "data-v-f5a891fe"]]);
+const gr = {
+  name: "ecs-toolbar-button-group"
+}, mr = { class: "ecs-toolbar-button-group" };
+function hr(e, s, t, a, n, i) {
+  return o(), l("div", mr, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const Ht = /* @__PURE__ */ _(gr, [["render", hr], ["__scopeId", "data-v-743ca90b"]]);
+const vr = {
+  name: "ecs-toolbar-icon-button",
+  emits: ["click"],
+  components: { EcsIcon: M, EcsFocusRing: L },
+  props: {
+    /** The icon type of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note that only icons prefixed with `toolbar-` should be used here. */
+    icon: {
+      type: String,
+      required: !0
+    },
+    /** Renders a small secondary icon in the bottom left of the button. Should only used under special conditions, eg. to reflect a specifc state that can not be handled by the `active` prop. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    subIcon: {
+      type: String
+    },
+    /** When set, the icon is spinning. Should really only be used when the `icon` is set to `toolbar-refresh`. */
+    refresh: {
+      type: Boolean,
+      default: !1
+    },
+    /** Indicates that the button is activated. */
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    /** Show the button in loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Adds a small blue badge to the upper right of the button. */
+    hasBadge: {
+      type: Boolean,
+      default: !1
+    },
+    /** Sets the aria-label attribute to improve accessibility. */
+    ariaLabel: {
+      type: String
+      //required: true
+    }
+  },
+  computed: {
+    ariaBusy() {
+      return this.refresh || this.loading ? !0 : null;
+    }
+  }
+}, _r = ["aria-busy", "aria-label"], yr = {
+  key: 0,
+  class: "badge"
+}, br = { class: "sub-icon" };
+function kr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    "aria-busy": i.ariaBusy,
+    "aria-label": t.ariaLabel,
+    class: v(["ecs-toolbar-icon-button", [
+      t.refresh ? "refreshing" : "",
+      t.active ? "active" : "",
+      t.loading ? "loading" : ""
+    ]])
+  }, [
+    b(r, { type: t.icon }, null, 8, ["type"]),
+    t.hasBadge ? (o(), l("span", yr)) : u("", !0),
+    f("div", br, [
+      t.subIcon ? (o(), y(r, {
+        key: 0,
+        type: t.subIcon,
+        size: "14"
+      }, null, 8, ["type"])) : u("", !0)
+    ]),
+    b(c)
+  ], 10, _r);
+}
+const xy = /* @__PURE__ */ _(vr, [["render", kr], ["__scopeId", "data-v-098e1030"]]);
+const xr = {
+  name: "ecs-card",
+  emits: ["click"],
+  props: {
+    /** Unique ID */
+    id: {
+      type: [String, Number],
+      default: null
+    },
+    /** Indicates that this card is currently selected (most likely via a checkbox that is contained in the card). */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /** Indicates that this card is currently expanded. Adds a bit of spacing and a stronger shadow. */
+    expanded: {
+      type: Boolean,
+      default: !1
+    },
+    /** Determines if the card should have a :hover state. This usually applies when the card is clickable, or expandable. */
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    /** Shows a full-height progress bar in the background of the card. Should only be used for single row cards. Pass the current percentage value as `Number`. */
+    progress: {
+      type: Number,
+      default: null
+    },
+    /** Turns the whole card into a disabled state. This also blocks all interactions on card content. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    itemId() {
+      return `item-${this.id}`;
+    }
+  }
+}, wr = ["id"], Sr = { class: "ecs-card-inner" }, Cr = { class: "ecs-card-background" };
+function Br(e, s, t, a, n, i) {
+  return o(), l("div", {
+    onClick: s[0] || (s[0] = (r) => e.$emit("click", r)),
+    class: v(["ecs-card", [
+      t.selected ? "ecs-card-selected" : "",
+      t.expanded ? "ecs-card-expanded" : "",
+      t.hover ? "ecs-card-hover" : "",
+      t.disabled ? "ecs-card-disabled" : ""
+    ]]),
+    id: i.itemId
+  }, [
+    f("div", Sr, [
+      m(e.$slots, "default", {}, void 0, !0)
+    ]),
+    f("div", Cr, [
+      t.progress ? (o(), l("div", {
+        key: 0,
+        class: "progress",
+        style: B({ width: t.progress + "%" })
+      }, null, 4)) : u("", !0)
+    ])
+  ], 10, wr);
+}
+const wy = /* @__PURE__ */ _(xr, [["render", Br], ["__scopeId", "data-v-8d449816"]]);
+const zr = {
+  name: "ecs-citation-line",
+  emits: ["change", "blur", "focus"],
+  components: { EcsFlexRow: Me },
+  props: {
+    /** The citation range text. */
+    cite: {
+      type: String,
+      required: !0
+    },
+    /** Unique citation ID */
+    id: {
+      type: [String, Number],
+      required: !0
+    },
+    /** Determines the visual state of the citation line. */
+    state: {
+      type: String,
+      validator: (e) => ["default", "error", "warning", "edited", "skipped"].includes(e),
+      default: "default"
+    },
+    /** Makes the content of the citation line editable. */
+    editable: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      citeValue: this.cite
+    };
+  },
+  mounted() {
+    this.$refs.editable.innerText = this.citeValue;
+  },
+  methods: {
+    onInput(e) {
+      this.citeValue = e.target.innerText, this.$emit("change", this.citeValue, this.id);
+    }
+  }
+}, Ir = ["contenteditable"];
+function Er(e, s, t, a, n, i) {
+  const r = p("ecs-flex-row");
+  return o(), y(r, { class: "ecs-citation-line" }, {
+    default: w(() => [
+      f("div", {
+        class: v(["ecs-citation-line-cite", [t.state, t.editable ? "editable" : ""]]),
+        ref: "editable",
+        onKeyup: s[0] || (s[0] = (...c) => i.onInput && i.onInput(...c)),
+        onBlur: s[1] || (s[1] = (c) => e.$emit("blur", c)),
+        onFocus: s[2] || (s[2] = (c) => e.$emit("focus", c)),
+        onKeydown: s[3] || (s[3] = G(U(() => {
+        }, ["prevent"]), ["enter"])),
+        contenteditable: t.editable
+      }, null, 42, Ir),
+      e.$slots.actions ? (o(), y(r, {
+        key: 0,
+        justify: "end",
+        class: "ecs-citation-line-actions"
+      }, {
+        default: w(() => [
+          m(e.$slots, "actions", {}, void 0, !0)
+        ]),
+        _: 3
+      })) : u("", !0)
+    ]),
+    _: 3
+  });
+}
+const Sy = /* @__PURE__ */ _(zr, [["render", Er], ["__scopeId", "data-v-cfd8e718"]]);
+var qt = {};
+Object.defineProperty(qt, "__esModule", {
+  value: !0
+});
+var $r = qt.clickOutSide = {
+  mounted: function(s, t, a) {
+    s.clickOutsideEvent = function(n) {
+      s == n.target || s.contains(n.target) || t.value(n, s);
+    }, document.addEventListener("click", s.clickOutsideEvent);
+  },
+  unmounted: function(s) {
+    document.removeEventListener("click", s.clickOutsideEvent);
+  }
+}, Pr = qt.default = $r;
+const Tr = {
+  name: "ecs-context-menu",
+  emits: ["option-clicked", "menu-closed"],
+  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: Se },
+  directives: {
+    clickOutSide: Pr
+  },
+  props: {
+    /** Unique String that acts as the id for the menu. */
+    elementId: {
+      type: String,
+      required: !0
+    },
+    /** Array of menu options to show. Component will use the `name` parameter as the label. Array needs to contain objects with the following structure:
+    ```{
+      name: 'Duplicate',
+      slug: 'duplicate',
+      icon: 'evidence',
+      disabled: false,
+      type: '',
+      nested: { ... }
+    }``` */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      item: null,
+      menuWidth: null,
+      menuHeight: null,
+      opened: !1,
+      left: 0,
+      top: 0
+    };
+  },
+  computed: {
+    postionStyles() {
+      return { left: this.left + "px", top: this.top + "px" };
+    }
+  },
+  methods: {
+    showMenu(e, s) {
+      this.item = s;
+      let t = document.getElementById(this.elementId);
+      t && ((!this.menuWidth || !this.menuHeight) && (t.style.visibility = "hidden", t.style.display = "block", this.menuWidth = t.offsetWidth, this.menuHeight = t.offsetHeight, t.removeAttribute("style")), this.menuWidth + e.pageX >= window.innerWidth ? this.left = e.pageX - this.menuWidth + 2 : this.left = e.pageX - 2, this.menuHeight + e.pageY >= window.innerHeight ? this.top = e.pageY - this.menuHeight + 2 : this.top = e.pageY - 2, this.opened = !0, this.$emit("menu-opened", this.item), this.$nextTick(() => {
+        this.$refs.menu.focus();
+      }));
+    },
+    hideContextMenu() {
+      document.getElementById(this.elementId) && (this.opened = !1, this.$emit("menu-closed"));
+    },
+    onClickOutside() {
+      this.hideContextMenu();
+    },
+    optionClicked(e) {
+      this.hideContextMenu(), this.$emit("option-clicked", {
+        item: this.item,
+        option: e
+      });
+    },
+    onEscKeyRelease(e) {
+      e.keyCode === 27 && this.hideContextMenu();
+    },
+    // Focus the first menu item when the context menu opens
+    focusFirst() {
+      this.$refs.menu.children[0].focus();
+    },
+    // Focus the last menu item when the user presses the up arrow key on the first menu item
+    focusLast() {
+      const e = this.$refs.menu.children;
+      e[e.length - 1].focus();
+    },
+    // Focus the previous menu item when the user presses the up arrow key
+    focusPrevious(e) {
+      const s = this.$refs.menu.children, t = Array.prototype.indexOf.call(s, e.target);
+      if (t > 0) {
+        let a = t - 1;
+        for (; a >= 0 && s[a].getAttribute("tabindex") === "-1"; )
+          a--;
+        a >= 0 ? s[a].focus() : this.focusLast();
+      } else
+        this.focusLast();
+    },
+    focusNext(e) {
+      const s = this.$refs.menu.children;
+      let t = Array.prototype.indexOf.call(s, e.target);
+      for (; t < s.length - 1; )
+        if (t++, s[t].getAttribute("tabindex") !== "-1") {
+          s[t].focus();
+          return;
+        }
+      this.focusFirst();
+    }
+  },
+  mounted() {
+    document.body.addEventListener("keyup", this.onEscKeyRelease), this.$refs.menu.addEventListener("keydown", (e) => {
+      e.keyCode === 9 && (e.preventDefault(), this.focusFirst());
+    });
+  },
+  beforeUnmount() {
+    document.removeEventListener("keyup", this.onEscKeyRelease);
+  }
+}, Mr = ["id"], Lr = ["onClick", "role", "tabindex", "aria-disabled"], Or = { key: 1 };
+function Ar(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-button"), d = p("ecs-focus-ring"), g = oi("click-out-side");
+  return Ue((o(), l("div", {
+    class: v(["ecs-context-menu", n.opened ? " opened" : ""]),
+    id: t.elementId,
+    style: B([i.postionStyles])
+  }, [
+    f("ul", {
+      role: "menu",
+      "aria-orientation": "vertical",
+      tabindex: "0",
+      onKeydown: [
+        s[0] || (s[0] = G(U((...h) => i.focusPrevious && i.focusPrevious(...h), ["prevent"]), ["up"])),
+        s[1] || (s[1] = G(U((...h) => i.focusNext && i.focusNext(...h), ["prevent"]), ["down"]))
+      ],
+      ref: "menu",
+      id: "my-menu"
+    }, [
+      (o(!0), l(Z, null, ge(t.options, (h, k) => (o(), l("li", {
+        key: k,
+        onClick: U((z) => i.optionClicked(h), ["stop"]),
+        role: h.type === "divider" ? "separator" : "menuitem",
+        tabindex: h.type === "divider" || h.disabled ? "-1" : "0",
+        "aria-disabled": h.disabled || null,
+        class: v([
+          h.type === "divider" ? "ecs-context-menu-divider" : "ecs-context-menu-item",
+          h.type === "danger" ? "danger" : "",
+          h.disabled ? "disabled" : ""
+        ])
+      }, [
+        h.icon ? (o(), y(r, {
+          key: 0,
+          type: h.icon,
+          size: "20"
+        }, null, 8, ["type"])) : u("", !0),
+        h.type != "divider" ? (o(), l("span", Or, x(h.name), 1)) : u("", !0),
+        h.nested ? (o(), y(c, {
+          key: 2,
+          onClick: U((z) => i.optionClicked(h.nested), ["stop"]),
+          icon: h.nested.icon,
+          title: h.nested.name,
+          "aria-label": h.nested.name,
+          disabled: h.nested.disabled || null,
+          type: "secondary",
+          "icon-only": "",
+          size: "sml"
+        }, null, 8, ["onClick", "icon", "title", "aria-label", "disabled"])) : u("", !0),
+        b(d, {
+          danger: h.type == "danger"
+        }, null, 8, ["danger"])
+      ], 10, Lr))), 128))
+    ], 544)
+  ], 14, Mr)), [
+    [g, i.onClickOutside]
+  ]);
+}
+const Cy = /* @__PURE__ */ _(Tr, [["render", Ar], ["__scopeId", "data-v-7a99d0e5"]]);
+const Nr = {
+  name: "ecs-collapse",
+  emits: ["toggled", "remove"],
+  components: { EcsButton: Se, EcsFocusRing: L, EcsFlexRow: Me },
+  props: {
+    /** Unique ID, is required to handle persist states. */
+    id: {
+      type: String,
+      required: !0
+    },
+    /** The headline of the collapse control. */
+    title: {
+      type: String,
+      required: !0
+    },
+    /** Determines the padding of the headline and content sections. */
+    indent: {
+      type: String,
+      validator: (e) => ["sml", "md", null].includes(e),
+      default: null
+    },
+    /** Determines the padding of the headline section alone. */
+    headlineIndent: {
+      type: String,
+      validator: (e) => ["sml", "md", null].includes(e),
+      default: null
+    },
+    /** Displays a border above the headline section. */
+    borderTop: {
+      type: Boolean
+    },
+    /** Displays a border below the content section. */
+    borderBottom: {
+      type: Boolean
+    },
+    /** Makes the headline to render in font-weight bold. */
+    headlineBold: {
+      type: Boolean
+    },
+    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
+    visible: {
+      type: Boolean
+    },
+    /** If set, a small (-) remove button is rendered in the headline section. */
+    removable: {
+      type: Boolean
+    },
+    /** Sets the tooltip title of the remove button. */
+    removableTooltip: {
+      type: String
+    },
+    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
+    persist: {
+      type: Boolean,
+      default: !0
+    },
+    /** Sets the top and bottom padding of the content section. */
+    contentPadding: {
+      type: String,
+      validator: (e) => ["none", "sml", "md"].includes(e),
+      default: "md"
+    },
+    /** Sets the count of the collapse control in parenthese next to the headline. */
+    count: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      isVisible: this.visible
+    };
+  },
+  computed: {
+    indentation() {
+      return this.indent && this.indent !== "" ? `ecs-collapsable-indent-${this.indent}` : this.indent;
+    },
+    headlineIndentation() {
+      return this.headlineIndent && this.headlineIndent !== "" ? `ecs-collapsable-headline-indent-${this.headlineIndent}` : this.headlineIndent;
+    },
+    removeButtonIndentation() {
+      return this.headlineIndent && this.headlineIndent !== "" ? `remove-button-indent-${this.headlineIndent}` : this.indent && this.indent !== "" ? `remove-button-indent-${this.indent}` : this.headlineIndent;
+    },
+    contentPaddingClass() {
+      return `ecs-collapsable-content-padding-${this.contentPadding}`;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.persist && (localStorage.getItem(`collapse-${this.id}`) === null ? (this.isVisible = this.visible, localStorage.setItem(`collapse-${this.id}`, this.isVisible)) : this.isVisible = localStorage.getItem(`collapse-${this.id}`) == "true");
+    });
+  },
+  methods: {
+    toggleCollapse() {
+      this.isVisible = !this.isVisible, this.persist && localStorage.setItem(`collapse-${this.id}`, this.isVisible), this.$emit("toggled", this.id, this.isVisible);
+    }
+  },
+  watch: {
+    visible() {
+      this.isVisible = this.visible;
+    }
+  }
+}, Dr = { class: "wrap" }, Fr = ["aria-expanded", "aria-controls"], Rr = {
+  key: 0,
+  class: "ecs-collapsable-headline-count"
+}, Vr = {
+  key: 0,
+  class: "ecs-collapsable-headline-controls"
+}, Hr = ["id", "aria-hidden"];
+function qr(e, s, t, a, n, i) {
+  const r = p("ecs-button"), c = p("ecs-flex-row"), d = p("ecs-focus-ring");
+  return o(), l("div", {
+    class: v(["ecs-collapsable", [
+      t.borderTop ? "ecs-collapsable-border-top" : "",
+      t.borderBottom ? "ecs-collapsable-border-bottom" : "",
+      i.indentation,
+      i.headlineIndentation
+    ]])
+  }, [
+    f("div", Dr, [
+      t.removable ? (o(), y(r, {
+        key: 0,
+        onClick: s[0] || (s[0] = (g) => e.$emit("remove", t.id)),
+        type: "secondary",
+        "icon-only": "",
+        icon: "minus",
+        size: "sml",
+        class: v(["remove-button", i.removeButtonIndentation]),
+        title: t.removableTooltip,
+        "aria-label": t.removableTooltip
+      }, null, 8, ["class", "title", "aria-label"])) : u("", !0),
+      f("h3", {
+        onClick: s[1] || (s[1] = (...g) => i.toggleCollapse && i.toggleCollapse(...g)),
+        onKeydown: s[2] || (s[2] = G(U((...g) => i.toggleCollapse && i.toggleCollapse(...g), ["prevent"]), ["space"])),
+        role: "button",
+        class: v(["ecs-collapsable-headline", [t.headlineBold ? "ecs-headline-section-bold" : "ecs-headline-section", n.isVisible ? "" : "collapsed"]]),
+        tabindex: "0",
+        "aria-expanded": n.isVisible ? "true" : "false",
+        "aria-controls": `collapse-${this.id}`
+      }, [
+        b(c, { gap: 4 }, {
+          default: w(() => [
+            D(x(t.title) + " ", 1),
+            t.count ? (o(), l("span", Rr, "(" + x(t.count) + ")", 1)) : u("", !0)
+          ]),
+          _: 1
+        }),
+        b(d, {
+          inset: 0,
+          radius: 0
+        }),
+        e.$slots.controls ? (o(), l("div", Vr, [
+          m(e.$slots, "controls", {}, void 0, !0)
+        ])) : u("", !0)
+      ], 42, Fr)
+    ]),
+    f("div", {
+      class: v([n.isVisible ? "collapse-show" : "collapse-hide", "collapse"]),
+      id: `collapse-${this.id}`,
+      "aria-hidden": n.isVisible ? "false" : "true"
+    }, [
+      f("div", {
+        class: v(["ecs-collapsable-content", i.contentPaddingClass])
+      }, [
+        m(e.$slots, "default", {}, void 0, !0)
+      ], 2)
+    ], 10, Hr)
+  ], 2);
+}
+const By = /* @__PURE__ */ _(Nr, [["render", qr], ["__scopeId", "data-v-4bf981c8"]]);
+const Wr = {
+  name: "ecs-collection-control",
+  emits: ["toggled", "collectionTooltip"],
+  components: { EcsIcon: M, EcsFocusRing: L },
+  mixins: [de],
+  props: {
+    /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    },
+    /** The size of the collection control. */
+    size: {
+      type: String,
+      validator: (e) => ["md", "lg"].includes(e),
+      default: "lg"
+    },
+    /** If set to true, the control will appear expanded by default. */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /** The label that describes the type of selected objects. E.g. "Users: " */
+    label: {
+      type: String
+    },
+    /** Option to disable the outer borders of the control. */
+    noBorder: {
+      type: Boolean,
+      default: !1
+    },
+    /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
+    collection: {
+      type: Array,
+      required: !0
+    },
+    /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
+    maxHeight: {
+      type: Number,
+      default: null
+    },
+    /** Makes the control non-interactive and removes all checkboxes from the list items. */
+    nonInteractive: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      isVisible: this.visible,
+      expandId: ""
+    };
+  },
+  computed: {
+    iconSize() {
+      return this.size === "md" ? "24px" : "30px";
+    },
+    fullTooltip() {
+      return this.collection.filter((s) => s.value).map((s) => s.name).join(", ");
+    },
+    listMaxHeight() {
+      return this.maxHeight ? `max-height: ${this.maxHeight}px` : null;
+    }
+  },
+  methods: {
+    toggleCollapse() {
+      this.nonInteractive || (this.isVisible = !this.isVisible), this.$emit("toggled", this.id, this.isVisible);
+    },
+    toggleTooltip() {
+      this.$emit("collectionTooltip", this.fullTooltip);
+    }
+  },
+  watch: {
+    visible() {
+      this.isVisible = this.visible;
+    }
+  },
+  created() {
+    this.expandId = this.generateUniqueId();
+  }
+}, jr = ["tabindex", "role", "aria-expanded", "aria-controls"], Ur = {
+  key: 1,
+  class: "description"
+}, Gr = ["title"], Kr = { key: 0 }, Yr = ["id", "aria-hidden"];
+function Xr(e, s, t, a, n, i) {
+  const r = p("ecs-focus-ring"), c = p("ecs-icon");
+  return o(), l("div", {
+    class: v(["ecs-collection-control", [
+      t.noBorder ? "" : "bordered",
+      n.isVisible || t.nonInteractive ? "" : "collapsed",
+      t.size
+    ]])
+  }, [
+    f("div", {
+      onClick: s[2] || (s[2] = (...d) => i.toggleCollapse && i.toggleCollapse(...d)),
+      onKeydown: [
+        s[3] || (s[3] = G(U((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["enter"])),
+        s[4] || (s[4] = G(U((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["space"]))
+      ],
+      class: v(["ecs-collection-control-header", [
+        n.isVisible || t.nonInteractive ? "" : "collapsed",
+        t.nonInteractive ? "" : "interactive"
+      ]]),
+      tabindex: t.nonInteractive ? "-1" : "0",
+      role: t.nonInteractive ? !1 : "button",
+      "aria-expanded": t.nonInteractive ? "false" : n.isVisible ? "true" : "false",
+      "aria-controls": t.nonInteractive ? !1 : n.expandId
+    }, [
+      b(r),
+      t.icon ? (o(), y(c, {
+        key: 0,
+        type: t.icon,
+        color: "#858E9E",
+        size: i.iconSize
+      }, null, 8, ["type", "size"])) : u("", !0),
+      t.label ? (o(), l("div", Ur, x(t.label), 1)) : u("", !0),
+      f("div", {
+        class: "collection",
+        onMouseover: s[0] || (s[0] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
+        onMouseleave: s[1] || (s[1] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
+        title: i.fullTooltip
+      }, [
+        (o(!0), l(Z, null, ge(t.collection, (d) => (o(), l("span", {
+          key: d.name
+        }, [
+          d.value ? (o(), l("span", Kr, x(d.name), 1)) : u("", !0)
+        ]))), 128))
+      ], 40, Gr)
+    ], 42, jr),
+    f("div", {
+      class: v([n.isVisible || t.nonInteractive ? "collapse-show" : "collapse-hide", "collapse"]),
+      id: t.nonInteractive ? !1 : n.expandId,
+      "aria-hidden": n.isVisible ? "false" : "true"
+    }, [
+      f("div", {
+        class: "ecs-collection-control-list scrollbar scrollbar-sml",
+        style: B(i.listMaxHeight)
+      }, [
+        m(e.$slots, "default")
+      ], 4)
+    ], 10, Yr)
+  ], 2);
+}
+const zy = /* @__PURE__ */ _(Wr, [["render", Xr], ["__scopeId", "data-v-5e5716bc"]]);
+const Zr = {
+  name: "ecs-skeleton-loader",
+  props: {
+    /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
+    type: {
+      type: String,
+      validator: (e) => ["single", "multi", "rect", "circle"].includes(e),
+      default: "single"
+    },
+    /** Only used together with the `multi` type. Determines the amount of text lines. */
+    count: {
+      type: Number,
+      default: 3
+    },
+    /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
+    width: {
+      type: Number,
+      default: 20
+    },
+    /** Sets the height of the `rect` and `circle` type in pixels. */
+    height: {
+      type: Number,
+      default: 20
+    },
+    /** Aligns the height and size of the single & multi types with our common line-height type scales. */
+    lineHeight: {
+      type: Number,
+      validator: (e) => [1, 2, 3, 4, 5, 6].includes(e),
+      default: 2
+    }
+  },
+  computed: {
+    rectClass() {
+      return this.type && this.type !== "" ? `skeleton-${this.type}` : this.type;
+    }
+  }
+}, Jr = (e) => (ve("data-v-75354c78"), e = e(), _e(), e), Qr = {
+  key: 1,
+  class: "ecs-skeleton skeletons"
+}, el = /* @__PURE__ */ Jr(() => /* @__PURE__ */ f("div", { class: "skeleton skeleton-single" }, null, -1)), tl = [
+  el
+];
+function sl(e, s, t, a, n, i) {
+  return t.type === "rect" || t.type === "circle" ? (o(), l("div", {
+    key: 0,
+    class: v(["ecs-skeleton skeleton", i.rectClass]),
+    style: B({ width: t.width + "px", height: t.height + "px" })
+  }, null, 6)) : t.type === "multi" ? (o(), l("div", Qr, [
+    (o(!0), l(Z, null, ge(parseInt(t.count), (r) => (o(), l("div", {
+      key: r,
+      class: v(["skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
+    }, tl, 2))), 128))
+  ])) : (o(), l("div", {
+    key: 2,
+    class: v(["ecs-skeleton skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
+  }, [
+    f("div", {
+      class: "skeleton skeleton-single",
+      style: B({ width: t.width + "%" })
+    }, null, 4)
+  ], 2));
+}
+const Ce = /* @__PURE__ */ _(Zr, [["render", sl], ["__scopeId", "data-v-75354c78"]]);
+const il = {
+  name: "ecs-formatted",
+  components: { EcsSkeletonLoader: Ce },
+  mixins: [de],
+  props: {
+    /** Sets the general font size of the formatted text component to small. */
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    /** Turns the formatted text component into a skeleton loader. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Used to customize the line count of the skeleton loader. */
+    skeletonCount: {
+      type: Number,
+      default: 4
+    }
+  },
+  created() {
+    this.formattedId = this.generateUniqueId();
+  },
+  mounted() {
+    this.$el.querySelectorAll(`#${this.formattedId} a`).forEach((s) => {
+      const t = s.getAttribute("href");
+      s.setAttribute("title", `Open ${t}`);
+    });
+  }
+}, nl = ["id"];
+function al(e, s, t, a, n, i) {
+  const r = p("ecs-skeleton-loader");
+  return o(), l("div", {
+    class: v(["ecs-formatted", [t.small ? "ecs-formatted-sml" : ""]]),
+    id: e.formattedId
+  }, [
+    t.loading ? (o(), y(r, {
+      key: 1,
+      type: "multi",
+      "line-height": t.small ? 1 : 2,
+      count: t.skeletonCount
+    }, null, 8, ["line-height", "count"])) : m(e.$slots, "default", {
+      key: 0,
+      ref: "slot"
+    })
+  ], 10, nl);
 }
-function _l(e) {
-  e = e.replace(Xr, "").replace(Zr, "").toLowerCase();
-  var s = !1;
-  if ($t[e])
-    e = $t[e], s = !0;
-  else if (e == "transparent")
-    return {
-      r: 0,
-      g: 0,
-      b: 0,
-      a: 0,
-      format: "name"
-    };
-  var t;
-  return (t = fe.rgb.exec(e)) ? {
-    r: t[1],
-    g: t[2],
-    b: t[3]
-  } : (t = fe.rgba.exec(e)) ? {
-    r: t[1],
-    g: t[2],
-    b: t[3],
-    a: t[4]
-  } : (t = fe.hsl.exec(e)) ? {
-    h: t[1],
-    s: t[2],
-    l: t[3]
-  } : (t = fe.hsla.exec(e)) ? {
-    h: t[1],
-    s: t[2],
-    l: t[3],
-    a: t[4]
-  } : (t = fe.hsv.exec(e)) ? {
-    h: t[1],
-    s: t[2],
-    v: t[3]
-  } : (t = fe.hsva.exec(e)) ? {
-    h: t[1],
-    s: t[2],
-    v: t[3],
-    a: t[4]
-  } : (t = fe.hex8.exec(e)) ? {
-    r: se(t[1]),
-    g: se(t[2]),
-    b: se(t[3]),
-    a: fs(t[4]),
-    format: s ? "name" : "hex8"
-  } : (t = fe.hex6.exec(e)) ? {
-    r: se(t[1]),
-    g: se(t[2]),
-    b: se(t[3]),
-    format: s ? "name" : "hex"
-  } : (t = fe.hex4.exec(e)) ? {
-    r: se(t[1] + "" + t[1]),
-    g: se(t[2] + "" + t[2]),
-    b: se(t[3] + "" + t[3]),
-    a: fs(t[4] + "" + t[4]),
-    format: s ? "name" : "hex8"
-  } : (t = fe.hex3.exec(e)) ? {
-    r: se(t[1] + "" + t[1]),
-    g: se(t[2] + "" + t[2]),
-    b: se(t[3] + "" + t[3]),
-    format: s ? "name" : "hex"
-  } : !1;
+const Rs = /* @__PURE__ */ _(il, [["render", al]]);
+const ol = {
+  name: "ecs-comment",
+  emits: ["edit", "delete"],
+  components: { EcsAvatar: Mi, EcsButton: Se, EcsFormatted: Rs, EcsSkeletonLoader: Ce },
+  props: {
+    /** Name of the user that is the comment author. */
+    userName: {
+      type: String,
+      required: !0
+    },
+    /** Avatar image of the user that is the comment author. */
+    userImage: {
+      type: String,
+      default: null
+    },
+    /** Determines if controls to edit or delete the comment should be available. */
+    canEdit: {
+      type: Boolean,
+      default: !1
+    },
+    /** Shows the whole comment in skeleton loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  }
+}, rl = ["aria-busy"], ll = { class: "ecs-comment-header" }, cl = { class: "ecs-comment-autor" }, dl = {
+  key: 2,
+  class: "ecs-comment-meta"
+}, ul = { class: "ecs-comment-meta-name" }, fl = { class: "ecs-comment-meta-time" }, pl = {
+  key: 3,
+  class: "ecs-comment-meta loading"
+}, gl = {
+  key: 0,
+  class: "ecs-comment-actions"
+}, ml = {
+  key: 2,
+  class: "ecs-comment-edit"
+};
+function hl(e, s, t, a, n, i) {
+  const r = p("ecs-skeleton-loader"), c = p("ecs-avatar"), d = p("ecs-button"), g = p("ecs-formatted");
+  return o(), l("div", {
+    class: "ecs-comment",
+    role: "comment",
+    "aria-busy": t.loading || null
+  }, [
+    f("div", ll, [
+      f("div", cl, [
+        t.loading ? (o(), y(r, {
+          key: 0,
+          type: "circle",
+          width: 32,
+          height: 32
+        })) : (o(), y(c, {
+          key: 1,
+          name: t.userName,
+          image: t.userImage,
+          size: 32,
+          rounded: ""
+        }, null, 8, ["name", "image"])),
+        t.loading ? (o(), l("div", pl, [
+          b(r, {
+            type: "single",
+            "line-height": 3,
+            width: 50
+          }),
+          b(r, {
+            type: "single",
+            "line-height": 2,
+            width: 60
+          })
+        ])) : (o(), l("div", dl, [
+          f("span", ul, x(t.userName), 1),
+          f("span", fl, [
+            m(e.$slots, "commentdate", {}, void 0, !0)
+          ])
+        ]))
+      ]),
+      t.canEdit ? (o(), l("div", gl, [
+        b(d, {
+          onClick: s[0] || (s[0] = (h) => e.$emit("edit", h)),
+          type: "secondary",
+          size: "sml",
+          icon: "edit",
+          "icon-only": "",
+          title: "Edit Comment"
+        }),
+        b(d, {
+          onClick: s[1] || (s[1] = (h) => e.$emit("delete", h)),
+          type: "danger",
+          size: "sml",
+          icon: "delete",
+          "icon-only": "",
+          title: "Delete Comment"
+        })
+      ])) : u("", !0)
+    ]),
+    !e.$slots.editform && !t.loading ? (o(), y(g, {
+      key: 0,
+      class: "ecs-comment-body"
+    }, {
+      default: w(() => [
+        m(e.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    })) : t.loading ? (o(), y(r, {
+      key: 1,
+      type: "multi",
+      count: 2,
+      class: "ecs-comment-body"
+    })) : (o(), l("div", ml, [
+      m(e.$slots, "editform", {}, void 0, !0)
+    ]))
+  ], 8, rl);
 }
-function yl(e) {
-  var s, t;
-  return e = e || {
-    level: "AA",
-    size: "small"
-  }, s = (e.level || "AA").toUpperCase(), t = (e.size || "small").toLowerCase(), s !== "AA" && s !== "AAA" && (s = "AA"), t !== "small" && t !== "large" && (t = "small"), {
-    level: s,
-    size: t
-  };
+const Iy = /* @__PURE__ */ _(ol, [["render", hl], ["__scopeId", "data-v-cf696f66"]]);
+const vl = {}, _l = { class: "ecs-comment-list" };
+function yl(e, s) {
+  return o(), l("div", _l, [
+    m(e.$slots, "default")
+  ]);
 }
-function wt(e = {}, s = 0) {
+const Ey = /* @__PURE__ */ _(vl, [["render", yl]]);
+function St(e = {}, s = 0) {
   const t = e && e.a;
   let a;
   e && e.hsl ? a = S(e.hsl) : e && e.hex && e.hex.length > 0 ? a = S(e.hex) : e && e.hsv ? a = S(e.hsv) : e && e.rgba ? a = S(e.rgba) : e && e.rgb ? a = S(e.rgb) : a = S(e), a && (a._a === void 0 || a._a === null) && a.setAlpha(t || 1);
@@ -5597,7 +5604,7 @@ const bl = {
   props: ["modelValue"],
   data() {
     return {
-      val: wt(this.modelValue)
+      val: St(this.modelValue)
     };
   },
   computed: {
@@ -5612,12 +5619,12 @@ const bl = {
   },
   watch: {
     modelValue(e) {
-      this.val = wt(e);
+      this.val = St(e);
     }
   },
   methods: {
     colorChange(e, s) {
-      this.oldHue = this.colors.hsl.h, this.colors = wt(e, s || this.oldHue);
+      this.oldHue = this.colors.hsl.h, this.colors = St(e, s || this.oldHue);
     },
     isValidHex(e) {
       return S(e).isValid();
@@ -5704,7 +5711,7 @@ const kl = {
 }, xl = { class: "ecs-editable-input" }, wl = ["aria-labelledby"], Sl = ["for", "id"], Cl = { class: "ecs-input__desc" };
 function Bl(e, s, t, a, n, i) {
   return o(), l("div", xl, [
-    Ge(f("input", {
+    Ue(f("input", {
       "aria-labelledby": i.labelId,
       class: "ecs-input__input",
       "onUpdate:modelValue": s[0] || (s[0] = (r) => i.val = r),
@@ -5727,7 +5734,7 @@ var Il = El;
 function El(e, s, t) {
   return s < t ? e < s ? s : e > t ? t : e : e < t ? t : e > s ? s : e;
 }
-const St = /* @__PURE__ */ xs(Il);
+const ct = /* @__PURE__ */ xs(Il);
 function $l(e) {
   var s = typeof e;
   return e != null && (s == "object" || s == "function");
@@ -5744,7 +5751,7 @@ var Vl = Rl, Hl = Vl, ql = /^\s+/;
 function Wl(e) {
   return e && e.slice(0, Hl(e) + 1).replace(ql, "");
 }
-var jl = Wl, Gl = Vs, Ul = Gl.Symbol, Hs = Ul, ps = Hs, qs = Object.prototype, Kl = qs.hasOwnProperty, Yl = qs.toString, Xe = ps ? ps.toStringTag : void 0;
+var jl = Wl, Ul = Vs, Gl = Ul.Symbol, Hs = Gl, ps = Hs, qs = Object.prototype, Kl = qs.hasOwnProperty, Yl = qs.toString, Xe = ps ? ps.toStringTag : void 0;
 function Xl(e) {
   var s = Kl.call(e, Xe), t = e[Xe];
   try {
@@ -5851,7 +5858,8 @@ const Lc = /* @__PURE__ */ xs(Mc);
 const Oc = {
   name: "Saturation",
   props: {
-    modelValue: Object
+    modelValue: Object,
+    preventUnusable: Boolean
   },
   computed: {
     colors() {
@@ -5883,7 +5891,7 @@ const Oc = {
       const t = this.$refs.container;
       if (!t)
         return;
-      const a = t.clientWidth, n = t.clientHeight, i = t.getBoundingClientRect().left + window.pageXOffset, r = t.getBoundingClientRect().top + window.pageYOffset, c = e.pageX || (e.touches ? e.touches[0].pageX : 0), d = e.pageY || (e.touches ? e.touches[0].pageY : 0), g = St(c - i, 0, a), h = St(d - r, 0, n), k = g / a, z = St(-(h / n) + 1, 0, 1);
+      const a = t.clientWidth, n = t.clientHeight, i = t.getBoundingClientRect().left + window.pageXOffset, r = t.getBoundingClientRect().top + window.pageYOffset, c = e.pageX || (e.touches ? e.touches[0].pageX : 0), d = e.pageY || (e.touches ? e.touches[0].pageY : 0), g = ct(c - i, 0, a), h = this.preventUnusable ? ct(d - r, n * 0.1, n * 0.85) : ct(d - r, 0, n), k = g / a, z = ct(-(h / n) + 1, 0, 1);
       this.throttle(this.onChange, {
         h: this.colors.hsv.h,
         s: k,
@@ -5995,7 +6003,7 @@ const Hc = {
 }, qc = ["aria-valuenow"], Wc = /* @__PURE__ */ f("div", { class: "ecs-hue-picker" }, null, -1), jc = [
   Wc
 ];
-function Gc(e, s, t, a, n, i) {
+function Uc(e, s, t, a, n, i) {
   return o(), l("div", {
     class: v(["ecs-hue", i.directionClass])
   }, [
@@ -6018,7 +6026,7 @@ function Gc(e, s, t, a, n, i) {
     ], 40, qc)
   ], 2);
 }
-const Uc = /* @__PURE__ */ _(Hc, [["render", Gc]]);
+const Gc = /* @__PURE__ */ _(Hc, [["render", Uc]]);
 const Bt = {}, Kc = {
   name: "Checkboard",
   props: {
@@ -6144,7 +6152,7 @@ const ad = {
   mixins: [bl],
   components: {
     saturation: Vc,
-    hue: Uc,
+    hue: Gc,
     alpha: nd,
     "ed-in": zl,
     checkboard: Ws
@@ -6175,6 +6183,11 @@ const ad = {
     padding: {
       type: Number,
       default: 0
+    },
+    /** Prevents the user from selecting a color that is too bright or too dark. It will only block the selection on the saturation drag field, a user can still enter a value via the fields (consider disabling the field), or a preset swatch. */
+    preventUnusableColors: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
@@ -6242,8 +6255,9 @@ function yd(e, s, t, a, n, i) {
       b(r, {
         modelValue: e.colors,
         "onUpdate:modelValue": s[0] || (s[0] = (k) => e.colors = k),
-        onChange: i.childChange
-      }, null, 8, ["modelValue", "onChange"])
+        onChange: i.childChange,
+        "prevent-unusable": t.preventUnusableColors
+      }, null, 8, ["modelValue", "onChange", "prevent-unusable"])
     ])),
     t.disableCustom ? u("", !0) : (o(), l("div", rd, [
       f("div", ld, [
@@ -6374,6 +6388,11 @@ const kd = {
     disableCustom: {
       type: Boolean,
       default: !1
+    },
+    /** Prevents the user from selecting a color that is too bright or too dark. It will only block the selection on the saturation drag field, a user can still enter a value via the fields (consider disabling the field), or a preset swatch. */
+    preventUnusableColors: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
@@ -6398,8 +6417,9 @@ function xd(e, s, t, a, n, i) {
         padding: 16,
         disableAlpha: t.disableAlpha,
         disableFields: t.disableFields,
-        disableCustom: t.disableCustom
-      }, null, 8, ["modelValue", "swatches", "disableAlpha", "disableFields", "disableCustom"])
+        disableCustom: t.disableCustom,
+        preventUnusableColors: t.preventUnusableColors
+      }, null, 8, ["modelValue", "swatches", "disableAlpha", "disableFields", "disableCustom", "preventUnusableColors"])
     ]),
     default: w(() => [
       f("button", {
@@ -6412,10 +6432,10 @@ function xd(e, s, t, a, n, i) {
     _: 1
   });
 }
-const $y = /* @__PURE__ */ _(kd, [["render", xd], ["__scopeId", "data-v-d6450b05"]]);
+const $y = /* @__PURE__ */ _(kd, [["render", xd], ["__scopeId", "data-v-7132cbfc"]]);
 const wd = {
   name: "ecs-data-card",
-  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsButtonTable: Ns, EcsButton: Se, EcsFocusRing: L },
+  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsButtonTable: Fs, EcsButton: Se, EcsFocusRing: L },
   mixins: [de],
   props: {
     /** If passed, an icon will be displayed in the data card. The icon prop must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
@@ -6589,7 +6609,7 @@ function Od(e, s, t, a, n, i) {
           }, null, 8, ["width"])) : u("", !0)
         ])
       ])) : u("", !0),
-      e.$slots.expand ? Ge((o(), l("div", {
+      e.$slots.expand ? Ue((o(), l("div", {
         key: 1,
         id: n.expandId,
         "aria-hidden": n.isExpanded ? "false" : "true",
@@ -6599,7 +6619,7 @@ function Od(e, s, t, a, n, i) {
           m(e.$slots, "expand", {}, void 0, !0)
         ])
       ], 8, Md)), [
-        [ft, n.isExpanded]
+        [pt, n.isExpanded]
       ]) : u("", !0)
     ]),
     t.hover ? (o(), y(h, {
@@ -6740,11 +6760,11 @@ const jd = {
   beforeUnmount() {
     this.mouseEvent && this.$refs.grid_row.removeEventListener(this.mouseEvent, this.handleRowClick);
   }
-}, Gd = {
+}, Ud = {
   key: 1,
   class: "ecs-data-grid-row-block"
 };
-function Ud(e, s, t, a, n, i) {
+function Gd(e, s, t, a, n, i) {
   return o(), l("div", {
     class: v(["ecs-data-grid-row", [t.state, t.type == "header" ? "header-row" : "", t.mouseEvent === "click" || t.clickable === !0 ? "clickable" : ""]]),
     ref: "grid_row",
@@ -6755,11 +6775,11 @@ function Ud(e, s, t, a, n, i) {
       onClick: s[0] || (s[0] = (...r) => i.handleDropzoneClick && i.handleDropzoneClick(...r)),
       class: "ecs-data-grid-row-drop-zone"
     })) : u("", !0),
-    t.state == "disabled" ? (o(), l("div", Gd)) : u("", !0),
+    t.state == "disabled" ? (o(), l("div", Ud)) : u("", !0),
     m(e.$slots, "default", {}, void 0, !0)
   ], 2);
 }
-const Kd = /* @__PURE__ */ _(jd, [["render", Ud], ["__scopeId", "data-v-16b82e41"]]);
+const Kd = /* @__PURE__ */ _(jd, [["render", Gd], ["__scopeId", "data-v-16b82e41"]]);
 const Yd = {
   name: "ecs-data-grid-row-group",
   components: {
@@ -7287,14 +7307,14 @@ const _u = {
   }
 }, yu = ["aria-labeled-by"];
 function bu(e, s, t, a, n, i) {
-  return Ge((o(), l("div", {
+  return Ue((o(), l("div", {
     class: "ecs-data-grid-group",
     role: "tabpanel",
     "aria-labeled-by": t.ariaLabeledBy
   }, [
     t.show ? m(e.$slots, "default", { key: 0 }, void 0, !0) : u("", !0)
   ], 8, yu)), [
-    [ft, t.show]
+    [pt, t.show]
   ]);
 }
 const Ay = /* @__PURE__ */ _(_u, [["render", bu], ["__scopeId", "data-v-ee025ab5"]]);
@@ -7479,7 +7499,7 @@ const Dy = /* @__PURE__ */ _(zu, [["render", Eu]]);
 const $u = {
   name: "ecs-data-list-item",
   emits: ["toggled"],
-  components: { EcsButtonMore: As, EcsSkeletonLoader: Ce },
+  components: { EcsButtonMore: Ds, EcsSkeletonLoader: Ce },
   mixins: [de],
   props: {
     /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
@@ -7713,7 +7733,7 @@ function Du(e, s, t, a, n, i) {
     key: 0,
     ref: "dialog",
     class: v(["ecs-dialog-" + t.size, "ecs-dialog"]),
-    onKeydown: s[0] || (s[0] = U((...r) => i.handleEnterKey && i.handleEnterKey(...r), ["enter"]))
+    onKeydown: s[0] || (s[0] = G((...r) => i.handleEnterKey && i.handleEnterKey(...r), ["enter"]))
   }, [
     f("div", Nu, [
       m(e.$slots, "default")
@@ -7882,7 +7902,7 @@ const Vy = /* @__PURE__ */ _(Vu, [["render", Wu], ["__scopeId", "data-v-6e05c98b
     }, null, 8, ["alt"]));
   }
 };
-const Gu = {
+const Uu = {
   name: "ecs-directory-entry",
   components: {
     EcsIcon: M,
@@ -7905,10 +7925,10 @@ const Gu = {
   mounted() {
     !this.icon && !this.favicon && console.warn("Icon or Favicon prop is required for ecs-directory-entry component");
   }
-}, Uu = { class: "ecs-directory-entry" }, Ku = { class: "items" };
+}, Gu = { class: "ecs-directory-entry" }, Ku = { class: "items" };
 function Yu(e, s, t, a, n, i) {
   const r = p("ecs-icon"), c = p("ecs-favicon");
-  return o(), l("div", Uu, [
+  return o(), l("div", Gu, [
     t.icon ? (o(), y(r, {
       key: 0,
       type: t.icon,
@@ -7927,7 +7947,7 @@ function Yu(e, s, t, a, n, i) {
     ])
   ]);
 }
-const Hy = /* @__PURE__ */ _(Gu, [["render", Yu], ["__scopeId", "data-v-800f5f8e"]]);
+const Hy = /* @__PURE__ */ _(Uu, [["render", Yu], ["__scopeId", "data-v-800f5f8e"]]);
 const Xu = {
   name: "ecs-document-state",
   components: {
@@ -8363,7 +8383,7 @@ function If(e, s, t, a, n, i) {
     onDragover: s[3] || (s[3] = (...C) => i.handleDragOver && i.handleDragOver(...C)),
     onDragenter: s[4] || (s[4] = (...C) => i.handleDragEnter && i.handleDragEnter(...C)),
     onDragleave: s[5] || (s[5] = (...C) => i.handleDragLeave && i.handleDragLeave(...C)),
-    onDrop: s[6] || (s[6] = G((...C) => i.drop && i.drop(...C), ["prevent"])),
+    onDrop: s[6] || (s[6] = U((...C) => i.drop && i.drop(...C), ["prevent"])),
     "aria-busy": i.isBusy || null,
     "aria-invalid": t.error || null
   }, [
@@ -8388,7 +8408,7 @@ function If(e, s, t, a, n, i) {
             D(" Drag and drop your " + x(t.fileTypeLabel) + " or ", 1),
             f("i", {
               onClick: s[1] || (s[1] = (...C) => i.browseFile && i.browseFile(...C)),
-              onKeydown: s[2] || (s[2] = U((...C) => i.browseFile && i.browseFile(...C), ["enter"])),
+              onKeydown: s[2] || (s[2] = G((...C) => i.browseFile && i.browseFile(...C), ["enter"])),
               tabindex: "0"
             }, [
               D("browse"),
@@ -8476,7 +8496,7 @@ const Ef = {
   components: {
     EcsIcon: M,
     EcsSticker: Re,
-    EcsButtonMore: As,
+    EcsButtonMore: Ds,
     EcsFocusRing: L
   },
   props: {
@@ -8540,7 +8560,7 @@ const Ef = {
 function Lf(e, s, t, a, n, i) {
   const r = p("ecs-icon"), c = p("ecs-sticker"), d = p("ecs-focus-ring"), g = p("ecs-button-more");
   return o(), l("div", {
-    onClick: s[0] || (s[0] = G((...h) => i.handleClick && i.handleClick(...h), ["stop"])),
+    onClick: s[0] || (s[0] = U((...h) => i.handleClick && i.handleClick(...h), ["stop"])),
     tabindex: "0",
     role: "button",
     class: "ecs-entry-link"
@@ -8577,17 +8597,17 @@ function Lf(e, s, t, a, n, i) {
     }),
     t.moreButton ? (o(), y(g, {
       key: 3,
-      onClick: G(i.handleMoreButtonClick, ["stop"]),
+      onClick: U(i.handleMoreButtonClick, ["stop"]),
       type: "ellipsis",
       title: t.moreButtonTitle,
       "aria-label": t.moreButtonTitle
     }, null, 8, ["onClick", "title", "aria-label"])) : u("", !0)
   ]);
 }
-const Gy = /* @__PURE__ */ _(Ef, [["render", Lf], ["__scopeId", "data-v-00b5ab33"]]);
+const Uy = /* @__PURE__ */ _(Ef, [["render", Lf], ["__scopeId", "data-v-00b5ab33"]]);
 const Of = {
   name: "ecs-excerpt-snippet",
-  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsFormatted: Ds },
+  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsFormatted: Rs },
   props: {
     /** Determines how the content of the excerpt should be rendered. */
     type: {
@@ -8721,7 +8741,7 @@ function Wf(e, s, t, a, n, i) {
     ], 4)
   ], 2);
 }
-const Uy = /* @__PURE__ */ _(Of, [["render", Wf], ["__scopeId", "data-v-f582192b"]]), Ky = {
+const Gy = /* @__PURE__ */ _(Of, [["render", Wf], ["__scopeId", "data-v-f582192b"]]), Ky = {
   __name: "fill-icon",
   props: {
     /** The identifier of the icon which should show up. */
@@ -8763,16 +8783,16 @@ const Uy = /* @__PURE__ */ _(Of, [["render", Wf], ["__scopeId", "data-v-f582192b
   }
 }, jf = {
   name: "ecs-file-list"
-}, Gf = {
+}, Uf = {
   class: "ecs-file-list",
   role: "list"
 };
-function Uf(e, s, t, a, n, i) {
-  return o(), l("div", Gf, [
+function Gf(e, s, t, a, n, i) {
+  return o(), l("div", Uf, [
     m(e.$slots, "default")
   ]);
 }
-const Yy = /* @__PURE__ */ _(jf, [["render", Uf]]);
+const Yy = /* @__PURE__ */ _(jf, [["render", Gf]]);
 const Kf = {
   name: "ecs-file-list-item",
   emits: ["click", "remove", "toggled", "title-click"],
@@ -8780,7 +8800,7 @@ const Kf = {
     EcsIcon: M,
     EcsFileIcon: Ls,
     EcsSticker: Re,
-    EcsButtonTable: Ns,
+    EcsButtonTable: Fs,
     EcsFocusRing: L
   },
   mixins: [de],
@@ -9156,7 +9176,7 @@ function mp(e, s, t, a, n, i) {
   }, [
     f("button", {
       onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-      onKeydown: s[1] || (s[1] = U((d) => e.$emit("click", d), ["enter"])),
+      onKeydown: s[1] || (s[1] = G((d) => e.$emit("click", d), ["enter"])),
       title: t.tooltip,
       class: "ecs-input-clear-button",
       "aria-label": "Clear"
@@ -9578,7 +9598,7 @@ const Wp = {
       dismissed: !1
     };
   }
-}, jp = { class: "ecs-toolbar-search" }, Gp = { class: "number" }, Up = { class: "type" }, Kp = { class: "ecs-toolbar-right-section" }, Yp = { class: "ecs-toolbar-right-section" };
+}, jp = { class: "ecs-toolbar-search" }, Up = { class: "number" }, Gp = { class: "type" }, Kp = { class: "ecs-toolbar-right-section" }, Yp = { class: "ecs-toolbar-right-section" };
 function Xp(e, s, t, a, n, i) {
   const r = p("ecs-button-toolbar-group"), c = p("ecs-flex-row"), d = p("ecs-flex-col"), g = p("ecs-toolbar");
   return o(), y(g, { class: "ecs-index-toolbar" }, {
@@ -9601,8 +9621,8 @@ function Xp(e, s, t, a, n, i) {
                 class: "ecs-toolbar-search-results"
               }, {
                 default: w(() => [
-                  f("span", Gp, x(t.count), 1),
-                  f("span", Up, x(t.type), 1)
+                  f("span", Up, x(t.count), 1),
+                  f("span", Gp, x(t.type), 1)
                 ]),
                 _: 1
               })
@@ -9958,7 +9978,7 @@ const hg = {
     "selectCurEntryText",
     "blur"
   ],
-  components: { EcsButtonToolbar: gt, EcsButtonToolbarGroup: Ht },
+  components: { EcsButtonToolbar: mt, EcsButtonToolbarGroup: Ht },
   props: {
     /** Index position of the currently viewed object. */
     currentEntry: {
@@ -10061,7 +10081,7 @@ const bg = {
     "selectSearchResultCount",
     "setSearchResultCount"
   ],
-  components: { EcsButtonToolbar: gt, EcsButtonToolbarGroup: Ht },
+  components: { EcsButtonToolbar: mt, EcsButtonToolbarGroup: Ht },
   props: {
     /** Count of the current object in the given index. */
     currentCount: {
@@ -10666,11 +10686,11 @@ const qg = {
 }, Wg = { class: "ecs-index-layout-contents" }, jg = {
   key: 0,
   class: "ecs-index-layout-table scrollbar"
-}, Gg = {
+}, Ug = {
   key: 2,
   class: "ecs-index-layout-pagination"
 };
-function Ug(e, s, t, a, n, i) {
+function Gg(e, s, t, a, n, i) {
   const r = p("ecs-pane"), c = p("ecs-splitpanes");
   return o(), l("div", {
     class: v(["ecs-index-layout", [t.backgroundWhite ? "background-white" : ""]])
@@ -10710,7 +10730,7 @@ function Ug(e, s, t, a, n, i) {
         })) : (o(), l("div", jg, [
           m(e.$slots, "default", {}, void 0, !0)
         ])),
-        e.$slots.pagination ? (o(), l("div", Gg, [
+        e.$slots.pagination ? (o(), l("div", Ug, [
           m(e.$slots, "pagination", {}, void 0, !0)
         ])) : u("", !0)
       ]),
@@ -10724,7 +10744,7 @@ function Ug(e, s, t, a, n, i) {
     ], 2)
   ], 2);
 }
-const db = /* @__PURE__ */ _(qg, [["render", Ug], ["__scopeId", "data-v-7e2fc186"]]);
+const db = /* @__PURE__ */ _(qg, [["render", Gg], ["__scopeId", "data-v-7e2fc186"]]);
 const Kg = {
   name: "ecs-layout-directory",
   props: {
@@ -10849,13 +10869,13 @@ function cm(e, s, t, a, n, i) {
         ]),
         _: 3
       }),
-      e.$slots.actionbar ? Ge((o(), y(c, { key: 1 }, {
+      e.$slots.actionbar ? Ue((o(), y(c, { key: 1 }, {
         default: w(() => [
           m(e.$slots, "actionbar", {}, void 0, !0)
         ]),
         _: 3
       }, 512)), [
-        [ft, t.showActionbar]
+        [pt, t.showActionbar]
       ]) : u("", !0),
       f("div", am, [
         m(e.$slots, "default", {}, void 0, !0)
@@ -11452,10 +11472,10 @@ const Wm = {
 }, jm = {
   key: 0,
   class: "symbol"
-}, Gm = {
+}, Um = {
   key: 0,
   class: "operator"
-}, Um = ["value"], Km = { class: "query" }, Ym = {
+}, Gm = ["value"], Km = { class: "query" }, Ym = {
   key: 0,
   class: "descriptor"
 };
@@ -11464,7 +11484,7 @@ function Xm(e, s, t, a, n, i) {
   return o(), l("div", {
     class: v(["ecs-multiselect-search-token", i.typeClass]),
     tabindex: "0",
-    onKeydown: s[3] || (s[3] = U((g) => e.$emit("remove", g), ["delete"]))
+    onKeydown: s[3] || (s[3] = G((g) => e.$emit("remove", g), ["delete"]))
   }, [
     t.icon || t.operator || t.operatorSwitch ? (o(), l("div", jm, [
       b(r, {
@@ -11472,7 +11492,7 @@ function Xm(e, s, t, a, n, i) {
         size: "20",
         color: "#FFF"
       }, null, 8, ["type"]),
-      t.operator && !t.operatorSelect && !t.operatorSwitch ? (o(), l("div", Gm, x(t.operator), 1)) : u("", !0),
+      t.operator && !t.operatorSelect && !t.operatorSwitch ? (o(), l("div", Um, x(t.operator), 1)) : u("", !0),
       t.operatorSelect ? (o(), y(c, {
         key: 1,
         onChange: i.handleOperatorChange,
@@ -11484,7 +11504,7 @@ function Xm(e, s, t, a, n, i) {
           (o(!0), l(Z, null, ge(t.operatorSelectOptions, (g) => (o(), l("option", {
             value: g,
             key: g
-          }, x(g), 9, Um))), 128))
+          }, x(g), 9, Gm))), 128))
         ]),
         _: 1
       }, 8, ["onChange", "value"])) : u("", !0),
@@ -11515,7 +11535,7 @@ function Xm(e, s, t, a, n, i) {
       m(e.$slots, "default", {}, void 0, !0),
       f("button", {
         onClick: s[1] || (s[1] = (g) => e.$emit("remove", g)),
-        onKeyup: s[2] || (s[2] = U((g) => e.$emit("remove", g), ["enter"])),
+        onKeyup: s[2] || (s[2] = G((g) => e.$emit("remove", g), ["enter"])),
         class: "remove",
         title: "Remove",
         "aria-label": "Remove"
@@ -11544,7 +11564,7 @@ function Jm(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-multiselect-token",
     tabindex: "0",
-    onKeydown: s[1] || (s[1] = U((d) => e.$emit("remove", d), ["delete"]))
+    onKeydown: s[1] || (s[1] = G((d) => e.$emit("remove", d), ["delete"]))
   }, [
     m(e.$slots, "default", {}, void 0, !0),
     f("button", {
@@ -11600,7 +11620,7 @@ const kb = /* @__PURE__ */ _(Qm, [["render", th], ["__scopeId", "data-v-ceac7867
 const sh = {
   name: "ecs-overlay",
   emits: ["close", "toggled"],
-  components: { EcsIcon: M, EcsButtonToolbar: gt, EcsAlert: ks },
+  components: { EcsIcon: M, EcsButtonToolbar: mt, EcsAlert: ks },
   props: {
     /** Shows the Overlay. */
     show: {
@@ -11996,13 +12016,13 @@ const yh = {
       this.$emit("updatePage", Number(e));
     }
   }
-}, Gs = (e) => (ve("data-v-ca016e63"), e = e(), _e(), e), bh = /* @__PURE__ */ Gs(() => /* @__PURE__ */ f("span", null, "Page", -1)), kh = ["value", "selected"], xh = {
+}, Us = (e) => (ve("data-v-ca016e63"), e = e(), _e(), e), bh = /* @__PURE__ */ Us(() => /* @__PURE__ */ f("span", null, "Page", -1)), kh = ["value", "selected"], xh = {
   key: 0,
   class: "total"
 }, wh = {
   key: 1,
   class: "ecs-pagination-range"
-}, Sh = { class: "ecs-pagination-tabs" }, Ch = /* @__PURE__ */ Gs(() => /* @__PURE__ */ f("span", null, "Items per page", -1)), Bh = ["value", "selected"];
+}, Sh = { class: "ecs-pagination-tabs" }, Ch = /* @__PURE__ */ Us(() => /* @__PURE__ */ f("span", null, "Items per page", -1)), Bh = ["value", "selected"];
 function zh(e, s, t, a, n, i) {
   const r = p("ecs-button"), c = p("ecs-flex-row"), d = p("ecs-select");
   return o(), l("div", {
@@ -12468,8 +12488,8 @@ const Wh = {
       }
     }
   }
-}, jh = ["aria-busy"], Gh = ["title"];
-function Uh(e, s, t, a, n, i) {
+}, jh = ["aria-busy"], Uh = ["title"];
+function Gh(e, s, t, a, n, i) {
   const r = p("ecs-icon"), c = p("ecs-skeleton-loader");
   return o(), l("div", {
     onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
@@ -12481,7 +12501,7 @@ function Uh(e, s, t, a, n, i) {
       title: i.labelText
     }, [
       b(r, { type: i.iconType }, null, 8, ["type"])
-    ], 10, Gh),
+    ], 10, Uh),
     t.label ? (o(), l("span", {
       key: 0,
       class: v(["label", t.loading ? "loading" : ""])
@@ -12500,7 +12520,7 @@ function Uh(e, s, t, a, n, i) {
     })) : u("", !0)
   ], 10, jh);
 }
-const Kh = /* @__PURE__ */ _(Wh, [["render", Uh], ["__scopeId", "data-v-359930b9"]]);
+const Kh = /* @__PURE__ */ _(Wh, [["render", Gh], ["__scopeId", "data-v-359930b9"]]);
 const Yh = {
   name: "ecs-quicklinks-link",
   emits: ["click", "input", "toggle"],
@@ -12662,10 +12682,10 @@ const nv = {
       default: 0
     }
   }
-}, ht = (e) => (ve("data-v-37aaedf8"), e = e(), _e(), e), av = {
+}, vt = (e) => (ve("data-v-37aaedf8"), e = e(), _e(), e), av = {
   key: 0,
   class: "ecs-rating-reset"
-}, ov = { class: "ecs-rating-write" }, rv = ["checked"], lv = /* @__PURE__ */ ht(() => /* @__PURE__ */ f("i", null, null, -1)), cv = ["checked"], dv = /* @__PURE__ */ ht(() => /* @__PURE__ */ f("i", null, null, -1)), uv = ["checked"], fv = /* @__PURE__ */ ht(() => /* @__PURE__ */ f("i", null, null, -1)), pv = ["checked"], gv = /* @__PURE__ */ ht(() => /* @__PURE__ */ f("i", null, null, -1));
+}, ov = { class: "ecs-rating-write" }, rv = ["checked"], lv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), cv = ["checked"], dv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), uv = ["checked"], fv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), pv = ["checked"], gv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1));
 function mv(e, s, t, a, n, i) {
   return o(), l("div", {
     class: v(["ecs-rating-form", [t.large ? "ecs-rating-form-lg" : ""]])
@@ -12919,8 +12939,8 @@ function $v(e, s, t, a, n, i) {
   return o(), l("div", {
     onClick: s[0] || (s[0] = (c) => e.$emit("click", c)),
     onKeydown: [
-      s[1] || (s[1] = U(G((c) => e.$emit("click", c), ["prevent"]), ["space"])),
-      s[2] || (s[2] = U(G((c) => e.$emit("click", c), ["prevent"]), ["enter"]))
+      s[1] || (s[1] = G(U((c) => e.$emit("click", c), ["prevent"]), ["space"])),
+      s[2] || (s[2] = G(U((c) => e.$emit("click", c), ["prevent"]), ["enter"]))
     ],
     class: v(["ecs-select-tile", [t.selected ? "ecs-select-tile-selected" : "", t.disabled ? "ecs-select-tile-disabled" : ""]]),
     role: "checkbox",
@@ -13065,7 +13085,7 @@ function Wv(e, s, t, a, n, i) {
   ], 2);
 }
 const jv = /* @__PURE__ */ _(qv, [["render", Wv], ["__scopeId", "data-v-0fe19168"]]);
-const Gv = {
+const Uv = {
   name: "ecs-sidebar",
   components: {
     EcsTabBar: Hv,
@@ -13100,14 +13120,14 @@ const Gv = {
       return this.expanded ? "height: calc(100% - 10px)" : "height:" + (2 + 36 * this.tabCount) + "px";
     }
   }
-}, Uv = { class: "ecs-sidebar-tabs" };
+}, Gv = { class: "ecs-sidebar-tabs" };
 function Kv(e, s, t, a, n, i) {
   const r = p("ecs-tab-bar"), c = p("ecs-tabs");
   return o(), l("aside", {
     class: v(["ecs-sidebar", [i.sizeClass, i.expandClass]]),
     style: B(i.height)
   }, [
-    f("div", Uv, [
+    f("div", Gv, [
       b(r, { type: "sidebar" }, {
         default: w(() => [
           m(e.$slots, "tab-buttons", {}, void 0, !0)
@@ -13123,7 +13143,7 @@ function Kv(e, s, t, a, n, i) {
     })
   ], 6);
 }
-const Lb = /* @__PURE__ */ _(Gv, [["render", Kv], ["__scopeId", "data-v-5e877161"]]);
+const Lb = /* @__PURE__ */ _(Uv, [["render", Kv], ["__scopeId", "data-v-5e877161"]]);
 const Yv = {
   name: "ecs-sidebar-content",
   props: {
@@ -13317,8 +13337,8 @@ function g_(e, s, t, a, n, i) {
       key: r.id,
       onClick: (c) => i.handleItemClick(r),
       onKeydown: [
-        U(G((c) => i.handleItemClick(r), ["prevent"]), ["space"]),
-        U(G((c) => i.handleItemClick(r), ["prevent"]), ["enter"])
+        G(U((c) => i.handleItemClick(r), ["prevent"]), ["space"]),
+        G(U((c) => i.handleItemClick(r), ["prevent"]), ["enter"])
       ],
       role: "radio",
       tabindex: "0",
@@ -13732,7 +13752,7 @@ function q_(e, s, t, a, n, i) {
     ])) : u("", !0)
   ], 10, D_);
 }
-const Gb = /* @__PURE__ */ _(N_, [["render", q_], ["__scopeId", "data-v-9ceb80a6"]]);
+const Ub = /* @__PURE__ */ _(N_, [["render", q_], ["__scopeId", "data-v-9ceb80a6"]]);
 const W_ = {
   name: "ecs-tree-list",
   props: {
@@ -13748,7 +13768,7 @@ const W_ = {
     }
   }
 }, j_ = ["id", "role"];
-function G_(e, s, t, a, n, i) {
+function U_(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-tree-view-list",
     id: t.id,
@@ -13757,8 +13777,8 @@ function G_(e, s, t, a, n, i) {
     m(e.$slots, "default", {}, void 0, !0)
   ], 8, j_);
 }
-const Ub = /* @__PURE__ */ _(W_, [["render", G_], ["__scopeId", "data-v-b2d4ee72"]]);
-const U_ = {
+const Gb = /* @__PURE__ */ _(W_, [["render", U_], ["__scopeId", "data-v-b2d4ee72"]]);
+const G_ = {
   name: "ecs-tree-list-item",
   emits: ["click", "toggled"],
   components: { EcsIcon: M, EcsButtonCollapse: Os, EcsFocusRing: L },
@@ -13903,8 +13923,8 @@ function J_(e, s, t, a, n, i) {
       role: "treeitem",
       tabindex: i.isSelectable ? "0" : "-1",
       onKeydown: [
-        s[2] || (s[2] = U(G((...g) => i.focusPrevious && i.focusPrevious(...g), ["prevent"]), ["up"])),
-        s[3] || (s[3] = U(G((...g) => i.focusNext && i.focusNext(...g), ["prevent"]), ["down"]))
+        s[2] || (s[2] = G(U((...g) => i.focusPrevious && i.focusPrevious(...g), ["prevent"]), ["up"])),
+        s[3] || (s[3] = G(U((...g) => i.focusNext && i.focusNext(...g), ["prevent"]), ["down"]))
       ]
     }, [
       i.isSelectable ? (o(), y(r, { key: 0 })) : u("", !0),
@@ -13951,7 +13971,7 @@ function J_(e, s, t, a, n, i) {
     ], 10, Z_)) : u("", !0)
   ]);
 }
-const Kb = /* @__PURE__ */ _(U_, [["render", J_], ["__scopeId", "data-v-5ad9b59c"]]);
+const Kb = /* @__PURE__ */ _(G_, [["render", J_], ["__scopeId", "data-v-5ad9b59c"]]);
 const Q_ = {
   name: "ecs-tree-list-headline"
 }, ey = { class: "ecs-tree-view-headline" };
@@ -14122,9 +14142,9 @@ export {
   by as EcsButtonContextGroup,
   ky as EcsButtonDialog,
   _y as EcsButtonGroup,
-  As as EcsButtonMore,
-  Ns as EcsButtonTable,
-  gt as EcsButtonToolbar,
+  Ds as EcsButtonMore,
+  Fs as EcsButtonTable,
+  mt as EcsButtonToolbar,
   Ht as EcsButtonToolbarGroup,
   xy as EcsButtonToolbarIcon,
   wy as EcsCard,
@@ -14154,8 +14174,8 @@ export {
   Wy as EcsDonutChart,
   jy as EcsDropzone,
   mf as EcsEmptyState,
-  Gy as EcsEntryLink,
-  Uy as EcsExcerptSnippet,
+  Uy as EcsEntryLink,
+  Gy as EcsExcerptSnippet,
   ju as EcsFavicon,
   Ls as EcsFileIcon,
   Yy as EcsFileList,
@@ -14170,7 +14190,7 @@ export {
   $p as EcsFormGroup,
   Qy as EcsFormHeadline,
   eb as EcsFormSet,
-  Ds as EcsFormatted,
+  Rs as EcsFormatted,
   M as EcsIcon,
   tb as EcsIndexToolbar,
   sb as EcsInfoTooltip,
@@ -14242,8 +14262,8 @@ export {
   Wb as EcsToast,
   jb as EcsToasts,
   qp as EcsToolbar,
-  Gb as EcsTranscriptState,
-  Ub as EcsTreeList,
+  Ub as EcsTranscriptState,
+  Gb as EcsTreeList,
   Yb as EcsTreeListHeadline,
   Kb as EcsTreeListItem,
   Xb as EcsTypeConfirmation,