@everchron/ec-shards 9.2.3 → 9.4.0

package/dist/ec-shards.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as ee, watch as ce, openBlock as o, createBlock as h, resolveDynamicComponent as Ee, unref as ae, normalizeClass as y, createElementBlock as l, normalizeStyle as C, resolveComponent as g, createVNode as _, createCommentVNode as u, createElementVNode as f, createTextVNode as D, toDisplayString as w, renderSlot as p, Transition as pe, withCtx as S, computed as ke, reactive as Qs, nextTick as ei, onBeforeUnmount as Pt, toRefs as _s, isRef as ti, onMounted as ks, useSlots as si, ref as Ye, watchEffect as kt, withKeys as G, Teleport as ii, withDirectives as Ge, vShow as gt, mergeProps as De, normalizeProps as ni, guardReactiveProps as ai, withModifiers as U, pushScopeId as be, popScopeId as _e, Fragment as X, renderList as he, resolveDirective as oi, vModelText as ri, markRaw as li, h as ci, TransitionGroup as di } from "vue";
+import { defineAsyncComponent as ee, watch as ce, openBlock as o, createBlock as h, resolveDynamicComponent as Ee, unref as ae, normalizeClass as y, createElementBlock as l, normalizeStyle as x, resolveComponent as g, createVNode as _, createCommentVNode as u, createElementVNode as f, createTextVNode as D, toDisplayString as w, renderSlot as p, Transition as ue, withCtx as S, computed as ke, reactive as Qs, nextTick as ei, onBeforeUnmount as Pt, toRefs as _s, isRef as ti, onMounted as ks, useSlots as si, ref as Ye, watchEffect as kt, withKeys as G, Teleport as ii, withDirectives as Ge, vShow as gt, mergeProps as De, normalizeProps as ni, guardReactiveProps as ai, withModifiers as U, pushScopeId as be, popScopeId as _e, Fragment as X, renderList as he, resolveDirective as oi, vModelText as ri, markRaw as li, h as ci, TransitionGroup as di } from "vue";
 const te = (e, s) => {
   const t = e[s];
   return t ? typeof t == "function" ? t() : Promise.resolve(t) : new Promise((a, n) => {
@@ -84,7 +84,7 @@ const te = (e, s) => {
 function gi(e, s, t, a, n, i) {
   return o(), l("span", {
     class: y(["ecs-focus-ring", t.danger ? "ecs-focus-ring-danger" : ""]),
-    style: C(i.styles)
+    style: x(i.styles)
   }, null, 6);
 }
 const L = /* @__PURE__ */ v(fi, [["render", gi], ["__scopeId", "data-v-8d624905"]]), mi = {
@@ -176,7 +176,7 @@ function bi(e, s, t, a, n, i) {
       t.inset ? "ecs-alert-inset" : "",
       t.border !== !1 ? "ecs-alert-border" : ""
     ]]),
-    style: C(i.borderStyles),
+    style: x(i.borderStyles),
     role: "alert"
   }, [
     t.dismissable ? (o(), l("button", {
@@ -223,7 +223,7 @@ const ws = /* @__PURE__ */ v(mi, [["render", bi], ["__scopeId", "data-v-4804812d
   "aria-label": "Actions"
 };
 function wi(e, s, t, a, n, i) {
-  return o(), h(pe, {
+  return o(), h(ue, {
     name: "action-bar",
     appear: ""
   }, {
@@ -235,7 +235,7 @@ function wi(e, s, t, a, n, i) {
     _: 3
   });
 }
-const Si = /* @__PURE__ */ v(_i, [["render", wi], ["__scopeId", "data-v-ed37c526"]]), xi = {
+const Si = /* @__PURE__ */ v(_i, [["render", wi], ["__scopeId", "data-v-ed37c526"]]), Ci = {
   name: "ecs-audio",
   props: {
     /** If true, the player will autoplay once it shows up in the DOM. */
@@ -264,7 +264,7 @@ const Si = /* @__PURE__ */ v(_i, [["render", wi], ["__scopeId", "data-v-ed37c526
       default: null
     }
   }
-}, Ci = ["controls", "autoplay", "loop"], Bi = ["src"], zi = ["src"];
+}, xi = ["controls", "autoplay", "loop"], Bi = ["src"], zi = ["src"];
 function Ii(e, s, t, a, n, i) {
   return o(), l("audio", {
     class: "ecs-audio",
@@ -282,9 +282,9 @@ function Ii(e, s, t, a, n, i) {
       src: t.oggSource,
       type: "audio/ogg"
     }, null, 8, zi)) : u("", !0)
-  ], 8, Ci);
+  ], 8, xi);
 }
-const Bb = /* @__PURE__ */ v(xi, [["render", Ii], ["__scopeId", "data-v-4e7ca115"]]), Ei = {
+const Bb = /* @__PURE__ */ v(Ci, [["render", Ii], ["__scopeId", "data-v-4e7ca115"]]), Ei = {
   __name: "sticker",
   props: {
     /** Sets the sticker icon. */
@@ -335,7 +335,7 @@ const Bb = /* @__PURE__ */ v(xi, [["render", Ii], ["__scopeId", "data-v-4e7ca115
       "aria-busy": t.value || null,
       width: e.size,
       height: e.size,
-      style: C(`color: ${n.value}`)
+      style: x(`color: ${n.value}`)
     }, null, 8, ["class", "aria-busy", "width", "height", "style"])) : u("", !0);
   }
 }, Fe = /* @__PURE__ */ v(Ei, [["__scopeId", "data-v-add9195d"]]), $i = {
@@ -457,7 +457,7 @@ function Mi(e, s, t, a, n, i) {
   const r = g("ecs-sticker");
   return o(), l("div", {
     class: y(["avatar", i.partyClass]),
-    style: C([i.style, t.customStyle]),
+    style: x([i.style, t.customStyle]),
     role: t.image ? "img" : "none",
     "aria-label": t.name
   }, [
@@ -547,7 +547,7 @@ function Ai(e, s, t, a, n, i) {
     t.dismissable ? (o(), l("button", {
       key: 0,
       onClick: s[0] || (s[0] = (...d) => i.dismiss && i.dismiss(...d)),
-      style: C(i.dismissButtonStyle),
+      style: x(i.dismissButtonStyle),
       class: "close",
       "aria-label": "Dismiss"
     }, [
@@ -702,7 +702,7 @@ const $b = /* @__PURE__ */ v(Hi, [["render", Wi], ["__scopeId", "data-v-422cc046
 function Ui(e, s, t, a, n, i) {
   return o(), l("div", {
     class: y(["ecs-flex-row", [i.directionClass, i.justifyClass, i.alignClass, t.wrap ? "ecs-flex-row-wrap" : ""]]),
-    style: C(i.gapStyle)
+    style: x(i.gapStyle)
   }, [
     p(e.$slots, "default", {}, void 0, !0)
   ], 6);
@@ -762,14 +762,14 @@ function It() {
     return s.brand + "/" + s.version;
   }).join(" ") : navigator.userAgent;
 }
-function xs() {
+function Cs() {
   return !/^((?!chrome|android).)*safari/i.test(It());
 }
 function We(e, s, t) {
   s === void 0 && (s = !1), t === void 0 && (t = !1);
   var a = e.getBoundingClientRect(), n = 1, i = 1;
   s && de(e) && (n = e.offsetWidth > 0 && qe(a.width) / e.offsetWidth || 1, i = e.offsetHeight > 0 && qe(a.height) / e.offsetHeight || 1);
-  var r = Re(e) ? le(e) : window, c = r.visualViewport, d = !xs() && t, m = (a.left + (d && c ? c.offsetLeft : 0)) / n, b = (a.top + (d && c ? c.offsetTop : 0)) / i, k = a.width / n, z = a.height / i;
+  var r = Re(e) ? le(e) : window, c = r.visualViewport, d = !Cs() && t, m = (a.left + (d && c ? c.offsetLeft : 0)) / n, b = (a.top + (d && c ? c.offsetTop : 0)) / i, k = a.width / n, z = a.height / i;
   return {
     width: k,
     height: z,
@@ -858,13 +858,13 @@ function mt(e) {
     Me(e)
   );
 }
-function Cs(e) {
-  return ["html", "body", "#document"].indexOf(Se(e)) >= 0 ? e.ownerDocument.body : de(e) && Ot(e) ? e : Cs(mt(e));
+function xs(e) {
+  return ["html", "body", "#document"].indexOf(Se(e)) >= 0 ? e.ownerDocument.body : de(e) && Ot(e) ? e : xs(mt(e));
 }
 function Qe(e, s) {
   var t;
   s === void 0 && (s = []);
-  var a = Cs(e), n = a === ((t = e.ownerDocument) == null ? void 0 : t.body), i = le(a), r = n ? [i].concat(i.visualViewport || [], Ot(a) ? a : []) : a, c = s.concat(r);
+  var a = xs(e), n = a === ((t = e.ownerDocument) == null ? void 0 : t.body), i = le(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(Qe(mt(r)))
@@ -956,7 +956,7 @@ function hn(e, s) {
   var t = le(e), a = Me(e), n = t.visualViewport, i = a.clientWidth, r = a.clientHeight, c = 0, d = 0;
   if (n) {
     i = n.width, r = n.height;
-    var m = xs();
+    var m = Cs();
     (m || !m && s === "fixed") && (c = n.offsetLeft, d = n.offsetTop);
   }
   return {
@@ -1105,8 +1105,8 @@ function Rt(e, s) {
   if (z === Xe && j) {
     var Z = j[n];
     Object.keys(W).forEach(function(K) {
-      var Ce = [ye, ve].indexOf(K) >= 0 ? 1 : -1, Be = [oe, ve].indexOf(K) >= 0 ? "y" : "x";
-      W[K] += Z[Be] * Ce;
+      var xe = [ye, ve].indexOf(K) >= 0 ? 1 : -1, Be = [oe, ve].indexOf(K) >= 0 ? "y" : "x";
+      W[K] += Z[Be] * xe;
     });
   }
   return W;
@@ -1244,7 +1244,7 @@ const Sn = {
   effect: wn,
   data: {}
 };
-function xn(e) {
+function Cn(e) {
   var s = e.state, t = e.name;
   s.modifiersData[t] = Es({
     reference: s.rects.reference,
@@ -1253,11 +1253,11 @@ function xn(e) {
     placement: s.placement
   });
 }
-const Cn = {
+const xn = {
   name: "popperOffsets",
   enabled: !0,
   phase: "read",
-  fn: xn,
+  fn: Cn,
   data: {}
 };
 var Bn = {
@@ -1389,7 +1389,7 @@ const Tn = {
   effect: Pn,
   requires: ["computeStyles"]
 };
-var Mn = [Sn, Cn, En, Tn], Ln = /* @__PURE__ */ kn({
+var Mn = [Sn, xn, En, Tn], Ln = /* @__PURE__ */ kn({
   defaultModifiers: Mn
 });
 function On(e) {
@@ -1422,10 +1422,10 @@ function Nn(e) {
   };
   if (E) {
     if (i) {
-      var K, Ce = P === "y" ? oe : re, Be = P === "y" ? ve : ye, Y = P === "y" ? "height" : "width", Q = E[P], $e = Q + T[Ce], ie = Q - T[Be], Ve = I ? -F[Y] / 2 : 0, J = R === je ? N[Y] : F[Y], se = R === je ? -F[Y] : -N[Y], Le = s.elements.arrow, He = I && Le ? At(Le) : {
+      var K, xe = P === "y" ? oe : re, Be = P === "y" ? ve : ye, Y = P === "y" ? "height" : "width", Q = E[P], $e = Q + T[xe], ie = Q - T[Be], Ve = I ? -F[Y] / 2 : 0, J = R === je ? N[Y] : F[Y], se = R === je ? -F[Y] : -N[Y], Le = s.elements.arrow, He = I && Le ? At(Le) : {
         width: 0,
         height: 0
-      }, Pe = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : $s(), Ke = Pe[Ce], at = Pe[Be], Oe = et(0, N[Y], He[Y]), yt = H ? N[Y] / 2 - Ve - Oe - Ke - W.mainAxis : J - Oe - Ke - W.mainAxis, Gs = H ? -N[Y] / 2 + Ve + Oe + at + W.mainAxis : se + Oe + at + W.mainAxis, bt = s.elements.arrow && st(s.elements.arrow), Ks = bt ? P === "y" ? bt.clientTop || 0 : bt.clientLeft || 0 : 0, Ut = (K = j == null ? void 0 : j[P]) != null ? K : 0, Ys = Q + yt - Ut - Ks, Xs = Q + Gs - Ut, Gt = et(I ? ut($e, Ys) : $e, Q, I ? Ne(ie, Xs) : ie);
+      }, Pe = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : $s(), Ke = Pe[xe], at = Pe[Be], Oe = et(0, N[Y], He[Y]), yt = H ? N[Y] / 2 - Ve - Oe - Ke - W.mainAxis : J - Oe - Ke - W.mainAxis, Gs = H ? -N[Y] / 2 + Ve + Oe + at + W.mainAxis : se + Oe + at + W.mainAxis, bt = s.elements.arrow && st(s.elements.arrow), Ks = bt ? P === "y" ? bt.clientTop || 0 : bt.clientLeft || 0 : 0, Ut = (K = j == null ? void 0 : j[P]) != null ? K : 0, Ys = Q + yt - Ut - Ks, Xs = Q + Gs - Ut, Gt = et(I ? ut($e, Ys) : $e, Q, I ? Ne(ie, Xs) : ie);
       E[P] = Gt, Z[P] = Gt - Q;
     }
     if (c) {
@@ -1501,13 +1501,13 @@ function qn(e) {
         allowedAutoPlacements: $
       }) : Pe);
     }, []), A = s.rects.reference, E = s.rects.popper, N = /* @__PURE__ */ new Map(), F = !0, V = P[0], W = 0; W < P.length; W++) {
-      var j = P[W], Z = we(j), K = Ue(j) === je, Ce = [oe, ve].indexOf(Z) >= 0, Be = Ce ? "width" : "height", Y = Rt(s, {
+      var j = P[W], Z = we(j), K = Ue(j) === je, xe = [oe, ve].indexOf(Z) >= 0, Be = xe ? "width" : "height", Y = Rt(s, {
         placement: j,
         boundary: b,
         rootBoundary: k,
         altBoundary: z,
         padding: m
-      }), Q = Ce ? K ? ye : re : K ? ve : oe;
+      }), Q = xe ? K ? ye : re : K ? ve : oe;
       A[Be] > E[Be] && (Q = dt(Q));
       var $e = dt(Q), ie = [];
       if (i && ie.push(Y[Z] <= 0), c && ie.push(Y[Q] <= 0, Y[$e] <= 0), ie.every(function(He) {
@@ -1856,7 +1856,7 @@ const na = /* @__PURE__ */ v(ta, [["render", ia], ["__scopeId", "data-v-baf3bb28
       placement: N,
       popperNode: d,
       triggerNode: m
-    }), Z = ke(() => F.value !== null), K = ke(() => O.value || !k.value), Ce = ke(() => V.value && !K.value), Be = ke(
+    }), Z = ke(() => F.value !== null), K = ke(() => O.value || !k.value), xe = ke(() => V.value && !K.value), Be = ke(
       () => !T.value && !Z.value
     );
     ke(
@@ -1904,7 +1904,7 @@ const na = /* @__PURE__ */ v(ta, [["render", ia], ["__scopeId", "data-v-baf3bb28
         p(J.$slots, "default", {}, void 0, !0)
       ], 40, aa),
       (o(), h(ii, { to: "body" }, [
-        _(pe, { name: "fade" }, {
+        _(ue, { name: "fade" }, {
           default: S(() => [
             e.persistent || c.value ? Ge((o(), l("div", {
               key: 0,
@@ -1922,7 +1922,7 @@ const na = /* @__PURE__ */ v(ta, [["render", ia], ["__scopeId", "data-v-baf3bb28
               ], !0),
               e.arrow ? (o(), h(na, { key: 0 })) : u("", !0)
             ], 512)), [
-              [gt, Ce.value]
+              [gt, xe.value]
             ]) : u("", !0)
           ]),
           _: 3
@@ -2112,7 +2112,7 @@ const Ft = /* @__PURE__ */ v(ga, [["render", ma]]), pa = {
 function ha(e, s, t, a, n, i) {
   return o(), h(Ee(i.textTag), {
     class: y([[i.textClass, t.emphasized ? "emphasized" : ""], "ecs-text"]),
-    style: C({ color: i.textColor })
+    style: x({ color: i.textColor })
   }, {
     default: S(() => [
       p(e.$slots, "default", {}, void 0, !0)
@@ -2120,7 +2120,7 @@ function ha(e, s, t, a, n, i) {
     _: 3
   }, 8, ["class", "style"]);
 }
-const nt = /* @__PURE__ */ v(pa, [["render", ha], ["__scopeId", "data-v-b3c32482"]]), ue = {
+const nt = /* @__PURE__ */ v(pa, [["render", ha], ["__scopeId", "data-v-b3c32482"]]), fe = {
   data() {
     return {
       uniqueId: ""
@@ -2139,7 +2139,7 @@ const nt = /* @__PURE__ */ v(pa, [["render", ha], ["__scopeId", "data-v-b3c32482
   name: "ecs-checkbox",
   emits: ["input", "shiftClick"],
   components: { EcsFormCheck: Ft, EcsText: nt },
-  mixins: [ue],
+  mixins: [fe],
   props: {
     /** Name attribute of the input. */
     name: {
@@ -2274,7 +2274,7 @@ const Vt = /* @__PURE__ */ v(va, [["render", _a], ["__scopeId", "data-v-e15ff286
   name: "ecs-radiobutton",
   emits: ["input", "change"],
   components: { EcsFormCheck: Ft, EcsText: nt },
-  mixins: [ue],
+  mixins: [fe],
   model: {
     prop: "checked",
     event: "input"
@@ -2349,7 +2349,7 @@ const Vt = /* @__PURE__ */ v(va, [["render", _a], ["__scopeId", "data-v-e15ff286
     }
   }
 }, wa = ["id", "name", "value", "required", "disabled", "checked"], Sa = ["for"];
-function xa(e, s, t, a, n, i) {
+function Ca(e, s, t, a, n, i) {
   const r = g("ecs-text"), c = g("ecs-form-check");
   return o(), h(c, {
     class: y([
@@ -2390,11 +2390,11 @@ function xa(e, s, t, a, n, i) {
     _: 3
   }, 8, ["class"]);
 }
-const Ca = /* @__PURE__ */ v(ka, [["render", xa], ["__scopeId", "data-v-0296b689"]]), Ba = {
+const xa = /* @__PURE__ */ v(ka, [["render", Ca], ["__scopeId", "data-v-0296b689"]]), Ba = {
   name: "ecs-switch",
   emits: ["input"],
   components: { EcsFocusRing: L },
-  mixins: [ue],
+  mixins: [fe],
   props: {
     /** Sets the name attribute. */
     name: {
@@ -2793,10 +2793,10 @@ function ja(e, s, t, a, n, i) {
     }, null, 8, ["inset", "danger"])
   ], 42, qa));
 }
-const xe = /* @__PURE__ */ v(Fa, [["render", ja], ["__scopeId", "data-v-13959c49"]]), Ua = {
+const Ce = /* @__PURE__ */ v(Fa, [["render", ja], ["__scopeId", "data-v-13959c49"]]), Ua = {
   name: "ecs-popover-list-item",
   emits: ["click", "input", "change", "secondaryClick"],
-  components: { EcsCheckbox: Vt, EcsRadiobutton: Ca, EcsSwitch: Ls, EcsSortbutton: Ra, EcsIcon: M, EcsFileIcon: Os, EcsButton: xe, EcsFocusRing: L },
+  components: { EcsCheckbox: Vt, EcsRadiobutton: xa, EcsSwitch: Ls, EcsSortbutton: Ra, EcsIcon: M, EcsFileIcon: Os, EcsButton: Ce, EcsFocusRing: L },
   props: {
     /** Determines the type of popover list item.*/
     type: {
@@ -3308,7 +3308,7 @@ function ho(e, s, t, a, n, i) {
     t.badge ? (o(), l("span", {
       key: 1,
       class: "badge",
-      style: C({ background: t.badgeColor })
+      style: x({ background: t.badgeColor })
     }, null, 4)) : u("", !0),
     t.icon && t.iconPosition == "right" || t.loading && t.iconPosition == "right" ? (o(), h(r, {
       key: 2,
@@ -3344,7 +3344,7 @@ function ho(e, s, t, a, n, i) {
     t.badge ? (o(), l("span", {
       key: 1,
       class: "badge",
-      style: C({ background: t.badgeColor })
+      style: x({ background: t.badgeColor })
     }, null, 4)) : u("", !0),
     t.icon && t.iconPosition == "right" || t.loading && t.iconPosition == "right" ? (o(), h(r, {
       key: 2,
@@ -3405,7 +3405,7 @@ const pt = /* @__PURE__ */ v(go, [["render", ho], ["__scopeId", "data-v-72592c75
 function yo(e, s, t, a, n, i) {
   return o(), l("div", {
     class: y(["ecs-separator", i.classes]),
-    style: C({ margin: i.marginStyles, width: t.width, height: t.height }),
+    style: x({ margin: i.marginStyles, width: t.width, height: t.height }),
     role: "separator"
   }, null, 6);
 }
@@ -3563,13 +3563,13 @@ function wo(e, s, t, a, n, i) {
 }
 const Pb = /* @__PURE__ */ v(_o, [["render", wo], ["__scopeId", "data-v-04aed8bb"]]), So = {
   name: "ecs-button-group"
-}, xo = { class: "ecs-button-group" };
-function Co(e, s, t, a, n, i) {
-  return o(), l("div", xo, [
+}, Co = { class: "ecs-button-group" };
+function xo(e, s, t, a, n, i) {
+  return o(), l("div", Co, [
     p(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Tb = /* @__PURE__ */ v(So, [["render", Co], ["__scopeId", "data-v-83c21366"]]), Bo = {
+const Tb = /* @__PURE__ */ v(So, [["render", xo], ["__scopeId", "data-v-83c21366"]]), Bo = {
   name: "ecs-button-collapse",
   emits: ["click"],
   components: {
@@ -3631,15 +3631,15 @@ function ft(e) {
   }, ft(e);
 }
 var Eo = /^\s+/, $o = /\s+$/;
-function x(e, s) {
-  if (e = e || "", s = s || {}, e instanceof x)
+function C(e, s) {
+  if (e = e || "", s = s || {}, e instanceof C)
     return e;
-  if (!(this instanceof x))
-    return new x(e, s);
+  if (!(this instanceof C))
+    return new C(e, s);
   var t = Po(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;
 }
-x.prototype = {
+C.prototype = {
   isDark: function() {
     return this.getBrightness() < 128;
   },
@@ -3735,7 +3735,7 @@ x.prototype = {
   toFilter: function(s) {
     var t = "#" + us(this._r, this._g, this._b, this._a), a = t, n = this._gradientType ? "GradientType = 1, " : "";
     if (s) {
-      var i = x(s);
+      var i = C(s);
       a = "#" + us(i._r, i._g, i._b, i._a);
     }
     return "progid:DXImageTransform.Microsoft.gradient(" + n + "startColorstr=" + t + ",endColorstr=" + a + ")";
@@ -3747,7 +3747,7 @@ x.prototype = {
     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 x(this.toString());
+    return C(this.toString());
   },
   _applyModification: function(s, t) {
     var a = s.apply(null, [this].concat([].slice.call(t)));
@@ -3800,14 +3800,14 @@ x.prototype = {
     return this._applyCombination(fs, [4]);
   }
 };
-x.fromRatio = function(e, s) {
+C.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] = Je(e[a]));
     e = t;
   }
-  return x(e, s);
+  return C(e, s);
 };
 function Po(e) {
   var s = {
@@ -3910,22 +3910,22 @@ function Lo(e, s, t) {
   };
 }
 function ds(e, s, t, a) {
-  var n = [me(Math.round(e).toString(16)), me(Math.round(s).toString(16)), me(Math.round(t).toString(16))];
+  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 Oo(e, s, t, a, n) {
-  var i = [me(Math.round(e).toString(16)), me(Math.round(s).toString(16)), me(Math.round(t).toString(16)), me(Ns(a))];
+  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("");
 }
 function us(e, s, t, a) {
-  var n = [me(Ns(a)), me(Math.round(e).toString(16)), me(Math.round(s).toString(16)), me(Math.round(t).toString(16))];
+  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("");
 }
-x.equals = function(e, s) {
-  return !e || !s ? !1 : x(e).toRgbString() == x(s).toRgbString();
+C.equals = function(e, s) {
+  return !e || !s ? !1 : C(e).toRgbString() == C(s).toRgbString();
 };
-x.random = function() {
-  return x.fromRatio({
+C.random = function() {
+  return C.fromRatio({
     r: Math.random(),
     g: Math.random(),
     b: Math.random()
@@ -3933,45 +3933,45 @@ x.random = function() {
 };
 function Ao(e, s) {
   s = s === 0 ? 0 : s || 10;
-  var t = x(e).toHsl();
-  return t.s -= s / 100, t.s = ht(t.s), x(t);
+  var t = C(e).toHsl();
+  return t.s -= s / 100, t.s = ht(t.s), C(t);
 }
 function No(e, s) {
   s = s === 0 ? 0 : s || 10;
-  var t = x(e).toHsl();
-  return t.s += s / 100, t.s = ht(t.s), x(t);
+  var t = C(e).toHsl();
+  return t.s += s / 100, t.s = ht(t.s), C(t);
 }
 function Do(e) {
-  return x(e).desaturate(100);
+  return C(e).desaturate(100);
 }
 function Ro(e, s) {
   s = s === 0 ? 0 : s || 10;
-  var t = x(e).toHsl();
-  return t.l += s / 100, t.l = ht(t.l), x(t);
+  var t = C(e).toHsl();
+  return t.l += s / 100, t.l = ht(t.l), C(t);
 }
 function Fo(e, s) {
   s = s === 0 ? 0 : s || 10;
-  var t = x(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)))), x(t);
+  var t = C(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)))), C(t);
 }
 function Vo(e, s) {
   s = s === 0 ? 0 : s || 10;
-  var t = x(e).toHsl();
-  return t.l -= s / 100, t.l = ht(t.l), x(t);
+  var t = C(e).toHsl();
+  return t.l -= s / 100, t.l = ht(t.l), C(t);
 }
 function Ho(e, s) {
-  var t = x(e).toHsl(), a = (t.h + s) % 360;
-  return t.h = a < 0 ? 360 + a : a, x(t);
+  var t = C(e).toHsl(), a = (t.h + s) % 360;
+  return t.h = a < 0 ? 360 + a : a, C(t);
 }
 function qo(e) {
-  var s = x(e).toHsl();
-  return s.h = (s.h + 180) % 360, x(s);
+  var s = C(e).toHsl();
+  return s.h = (s.h + 180) % 360, C(s);
 }
 function fs(e, s) {
   if (isNaN(s) || s <= 0)
     throw new Error("Argument to polyad must be a positive number");
-  for (var t = x(e).toHsl(), a = [x(e)], n = 360 / s, i = 1; i < s; i++)
-    a.push(x({
+  for (var t = C(e).toHsl(), a = [C(e)], n = 360 / s, i = 1; i < s; i++)
+    a.push(C({
       h: (t.h + i * n) % 360,
       s: t.s,
       l: t.l
@@ -3979,12 +3979,12 @@ function fs(e, s) {
   return a;
 }
 function Wo(e) {
-  var s = x(e).toHsl(), t = s.h;
-  return [x(e), x({
+  var s = C(e).toHsl(), t = s.h;
+  return [C(e), C({
     h: (t + 72) % 360,
     s: s.s,
     l: s.l
-  }), x({
+  }), C({
     h: (t + 216) % 360,
     s: s.s,
     l: s.l
@@ -3992,37 +3992,37 @@ function Wo(e) {
 }
 function jo(e, s, t) {
   s = s || 6, t = t || 30;
-  var a = x(e).toHsl(), n = 360 / t, i = [x(e)];
+  var a = C(e).toHsl(), n = 360 / t, i = [C(e)];
   for (a.h = (a.h - (n * s >> 1) + 720) % 360; --s; )
-    a.h = (a.h + n) % 360, i.push(x(a));
+    a.h = (a.h + n) % 360, i.push(C(a));
   return i;
 }
 function Uo(e, s) {
   s = s || 6;
-  for (var t = x(e).toHsv(), a = t.h, n = t.s, i = t.v, r = [], c = 1 / s; s--; )
-    r.push(x({
+  for (var t = C(e).toHsv(), a = t.h, n = t.s, i = t.v, r = [], c = 1 / s; s--; )
+    r.push(C({
       h: a,
       s: n,
       v: i
     })), i = (i + c) % 1;
   return r;
 }
-x.mix = function(e, s, t) {
+C.mix = function(e, s, t) {
   t = t === 0 ? 0 : t || 50;
-  var a = x(e).toRgb(), n = x(s).toRgb(), i = t / 100, r = {
+  var a = C(e).toRgb(), n = C(s).toRgb(), i = t / 100, r = {
     r: (n.r - a.r) * i + a.r,
     g: (n.g - a.g) * i + a.g,
     b: (n.b - a.b) * i + a.b,
     a: (n.a - a.a) * i + a.a
   };
-  return x(r);
+  return C(r);
 };
-x.readability = function(e, s) {
-  var t = x(e), a = x(s);
+C.readability = function(e, s) {
+  var t = C(e), a = C(s);
   return (Math.max(t.getLuminance(), a.getLuminance()) + 0.05) / (Math.min(t.getLuminance(), a.getLuminance()) + 0.05);
 };
-x.isReadable = function(e, s, t) {
-  var a = x.readability(e, s), n, i;
+C.isReadable = function(e, s, t) {
+  var a = C.readability(e, s), n, i;
   switch (i = !1, n = Jo(t), n.level + n.size) {
     case "AAsmall":
     case "AAAlarge":
@@ -4037,17 +4037,17 @@ x.isReadable = function(e, s, t) {
   }
   return i;
 };
-x.mostReadable = function(e, s, t) {
+C.mostReadable = function(e, s, t) {
   var a = null, n = 0, i, r, c, d;
   t = t || {}, r = t.includeFallbackColors, c = t.level, d = t.size;
   for (var m = 0; m < s.length; m++)
-    i = x.readability(e, s[m]), i > n && (n = i, a = x(s[m]));
-  return x.isReadable(e, a, {
+    i = C.readability(e, s[m]), i > n && (n = i, a = C(s[m]));
+  return C.isReadable(e, a, {
     level: c,
     size: d
-  }) || !r ? a : (t.includeFallbackColors = !1, x.mostReadable(e, ["#fff", "#000"], t));
+  }) || !r ? a : (t.includeFallbackColors = !1, C.mostReadable(e, ["#fff", "#000"], t));
 };
-var $t = x.names = {
+var $t = C.names = {
   aliceblue: "f0f8ff",
   antiquewhite: "faebd7",
   aqua: "0ff",
@@ -4197,7 +4197,7 @@ var $t = x.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-}, Go = x.hexNames = Ko($t);
+}, Go = C.hexNames = Ko($t);
 function Ko(e) {
   var s = {};
   for (var t in e)
@@ -4224,7 +4224,7 @@ function Yo(e) {
 function Xo(e) {
   return typeof e == "string" && e.indexOf("%") != -1;
 }
-function me(e) {
+function pe(e) {
   return e.length == 1 ? "0" + e : "" + e;
 }
 function Je(e) {
@@ -4236,7 +4236,7 @@ function Ns(e) {
 function gs(e) {
   return ne(e) / 255;
 }
-var ge = function() {
+var me = 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),
@@ -4253,7 +4253,7 @@ var ge = function() {
   };
 }();
 function ze(e) {
-  return !!ge.CSS_UNIT.exec(e);
+  return !!me.CSS_UNIT.exec(e);
 }
 function Zo(e) {
   e = e.replace(Eo, "").replace($o, "").toLowerCase();
@@ -4269,51 +4269,51 @@ function Zo(e) {
       format: "name"
     };
   var t;
-  return (t = ge.rgb.exec(e)) ? {
+  return (t = me.rgb.exec(e)) ? {
     r: t[1],
     g: t[2],
     b: t[3]
-  } : (t = ge.rgba.exec(e)) ? {
+  } : (t = me.rgba.exec(e)) ? {
     r: t[1],
     g: t[2],
     b: t[3],
     a: t[4]
-  } : (t = ge.hsl.exec(e)) ? {
+  } : (t = me.hsl.exec(e)) ? {
     h: t[1],
     s: t[2],
     l: t[3]
-  } : (t = ge.hsla.exec(e)) ? {
+  } : (t = me.hsla.exec(e)) ? {
     h: t[1],
     s: t[2],
     l: t[3],
     a: t[4]
-  } : (t = ge.hsv.exec(e)) ? {
+  } : (t = me.hsv.exec(e)) ? {
     h: t[1],
     s: t[2],
     v: t[3]
-  } : (t = ge.hsva.exec(e)) ? {
+  } : (t = me.hsva.exec(e)) ? {
     h: t[1],
     s: t[2],
     v: t[3],
     a: t[4]
-  } : (t = ge.hex8.exec(e)) ? {
+  } : (t = me.hex8.exec(e)) ? {
     r: ne(t[1]),
     g: ne(t[2]),
     b: ne(t[3]),
     a: gs(t[4]),
     format: s ? "name" : "hex8"
-  } : (t = ge.hex6.exec(e)) ? {
+  } : (t = me.hex6.exec(e)) ? {
     r: ne(t[1]),
     g: ne(t[2]),
     b: ne(t[3]),
     format: s ? "name" : "hex"
-  } : (t = ge.hex4.exec(e)) ? {
+  } : (t = me.hex4.exec(e)) ? {
     r: ne(t[1] + "" + t[1]),
     g: ne(t[2] + "" + t[2]),
     b: ne(t[3] + "" + t[3]),
     a: gs(t[4] + "" + t[4]),
     format: s ? "name" : "hex8"
-  } : (t = ge.hex3.exec(e)) ? {
+  } : (t = me.hex3.exec(e)) ? {
     r: ne(t[1] + "" + t[1]),
     g: ne(t[2] + "" + t[2]),
     b: ne(t[3] + "" + t[3]),
@@ -4367,7 +4367,7 @@ const Qo = {
     },
     colorIsDark() {
       if (this.selectedColor && this.selectedColor !== "")
-        return x(this.selectedColor).isDark();
+        return C(this.selectedColor).isDark();
     },
     selectedColorBackground() {
       if (this.selectedColor && this.selectedColor !== "")
@@ -4376,9 +4376,9 @@ const Qo = {
     selectedColorText() {
       if (this.selectedColor && this.selectedColor !== "")
         return this.colorIsDark ? {
-          color: x(this.selectedColor).lighten(65).toRgbString()
+          color: C(this.selectedColor).lighten(65).toRgbString()
         } : {
-          color: x(this.selectedColor).lighten(10).toRgbString()
+          color: C(this.selectedColor).lighten(10).toRgbString()
         };
     }
   },
@@ -4392,7 +4392,7 @@ function tr(e, s, t, a, n, i) {
     class: y(["ecs-context-button", [t.loading ? "loading" : "", i.iconOnly ? "ecs-context-button-icon-only" : ""]]),
     "aria-label": t.ariaLabel,
     "aria-busy": t.loading || null,
-    style: C(i.selectedColorText),
+    style: x(i.selectedColorText),
     onClick: s[0] || (s[0] = (d) => e.$emit("click", d))
   }, [
     t.icon || t.loading ? (o(), h(r, {
@@ -4403,7 +4403,7 @@ function tr(e, s, t, a, n, i) {
     t.selectedColor ? (o(), l("div", {
       key: 1,
       class: "ecs-context-button-color",
-      style: C(i.selectedColorBackground)
+      style: x(i.selectedColorBackground)
     }, null, 4)) : u("", !0),
     p(e.$slots, "default", {}, void 0, !0),
     _(c)
@@ -4749,7 +4749,7 @@ const Ab = /* @__PURE__ */ v(yr, [["render", kr], ["__scopeId", "data-v-2beac513
       return `item-${this.id}`;
     }
   }
-}, Sr = ["id"], xr = { class: "ecs-card-inner" }, Cr = { class: "ecs-card-background" };
+}, Sr = ["id"], Cr = { class: "ecs-card-inner" }, xr = { 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)),
@@ -4761,14 +4761,14 @@ function Br(e, s, t, a, n, i) {
     ]]),
     id: i.itemId
   }, [
-    f("div", xr, [
+    f("div", Cr, [
       p(e.$slots, "default", {}, void 0, !0)
     ]),
-    f("div", Cr, [
+    f("div", xr, [
       t.progress ? (o(), l("div", {
         key: 0,
         class: "progress",
-        style: C({ width: t.progress + "%" })
+        style: x({ width: t.progress + "%" })
       }, null, 4)) : u("", !0)
     ])
   ], 10, Sr);
@@ -4860,7 +4860,7 @@ var $r = Wt.clickOutSide = {
 const Tr = {
   name: "ecs-context-menu",
   emits: ["option-clicked", "menu-closed", "menu-opened"],
-  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: xe },
+  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: Ce },
   directives: {
     clickOutSide: Pr
   },
@@ -4971,7 +4971,7 @@ function Ar(e, s, t, a, n, i) {
   return Ge((o(), l("div", {
     class: y(["ecs-context-menu", n.opened ? " opened" : ""]),
     id: t.elementId,
-    style: C([i.postionStyles])
+    style: x([i.postionStyles])
   }, [
     f("ul", {
       role: "menu",
@@ -5025,7 +5025,7 @@ function Ar(e, s, t, a, n, i) {
 const Rb = /* @__PURE__ */ v(Tr, [["render", Ar], ["__scopeId", "data-v-68234afa"]]), Nr = {
   name: "ecs-collapse",
   emits: ["toggled", "remove"],
-  components: { EcsButton: xe, EcsFocusRing: L, EcsFlexRow: Te },
+  components: { EcsButton: Ce, EcsFocusRing: L, EcsFlexRow: Te },
   props: {
     /** Unique ID, is required to handle persist states. */
     id: {
@@ -5087,6 +5087,11 @@ const Rb = /* @__PURE__ */ v(Tr, [["render", Ar], ["__scopeId", "data-v-68234afa
     /** Sets the count of the collapse control in parenthese next to the headline. */
     count: {
       type: Number
+    },
+    /** Hides the controls when the collapse is closed */
+    hideControlsWhenCollapsed: {
+      type: Boolean,
+      default: !1
     }
   },
   data() {
@@ -5172,9 +5177,14 @@ function qr(e, s, t, a, n, i) {
           inset: 0,
           radius: 0
         }),
-        e.$slots.controls ? (o(), l("div", Vr, [
-          p(e.$slots, "controls", {}, void 0, !0)
-        ])) : u("", !0)
+        _(ue, { name: "fade" }, {
+          default: S(() => [
+            e.$slots.controls && (!t.hideControlsWhenCollapsed || n.isVisible) ? (o(), l("div", Vr, [
+              p(e.$slots, "controls", {}, void 0, !0)
+            ])) : u("", !0)
+          ]),
+          _: 3
+        })
       ], 42, Rr)
     ]),
     f("div", {
@@ -5190,11 +5200,11 @@ function qr(e, s, t, a, n, i) {
     ], 10, Hr)
   ], 2);
 }
-const Fb = /* @__PURE__ */ v(Nr, [["render", qr], ["__scopeId", "data-v-b2ce05ee"]]), Wr = {
+const Fb = /* @__PURE__ */ v(Nr, [["render", qr], ["__scopeId", "data-v-56e0b99c"]]), Wr = {
   name: "ecs-collection-control",
   emits: ["toggled", "collectionTooltip"],
   components: { EcsIcon: M, EcsFocusRing: L },
-  mixins: [ue],
+  mixins: [fe],
   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: {
@@ -5325,7 +5335,7 @@ function Xr(e, s, t, a, n, i) {
     }, [
       f("div", {
         class: "ecs-collection-control-list scrollbar scrollbar-sml",
-        style: C(i.listMaxHeight)
+        style: x(i.listMaxHeight)
       }, [
         p(e.$slots, "default")
       ], 4)
@@ -5378,7 +5388,7 @@ function sl(e, s, t, a, n, i) {
   return t.type === "rect" || t.type === "circle" ? (o(), l("div", {
     key: 0,
     class: y(["ecs-skeleton skeleton", i.rectClass]),
-    style: C({ width: t.width + "px", height: t.height + "px" })
+    style: x({ width: t.width + "px", height: t.height + "px" })
   }, null, 6)) : t.type === "multi" ? (o(), l("div", Qr, [
     (o(!0), l(X, null, he(parseInt(t.count), (r) => (o(), l("div", {
       key: r,
@@ -5390,14 +5400,14 @@ function sl(e, s, t, a, n, i) {
   }, [
     f("div", {
       class: "skeleton skeleton-single",
-      style: C({ width: t.width + "%" })
+      style: x({ width: t.width + "%" })
     }, null, 4)
   ], 2));
 }
-const fe = /* @__PURE__ */ v(Zr, [["render", sl], ["__scopeId", "data-v-75354c78"]]), il = {
+const ge = /* @__PURE__ */ v(Zr, [["render", sl], ["__scopeId", "data-v-75354c78"]]), il = {
   name: "ecs-formatted",
-  components: { EcsSkeletonLoader: fe },
-  mixins: [ue],
+  components: { EcsSkeletonLoader: ge },
+  mixins: [fe],
   props: {
     /** Sets the general font size of the formatted text component to small. */
     small: {
@@ -5445,7 +5455,7 @@ function al(e, s, t, a, n, i) {
 const Fs = /* @__PURE__ */ v(il, [["render", al]]), ol = {
   name: "ecs-comment",
   emits: ["edit", "delete"],
-  components: { EcsAvatar: Li, EcsButton: xe, EcsFormatted: Fs, EcsSkeletonLoader: fe },
+  components: { EcsAvatar: Li, EcsButton: Ce, EcsFormatted: Fs, EcsSkeletonLoader: ge },
   props: {
     /** Name of the user that is the comment author. */
     userName: {
@@ -5564,10 +5574,10 @@ function bl(e, s) {
   ]);
 }
 const qb = /* @__PURE__ */ v(vl, [["render", bl]]);
-function xt(e = {}, s = 0) {
+function Ct(e = {}, s = 0) {
   const t = e && e.a;
   let a;
-  e && e.hsl ? a = x(e.hsl) : e && e.hex && e.hex.length > 0 ? a = x(e.hex) : e && e.hsv ? a = x(e.hsv) : e && e.rgba ? a = x(e.rgba) : e && e.rgb ? a = x(e.rgb) : a = x(e), a && (a._a === void 0 || a._a === null) && a.setAlpha(t || 1);
+  e && e.hsl ? a = C(e.hsl) : e && e.hex && e.hex.length > 0 ? a = C(e.hex) : e && e.hsv ? a = C(e.hsv) : e && e.rgba ? a = C(e.rgba) : e && e.rgb ? a = C(e.rgb) : a = C(e), a && (a._a === void 0 || a._a === null) && a.setAlpha(t || 1);
   const n = a.toHsl(), i = a.toHsv();
   return n.s === 0 && (i.h = n.h = e.h || e.hsl && e.hsl.h || s || 0), {
     hsl: n,
@@ -5584,7 +5594,7 @@ const _l = {
   props: ["modelValue"],
   data() {
     return {
-      val: xt(this.modelValue)
+      val: Ct(this.modelValue)
     };
   },
   computed: {
@@ -5599,15 +5609,15 @@ const _l = {
   },
   watch: {
     modelValue(e) {
-      this.val = xt(e);
+      this.val = Ct(e);
     }
   },
   methods: {
     colorChange(e, s) {
-      this.oldHue = this.colors.hsl.h, this.colors = xt(e, s || this.oldHue);
+      this.oldHue = this.colors.hsl.h, this.colors = Ct(e, s || this.oldHue);
     },
     isValidHex(e) {
-      return x(e).isValid();
+      return C(e).isValid();
     },
     simpleCheckForValidColor(e) {
       const s = ["r", "g", "b", "a", "h", "s", "l", "v"];
@@ -5623,7 +5633,7 @@ const _l = {
       return e.map((s) => s.toUpperCase());
     },
     isTransparent(e) {
-      return x(e).getAlpha() === 0;
+      return C(e).getAlpha() === 0;
     }
   }
 }, kl = {
@@ -5687,7 +5697,7 @@ const _l = {
     //   console.log(e)
     // }
   }
-}, wl = { class: "ecs-editable-input" }, Sl = ["aria-labelledby"], xl = ["for", "id"], Cl = { class: "ecs-input__desc" };
+}, wl = { class: "ecs-editable-input" }, Sl = ["aria-labelledby"], Cl = ["for", "id"], xl = { class: "ecs-input__desc" };
 function Bl(e, s, t, a, n, i) {
   return o(), l("div", wl, [
     Ge(f("input", {
@@ -5704,8 +5714,8 @@ function Bl(e, s, t, a, n, i) {
       for: t.label,
       class: "ecs-input__label",
       id: i.labelId
-    }, w(i.labelSpanText), 9, xl),
-    f("span", Cl, w(t.desc), 1)
+    }, w(i.labelSpanText), 9, Cl),
+    f("span", xl, w(t.desc), 1)
   ]);
 }
 const zl = /* @__PURE__ */ v(kl, [["render", Bl]]);
@@ -5773,12 +5783,12 @@ function kc(e) {
   var t = yc.test(e);
   return t || bc.test(e) ? _c(e.slice(2), t ? 2 : 8) : vc.test(e) ? ys : +e;
 }
-var wc = kc, Sc = jt, Ct = Dl, bs = wc, xc = "Expected a function", Cc = Math.max, Bc = Math.min;
+var wc = kc, Sc = jt, xt = Dl, bs = wc, Cc = "Expected a function", xc = Math.max, Bc = Math.min;
 function zc(e, s, t) {
   var a, n, i, r, c, d, m = 0, b = !1, k = !1, z = !0;
   if (typeof e != "function")
-    throw new TypeError(xc);
-  s = bs(s) || 0, Sc(t) && (b = !!t.leading, k = "maxWait" in t, i = k ? Cc(bs(t.maxWait) || 0, s) : i, z = "trailing" in t ? !!t.trailing : z);
+    throw new TypeError(Cc);
+  s = bs(s) || 0, Sc(t) && (b = !!t.leading, k = "maxWait" in t, i = k ? xc(bs(t.maxWait) || 0, s) : i, z = "trailing" in t ? !!t.trailing : z);
   function I(E) {
     var N = a, F = n;
     return a = n = void 0, m = E, r = e.apply(F, N), r;
@@ -5795,7 +5805,7 @@ function zc(e, s, t) {
     return d === void 0 || N >= s || N < 0 || k && F >= i;
   }
   function O() {
-    var E = Ct();
+    var E = xt();
     if (T(E))
       return R(E);
     c = setTimeout(O, $(E));
@@ -5807,10 +5817,10 @@ function zc(e, s, t) {
     c !== void 0 && clearTimeout(c), m = 0, a = d = n = c = void 0;
   }
   function P() {
-    return c === void 0 ? r : R(Ct());
+    return c === void 0 ? r : R(xt());
   }
   function A() {
-    var E = Ct(), N = T(E);
+    var E = xt(), N = T(E);
     if (a = arguments, n = this, d = E, N) {
       if (c === void 0)
         return B(d);
@@ -5897,7 +5907,7 @@ const Lc = /* @__PURE__ */ Ss(Mc), Oc = {
 function Fc(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-saturation",
-    style: C({ background: i.bgColor }),
+    style: x({ background: i.bgColor }),
     ref: "container",
     onMousedown: s[0] || (s[0] = (...r) => i.handleMouseDown && i.handleMouseDown(...r)),
     onTouchmove: s[1] || (s[1] = (...r) => i.handleChange && i.handleChange(...r)),
@@ -5907,7 +5917,7 @@ function Fc(e, s, t, a, n, i) {
     Nc,
     f("div", {
       class: "ecs-saturation-pointer",
-      style: C({ top: i.pointerTop, left: i.pointerLeft })
+      style: x({ top: i.pointerTop, left: i.pointerLeft })
     }, Rc, 4)
   ], 36);
 }
@@ -5997,7 +6007,7 @@ function Uc(e, s, t, a, n, i) {
     }, [
       f("div", {
         class: "ecs-hue-pointer",
-        style: C({ top: i.pointerTop, left: i.pointerLeft }),
+        style: x({ top: i.pointerTop, left: i.pointerLeft }),
         role: "presentation"
       }, jc, 4)
     ], 40, qc)
@@ -6047,7 +6057,7 @@ function Xc(e, s, t) {
 function Zc(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-checkerboard",
-    style: C(i.bgStyle)
+    style: x(i.bgStyle)
   }, null, 4);
 }
 const Ws = /* @__PURE__ */ v(Kc, [["render", Zc]]), Jc = {
@@ -6105,7 +6115,7 @@ function id(e, s, t, a, n, i) {
     ]),
     f("div", {
       class: "ecs-alpha-gradient",
-      style: C({ background: i.gradientColor })
+      style: x({ background: i.gradientColor })
     }, null, 4),
     f("div", {
       class: "ecs-alpha-container",
@@ -6116,7 +6126,7 @@ function id(e, s, t, a, n, i) {
     }, [
       f("div", {
         class: "ecs-alpha-pointer",
-        style: C({ left: i.colors.a * 100 + "%" })
+        style: x({ left: i.colors.a * 100 + "%" })
       }, sd, 4)
     ], 544)
   ]);
@@ -6223,7 +6233,7 @@ function bd(e, s, t, a, n, i) {
     role: "application",
     "aria-label": "Color picker",
     class: y(["ecs-color-picker", t.disableAlpha ? "ecs-color-picker__disable-alpha" : ""]),
-    style: C({ padding: t.padding + "px", width: 216 + 2 * t.padding + "px" })
+    style: x({ padding: t.padding + "px", width: 216 + 2 * t.padding + "px" })
   }, [
     t.disableCustom ? u("", !0) : (o(), l("div", od, [
       _(r, {
@@ -6292,7 +6302,7 @@ function bd(e, s, t, a, n, i) {
     ])) : u("", !0),
     f("div", {
       class: "ecs-color-picker-presets",
-      style: C(t.disableCustom ? "" : "padding-top: var(--spacing-10)"),
+      style: x(t.disableCustom ? "" : "padding-top: var(--spacing-10)"),
       role: "group",
       "aria-label": "A color preset, pick one to set as current color"
     }, [
@@ -6309,7 +6319,7 @@ function bd(e, s, t, a, n, i) {
           class: y(["ecs-color-picker-presets-color", { active: e.colors.hex === k.hex }]),
           "aria-label": k.title,
           key: "if-" + k.id,
-          style: C({ background: k.hex }),
+          style: x({ background: k.hex }),
           "aria-selected": e.colors.hex === k.hex ? "true" : "false",
           title: k.title,
           onClick: (z) => i.handlePreset(k.hex)
@@ -6320,7 +6330,7 @@ function bd(e, s, t, a, n, i) {
         class: y(["ecs-color-picker-presets-color active", i.isActiveColorDark ? "dark" : "light"]),
         "aria-label": "Custom color",
         "aria-selected": "true",
-        style: C({ background: e.colors.hex })
+        style: x({ background: e.colors.hex })
       }, null, 6))
     ], 4)
   ], 6);
@@ -6404,7 +6414,7 @@ function wd(e, s, t, a, n, i) {
     default: S(() => [
       f("button", {
         class: y(["ecs-color-picker-input-button", i.sizeClass]),
-        style: C(i.selectedColorStyle)
+        style: x(i.selectedColorStyle)
       }, [
         f("span", null, w(i.selectedColorName), 1)
       ], 6)
@@ -6414,8 +6424,8 @@ function wd(e, s, t, a, n, i) {
 }
 const Wb = /* @__PURE__ */ v(kd, [["render", wd], ["__scopeId", "data-v-08aaa823"]]), Sd = {
   name: "ecs-data-card",
-  components: { EcsIcon: M, EcsSkeletonLoader: fe, EcsButtonTable: Rs, EcsButton: xe, EcsFocusRing: L },
-  mixins: [ue],
+  components: { EcsIcon: M, EcsSkeletonLoader: ge, EcsButtonTable: Rs, EcsButton: Ce, EcsFocusRing: L },
+  mixins: [fe],
   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). */
     icon: {
@@ -6500,7 +6510,7 @@ const Wb = /* @__PURE__ */ v(kd, [["render", wd], ["__scopeId", "data-v-08aaa823
   created() {
     this.expandId = this.generateUniqueId();
   }
-}, xd = ["aria-busy", "tabindex"], Cd = {
+}, Cd = ["aria-busy", "tabindex"], xd = {
   key: 0,
   class: "control"
 }, Bd = { class: "ecs-data-card-inner" }, zd = { class: "ecs-data-card-row" }, Id = { class: "ecs-data-card-row-inner" }, Ed = { class: "ecs-data-card-row-inner-text" }, $d = {
@@ -6522,7 +6532,7 @@ function Ld(e, s, t, a, n, i) {
     "aria-busy": t.loading || null,
     tabindex: t.hover ? "0" : "-1"
   }, [
-    t.control && e.$slots.control ? (o(), l("div", Cd, [
+    t.control && e.$slots.control ? (o(), l("div", xd, [
       p(e.$slots, "control", {}, void 0, !0)
     ])) : u("", !0),
     t.icon ? (o(), h(r, {
@@ -6611,7 +6621,7 @@ function Ld(e, s, t, a, n, i) {
       inset: 0,
       radius: 0
     })) : u("", !0)
-  ], 10, xd);
+  ], 10, Cd);
 }
 const jb = /* @__PURE__ */ v(Sd, [["render", Ld], ["__scopeId", "data-v-206dd488"]]), Od = {
   name: "ecs-data-card-list"
@@ -7203,7 +7213,7 @@ function vu(e, s, t, a, n, i) {
       t.fixedLeftLast ? "fixed-left-last" : "",
       t.fixedRight ? "fixed-right" : ""
     ]]),
-    style: C([
+    style: x([
       i.widthType === "string" ? i.widthStyles : {},
       i.fixedStyles
     ]),
@@ -7215,7 +7225,7 @@ function vu(e, s, t, a, n, i) {
     f("div", {
       ref: "resizer",
       class: y(["ecs-data-grid-head-cell-inner", t.resizable ? "resizable" : ""]),
-      style: C([
+      style: x([
         i.widthType === "number" ? i.widthStyles : { width: "100%" },
         i.paddingStyles,
         i.resizeStyles,
@@ -7450,7 +7460,7 @@ const Xb = /* @__PURE__ */ v(yu, [["render", _u], ["__scopeId", "data-v-ee025ab5
 }, wu = (e) => (be("data-v-4deed396"), e = e(), _e(), e), Su = {
   key: 0,
   class: "shadow left"
-}, xu = ["data-column", "data-test"], Cu = {
+}, Cu = ["data-column", "data-test"], xu = {
   key: 0,
   class: "first-cell-spacer"
 }, Bu = /* @__PURE__ */ wu(() => /* @__PURE__ */ f("div", { class: "group-spacer" }, null, -1)), zu = {
@@ -7461,17 +7471,17 @@ function Iu(e, s, t, a, n, i) {
   const r = g("ecs-button-collapse");
   return o(), l("div", {
     class: y(["ecs-data-grid-cell", [t.fixedLeft ? "fixed-left" : "", t.fixedLeftLast ? "fixed-left-last" : "", t.fixedRight ? "fixed-right" : ""]]),
-    style: C([i.widthType === "string" ? i.widthStyles : {}, i.fixedStyles]),
+    style: x([i.widthType === "string" ? i.widthStyles : {}, i.fixedStyles]),
     role: "cell"
   }, [
     t.fixedRight ? (o(), l("div", Su)) : u("", !0),
     f("div", {
       class: "ecs-data-grid-cell-inner",
-      style: C([i.widthType === "number" ? i.widthStyles : { width: "100%" }, i.paddingStyles, t.styles]),
+      style: x([i.widthType === "number" ? i.widthStyles : { width: "100%" }, i.paddingStyles, t.styles]),
       "data-column": i.computedId,
       "data-test": i.computedId
     }, [
-      t.firstNonStaticCell ? (o(), l("div", Cu)) : u("", !0),
+      t.firstNonStaticCell ? (o(), l("div", xu)) : u("", !0),
       Bu,
       t.hasCollapse ? (o(), h(r, {
         key: 1,
@@ -7480,7 +7490,7 @@ function Iu(e, s, t, a, n, i) {
         type: "chevron"
       }, null, 8, ["onClick", "collapsed"])) : u("", !0),
       p(e.$slots, "default", {}, void 0, !0)
-    ], 12, xu),
+    ], 12, Cu),
     t.fixedLeftLast ? (o(), l("div", zu)) : u("", !0)
   ], 6);
 }
@@ -7498,8 +7508,8 @@ function Pu(e, s, t, a, n, i) {
 const Jb = /* @__PURE__ */ v(Eu, [["render", Pu]]), Tu = {
   name: "ecs-data-list-item",
   emits: ["toggled"],
-  components: { EcsButtonMore: Ds, EcsSkeletonLoader: fe },
-  mixins: [ue],
+  components: { EcsButtonMore: Ds, EcsSkeletonLoader: ge },
+  mixins: [fe],
   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. */
     identifier: {
@@ -7624,7 +7634,7 @@ function Nu(e, s, t, a, n, i) {
       i.hasIdentifier ? (o(), l("div", {
         key: 0,
         id: n.definitionId,
-        style: C(i.identifierStyle),
+        style: x(i.identifierStyle),
         class: "ecs-data-list-identifier"
       }, [
         D(w(t.identifier) + " ", 1),
@@ -7657,7 +7667,7 @@ function Nu(e, s, t, a, n, i) {
           key: 2,
           class: "progress",
           role: "progressbar",
-          style: C({ width: t.progress + "%" }),
+          style: x({ width: t.progress + "%" }),
           "aria-valuenow": t.progress
         }, null, 12, Ou)) : u("", !0)
       ], 10, Lu)
@@ -7822,7 +7832,7 @@ const e_ = /* @__PURE__ */ v(Du, [["render", Fu]]), Vu = {
       ));
     }), (n, i) => (o(), l("div", {
       class: y(["ecs-state-icon", e.iconColor]),
-      style: C(t.value)
+      style: x(t.value)
     }, [
       (o(), h(Ee(ae(a)), {
         height: e.size,
@@ -7950,7 +7960,7 @@ function Zu(e, s, t, a, n, i) {
     t.indicator ? (o(), l("div", {
       key: 2,
       class: "indicator",
-      style: C("background-color:" + t.indicator)
+      style: x("background-color:" + t.indicator)
     }, null, 4)) : u("", !0),
     f("div", Xu, [
       p(e.$slots, "default", {}, void 0, !0)
@@ -7961,7 +7971,7 @@ const s_ = /* @__PURE__ */ v(Ku, [["render", Zu], ["__scopeId", "data-v-800f5f8e
   name: "ecs-document-state",
   components: {
     EcsIcon: M,
-    EcsSkeletonLoader: fe
+    EcsSkeletonLoader: ge
   },
   props: {
     /** Determines if the document has been processed by OCR. */
@@ -8078,7 +8088,7 @@ const i_ = /* @__PURE__ */ v(Ju, [["render", of], ["__scopeId", "data-v-8239e8d6
 function uf(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-donut-chart",
-    style: C(i.wrapperPadding)
+    style: x(i.wrapperPadding)
   }, [
     (o(), l("svg", {
       height: t.size,
@@ -8219,7 +8229,7 @@ function _f(e, s, t, a, n, i) {
         t.infinite ? "ecs-progress-infinite" : "",
         t.cancelled ? "ecs-progress-cancelled" : ""
       ]]),
-      style: C({ width: 100 * (t.value / i.computedMax) + "%" })
+      style: x({ width: 100 * (t.value / i.computedMax) + "%" })
     }, null, 6)
   ], 8, bf);
 }
@@ -8228,9 +8238,9 @@ const kf = /* @__PURE__ */ v(yf, [["render", _f], ["__scopeId", "data-v-fc9084ab
   emits: ["onFileDrop", "cancel"],
   components: {
     EcsEmptyState: vf,
-    EcsSkeletonLoader: fe,
+    EcsSkeletonLoader: ge,
     EcsProgress: kf,
-    EcsButton: xe,
+    EcsButton: Ce,
     EcsFocusRing: L,
     EcsFlexRow: Te,
     EcsSticker: Fe,
@@ -8376,7 +8386,7 @@ const kf = /* @__PURE__ */ v(yf, [["render", _f], ["__scopeId", "data-v-fc9084ab
   beforeUnmount() {
     document.removeEventListener("dragenter", this.show);
   }
-}, Sf = ["aria-busy", "aria-invalid"], xf = ["multiple"], Cf = { key: 1 }, Bf = { key: 1 }, zf = {
+}, Sf = ["aria-busy", "aria-invalid"], Cf = ["multiple"], xf = { key: 1 }, Bf = { key: 1 }, zf = {
   key: 2,
   class: "ecs-dropzone-hint"
 }, If = {
@@ -8403,7 +8413,7 @@ function $f(e, s, t, a, n, i) {
       type: "file",
       multiple: t.multiple || null,
       ref: "file"
-    }, null, 40, xf),
+    }, null, 40, Cf),
     _(z, {
       type: i.iconType,
       iconColor: i.iconColor
@@ -8414,7 +8424,7 @@ function $f(e, s, t, a, n, i) {
           type: "single",
           width: 100,
           class: "ecs-dropzone-skeleton"
-        })) : (o(), l("div", Cf, [
+        })) : (o(), l("div", xf, [
           e.$slots.customlabel ? u("", !0) : (o(), l(X, { key: 0 }, [
             D(" Drag and drop your " + w(t.fileTypeLabel) + " or ", 1),
             f("i", {
@@ -8620,7 +8630,7 @@ function Af(e, s, t, a, n, i) {
 }
 const o_ = /* @__PURE__ */ v(Pf, [["render", Af], ["__scopeId", "data-v-00b5ab33"]]), Nf = {
   name: "ecs-excerpt-snippet",
-  components: { EcsIcon: M, EcsSkeletonLoader: fe, EcsFormatted: Fs },
+  components: { EcsIcon: M, EcsSkeletonLoader: ge, EcsFormatted: Fs },
   props: {
     /** Determines how the content of the excerpt should be rendered. */
     type: {
@@ -8722,7 +8732,7 @@ function Uf(e, s, t, a, n, i) {
     ]),
     f("div", {
       class: "ecs-excerpt-content scrollbar scrollbar-sml",
-      style: C(i.maxHeightStyles)
+      style: x(i.maxHeightStyles)
     }, [
       t.loading ? (o(), h(r, {
         key: 0,
@@ -8741,10 +8751,10 @@ function Uf(e, s, t, a, n, i) {
           p(e.$slots, "default", {}, void 0, !0)
         ])) : t.type == "rectangle" ? (o(), l("div", Wf, [
           f("span", {
-            style: C("color:" + t.annotationColor)
+            style: x("color:" + t.annotationColor)
           }, "Rectangle Annotation", 4),
           f("div", {
-            style: C("background-color:" + t.annotationColor)
+            style: x("background-color:" + t.annotationColor)
           }, null, 4)
         ])) : (o(), l("div", jf, [
           p(e.$slots, "default", {}, void 0, !0)
@@ -8814,7 +8824,7 @@ const c_ = /* @__PURE__ */ v(Gf, [["render", Yf]]), Xf = {
     EcsButtonTable: Rs,
     EcsFocusRing: L
   },
-  mixins: [ue],
+  mixins: [fe],
   props: {
     /** Adds a button to the right of the list items, which allows to remove/delete the item. Emits the `@remove` event on click.  */
     remove: {
@@ -8940,7 +8950,7 @@ function lg(e, s, t, a, n, i) {
     tabindex: t.hover ? "0" : "-1"
   }, [
     t.hover ? (o(), h(r, { key: 0 })) : u("", !0),
-    _(pe, { name: "title" }, {
+    _(ue, { name: "title" }, {
       default: S(() => [
         t.showTitleEdit || !t.edit ? (o(), l("div", Jf, [
           t.icon ? (o(), h(c, {
@@ -9010,7 +9020,7 @@ function lg(e, s, t, a, n, i) {
           t.progress ? (o(), l("div", {
             key: 3,
             class: "loading-bar",
-            style: C({ width: t.progress + "%" }),
+            style: x({ width: t.progress + "%" }),
             role: "progressbar",
             "aria-valuenow": t.progress
           }, null, 12, ig)) : u("", !0)
@@ -9031,11 +9041,11 @@ function lg(e, s, t, a, n, i) {
     }, [
       p(e.$slots, "collapse", {}, void 0, !0)
     ], 10, ag)) : u("", !0),
-    _(pe, { name: "edit" }, {
+    _(ue, { name: "edit" }, {
       default: S(() => [
         e.$slots.edit && t.edit ? (o(), l("div", {
           key: 0,
-          style: C({ maxHeight: n.editHeight + "px" }),
+          style: x({ maxHeight: n.editHeight + "px" }),
           id: n.editId
         }, [
           f("div", rg, [
@@ -9341,24 +9351,24 @@ const wg = /* @__PURE__ */ v(bg, [["render", kg], ["__scopeId", "data-v-a408f72e
     }
   }
 };
-function xg(e, s, t, a, n, i) {
+function Cg(e, s, t, a, n, i) {
   return o(), l("div", {
     class: y(["ecs-scroll-container scrollbar scrollbar-sml vertical", [
       t.borderless ? "" : "ecs-scroll-container-border",
       t.hideShadows ? "" : "ecs-scroll-container-shadows"
     ]]),
-    style: C({ maxHeight: t.height, padding: t.padding })
+    style: x({ maxHeight: t.height, padding: t.padding })
   }, [
     p(e.$slots, "default", {}, void 0, !0)
   ], 6);
 }
-const Cg = /* @__PURE__ */ v(Sg, [["render", xg], ["__scopeId", "data-v-d87a8075"]]), Bg = {
+const xg = /* @__PURE__ */ v(Sg, [["render", Cg], ["__scopeId", "data-v-d87a8075"]]), Bg = {
   name: "ecs-folder-selector",
   emits: ["search", "add"],
   components: {
     EcsInputSearch: wg,
-    EcsScrollContainer: Cg,
-    EcsButton: xe
+    EcsScrollContainer: xg,
+    EcsButton: Ce
   },
   props: {
     /** Determines if the folder selector control has a search bar to filter by folder name. */
@@ -9419,7 +9429,7 @@ function Eg(e, s, t, a, n, i) {
   const r = g("ecs-input-search"), c = g("ecs-button"), d = g("ecs-scroll-container");
   return o(), l("div", {
     class: y(["ecs-folder-selector", [t.framed ? "ecs-folder-selector-border" : ""]]),
-    style: C({ height: i.isFullHeight })
+    style: x({ height: i.isFullHeight })
   }, [
     t.searchable || t.create ? (o(), l("div", zg, [
       t.searchable ? (o(), h(r, {
@@ -9466,50 +9476,58 @@ const f_ = /* @__PURE__ */ v(Bg, [["render", Eg], ["__scopeId", "data-v-0056e40b
       type: Boolean,
       default: !1
     },
+    /** If set, the input control will show up in a warning state. */
+    warning: {
+      type: Boolean,
+      default: !1
+    },
     /** Renders a small helper text underneath the input control. */
     helpText: {
-      type: String
+      type: String,
+      default: ""
     },
-    /** Shows an error message underneath the input control. Should be used together with the `error`prop. */
+    /** Shows an error message underneath the input control. Should be used together with the `error` prop. */
     errorText: {
-      type: String
+      type: String,
+      default: ""
+    },
+    /** Shows a warning message underneath the input control. Should be used together with the `warning` prop. */
+    warningText: {
+      type: String,
+      default: ""
     },
     /** Shows a success message underneath the input control. */
     successText: {
-      type: String
-    }
-  },
-  computed: {
-    hasHelp() {
-      return this.helpText && this.helpText !== "" ? !0 : this.helpText;
-    },
-    hasSuccessText() {
-      return this.successText && this.successText !== "" ? !0 : this.successText;
-    },
-    hasErrorText() {
-      return this.errorText && this.errorText !== "" ? !0 : this.errorText;
+      type: String,
+      default: ""
     }
   }
 };
 function Pg(e, s, t, a, n, i) {
   const r = g("ecs-text");
   return o(), l("div", {
-    class: y(["ecs-form-group", t.error ? "error" : ""])
+    class: y(["ecs-form-group", { error: t.error, warning: t.warning }])
   }, [
     p(e.$slots, "default", {}, void 0, !0),
-    i.hasHelp ? (o(), h(r, {
+    t.helpText ? (o(), h(r, {
       key: 0,
       innerHTML: t.helpText,
       type: "form"
     }, null, 8, ["innerHTML"])) : u("", !0),
-    i.hasErrorText ? (o(), h(r, {
+    t.errorText ? (o(), h(r, {
       key: 1,
       innerHTML: t.errorText,
       type: "form",
       color: "negative"
     }, null, 8, ["innerHTML"])) : u("", !0),
-    i.hasSuccessText ? (o(), h(r, {
+    t.warningText ? (o(), h(r, {
       key: 2,
+      innerHTML: t.warningText,
+      type: "form",
+      color: "warning"
+    }, null, 8, ["innerHTML"])) : u("", !0),
+    t.successText ? (o(), h(r, {
+      key: 3,
       innerHTML: t.successText,
       type: "form",
       color: "positive",
@@ -9517,7 +9535,7 @@ function Pg(e, s, t, a, n, i) {
     }, null, 8, ["innerHTML"])) : u("", !0)
   ], 2);
 }
-const Tg = /* @__PURE__ */ v($g, [["render", Pg], ["__scopeId", "data-v-2a3b81f3"]]), Mg = {}, Lg = { class: "ecs-form-headline" }, Og = { class: "ecs-form-headline-main" }, Ag = {
+const Tg = /* @__PURE__ */ v($g, [["render", Pg], ["__scopeId", "data-v-42feea1d"]]), Mg = {}, Lg = { class: "ecs-form-headline" }, Og = { class: "ecs-form-headline-main" }, Ag = {
   key: 0,
   class: "ecs-form-headline-controls"
 };
@@ -9597,7 +9615,7 @@ const m_ = /* @__PURE__ */ v(Dg, [["render", Vg], ["__scopeId", "data-v-c9188464
       return this.color ? this.type === "background" ? {
         "--ecs-highlight-background": this.color
       } : {
-        "--ecs-highlight-background": x(this.color).setAlpha(0.1).toRgbString(),
+        "--ecs-highlight-background": C(this.color).setAlpha(0.1).toRgbString(),
         "--ecs-highlight-border": this.color
       } : this.type === "background" ? {
         "--ecs-highlight-background": "var(--color-yellow-3)"
@@ -9627,7 +9645,7 @@ const m_ = /* @__PURE__ */ v(Dg, [["render", Vg], ["__scopeId", "data-v-c9188464
   }
 };
 function qg(e, s, t, a, n, i) {
-  return o(), h(pe, {
+  return o(), h(ue, {
     name: "fade",
     appear: ""
   }, {
@@ -9635,7 +9653,7 @@ function qg(e, s, t, a, n, i) {
       i.showHighlight ? (o(), l("div", {
         key: 0,
         class: y(["ecs-highlight", [i.classes]]),
-        style: C({ ...i.highlightColor, ...i.borderRadiusStyle, ...i.insetStyles })
+        style: x({ ...i.highlightColor, ...i.borderRadiusStyle, ...i.insetStyles })
       }, [
         t.layout === "wrap" ? p(e.$slots, "default", { key: 0 }, void 0, !0) : u("", !0)
       ], 6)) : u("", !0)
@@ -9999,7 +10017,7 @@ function pm(e, s, t, a, n, i) {
 const b_ = /* @__PURE__ */ v(gm, [["render", pm]]), hm = {
   name: "ecs-input-float",
   emits: ["input"],
-  mixins: [ue],
+  mixins: [fe],
   props: {
     /** Input type, supports most HTML5 types. */
     type: {
@@ -10170,10 +10188,10 @@ const k_ = /* @__PURE__ */ v(km, [["render", wm]]), Sm = {
       this.$emit("indexPosKeyPressed", e), e.stopPropagation(), e.key == "Enter" && e.preventDefault();
     }
   }
-}, xm = {
+}, Cm = {
   key: 0,
   class: "ecs-viewer-toolbar-jumper-inputs"
-}, Cm = ["disabled"];
+}, xm = ["disabled"];
 function Bm(e, s, t, a, n, i) {
   const r = g("ecs-button-toolbar"), c = g("ecs-button-toolbar-group");
   return o(), h(c, { class: "ecs-viewer-toolbar-jumper" }, {
@@ -10186,7 +10204,7 @@ function Bm(e, s, t, a, n, i) {
         icon: "toolbar-page-navigation",
         "aria-label": i.ariaLabelPrev
       }, null, 8, ["disabled", "title", "aria-label"]),
-      t.showCount ? (o(), l("div", xm, [
+      t.showCount ? (o(), l("div", Cm, [
         f("div", {
           onClick: s[1] || (s[1] = (d) => e.$emit("selectCurEntryText")),
           onKeydown: s[2] || (s[2] = (...d) => i.indexPosKeyPressed && i.indexPosKeyPressed(...d)),
@@ -10195,7 +10213,7 @@ function Bm(e, s, t, a, n, i) {
           class: "ecs-viewer-toolbar-jumper-input",
           disabled: t.navigating || null,
           id: "currEntry"
-        }, w(t.currentEntry), 41, Cm),
+        }, w(t.currentEntry), 41, xm),
         D(" /  "),
         f("div", null, w(t.totalEntries), 1)
       ])) : u("", !0),
@@ -10421,7 +10439,7 @@ function jm(e, s, t, a, n, i) {
     ])
   ]);
 }
-const x_ = /* @__PURE__ */ v(Mm, [["render", jm], ["__scopeId", "data-v-0346f2c1"]]), Um = {
+const C_ = /* @__PURE__ */ v(Mm, [["render", jm], ["__scopeId", "data-v-0346f2c1"]]), Um = {
   // eslint-disable-next-line vue/multi-word-component-names
   name: "ecs-pane",
   inject: ["requestUpdate", "onPaneAdd", "onPaneRemove", "onPaneClick"],
@@ -10475,7 +10493,7 @@ function Gm(e, s, t, a, n, i) {
   return o(), l("div", {
     class: "ecs-pane",
     onClick: s[0] || (s[0] = (r) => i.onPaneClick(r, e._.uid)),
-    style: C(e.style)
+    style: x(e.style)
   }, [
     p(e.$slots, "default")
   ], 4);
@@ -10876,14 +10894,14 @@ function ep(e, s, t, a, n, i) {
       e.$slots.sidebar ? (o(), l("div", {
         key: 0,
         class: y(["ecs-index-layout-sidebar", [t.overlaySidebar ? "overlay" : ""]]),
-        style: C(i.sidebarPosition)
+        style: x(i.sidebarPosition)
       }, [
         p(e.$slots, "sidebar", {}, void 0, !0)
       ], 6)) : u("", !0)
     ], 2)
   ], 2);
 }
-const C_ = /* @__PURE__ */ v(Xm, [["render", ep], ["__scopeId", "data-v-60a69d4e"]]), tp = {
+const x_ = /* @__PURE__ */ v(Xm, [["render", ep], ["__scopeId", "data-v-60a69d4e"]]), tp = {
   name: "ecs-layout-directory",
   props: {
     /** Adds some inner padding to the index content area. Should be used for non-table indexes. */
@@ -10922,8 +10940,8 @@ function rp(e, s, t, a, n, i) {
 }
 const B_ = /* @__PURE__ */ v(tp, [["render", rp], ["__scopeId", "data-v-f5afc4e6"]]), lp = {
   name: "ecs-layout-data-table",
-  components: { EcsActionToolbar: Si, EcsButton: xe },
-  mixins: [ue],
+  components: { EcsActionToolbar: Si, EcsButton: Ce },
+  mixins: [fe],
   props: {
     /** Needs to be set when the edit/view sidebar is expanded. */
     sidebarExpanded: {
@@ -10992,7 +11010,7 @@ function hp(e, s, t, a, n, i) {
           "data-test": "button-toggle-statistics"
         }, null, 8, ["onClick", "type", "active", "aria-label", "title", "aria-controls"])) : u("", !0)
       ])) : u("", !0),
-      _(pe, { name: n.statisticsBarTransition }, {
+      _(ue, { name: n.statisticsBarTransition }, {
         default: S(() => [
           e.$slots.statistics && n.showStatistics ? (o(), l("div", {
             key: 0,
@@ -11111,7 +11129,7 @@ function kp(e, s, t, a, n, i) {
     default: S(() => [
       f("div", {
         class: y(["ecs-legend-item-color", t.type]),
-        style: C({ backgroundColor: t.color })
+        style: x({ backgroundColor: t.color })
       }, null, 6),
       f("div", yp, w(t.label), 1),
       t.count ? (o(), l("div", bp, w(t.count), 1)) : u("", !0),
@@ -11119,7 +11137,7 @@ function kp(e, s, t, a, n, i) {
       t.highlight || t.hover ? (o(), l("div", {
         key: 2,
         class: "ecs-legend-item-highlight",
-        style: C({ backgroundColor: t.color })
+        style: x({ backgroundColor: t.color })
       }, null, 4)) : u("", !0),
       t.hover ? (o(), h(r, { key: 3 })) : u("", !0)
     ]),
@@ -11131,7 +11149,7 @@ const I_ = /* @__PURE__ */ v(vp, [["render", kp], ["__scopeId", "data-v-6d506293
   components: {
     EcsFlexRow: Te,
     EcsSticker: Fe,
-    EcsSkeletonLoader: fe
+    EcsSkeletonLoader: ge
   },
   props: {
     /** Determines the type of log message, which also impacts the styling of it. */
@@ -11168,18 +11186,18 @@ const I_ = /* @__PURE__ */ v(vp, [["render", kp], ["__scopeId", "data-v-6d506293
       return ["warning", "error"].includes(this.type) ? "alert" : null;
     }
   }
-}, Sp = { class: "ecs-log-message-content" }, xp = {
+}, Sp = { class: "ecs-log-message-content" }, Cp = {
   key: 2,
   class: "ecs-log-message-meta"
 };
-function Cp(e, s, t, a, n, i) {
+function xp(e, s, t, a, n, i) {
   const r = g("ecs-skeleton-loader"), c = g("ecs-sticker"), d = g("ecs-flex-row");
   return o(), h(d, {
     class: y(["ecs-log-message", [t.type, t.highlight ? "highlighted" : ""]]),
     role: i.alertRole,
     "aria-busy": t.loading || null,
     align: "start",
-    style: C(i.padding)
+    style: x(i.padding)
   }, {
     default: S(() => [
       t.loading && t.type != "blank" ? (o(), h(r, {
@@ -11199,12 +11217,12 @@ function Cp(e, s, t, a, n, i) {
           class: "skeleton-text"
         })) : p(e.$slots, "default", { key: 1 }, void 0, !0)
       ]),
-      t.meta && !t.loading ? (o(), l("div", xp, w(t.meta), 1)) : u("", !0)
+      t.meta && !t.loading ? (o(), l("div", Cp, w(t.meta), 1)) : u("", !0)
     ]),
     _: 3
   }, 8, ["class", "role", "aria-busy", "style"]);
 }
-const E_ = /* @__PURE__ */ v(wp, [["render", Cp], ["__scopeId", "data-v-d461aa9b"]]), Bp = {
+const E_ = /* @__PURE__ */ v(wp, [["render", xp], ["__scopeId", "data-v-d461aa9b"]]), Bp = {
   name: "ecs-map",
   components: { EcsFocusRing: L },
   props: {
@@ -11307,7 +11325,7 @@ const $_ = /* @__PURE__ */ v(Bp, [["render", Ep], ["__scopeId", "data-v-e2371c57
   class: "ecs-modal-footer-wrap"
 }, Op = /* @__PURE__ */ Pp(() => /* @__PURE__ */ f("div", { class: "ecs-modal-backdrop ecs-modal-sheet-backdrop" }, null, -1));
 function Ap(e, s, t, a, n, i) {
-  return o(), h(pe, { name: "dialog-fade" }, {
+  return o(), h(ue, { name: "dialog-fade" }, {
     default: S(() => [
       n.isShown ? (o(), l("div", {
         key: 0,
@@ -11315,7 +11333,7 @@ function Ap(e, s, t, a, n, i) {
       }, [
         f("div", {
           class: "ecs-modal-dialog ecs-modal-sheet",
-          style: C(i.fixedHeightStyle)
+          style: x(i.fixedHeightStyle)
         }, [
           e.$slots.header ? (o(), l("div", Tp, [
             p(e.$slots, "header", {}, void 0, !0)
@@ -11337,7 +11355,7 @@ const P_ = /* @__PURE__ */ v($p, [["render", Ap], ["__scopeId", "data-v-8be29ca7
   name: "ecs-modal-header",
   emits: ["close"],
   components: {
-    EcsButton: xe,
+    EcsButton: Ce,
     EcsFocusRing: L
   },
   props: {
@@ -11900,13 +11918,13 @@ const A_ = /* @__PURE__ */ v(oh, [["render", lh], ["__scopeId", "data-v-e28fc40f
 }, wh = { class: "ecs-overlay-footer-content" }, Sh = {
   key: 0,
   class: "spacer-sidebar"
-}, xh = {
+}, Ch = {
   key: 1,
   class: "spacer-scrollbar"
 };
-function Ch(e, s, t, a, n, i) {
+function xh(e, s, t, a, n, i) {
   const r = g("ecs-icon"), c = g("ecs-button-toolbar"), d = g("ecs-alert");
-  return o(), h(pe, {
+  return o(), h(ue, {
     name: "fade",
     appear: ""
   }, {
@@ -11914,11 +11932,11 @@ function Ch(e, s, t, a, n, i) {
       n.isShown ? (o(), l("div", {
         key: 0,
         class: "ecs-overlay",
-        style: C({ top: t.offsetTop + "px", height: "calc(100vh - " + t.offsetTop + "px" })
+        style: x({ top: t.offsetTop + "px", height: "calc(100vh - " + t.offsetTop + "px" })
       }, [
         f("header", {
           class: "ecs-overlay-header",
-          style: C(e.$slots.alert ? "" : "border-bottom: 1px solid var(--color-gray-4);")
+          style: x(e.$slots.alert ? "" : "border-bottom: 1px solid var(--color-gray-4);")
         }, [
           f("div", dh, [
             t.icon ? (o(), h(r, {
@@ -11986,14 +12004,14 @@ function Ch(e, s, t, a, n, i) {
           }, [
             f("div", {
               class: y(["ecs-overlay-content-inner-inner", e.$slots.sidebar && !t.fullWidth && n.width > 1500 ? "has-sidebar" : " "]),
-              style: C({ width: i.contentWidth, maxWidth: i.contentMaxWidth, minWidth: i.contentMinWidth, paddingLeft: i.contentPadding, paddingRight: i.contentPadding })
+              style: x({ width: i.contentWidth, maxWidth: i.contentMaxWidth, minWidth: i.contentMinWidth, paddingLeft: i.contentPadding, paddingRight: i.contentPadding })
             }, [
               p(e.$slots, "default", {}, void 0, !0)
             ], 6),
             e.$slots.sidebar && n.width > 1500 ? (o(), l("div", vh, [
               p(e.$slots, "sidebar", {}, void 0, !0)
             ])) : u("", !0),
-            _(pe, { name: "slide" }, {
+            _(ue, { name: "slide" }, {
               default: S(() => [
                 e.$slots.sidebar && n.width <= 1500 && n.showSidebar ? (o(), l("div", yh, [
                   p(e.$slots, "sidebar", {}, void 0, !0)
@@ -12009,12 +12027,12 @@ function Ch(e, s, t, a, n, i) {
           f("div", wh, [
             f("div", {
               class: "ecs-overlay-footer-content-inner",
-              style: C({ width: i.contentWidth, maxWidth: i.contentMaxWidth, minWidth: i.contentMinWidth, paddingLeft: i.contentPadding, paddingRight: i.contentPadding })
+              style: x({ width: i.contentWidth, maxWidth: i.contentMaxWidth, minWidth: i.contentMinWidth, paddingLeft: i.contentPadding, paddingRight: i.contentPadding })
             }, [
               p(e.$slots, "footer", {}, void 0, !0)
             ], 4),
             e.$slots.sidebar && n.width > 1500 ? (o(), l("div", Sh)) : u("", !0),
-            n.footerScrollSpacer ? (o(), l("div", xh)) : u("", !0)
+            n.footerScrollSpacer ? (o(), l("div", Ch)) : u("", !0)
           ])
         ])) : u("", !0)
       ], 4)) : u("", !0)
@@ -12022,11 +12040,11 @@ function Ch(e, s, t, a, n, i) {
     _: 3
   });
 }
-const N_ = /* @__PURE__ */ v(ch, [["render", Ch], ["__scopeId", "data-v-ba8a417e"]]), Bh = {
+const N_ = /* @__PURE__ */ v(ch, [["render", xh], ["__scopeId", "data-v-ba8a417e"]]), Bh = {
   name: "ecs-pagination",
   emits: ["firstPage", "prevPage", "nextPage", "lastPage", "updatePage", "itemsPerPage"],
   components: {
-    EcsButton: xe,
+    EcsButton: Ce,
     EcsSelect: js,
     EcsFlexRow: Te,
     EcsIcon: M
@@ -12144,7 +12162,7 @@ function Lh(e, s, t, a, n, i) {
     _(c, {
       gap: 8,
       class: "ecs-pagination-nav",
-      style: C({ minWidth: t.tabsSpacing - 4 + "px" })
+      style: x({ minWidth: t.tabsSpacing - 4 + "px" })
     }, {
       default: S(() => [
         t.type == "paginated" ? (o(), l(X, { key: 0 }, [
@@ -12356,13 +12374,13 @@ function Nh(e, s, t, a, n, i) {
   const r = g("ecs-icon"), c = g("ecs-sticker");
   return o(), l("div", {
     class: y(["ecs-party-entry", [t.party, t.color && t.background ? "ecs-party-entry-colored" : ""]]),
-    style: C({ color: t.color })
+    style: x({ color: t.color })
   }, [
     t.icon && t.iconPosition == "left" ? (o(), h(r, {
       key: 0,
       type: i.iconType,
       color: i.iconColor,
-      style: C("margin-right:" + t.iconSpacing),
+      style: x("margin-right:" + t.iconSpacing),
       size: t.iconSize
     }, null, 8, ["type", "color", "style", "size"])) : u("", !0),
     t.shared ? (o(), h(c, {
@@ -12376,7 +12394,7 @@ function Nh(e, s, t, a, n, i) {
       key: 2,
       type: i.iconType,
       color: i.iconColor,
-      style: C("margin-left:" + t.iconSpacing),
+      style: x("margin-left:" + t.iconSpacing),
       size: t.iconSize
     }, null, 8, ["type", "color", "style", "size"])) : u("", !0),
     t.background ? (o(), l("div", Ah)) : u("", !0)
@@ -12509,7 +12527,7 @@ function Uh(e, s, t, a, n, i) {
 }
 const V_ = /* @__PURE__ */ v(Wh, [["render", Uh], ["__scopeId", "data-v-c1516cc2"]]), Gh = {
   name: "ecs-rating-star-read",
-  components: { EcsSkeletonLoader: fe },
+  components: { EcsSkeletonLoader: ge },
   props: {
     /** Sets the star rating count.  */
     rating: {
@@ -12562,7 +12580,7 @@ function Xh(e, s, t, a, n, i) {
 const Zh = /* @__PURE__ */ v(Gh, [["render", Xh], ["__scopeId", "data-v-8f28e1c1"]]), Jh = {
   name: "ecs-rating-favorability",
   emits: ["click"],
-  components: { EcsIcon: M, EcsSkeletonLoader: fe },
+  components: { EcsIcon: M, EcsSkeletonLoader: ge },
   props: {
     /** If set, the favorability icon will have a label as well. */
     label: {
@@ -12845,7 +12863,7 @@ const H_ = /* @__PURE__ */ v(iv, [["render", vv], ["__scopeId", "data-v-c6ffbe27
 }, vt = (e) => (be("data-v-f63b724f"), e = e(), _e(), e), bv = {
   key: 0,
   class: "ecs-rating-reset"
-}, _v = { class: "ecs-rating-write" }, kv = ["checked", "disabled"], wv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), Sv = ["checked", "disabled"], xv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), Cv = ["checked", "disabled"], Bv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), zv = ["checked", "disabled"], Iv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1));
+}, _v = { class: "ecs-rating-write" }, kv = ["checked", "disabled"], wv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), Sv = ["checked", "disabled"], Cv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), xv = ["checked", "disabled"], Bv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1)), zv = ["checked", "disabled"], Iv = /* @__PURE__ */ vt(() => /* @__PURE__ */ f("i", null, null, -1));
 function Ev(e, s, t, a, n, i) {
   return o(), l("div", {
     class: y(["ecs-rating-form", [t.large ? "ecs-rating-form-lg" : ""]])
@@ -12869,7 +12887,7 @@ function Ev(e, s, t, a, n, i) {
         checked: t.value == 2 || null,
         disabled: t.disabled
       }, null, 8, Sv),
-      xv,
+      Cv,
       f("input", {
         type: "radio",
         value: "3",
@@ -12877,7 +12895,7 @@ function Ev(e, s, t, a, n, i) {
         onClick: s[2] || (s[2] = (r) => e.$emit("click", r)),
         checked: t.value == 3 || null,
         disabled: t.disabled
-      }, null, 8, Cv),
+      }, null, 8, xv),
       Bv,
       f("input", {
         type: "radio",
@@ -13287,7 +13305,7 @@ function cy(e, s, t, a, n, i) {
   const r = g("ecs-tab-bar"), c = g("ecs-tabs");
   return o(), l("aside", {
     class: y(["ecs-sidebar", [i.sizeClass, i.expandClass]]),
-    style: C(i.height)
+    style: x(i.height)
   }, [
     f("div", ly, [
       _(r, { type: "sidebar" }, {
@@ -13400,7 +13418,7 @@ function ky(e, s, t, a, n, i) {
         p(e.$slots, "primary-controls", {}, void 0, !0)
       ])) : u("", !0)
     ])),
-    _(pe, { name: "expansion" }, {
+    _(ue, { name: "expansion" }, {
       default: S(() => [
         t.subHeaderExpanded && e.$slots.subheader ? (o(), l("div", by, [
           p(e.$slots, "subheader", {}, void 0, !0)
@@ -13408,7 +13426,7 @@ function ky(e, s, t, a, n, i) {
       ]),
       _: 3
     }),
-    _(pe, { name: "expansion" }, {
+    _(ue, { name: "expansion" }, {
       default: S(() => [
         t.tertiaryHeaderExpanded && e.$slots.tertiaryheader ? (o(), l("div", _y, [
           p(e.$slots, "tertiaryheader", {}, void 0, !0)
@@ -13427,23 +13445,23 @@ const J_ = /* @__PURE__ */ v(my, [["render", ky], ["__scopeId", "data-v-da9abc3f
       default: !1
     }
   }
-}, Sy = { class: "ecs-structured-content-left" }, xy = {
+}, Sy = { class: "ecs-structured-content-left" }, Cy = {
   key: 0,
   class: "ecs-structured-content-right"
 };
-function Cy(e, s, t, a, n, i) {
+function xy(e, s, t, a, n, i) {
   return o(), l("div", {
     class: y(["ecs-structured-content", t.vertical ? "ecs-structured-content-vertical" : ""])
   }, [
     f("div", Sy, [
       p(e.$slots, "default", {}, void 0, !0)
     ]),
-    e.$slots.extend ? (o(), l("div", xy, [
+    e.$slots.extend ? (o(), l("div", Cy, [
       p(e.$slots, "extend", {}, void 0, !0)
     ])) : u("", !0)
   ], 2);
 }
-const Q_ = /* @__PURE__ */ v(wy, [["render", Cy], ["__scopeId", "data-v-cec887e2"]]), By = {
+const Q_ = /* @__PURE__ */ v(wy, [["render", xy], ["__scopeId", "data-v-cec887e2"]]), By = {
   name: "ecs-swatches-picker",
   emits: ["update:modelValue"],
   props: {
@@ -13513,7 +13531,7 @@ function Iy(e, s, t, a, n, i) {
       "aria-label": r.title,
       "aria-checked": n.selectedColor == r.hex ? "true" : "false",
       class: y(["ecs-swatches-color", n.selectedColor == r.hex ? "active" : ""]),
-      style: C({ backgroundColor: r.hex, color: r.hex })
+      style: x({ backgroundColor: r.hex, color: r.hex })
     }, null, 46, zy))), 128))
   ], 2);
 }
@@ -13687,7 +13705,7 @@ function Ny(e, s, t, a, n, i) {
 const s0 = /* @__PURE__ */ v(Ty, [["render", Ny], ["__scopeId", "data-v-5098e4d3"]]), Dy = {
   name: "ecs-tag",
   emits: ["click"],
-  components: { EcsSkeletonLoader: fe, EcsFocusRing: L },
+  components: { EcsSkeletonLoader: ge, EcsFocusRing: L },
   props: {
     /** Determines the visual style of the tag. */
     type: {
@@ -13737,7 +13755,7 @@ const s0 = /* @__PURE__ */ v(Ty, [["render", Ny], ["__scopeId", "data-v-5098e4d3
     },
     colorIsDark() {
       if (this.color && this.color !== "")
-        return x(this.color).isDark();
+        return C(this.color).isDark();
     },
     customColorStyle() {
       if (this.loading)
@@ -13747,11 +13765,11 @@ const s0 = /* @__PURE__ */ v(Ty, [["render", Ny], ["__scopeId", "data-v-5098e4d3
         };
       if (this.color && this.color !== "")
         return this.colorIsDark ? {
-          background: x(this.color).toRgbString(),
-          color: x(this.color).lighten(65).toRgbString()
+          background: C(this.color).toRgbString(),
+          color: C(this.color).lighten(65).toRgbString()
         } : {
-          background: x(this.color).toRgbString(),
-          color: x(this.color).darken(65).toRgbString()
+          background: C(this.color).toRgbString(),
+          color: C(this.color).darken(65).toRgbString()
         };
     }
   },
@@ -13774,7 +13792,7 @@ function Hy(e, s, t, a, n, i) {
       t.loading ? "loading" : ""
     ]]),
     onClick: s[0] || (s[0] = (...d) => i.handleClick && i.handleClick(...d)),
-    style: C(i.customColorStyle),
+    style: x(i.customColorStyle),
     role: t.hover ? "button" : !1,
     tabindex: t.hover ? "0" : "-1",
     "aria-busy": t.loading || null
@@ -13872,7 +13890,7 @@ const o0 = /* @__PURE__ */ v(Ky, [["render", Xy], ["__scopeId", "data-v-451fee48
   emits: ["click"],
   components: {
     EcsIcon: M,
-    EcsSkeletonLoader: fe
+    EcsSkeletonLoader: ge
   },
   props: {
     /** Displays a status indicator based on the passed value. */
@@ -13964,7 +13982,7 @@ const l0 = /* @__PURE__ */ v(ib, [["render", ab], ["__scopeId", "data-v-6af94f50
   name: "ecs-tree-list-item",
   emits: ["click", "toggled"],
   components: { EcsIcon: M, EcsButtonCollapse: Ht, EcsFocusRing: L },
-  mixins: [ue],
+  mixins: [fe],
   props: {
     /** ID for the Tree List Item */
     id: String,
@@ -14169,7 +14187,7 @@ const d0 = /* @__PURE__ */ v(gb, [["render", pb], ["__scopeId", "data-v-a5153e06
   name: "EcsTypeConfirmation",
   emits: ["update:modelValue"],
   components: { EcsInput: dm, EcsAlert: ws, EcsFormGroup: Tg },
-  mixins: [ue],
+  mixins: [fe],
   props: {
     verb: {
       type: String,
@@ -14302,7 +14320,7 @@ const u0 = /* @__PURE__ */ v(hb, [["render", kb], ["__scopeId", "data-v-a2927d0c
     */
   }
 }, Sb = ["poster", "autoplay", "loop", "controls", "src"];
-function xb(e, s, t, a, n, i) {
+function Cb(e, s, t, a, n, i) {
   return o(), l("video", {
     poster: t.posterImage,
     autoplay: t.autoplay,
@@ -14312,7 +14330,7 @@ function xb(e, s, t, a, n, i) {
     src: t.mp4Source
   }, null, 8, Sb);
 }
-const f0 = /* @__PURE__ */ v(wb, [["render", xb], ["__scopeId", "data-v-ce84fcb3"]]);
+const f0 = /* @__PURE__ */ v(wb, [["render", Cb], ["__scopeId", "data-v-ce84fcb3"]]);
 export {
   Si as EcsActionToolbar,
   ws as EcsAlert,
@@ -14323,7 +14341,7 @@ export {
   Eb as EcsBreadcrumbButton,
   $b as EcsBreadcrumbTitle,
   Pb as EcsBulkSelector,
-  xe as EcsButton,
+  Ce as EcsButton,
   Ht as EcsButtonCollapse,
   Mb as EcsButtonContext,
   Lb as EcsButtonContextGroup,
@@ -14392,10 +14410,10 @@ export {
   wg as EcsInputSearch,
   w_ as EcsJumperDocument,
   S_ as EcsJumperIndex,
-  x_ as EcsJumperPage,
+  C_ as EcsJumperPage,
   z_ as EcsLayoutDataTable,
   B_ as EcsLayoutDirectory,
-  C_ as EcsLayoutIndex,
+  x_ as EcsLayoutIndex,
   I_ as EcsLegendItem,
   E_ as EcsLogMessage,
   $_ as EcsMap,
@@ -14416,11 +14434,11 @@ export {
   fo as EcsPopoverListItem,
   kf as EcsProgress,
   H_ as EcsQuicklink,
-  Ca as EcsRadiobutton,
+  xa as EcsRadiobutton,
   sv as EcsRatingFavorability,
   Zh as EcsRatingStarRead,
   q_ as EcsRatingStarWrite,
-  Cg as EcsScrollContainer,
+  xg as EcsScrollContainer,
   W_ as EcsSection,
   j_ as EcsSegment,
   js as EcsSelect,
@@ -14433,7 +14451,7 @@ export {
   X_ as EcsSidebarContent,
   Z_ as EcsSidebarFooter,
   J_ as EcsSidebarHeader,
-  fe as EcsSkeletonLoader,
+  ge as EcsSkeletonLoader,
   Ra as EcsSortbutton,
   Ym as EcsSplitpanes,
   Hu as EcsStateIcon,